<body class="bg-gray-100 font-sans leading-normal tracking-normal"> <header class="bg-white shadow-lg"> <div class="max-w-6xl mx-auto px-4 py-5"> <h1 class="text-3xl font-bold text-center">Discover, Bid, and Win with Auction Hub</h1> <p class="text-lg text-center text-gray-600 mt-2">Join our community of bidders and sellers. Post items, place bids, and stay updated with live notifications.</p> <div class="flex justify-center mt-4 space-x-4"> <a href="#" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-400">Start Bidding</a> <a href="#" class="bg-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-200">Post an Item</a> </div> <div class="mt-6"> <input type="text" placeholder="Search auctions..." class="w-full p-2 border rounded" /> </div> </div> </header> <section class="bg-cover bg-center h-64" style="background-image: url('https://placehold.co/600x300');"> <div class="flex items-center justify-center h-full bg-black bg-opacity-50"> <h2 class="text-white text-2xl font-bold">Key Features</h2> </div> </section> <section class="max-w-6xl mx-auto px-4 py-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="bg-white p-4 rounded shadow"> <i class="iconoir-bell-notification text-3xl text-blue-500"></i> <h3 class="font-bold mt-2">Live Notifications</h3> <p class="text-gray-600">Stay updated with real-time alerts on your bids and auctions.</p> </div> <div class="bg-white p-4 rounded shadow"> <i class="iconoir-lock text-3xl text-blue-500"></i> <h3 class="font-bold mt-2">Secure Payments</h3> <p class="text-gray-600">Your transactions are safe and secure with our payment system.</p> </div> <div class="bg-white p-4 rounded shadow"> <i class="iconoir-people-tag text-3xl text-blue-500"></i> <h3 class="font-bold mt-2">Community Driven</h3> <p class="text-gray-600">Join a vibrant community of bidders and sellers.</p> </div> </div> </section> <section class="max-w-6xl mx-auto px-4 py-8"> <h2 class="text-2xl font-bold text-center mb-4">Featured Auctions</h2> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="bg-white p-4 rounded shadow"> <img src="https://placehold.co/300x200" alt="Auction Item" class="w-full h-40 object-cover rounded"> <h3 class="font-bold mt-2">Item Title 1</h3> <p class="text-gray-600">Current Bid: $100</p> <p class="text-gray-500">Time Remaining: 2h 30m</p> <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-400 mt-2">Place Bid</button> </div> <div class="bg-white p-4 rounded shadow"> <img src="https://placehold.co/300x200" alt="Auction Item" class="w-full h-40 object-cover rounded"> <h3 class="font-bold mt-2">Item Title 2</h3> <p class="text-gray-600">Current Bid: $150</p> <p class="text-gray-500">Time Remaining: 1h 15m</p> <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-400 mt-2">Place Bid</button> </div> <div class="bg-white p-4 rounded shadow"> <img src="https://placehold.co/300x200" alt="Auction Item" class="w-full h-40 object-cover rounded"> <h3 class="font-bold mt-2">Item Title 3</h3> <p class="text-gray-600">Current Bid: $200</p> <p class="text-gray-500">Time Remaining: 3h 45m</p> <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-400 mt-2">Place Bid</button> </div> </div> </section> <section class="max-w-6xl mx-auto px-4 py-8"> <h2 class="text-2xl font-bold text-center mb-4">How It Works</h2> <div class="flex justify-around"> <div class="text-center"> <i class="iconoir-user text-3xl text-blue-500"></i> <h3 class="font-bold mt-2">Sign Up</h3> </div> <div class="text-center"> <i class="iconoir-cart text-3xl text-blue-500"></i> <h3 class="font-bold mt-2">Post or Bid</h3> </div> <div class="text-center"> <i class="iconoir-check-circle text-3xl text-blue-500"></i> <h3 class="font-bold mt-2">Win & Pay</h3> </div> </div> </section> <section class="max-w-6xl mx-auto px-4 py-8"> <h2 class="text-2xl font-bold text-center mb-4">User Testimonials</h2> <div class="flex overflow-x-auto space-x-4"> <div class="bg-white p-4 rounded shadow w-64"> <p class="text-gray-600">"Auction Hub made bidding so easy and fun!"</p> <p class="font-bold mt-2">- User 1</p> </div> <div class="bg-white p-4 rounded shadow w-64"> <p class="text-gray-600">"I love the live notifications, I never miss a bid!"</p> <p class="font-bold mt-2">- User 2</p> </div> <div class="bg-white p-4 rounded shadow w-64"> <p class="text-gray-600">"Great platform for both buyers and sellers!"</p> <p class="font-bold mt-2">- User 3</p> </div> </div> </section> <section class="max-w-6xl mx-auto px-4 py-8"> <h2 class="text-2xl font-bold text-center mb-4">Recent Bids & Activity</h2> <div class="bg-white p-4 rounded shadow"> <ul class="space-y-2"> <li class="flex justify-between"> <span>User 1 placed a bid of $100 on Item Title 1</span> <span>2m ago</span> </li> <li class="flex justify-between"> <span>User 2 placed a bid of $150 on Item Title 2</span> <span>5m ago</span> </li> <li class="flex justify-between"> <span>User 3 placed a bid of $200 on Item Title 3</span> <span>10m ago</span> </li> </ul> </div> </section> <section class="max-w-6xl mx-auto px-4 py-8"> <h2 class="text-2xl font-bold text-center mb-4">Top Categories</h2> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="bg-white p-4 rounded shadow"> <h3 class="font-bold">Electronics</h3> <p class="text-gray-600">Latest gadgets and devices.</p> </div> <div class="bg-white p-4 rounded shadow"> <h3 class="font-bold">Art</h3> <p class="text-gray-600">Unique pieces from talented artists.</p> </div> <div class="bg-white p-4 rounded shadow"> <h3 class="font-bold">Collectibles</h3> <p class="text-gray-600">Rare items for collectors.</p> </div> </div> </section> <footer class="bg-gray-800 text-white py-4"> <div class="max-w-6xl mx-auto text-center"> <p>© 2023 Auction Hub. All rights reserved.</p> </div> </footer> </body>