File size: 8,799 Bytes
f7274eb 3d34fd4 f7274eb 3d34fd4 f7274eb bcf6d74 f7274eb bcf6d74 f7274eb bcf6d74 f7274eb bcf6d74 f7274eb bcf6d74 f7274eb 3d34fd4 f7274eb | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ABC Security | Your Local Security Company</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
</head>
<body class="bg-gray-50">
<custom-navbar></custom-navbar>
<!-- Hero Section -->
<section class="relative h-screen flex items-center justify-center overflow-hidden">
<div class="absolute inset-0 bg-black/50 z-10"></div>
<video autoplay loop muted class="absolute w-full h-full object-cover">
<source src="https://v.ftcdn.net/06/16/92/78/700_F_616927869_GbzLy2lBsb5Jqb9GzUHm3RGMSYmALEAx_ST.mp4" type="video/mp4">
</video>
<div class="relative z-20 text-center px-4">
<h1 class="text-4xl md:text-6xl font-bold text-white uppercase mb-4">Your Local Security Company</h1>
<p class="text-xl md:text-2xl text-white mb-8">Top Security Solutions for Stellenbosch and the Western Cape</p>
<a href="#services" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full uppercase transition duration-300 inline-block">Our Services</a>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-20 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-4">Security Services</h2>
<p class="text-xl text-center text-gray-600 mb-12 max-w-3xl mx-auto">We offer a near full spectrum of security solutions</p>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Armed Response -->
<div class="bg-gray-50 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
<div class="bg-blue-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4">
<i data-feather="shield" class="text-blue-600"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Armed Response</h3>
<p class="text-gray-600 mb-4">The quickest response in Stellenbosch. Our average response time is 5 minutes.</p>
<a href="#" class="text-blue-600 font-semibold hover:text-blue-800 flex items-center">
Find out more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
<!-- CCTV Monitoring -->
<div class="bg-gray-50 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
<div class="bg-blue-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4">
<i data-feather="video" class="text-blue-600"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">CCTV Monitoring</h3>
<p class="text-gray-600 mb-4">The ABC Control Room monitors numerous cameras over various locations across Stellenbosch and surrounds.</p>
<a href="#" class="text-blue-600 font-semibold hover:text-blue-800 flex items-center">
Find out more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
<!-- Commercial Guarding -->
<div class="bg-gray-50 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
<div class="bg-blue-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4">
<i data-feather="users" class="text-blue-600"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Commercial Guarding</h3>
<p class="text-gray-600 mb-4">We have over 60 sites and we keep growing day by day! Our secret is excellent service and friendly staff.</p>
<a href="#" class="text-blue-600 font-semibold hover:text-blue-800 flex items-center">
Find out more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
<!-- Technical and support -->
<div class="bg-gray-50 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300">
<div class="bg-blue-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4">
<i data-feather="tool" class="text-blue-600"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Technical and support</h3>
<p class="text-gray-600 mb-4">Whether you need an alarm upgrade, moving a sensor or a multi-million rand CCTV system installed.</p>
<a href="#" class="text-blue-600 font-semibold hover:text-blue-800 flex items-center">
Find out more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
</div>
</section>
<!-- Reviews Section -->
<section class="py-20 bg-blue-900 text-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl md:text-4xl font-bold text-center text-white mb-4">Our community trusts us to keep them safe</h2>
<p class="text-xl text-center text-blue-200 mb-12">We don't just say it, they do!</p>
<div class="flex flex-col md:flex-row items-center justify-center gap-8">
<div class="bg-blue-800 p-8 rounded-lg shadow-md text-center">
<div class="flex justify-center items-center mb-4">
<div class="flex">
<i data-feather="star" class="text-yellow-400 w-6 h-6 fill-current"></i>
<i data-feather="star" class="text-yellow-400 w-6 h-6 fill-current"></i>
<i data-feather="star" class="text-yellow-400 w-6 h-6 fill-current"></i>
<i data-feather="star" class="text-yellow-400 w-6 h-6 fill-current"></i>
<i data-feather="star" class="text-yellow-400 w-6 h-6 fill-current"></i>
</div>
</div>
<p class="text-2xl font-bold text-white mb-2">4.4 ★★★★★</p>
<p class="text-blue-200 mb-6">Based on 47 reviews</p>
<a href="#" class="text-white font-semibold hover:text-blue-200">View all reviews</a>
</div>
<div class="grid md:grid-cols-2 gap-6 max-w-4xl">
<!-- Review 1 -->
<div class="bg-blue-800 p-6 rounded-lg shadow-md">
<p class="text-blue-100 italic mb-4">"Amazing Security company. Look no further in Stellenbosch. Saved my life"</p>
<p class="font-semibold text-white">- keith keyzer</p>
<p class="text-sm text-blue-200">3 years ago</p>
</div>
<!-- Review 2 -->
<div class="bg-blue-800 p-6 rounded-lg shadow-md">
<p class="text-blue-100 italic mb-4">"Great team of passionate people that keep you safe. ABC always goes the extra mile and really supports the local community of Stellenbosch"</p>
<p class="font-semibold text-white">- Richard Adendorff</p>
<p class="text-sm text-blue-200">3 years ago</p>
</div>
</div>
</div>
</div>
</section>
<!-- Emergency Contact -->
<section class="py-16 bg-red-600 text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">24 hour emergency control room</h2>
<a href="tel:+27218874777" class="text-3xl md:text-5xl font-bold block mb-8 hover:text-blue-200 transition duration-300">021 887 4777</a>
<p class="text-xl mb-8">For immediate assistance, call our emergency line anytime</p>
<a href="contact.html" class="bg-white text-blue-900 hover:bg-gray-100 font-bold py-3 px-8 rounded-full uppercase transition duration-300 inline-block">Contact Us</a>
</div>
</section>
<custom-footer></custom-footer>
<script>
feather.replace();
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |