Remix

Make your own version of ClearView Secure

Edit the prompt below and generate a customized version in seconds.

Original by trymore jimmie

Describe your app

Fix and improve. // src/App.jsx
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

// Components
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import WhatsAppButton from "./components/WhatsAppButton";

// Pages
import Home from "./pages/Home";
import Services from "./pages/Services";
import About from "./pages/About";
import Contact from "./pages/Contact";
import Thankyou from "./pages/Thankyou";
import Gallery from "./pages/Gallery";
import { motion } from "framer-motion";

function App() {
  return (
    <Router>
      <Navbar />
      <WhatsAppButton />

<Footer />
    </Router>
  );
}

export default App;      /* src/App.css */

/* ==================== Root Container ==================== */
#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

/* ==================== Cards (shared) ==================== */
.card {
  flex: 1 1 250px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  padding: 25px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
/* ==================== Headings ==================== */
h1, h2, h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}

/* h1 for section/page titles */
h1 {
  font-size: 3rem;
  color: var(--royal-blue);
}

/* h2 for sub-sections */
h2 {
  font-size: 2.2rem;
  color: var(--royal-blue);
}

/* h3 for card titles / small headers */
h3 {
  font-size: 1.8rem;
  color: var(--royal-blue);
}

/* ==================== Buttons Global ==================== */
button, a.button {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  border-radius: 8px;
  padding: 12px 28px;
  cursor: pointer;
  transition: all 0.25s ease;
  .call-btn,
.quote-btn,
.contact-form button {
  border-radius: 50px;
  letter-spacing: 0.5px;
  font-size: 0.95rem;
}
}

button:hover, a.button:hover {
  transform: translateY(-2px);
}

/* ==================== Responsive Helpers ==================== */
@media (max-width: 768px) {
  h1 {
    font-size: 2.2rem;
  }

h2 {
    font-size: 1.8rem;
  }

h3 {
    font-size: 1.5rem;
  }

.container {
    padding: 0 15px;
  }
}   /* src/index.css */

/* ==================== Colors ==================== */
:root {
  --royal-blue: #0a2cff;      /* 🟦 Primary */
  --soft-blue: #f4f7ff;       /* 🔵 Soft blue-gray */
  --accent: #ffb300;          /* 🟡 Accent */
  --text-dark: #111111;       /* ⬛ Black */
  --white: #ffffff;           /* ⚪ White */
}

/* ==================== Reset & Base ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--white);
  color: var(--text-dark);
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

/* ==================== Utility Classes ==================== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.text-center {
  text-align: center;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-40 {
  margin-bottom: 40px;
}
import { Link } from "react-router-dom";
import { useEffect, useState } from "react";
import "./Navbar.css";
import logo from "../assets/logo.png";

export default function Navbar() {
  const [scrolled, setScrolled] = useState(false);

useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };

window.addEventListener("scroll", handleScroll);

return () => window.removeEventListener("scroll", handleScroll);
  }, []);

return (
    <nav className={`navbar ${scrolled ? "scrolled" : ""}`}>
      <div className="navbar-container">

<Link to="/" className="logo">
          <img src={logo} alt="logo" />
          <span>ClearView Security</span>
        </Link>

<div className="nav-links">
          <Link to="/">Home</Link>
          <Link to="/services">Services</Link>
          <Link to="/about">About</Link>
          <Link to="/gallery">Gallery</Link>
          <Link to="/contact">Contact</Link>
        </div>

</div>
    </nav>
  );
}   /* =========================
   NAVBAR BASE STYLE
========================= */
.navbar {
  position: sticky;
  top: 0;
  z-index: 999;

background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);

border-bottom: 1px solid #eee;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

padding: 20px 0;
  transition: all 0.3s ease-in-out;

font-family: 'Poppins', sans-serif;
}

/* SCROLLED STATE */
.navbar.scrolled {
  padding: 10px 0;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

/* =========================
   CONTAINER
========================= */
.navbar-container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;

display: flex;
  justify-content: space-between;
  align-items: center;
}

/* =========================
   LOGO
========================= */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* Logo image */
.logo img {
  height: 70px;
  width: auto;
  object-fit: contain;

transition: all 0.3s ease-in-out;
}

/* Logo text */
.logo span {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0a2cff;

transition: all 0.3s ease-in-out;
}

/* SCROLL EFFECT */
.navbar.scrolled .logo img {
  height: 50px;
  transform: scale(0.95);
  filter: brightness(0.95) saturate(1.3);
}

.navbar.scrolled .logo span {
  font-size: 1.1rem;
  color: #ffb300;
}

/* Hover effect */
.logo:hover img {
  transform: scale(1.05);
}

/* =========================
   NAV LINKS
========================= */
.nav-links {
  display: flex;
  align-items: center;
}

.nav-links a {
  margin-left: 25px;
  text-decoration: none;
  color: #111;
  font-weight: 500;

transition: all 0.3s ease;
}

.nav-links a:hover {
  color: #ffb300;
  transform: translateY(-2px);
}

/* =========================
   MOBILE RESPONSIVE
========================= */
@media (max-width: 768px) {
  .navbar-container {
    flex-direction: column;
    gap: 10px;
  }

.nav-links {
    flex-direction: column;
    gap: 12px;
  }

.nav-links a {
    margin-left: 0;
  }

.logo img {
    height: 55px;
  }
}  // src/components/HomeServices.jsx
import "./HomeServices.css";

export default function HomeServices() {
  const dstvServices = [
    "New installations",
    "Extra View setup",
    "Signal repairs",
  ];

const cctvServices = [
    "Home camera installation",
    "Business surveillance",
    "Remote viewing",
    "Smart home integration",
    "Fire alarm monitoring",
    "Gate automation",
  ];

return (
    <section className="home-services">
      <div className="container">
        <h2>Our Services</h2>

<div className="service-category">
          <h3>DSTV Services</h3>
          <div className="cards">
            {dstvServices.map((service, index) => (
              <div key={index} className="card">{service}</div>
            ))}
          </div>
        </div>

<div className="service-category">
          <h3>CCTV Services</h3>
          <div className="cards">
            {cctvServices.map((service, index) => (
              <div key={index} className="card">{service}</div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}   /* src/components/HomeServices.css */

.home-services {
  background-color: #f4f7ff; /* Soft blue section */
  color: #111; /* Black text */
  padding: 60px 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.home-services h2 {
  text-align: center;
  font-size: 2.8rem;
  color: #0a2cff; /* Royal Blue */
  margin-bottom: 50px;
}

.service-category h3 {
  font-size: 2rem;
  color: #0a2cff; /* Royal Blue */
  margin-bottom: 20px;
  border-left: 6px solid #ffb300; /* Accent */
  padding-left: 15px;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin-bottom: 50px;
}

.card {
  flex: 1 1 250px;
  background-color: #ffffff; /* White card for contrast */
  padding: 25px;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(10, 44, 255, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  font-weight: 500;
  text-align: center;
  cursor: default;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(10, 44, 255, 0.25);
  border-left: 6px solid #ffb300; /* Accent on hover */
}

@media (max-width: 768px) {
  .cards {
    flex-direction: column;
    align-items: center;
  }

.card {
    width: 90%;
  }
}
import "./Hero.css";
import { Link } from "react-router-dom";
import { motion } from "framer-motion";
import heroImg from "../assets/hero-security.jpg";

export default function Hero() {
  return (
    <section className="hero">
      <div className="hero-container">

<motion.div
          className="hero-text"
          initial={{ opacity: 0, y: 40 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <h1>Professional Security Solutions</h1>
          <p>
            CCTV, DSTV & Smart Security systems installed fast and professionally.
          </p>

Free to use. No credit card required.