Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CodeStreet.ai | AI-Powered Street & Home Security Solutions</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"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .heading-font { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .tech-bg { | |
| background-image: radial-gradient(circle at 50% 50%, rgba(29, 78, 216, 0.1) 0%, transparent 70%); | |
| } | |
| .security-gradient { | |
| background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%); | |
| } | |
| .ai-pattern { | |
| background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233b82f6' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .glow { | |
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| .dashboard-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%); | |
| } | |
| .feature-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .feature-card:hover .feature-icon { | |
| transform: scale(1.1); | |
| color: #3b82f6; | |
| } | |
| .security-camera { | |
| position: relative; | |
| } | |
| .security-camera::after { | |
| content: ''; | |
| position: absolute; | |
| top: 15%; | |
| left: 25%; | |
| width: 50%; | |
| height: 50%; | |
| background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%); | |
| border-radius: 50%; | |
| z-index: -1; | |
| } | |
| .video-container { | |
| border-radius: 12px; | |
| overflow: hidden; | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header/Navigation --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 security-gradient rounded-lg flex items-center justify-center text-white"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h1 class="heading-font text-2xl font-bold text-gray-900">CodeStreet<span class="text-blue-600">.ai</span></h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#solutions" class="text-gray-700 hover:text-blue-600 transition">Solutions</a> | |
| <a href="#technology" class="text-gray-700 hover:text-blue-600 transition">Technology</a> | |
| <a href="#features" class="text-gray-700 hover:text-blue-600 transition">Features</a> | |
| <a href="#pricing" class="text-gray-700 hover:text-blue-600 transition">Pricing</a> | |
| <a href="#contact" class="text-gray-700 hover:text-blue-600 transition">Contact</a> | |
| </nav> | |
| <div class="flex items-center space-x-6"> | |
| <a href="#" class="hidden md:block text-gray-700 hover:text-blue-600 transition">Login</a> | |
| <button class="security-gradient hover:bg-blue-700 text-white px-6 py-2 rounded-md font-medium transition shadow-lg hover:shadow-blue-200">Get Demo</button> | |
| <button class="md:hidden" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-gray-700"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden hidden bg-white shadow-lg py-4 px-4" id="mobile-menu"> | |
| <div class="flex flex-col space-y-4"> | |
| <a href="#solutions" class="text-gray-700 hover:text-blue-600 transition">Solutions</a> | |
| <a href="#technology" class="text-gray-700 hover:text-blue-600 transition">Technology</a> | |
| <a href="#features" class="text-gray-700 hover:text-blue-600 transition">Features</a> | |
| <a href="#pricing" class="text-gray-700 hover:text-blue-600 transition">Pricing</a> | |
| <a href="#contact" class="text-gray-700 hover:text-blue-600 transition">Contact</a> | |
| <a href="#" class="text-gray-700 hover:text-blue-600 transition">Login</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="tech-bg py-16 md:py-24"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <span class="inline-block security-gradient text-white text-xs font-bold px-3 py-1 rounded-full mb-4">AI SECURITY REINVENTED</span> | |
| <h2 class="heading-font text-4xl md:text-5xl font-bold text-gray-900 mb-4">Next-Generation AI Security for Streets & Homes</h2> | |
| <p class="text-gray-600 mb-8 text-lg">CodeStreet.ai leverages cutting-edge artificial intelligence to deliver unparalleled security solutions that learn, adapt, and protect in real-time.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#contact" class="security-gradient hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition shadow-lg hover:shadow-blue-200 text-center">Request Demo</a> | |
| <a href="#technology" class="border border-blue-600 text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-md font-medium transition text-center">How It Works</a> | |
| </div> | |
| <div class="mt-8 flex items-center space-x-4"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Customer"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Customer"> | |
| <img src="https://randomuser.me/api/portraits/men/67.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Customer"> | |
| </div> | |
| <p class="text-sm text-gray-600"><span class="font-bold text-blue-600">500+</span> cities protected worldwide</p> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center relative"> | |
| <div class="relative"> | |
| <div class="video-container"> | |
| <img src="https://images.unsplash.com/photo-1581093458179-1fac53b1e8e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="AI Security Dashboard" class="rounded-lg w-full max-w-md"> | |
| </div> | |
| <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-lg shadow-lg"> | |
| <p class="text-sm text-gray-600">Real-time threat detection</p> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-10 left-0 bg-white p-4 rounded-lg shadow-lg hidden md:block"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 security-gradient rounded-full flex items-center justify-center text-white mr-3"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500">Response Time</p> | |
| <p class="text-sm font-medium">Under 500ms</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Trusted By Section --> | |
| <section class="py-12 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <p class="text-center text-gray-500 text-sm mb-8">TRUSTED BY INDUSTRY LEADERS</p> | |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center"> | |
| <img src="https://via.placeholder.com/150x50/3b82f6/ffffff?text=City+Gov" alt="City Government" class="h-8 opacity-70 mx-auto"> | |
| <img src="https://via.placeholder.com/150x50/3b82f6/ffffff?text=SecureCo" alt="SecureCo" class="h-10 opacity-70 mx-auto"> | |
| <img src="https://via.placeholder.com/150x50/3b82f6/ffffff?text=UrbanSafe" alt="UrbanSafe" class="h-12 opacity-70 mx-auto"> | |
| <img src="https://via.placeholder.com/150x50/3b82f6/ffffff?text=HomeShield" alt="HomeShield" class="h-8 opacity-70 mx-auto"> | |
| <img src="https://via.placeholder.com/150x50/3b82f6/ffffff?text=NeighborSafe" alt="NeighborSafe" class="h-10 opacity-70 mx-auto"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Solutions Section --> | |
| <section id="solutions" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="heading-font text-3xl font-bold text-gray-900 mb-2">AI Security Solutions</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Comprehensive protection powered by artificial intelligence</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Street Security --> | |
| <div class="bg-gray-50 rounded-xl p-8 transition duration-300 card-hover"> | |
| <div class="w-16 h-16 security-gradient rounded-lg flex items-center justify-center text-white mb-6"> | |
| <i class="fas fa-road text-2xl"></i> | |
| </div> | |
| <h3 class="heading-font text-xl font-bold text-gray-900 mb-3">Street Security AI</h3> | |
| <p class="text-gray-600 mb-6">Our street-level AI surveillance systems detect, analyze, and respond to potential threats in public spaces with unprecedented accuracy.</p> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-blue-600"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-2 text-gray-600">Real-time anomaly detection</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-blue-600"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-2 text-gray-600">Predictive crime prevention</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-blue-600"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-2 text-gray-600">Automated emergency response</p> | |
| </li> | |
| </ul> | |
| <a href="#" class="inline-flex items-center text-blue-600 font-medium"> | |
| Learn more <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Home Security --> | |
| <div class="bg-gray-50 rounded-xl p-8 transition duration-300 card-hover"> | |
| <div class="w-16 h-16 security-gradient rounded-lg flex items-center justify-center text-white mb-6"> | |
| <i class="fas fa-home text-2xl"></i> | |
| </div> | |
| <h3 class="heading-font text-xl font-bold text-gray-900 mb-3">Home Security AI</h3> | |
| <p class="text-gray-600 mb-6">Smart home protection that learns your routines, recognizes authorized individuals, and provides military-grade security for your family.</p> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-blue-600"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-2 text-gray-600">Facial recognition technology</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-blue-600"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-2 text-gray-600">Behavioral pattern analysis</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-blue-600"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="ml-2 text-gray-600">Smart integration with IoT devices</p> | |
| </li> | |
| </ul> | |
| <a href="#" class="inline-flex items-center text-blue-600 font-medium"> | |
| Learn more <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Technology Section --> | |
| <section id="technology" class="py-16 ai-pattern"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="heading-font text-3xl font-bold text-gray-900 mb-2">Our Proprietary AI Technology</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Advanced machine learning algorithms designed specifically for security applications</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Neural Networks --> | |
| <div class="bg-white rounded-xl p-8 transition duration-300 card-hover"> | |
| <div class="w-16 h-16 security-gradient rounded-lg flex items-center justify-center text-white mb-6"> | |
| <i class="fas fa-brain text-2xl"></i> | |
| </div> | |
| <h3 class="heading-font text-xl font-bold text-gray-900 mb-3">Deep Neural Networks</h3> | |
| <p class="text-gray-600">Our proprietary neural architecture processes visual data with human-like perception but at machine speed and scale.</p> | |
| </div> | |
| <!-- Edge Computing --> | |
| <div class="bg-white rounded-xl p-8 transition duration-300 card-hover"> | |
| <div class="w-16 h-16 security-gradient rounded-lg flex items-center justify-center text-white mb-6"> | |
| <i class="fas fa-microchip text-2xl"></i> | |
| </div> | |
| <h3 class="heading-font text-xl font-bold text-gray-900 mb-3">Edge AI Processing</h3> | |
| <p class="text-gray-600">On-device processing ensures immediate response without latency, even when network connectivity is limited.</p> | |
| </div> | |
| <!-- Behavioral Analysis --> | |
| <div class="bg-white rounded-xl p-8 transition duration-300 card-hover"> | |
| <div class="w-16 h-16 security-gradient rounded-lg flex items-center justify-center text-white mb-6"> | |
| <i class="fas fa-chart-line text-2xl"></i> | |
| </div> | |
| <h3 class="heading-font text-xl font-bold text-gray-900 mb-3">Behavioral Analytics</h3> | |
| <p class="text-gray-600">Our systems don't just see - they understand context and intent through advanced behavioral modeling.</p> | |
| </div> | |
| </div> | |
| <div class="mt-16 grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h3 class="heading-font text-2xl font-bold text-gray-900 mb-4">How CodeStreet.ai Works</h3> | |
| <p class="text-gray-600 mb-6">Our AI security platform operates through a continuous cycle of observation, analysis, and response, becoming more intelligent with each interaction.</p> | |
| <div class="space-y-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-4"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md security-gradient text-white"> | |
| <span class="heading-font">1</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-gray-900">Data Collection</h4> | |
| <p class="text-gray-600">High-resolution cameras and sensors capture environmental data with precision.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-4"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md security-gradient text-white"> | |
| <span class="heading-font">2</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-gray-900">AI Processing</h4> | |
| <p class="text-gray-600">Our neural networks analyze data in real-time to identify potential threats.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-4"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md security-gradient text-white"> | |
| <span class="heading-font">3</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-gray-900">Response Protocol</h4> | |
| <p class="text-gray-600">Automated alerts and actions are triggered based on threat level assessment.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative security-camera"> | |
| <img src="https://images.unsplash.com/photo-1561736778-92e52a7769ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="AI Security Camera" class="rounded-lg w-full"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="heading-font text-3xl font-bold text-gray-900 mb-2">Key Features</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Comprehensive security capabilities powered by artificial intelligence</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="bg-white rounded-xl p-8 transition duration-300 feature-card"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mb-6 feature-icon"> | |
| <i class="fas fa-eye text-2xl"></i> | |
| </div> | |
| <h3 class="heading-font text-xl font-bold text-gray-900 mb-3">Real-Time Monitoring</h3> | |
| <p class="text-gray-600">24/7 surveillance with instant threat detection and classification across multiple camera feeds simultaneously.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-white rounded-xl p-8 transition duration-300 feature-card"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mb-6 feature-icon"> | |
| <i class="fas fa-bell text-2xl"></i> | |
| </div> | |
| <h3 class="heading-font text-xl font-bold text-gray-900 mb-3">Smart Alerts</h3> | |
| <p class="text-gray-600">AI-powered notifications that distinguish between real threats and false alarms with 99.7% accuracy.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-white rounded-xl p-8 transition duration-300 feature-card"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mb-6 feature-icon"> | |
| <i class="fas fa-user-shield text-2xl"></i> | |
| </div> | |
| <h3 class="heading-font text-xl font-bold text-gray-900 mb-3">Facial Recognition</h3> | |
| <p class="text-gray-600">Identify authorized individuals and flag unknown persons with industry-leading accuracy.</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="bg-white rounded-xl p-8 transition duration-300 feature-card"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mb-6 feature-icon"> | |
| <i class="fas fa-project-diagram text-2xl"></i> | |
| </div> | |
| <h3 class="heading-font text-xl font-bold text-gray-900 mb-3">Predictive Analytics</h3> | |
| <p class="text-gray-600">Anticipate potential security breaches before they occur using behavioral pattern analysis.</p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="bg-white rounded-xl p-8 transition duration-300 feature-card"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mb-6 feature-icon"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| </div> | |
| <h3 class="heading-font text-xl font-bold text-gray-900 mb-3">Automated Response</h3> | |
| <p class="text-gray-600">Pre-programmed actions triggered by specific threat levels, from alerts to lockdown procedures.</p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="bg-white rounded-xl p-8 transition duration-300 feature-card"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mb-6 feature-icon"> | |
| <i class="fas fa-cloud text-2xl"></i> | |
| </div> | |
| <h3 class="heading-font text-xl font-bold text-gray-900 mb-3">Cloud Integration</h3> | |
| <p class="text-gray-600">Secure cloud storage with encrypted footage and remote access to your security dashboard.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Dashboard Preview --> | |
| <section class="py-16 dashboard-bg text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h2 class="heading-font text-3xl font-bold mb-4">Command Center Dashboard</h2> | |
| <p class="mb-6 opacity-90">Our intuitive dashboard provides complete visibility and control over your security ecosystem with real-time analytics and historical insights.</p> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-5 h-5 rounded-full bg-blue-400 flex items-center justify-center"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 opacity-90">Live camera feeds with AI annotations</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-5 h-5 rounded-full bg-blue-400 flex items-center justify-center"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 opacity-90">Threat heatmaps and activity timelines</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-5 h-5 rounded-full bg-blue-400 flex items-center justify-center"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 opacity-90">Customizable alert thresholds and responses</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-5 h-5 rounded-full bg-blue-400 flex items-center justify-center"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 opacity-90">System health monitoring and reporting</p> | |
| </li> | |
| </ul> | |
| <button class="bg-white text-blue-700 hover:bg-gray-100 px-6 py-3 rounded-md font-medium transition shadow-lg">View Demo Dashboard</button> | |
| </div> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Security Dashboard" class="rounded-lg w-full glow"> | |
| <div class="absolute -bottom-6 -right-6 bg-blue-800 p-4 rounded-lg shadow-lg"> | |
| <p class="text-sm">AI-detected anomalies highlighted</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="heading-font text-3xl font-bold text-gray-900 mb-2">Flexible Pricing Plans</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Choose the security solution that fits your needs and budget</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <!-- Basic Plan --> | |
| <div class="bg-gray-50 rounded-xl p-8 transition duration-300 card-hover"> | |
| <h3 class="heading-font text-xl font-bold text-gray-900 mb-3">Home Essential</h3> | |
| <p class="text-gray-600 mb-6">Ideal for residential security with basic AI features</p> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold text-gray-900">$29</span> | |
| <span class="text-gray-600">/month</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-blue-600"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-gray-600">2 AI camera licenses</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-blue-600"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-gray-600">Basic threat detection</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-blue-600"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-gray-600">Mobile alerts</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-blue-600"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-gray-600">7-day video history</p> | |
| </li> | |
| </ul> | |
| <button class="w-full border border-blue-600 text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-md font-medium transition">Get Started</button> | |
| </div> | |
| <!-- Pro Plan --> | |
| <div class="bg-white rounded-xl p-8 border-2 border-blue-600 transition duration-300 card-hover shadow-lg relative"> | |
| <div class="absolute top-0 right-0 bg-blue-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">POPULAR</div> | |
| <h3 class="heading-font text-xl font-bold text-gray-900 mb-3">Business Pro</h3> | |
| <p class="text-gray-600 mb-6">Comprehensive security for small to medium businesses</p> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold text-gray-900">$99</span> | |
| <span class="text-gray-600">/month</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-blue-600"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-gray-600">8 AI camera licenses</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-blue-600"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-gray-600">Advanced threat detection</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-blue-600"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-gray-600">Facial recognition</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-blue-600"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-gray-600">30-day video history</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-blue-600"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-gray-600">Priority support</p> | |
| </li> | |
| </ul> | |
| <button class="w-full security-gradient hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition shadow-lg">Get Started</button> | |
| </div> | |
| <!-- Enterprise Plan --> | |
| <div class="bg-gray-50 rounded-xl p-8 transition duration-300 card-hover"> | |
| <h3 class="heading-font text-xl font-bold text-gray-900 mb-3">Municipal Elite</h3> | |
| <p class="text-gray-600 mb-6">Enterprise-grade security for cities and large organizations</p> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold text-gray-900">Custom</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-blue-600"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-gray-600">Unlimited cameras</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-blue-600"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-gray-600">Predictive analytics</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-blue-600"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-gray-600">Custom AI models</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-blue-600"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-gray-600">90-day video history</p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-blue-600"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="ml-2 text-gray-600">Dedicated account manager</p> | |
| </li> | |
| </ul> | |
| <button class="w-full border border-blue-600 text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-md font-medium transition">Contact Sales</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="heading-font text-3xl font-bold text-gray-900 mb-2">Trusted by Security Professionals</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Hear from organizations that have transformed their security with CodeStreet.ai</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-blue-500 text-xl mr-1"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"CodeStreet.ai reduced false alarms by 92% while increasing our threat detection rate. The AI's ability to learn our unique environment has been game-changing."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Michael K." class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Michael K.</h4> | |
| <p class="text-gray-500 text-sm">Security Director, Metro City PD</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-blue-500 text-xl mr-1"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"After implementing CodeStreet.ai across our retail locations, we've seen a 75% reduction in security incidents and significantly improved response times."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Sarah L." class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Sarah L.</h4> | |
| <p class="text-gray-500 text-sm">VP Operations, Urban Retail Chain</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-blue-500 text-xl mr-1"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"The predictive capabilities have allowed us to prevent incidents before they occur. Our HOA residents feel safer than ever with this technology."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="David R." class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">David R.</h4> | |
| <p class="text-gray-500 text-sm">President, Lakeside HOA</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 security-gradient text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="heading-font text-3xl font-bold mb-4">Ready to Transform Your Security?</h2> | |
| <p class="text-xl opacity-90 mb-8 max-w-2xl mx-auto">Schedule a personalized demo to see CodeStreet.ai in action and discover how our AI can protect what matters most to you.</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#contact" class="bg-white text-blue-700 hover:bg-gray-100 px-8 py-3 rounded-md font-medium transition shadow-lg">Request Demo</a> | |
| <a href="#" class="bg-transparent border-2 border-white hover:bg-white hover:text-blue-700 px-8 py-3 rounded-md font-medium transition">Contact Sales</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <div> | |
| <h2 class="heading-font text-3xl font-bold text-gray-900 mb-4">Get In Touch</h2> | |
| <p class="text-gray-600 mb-8">Our security experts are ready to answer your questions and help you design the perfect AI security solution for your needs.</p> | |
| <div class="space-y-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-4"> | |
| <div class="w-12 h-12 security-gradient rounded-lg flex items-center justify-center text-white"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-gray-900">Headquarters</h4> | |
| <p class="text-gray-600">123 Security Plaza, Suite 500<br>San Francisco, CA 94107</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-4"> | |
| <div class="w-12 h-12 security-gradient rounded-lg flex items-center justify-center text-white"> | |
| <i class="fas fa-phone-alt"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-gray-900">Contact</h4> | |
| <p class="text-gray-600">Sales: (800) 555-0199<br>Support: (800) 555-0188</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-4"> | |
| <div class="w-12 h-12 security-gradient rounded-lg flex items-center justify-center text-white"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-gray-900">Email</h4> | |
| <p class="text-gray-600">info@codestreet.ai<br>support@codestreet.ai</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-gray-50 rounded-xl p-8"> | |
| <h3 class="heading-font text-xl font-bold text-gray-900 mb-6">Send Us a Message</h3> | |
| <form> | |
| <div class="grid grid-cols-1 gap-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="company" class="block text-sm font-medium text-gray-700 mb-1">Company</label> | |
| <input type="text" id="company" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="security-gradient hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition shadow-lg hover:shadow-blue-200 w-full">Send Message</button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-16 pb-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12"> | |
| <div> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <div class="w-10 h-10 security-gradient rounded-lg flex items-center justify-center text-white"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3 class="heading-font text-xl font-bold">CodeStreet<span class="text-blue-400">.ai</span></h3> | |
| </div> | |
| <p class="text-gray-400 mb-4">Artificial intelligence redefining security for the modern world.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"><i class="fab fa-linkedin-in"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="heading-font text-lg font-bold mb-4">Solutions</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Street Security</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Home Security</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Retail Security</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Campus Security</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Government</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="heading-font text-lg font-bold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">API Reference</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Case Studies</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Security Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">White Papers</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="heading-font text-lg font-bold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Press</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Partners</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 CodeStreet.ai. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 text-sm transition">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 text-sm transition">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 text-sm transition">Security</a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 text-sm transition">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Mobile Menu Script --> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('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' | |
| }); | |
| // Close mobile menu if open | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| </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=aakinlalu/codestreet-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |