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's Community-First Security Partner</title> | |
| <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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#E63946', | |
| dark: '#1A1A1D', | |
| charcoal: '#252525', | |
| light: '#F5F5F5', | |
| berkeley: '#003262' | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| title: ['Oswald', 'sans-serif'] | |
| }, | |
| animation: { | |
| 'bounce-slow': 'bounce 3s infinite', | |
| 'pulse-slow': 'pulse 5s infinite', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #1A1A1D; | |
| color: #F5F5F5; | |
| scroll-behavior: smooth; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(26, 26, 29, 0.9) 0%, rgba(38, 38, 38, 0.7) 100%); | |
| } | |
| .bike-icon { | |
| transform: rotate(15deg); | |
| filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); | |
| } | |
| .security-card { | |
| transition: all 0.3s ease; | |
| border-bottom: 3px solid transparent; | |
| } | |
| .security-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.3); | |
| border-bottom: 3px solid #E63946; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| display: block; | |
| width: 0; | |
| height: 2px; | |
| background: #E63946; | |
| transition: width 0.3s; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .berkeley-landmark { | |
| background-blend-mode: overlay; | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(230, 57, 70, 0.2); | |
| } | |
| .form-input:focus { | |
| box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.3); | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-dark border-b border-gray-800 fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-shield-alt text-primary text-2xl mr-2"></i> | |
| <span class="text-white font-title text-xl tracking-tight">LOW PRESSURE <span class="text-primary">SECURITY</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-8"> | |
| <a href="#home" class="nav-link text-light hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition duration-300">Home</a> | |
| <a href="#about" class="nav-link text-light hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition duration-300">Our Mission</a> | |
| <a href="#services" class="nav-link text-light hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition duration-300">Services</a> | |
| <a href="#alliance" class="nav-link text-light hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition duration-300">Alliance</a> | |
| <a href="#contact" class="nav-link text-light hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition duration-300">Contact</a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button class="mobile-menu-button p-2 rounded-md text-light hover:text-primary focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Mobile Menu --> | |
| <div class="mobile-menu hidden md:hidden bg-charcoal fixed w-full z-40 mt-16"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-light hover:text-primary hover:bg-gray-800 transition duration-300">Home</a> | |
| <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-light hover:text-primary hover:bg-gray-800 transition duration-300">Our Mission</a> | |
| <a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-light hover:text-primary hover:bg-gray-800 transition duration-300">Services</a> | |
| <a href="#alliance" class="block px-3 py-2 rounded-md text-base font-medium text-light hover:text-primary hover:bg-gray-800 transition duration-300">Alliance</a> | |
| <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-light hover:text-primary hover:bg-gray-800 transition duration-300">Contact</a> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <section id="home" class="relative pt-24 pb-32 md:pt-32 md:pb-48 flex items-center justify-center"> | |
| <div class="absolute inset-0 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1519817650390-64a93db51149?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Berkeley Hills" class="w-full h-full object-cover berkeley-landmark"> | |
| <div class="absolute inset-0 hero-gradient"></div> | |
| </div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-6xl font-title font-bold tracking-tight text-light mb-6"> | |
| SECURITY <span class="text-primary">ROOTED</span> IN COMMUNITY | |
| </h1> | |
| <p class="mt-6 text-lg md:text-xl max-w-3xl mx-auto text-gray-300"> | |
| Berkeley's trusted security partner since 2008. We protect what matters through sustainable, community-first solutions. | |
| </p> | |
| <div class="mt-10 flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> | |
| <a href="#contact" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-red-600 md:py-4 md:text-lg md:px-10 transition duration-300 transform hover:scale-105"> | |
| Get Protected | |
| </a> | |
| <a href="#about" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-light bg-charcoal hover:bg-gray-700 md:py-4 md:text-lg md:px-10 transition duration-300 transform hover:scale-105"> | |
| Our Approach | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2"> | |
| <i class="fas fa-bicycle bike-icon text-primary text-4xl animate-bounce-slow"></i> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="py-12 bg-primary"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> | |
| <div class="p-4"> | |
| <div class="text-4xl font-title font-bold text-white">15+</div> | |
| <div class="mt-2 text-sm font-medium text-white uppercase tracking-wider">Years Serving Berkeley</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-4xl font-title font-bold text-white">98%</div> | |
| <div class="mt-2 text-sm font-medium text-white uppercase tracking-wider">Client Retention</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-4xl font-title font-bold text-white">85%</div> | |
| <div class="mt-2 text-sm font-medium text-white uppercase tracking-wider">Local Employees</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-4xl font-title font-bold text-white">24/7</div> | |
| <div class="mt-2 text-sm font-medium text-white uppercase tracking-wider">Emergency Response</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Mission Statement --> | |
| <section id="about" class="py-20 bg-charcoal"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Our Philosophy</h2> | |
| <p class="mt-2 text-3xl font-title font-bold leading-8 tracking-tight text-light sm:text-4xl"> | |
| Strength Through Community | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto"> | |
| We believe security shouldn't come at the cost of community trust or environmental responsibility. | |
| </p> | |
| </div> | |
| <div class="mt-20"> | |
| <div class="grid grid-cols-1 gap-12 md:grid-cols-3"> | |
| <div class="pt-6"> | |
| <div class="flow-root bg-dark rounded-lg px-6 pb-8 h-full security-card"> | |
| <div class="-mt-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white mx-auto"> | |
| <i class="fas fa-hands-helping text-xl"></i> | |
| </div> | |
| <h3 class="mt-8 text-lg font-title font-medium text-light tracking-tight">Neighborhood Watch 2.0</h3> | |
| <p class="mt-5 text-base text-gray-300"> | |
| Our hybrid approach combines trained professionals with engaged community members for comprehensive coverage. | |
| </p> | |
| <div class="mt-6"> | |
| <a href="#" class="text-primary text-sm font-medium inline-flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-6"> | |
| <div class="flow-root bg-dark rounded-lg px-6 pb-8 h-full security-card"> | |
| <div class="-mt-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white mx-auto"> | |
| <i class="fas fa-leaf text-xl"></i> | |
| </div> | |
| <h3 class="mt-8 text-lg font-title font-medium text-light tracking-tight">Sustainable Operations</h3> | |
| <p class="mt-5 text-base text-gray-300"> | |
| Electric patrol vehicles and bicycle patrols reduce our carbon footprint without compromising response times. | |
| </p> | |
| <div class="mt-6"> | |
| <a href="#" class="text-primary text-sm font-medium inline-flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-6"> | |
| <div class="flow-root bg-dark rounded-lg px-6 pb-8 h-full security-card"> | |
| <div class="-mt-6"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white mx-auto"> | |
| <i class="fas fa-hand-holding-usd text-xl"></i> | |
| </div> | |
| <h3 class="mt-8 text-lg font-title font-medium text-light tracking-tight">Local Investment</h3> | |
| <p class="mt-5 text-base text-gray-300"> | |
| 85% of our team lives within Berkeley city limits, and we reinvest 15% of profits into community safety programs. | |
| </p> | |
| <div class="mt-6"> | |
| <a href="#" class="text-primary text-sm font-medium inline-flex items-center"> | |
| Learn more <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services --> | |
| <section id="services" class="py-20 bg-dark"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-16"> | |
| <h2 class="text-base text-primary font-semibold tracking-wide uppercase">What We Offer</h2> | |
| <p class="mt-2 text-3xl font-title font-bold leading-8 tracking-tight text-light sm:text-4xl"> | |
| Comprehensive Protection Solutions | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto"> | |
| Tailored security services for Berkeley homes, businesses, and institutions. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="bg-charcoal rounded-lg overflow-hidden shadow-lg transform transition duration-500 hover:shadow-xl"> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary p-3 rounded-md"> | |
| <i class="fas fa-home text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-title font-medium text-light">Residential Security</h3> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-gray-300"> | |
| 24/7 monitoring, smart home integration, and neighborhood watch coordination to protect your family and property. | |
| </p> | |
| <ul class="mt-6 space-y-3"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-primary"></i> | |
| </div> | |
| <p class="ml-3 text-gray-300">Customized home security assessments</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-primary"></i> | |
| </div> | |
| <p class="ml-3 text-gray-300">Bicycle patrols for low-impact surveillance</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-primary"></i> | |
| </div> | |
| <p class="ml-3 text-gray-300">Emergency response within 5 minutes</p> | |
| </li> | |
| </ul> | |
| <div class="mt-6"> | |
| <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-red-600 transition duration-300"> | |
| Get a Quote | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-charcoal rounded-lg overflow-hidden shadow-lg transform transition duration-500 hover:shadow-xl"> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary p-3 rounded-md"> | |
| <i class="fas fa-building text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-title font-medium text-light">Commercial Protection</h3> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-gray-300"> | |
| Complete security solutions for retail, offices, and institutions with minimal disruption to daily operations. | |
| </p> | |
| <ul class="mt-6 space-y-3"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-primary"></i> | |
| </div> | |
| <p class="ml-3 text-gray-300">Loss prevention specialists</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-primary"></i> | |
| </div> | |
| <p class="ml-3 text-gray-300">Sustainable security staffing</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-primary"></i> | |
| </div> | |
| <p class="ml-3 text-gray-300">Community engagement programs</p> | |
| </li> | |
| </ul> | |
| <div class="mt-6"> | |
| <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-red-600 transition duration-300"> | |
| Get a Quote | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-charcoal rounded-lg overflow-hidden shadow-lg transform transition duration-500 hover:shadow-xl"> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary p-3 rounded-md"> | |
| <i class="fas fa-university text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-title font-medium text-light">Campus Security</h3> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-gray-300"> | |
| Specialized protection for educational institutions that balances safety with an open learning environment. | |
| </p> | |
| <ul class="mt-6 space-y-3"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-primary"></i> | |
| </div> | |
| <p class="ml-3 text-gray-300">De-escalation trained officers</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-primary"></i> | |
| </div> | |
| <p class="ml-3 text-gray-300">Student safety workshops</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-primary"></i> | |
| </div> | |
| <p class="ml-3 text-gray-300">Bicycle patrol units</p> | |
| </li> | |
| </ul> | |
| <div class="mt-6"> | |
| <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-red-600 transition duration-300"> | |
| Get a Quote | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-charcoal rounded-lg overflow-hidden shadow-lg transform transition duration-500 hover:shadow-xl"> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary p-3 rounded-md"> | |
| <i class="fas fa-calendar-alt text-white text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-title font-medium text-light">Event Security</h3> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-gray-300"> | |
| Crowd management and protection for community events, concerts, and public gatherings. | |
| </p> | |
| <ul class="mt-6 space-y-3"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-primary"></i> | |
| </div> | |
| <p class="ml-3 text-gray-300">Low-profile security presence</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-primary"></i> | |
| </div> | |
| <p class="ml-3 text-gray-300">Community liaison officers</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-check-circle text-primary"></i> | |
| </div> | |
| <p class="ml-3 text-gray-300">Sustainable event security planning</p> | |
| </li> | |
| </ul> | |
| <div class="mt-6"> | |
| <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-red-600 transition duration-300"> | |
| Get a Quote | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Alliance Section --> | |
| <section id="alliance" class="py-20 bg-charcoal"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-12 lg:gap-8"> | |
| <div class="lg:col-span-6 relative"> | |
| <img class="w-full rounded-lg shadow-xl floating" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Security professionals meeting"> | |
| <div class="absolute -bottom-6 -right-6 bg-primary p-4 rounded-lg shadow-lg hidden md:block"> | |
| <i class="fas fa-handshake text-white text-4xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-12 lg:mt-0 lg:col-span-6"> | |
| <div class="sm:max-w-md lg:px-0 lg:pr-8"> | |
| <h2 class="text-3xl font-title font-bold tracking-tight text-light sm:text-4xl"> | |
| Strategic Alliance with <span class="text-primary">Scottzilla</span> | |
| </h2> | |
| <p class="mt-3 text-lg text-gray-300"> | |
| Our partnership with Scottzilla Security Systems combines cutting-edge technology with deep community knowledge for unparalleled protection. | |
| </p> | |
| <div class="mt-8"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-dark rounded-md p-3"> | |
| <i class="fas fa-network-wired text-primary text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-title font-medium text-light">Integrated Technology</h3> | |
| <p class="mt-2 text-base text-gray-300"> | |
| Access to Scottzilla's advanced monitoring systems while maintaining our community-focused approach. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex items-start"> | |
| <div class="flex-shrink-0 bg-dark rounded-md p-3"> | |
| <i class="fas fa-users text-primary text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-title font-medium text-light">Shared Expertise</h3> | |
| <p class="mt-2 text-base text-gray-300"> | |
| Joint training programs that combine Scottzilla's technical excellence with our neighborhood engagement strategies. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex items-start"> | |
| <div class="flex-shrink-0 bg-dark rounded-md p-3"> | |
| <i class="fas fa-shield-alt text-primary text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-title font-medium text-light">Enhanced Coverage</h3> | |
| <p class="mt-2 text-base text-gray-300"> | |
| Expanded resources for large-scale security needs without sacrificing our local touch. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-red-600 transition duration-300"> | |
| Learn About Our Partnership | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 bg-dark"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-16"> | |
| <h2 class="text-base text-primary font-semibold tracking-wide uppercase">Community Voices</h2> | |
| <p class="mt-2 text-3xl font-title font-bold leading-8 tracking-tight text-light sm:text-4xl"> | |
| What Berkeley Says About Us | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 gap-8 md:grid-cols-3"> | |
| <div class="bg-charcoal rounded-lg p-8 testimonial-card"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-quote-left text-primary text-2xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt=""> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-light">Sarah J.</p> | |
| <p class="text-sm text-gray-400">North Berkeley Resident</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-300"> | |
| "The bicycle patrols make me feel safe without making our neighborhood feel like a police state. It's security with a human touch." | |
| </p> | |
| <div class="mt-4 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <div class="bg-charcoal rounded-lg p-8 testimonial-card"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-quote-left text-primary text-2xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1987&q=80" alt=""> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-light">Marcus T.</p> | |
| <p class="text-sm text-gray-400">Telegraph Ave Business Owner</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-300"> | |
| "Their officers know my staff by name and understand the unique challenges of our location. It's not just security - it's partnership." | |
| </p> | |
| <div class="mt-4 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <div class="bg-charcoal rounded-lg p-8 testimonial-card"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-quote-left text-primary text-2xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5aa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1976&q=80" alt=""> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-light">Dr. Elena R.</p> | |
| <p class="text-sm text-gray-400">UC Berkeley Faculty</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-300"> | |
| "When we needed event security that wouldn't intimidate international students, Low Pressure delivered perfectly. Their approach is brilliant." | |
| </p> | |
| <div class="mt-4 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-red-600 transition duration-300"> | |
| Read More Testimonials | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section id="contact" class="relative py-20 bg-gradient-to-r from-dark to-charcoal overflow-hidden"> | |
| <div class="absolute inset-0 opacity-10"> | |
| <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1519501025264-65ba15a82390?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80')] bg-cover bg-center"></div> | |
| </div> | |
| <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-title font-bold tracking-tight text-light sm:text-4xl"> | |
| Ready to Experience <span class="text-primary">Community-First</span> Security? | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-300 mx-auto"> | |
| Contact us today for a free consultation tailored to your Berkeley property or business. | |
| </p> | |
| <div class="mt-12"> | |
| <div class="grid grid-cols-1 gap-8 md:grid-cols-3"> | |
| <div class="bg-dark bg-opacity-80 rounded-lg p-6 backdrop-blur-sm transform transition duration-500 hover:scale-105"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white mx-auto"> | |
| <i class="fas fa-phone-alt text-xl"></i> | |
| </div> | |
| <h3 class="mt-6 text-lg font-title font-medium text-light">Call Us</h3> | |
| <p class="mt-2 text-base text-gray-300"> | |
| (510) 555-0199 | |
| </p> | |
| <p class="mt-1 text-sm text-gray-400"> | |
| 24/7 Emergency Line | |
| </p> | |
| <div class="mt-4"> | |
| <a href="tel:5105550199" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-red-600 transition duration-300"> | |
| Call Now | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-dark bg-opacity-80 rounded-lg p-6 backdrop-blur-sm transform transition duration-500 hover:scale-105"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white mx-auto"> | |
| <i class="fas fa-envelope text-xl"></i> | |
| </div> | |
| <h3 class="mt-6 text-lg font-title font-medium text-light">Email Us</h3> | |
| <p class="mt-2 text-base text-gray-300"> | |
| contact@lowpressure.berkeley | |
| </p> | |
| <p class="mt-1 text-sm text-gray-400"> | |
| Response within 2 hours | |
| </p> | |
| <div class="mt-4"> | |
| <a href="mailto:contact@lowpressure.berkeley" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-red-600 transition duration-300"> | |
| Email Now | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-dark bg-opacity-80 rounded-lg p-6 backdrop-blur-sm transform transition duration-500 hover:scale-105"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white mx-auto"> | |
| <i class="fas fa-map-marker-alt text-xl"></i> | |
| </div> | |
| <h3 class="mt-6 text-lg font-title font-medium text-light">Visit Us</h3> | |
| <p class="mt-2 text-base text-gray-300"> | |
| 2120 University Ave<br> | |
| Berkeley, CA 94704 | |
| </p> | |
| <p class="mt-1 text-sm text-gray-400"> | |
| By appointment only | |
| </p> | |
| <div class="mt-4"> | |
| <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-red-600 transition duration-300"> | |
| Schedule Visit | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 max-w-2xl mx-auto"> | |
| <form class="space-y-6"> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2"> | |
| <div> | |
| <label for="first-name" class="sr-only">First name</label> | |
| <input type="text" name="first-name" id="first-name" autocomplete="given-name" class="form-input block w-full rounded-md border-gray-700 bg-gray-800 py-3 px-4 text-white placeholder-gray-400 focus:border-primary focus:ring-primary" placeholder="First name"> | |
| </div> | |
| <div> | |
| <label for="last-name" class="sr-only">Last name</label> | |
| <input type="text" name="last-name" id="last-name" autocomplete="family-name" class="form-input block w-full rounded-md border-gray-700 bg-gray-800 py-3 px-4 text-white placeholder-gray-400 focus:border-primary focus:ring-primary" placeholder="Last name"> | |
| </div> | |
| <div class="sm:col-span-2"> | |
| <label for="email" class="sr-only">Email</label> | |
| <input type="email" name="email" id="email" autocomplete="email" class="form-input block w-full rounded-md border-gray-700 bg-gray-800 py-3 px-4 text-white placeholder-gray-400 focus:border-primary focus:ring-primary" placeholder="Email"> | |
| </div> | |
| <div class="sm:col-span-2"> | |
| <label for="phone" class="sr-only">Phone</label> | |
| <input type="tel" name="phone" id="phone" autocomplete="tel" class="form-input block w-full rounded-md border-gray-700 bg-gray-800 py-3 px-4 text-white placeholder-gray-400 focus:border-primary focus:ring-primary" placeholder="Phone"> | |
| </div> | |
| <div class="sm:col-span-2"> | |
| <label for="service" class="sr-only">Service Needed</label> | |
| <select id="service" name="service" class="form-input block w-full rounded-md border-gray-700 bg-gray-800 py-3 px-4 text-white placeholder-gray-400 focus:border-primary focus:ring-primary"> | |
| <option>Select a service</option> | |
| <option>Residential Security</option> | |
| <option>Commercial Protection</option> | |
| <option>Campus Security</option> | |
| <option>Event Security</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| <div class="sm:col-span-2"> | |
| <label for="message" class="sr-only">Message</label> | |
| <textarea id="message" name="message" rows="4" class="form-input block w-full rounded-md border-gray-700 bg-gray-800 py-3 px-4 text-white placeholder-gray-400 focus:border-primary focus:ring-primary" placeholder="How can we help?"></textarea> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button type="submit" class="inline-flex items-center justify-center w-full rounded-md border border-transparent bg-primary px-6 py-3 text-base font-medium text-white hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition duration-300 transform hover:scale-105"> | |
| <i class="fas fa-paper-plane mr-2"></i> Send Message | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-dark border-t border-gray-800"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div class="col-span-2"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-shield-alt text-primary text-2xl mr-2"></i> | |
| <span class="text-white font-title text-xl tracking-tight">LOW PRESSURE <span class="text-primary">SECURITY</span></span> | |
| </div> | |
| <p class="mt-4 text-sm text-gray-300"> | |
| Berkeley's community-first security partner since 2008. Combining local knowledge with professional protection. | |
| </p> | |
| <div class="mt-6 flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-primary transition duration-300"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-primary transition duration-300"> | |
| <i class="fab fa-facebook text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-primary transition duration-300"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-primary transition duration-300"> | |
| <i class="fab fa-linkedin text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-title font-semibold text-light tracking-wider uppercase">Services</h3> | |
| <div class="mt-4 space-y-4"> | |
| <a href="#" class="text-base text-gray-300 hover:text-primary block transition duration-300">Residential Security</a> | |
| <a href="#" class="text-base text-gray-300 hover:text-primary block transition duration-300">Commercial Protection</a> | |
| <a href="#" class="text-base text-gray-300 hover:text-primary block transition duration-300">Campus Security</a> | |
| <a href="#" class="text-base text-gray-300 hover:text-primary block transition duration-300">Event Security</a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-title font-semibold text-light tracking-wider uppercase">Company</h3> | |
| <div class="mt-4 space-y-4"> | |
| <a href="#" class="text-base text-gray-300 hover:text-primary block transition duration-300">About Us</a> | |
| <a href="#" class="text-base text-gray-300 hover:text-primary block transition duration-300">Our Team</a> | |
| <a href="#" class="text-base text-gray-300 hover:text-primary block transition duration-300">Careers</a> | |
| <a href="#" class="text-base text-gray-300 hover:text-primary block transition duration-300">Community Impact</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between"> | |
| <p class="text-base text-gray-400"> | |
| © 2023 Low Pressure Security. All rights reserved. | |
| </p> | |
| <div class="mt-4 md:mt-0 flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-primary text-sm transition duration-300">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-primary text-sm transition duration-300">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-primary text-sm transition duration-300">Accessibility</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <button id="back-to-top" class="hidden fixed bottom-8 right-8 bg-primary text-white p-3 rounded-full shadow-lg hover:bg-red-600 transition duration-300 z-50"> | |
| <i class="fas fa-arrow-up text-xl"></i> | |
| </button> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.querySelector('.mobile-menu-button'); | |
| const mobileMenu = document.querySelector('.mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Close mobile menu when clicking a link | |
| const mobileMenuLinks = document.querySelectorAll('.mobile-menu a'); | |
| mobileMenuLinks.forEach(link => { | |
| link.addEventListener('click', () => { | |
| mobileMenu.classList.add('hidden'); | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Back to top button | |
| const backToTopButton = document.getElementById('back-to-top'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.remove('hidden'); | |
| } else { | |
| backToTopButton.classList.add('hidden'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Form submission | |
| const contactForm = document.querySelector('form'); | |
| if (contactForm) { | |
| contactForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // Here you would typically send the form data to a server | |
| alert('Thank you for your message! We will contact you soon.'); | |
| contactForm.reset(); | |
| }); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Boobs00/low-pressure-security-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |