Mirage54/undefined
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>WheelWisdom - Your Ultimate Car Knowledge Hub</title>7<link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <style>12 .hero-gradient {13 background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);14 }15 .car-card:hover {16 transform: translateY(-5px);17 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);18 }19 .transition-all {20 transition: all 0.3s ease;21 }22 </style>23</head>24<body class="font-sans bg-gray-50">25 <!-- Navigation -->26 <nav class="bg-white shadow-lg sticky top-0 z-50">27 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">28 <div class="flex justify-between h-16">29 <div class="flex items-center">30 <div class="flex-shrink-0 flex items-center">31 <img class="h-8 w-auto" src="/static/logo.png" alt="Caronwheel logo">32 <span class="ml-2 text-xl font-bold text-gray-900">WheelWisdom</span>33</div>34 <div class="hidden sm:ml-6 sm:flex sm:space-x-8">35 <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>36 <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">Fleet</a>37 <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">Services</a>38 <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">About</a>39 <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">Contact</a>40 </div>41 </div>42 <div class="hidden sm:ml-6 sm:flex sm:items-center">43 <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-all">Book Now</button>44 </div>45 <div class="-mr-2 flex items-center sm:hidden">46 <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">47 <i data-feather="menu"></i>48 </button>49 </div>50 </div>51 </div>52 </nav>53 54 <!-- Hero Section -->55 <div class="relative bg-gray-900">56 <div class="absolute inset-0">57 <img class="w-full h-full object-cover" src="/static/photos/automotive/1200x630/42" alt="Luxury cars">58 <div class="absolute inset-0 hero-gradient"></div>59 </div>60 <div class="relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8">61 <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">62 Ultimate Car Knowledge Hub63 </h1>64 <p class="mt-6 text-xl text-gray-300 max-w-3xl">65 Discover the fascinating world of automobiles - from classic beauties to cutting-edge technology.66</p>67 <div class="mt-10 sm:flex sm:justify-start">68 <div class="rounded-md shadow">69 <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-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10 transition-all">70 Explore Articles71 </a>72 </div>73 <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">74 <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10 transition-all">75 Latest Reviews76</a>77 </div>78 </div>79 </div>80 </div>81 82 <!-- Features Section -->83 <div class="py-12 bg-white">84 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">85 <div class="lg:text-center">86 <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Why Trust Us</h2>87 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">88 Your Gateway to Automotive Knowledge89 </p>90 <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">91 Expert insights, unbiased reviews, and fascinating automotive history.92</p>93 </div>94 95 <div class="mt-10">96 <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">97 <div class="flex">98 <div class="flex-shrink-0">99 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">100 <i data-feather="shield"></i>101 </div>102 </div>103 <div class="ml-4">104 <h3 class="text-lg leading-6 font-medium text-gray-900">Expert Reviews</h3>105 <p class="mt-2 text-base text-gray-500">106 Get in-depth, unbiased reviews of the latest models and classic cars107</body>108</html>