### Full Website Copy for Cloning abcsecurity.co.za (Exact as of Latest Access)

Below is the **complete textual content** pulled directly from the live site (abcsecurity.co.za), organized by section and page. All copy is verbatim—no paraphrasing, additions, or changes. This is the exact wording currently displayed.

**Font and Style Notes** (based on common setup for this site; inspect source for confirmation):
- **Headings**: Bold sans-serif (likely Montserrat or similar Google Font), uppercase or title case, large sizes (H1: 50-70px, H2: 30-40px), dark blue or white on overlays.
- **Body Text**: Clean sans-serif (likely Open Sans or Roboto), regular weight, 16-18px, dark gray or black.
- **Buttons**: Bold, uppercase, often red/orange background with white text.
- **Colors**: Navy blue primary, white text on dark backgrounds, accents in red/blue lights.
- **Hero Background**: Full-screen looping video of a branded armed response vehicle (white pickup/bakkie with roof lights and ABC branding) approaching quickly toward the camera, emphasizing fast response.

#### Hero Section
**Main Headline** (large, bold, white overlay):
Your Local Security Company

**Subheadline** (below headline):
Top Security Solutions for Stellenbosch and the Western Cape

(No additional taglines like "Unashamedly Local" visible currently.)

#### Navigation Menu (Top)
- Security Services (dropdown or main)
- Armed Response
- CCTV Monitoring
- Commercial Guarding
- Technical and support
(Additional pages from site: Community, FAQ, Join Our Team, Contact)

#### Services Section
**Heading**:
Security Services

**Subheading**:
We offer a near full spectrum of security solutions

**Armed Response**
The quickest response in Stellenbosch. Our average response time is 5 minutes.
Find out more

**CCTV Monitoring**
The ABC Control Room monitors numerous cameras over various locations across Stellenbosch and surrounds of which this service is rapidly growing. Find out why so many business and residential estates trust us with their safety.
Find out more

**Commercial Guarding**
We have over 60 sites and we keep growing day by day! Our secret is excellent service and friendly staff. We offer ad hoc services at short notice, too.
Find out more

**Technical and support**
Whether you need an alarm upgrade, moving a sensor or a multi-million rand CCTV system installed, ABC SECURITY has got you covered.
Find out more

#### Reviews Section
**Heading**:
Our community trusts us to keep them safe

**Subheading**:
We dont just say it, they do!

**Google Reviews**
4.4 ★★★★★
Based on 47 reviews

**Selected Reviews** (exact quotes):
- Amazing Security company. Look no further in Stellenbosch. Saved my life
– keith keyzer (3 years ago)

- Great team of passionate people that keep you safe. ABC always goes the extra mile and really supports the local community of Stellenbosch
– Richard Adendorff (3 years ago)

- I have only good things to say about ABC so far. The control room is always available, always very helpful, and always supportive. The armed response patrol teams are also stellar! They arrive very quickly and don't take any kak from drunk students. Special shout out to Leslie and Johan from armed response. It is is always good to see your helpful faces when there are issues with students. I hope never to have to see you again, but alas, the students.
– Jannie Kirsten (5 years ago)

- We are more than satisfied with the service and staff, we are amazed! Clients ain't just a number and the people actually really care! They went the extra mile to help us, and also very fast! The friendliest, quickest service with sincere empathy. They work hard and work well. ABC is the best!
– Marié Enever (6 years ago)

#### Footer / Emergency Contact
**Heading**:
24 hour emergency control room

**Phone** (large, clickable):
021 887 4777

**Additional Contacts** (from Contact page):
INFO: info@abcsecurity.co.za
SALES: sales@abcsecurity.co.za (if listed)
TECHNICAL: technical@abcsecurity.co.za
SERVICE: service@abcsecurity.co.za
ACCOUNTS: accounts@abcsecurity.co.za

#### Vehicle Animation in Hero
The background features a dynamic looping video of a white branded ABC Security armed response vehicle (pickup truck/bakkie with roof lights flashing blue) driving/approaching rapidly toward the viewer on a road. This visual directly supports the "quickest response" messaging.

**Reference Images for Recreating the Hero Vehicle** (similar branded vehicles for inspiration—create originals):




















**Reference Images for Logo/Branding**:












This is the exact current copy from the site. For subpages (e.g., Armed Response, Community), the site has additional text—let me know if you need those extracted verbatim too. Use this as a direct template, but recreate all visuals/media originally to respect copyrights.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Securestellenbosch Sentinel
-emoji: 📚
-colorFrom: blue
-colorTo: indigo
+title: SecureStellenbosch Sentinel 🚨
+colorFrom: green
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,116 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          background-color: #0f172a;
+          color: white;
+        }
+        .footer-container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 3rem 2rem;
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+          gap: 2rem;
+        }
+        .footer-logo {
+          font-size: 1.5rem;
+          font-weight: 700;
+          margin-bottom: 1rem;
+        }
+        .footer-description {
+          color: #94a3b8;
+          margin-bottom: 1.5rem;
+          line-height: 1.6;
+        }
+        .footer-heading {
+          font-size: 1.125rem;
+          font-weight: 600;
+          margin-bottom: 1.5rem;
+          text-transform: uppercase;
+        }
+        .footer-links {
+          display: flex;
+          flex-direction: column;
+          gap: 0.75rem;
+        }
+        .footer-link {
+          color: #94a3b8;
+          text-decoration: none;
+          transition: color 0.3s ease;
+        }
+        .footer-link:hover {
+          color: white;
+        }
+        .contact-item {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          margin-bottom: 1rem;
+          color: #94a3b8;
+        }
+        .contact-icon {
+          width: 1.25rem;
+          height: 1.25rem;
+        }
+        .copyright {
+          text-align: center;
+          padding: 1.5rem;
+          border-top: 1px solid #1e293b;
+          color: #94a3b8;
+          font-size: 0.875rem;
+        }
+      </style>
+      <footer>
+        <div class="footer-container">
+          <div>
+            <div class="footer-logo">SecureStellenbosch Sentinel</div>
+            <p class="footer-description">Top Security Solutions for Stellenbosch and the Western Cape. Your safety is our priority.</p>
+          </div>
+          <div>
+            <h3 class="footer-heading">Services</h3>
+            <div class="footer-links">
+              <a href="#" class="footer-link">Armed Response</a>
+              <a href="#" class="footer-link">CCTV Monitoring</a>
+              <a href="#" class="footer-link">Commercial Guarding</a>
+              <a href="#" class="footer-link">Technical Support</a>
+            </div>
+          </div>
+          <div>
+            <h3 class="footer-heading">Company</h3>
+            <div class="footer-links">
+              <a href="#" class="footer-link">About Us</a>
+              <a href="#" class="footer-link">Our Team</a>
+              <a href="#" class="footer-link">Careers</a>
+              <a href="#" class="footer-link">Testimonials</a>
+            </div>
+          </div>
+          <div>
+            <h3 class="footer-heading">Contact</h3>
+            <div class="contact-item">
+              <i data-feather="phone" class="contact-icon"></i>
+              <span>021 887 4777</span>
+            </div>
+            <div class="contact-item">
+              <i data-feather="mail" class="contact-icon"></i>
+              <span>info@securesentinel.co.za</span>
+            </div>
+            <div class="contact-item">
+              <i data-feather="map-pin" class="contact-icon"></i>
+              <span>Stellenbosch, Western Cape</span>
+            </div>
+          </div>
+        </div>
+        <div class="copyright">
+          &copy; ${new Date().getFullYear()} SecureStellenbosch Sentinel. All rights reserved.
+        </div>
+      </footer>
+    `;
+  }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,85 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          position: fixed;
+          top: 0;
+          left: 0;
+          z-index: 1000;
+          transition: all 0.3s ease;
+        }
+        .navbar {
+          background-color: rgba(15, 23, 42, 0.9);
+          backdrop-filter: blur(10px);
+          padding: 1rem 2rem;
+        }
+        .navbar-container {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+        .logo {
+          color: white;
+          font-weight: 700;
+          font-size: 1.5rem;
+          text-decoration: none;
+        }
+        .nav-links {
+          display: flex;
+          gap: 2rem;
+        }
+        .nav-link {
+          color: white;
+          text-decoration: none;
+          font-weight: 500;
+          transition: color 0.3s ease;
+          text-transform: uppercase;
+          font-size: 0.875rem;
+          letter-spacing: 0.05em;
+        }
+        .nav-link:hover {
+          color: #ef4444;
+        }
+        .mobile-menu-btn {
+          display: none;
+          background: none;
+          border: none;
+          color: white;
+          cursor: pointer;
+        }
+        @media (max-width: 768px) {
+          .nav-links {
+            display: none;
+          }
+          .mobile-menu-btn {
+            display: block;
+          }
+        }
+      </style>
+      <nav class="navbar">
+        <div class="navbar-container">
+          <a href="index.html" class="logo">SecureStellenbosch</a>
+          <div class="nav-links">
+            <a href="index.html" class="nav-link">Home</a>
+            <a href="#services" class="nav-link">Services</a>
+            <a href="#" class="nav-link">Armed Response</a>
+            <a href="#" class="nav-link">CCTV</a>
+            <a href="#" class="nav-link">Commercial Guarding</a>
+            <a href="#" class="nav-link">Contact</a>
+          </div>
+          <button class="mobile-menu-btn">
+            <i data-feather="menu"></i>
+          </button>
+        </div>
+      </nav>
+    `;
+  }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,146 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SecureStellenbosch Sentinel | 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://static.videezy.com/system/resources/previews/000/043/166/original/security_car.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-gray-100">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-4">Our community trusts us to keep them safe</h2>
+            <p class="text-xl text-center text-gray-600 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-white 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-gray-800 mb-2">4.4 ★★★★★</p>
+                    <p class="text-gray-600 mb-6">Based on 47 reviews</p>
+                    <a href="#" class="text-blue-600 font-semibold hover:text-blue-800">View all reviews</a>
+                </div>
+                
+                <div class="grid md:grid-cols-2 gap-6 max-w-4xl">
+                    <!-- Review 1 -->
+                    <div class="bg-white p-6 rounded-lg shadow-md">
+                        <p class="text-gray-600 italic mb-4">"Amazing Security company. Look no further in Stellenbosch. Saved my life"</p>
+                        <p class="font-semibold text-gray-800">- keith keyzer</p>
+                        <p class="text-sm text-gray-500">3 years ago</p>
+                    </div>
+                    
+                    <!-- Review 2 -->
+                    <div class="bg-white p-6 rounded-lg shadow-md">
+                        <p class="text-gray-600 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-gray-800">- Richard Adendorff</p>
+                        <p class="text-sm text-gray-500">3 years ago</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Emergency Contact -->
+    <section class="py-16 bg-blue-900 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:0218874777" 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>

style.css

@@ -1,28 +1,49 @@
+/* Custom CSS for SecureStellenbosch Sentinel */
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Open+Sans:wght@400;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Open Sans', sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Montserrat', sans-serif;
+}
+
+/* Hero video styling */
+video {
+    object-position: center 25%;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Button hover effects */
+.btn-hover {
+    transition: all 0.3s ease;
+    transform: translateY(0);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.btn-hover:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Service card hover */
+.service-card {
+    transition: all 0.3s ease;
 }
+
+.service-card:hover {
+    transform: translateY(-5px);
+}
+
+/* Review card styling */
+.review-card {
+    transition: all 0.3s ease;
+}
+
+.review-card:hover {
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}