Create a new and improved version of the website at http://www.astonishpatisserie.com/. It promotes Astonish Cafe & Dessert, an Adelaide business that specialises in hand-crafted cakes and desserts, in addition to their standard cafe menu.
Use an aesthetic that is welcoming and a little bit playful. Prefer down-to-earth copy over corporate cliches.
Design aesthetic: playful and bold. Rounded shapes, expressive headings, lively icons/illustrations, and friendly micro-interactions. Use the provided brand colours as the source of truth; apply them more prominently (accents, highlights, backgrounds) while keeping text legible and layouts clear. If no colours are provided, choose a bright, energetic palette.
Devise a colour palette that complements this aesthetic.
Required pages: Landing.
Include a contact form that displays a success message on submit (no actual email sending). Include an embedded map using a free public tile service (e.g., OpenStreetMap via Leaflet). No API keys required. If no location is provided, center the map on Melbourne, Australia.
Brand images:
- dd_astonish_01.webp: photo of cake #1 (portrait): https://firebasestorage.googleapis.com/v0/b/digitaldoo-198e7.firebasestorage.app/o/assets%2F699c6f755224d5c0de980097%2F1772637844220_dd_astonish_01.webp?alt=media&token=7e972805-81eb-4715-81cb-95a761176414
- dd_astonish_02.webp: photo of cake #2 (portrait): https://firebasestorage.googleapis.com/v0/b/digitaldoo-198e7.firebasestorage.app/o/assets%2F699c6f755224d5c0de980097%2F1772637859702_dd_astonish_02.webp?alt=media&token=cae1d5fd-ac6b-4714-a969-41d8cc2ea579
- dd_astonish_03.webp: photo of cake #3: https://firebasestorage.googleapis.com/v0/b/digitaldoo-198e7.firebasestorage.app/o/assets%2F699c6f755224d5c0de980097%2F1772637873084_dd_astonish_03.webp?alt=media&token=2ed2bb6f-ff00-4843-90d1-192f540d09c0
- dd_astonish_04.webp: photo of cake #4: https://firebasestorage.googleapis.com/v0/b/digitaldoo-198e7.firebasestorage.app/o/assets%2F699c6f755224d5c0de980097%2F1772637887769_dd_astonish_04.webp?alt=media&token=9df17927-fb99-436d-b889-ce667c422eaf
- Screenshot 2026-03-05 at 1.50.32 am.png: 4x4 photo showcase (portrait): https://firebasestorage.googleapis.com/v0/b/digitaldoo-198e7.firebasestorage.app/o/assets%2F699c6f755224d5c0de980097%2F1772637906619_Screenshot_2026-03-05_at_1.50.32_am.png?alt=media&token=a789fbff-570d-49b5-9d7a-51c71dc5dc73
- Screenshot 2026-03-05 at 1.50.56 am.png: 4x4 photo showcase (portrait): https://firebasestorage.googleapis.com/v0/b/digitaldoo-198e7.firebasestorage.app/o/assets%2F699c6f755224d5c0de980097%2F1772637924219_Screenshot_2026-03-05_at_1.50.56_am.png?alt=media&token=e6e6f34b-4d35-40f2-bbc8-ada8f5eb3cdf
Draw visual inspiration from: http://www.astonishpatisserie.com/.
I'll build this landing page for Astonish Cafe & Dessert. Let me start by gathering inspiration from the existing site and creating a design brief, while also understanding the current codebase.
Now let me save the brand images to the public folder and set up the project. I'll download all the images first.
Now let me update the globals.css with the new theme, then build all the components. I'll use a warm, playful palette inspired by the bakery's cakes — coral pink as primary, warm cream background, rich chocolate brown for text, and gold accents.
Now let me update the layout with the new fonts and metadata:
Now let me build all the components. I'll create them in parallel:
Now let me wire it all together in the main page:
Let me verify the Leaflet package is available (it should be auto-resolved, but let me also check the existing image references):
Leaflet is already in package.json. The images are saved as blobs so they may not show in a glob but should render fine. Let me also add the @types/leaflet package and make sure the Next.js config allows the external image domains:
Good — images are unoptimized so external URLs will work fine. Let me add the leaflet types to the package.json:
Now let me also add the remote patterns for Next.js Image to handle our external URLs from Firebase and Vercel blob storage:
The full landing page for Astonish Cafe & Dessert is now built. Here's what's included:
- Navbar — Fixed top navigation with smooth scroll links and a mobile hamburger menu
- Hero — Bold serif heading with a playful image collage of their cakes, quick stats, and dual CTAs
- About — Four value cards (Hand-crafted, Made with love, Wildly creative, Full cafe menu) with warm, down-to-earth copy
- Creations — Four feature cards using the provided brand photos (Lunar New Year, tiger macarons, Easter, Christmas tower) with overlay text
- Menu — Tab-based menu (Cakes / Macarons / Cafe) with indicative pricing and friendly descriptions
- Gallery — The two 4x4 photo showcases displayed large, plus a row of the four individual cake shots
- Contact — Form with success message, business info cards (address, phone, hours), and an embedded OpenStreetMap via Leaflet pinned to 393 King William St, Adelaide
- Footer — Dark footer with branding, quick links, social icons, and contact details
The colour palette uses warm cream (#FFF8F0), coral pink (#E8636A), chocolate brown (#3D2B1F), gold accent (#D4A853), and soft peach (#FFF0E6) — playful, warm, and legible. Typography pairs Playfair Display (serif headings) with DM Sans (body text) for that balance of elegant and approachable.