Spaces:

concensure
/

a-word-or-two

Running

App Files Files Community

concensure commited on Jul 19, 2025

Commit

b82d2d5

verified ·

1 Parent(s): 873a2b7

Create a professional, warm-themed website (called "digiCradle") that sells printable products (e.g., thank-you cards, invitations, planners). The design should be clean, visually appealing, and user-friendly, with smooth animations and intuitive navigation. Tech Stack Frontend: HTML, CSS, JavaScript Backend/Database: Supabase (for product data, user accounts, cart, and favorites) Homepage Layout 1. Hero Section A full-width banner with: A high-quality background image (e.g., a desk with printed cards). A call-to-action (CTA) button (e.g., "Shop Now"). A short tagline (e.g., "Beautiful Printables for Every Occasion"). 2. Horizontal Category Menu Minimalist design (no borders, just text). Hover & Click Effects: Smooth color change or underline animation on hover. Active category is highlighted (e.g., bold or accent color). Categories: e.g., "Thank You Cards," "Invitations," "Planners," "Wall Art." 3. Separation Line A thin, elegant divider (e.g., a dashed or wavy line in a warm color). 4. Product Filters & Sorting "Sort by" dropdown (Price: Low-High, Newest, Popular). "Filter" button (opens a modal/sidebar with options like Occasion, Theme, etc.). 5. Product Grid (Card Layout) Each product card displays: Image Carousel: Loops between the first two product images slowly (5-7 sec per slide). Product Name (below the image). Price (below the name). Hover Effect: If the user hovers over the image, it smoothly enlarges (like a lightbox). Clicking a product opens its detailed view. Product Detail Page Left Side: Image Gallery (all available images, user can click to enlarge). Right Side: Product Title Price File Formats (e.g., PDF, PNG, JPG). Size Options (e.g., A4, US Letter). Occasion & Theme (e.g., Wedding, Birthday). Description (detailed text). Reviews Section (star ratings + user comments). Buttons: "Add to Cart" (cart icon). "Add to Favorites" (heart icon, saved in Supabase if logged in). Additional Features Responsive Design (works on mobile & desktop). Supabase Integration: Stores product data, user accounts, cart, and favorites. Smooth Animations: Hover effects, image transitions, and category switches. Design Guidelines Color Theme: Warm tones (soft oranges, creams, muted pinks). Fonts: Clean & elegant (e.g., "Playfair Display" for headings, "Lato" for body text). Icons: Use Font Awesome or similar for cart/favorite buttons. Example JavaScript Logic Needed Category Switching: javascript document.querySelectorAll('.category-item').forEach(item => { item.addEventListener('click', () => { // Fetch & display products from Supabase based on category }); }); Image Carousel & Hover Zoom: javascript // Slow carousel for product images setInterval(() => { // Rotate between two images }, 5000); // Hover zoom effect productCards.forEach(card => { card.addEventListener('mouseenter', () => { // Enlarge image smoothly }); }); - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +566 -453

index.html CHANGED Viewed

@@ -3,553 +3,666 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Unforgettable Moments - Create Magical Surprises</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
-    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
     <style>
-        :root {
-            --gold: #D4AF37;
-            --emerald: #064E3B;
-            --rose: #FCE7F3;
-            --white: #FFFFFF;
-        }
         body {
-            font-family: 'Inter', sans-serif;
         }
-        .font-serif {
             font-family: 'Playfair Display', serif;
         }
-        .hero-gradient {
-            background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(6, 78, 59, 0.2) 100%);
         }
-        .gold-gradient {
-            background: linear-gradient(135deg, #D4AF37 0%, #F7D794 100%);
         }
-        .emerald-gradient {
-            background: linear-gradient(135deg, #064E3B 0%, #10B981 100%);
         }
-        .floating {
-            animation: floating 3s ease-in-out infinite;
         }
-        @keyframes floating {
-            0% { transform: translateY(0px); }
-            50% { transform: translateY(-10px); }
-            100% { transform: translateY(0px); }
         }
-        .pulse-gold {
-            animation: pulse-gold 2s infinite;
         }
-        @keyframes pulse-gold {
-            0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }
-            70% { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); }
-            100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
         }
-        .chat-bubble {
-            transition: all 0.3s ease;
         }
-        .chat-bubble:hover {
-            transform: scale(1.1);
         }
-        .service-card {
-            transition: all 0.3s ease;
         }
-        .service-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
         }
-        .package-card {
-            transition: all 0.3s ease;
-            border: 2px solid transparent;
         }
-        .package-card:hover {
-            border-color: #D4AF37;
-            transform: translateY(-5px);
         }
-        .testimonial-card {
-            backdrop-filter: blur(10px);
-            background: rgba(255, 255, 255, 0.9);
         }
     </style>
 </head>
-<body class="bg-gray-50 overflow-x-hidden">
-    <!-- Navigation -->
-    <nav class="fixed top-0 w-full bg-white/90 backdrop-blur-md z-50 shadow-sm">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between items-center h-16">
-                <div class="font-serif text-2xl font-bold text-gray-800">
-                    Unforgettable Moments
-                </div>
-                <div class="hidden md:flex space-x-8">
-                    <a href="#services" class="text-gray-700 hover:text-gold transition">Services</a>
-                    <a href="#packages" class="text-gray-700 hover:text-gold transition">Packages</a>
-                    <a href="#testimonials" class="text-gray-700 hover:text-gold transition">Stories</a>
-                    <a href="#contact" class="text-gray-700 hover:text-gold transition">Contact</a>
                 </div>
-                <button id="mobile-menu-btn" class="md:hidden">
-                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
-                    </svg>
                 </button>
             </div>
         </div>
-    </nav>
     <!-- Hero Section -->
-    <section class="relative min-h-screen flex items-center justify-center hero-gradient">
-        <div class="absolute inset-0">
-            <img src="https://images.unsplash.com/photo-1519741497674-611481863552?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
-                 alt="Magical moment" class="w-full h-full object-cover opacity-30">
         </div>
-        <div class="relative z-10 text-center px-4 max-w-4xl mx-auto">
-            <h1 data-aos="fade-up" class="font-serif text-4xl md:text-6xl font-bold text-gray-800 mb-6 leading-tight">
-                Create Lifelong Memories.<br>
-                <span class="text-gold">We Make Surprises Unforgettable.</span>
-            </h1>
-            <p data-aos="fade-up" data-aos-delay="200" class="text-xl md:text-2xl text-gray-600 mb-8 leading-relaxed">
-                From magical proposals to unforgettable surprise parties, we handle every detail so you can focus on the moment.
-            </p>
-            <div data-aos="fade-up" data-aos-delay="400" class="space-x-4">
-                <button onclick="scrollToSection('packages')" class="gold-gradient text-white px-8 py-4 rounded-full font-semibold text-lg pulse-gold">
-                    Plan Your Moment
-                </button>
-                <button onclick="scrollToSection('how-it-works')" class="border-2 border-gold text-gold px-8 py-4 rounded-full font-semibold text-lg hover:bg-gold hover:text-white transition">
-                    See How It Works
-                </button>
-            </div>
         </div>
     </section>
-    <!-- Services Section -->
-    <section id="services" class="py-20 bg-white">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-16">
-                <h2 class="font-serif text-4xl font-bold text-gray-800 mb-4">Every Detail Perfected</h2>
-                <p class="text-xl text-gray-600">From intimate proposals to grand celebrations, we craft moments that last forever</p>
-            </div>
-            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-                <div data-aos="fade-up" class="service-card bg-white p-8 rounded-2xl shadow-lg">
-                    <div class="w-16 h-16 gold-gradient rounded-full flex items-center justify-center mb-4">
-                        <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
-                            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                        </svg>
-                    </div>
-                    <h3 class="font-serif text-2xl font-semibold mb-3">Venue Location & Booking</h3>
-                    <p class="text-gray-600">Discover and secure Sydney's most stunning venues, perfectly matched to your vision and budget.</p>
-                </div>
-                <div data-aos="fade-up" data-aos-delay="100" class="service-card bg-white p-8 rounded-2xl shadow-lg">
-                    <div class="w-16 h-16 emerald-gradient rounded-full flex items-center justify-center mb-4">
-                        <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
-                            <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"></path>
-                        </svg>
-                    </div>
-                    <h3 class="font-serif text-2xl font-semibold mb-3">Custom Event Planning</h3>
-                    <p class="text-gray-600">Creative, personalized plans for proposals, birthdays, reunions, and any high-stakes celebration.</p>
-                </div>
-                <div data-aos="fade-up" data-aos-delay="200" class="service-card bg-white p-8 rounded-2xl shadow-lg">
-                    <div class="w-16 h-16 gold-gradient rounded-full flex items-center justify-center mb-4">
-                        <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
-                            <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"></path>
-                        </svg>
-                    </div>
-                    <h3 class="font-serif text-2xl font-semibold mb-3">Crowd Sourcing</h3>
-                    <p class="text-gray-600">Organize flash mobs or audience participation to amplify the surprise and create viral moments.</p>
-                </div>
-                <div data-aos="fade-up" class="service-card bg-white p-8 rounded-2xl shadow-lg">
-                    <div class="w-16 h-16 emerald-gradient rounded-full flex items-center justify-center mb-4">
-                        <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
-                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
-                        </svg>
-                    </div>
-                    <h3 class="font-serif text-2xl font-semibold mb-3">Musicians & Entertainers</h3>
-                    <p class="text-gray-600">Book Sydney's finest musicians, vocalists, and performers to elevate your celebration.</p>
-                </div>
-                <div data-aos="fade-up" data-aos-delay="100" class="service-card bg-white p-8 rounded-2xl shadow-lg">
-                    <div class="w-16 h-16 gold-gradient rounded-full flex items-center justify-center mb-4">
-                        <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
-                            <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"></path>
-                        </svg>
-                    </div>
-                    <h3 class="font-serif text-2xl font-semibold mb-3">Venue Decoration</h3>
-                    <p class="text-gray-600">Thematic décor including floral arrangements, lighting, personalized props, and meaningful signs.</p>
-                </div>
-                <div data-aos="fade-up" data-aos-delay="200" class="service-card bg-white p-8 rounded-2xl shadow-lg">
-                    <div class="w-16 h-16 emerald-gradient rounded-full flex items-center justify-center mb-4">
-                        <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
-                            <path fill-rule="evenodd" d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2H4zm3 2a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path>
-                        </svg>
-                    </div>
-                    <h3 class="font-serif text-2xl font-semibold mb-3">Photography & Videography</h3>
-                    <p class="text-gray-600">Professional capture of every emotional moment, ensuring your memories last forever.</p>
                 </div>
             </div>
         </div>
     </section>
-    <!-- How It Works Section -->
-    <section id="how-it-works" class="py-20 bg-gray-100">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-16">
-                <h2 class="font-serif text-4xl font-bold text-gray-800 mb-4">How It Works</h2>
-                <p class="text-xl text-gray-600">From dream to reality in four simple steps</p>
-            </div>
-            <div class="grid md:grid-cols-4 gap-8">
-                <div data-aos="fade-up" class="text-center">
-                    <div class="w-20 h-20 gold-gradient rounded-full flex items-center justify-center mx-auto mb-4 text-white text-2xl font-bold">1</div>
-                    <h3 class="font-serif text-xl font-semibold mb-2">Share Your Vision</h3>
-                    <p class="text-gray-600">Tell us about your dream moment</p>
-                    <button onclick="openForm()" class="mt-4 text-gold hover:underline">Start Now</button>
                 </div>
-                <div data-aos="fade-up" data-aos-delay="100" class="text-center">
-                    <div class="w-20 h-20 gold-gradient rounded-full flex items-center justify-center mx-auto mb-4 text-white text-2xl font-bold">2</div>
-                    <h3 class="font-serif text-xl font-semibold mb-2">Plan & Design</h3>
-                    <p class="text-gray-600">We create your custom plan</p>
-                    <button onclick="scrollToSection('packages')" class="mt-4 text-gold hover:underline">View Packages</button>
                 </div>
-                <div data-aos="fade-up" data-aos-delay="200" class="text-center">
-                    <div class="w-20 h-20 gold-gradient rounded-full flex items-center justify-center mx-auto mb-4 text-white text-2xl font-bold">3</div>
-                    <h3 class="font-serif text-xl font-semibold mb-2">Execute Perfectly</h3>
-                    <p class="text-gray-600">We handle every detail</p>
-                    <button onclick="scrollToSection('services')" class="mt-4 text-gold hover:underline">See Services</button>
                 </div>
-                <div data-aos="fade-up" data-aos-delay="300" class="text-center">
-                    <div class="w-20 h-20 gold-gradient rounded-full flex items-center justify-center mx-auto mb-4 text-white text-2xl font-bold">4</div>
-                    <h3 class="font-serif text-xl font-semibold mb-2">Enjoy & Remember</h3>
-                    <p class="text-gray-600">Create memories that last</p>
-                    <button onclick="scrollToSection('testimonials')" class="mt-4 text-gold hover:underline">See Stories</button>
                 </div>
             </div>
-        </div>
-    </section>
-    <!-- Packages Section -->
-    <section id="packages" class="py-20 bg-white">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-16">
-                <h2 class="font-serif text-4xl font-bold text-gray-800 mb-4">Choose Your Perfect Package</h2>
-                <p class="text-xl text-gray-600">Select the experience that matches your dreams</p>
-            </div>
-            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
-                <div data-aos="fade-up" class="package-card bg-white p-8 rounded-2xl shadow-lg">
-                    <h3 class="font-serif text-2xl font-bold mb-4">Proposal Planning</h3>
-                    <p class="text-gray-600 mb-4">Creative planning & consultation</p>
-                    <p class="text-3xl font-bold text-gold mb-6">$250</p>
-                    <ul class="text-gray-600 mb-6 space-y-2">
-                        <li>• Initial consultation</li>
-                        <li>• Creative concept design</li>
-                        <li>• Timeline planning</li>
-                    </ul>
-                    <button onclick="selectPackage('Proposal Planning')" class="w-full gold-gradient text-white py-3 rounded-full font-semibold hover:opacity-90 transition">
-                        Book This Package
-                    </button>
                 </div>
-                <div data-aos="fade-up" data-aos-delay="100" class="package-card bg-white p-8 rounded-2xl shadow-lg">
-                    <h3 class="font-serif text-2xl font-bold mb-4">Venue & Decoration</h3>
-                    <p class="text-gray-600 mb-4">Venue search, booking & themed décor</p>
-                    <p class="text-3xl font-bold text-gold mb-6">$500</p>
-                    <ul class="text-gray-600 mb-6 space-y-2">
-                        <li>• Venue research & booking</li>
-                        <li>• Themed decoration</li>
-                        <li>• Setup & coordination</li>
-                    </ul>
-                    <button onclick="selectPackage('Venue & Decoration')" class="w-full gold-gradient text-white py-3 rounded-full font-semibold hover:opacity-90 transition">
-                        Book This Package
-                    </button>
                 </div>
-                <div data-aos="fade-up" data-aos-delay="200" class="package-card bg-white p-8 rounded-2xl shadow-lg">
-                    <h3 class="font-serif text-2xl font-bold mb-4">Proposal Execution</h3>
-                    <p class="text-gray-600 mb-4">Complete logistics & coordination</p>
-                    <p class="text-3xl font-bold text-gold mb-6">$990</p>
-                    <ul class="text-gray-600 mb-6 space-y-2">
-                        <li>• Full event coordination</li>
-                        <li>• Crowd management</li>
-                        <li>• Live performers</li>
-                    </ul>
-                    <button onclick="selectPackage('Proposal Execution')" class="w-full gold-gradient text-white py-3 rounded-full font-semibold hover:opacity-90 transition">
-                        Book This Package
-                    </button>
                 </div>
-                <div data-aos="fade-up" data-aos-delay="300" class="package-card bg-white p-8 rounded-2xl shadow-lg border-2 border-gold">
-                    <div class="absolute -top-3 -right-3 bg-gold text-white px-3 py-1 rounded-full text-sm font-semibold">Most Popular</div>
-                    <h3 class="font-serif text-2xl font-bold mb-4">VIP Package</h3>
-                    <p class="text-gray-600 mb-4">Everything included plus luxury</p>
-                    <p class="text-3xl font-bold text-gold mb-6">$4,500</p>
-                    <ul class="text-gray-600 mb-6 space-y-2">
-                        <li>• All services included</li>
-                        <li>• Luxury transportation</li>
-                        <li>• Professional photography</li>
-                        <li>• Premium flowers</li>
-                    </ul>
-                    <button onclick="selectPackage('VIP Package')" class="w-full gold-gradient text-white py-3 rounded-full font-semibold hover:opacity-90 transition">
-                        Book This Package
-                    </button>
                 </div>
             </div>
         </div>
     </section>
-    <!-- Testimonials Section -->
-    <section id="testimonials" class="py-20 bg-gray-100">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-16">
-                <h2 class="font-serif text-4xl font-bold text-gray-800 mb-4">Real Stories, Real Magic</h2>
-                <p class="text-xl text-gray-600">See how we've created unforgettable moments</p>
-            </div>
-            <div class="grid md:grid-cols-3 gap-8">
-                <div data-aos="fade-up" class="testimonial-card p-8 rounded-2xl shadow-lg">
-                    <div class="text-gold text-2xl mb-4">★★★★★</div>
-                    <p class="text-gray-700 mb-4 italic">"The team made my marriage proposal truly magical—she still cries when she watches the video!"</p>
-                    <p class="font-semibold">- James M.</p>
-                </div>
-                <div data-aos="fade-up" data-aos-delay="100" class="testimonial-card p-8 rounded-2xl shadow-lg">
-                    <div class="text-gold text-2xl mb-4">★★★★★</div>
-                    <p class="text-gray-700 mb-4 italic">"We surprised our dad for his 60th with all our family from overseas—perfectly organized, stress-free."</p>
-                    <p class="font-semibold">- Sarah K.</p>
                 </div>
-                <div data-aos="fade-up" data-aos-delay="200" class="testimonial-card p-8 rounded-2xl shadow-lg">
-                    <div class="text-gold text-2xl mb-4">★★★★★</div>
-                    <p class="text-gray-700 mb-4 italic">"From venue, to lights, to the band—they thought of everything. I'll never forget the look on my best friend's face!"</p>
-                    <p class="font-semibold">- Emma L.</p>
                 </div>
             </div>
-            <div class="text-center mt-12">
-                <button onclick="openForm()" class="text-gold hover:underline font-semibold">Read More Stories →</button>
             </div>
         </div>
-    </section>
-    <!-- Contact Form -->
-    <section id="contact" class="py-20 bg-white">
-        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-12">
-                <h2 class="font-serif text-4xl font-bold text-gray-800 mb-4">Let's Create Your Moment</h2>
-                <p class="text-xl text-gray-600">Tell us about your dream celebration</p>
             </div>
-            <form id="contactForm" class="space-y-6">
-                <div class="grid md:grid-cols-2 gap-6">
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-2">Name *</label>
-                        <input type="text" name="name" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gold focus:border-transparent">
                     </div>
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-2">Email *</label>
-                        <input type="email" name="email" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gold focus:border-transparent">
                     </div>
                 </div>
-                <div class="grid md:grid-cols-2 gap-6">
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-2">Phone</label>
-                        <input type="tel" name="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gold focus:border-transparent">
                     </div>
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-2">Type of Event</label>
-                        <select name="eventType" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gold focus:border-transparent">
-                            <option>Proposal</option>
-                            <option>Birthday</option>
-                            <option>Reunion</option>
-                            <option>Anniversary</option>
-                            <option>Other</option>
-                        </select>
                     </div>
-                </div>
-                <div class="grid md:grid-cols-2 gap-6">
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-2">Desired Date</label>
-                        <input type="date" name="date" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gold focus:border-transparent">
                     </div>
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 mb-2">Guest Count</label>
-                        <input type="number" name="guestCount" placeholder="Approximate" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gold focus:border-transparent">
                     </div>
                 </div>
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-2">Desired Package</label>
-                    <select name="package" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gold focus:border-transparent">
-                        <option>Proposal Planning</option>
-                        <option>Venue & Decoration</option>
-                        <option>Proposal Execution</option>
-                        <option>VIP Package</option>
-                        <option>Custom</option>
-                    </select>
-                </div>
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-2">Special Requests</label>
-                    <textarea name="message" rows="4" placeholder="Tell us more about your vision..." class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gold focus:border-transparent"></textarea>
-                </div>
-                <button type="submit" class="w-full gold-gradient text-white py-4 rounded-full font-semibold text-lg hover:opacity-90 transition">
-                    Submit & Get My Quote
-                </button>
-            </form>
         </div>
-    </section>
     <!-- Footer -->
-    <footer class="bg-gray-800 text-white py-12">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="grid md:grid-cols-4 gap-8">
                 <div>
-                    <h3 class="font-serif text-2xl font-bold mb-4">Unforgettable Moments</h3>
-                    <p class="text-gray-400">Creating magical surprises across Sydney</p>
                 </div>
                 <div>
-                    <h4 class="font-semibold mb-4">Services</h4>
-                    <ul class="text-gray-400 space-y-2">
-                        <li><a href="#" class="hover:text-gold transition">Proposal Planning</a></li>
-                        <li><a href="#" class="hover:text-gold transition">Birthday Parties</a></li>
-                        <li><a href="#" class="hover:text-gold transition">Reunions</a></li>
-                        <li><a href="#" class="hover:text-gold transition">Corporate Events</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h4 class="font-semibold mb-4">Contact</h4>
-                    <ul class="text-gray-400 space-y-2">
-                        <li>hello@unforgettablemoments.com.au</li>
-                        <li>+61 400 123 456</li>
-                        <li>Sydney, Australia</li>
                     </ul>
                 </div>
                 <div>
-                    <h4 class="font-semibold mb-4">Follow Us</h4>
-                    <div class="flex space-x-4">
-                        <a href="#" class="text-gray-400 hover:text-gold transition">Instagram</a>
-                        <a href="#" class="text-gray-400 hover:text-gold transition">Facebook</a>
-                        <a href="#" class="text-gray-400 hover:text-gold transition">TikTok</a>
-                    </div>
                 </div>
             </div>
-            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
-                <p>&copy; 2024 Unforgettable Moments. All rights reserved. | Privacy Policy | Terms & Conditions</p>
             </div>
         </div>
     </footer>
-    <!-- Chat Bubble -->
-    <div class="fixed bottom-6 right-6 z-50">
-        <button id="chatBtn" class="chat-bubble w-16 h-16 gold-gradient rounded-full shadow-lg flex items-center justify-center">
-            <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd"></path>
-            </svg>
-        </button>
-    </div>
-    <!-- Chat Modal -->
-    <div id="chatModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
-        <div class="absolute bottom-20 right-6 w-80 bg-white rounded-2xl shadow-2xl">
-            <div class="p-4 border-b">
-                <div class="flex justify-between items-center">
-                    <h3 class="font-semibold">Chat with us</h3>
-                    <button onclick="closeChat()" class="text-gray-500 hover:text-gray-700">
-                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                        </svg>
-                    </button>
-                </div>
-            </div>
-            <div class="p-4 h-64 overflow-y-auto">
-                <div class="mb-4">
-                    <div class="bg-gray-100 p-3 rounded-lg">
-                        <p class="text-sm">Hi! How can we help you create an unforgettable moment?</p>
-                    </div>
-                </div>
-            </div>
-            <div class="p-4 border-t">
-                <input type="text" placeholder="Type your message..." class="w-full px-3 py-2 border rounded-lg">
-            </div>
-        </div>
-    </div>
     <script>
-        // Initialize AOS
-        AOS.init({
-            duration: 1000,
-            once: true
         });
-        // Smooth scroll function
-        function scrollToSection(sectionId) {
-            document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
-        }
-        // Form handling
-        document.getElementById('contactForm').addEventListener('submit', function(e) {
-            e.preventDefault();
-            alert('Thank you! We\'ll be in touch within 24 hours to discuss your special moment.');
-            this.reset();
         });
-        // Package selection
-        function selectPackage(packageName) {
-            alert(`You've selected the ${packageName}. We'll reach out shortly to discuss your vision!`);
-        }
-        // Chat functionality
-        const chatBtn = document.getElementById('chatBtn');
-        const chatModal = document.getElementById('chatModal');
-        chatBtn.addEventListener('click', () => {
-            chatModal.classList.remove('hidden');
         });
-        function closeChat() {
-            chatModal.classList.add('hidden');
-        }
-        // Mobile menu
-        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
-        // Add mobile menu functionality here if needed
-        // Close modal when clicking outside
-        window.addEventListener('click', (e) => {
-            if (e.target === chatModal) {
-                closeChat();
             }
         });
-        // Form opening
-        function openForm() {
-            scrollToSection('contact');
-        }
     </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=concensure/a-word-or-two" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>digiCradle - Beautiful Printables for Every Occasion</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">
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
     <style>
         body {
+            font-family: 'Lato', sans-serif;
+            background-color: #fff9f5;
+            color: #5a4a42;
         }
+        h1, h2, h3, h4, h5, h6 {
             font-family: 'Playfair Display', serif;
         }
+        .hero-section {
+            background-image: linear-gradient(rgba(255, 245, 235, 0.7), rgba(255, 245, 235, 0.7)), url('https://images.unsplash.com/photo-1603486002254-4d0c9bc2b0f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
+            background-size: cover;
+            background-position: center;
         }
+        .category-item {
+            transition: all 0.3s ease;
+            position: relative;
         }
+        .category-item:hover {
+            color: #d9777a;
         }
+        .category-item.active {
+            color: #d9777a;
+            font-weight: 600;
         }
+        .category-item.active::after {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background-color: #d9777a;
+            animation: underline 0.3s ease;
         }
+        @keyframes underline {
+            from { transform: scaleX(0); }
+            to { transform: scaleX(1); }
         }
+        .divider {
+            height: 1px;
+            background: repeating-linear-gradient(to right, #e2c8c0, #e2c8c0 10px, transparent 10px, transparent 20px);
         }
+        .product-card {
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
+        .product-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
         }
+        .product-image {
+            transition: transform 0.3s ease;
+            overflow: hidden;
         }
+        .product-card:hover .product-image img {
+            transform: scale(1.05);
         }
+        .carousel-image {
+            transition: opacity 1s ease-in-out;
         }
+        .carousel-image.fade-out {
+            opacity: 0;
         }
+        .modal {
+            transition: opacity 0.3s ease, transform 0.3s ease;
+        }
+        .modal.hidden {
+            opacity: 0;
+            pointer-events: none;
+            transform: translateY(-20px);
+        }
+        .filter-sidebar {
+            transition: transform 0.3s ease;
+        }
+        .filter-sidebar.hidden {
+            transform: translateX(100%);
+        }
+        .cart-count {
+            position: absolute;
+            top: -8px;
+            right: -8px;
+            background-color: #d9777a;
+            color: white;
+            border-radius: 50%;
+            width: 20px;
+            height: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
         }
     </style>
 </head>
+<body>
+    <!-- Header -->
+    <header class="bg-white shadow-sm">
+        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
+            <div class="flex items-center">
+                <h1 class="text-2xl font-bold text-amber-900">digi<span class="text-rose-400">Cradle</span></h1>
+            </div>
+            <nav class="hidden md:flex space-x-8">
+                <a href="#" class="text-amber-900 hover:text-rose-400 transition">Home</a>
+                <a href="#" class="text-amber-900 hover:text-rose-400 transition">Shop</a>
+                <a href="#" class="text-amber-900 hover:text-rose-400 transition">About</a>
+                <a href="#" class="text-amber-900 hover:text-rose-400 transition">Contact</a>
+            </nav>
+            <div class="flex items-center space-x-4">
+                <div class="relative">
+                    <button id="cart-button" class="text-amber-900 hover:text-rose-400 transition">
+                        <i class="fas fa-shopping-cart text-xl"></i>
+                        <span id="cart-count" class="cart-count hidden">0</span>
+                    </button>
                 </div>
+                <button id="user-button" class="text-amber-900 hover:text-rose-400 transition">
+                    <i class="fas fa-user text-xl"></i>
+                </button>
+                <button id="mobile-menu-button" class="md:hidden text-amber-900">
+                    <i class="fas fa-bars text-xl"></i>
                 </button>
             </div>
         </div>
+        <!-- Mobile Menu -->
+        <div id="mobile-menu" class="md:hidden hidden bg-white py-2 px-4 shadow-md">
+            <a href="#" class="block py-2 text-amber-900 hover:text-rose-400 transition">Home</a>
+            <a href="#" class="block py-2 text-amber-900 hover:text-rose-400 transition">Shop</a>
+            <a href="#" class="block py-2 text-amber-900 hover:text-rose-400 transition">About</a>
+            <a href="#" class="block py-2 text-amber-900 hover:text-rose-400 transition">Contact</a>
+        </div>
+    </header>
     <!-- Hero Section -->
+    <section class="hero-section py-20 md:py-32">
+        <div class="container mx-auto px-4 text-center">
+            <h2 class="text-4xl md:text-6xl font-bold text-amber-900 mb-4">Beautiful Printables for Every Occasion</h2>
+            <p class="text-xl md:text-2xl text-amber-800 mb-8">High-quality digital designs to print at home</p>
+            <button class="bg-rose-400 hover:bg-rose-500 text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105">
+                Shop Now
+            </button>
         </div>
+    </section>
+    <!-- Category Menu -->
+    <section class="container mx-auto px-4 py-8">
+        <div class="flex overflow-x-auto space-x-8 py-4 hide-scrollbar">
+            <button class="category-item active whitespace-nowrap">All Products</button>
+            <button class="category-item whitespace-nowrap">Thank You Cards</button>
+            <button class="category-item whitespace-nowrap">Invitations</button>
+            <button class="category-item whitespace-nowrap">Planners</button>
+            <button class="category-item whitespace-nowrap">Wall Art</button>
+            <button class="category-item whitespace-nowrap">Wedding</button>
+            <button class="category-item whitespace-nowrap">Birthday</button>
         </div>
+        <div class="divider my-4"></div>
     </section>
+    <!-- Filters and Sorting -->
+    <section class="container mx-auto px-4 py-4">
+        <div class="flex justify-between items-center">
+            <button id="filter-button" class="flex items-center text-amber-900 hover:text-rose-400 transition">
+                <i class="fas fa-filter mr-2"></i> Filter
+            </button>
+            <div class="relative">
+                <select class="appearance-none bg-white border border-amber-200 rounded px-4 py-2 pr-8 text-amber-900 focus:outline-none focus:ring-2 focus:ring-rose-300">
+                    <option>Sort by: Featured</option>
+                    <option>Price: Low to High</option>
+                    <option>Price: High to Low</option>
+                    <option>Newest</option>
+                    <option>Most Popular</option>
+                </select>
+                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-amber-700">
+                    <i class="fas fa-chevron-down"></i>
                 </div>
             </div>
         </div>
     </section>
+    <!-- Product Grid -->
+    <section class="container mx-auto px-4 py-8">
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
+            <!-- Product Card 1 -->
+            <div class="product-card bg-white rounded-lg overflow-hidden shadow-md">
+                <div class="product-image relative h-64 overflow-hidden">
+                    <img src="https://images.unsplash.com/photo-1530103862676-de8c9debad1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                         alt="Floral Thank You Card"
+                         class="w-full h-full object-cover carousel-image">
+                    <img src="https://images.unsplash.com/photo-1598300042247-d088f8ab3c91?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                         alt="Floral Thank You Card - Inside"
+                         class="w-full h-full object-cover carousel-image fade-out absolute top-0 left-0">
                 </div>
+                <div class="p-4">
+                    <h3 class="text-lg font-semibold text-amber-900 mb-1">Floral Thank You Card</h3>
+                    <p class="text-rose-500 font-bold">$5.99</p>
+                    <div class="mt-3 flex justify-between items-center">
+                        <button class="text-amber-900 hover:text-rose-400 transition">
+                            <i class="far fa-heart"></i>
+                        </button>
+                        <button class="bg-amber-100 hover:bg-amber-200 text-amber-900 px-3 py-1 rounded-full text-sm transition">
+                            Add to Cart
+                        </button>
+                    </div>
                 </div>
+            </div>
+            <!-- Product Card 2 -->
+            <div class="product-card bg-white rounded-lg overflow-hidden shadow-md">
+                <div class="product-image relative h-64 overflow-hidden">
+                    <img src="https://images.unsplash.com/photo-1527525443983-6e60c75fff29?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80"
+                         alt="Wedding Invitation Suite"
+                         class="w-full h-full object-cover carousel-image">
+                    <img src="https://images.unsplash.com/photo-1527525443983-6e60c75fff29?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80"
+                         alt="Wedding Invitation Suite - Details"
+                         class="w-full h-full object-cover carousel-image fade-out absolute top-0 left-0">
                 </div>
+                <div class="p-4">
+                    <h3 class="text-lg font-semibold text-amber-900 mb-1">Wedding Invitation Suite</h3>
+                    <p class="text-rose-500 font-bold">$12.99</p>
+                    <div class="mt-3 flex justify-between items-center">
+                        <button class="text-amber-900 hover:text-rose-400 transition">
+                            <i class="far fa-heart"></i>
+                        </button>
+                        <button class="bg-amber-100 hover:bg-amber-200 text-amber-900 px-3 py-1 rounded-full text-sm transition">
+                            Add to Cart
+                        </button>
+                    </div>
                 </div>
             </div>
+            <!-- Product Card 3 -->
+            <div class="product-card bg-white rounded-lg overflow-hidden shadow-md">
+                <div class="product-image relative h-64 overflow-hidden">
+                    <img src="https://images.unsplash.com/photo-1512314889357-e157c22f938d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80"
+                         alt="Weekly Planner"
+                         class="w-full h-full object-cover carousel-image">
+                    <img src="https://images.unsplash.com/photo-1512314889357-e157c22f938d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80"
+                         alt="Weekly Planner - Inside"
+                         class="w-full h-full object-cover carousel-image fade-out absolute top-0 left-0">
                 </div>
+                <div class="p-4">
+                    <h3 class="text-lg font-semibold text-amber-900 mb-1">Weekly Planner</h3>
+                    <p class="text-rose-500 font-bold">$8.99</p>
+                    <div class="mt-3 flex justify-between items-center">
+                        <button class="text-amber-900 hover:text-rose-400 transition">
+                            <i class="far fa-heart"></i>
+                        </button>
+                        <button class="bg-amber-100 hover:bg-amber-200 text-amber-900 px-3 py-1 rounded-full text-sm transition">
+                            Add to Cart
+                        </button>
+                    </div>
                 </div>
+            </div>
+            <!-- Product Card 4 -->
+            <div class="product-card bg-white rounded-lg overflow-hidden shadow-md">
+                <div class="product-image relative h-64 overflow-hidden">
+                    <img src="https://images.unsplash.com/photo-1579547945413-497e1b99dac0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                         alt="Minimalist Wall Art"
+                         class="w-full h-full object-cover carousel-image">
+                    <img src="https://images.unsplash.com/photo-1579547945413-497e1b99dac0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                         alt="Minimalist Wall Art - Alternative"
+                         class="w-full h-full object-cover carousel-image fade-out absolute top-0 left-0">
                 </div>
+                <div class="p-4">
+                    <h3 class="text-lg font-semibold text-amber-900 mb-1">Minimalist Wall Art</h3>
+                    <p class="text-rose-500 font-bold">$6.99</p>
+                    <div class="mt-3 flex justify-between items-center">
+                        <button class="text-amber-900 hover:text-rose-400 transition">
+                            <i class="far fa-heart"></i>
+                        </button>
+                        <button class="bg-amber-100 hover:bg-amber-200 text-amber-900 px-3 py-1 rounded-full text-sm transition">
+                            Add to Cart
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
     </section>
+    <!-- Filter Sidebar -->
+    <div id="filter-sidebar" class="filter-sidebar fixed top-0 right-0 h-full w-64 bg-white shadow-lg z-50 transform translate-x-full transition">
+        <div class="p-4 border-b border-amber-200 flex justify-between items-center">
+            <h3 class="text-lg font-semibold text-amber-900">Filters</h3>
+            <button id="close-filter" class="text-amber-700 hover:text-rose-400">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <div class="p-4">
+            <div class="mb-6">
+                <h4 class="font-medium text-amber-900 mb-3">Occasion</h4>
+                <div class="space-y-2">
+                    <label class="flex items-center">
+                        <input type="checkbox" class="form-checkbox text-rose-400">
+                        <span class="ml-2 text-amber-900">Wedding</span>
+                    </label>
+                    <label class="flex items-center">
+                        <input type="checkbox" class="form-checkbox text-rose-400">
+                        <span class="ml-2 text-amber-900">Birthday</span>
+                    </label>
+                    <label class="flex items-center">
+                        <input type="checkbox" class="form-checkbox text-rose-400">
+                        <span class="ml-2 text-amber-900">Baby Shower</span>
+                    </label>
+                    <label class="flex items-center">
+                        <input type="checkbox" class="form-checkbox text-rose-400">
+                        <span class="ml-2 text-amber-900">Graduation</span>
+                    </label>
                 </div>
+            </div>
+            <div class="mb-6">
+                <h4 class="font-medium text-amber-900 mb-3">Theme</h4>
+                <div class="space-y-2">
+                    <label class="flex items-center">
+                        <input type="checkbox" class="form-checkbox text-rose-400">
+                        <span class="ml-2 text-amber-900">Floral</span>
+                    </label>
+                    <label class="flex items-center">
+                        <input type="checkbox" class="form-checkbox text-rose-400">
+                        <span class="ml-2 text-amber-900">Minimalist</span>
+                    </label>
+                    <label class="flex items-center">
+                        <input type="checkbox" class="form-checkbox text-rose-400">
+                        <span class="ml-2 text-amber-900">Vintage</span>
+                    </label>
+                    <label class="flex items-center">
+                        <input type="checkbox" class="form-checkbox text-rose-400">
+                        <span class="ml-2 text-amber-900">Modern</span>
+                    </label>
                 </div>
             </div>
+            <div class="mb-6">
+                <h4 class="font-medium text-amber-900 mb-3">Price Range</h4>
+                <div class="flex items-center justify-between mb-2">
+                    <span class="text-sm text-amber-700">$0</span>
+                    <span class="text-sm text-amber-700">$20+</span>
+                </div>
+                <input type="range" min="0" max="20" value="20" class="w-full h-2 bg-amber-200 rounded-lg appearance-none cursor-pointer">
             </div>
+            <button class="w-full bg-rose-400 hover:bg-rose-500 text-white py-2 rounded-full transition">
+                Apply Filters
+            </button>
         </div>
+    </div>
+    <div id="filter-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div>
+    <!-- Product Detail Modal -->
+    <div id="product-modal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white rounded-lg max-w-4xl w-full max-h-screen overflow-y-auto">
+            <div class="p-4 flex justify-between items-center border-b border-amber-200">
+                <h3 class="text-xl font-semibold text-amber-900">Product Details</h3>
+                <button id="close-modal" class="text-amber-700 hover:text-rose-400">
+                    <i class="fas fa-times"></i>
+                </button>
             </div>
+            <div class="p-6 md:flex">
+                <div class="md:w-1/2 mb-6 md:mb-0 md:pr-6">
+                    <div class="mb-4 h-96 bg-amber-50 rounded-lg overflow-hidden flex items-center justify-center">
+                        <img id="modal-main-image" src="https://images.unsplash.com/photo-1530103862676-de8c9debad1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                             alt="Product Image"
+                             class="h-full w-full object-contain">
                     </div>
+                    <div class="grid grid-cols-4 gap-2">
+                        <button class="h-16 bg-amber-50 rounded overflow-hidden">
+                            <img src="https://images.unsplash.com/photo-1530103862676-de8c9debad1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                                 alt="Thumbnail 1"
+                                 class="w-full h-full object-cover">
+                        </button>
+                        <button class="h-16 bg-amber-50 rounded overflow-hidden">
+                            <img src="https://images.unsplash.com/photo-1598300042247-d088f8ab3c91?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                                 alt="Thumbnail 2"
+                                 class="w-full h-full object-cover">
+                        </button>
+                        <button class="h-16 bg-amber-50 rounded overflow-hidden">
+                            <img src="https://images.unsplash.com/photo-1530103862676-de8c9debad1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                                 alt="Thumbnail 3"
+                                 class="w-full h-full object-cover">
+                        </button>
+                        <button class="h-16 bg-amber-50 rounded overflow-hidden">
+                            <img src="https://images.unsplash.com/photo-1598300042247-d088f8ab3c91?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                                 alt="Thumbnail 4"
+                                 class="w-full h-full object-cover">
+                        </button>
                     </div>
                 </div>
+                <div class="md:w-1/2">
+                    <h2 id="modal-product-title" class="text-2xl font-bold text-amber-900 mb-2">Floral Thank You Card</h2>
+                    <p id="modal-product-price" class="text-rose-500 text-xl font-bold mb-4">$5.99</p>
+                    <div class="mb-6">
+                        <h4 class="font-medium text-amber-900 mb-2">File Formats</h4>
+                        <div class="flex space-x-2">
+                            <span class="bg-amber-100 text-amber-900 px-3 py-1 rounded-full text-sm">PDF</span>
+                            <span class="bg-amber-100 text-amber-900 px-3 py-1 rounded-full text-sm">PNG</span>
+                            <span class="bg-amber-100 text-amber-900 px-3 py-1 rounded-full text-sm">JPG</span>
+                        </div>
                     </div>
+                    <div class="mb-6">
+                        <h4 class="font-medium text-amber-900 mb-2">Size Options</h4>
+                        <div class="flex space-x-2">
+                            <span class="bg-amber-100 text-amber-900 px-3 py-1 rounded-full text-sm">A4</span>
+                            <span class="bg-amber-100 text-amber-900 px-3 py-1 rounded-full text-sm">US Letter</span>
+                            <span class="bg-amber-100 text-amber-900 px-3 py-1 rounded-full text-sm">A5</span>
+                        </div>
                     </div>
+                    <div class="mb-6">
+                        <h4 class="font-medium text-amber-900 mb-2">Occasion & Theme</h4>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="bg-amber-100 text-amber-900 px-3 py-1 rounded-full text-sm">Thank You</span>
+                            <span class="bg-amber-100 text-amber-900 px-3 py-1 rounded-full text-sm">Floral</span>
+                            <span class="bg-amber-100 text-amber-900 px-3 py-1 rounded-full text-sm">Elegant</span>
+                        </div>
                     </div>
+                    <div class="mb-6">
+                        <h4 class="font-medium text-amber-900 mb-2">Description</h4>
+                        <p class="text-amber-900">
+                            This beautiful floral thank you card features delicate watercolor flowers and elegant typography.
+                            Perfect for expressing gratitude after weddings, baby showers, or any special occasion.
+                            The design comes in multiple sizes and formats for easy printing at home or through a professional printer.
+                        </p>
+                    </div>
+                    <div class="mb-6">
+                        <h4 class="font-medium text-amber-900 mb-2">Reviews</h4>
+                        <div class="flex items-center mb-2">
+                            <div class="flex text-amber-400">
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star-half-alt"></i>
+                            </div>
+                            <span class="text-amber-900 ml-2">4.5 (24 reviews)</span>
+                        </div>
+                        <div class="space-y-3">
+                            <div>
+                                <div class="flex justify-between">
+                                    <span class="font-medium text-amber-900">Sarah J.</span>
+                                    <span class="text-sm text-amber-700">2 days ago</span>
+                                </div>
+                                <div class="flex text-amber-400 text-sm">
+                                    <i class="fas fa-star"></i>
+                                    <i class="fas fa-star"></i>
+                                    <i class="fas fa-star"></i>
+                                    <i class="fas fa-star"></i>
+                                    <i class="fas fa-star"></i>
+                                </div>
+                                <p class="text-amber-900 mt-1">Beautiful design, printed perfectly at home!</p>
+                            </div>
+                            <div>
+                                <div class="flex justify-between">
+                                    <span class="font-medium text-amber-900">Michael T.</span>
+                                    <span class="text-sm text-amber-700">1 week ago</span>
+                                </div>
+                                <div class="flex text-amber-400 text-sm">
+                                    <i class="fas fa-star"></i>
+                                    <i class="fas fa-star"></i>
+                                    <i class="fas fa-star"></i>
+                                    <i class="fas fa-star"></i>
+                                    <i class="far fa-star"></i>
+                                </div>
+                                <p class="text-amber-900 mt-1">Great quality, would buy again.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex space-x-4">
+                        <button class="flex-1 bg-rose-400 hover:bg-rose-500 text-white py-3 rounded-full transition flex items-center justify-center">
+                            <i class="fas fa-shopping-cart mr-2"></i> Add to Cart
+                        </button>
+                        <button class="w-12 h-12 flex items-center justify-center border border-amber-300 text-amber-900 hover:text-rose-400 rounded-full transition">
+                            <i class="far fa-heart"></i>
+                        </button>
                     </div>
                 </div>
+            </div>
         </div>
+    </div>
     <!-- Footer -->
+    <footer class="bg-amber-900 text-amber-100 py-12">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                 <div>
+                    <h3 class="text-xl font-bold mb-4">digi<span class="text-rose-300">Cradle</span></h3>
+                    <p class="mb-4">Beautiful printables for every occasion. High-quality digital designs to print at home.</p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-amber-100 hover:text-rose-300 transition">
+                            <i class="fab fa-facebook-f"></i>
+                        </a>
+                        <a href="#" class="text-amber-100 hover:text-rose-300 transition">
+                            <i class="fab fa-instagram"></i>
+                        </a>
+                        <a href="#" class="text-amber-100 hover:text-rose-300 transition">
+                            <i class="fab fa-pinterest-p"></i>
+                        </a>
+                    </div>
                 </div>
                 <div>
+                    <h4 class="font-bold mb-4">Shop</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="hover:text-rose-300 transition">Thank You Cards</a></li>
+                        <li><a href="#" class="hover:text-rose-300 transition">Invitations</a></li>
+                        <li><a href="#" class="hover:text-rose-300 transition">Planners</a></li>
+                        <li><a href="#" class="hover:text-rose-300 transition">Wall Art</a></li>
                     </ul>
                 </div>
                 <div>
+                    <h4 class="font-bold mb-4">Help</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="hover:text-rose-300 transition">FAQs</a></li>
+                        <li><a href="#" class="hover:text-rose-300 transition">Shipping & Returns</a></li>
+                        <li><a href="#" class="hover:text-rose-300 transition">Terms & Conditions</a></li>
+                        <li><a href="#" class="hover:text-rose-300 transition">Privacy Policy</a></li>
                     </ul>
                 </div>
                 <div>
+                    <h4 class="font-bold mb-4">Contact</h4>
+                    <ul class="space-y-2">
+                        <li class="flex items-center">
+                            <i class="fas fa-envelope mr-2"></i> hello@digicradle.com
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-phone mr-2"></i> (123) 456-7890
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-map-marker-alt mr-2"></i> 123 Design St, Creative City
+                        </li>
+                    </ul>
                 </div>
             </div>
+            <div class="border-t border-amber-800 mt-8 pt-8 text-center">
+                <p>&copy; 2023 digiCradle. All rights reserved.</p>
             </div>
         </div>
     </footer>
     <script>
+        // Mobile Menu Toggle
+        const mobileMenuButton = document.getElementById('mobile-menu-button');
+        const mobileMenu = document.getElementById('mobile-menu');
+        mobileMenuButton.addEventListener('click', () => {
+            mobileMenu.classList.toggle('hidden');
         });
+        // Category Switching
+        const categoryItems = document.querySelectorAll('.category-item');
+        categoryItems.forEach(item => {
+            item.addEventListener('click', () => {
+                categoryItems.forEach(i => i.classList.remove('active'));
+                item.classList.add('active');
+                // Here you would fetch products from Supabase based on the selected category
+                console.log(`Category selected: ${item.textContent}`);
+            });
         });
+        // Filter Sidebar Toggle
+        const filterButton = document.getElementById('filter-button');
+        const closeFilter = document.getElementById('close-filter');
+        const filterSidebar = document.getElementById('filter-sidebar');
+        const filterOverlay = document.getElementById('filter-overlay');
+        filterButton.addEventListener('click', () => {
+            filterSidebar.classList.remove('translate-x-full');
+            filterOverlay.classList.remove('hidden');
+        });
+        closeFilter.addEventListener('click', () => {
+            filterSidebar.classList.add('translate-x-full');
+            filterOverlay.classList.add('hidden');
+        });
+        filterOverlay.addEventListener('click', () => {
+            filterSidebar.classList.add('translate-x-full');
+            filterOverlay.classList.add('hidden');
         });
+        // Product Image Carousel
+        const productCards = document.querySelectorAll('.product-card');
+        productCards.forEach(card => {
+            const images = card.querySelectorAll('.carousel-image');
+            if (images.length > 1) {
+                let currentIndex = 0;
+                setInterval(() => {
+                    images[currentIndex].classList.add('fade-out');
+                    currentIndex = (currentIndex + 1) % images.length;
+                    images[currentIndex].classList.remove('fade-out');
+                }, 5000);
             }
         });
+        // Product Modal
+        const productModal = document.getElementById('product-modal');
+        const closeModal = document.getElementById('close-modal');
+        // This would be attached to each product card in a real implementation
+        productCards.forEach(card => {
+            card.addEventListener('click', () => {
+                productModal.classList.remove('hidden');
+            });
+        });
+        closeModal.addEventListener('click', () => {
+            productModal.classList.add('hidden');
+        });
+        // Cart Count (mock data)
+        const cartCount = document.getElementById('cart-count');
+        cartCount.textContent = '3';
+        cartCount.classList.remove('hidden');
+        // Supabase Integration (placeholder)
+        // In a real implementation, you would:
+        // 1. Initialize Supabase client
+        // const supabaseUrl = 'YOUR_SUPABASE_URL';
+        // const supabaseKey = 'YOUR_SUPABASE_KEY';
+        // const supabase = supabase.createClient(supabaseUrl, supabaseKey);
+        // 2. Fetch products
+        // async function fetchProducts(category) {
+        //     const { data, error } = await supabase
+        //         .from('products')
+        //         .select('*')
+        //         .eq('category', category);
+        //     if (error) console.error('Error fetching products:', error);
+        //     else return data;
+        // }
+        // 3. Handle cart operations
+        // async function addToCart(productId) {
+        //     const { data, error } = await supabase
+        //         .from('cart')
+        //         .insert([{ product_id: productId, user_id: currentUserId }]);
+        //     if (error) console.error('Error adding to cart:', error);
+        //     else updateCartCount();
+        // }
+        // 4. Update cart count
+        // async function updateCartCount() {
+        //     const { count, error } = await supabase
+        //         .from('cart')
+        //         .select('*', { count: 'exact' })
+        //         .eq('user_id', currentUserId);
+        //     if (error) console.error('Error fetching cart count:', error);
+        //     else {
+        //         cartCount.textContent = count;
+        //         cartCount.classList.toggle('hidden', count === 0);
+        //     }
+        // }
     </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=concensure/a-word-or-two" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>