Now let me generate design inspiration for this Ramadan e-commerce homepage, and also generate the hero images we'll need.
Now let me generate the images needed for the homepage sections.
Now let me build the complete homepage. I'll start by updating the design tokens, then the layout, and then create all the components.
Now let me create the components and the main page:
Now let me create the main page that brings everything together:
Bismillah! The homepage for The Sunnah Store is now complete. Here's what was built following your hand-drawn wireframe layout:
- Announcement Bar — A dismissible top banner with "Create Your Own Box" and free shipping message in deep teal
- Second Header / Navbar — "Ramadan Gifting Boxes are here" sub-nav with the store's Playfair Display serif logo, mobile hamburger menu, account & cart icons
- Search Bar — A full-width pill-shaped search input for discovering products
- Ramadan Gifting Experience — A large hero banner card with overlay text, CTA button, and hover zoom effect
- Date Box + Quran — Two side-by-side featured cards (stacked on mobile) with image overlays and shop links
- Gift Box of the Day — A split-layout section with a live countdown timer, pricing with discount badge, and "Add to Cart" CTA
- Best Selling in Ramadan — A horizontally scrollable product carousel with 5 products, ratings, tags, and navigation arrows
The design uses a warm ivory/cream background, deep teal (#2B5B54) as the primary, warm amber as the accent, and Playfair Display + Inter fonts for that premium-yet-authentic Ramadan aesthetic — no cliched gold-on-green.
Now I have the full design. Let me read the current project files to understand what needs to be changed, then recreate everything to match this luxurious midnight/gold Ramadan design.
Now I have the full picture. The HTML design uses a dark midnight theme with gold accents, floating particles, elegant typography (Cormorant Garamond + Cinzel + Nunito Sans), and sections for Quran, Gift Box of the Day, Datebox/Calendar, Salami Cheques, and Best Sellers carousel. Let me completely rebuild the project to match this design faithfully.
Now let me generate proper images for this darker, more luxurious design and build all components:
Now let me build all the components. I'll create the particles background, navigation, sections, and page:
Now let me read the remaining existing components and create all the new sections:
Good, I have all the files. Now let me rewrite all components to match the HTML design with the midnight/gold luxury aesthetic. I'll write them all in parallel:
Now let me write the main page, and clean up old unused components:
Now let me delete the old components that are no longer used:
Now let me add the float keyframe CSS that the particles need (since Tailwind's animate-float references the keyframe defined in config, but the particles use inline styles with a float animation name that needs to be in CSS):
The entire homepage has been recreated to faithfully match the provided HTML design. The dark midnight (#0D1B2A) background with gold (#C9A961) accents is now the core aesthetic, using Cormorant Garamond for headings, Cinzel for display/labels, and Nunito Sans for body text. The page includes floating gold particles, a shimmer-effect announcement bar, scroll-triggered fade-in animations across all sections (Quran, Gift Box of the Day with countdown timer, Deen Calendar, Eid Salami cheques, and an infinite-scrolling Best Sellers carousel), and a refined footer -- all matching the original HTML's structure, colors, and interactions.