| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Rose Petal Paradise | Home</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| rose: { |
| 50: '#fff1f2', |
| 100: '#ffe4e6', |
| 200: '#fecdd3', |
| 300: '#fda4af', |
| 400: '#fb7185', |
| 500: '#f43f5e', |
| 600: '#e11d48', |
| 700: '#be123c', |
| 800: '#9f1239', |
| 900: '#881337', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| } |
| |
| h1, h2, h3 { |
| font-family: 'Playfair Display', serif; |
| } |
| |
| .hero-gradient { |
| background: linear-gradient(135deg, rgba(244,63,94,0.1) 0%, rgba(255,255,255,1) 100%); |
| } |
| |
| .card-hover { |
| transition: all 0.3s ease; |
| } |
| |
| .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); |
| } |
| |
| .btn-rose { |
| transition: all 0.3s ease; |
| } |
| |
| .btn-rose:hover { |
| background-color: #e11d48; |
| transform: translateY(-2px); |
| } |
| </style> |
| </head> |
| <body class="bg-white"> |
| |
| <nav class="bg-white shadow-sm"> |
| <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="heart" class="text-rose-500 h-6 w-6"></i> |
| <span class="ml-2 text-xl font-bold text-rose-900">Rose Petal</span> |
| </div> |
| </div> |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
| <a href="index.html" class="text-rose-900 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Home</a> |
| <a href="#features" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Features</a> |
| <a href="#gallery" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Gallery</a> |
| <a href="contact.html" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Contact</a> |
| <a href="dashboard.html" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Dashboard</a> |
| </div> |
| <div class="md:hidden flex items-center"> |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-rose-700"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="hero-gradient"> |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 lg:py-24"> |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center"> |
| <div> |
| <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl"> |
| <span class="block">Discover the</span> |
| <span class="block text-rose-600">Beauty of Roses</span> |
| </h1> |
| <p class="mt-3 max-w-3xl text-lg text-gray-500"> |
| Our collection of the most beautiful rose varieties from around the world. Each petal tells a story of elegance and passion. |
| </p> |
| <div class="mt-8 sm:flex"> |
| <div class="rounded-md shadow"> |
| <a href="#" class="btn-rose w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-rose-600 hover:bg-rose-700 md:py-4 md:text-lg md:px-10"> |
| Explore Collection |
| </a> |
| </div> |
| <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-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-rose-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> |
| Learn More |
| </a> |
| </div> |
| </div> |
| </div> |
| <div class="mt-12 lg:mt-0"> |
| <img class="rounded-lg shadow-xl" src="http://static.photos/nature/1200x630/42" alt="Beautiful roses"> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div id="features" 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-rose-600 font-semibold tracking-wide uppercase">Features</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| Why Choose Our Roses |
| </p> |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
| We offer the finest quality roses with unique characteristics that make them stand out. |
| </p> |
| </div> |
|
|
| <div class="mt-10"> |
| <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3"> |
| <div class="card-hover bg-white p-6 rounded-lg shadow-md"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-rose-100 text-rose-600"> |
| <i data-feather="droplet" class="h-6 w-6"></i> |
| </div> |
| <div class="mt-6"> |
| <h3 class="text-lg font-medium text-gray-900">Freshness Guaranteed</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Each rose is hand-picked at peak freshness and delivered to you within 24 hours. |
| </p> |
| </div> |
| </div> |
|
|
| <div class="card-hover bg-white p-6 rounded-lg shadow-md"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-rose-100 text-rose-600"> |
| <i data-feather="globe" class="h-6 w-6"></i> |
| </div> |
| <div class="mt-6"> |
| <h3 class="text-lg font-medium text-gray-900">Global Selection</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| We source the rarest and most beautiful roses from around the world. |
| </p> |
| </div> |
| </div> |
|
|
| <div class="card-hover bg-white p-6 rounded-lg shadow-md"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-rose-100 text-rose-600"> |
| <i data-feather="gift" class="h-6 w-6"></i> |
| </div> |
| <div class="mt-6"> |
| <h3 class="text-lg font-medium text-gray-900">Perfect Gifts</h3> |
| <p class="mt-2 text-base text-gray-500"> |
| Our expert florists create stunning arrangements for any occasion. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div id="gallery" class="bg-gray-50 py-12"> |
| <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-rose-600 font-semibold tracking-wide uppercase">Gallery</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
| Our Rose Collection |
| </p> |
| </div> |
| <div class="mt-10 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4"> |
| <div class="card-hover bg-white rounded-lg overflow-hidden shadow"> |
| <img class="w-full h-48 object-cover" src="http://static.photos/nature/640x360/1" alt=" |
| </body> |
| </html> |
