Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Low Pressure Security | Berkeley Community Protection</title> | |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚲</text></svg>"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap'); | |
| :root { | |
| --primary: #e63946; | |
| --secondary: #1d3557; | |
| --accent: #457b9d; | |
| --light: #f1faee; | |
| --dark: #0a0a0a; | |
| } | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background-color: var(--dark); | |
| color: var(--light); | |
| scroll-behavior: smooth; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(29,53,87,0.9) 0%, rgba(69,123,157,0.8) 50%, rgba(230,57,70,0.7) 100%); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background-color: var(--primary); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(230, 57, 70, 0.3); | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: scale(1.02); | |
| } | |
| .accordion-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease; | |
| } | |
| .accordion.active .accordion-content { | |
| max-height: 500px; | |
| } | |
| .accordion.active .accordion-icon { | |
| transform: rotate(180deg); | |
| } | |
| .map-container { | |
| filter: grayscale(100%) invert(92%) contrast(83%); | |
| } | |
| /* Founder's message card */ | |
| .founders-card { | |
| background: linear-gradient(145deg, rgba(29,53,87,0.8) 0%, rgba(69,123,157,0.7) 100%); | |
| border-left: 4px solid var(--primary); | |
| } | |
| /* Trust badges */ | |
| .trust-badge { | |
| background-color: rgba(255,255,255,0.1); | |
| backdrop-filter: blur(5px); | |
| } | |
| /* Testimonial carousel */ | |
| .testimonial-carousel { | |
| scroll-snap-type: x mandatory; | |
| } | |
| .testimonial-slide { | |
| scroll-snap-align: start; | |
| flex: 0 0 100%; | |
| } | |
| /* Dark mode toggle */ | |
| .dark-mode-toggle { | |
| position: relative; | |
| width: 60px; | |
| height: 30px; | |
| } | |
| .dark-mode-toggle input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .dark-mode-slider { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: #1d3557; | |
| transition: .4s; | |
| border-radius: 34px; | |
| } | |
| .dark-mode-slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 22px; | |
| width: 22px; | |
| left: 4px; | |
| bottom: 4px; | |
| background-color: white; | |
| transition: .4s; | |
| border-radius: 50%; | |
| } | |
| input:checked + .dark-mode-slider { | |
| background-color: #e63946; | |
| } | |
| input:checked + .dark-mode-slider:before { | |
| transform: translateX(30px); | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased"> | |
| <!-- Header/Navigation --> | |
| <header class="fixed w-full bg-gray-900/90 backdrop-blur-sm z-50 shadow-lg"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bicycle text-red-500 text-2xl mr-2"></i> | |
| <a href="#home" class="text-xl font-bold text-white"> | |
| <span class="text-red-500">Low</span> Pressure Security | |
| </a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <!-- Dark mode toggle --> | |
| <div class="hidden md:flex items-center"> | |
| <span class="text-gray-300 mr-2 text-sm"><i class="fas fa-sun"></i></span> | |
| <label class="dark-mode-toggle"> | |
| <input type="checkbox" id="darkModeToggle"> | |
| <span class="dark-mode-slider"></span> | |
| </label> | |
| <span class="text-gray-300 ml-2 text-sm"><i class="fas fa-moon"></i></span> | |
| </div> | |
| <button id="mobile-menu-button" class="md:hidden text-white focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <nav id="main-nav" class="hidden md:flex space-x-6"> | |
| <a href="#about" class="nav-link text-white hover:text-red-400 transition">About</a> | |
| <a href="#services" class="nav-link text-white hover:text-red-400 transition">Services</a> | |
| <a href="#booking" class="nav-link text-white hover:text-red-400 transition">Booking</a> | |
| <a href="#packages" class="nav-link text-white hover:text-red-400 transition">Packages</a> | |
| <a href="#join" class="nav-link text-white hover:text-red-400 transition">Join Us</a> | |
| <a href="#contact" class="nav-link text-white hover:text-red-400 transition">Contact</a> | |
| <a href="#portal" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md transition">Client Portal</a> | |
| </nav> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-gray-800 w-full absolute left-0 top-full"> | |
| <div class="container mx-auto px-4 py-3 flex flex-col space-y-3"> | |
| <a href="#about" class="text-white hover:text-red-400 py-2 transition">About</a> | |
| <a href="#services" class="text-white hover:text-red-400 py-2 transition">Services</a> | |
| <a href="#booking" class="text-white hover:text-red-400 py-2 transition">Booking</a> | |
| <a href="#packages" class="text-white hover:text-red-400 py-2 transition">Packages</a> | |
| <a href="#join" class="text-white hover:text-red-400 py-2 transition">Join Us</a> | |
| <a href="#contact" class="text-white hover:text-red-400 py-2 transition">Contact</a> | |
| <a href="#portal" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md text-center transition">Client Portal</a> | |
| <div class="flex items-center justify-center pt-2"> | |
| <span class="text-gray-300 mr-2"><i class="fas fa-sun"></i></span> | |
| <label class="dark-mode-toggle"> | |
| <input type="checkbox" id="mobileDarkModeToggle"> | |
| <span class="dark-mode-slider"></span> | |
| </label> | |
| <span class="text-gray-300 ml-2"><i class="fas fa-moon"></i></span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-gradient min-h-screen flex items-center justify-center pt-20 pb-16 px-4"> | |
| <div class="container mx-auto text-center"> | |
| <div class="max-w-4xl mx-auto bg-gray-900/50 backdrop-blur-sm rounded-xl p-6 mb-8"> | |
| <h1 class="text-4xl md:text-6xl font-bold text-white mb-6"> | |
| Community-Focused <span class="text-red-400">Security</span> for Berkeley | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-100 mb-8 max-w-3xl mx-auto"> | |
| Affordable, transparent, and tailored protection—powered by bike patrols, smart systems, and local trust. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#booking" class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105"> | |
| <i class="fas fa-calendar-alt mr-2"></i> Book a Bike Patrol | |
| </a> | |
| <a href="#services" class="bg-transparent border-2 border-white hover:bg-white/10 text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105"> | |
| <i class="fas fa-shield-alt mr-2"></i> Explore Services | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Trust badges --> | |
| <div class="flex flex-wrap justify-center gap-4 mt-8"> | |
| <div class="trust-badge px-4 py-2 rounded-full flex items-center"> | |
| <i class="fas fa-heartbeat text-red-400 mr-2"></i> | |
| <span class="text-sm font-medium text-white">CPR Certified</span> | |
| </div> | |
| <div class="trust-badge px-4 py-2 rounded-full flex items-center"> | |
| <i class="fas fa-id-card text-blue-400 mr-2"></i> | |
| <span class="text-sm font-medium text-white">BSIS Licensed</span> | |
| </div> | |
| <div class="trust-badge px-4 py-2 rounded-full flex items-center"> | |
| <i class="fas fa-leaf text-green-400 mr-2"></i> | |
| <span class="text-sm font-medium text-white">Eco-Friendly</span> | |
| </div> | |
| <div class="trust-badge px-4 py-2 rounded-full flex items-center"> | |
| <i class="fas fa-rainbow text-purple-400 mr-2"></i> | |
| <span class="text-sm font-medium text-white">LGBTQ+ Friendly</span> | |
| </div> | |
| <div class="trust-badge px-4 py-2 rounded-full flex items-center"> | |
| <i class="fas fa-hands-helping text-yellow-400 mr-2"></i> | |
| <span class="text-sm font-medium text-white">BIPOC Inclusive</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-gray-900"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center gap-12"> | |
| <div class="lg:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Security bike patrol team in Berkeley" | |
| class="rounded-lg shadow-xl w-full h-auto object-cover"> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <h2 class="text-3xl font-bold text-red-400 mb-6"> | |
| <i class="fas fa-info-circle mr-2"></i> About Low Pressure Security | |
| </h2> | |
| <p class="text-gray-300 mb-6 text-lg"> | |
| Low Pressure Security is a community-first safety provider based in Berkeley, CA. We specialize in bicycle patrols, smart security systems, and personalized service packages designed for neighborhoods, small businesses, and events. | |
| </p> | |
| <!-- Founder's Message Card --> | |
| <div class="founders-card p-6 rounded-lg mb-8"> | |
| <div class="flex items-start"> | |
| <div class="bg-white/10 p-3 rounded-full mr-4"> | |
| <i class="fas fa-quote-left text-red-400"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-white mb-2">Why We Ride</h3> | |
| <p class="text-gray-200 italic mb-4"> | |
| "We started Low Pressure Security because we believe safety shouldn't come at the cost of community trust. As lifelong Berkeley residents, we wanted to create a security option that reflects our values—sustainable, transparent, and built on real relationships. Every patrol is a chance to strengthen our neighborhoods." | |
| </p> | |
| <p class="text-gray-300 text-sm">— The LPS Team</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-500/20 p-3 rounded-full mr-4"> | |
| <i class="fas fa-bicycle text-red-500 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white">Eco-Friendly Patrols</h3> | |
| </div> | |
| <p class="text-gray-400 ml-16">Our bike patrols provide fast, visible security while reducing environmental impact.</p> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-500/20 p-3 rounded-full mr-4"> | |
| <i class="fas fa-users text-blue-400 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white">Community Focused</h3> | |
| </div> | |
| <p class="text-gray-400 ml-16">We build trust through personal relationships and local knowledge.</p> | |
| </div> | |
| <a href="#vision" class="inline-flex items-center text-red-400 hover:text-red-300 font-medium"> | |
| Learn more about our vision <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Vision Section --> | |
| <section id="vision" class="py-20 bg-gray-800"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-red-400 mb-4"> | |
| <i class="fas fa-road mr-2"></i> Our Vision & Roadmap | |
| </h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| Where we're headed and how we're growing responsibly | |
| </p> | |
| </div> | |
| <div class="max-w-4xl mx-auto bg-gray-900 rounded-xl p-8 shadow-lg"> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-4">2024-2025 Goals</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="bg-red-500/20 p-2 rounded-full mr-4"> | |
| <i class="fas fa-map-marked-alt text-red-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-white">Neighborhood Expansion</h4> | |
| <p class="text-gray-400">Covering all Berkeley districts by mid-2025</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-500/20 p-2 rounded-full mr-4"> | |
| <i class="fas fa-qrcode text-blue-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-white">QR Safety Network</h4> | |
| <p class="text-gray-400">Instant neighborhood alerts via coded signs</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-green-500/20 p-2 rounded-full mr-4"> | |
| <i class="fas fa-solar-panel text-green-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-white">Solar-Powered Hubs</h4> | |
| <p class="text-gray-400">Charging stations with emergency call buttons</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-4">Future Innovations</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="bg-purple-500/20 p-2 rounded-full mr-4"> | |
| <i class="fas fa-camera text-purple-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-white">Bodycam Transparency</h4> | |
| <p class="text-gray-400">Optional recording for accountability</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-yellow-500/20 p-2 rounded-full mr-4"> | |
| <i class="fas fa-handshake text-yellow-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-white">Community Training</h4> | |
| <p class="text-gray-400">De-escalation workshops for residents</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-indigo-500/20 p-2 rounded-full mr-4"> | |
| <i class="fas fa-bolt text-indigo-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-white">E-Bike Fleet</h4> | |
| <p class="text-gray-400">Expanding patrol range sustainably</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <p class="text-gray-400 mb-6">Want to help shape our future?</p> | |
| <a href="#join" class="inline-flex items-center bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-full transition"> | |
| <i class="fas fa-bicycle mr-2"></i> Join the Movement | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Join Us Section --> | |
| <section id="join" class="py-20 bg-gray-900"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-red-400 mb-4"> | |
| <i class="fas fa-hands-helping mr-2"></i> Join Our Team | |
| </h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| We're building something different. If you're passionate about community, bikes, and security, let's talk. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="bg-gray-800 p-8 rounded-xl shadow-lg"> | |
| <h3 class="text-2xl font-bold text-white mb-6"> | |
| <i class="fas fa-bicycle text-red-400 mr-2"></i> Ride With Us | |
| </h3> | |
| <p class="text-gray-300 mb-6"> | |
| We're always looking for community-minded individuals to join our patrol team. No prior security experience required—we provide full training. | |
| </p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-3"></i> | |
| <span class="text-gray-300">Flexible part-time shifts</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-3"></i> | |
| <span class="text-gray-300">BSIS licensing support</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-3"></i> | |
| <span class="text-gray-300">Living wage + benefits</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-3"></i> | |
| <span class="text-gray-300">Bike maintenance training</span> | |
| </li> | |
| </ul> | |
| <a href="#contact" class="inline-flex items-center justify-center w-full bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-lg transition"> | |
| Apply Now <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="bg-gray-800 p-8 rounded-xl shadow-lg"> | |
| <h3 class="text-2xl font-bold text-white mb-6"> | |
| <i class="fas fa-lightbulb text-blue-400 mr-2"></i> Partner With Us | |
| </h3> | |
| <p class="text-gray-300 mb-6"> | |
| We collaborate with local businesses, neighborhood associations, and community organizations to create custom safety solutions. | |
| </p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-3"></i> | |
| <span class="text-gray-300">Sponsor a patrol route</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-3"></i> | |
| <span class="text-gray-300">Host a safety workshop</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-3"></i> | |
| <span class="text-gray-300">Co-develop neighborhood programs</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-3"></i> | |
| <span class="text-gray-300">Become a referral partner</span> | |
| </li> | |
| </ul> | |
| <a href="#contact" class="inline-flex items-center justify-center w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg transition"> | |
| Explore Partnerships <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-gray-800"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-red-400 mb-4"> | |
| <i class="fas fa-shield-alt mr-2"></i> Our Core Services | |
| </h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| Comprehensive security solutions tailored to your specific needs | |
| </p> | |
| <div class="mt-6 text-gray-400"> | |
| <i class="fas fa-certificate text-red-400 mr-2"></i> | |
| <span class="text-sm">Locally Owned | Community-First | Transparent Pricing</span> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Bike Patrols Card --> | |
| <div class="service-card bg-gray-900 rounded-lg overflow-hidden shadow-lg transition duration-300"> | |
| <div class="h-48 bg-gradient-to-r from-red-500/20 to-blue-500/20 flex items-center justify-center"> | |
| <i class="fas fa-bicycle text-6xl text-white"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold text-white mb-3">Bike Patrols</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Fast, visible, and eco-friendly patrols that deter crime and build trust in your neighborhood or at your event. | |
| </p> | |
| <ul class="mb-6 space-y-2 text-gray-300"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>24/7 availability</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>Custom patrol routes</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>Immediate incident response</span> | |
| </li> | |
| </ul> | |
| <a href="#booking" class="inline-block bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-6 rounded-full transition"> | |
| Schedule Patrol | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Security Systems Card --> | |
| <div class="service-card bg-gray-900 rounded-lg overflow-hidden shadow-lg transition duration-300"> | |
| <div class="h-48 bg-gradient-to-r from-blue-500/20 to-indigo-500/20 flex items-center justify-center"> | |
| <i class="fas fa-camera text-6xl text-white"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold text-white mb-3">Security Systems</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Custom-installed smart cameras, alarms, and monitoring tools with full client control and transparency. | |
| </p> | |
| <ul class="mb-6 space-y-2 text-gray-300"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>HD video surveillance</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>Smart motion detection</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>Remote monitoring</span> | |
| </li> | |
| </ul> | |
| <a href="#setup" class="inline-block bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-6 rounded-full transition"> | |
| Start Setup | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Service Packages Card --> | |
| <div class="service-card bg-gray-900 rounded-lg overflow-hidden shadow-lg transition duration-300"> | |
| <div class="h-48 bg-gradient-to-r from-indigo-500/20 to-purple-500/20 flex items-center justify-center"> | |
| <i class="fas fa-box-open text-6xl text-white"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold text-white mb-3">Service Packages</h3> | |
| <p class="text-gray-400 mb-4"> | |
| Flexible tiers for homes, businesses, and events—choose exactly what fits your needs and budget. | |
| </p> | |
| <ul class="mb-6 space-y-2 text-gray-300"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>Residential solutions</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>Business protection</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i> | |
| <span>Event security</span> | |
| </li> | |
| </ul> | |
| <a href="#packages" class="inline-block bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-6 rounded-full transition"> | |
| View Packages | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Booking Section --> | |
| <section id="booking" class="py-20 bg-gray-900"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto bg-gray-800 rounded-xl shadow-xl overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-gradient-to-br from-red-500 to-blue-600 p-8 flex flex-col justify-center"> | |
| <h2 class="text-3xl font-bold text-white mb-4"> | |
| <i class="fas fa-calendar-alt mr-2"></i> Bike Patrol Booking | |
| </h2> | |
| <p class="text-gray-100 mb-6"> | |
| Ensure your event, business, or home is safe with our bike patrol services. Easy scheduling and secure payment options. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-white/20 p-2 rounded-full mr-4"> | |
| <i class="fas fa-clock text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-white">24/7 Availability</h4> | |
| <p class="text-gray-200 text-sm">Patrols available anytime you need them</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-white/20 p-2 rounded-full mr-4"> | |
| <i class="fas fa-map-marked-alt text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-white">Custom Routes</h4> | |
| <p class="text-gray-200 text-sm">Tailored to your specific location</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-white/20 p-2 rounded-full mr-4"> | |
| <i class="fas fa-shield-alt text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-white">Trained Professionals</h4> | |
| <p class="text-gray-200 text-sm">CPR and first aid certified</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 p-8"> | |
| <form id="booking-form" class="space-y-4"> | |
| <div> | |
| <label for="booking-type" class="block text-gray-300 mb-2">Service Type</label> | |
| <select id="booking-type" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-red-500"> | |
| <option value="event">Event Security</option> | |
| <option value="business">Business Patrol</option> | |
| <option value="residential">Residential Patrol</option> | |
| <option value="special">Special Request</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="booking-date" class="block text-gray-300 mb-2">Date</label> | |
| <input type="date" id="booking-date" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-red-500"> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label for="start-time" class="block text-gray-300 mb-2">Start Time</label> | |
| <input type="time" id="start-time" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-red-500"> | |
| </div> | |
| <div> | |
| <label for="end-time" class="block text-gray-300 mb-2">End Time</label> | |
| <input type="time" id="end-time" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-red-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="location" class="block text-gray-300 mb-2">Location</label> | |
| <input type="text" id="location" placeholder="Address or neighborhood" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-red-500"> | |
| </div> | |
| <button type="submit" class="w-full bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-4 rounded-lg transition"> | |
| Check Availability & Book | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Support Section --> | |
| <section id="support" class="py-16 bg-gray-800"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold text-red-400 mb-8"> | |
| <i class="fas fa-headset mr-2"></i> Customer Support | |
| </h2> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <div class="bg-gray-900 p-6 rounded-lg shadow-lg"> | |
| <div class="bg-red-500/20 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-phone-alt text-red-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white mb-2">Phone Support</h3> | |
| <p class="text-gray-400 mb-2">Available 9am-9pm PT</p> | |
| <a href="tel:5105551234" class="text-red-400 hover:text-red-300 font-medium">(510) 555-1234</a> | |
| </div> | |
| <div class="bg-gray-900 p-6 rounded-lg shadow-lg"> | |
| <div class="bg-blue-500/20 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-envelope text-blue-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white mb-2">Email Us</h3> | |
| <p class="text-gray-400 mb-2">Response within 24 hours</p> | |
| <a href="mailto:support@lowpressuresecurity.com" class="text-blue-400 hover:text-blue-300 font-medium">support@lowpressuresecurity.com</a> | |
| </div> | |
| <div class="bg-gray-900 p-6 rounded-lg shadow-lg"> | |
| <div class="bg-green-500/20 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-comment-dots text-green-400 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white mb-2">Live Chat</h3> | |
| <p class="text-gray-400 mb-2">Available 9am-9pm PT</p> | |
| <button id="live-chat-btn" class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-6 rounded-full transition"> | |
| Start Chat | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Client Portal Section --> | |
| <section id="portal" class="py-20 bg-gray-900"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto bg-gradient-to-r from-gray-800 to-gray-700 rounded-xl shadow-xl overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 p-8 flex flex-col justify-center"> | |
| <h2 class="text-3xl font-bold text-red-400 mb-4"> | |
| <i class="fas fa-user-shield mr-2"></i> Client Portal | |
| </h2> | |
| <p class="text-gray-300 mb-6"> | |
| Manage all your security services in one convenient place. Access patrol schedules, view camera feeds, update account information, and more. | |
| </p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-3"></i> | |
| <span class="text-gray-300">24/7 access to your security dashboard</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-3"></i> | |
| <span class="text-gray-300">Real-time patrol tracking</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-3"></i> | |
| <span class="text-gray-300">Secure document storage</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-3"></i> | |
| <span class="text-gray-300">Incident reporting system</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="md:w-1/2 bg-gray-800 p-8 flex flex-col justify-center"> | |
| <div class="bg-gray-900 rounded-lg p-6 shadow-inner"> | |
| <h3 class="text-xl font-semibold text-white mb-6 text-center">Login to Your Account</h3> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="email" class="block text-gray-400 mb-2">Email</label> | |
| <input type="email" id="email" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-red-500"> | |
| </div> | |
| <div> | |
| <label for="password" class="block text-gray-400 mb-2">Password</label> | |
| <input type="password" id="password" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-red-500"> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="remember" class="h-4 w-4 text-red-500 focus:ring-red-500 border-gray-700 rounded"> | |
| <label for="remember" class="ml-2 block text-gray-400">Remember me</label> | |
| </div> | |
| <a href="#" class="text-sm text-red-400 hover:text-red-300">Forgot password?</a> | |
| </div> | |
| <button type="submit" class="w-full bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-lg transition"> | |
| Sign In | |
| </button> | |
| </form> | |
| <div class="mt-4 text-center"> | |
| <p class="text-gray-500">Don't have an account? <a href="#" class="text-blue-400 hover:text-blue-300">Register here</a></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Packages Section --> | |
| <section id="packages" class="py-20 bg-gray-800"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-red-400 mb-4"> | |
| <i class="fas fa-boxes mr-2"></i> Service Packages | |
| </h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| Choose the perfect security solution for your needs with our flexible packages | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <!-- Basic Package --> | |
| <div class="bg-gray-900 rounded-xl overflow-hidden shadow-xl transform transition hover:scale-105"> | |
| <div class="bg-gray-700 px-6 py-4"> | |
| <h3 class="text-2xl font-bold text-white text-center">Basic</h3> | |
| <p class="text-gray-300 text-center">For small homes and businesses</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-center mb-6"> | |
| <span class="text-4xl font-bold text-white">$99</span> | |
| <span class="text-gray-400">/month</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2"></i> | |
| <span class="text-gray-300">Weekly bike patrol checks</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2"></i> | |
| <span class="text-gray-300">1 security camera installation</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2"></i> | |
| <span class="text-gray-300">Basic motion detection</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2"></i> | |
| <span class="text-gray-300">Email alerts</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-times text-gray-500 mt-1 mr-2"></i> | |
| <span class="text-gray-500">24/7 monitoring</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-times text-gray-500 mt-1 mr-2"></i> | |
| <span class="text-gray-500">Priority response</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-gray-700 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg transition"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Standard Package --> | |
| <div class="bg-gray-900 rounded-xl overflow-hidden shadow-xl transform transition hover:scale-105 border-2 border-red-500 relative"> | |
| <div class="absolute top-0 right-0 bg-red-500 text-white text-xs font-bold px-3 py-1 transform translate-x-2 -translate-y-2"> | |
| POPULAR | |
| </div> | |
| <div class="bg-gray-700 px-6 py-4"> | |
| <h3 class="text-2xl font-bold text-white text-center">Standard</h3> | |
| <p class="text-gray-300 text-center">For most homes and small businesses</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-center mb-6"> | |
| <span class="text-4xl font-bold text-white">$199</span> | |
| <span class="text-gray-400">/month</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2"></i> | |
| <span class="text-gray-300">Daily bike patrol checks</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2"></i> | |
| <span class="text-gray-300">3 security cameras</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2"></i> | |
| <span class="text-gray-300">Advanced motion detection</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2"></i> | |
| <span class="text-gray-300">Text & email alerts</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2"></i> | |
| <span class="text-gray-300">12/7 monitoring (6am-6pm)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-times text-gray-500 mt-1 mr-2"></i> | |
| <span class="text-gray-500">Priority response</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Premium Package --> | |
| <div class="bg-gray-900 rounded-xl overflow-hidden shadow-xl transform transition hover:scale-105"> | |
| <div class="bg-gray-700 px-6 py-4"> | |
| <h3 class="text-2xl font-bold text-white text-center">Premium</h3> | |
| <p class="text-gray-300 text-center">For comprehensive protection</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-center mb-6"> | |
| <span class="text-4xl font-bold text-white">$349</span> | |
| <span class="text-gray-400">/month</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2"></i> | |
| <span class="text-gray-300">24/7 bike patrol availability</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2"></i> | |
| <span class="text-gray-300">6 security cameras</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2"></i> | |
| <span class="text-gray-300">AI-powered threat detection</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2"></i> | |
| <span class="text-gray-300">Instant alerts & live feed</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2"></i> | |
| <span class="text-gray-300">24/7 professional monitoring</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-400 mt-1 mr-2"></i> | |
| <span class="text-gray-300">Priority emergency response</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-4 rounded-lg transition"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <p class="text-gray-400 mb-4">Need something different?</p> | |
| <a href="#custom" class="inline-flex items-center text-red-400 hover:text-red-300 font-medium"> | |
| Request a custom package <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section id="faq" class="py-20 bg-gray-900"> | |
| <div class="container mx-auto px-4 max-w-4xl"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-red-400 mb-4"> | |
| <i class="fas fa-question-circle mr-2"></i> Frequently Asked Questions | |
| </h2> | |
| <p class="text-xl text-gray-300">Find answers to common questions about our services</p> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- FAQ Item 1 --> | |
| <div class="accordion bg-gray-800 rounded-lg overflow-hidden"> | |
| <button class="accordion-btn w-full flex justify-between items-center p-6 text-left focus:outline-none"> | |
| <span class="text-xl font-medium text-white">How do bike patrols compare to car patrols?</span> | |
| <i class="accordion-icon fas fa-chevron-down text-red-400 transition-transform"></i> | |
| </button> | |
| <div class="accordion-content px-6"> | |
| <div class="pb-6 text-gray-300"> | |
| <p class="mb-4">Bike patrols offer several advantages over traditional car patrols:</p> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li>More environmentally friendly with zero emissions</li> | |
| <li>Greater visibility and community engagement</li> | |
| <li>Ability to access areas cars can't reach (alleys, pedestrian zones)</li> | |
| <li>Quieter approach allows for better detection of suspicious activity</li> | |
| <li>Often faster response in urban areas with traffic congestion</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 2 --> | |
| <div class="accordion bg-gray-800 rounded-lg overflow-hidden"> | |
| <button class="accordion-btn w-full flex justify-between items-center p-6 text-left focus:outline-none"> | |
| <span class="text-xl font-medium text-white">What areas of Berkeley do you serve?</span> | |
| <i class="accordion-icon fas fa-chevron-down text-red-400 transition-transform"></i> | |
| </button> | |
| <div class="accordion-content px-6"> | |
| <div class="pb-6 text-gray-300"> | |
| <p>We currently serve all neighborhoods within Berkeley city limits, with a focus on:</p> | |
| <ul class="list-disc pl-5 space-y-2 mt-2"> | |
| <li>Downtown Berkeley</li> | |
| <li>Southside near UC Berkeley campus</li> | |
| <li>West Berkeley industrial areas</li> | |
| <li>North Berkeley residential neighborhoods</li> | |
| <li>Gourmet Ghetto commercial district</li> | |
| </ul> | |
| <p class="mt-4">We're expanding our coverage area monthly. Contact us if you're unsure whether we serve your location.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 3 --> | |
| <div class="accordion bg-gray-800 rounded-lg overflow-hidden"> | |
| <button class="accordion-btn w-full flex justify-between items-center p-6 text-left focus:outline-none"> | |
| <span class="text-xl font-medium text-white">Are your security officers licensed?</span> | |
| <i class="accordion-icon fas fa-chevron-down text-red-400 transition-transform"></i> | |
| </button> | |
| <div class="accordion-content px-6"> | |
| <div class="pb-6 text-gray-300"> | |
| <p>Yes, all our security personnel hold current California Bureau of Security and Investigative Services (BSIS) licenses. Additionally:</p> | |
| <ul class="list-disc pl-5 space-y-2 mt-2"> | |
| <li>CPR and First Aid certified</li> | |
| <li>Undergo thorough background checks</li> | |
| <li>Receive ongoing training in de-escalation techniques</li> | |
| <li>Trained in community policing principles</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 4 --> | |
| <div class="accordion bg-gray-800 rounded-lg overflow-hidden"> | |
| <button class="accordion-btn w-full flex justify-between items-center p-6 text-left focus:outline-none"> | |
| <span class="text-xl font-medium text-white">Can I view my security camera feeds remotely?</span> | |
| <i class="accordion-icon fas fa-chevron-down text-red-400 transition-transform"></i> | |
| </button> | |
| <div class="accordion-content px-6"> | |
| <div class="pb-6 text-gray-300"> | |
| <p>Absolutely. Our security systems come with:</p> | |
| <ul class="list-disc pl-5 space-y-2 mt-2"> | |
| <li>Secure mobile app for iOS and Android</li | |
| </html> |