Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TransitEx - AI-Powered School Transportation</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%); | |
| } | |
| .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); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } | |
| } | |
| .route-line { | |
| position: relative; | |
| } | |
| .route-line::after { | |
| content: ""; | |
| position: absolute; | |
| left: 50%; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background: linear-gradient(to bottom, #4f46e5, #10b981); | |
| transform: translateX(-50%); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg"> | |
| <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 class="fas fa-bus text-indigo-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-indigo-600">Transit<span class="text-emerald-500">Ex</span></span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Routes</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Safety</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Analytics</a> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center"> | |
| <i class="fas fa-user-graduate mr-2"></i> Parent Portal | |
| </button> | |
| </div> | |
| <div class="-mr-2 flex items-center sm: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-indigo-500"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"> | |
| AI-Powered School Transportation | |
| </h1> | |
| <p class="mt-6 max-w-lg mx-auto text-xl"> | |
| Enhancing safety for Delhi Private School, Sharjah students with smart transit solutions. | |
| </p> | |
| <div class="mt-10 flex justify-center space-x-6"> | |
| <a href="#" class="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> | |
| <i class="fas fa-play-circle mr-2"></i> Watch Demo | |
| </a> | |
| <a href="#" class="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-800 hover:bg-indigo-900 md:py-4 md:text-lg md:px-10"> | |
| <i class="fas fa-school mr-2"></i> School Login | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="py-12 bg-white"> | |
| <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-indigo-600 font-semibold tracking-wide uppercase">Innovative Features</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Smart Transportation Solutions | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Our AI-driven platform revolutionizes student transportation with cutting-edge technology. | |
| </p> | |
| </div> | |
| <div class="mt-20"> | |
| <div class="grid grid-cols-1 gap-12 md:grid-cols-3"> | |
| <!-- Feature 1 --> | |
| <div class="relative bg-white p-6 rounded-xl shadow-lg card-hover transition-all duration-300"> | |
| <div class="absolute -top-6 left-6 bg-indigo-600 p-3 rounded-full text-white"> | |
| <i class="fas fa-shield-alt text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mt-4">Real-time Safety Monitoring</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| AI-powered cameras detect unusual behavior, potential hazards, and ensure seatbelt compliance. | |
| </p> | |
| <div class="mt-6"> | |
| <div class="flex items-center text-sm text-indigo-600"> | |
| <span>Learn more</span> | |
| <i class="fas fa-chevron-right ml-1"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="relative bg-white p-6 rounded-xl shadow-lg card-hover transition-all duration-300"> | |
| <div class="absolute -top-6 left-6 bg-emerald-500 p-3 rounded-full text-white"> | |
| <i class="fas fa-route text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mt-4">Dynamic Route Optimization</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Machine learning algorithms adjust routes in real-time based on Sharjah traffic conditions. | |
| </p> | |
| <div class="mt-6"> | |
| <div class="flex items-center text-sm text-emerald-500"> | |
| <span>Learn more</span> | |
| <i class="fas fa-chevron-right ml-1"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="relative bg-white p-6 rounded-xl shadow-lg card-hover transition-all duration-300"> | |
| <div class="absolute -top-6 left-6 bg-purple-600 p-3 rounded-full text-white"> | |
| <i class="fas fa-heartbeat text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mt-4">Well-being Insights</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Sensors monitor temperature and air quality to ensure student comfort in Sharjah's climate. | |
| </p> | |
| <div class="mt-6"> | |
| <div class="flex items-center text-sm text-purple-600"> | |
| <span>Learn more</span> | |
| <i class="fas fa-chevron-right ml-1"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Live Tracking Section --> | |
| <div class="bg-gray-50 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center"> | |
| <div> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Real-time Bus Tracking | |
| </h2> | |
| <p class="mt-3 max-w-3xl text-lg text-gray-500"> | |
| Parents and administrators can track buses in real-time with our interactive map interface. Receive notifications for delays, route changes, and arrival times. | |
| </p> | |
| <div class="mt-8 sm:flex"> | |
| <div class="rounded-md shadow"> | |
| <a href="#" class="flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"> | |
| <i class="fas fa-mobile-alt mr-2"></i> Download App | |
| </a> | |
| </div> | |
| <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3"> | |
| <a href="#" class="flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50"> | |
| <i class="fas fa-desktop mr-2"></i> Web Portal | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 lg:mt-0"> | |
| <div class="bg-white p-6 rounded-xl shadow-lg"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-medium">Route #5 - Delhi Private School</h3> | |
| <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">On Time</span> | |
| </div> | |
| <div class="relative h-64 bg-gray-100 rounded-lg overflow-hidden"> | |
| <!-- Simulated map with route --> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-full h-full relative"> | |
| <!-- Simulated map background --> | |
| <div class="absolute inset-0 bg-blue-50 opacity-50"></div> | |
| <!-- Simulated route --> | |
| <div class="absolute top-1/4 left-1/4 w-1/2 h-1/2"> | |
| <div class="route-line h-full mx-auto w-1/2 relative"> | |
| <!-- Stops along the route --> | |
| <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-indigo-600 rounded-full border-2 border-white"> | |
| <div class="absolute top-6 left-1/2 transform -translate-x-1/2 text-xs font-medium whitespace-nowrap">Megamall Sharjah</div> | |
| </div> | |
| <div class="absolute top-1/3 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-indigo-600 rounded-full border-2 border-white"> | |
| <div class="absolute top-6 left-1/2 transform -translate-x-1/2 text-xs font-medium whitespace-nowrap">Bismi Restaurant</div> | |
| </div> | |
| <div class="absolute top-2/3 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-indigo-600 rounded-full border-2 border-white"> | |
| <div class="absolute top-6 left-1/2 transform -translate-x-1/2 text-xs font-medium whitespace-nowrap">Pond Park</div> | |
| </div> | |
| <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 w-4 h-4 bg-indigo-600 rounded-full border-2 border-white"> | |
| <div class="absolute top-6 left-1/2 transform -translate-x-1/2 text-xs font-medium whitespace-nowrap">Sharjah City Center</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Current bus location --> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pulse-animation"> | |
| <div class="w-6 h-6 bg-indigo-600 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-bus text-white text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 grid grid-cols-3 gap-4 text-center"> | |
| <div> | |
| <p class="text-sm text-gray-500">Next Stop</p> | |
| <p class="font-medium">Pond Park</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">ETA</p> | |
| <p class="font-medium">7:42 AM</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Students</p> | |
| <p class="font-medium">18/24</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Safety Dashboard --> | |
| <div class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| AI Safety Dashboard | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> | |
| Comprehensive monitoring for Delhi Private School students | |
| </p> | |
| </div> | |
| <div class="mt-12 grid grid-cols-1 gap-8 md:grid-cols-3"> | |
| <!-- Safety Card 1 --> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3 text-white"> | |
| <i class="fas fa-exclamation-triangle text-xl"></i> | |
| </div> | |
| <div class="ml-5"> | |
| <h3 class="text-lg font-medium text-gray-900">Incident Alerts</h3> | |
| <p class="mt-1 text-sm text-gray-500">Real-time notifications</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-3xl font-bold text-gray-900">1</span> | |
| <span class="text-sm font-medium text-green-600">-60% from last month</span> | |
| </div> | |
| <div class="mt-2"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 15%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Safety Card 2 --> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-emerald-500 rounded-md p-3 text-white"> | |
| <i class="fas fa-child text-xl"></i> | |
| </div> | |
| <div class="ml-5"> | |
| <h3 class="text-lg font-medium text-gray-900">Seatbelt Compliance</h3> | |
| <p class="mt-1 text-sm text-gray-500">Current ride</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-3xl font-bold text-gray-900">98%</span> | |
| <span class="text-sm font-medium text-green-600">+5% from average</span> | |
| </div> | |
| <div class="mt-2"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-emerald-500 h-2.5 rounded-full" style="width: 98%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Safety Card 3 --> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-500 rounded-md p-3 text-white"> | |
| <i class="fas fa-temperature-low text-xl"></i> | |
| </div> | |
| <div class="ml-5"> | |
| <h3 class="text-lg font-medium text-gray-900">Comfort Index</h3> | |
| <p class="mt-1 text-sm text-gray-500">Environmental conditions</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-3xl font-bold text-gray-900">9.2</span> | |
| <span class="text-sm font-medium text-green-500">Optimal conditions</span> | |
| </div> | |
| <div class="mt-2"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-purple-500 h-2.5 rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Parent Portal Section --> | |
| <div class="gradient-bg py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center"> | |
| <div class="relative"> | |
| <img class="mx-auto rounded-lg shadow-xl w-full max-w-md" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Parent using app"> | |
| <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-lg shadow-lg"> | |
| <div class="flex items-center"> | |
| <div class="bg-indigo-100 p-2 rounded-full"> | |
| <i class="fas fa-bell text-indigo-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-xs text-gray-500">Notification</p> | |
| <p class="text-sm font-medium">Bus arriving in 5 min</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 lg:mt-0"> | |
| <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> | |
| Parent Peace of Mind | |
| </h2> | |
| <p class="mt-3 text-lg text-indigo-100"> | |
| Our parent portal gives you real-time updates about your child's transportation, including: | |
| </p> | |
| <div class="mt-8"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-indigo-100 bg-opacity-20 rounded-full p-2 text-white"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-base font-medium text-white">Real-time bus location tracking</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mt-4"> | |
| <div class="flex-shrink-0 bg-indigo-100 bg-opacity-20 rounded-full p-2 text-white"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-base font-medium text-white">Automated arrival/departure notifications</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mt-4"> | |
| <div class="flex-shrink-0 bg-indigo-100 bg-opacity-20 rounded-full p-2 text-white"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-base font-medium text-white">Safety incident alerts</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mt-4"> | |
| <div class="flex-shrink-0 bg-indigo-100 bg-opacity-20 rounded-full p-2 text-white"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-base font-medium text-white">Historical ride reports</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 shadow-sm text-indigo-600 bg-white hover:bg-gray-50"> | |
| <i class="fas fa-user-plus mr-2"></i> Create Parent Account | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Trusted by Schools in Sharjah | |
| </h2> | |
| </div> | |
| <div class="mt-12 grid grid-cols-1 gap-8 md:grid-cols-3"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-6 rounded-xl shadow"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Aisha Al Maktoum</h3> | |
| <p class="text-sm text-gray-500">Principal, Delhi Private School</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600"> | |
| "TransitEx has transformed our transportation operations. The AI safety features have reduced incidents by 60% and parents love the real-time tracking." | |
| </p> | |
| </div> | |
| <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> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-6 rounded-xl shadow"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Mohammed Hassan</h3> | |
| <p class="text-sm text-gray-500">Transportation Director</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600"> | |
| "The route optimization AI has saved us 15% in fuel costs while reducing ride times. The dashboard gives us insights we never had before." | |
| </p> | |
| </div> | |
| <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> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-6 rounded-xl shadow"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Fatima Khan</h3> | |
| <p class="text-sm text-gray-500">Parent</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600"> | |
| "Knowing exactly when the bus will arrive and getting alerts if anything changes gives me incredible peace of mind for my children's safety." | |
| </p> | |
| </div> | |
| <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-half-alt text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="bg-indigo-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"> | |
| <span class="block">Ready to transform your student transportation?</span> | |
| <span class="block">Contact us today.</span> | |
| </h2> | |
| <p class="mt-4 text-lg leading-6 text-indigo-200"> | |
| Our team will show you how TransitEx can benefit your school. | |
| </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-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto"> | |
| <i class="fas fa-envelope mr-2"></i> Request Demo | |
| </a> | |
| </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="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Product</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Features</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Pricing</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">API</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Integrations</a></li> | |
| </ul> | |
| </div> | |
| <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">Guides</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Webinars</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <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> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Terms</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Connect</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Contact Sales</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Support</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Twitter</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">LinkedIn</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bus text-indigo-500 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-white">Transit<span class="text-emerald-400">Ex</span></span> | |
| </div> | |
| <p class="mt-4 md:mt-0 text-base text-gray-400"> | |
| © 2023 TransitEx. All rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple JavaScript for demo purposes | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Simulate live updates for the bus tracking | |
| setInterval(function() { | |
| const etaElement = document.querySelector('.route-card .font-medium:nth-of-type(2)'); | |
| if (etaElement) { | |
| const currentTime = etaElement.textContent; | |
| const timeParts = currentTime.split(':'); | |
| let minutes = parseInt(timeParts[1]); | |
| minutes = Math.max(1, minutes - 1); // Don't go below 1 minute | |
| etaElement.textContent = timeParts[0] + ':' + (minutes < 10 ? '0' + minutes : minutes); | |
| } | |
| }, 30000); // Update every 30 seconds | |
| // Mobile menu toggle would go here in a real implementation | |
| }); | |
| </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=AmazonTeam/transitex" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |