Hugging Face's logo

Spaces:
SimpleSam
/
wajibika
Running

App Files Community
wajibika / index.html
SimpleSam's picture
SimpleSam
create a website showcasing an app called wajibika which is an AI system that allows phones and CCTV cameras to detect crime. The target audience for the app are businesses which track and carry out surveillance on employees as well as nations and governments that monitor and carry out surveillance on police officers, government officials and the citizens. - Initial Deployment
bc429ac verified
raw
history blame contribute delete
41.6 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wajibika - AI-Powered Crime Detection System</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
.hero-gradient {
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #1d4ed8 100%);
}
.feature-card: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);
}
</style>
</head>
<body class="font-sans antialiased text-gray-800">
<!-- Navigation -->
<nav class="bg-white shadow-sm fixed w-full z-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i data-feather="shield" class="h-8 w-8 text-blue-600"></i>
<span class="ml-2 text-xl font-bold text-gray-900">WAJIBIKA</span>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
<a href="#features" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Features</a>
<a href="#solutions" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Solutions</a>
<a href="#pricing" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Pricing</a>
<a href="#contact" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Contact</a>
<a href="#" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700">Request Demo</a>
</div>
<div class="-mr-2 flex items-center md:hidden">
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false">
<i data-feather="menu"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="hero-gradient pt-24 pb-32 text-white">
<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="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
<h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl" data-aos="fade-right">
<span class="block">AI-Powered Crime</span>
<span class="block text-blue-200">Detection System</span>
</h1>
<p class="mt-3 text-base text-blue-100 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0" data-aos="fade-right" data-aos-delay="100">
Wajibika leverages advanced AI to transform phones and CCTV cameras into intelligent crime detection systems for businesses and governments.
</p>
<div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0" data-aos="fade-right" data-aos-delay="200">
<div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
Get Started
</a>
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-500 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10">
Live Demo
</a>
</div>
</div>
</div>
<div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center" data-aos="fade-left">
<div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
<div class="relative block w-full bg-white rounded-lg overflow-hidden">
<img class="w-full" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="AI Surveillance">
<div class="absolute inset-0 bg-blue-600 opacity-20"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<div id="features" class="py-16 bg-gray-50 overflow-hidden">
<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-blue-600 font-semibold tracking-wide uppercase" data-aos="fade-up">Features</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl" data-aos="fade-up" data-aos-delay="100">
Advanced AI Surveillance Capabilities
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto" data-aos="fade-up" data-aos-delay="200">
Wajibika transforms ordinary cameras into intelligent security systems.
</p>
</div>
<div class="mt-20">
<div class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
<!-- Feature 1 -->
<div class="feature-card transition-all duration-300 ease-in-out" data-aos="fade-up" data-aos-delay="100">
<div class="relative bg-white py-10 px-6 rounded-lg shadow-md h-full">
<div class="absolute -top-6 left-6 bg-blue-600 rounded-md p-3 text-white">
<i data-feather="eye" class="h-6 w-6"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mt-8">Real-time Detection</h3>
<p class="mt-2 text-base text-gray-500">
Instantly identifies suspicious activities, unauthorized access, and potential threats in real-time.
</p>
</div>
</div>
<!-- Feature 2 -->
<div class="feature-card transition-all duration-300 ease-in-out" data-aos="fade-up" data-aos-delay="200">
<div class="relative bg-white py-10 px-6 rounded-lg shadow-md h-full">
<div class="absolute -top-6 left-6 bg-blue-600 rounded-md p-3 text-white">
<i data-feather="activity" class="h-6 w-6"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mt-8">Behavior Analysis</h3>
<p class="mt-2 text-base text-gray-500">
Advanced algorithms analyze patterns to detect unusual behavior among employees or citizens.
</p>
</div>
</div>
<!-- Feature 3 -->
<div class="feature-card transition-all duration-300 ease-in-out" data-aos="fade-up" data-aos-delay="300">
<div class="relative bg-white py-10 px-6 rounded-lg shadow-md h-full">
<div class="absolute -top-6 left-6 bg-blue-600 rounded-md p-3 text-white">
<i data-feather="alert-triangle" class="h-6 w-6"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mt-8">Threat Alerts</h3>
<p class="mt-2 text-base text-gray-500">
Immediate notifications sent to security personnel when potential threats are detected.
</p>
</div>
</div>
<!-- Feature 4 -->
<div class="feature-card transition-all duration-300 ease-in-out" data-aos="fade-up" data-aos-delay="400">
<div class="relative bg-white py-10 px-6 rounded-lg shadow-md h-full">
<div class="absolute -top-6 left-6 bg-blue-600 rounded-md p-3 text-white">
<i data-feather="database" class="h-6 w-6"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mt-8">Data Integration</h3>
<p class="mt-2 text-base text-gray-500">
Seamlessly integrates with existing CCTV networks and mobile devices for comprehensive coverage.
</p>
</div>
</div>
<!-- Feature 5 -->
<div class="feature-card transition-all duration-300 ease-in-out" data-aos="fade-up" data-aos-delay="500">
<div class="relative bg-white py-10 px-6 rounded-lg shadow-md h-full">
<div class="absolute -top-6 left-6 bg-blue-600 rounded-md p-3 text-white">
<i data-feather="users" class="h-6 w-6"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mt-8">Personnel Monitoring</h3>
<p class="mt-2 text-base text-gray-500">
Tracks government officials and police officers to ensure compliance with regulations.
</p>
</div>
</div>
<!-- Feature 6 -->
<div class="feature-card transition-all duration-300 ease-in-out" data-aos="fade-up" data-aos-delay="600">
<div class="relative bg-white py-10 px-6 rounded-lg shadow-md h-full">
<div class="absolute -top-6 left-6 bg-blue-600 rounded-md p-3 text-white">
<i data-feather="bar-chart-2" class="h-6 w-6"></i>
</div>
<h3 class="text-lg font-medium text-gray-900 mt-8">Analytics Dashboard</h3>
<p class="mt-2 text-base text-gray-500">
Comprehensive reporting tools to analyze security trends and improve protocols.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Solutions Section -->
<div id="solutions" class="py-16 bg-white">
<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-blue-600 font-semibold tracking-wide uppercase" data-aos="fade-up">Solutions</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl" data-aos="fade-up" data-aos-delay="100">
Tailored for Your Security Needs
</p>
</div>
<div class="grid md:grid-cols-2 gap-12">
<!-- Business Solution -->
<div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg" data-aos="fade-right">
<div class="p-8">
<div class="flex items-center">
<div class="bg-blue-100 p-3 rounded-lg">
<i data-feather="briefcase" class="h-6 w-6 text-blue-600"></i>
</div>
<h3 class="ml-4 text-xl font-bold text-gray-900">For Businesses</h3>
</div>
<p class="mt-4 text-gray-600">
Protect your assets and monitor employee activities with our enterprise-grade surveillance solution. Detect theft, unauthorized access, and policy violations in real-time.
</p>
<ul class="mt-6 space-y-3">
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5"></i>
<span class="ml-3 text-gray-600">Employee activity monitoring</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5"></i>
<span class="ml-3 text-gray-600">Asset protection</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5"></i>
<span class="ml-3 text-gray-600">Access control integration</span>
</li>
</ul>
</div>
<div class="bg-gray-100 px-6 py-4">
<a href="#" class="text-blue-600 font-medium text-sm flex items-center">
Learn more about business solutions
<i data-feather="arrow-right" class="h-4 w-4 ml-1"></i>
</a>
</div>
</div>
<!-- Government Solution -->
<div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg" data-aos="fade-left">
<div class="p-8">
<div class="flex items-center">
<div class="bg-blue-100 p-3 rounded-lg">
<i data-feather="shield" class="h-6 w-6 text-blue-600"></i>
</div>
<h3 class="ml-4 text-xl font-bold text-gray-900">For Governments</h3>
</div>
<p class="mt-4 text-gray-600">
Enhance public safety and monitor government personnel with our comprehensive surveillance platform. Detect criminal activity and ensure compliance with regulations.
</p>
<ul class="mt-6 space-y-3">
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5"></i>
<span class="ml-3 text-gray-600">Public safety monitoring</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5"></i>
<span class="ml-3 text-gray-600">Officer compliance tracking</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5"></i>
<span class="ml-3 text-gray-600">Crowd behavior analysis</span>
</li>
</ul>
</div>
<div class="bg-gray-100 px-6 py-4">
<a href="#" class="text-blue-600 font-medium text-sm flex items-center">
Learn more about government solutions
<i data-feather="arrow-right" class="h-4 w-4 ml-1"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Testimonials -->
<div class="py-16 bg-gray-900 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center mb-12">
<h2 class="text-base text-blue-400 font-semibold tracking-wide uppercase" data-aos="fade-up">Trusted By</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl" data-aos="fade-up" data-aos-delay="100">
Organizations Worldwide
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="bg-gray-800 p-8 rounded-xl" data-aos="fade-up" data-aos-delay="100">
<div class="flex items-center mb-4">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Testimonial">
</div>
<div class="ml-4">
<h4 class="text-lg font-medium text-white">Michael Johnson</h4>
<p class="text-blue-300">Security Director, Fortune 500 Company</p>
</div>
</div>
<p class="text-gray-300">
"Wajibika has transformed our security operations. We've reduced theft incidents by 78% in just six months."
</p>
</div>
<!-- Testimonial 2 -->
<div class="bg-gray-800 p-8 rounded-xl" data-aos="fade-up" data-aos-delay="200">
<div class="flex items-center mb-4">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Testimonial">
</div>
<div class="ml-4">
<h4 class="text-lg font-medium text-white">Sarah Williams</h4>
<p class="text-blue-300">Minister of Interior, African Nation</p>
</div>
</div>
<p class="text-gray-300">
"The AI capabilities of Wajibika have significantly improved our ability to monitor public spaces and prevent crime."
</p>
</div>
<!-- Testimonial 3 -->
<div class="bg-gray-800 p-8 rounded-xl" data-aos="fade-up" data-aos-delay="300">
<div class="flex items-center mb-4">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Testimonial">
</div>
<div class="ml-4">
<h4 class="text-lg font-medium text-white">David Chen</h4>
<p class="text-blue-300">CTO, Global Retail Chain</p>
</div>
</div>
<p class="text-gray-300">
"Implementing Wajibika across our stores has given us unprecedented visibility into employee activities and customer interactions."
</p>
</div>
</div>
</div>
</div>
<!-- Pricing Section -->
<div id="pricing" class="py-16 bg-gray-50">
<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-blue-600 font-semibold tracking-wide uppercase" data-aos="fade-up">Pricing</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl" data-aos="fade-up" data-aos-delay="100">
Flexible Plans for Every Need
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto" data-aos="fade-up" data-aos-delay="200">
Choose the plan that fits your security requirements.
</p>
</div>
<div class="mt-12 space-y-12 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8">
<!-- Business Plan -->
<div class="relative bg-white border border-gray-200 rounded-2xl shadow-sm flex flex-col" data-aos="fade-up" data-aos-delay="100">
<div class="p-8">
<h3 class="text-lg font-medium text-gray-900">Business</h3>
<p class="mt-4 text-sm text-gray-500">
For companies monitoring employees and facilities
</p>
<div class="mt-6">
<p class="text-4xl font-bold text-gray-900">$499</p>
<p class="mt-1 text-sm text-gray-500">per month</p>
</div>
<ul class="mt-6 space-y-4">
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5"></i>
<span class="ml-3 text-gray-600">Up to 50 cameras</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5"></i>
<span class="ml-3 text-gray-600">Employee monitoring</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5"></i>
<span class="ml-3 text-gray-600">Theft detection</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5"></i>
<span class="ml-3 text-gray-600">Basic analytics</span>
</li>
</ul>
</div>
<div class="bg-gray-50 border-t border-gray-200 px-8 py-6 rounded-b-2xl">
<a href="#" class="w-full block text-center bg-blue-600 border border-blue-600 rounded-md py-2 text-sm font-semibold text-white hover:bg-blue-700">
Get started
</a>
</div>
</div>
<!-- Enterprise Plan -->
<div class="relative bg-white border-2 border-blue-600 rounded-2xl shadow-xl flex flex-col glow" data-aos="fade-up">
<div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="inline-flex items-center px-4 py-1 rounded-full text-xs font-semibold tracking-wide uppercase bg-blue-600 text-white">
Most popular
</span>
</div>
<div class="p-8">
<h3 class="text-lg font-medium text-gray-900">Enterprise</h3>
<p class="mt-4 text-sm text-gray-500">
For large organizations with complex security needs
</p>
<div class="mt-6">
<p class="text-4xl font-bold text-gray-900">$1,999</p>
<p class="mt-1 text-sm text-gray-500">per month</p>
</div>
<ul class="mt-6 space-y-4">
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5"></i>
<span class="ml-3 text-gray-600">Up to 500 cameras</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5"></i>
<span class="ml-3 text-gray-600">Advanced behavior analysis</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5"></i>
<span class="ml-3 text-gray-600">Custom threat models</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5"></i>
<span class="ml-3 text-gray-600">Priority support</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5"></i>
<span class="ml-3 text-gray-600">Dedicated account manager</span>
</li>
</ul>
</div>
<div class="bg-gray-50 border-t border-gray-200 px-8 py-6 rounded-b-2xl">
<a href="#" class="w-full block text-center bg-blue-600 border border-blue-600 rounded-md py-2 text-sm font-semibold text-white hover:bg-blue-700">
Get started
</a>
</div>
</div>
<!-- Government Plan -->
<div class="relative bg-white border border-gray-200 rounded-2xl shadow-sm flex flex-col" data-aos="fade-up" data-aos-delay="100">
<div class="p-8">
<h3 class="text-lg font-medium text-gray-900">Government</h3>
<p class="mt-4 text-sm text-gray-500">
Custom solutions for national security needs
</p>
<div class="mt-6">
<p class="text-4xl font-bold text-gray-900">Custom</p>
<p class="mt-1 text-sm text-gray-500">contact us</p>
</div>
<ul class="mt-6 space-y-4">
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5"></i>
<span class="ml-3 text-gray-600">Unlimited cameras</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5"></i>
<span class="ml-3 text-gray-600">Officer monitoring</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5"></i>
<span class="ml-3 text-gray-600">Public space surveillance</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5"></i>
<span class="ml-3 text-gray-600">Custom integrations</span>
</li>
<li class="flex items-start">
<i data-feather="check" class="h-5 w-5 text-green-500 mt-0.5"></i>
<span class="ml-3 text-gray-600">24/7 dedicated support</span>
</li>
</ul>
</div>
<div class="bg-gray-50 border-t border-gray-200 px-8 py-6 rounded-b-2xl">
<a href="#" class="w-full block text-center bg-blue-600 border border-blue-600 rounded-md py-2 text-sm font-semibold text-white hover:bg-blue-700">
Contact sales
</a>
</div>
</div>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="bg-blue-700">
<div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
<h2 class="text-3xl font-extrabold text-white sm:text-4xl" data-aos="fade-up">
<span class="block">Ready to enhance your security?</span>
<span class="block">Start using Wajibika today.</span>
</h2>
<p class="mt-4 text-lg leading-6 text-blue-200" data-aos="fade-up" data-aos-delay="100">
Join organizations worldwide who trust our AI surveillance technology.
</p>
<a href="#" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50 sm:w-auto" data-aos="fade-up" data-aos-delay="200">
Request a demo
</a>
</div>
</div>
<!-- Contact Section -->
<div id="contact" class="bg-white py-16 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="lg:grid lg:grid-cols-2 lg:gap-8">
<div data-aos="fade-right">
<h2 class="text-2xl font-extrabold text-gray-900 sm:text-3xl">
Contact Us
</h2>
<p class="mt-3 text-lg text-gray-500">
Have questions about Wajibika? Our team is here to help.
</p>
<div class="mt-8">
<div class="flex">
<div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
<i data-feather="mail" class="h-6 w-6 text-white"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Email</h3>
<p class="mt-1 text-gray-600">contact@wajibika.ai</p>
</div>
</div>
<div class="flex mt-6">
<div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
<i data-feather="phone" class="h-6 w-6 text-white"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Phone</h3>
<p class="mt-1 text-gray-600">+1 (555) 123-4567</p>
</div>
</div>
<div class="flex mt-6">
<div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
<i data-feather="map-pin" class="h-6 w-6 text-white"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-900">Headquarters</h3>
<p class="mt-1 text-gray-600">123 Security Ave, San Francisco, CA 94107</p>
</div>
</div>
</div>
</div>
<div class="mt-12 lg:mt-0" data-aos="fade-left">
<form action="#" method="POST" class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8">
<div>
<label for="first-name" class="block text-sm font-medium text-gray-700">First name</label>
<input type="text" name="first-name" id="first-name" autocomplete="given-name" class="mt-1 py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md">
</div>
<div>
<label for="last-name" class="block text-sm font-medium text-gray-700">Last name</label>
<input type="text" name="last-name" id="last-name" autocomplete="family-name" class="mt-1 py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md">
</div>
<div class="sm:col-span-2">
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" name="email" id="email" autocomplete="email" class="mt-1 py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md">
</div>
<div class="sm:col-span-2">
<label for="company" class="block text-sm font-medium text-gray-700">Company</label>
<input type="text" name="company" id="company" autocomplete="organization" class="mt-1 py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md">
</div>
<div class="sm:col-span-2">
<label for="message" class="block text-sm font-medium text-gray-700">Message</label>
<textarea id="message" name="message" rows="4" class="mt-1 py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"></textarea>
</div>
<div class="sm:col-span-2">
<button type="submit" class="w-full inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-800">
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<div class="space-y-8 xl:col-span-1">
<div class="flex items-center">
<i data-feather="shield" class="h-8 w-8 text-blue-400"></i>
<span class="ml-2 text-xl font-bold text-white">WAJIBIKA</span>
</div>
<p class="text-gray-300 text-base">
AI-powered surveillance for a safer world.
</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="twitter" class="h-6 w-6"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="facebook" class="h-6 w-6"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="linkedin" class="h-6 w-6"></i>
</a>
</div>
</div>
<div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
Solutions
</h3>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
Business
</a>
</li>
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
Government
</a>
</li>
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
Law Enforcement
</a>
</li>
</ul>
</div>
<div class="mt-12 md:mt-0">
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
Company
</h3>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
About
</a>
</li>
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
Careers
</a>
</li>
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
Privacy
</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
Resources
</h3>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
Documentation
</a>
</li>
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
API Reference
</a>
</li>
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
Case Studies
</a>
</li>
</ul>
</div>
<div class="mt-12 md:mt-0">
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
Legal
</h3>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
Privacy Policy
</a>
</li>
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
Terms of Service
</a>
</li>
<li>
<a href="#" class="text-base text-gray-400 hover:text-white">
Compliance
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mt-12 border-t border-gray-700 pt-8">
<p class="text-base text-gray-400 text-center">
&copy; 2023 Wajibika AI. All rights reserved.
</p>
</div>
</div>
</footer>
<script>AOS.init();</script>
<script>const { animate } = anime;</script>
<script>feather.replace();</script>
</body>
</html>