Spaces:
Running
Running
Generate a effective chat application to send, receive data [images, videos, GIFs, audio, etc.,] with real-time concurrency as signal style aesthetics. - Initial Deployment
439b2c2 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sweet Delights | Artisan Cookie Shop</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8fafc; | |
| color: #334155; | |
| } | |
| .hero-section { | |
| background-image: linear-gradient(rgba(248, 250, 252, 0.8), rgba(248, 250, 252, 0.8)), url('https://images.unsplash.com/photo-1558961363-fa8fdf82db35?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1965&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .playfair { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .cookie-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .btn-primary { | |
| background-color: #7c3aed; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| background-color: #6d28d9; | |
| transform: translateY(-2px); | |
| } | |
| .flavor-tag { | |
| background-color: #ede9fe; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="bg-white bg-opacity-90 backdrop-blur-md fixed w-full z-10 shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-20 items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-cookie-bite text-2xl text-violet-600 mr-2"></i> | |
| <span class="playfair text-xl font-semibold text-violet-800">Sweet Delights</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-8"> | |
| <a href="#" class="text-amber-900 hover:text-amber-700 px-3 py-2 text-sm font-medium">Home</a> | |
| <a href="#menu" class="text-amber-900 hover:text-amber-700 px-3 py-2 text-sm font-medium">Our Cookies</a> | |
| <a href="#about" class="text-amber-900 hover:text-amber-700 px-3 py-2 text-sm font-medium">Our Story</a> | |
| <a href="#contact" class="text-amber-900 hover:text-amber-700 px-3 py-2 text-sm font-medium">Contact</a> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <a href="#" class="btn-primary text-white px-6 py-2 rounded-full text-sm font-medium">Order Now</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <button type="button" class="text-amber-900 hover:text-amber-700 focus:outline-none" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="md:hidden hidden bg-white shadow-lg" id="mobile-menu"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#" class="block px-3 py-2 text-base font-medium text-amber-900 hover:text-amber-700">Home</a> | |
| <a href="#menu" class="block px-3 py-2 text-base font-medium text-amber-900 hover:text-amber-700">Our Cookies</a> | |
| <a href="#about" class="block px-3 py-2 text-base font-medium text-amber-900 hover:text-amber-700">Our Story</a> | |
| <a href="#contact" class="block px-3 py-2 text-base font-medium text-amber-900 hover:text-amber-700">Contact</a> | |
| <a href="#" class="block px-3 py-2 text-base font-medium text-white bg-amber-700 rounded">Order Now</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-section pt-32 pb-20 px-4"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="md:flex items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="playfair text-4xl md:text-6xl font-bold text-amber-900 mb-6">Handcrafted Cookies Made With Love</h1> | |
| <p class="text-lg text-amber-800 mb-8">Each bite of our artisan cookies is a journey to flavor paradise. Made with premium ingredients and baked fresh daily.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#menu" class="btn-primary text-white px-8 py-3 rounded-full text-sm font-medium">Explore Flavors</a> | |
| <a href="#" class="border border-amber-800 text-amber-800 px-8 py-3 rounded-full text-sm font-medium hover:bg-amber-50">Order Now</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1558961363-fa8fdf82db35?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1965&q=80" alt="Assortment of cookies" class="rounded-lg shadow-xl w-full max-w-md"> | |
| <div class="absolute -bottom-5 -right-5 bg-white p-4 rounded-lg shadow-lg"> | |
| <div class="flex items-center"> | |
| <div class="mr-3"> | |
| <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> | |
| <span class="text-sm font-medium">500+ Happy Customers</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Section --> | |
| <section class="py-16 bg-amber-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <span class="text-amber-600 font-medium">WHY CHOOSE US</span> | |
| <h2 class="playfair text-3xl md:text-4xl font-bold text-amber-900 mt-2">Baked with Care, Enjoyed with Love</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl text-center shadow-sm hover:shadow-md transition-all"> | |
| <div class="bg-amber-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-leaf text-amber-700 text-2xl"></i> | |
| </div> | |
| <h3 class="playfair text-xl font-semibold text-amber-900 mb-3">Premium Ingredients</h3> | |
| <p class="text-amber-800">We source only the finest organic ingredients to ensure every cookie is packed with natural goodness.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl text-center shadow-sm hover:shadow-md transition-all"> | |
| <div class="bg-amber-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-heart text-amber-700 text-2xl"></i> | |
| </div> | |
| <h3 class="playfair text-xl font-semibold text-amber-900 mb-3">Handcrafted with Love</h3> | |
| <p class="text-amber-800">Each cookie is carefully shaped and decorated by our skilled bakers who pour their heart into every batch.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl text-center shadow-sm hover:shadow-md transition-all"> | |
| <div class="bg-amber-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-bolt text-amber-700 text-2xl"></i> | |
| </div> | |
| <h3 class="playfair text-xl font-semibold text-amber-900 mb-3">Freshly Baked Daily</h3> | |
| <p class="text-amber-800">We bake in small batches throughout the day so you always get cookies at their peak freshness.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Menu Section --> | |
| <section id="menu" class="py-20 px-4"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <span class="text-amber-600 font-medium">OUR SELECTION</span> | |
| <h2 class="playfair text-3xl md:text-4xl font-bold text-amber-900 mt-2">Cookie Flavors to Delight Your Senses</h2> | |
| <p class="max-w-2xl mx-auto mt-4 text-amber-800">Discover our signature flavors that keep customers coming back for more.</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Cookie Card 1 --> | |
| <div class="cookie-card bg-white rounded-xl overflow-hidden shadow-md transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1618923850107-a33ff914d47e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Chocolate Chip Cookie" class="w-full h-64 object-cover"> | |
| <div class="absolute top-4 right-4"> | |
| <span class="flavor-tag text-xs font-medium px-3 py-1 rounded-full text-amber-900">Bestseller</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="playfair text-xl font-semibold text-amber-900">Classic Chocolate Chip</h3> | |
| <span class="text-lg font-medium text-amber-700">$3.50</span> | |
| </div> | |
| <p class="text-sm text-amber-800 mb-4">Our signature cookie with premium chocolate chunks and a hint of vanilla.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-1"> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <span class="text-xs text-amber-700 ml-1">(128)</span> | |
| </div> | |
| <button class="text-xs font-medium text-amber-700 hover:text-amber-900">Add to Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cookie Card 2 --> | |
| <div class="cookie-card bg-white rounded-xl overflow-hidden shadow-md transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1627740303616-9a6c6a5e1b8e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Red Velvet Cookie" class="w-full h-64 object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="playfair text-xl font-semibold text-amber-900">Red Velvet Dream</h3> | |
| <span class="text-lg font-medium text-amber-700">$4.00</span> | |
| </div> | |
| <p class="text-sm text-amber-800 mb-4">Luxurious red velvet cookie with cream cheese frosting drizzle.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-1"> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="fas fa-star-half-alt text-yellow-400 text-sm"></i> | |
| <span class="text-xs text-amber-700 ml-1">(94)</span> | |
| </div> | |
| <button class="text-xs font-medium text-amber-700 hover:text-amber-900">Add to Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cookie Card 3 --> | |
| <div class="cookie-card bg-white rounded-xl overflow-hidden shadow-md transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1559622214-f8a9850965bb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Oatmeal Raisin Cookie" class="w-full h-64 object-cover"> | |
| <div class="absolute top-4 right-4"> | |
| <span class="flavor-tag text-xs font-medium px-3 py-1 rounded-full text-amber-900">Healthy</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="playfair text-xl font-semibold text-amber-900">Oatmeal Raisin Bliss</h3> | |
| <span class="text-lg font-medium text-amber-700">$3.75</span> | |
| </div> | |
| <p class="text-sm text-amber-800 mb-4">Hearty oatmeal cookie packed with plump raisins and cinnamon spice.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-1"> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <span class="text-xs text-amber-700 ml-1">(87)</span> | |
| </div> | |
| <button class="text-xs font-medium text-amber-700 hover:text-amber-900">Add to Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cookie Card 4 --> | |
| <div class="cookie-card bg-white rounded-xl overflow-hidden shadow-md transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1610348720781-9f5bde76b825?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Double Chocolate Cookie" class="w-full h-64 object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="playfair text-xl font-semibold text-amber-900">Double Chocolate</h3> | |
| <span class="text-lg font-medium text-amber-700">$4.25</span> | |
| </div> | |
| <p class="text-sm text-amber-800 mb-4">Rich chocolate cookie with white and dark chocolate chunks.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-1"> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="far fa-star text-yellow-400 text-sm"></i> | |
| <span class="text-xs text-amber-700 ml-1">(76)</span> | |
| </div> | |
| <button class="text-xs font-medium text-amber-700 hover:text-amber-900">Add to Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cookie Card 5 --> | |
| <div class="cookie-card bg-white rounded-xl overflow-hidden shadow-md transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1617472600337-0d8f9f4b0a4a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Snickerdoodle Cookie" class="w-full h-64 object-cover"> | |
| <div class="absolute top-4 right-4"> | |
| <span class="flavor-tag text-xs font-medium px-3 py-1 rounded-full text-amber-900">New</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="playfair text-xl font-semibold text-amber-900">Cinnamon Snickerdoodle</h3> | |
| <span class="text-lg font-medium text-amber-700">$3.50</span> | |
| </div> | |
| <p class="text-sm text-amber-800 mb-4">Buttery soft cookie rolled in cinnamon sugar for the perfect crunch.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-1"> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="fas fa-star-half-alt text-yellow-400 text-sm"></i> | |
| <span class="text-xs text-amber-700 ml-1">(63)</span> | |
| </div> | |
| <button class="text-xs font-medium text-amber-700 hover:text-amber-900">Add to Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cookie Card 6 --> | |
| <div class="cookie-card bg-white rounded-xl overflow-hidden shadow-md transition-all duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1627740296061-7c77abf4a7a8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Peanut Butter Cookie" class="w-full h-64 object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="playfair text-xl font-semibold text-amber-900">Peanut Butter Paradise</h3> | |
| <span class="text-lg font-medium text-amber-700">$3.75</span> | |
| </div> | |
| <p class="text-sm text-amber-800 mb-4">Creamy peanut butter cookie with chocolate drizzle and sea salt.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-1"> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="fas fa-star text-yellow-400 text-sm"></i> | |
| <i class="far fa-star text-yellow-400 text-sm"></i> | |
| <span class="text-xs text-amber-700 ml-1">(58)</span> | |
| </div> | |
| <button class="text-xs font-medium text-amber-700 hover:text-amber-900">Add to Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block btn-primary text-white px-8 py-3 rounded-full text-sm font-medium">View Full Menu</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-violet-50 relative overflow-hidden"> | |
| <!-- Floating decorative elements --> | |
| <div class="absolute -top-20 -left-20 w-40 h-40 rounded-full bg-violet-100 opacity-30"></div> | |
| <div class="absolute bottom-10 right-0 w-64 h-64 rounded-full bg-violet-100 opacity-20"></div> | |
| <div class="absolute top-1/3 right-1/4 w-24 h-24 rounded-full bg-violet-200 opacity-20"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="md:flex items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <img src="https://images.unsplash.com/photo-1604147706283-d7119b5b822c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80" alt="Baker preparing cookies" class="rounded-lg shadow-lg w-full"> | |
| </div> | |
| <div class="md:w-1/2 relative z-10"> | |
| <span class="text-violet-600 font-medium">OUR STORY</span> | |
| <h2 class="playfair text-3xl md:text-4xl font-bold text-violet-900 mt-2 mb-6">A Family Passion Turned Beloved Bakery</h2> | |
| <!-- Interactive Timeline --> | |
| <div class="mb-8 space-y-8 relative"> | |
| <!-- Timeline line --> | |
| <div class="absolute left-5 top-0 bottom-0 w-0.5 bg-violet-200"></div> | |
| <!-- Timeline item 1 --> | |
| <div class="relative pl-10"> | |
| <div class="absolute left-0 top-1 w-4 h-4 rounded-full bg-violet-600 border-4 border-violet-100"></div> | |
| <h3 class="font-semibold text-violet-900">2010 - Humble Beginnings</h3> | |
| <p class="text-slate-600 text-sm mt-1">Started baking in grandma's kitchen with just 3 cookie recipes</p> | |
| </div> | |
| <!-- Timeline item 2 --> | |
| <div class="relative pl-10"> | |
| <div class="absolute left-0 top-1 w-4 h-4 rounded-full bg-violet-600 border-4 border-violet-100"></div> | |
| <h3 class="font-semibold text-violet-900">2014 - First Shop</h3> | |
| <p class="text-slate-600 text-sm mt-1">Opened our first small storefront in the local market</p> | |
| </div> | |
| <!-- Timeline item 3 --> | |
| <div class="relative pl-10"> | |
| <div class="absolute left-0 top-1 w-4 h-4 rounded-full bg-violet-600 border-4 border-violet-100"></div> | |
| <h3 class="font-semibold text-violet-900">2018 - Expansion</h3> | |
| <p class="text-slate-600 text-sm mt-1">Moved to our current location and expanded the menu to 20+ varieties</p> | |
| </div> | |
| <!-- Timeline item 4 --> | |
| <div class="relative pl-10"> | |
| <div class="absolute left-0 top-1 w-4 h-4 rounded-full bg-violet-600 border-4 border-violet-100"></div> | |
| <h3 class="font-semibold text-violet-900">Today - Community Favorite</h3> | |
| <p class="text-slate-600 text-sm mt-1">Serving thousands of happy customers with 50+ cookie varieties</p> | |
| </div> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <div class="text-center bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-all"> | |
| <span class="playfair text-4xl font-bold text-violet-700">12</span> | |
| <p class="text-sm text-slate-600">Years in Business</p> | |
| </div> | |
| <div class="text-center bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-all"> | |
| <span class="playfair text-4xl font-bold text-violet-700">50+</span> | |
| <p class="text-sm text-slate-600">Cookie Varieties</p> | |
| </div> | |
| <div class="text-center bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-all"> | |
| <span class="playfair text-4xl font-bold text-violet-700">10K</span> | |
| <p class="text-sm text-slate-600">Happy Customers</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 px-4"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <span class="text-amber-600 font-medium">SWEET WORDS</span> | |
| <h2 class="playfair text-3xl md:text-4xl font-bold text-amber-900 mt-2">What Our Customers Say</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-6"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah J."> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-medium text-amber-900">Sarah J.</h4> | |
| <div class="flex mt-1"> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-amber-800 text-sm italic">"The chocolate chip cookies are absolutely divine! Perfect balance of crispy edges and chewy center. I order a dozen every week for my family."</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-6"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T."> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-medium text-amber-900">Michael T.</h4> | |
| <div class="flex mt-1"> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-amber-800 text-sm italic">"I've tried many cookie shops, but Sweet Delights stands out. Their oatmeal raisin is my favorite - not too sweet with just the right amount of spice."</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-6"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily R."> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-medium text-amber-900">Emily R.</h4> | |
| <div class="flex mt-1"> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star text-yellow-400 text-xs"></i> | |
| <i class="fas fa-star-half-alt text-yellow-400 text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-amber-800 text-sm italic">"The perfect gift! I send cookie boxes to clients and | |
| <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=MohammadGhouse07/vibecoded-01" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |