Bakery & Cafe Homepage
A warm, artisan bakery and cafe homepage with daily specials, online ordering, and cozy atmosphere
Create a warm, inviting homepage for an artisan bakery and cafe called "Golden Crumb" located in a charming neighborhood storefront. The design should feel handcrafted, cozy, and slightly rustic-modern.
1. NAVIGATION BAR
- Logo: "Golden Crumb" in a hand-lettered serif font with a small wheat stalk illustration
- Links: Menu, Order Online, Catering, Our Story, Visit Us
- Right side: shopping bag icon with item count badge, "Order Pickup" button (#B45309 amber, solid)
- Transparent on hero, turns white with shadow on scroll
- Hamburger menu on mobile with full-screen overlay
2. HERO SECTION
- Full-width lifestyle photo of fresh croissants on a marble counter with flour dust and morning light
- Overlaid content (centered):
- Tagline in script font: "Baked Fresh Every Morning"
- Headline: "Artisan Breads, Pastries & Coffee"
- Subheadline: "Made from scratch with organic flour, local butter, and a whole lot of love since 2018."
- Two CTAs: "View Today's Menu" (solid #B45309 amber) and "Order for Pickup" (outlined white)
- Subtle Ken Burns zoom effect on the background image
- Bottom edge: decorative scallop border in cream (#FEF3C7)
3. TODAY'S SPECIALS (3 featured items)
- Section heading: "Fresh Out of the Oven" with a small clock icon and "Updated daily at 6 AM"
- 3 cards in a horizontal row:
- Special 1: "Sourdough Boule"
- Photo: rustic round loaf with scored top
- "Our 48-hour fermented sourdough with a crackling crust"
- Price: $8.50
- Tag: "Best Seller"
- "Add to Order" button
- Special 2: "Almond Croissant"
- Photo: golden croissant with sliced almonds and powdered sugar
- "Twice-baked with house-made almond cream and toasted almonds"
- Price: $5.75
- Tag: "Staff Pick"
- "Add to Order" button
- Special 3: "Lavender Honey Latte"
- Photo: latte with beautiful foam art in a ceramic cup
- "Local honey, dried lavender, and our house espresso blend"
- Price: $6.25
- Tag: "Seasonal"
- "Add to Order" button
- Cards: cream background (#FFFBEB), 16px border-radius, subtle warm shadow
- Tags shown as small rounded badges above the photo
4. MENU OVERVIEW (tabbed sections)
- Tabs: Breads, Pastries, Breakfast, Lunch, Coffee & Drinks
- Default tab: Breads
- Grid layout (2 columns on desktop) showing 4-6 items per tab:
Breads tab example:
- Sourdough Boule — $8.50
- Multigrain Farmhouse Loaf — $9.00
- Ciabatta — $6.50
- Olive Rosemary Focaccia — $7.75
- Rye Pumpernickel — $8.00
- Baguette — $4.50
- Each item: small square photo (80px), name, one-line description, price, "Add" icon button
- "View Full Menu" button below with arrow
- Dietary icons where applicable: 🌱 vegan, 🌾 gluten-free option, 🥜 contains nuts
5. OUR STORY SECTION (2-column layout)
- Left: portrait photo of two bakers (husband and wife team) in aprons, smiling in the kitchen
- Right content:
- Headline: "From Our Kitchen to Yours"
- Story: "What started as a weekend farmers market stand in 2018 has grown into the neighborhood's favorite gathering spot. We're Elena and Marcus, and we believe great bread takes time — our sourdough starter is older than the shop. Every loaf, pastry, and cup of coffee is made with intention."
- Signature graphic: "— Elena & Marcus"
- CTA: "Read Our Full Story →" link
- Background: soft cream (#FEF3C7)
6. HOW ONLINE ORDERING WORKS (3 steps)
- Headline: "Order Ahead, Skip the Line"
- Step 1: "Browse Our Menu" — "Choose from today's fresh selection" — menu icon
- Step 2: "Pick Your Time" — "Select a pickup window that works for you" — clock icon
- Step 3: "Grab & Go" — "Your order, boxed and ready when you arrive" — bag icon
- Connected by a dashed line with brown circles
- CTA below: "Start Your Order" button
7. GALLERY SECTION (masonry grid)
- 6 photos in staggered layout:
- Interior shot: exposed brick, wooden tables, hanging Edison bulbs
- Close-up: flaky croissant being torn apart
- Barista pouring latte art
- Display case full of colorful pastries
- Outdoor patio with flower boxes and bistro chairs
- Bread loaves cooling on wire racks
- Hover: slight zoom with warm overlay and caption
- Lightbox on click
- Below gallery: Instagram handle "@goldencrumb" with "Follow us for daily bake updates"
8. CUSTOMER REVIEWS (horizontal carousel)
- Review 1: "The best sourdough in the city. We drive 30 minutes just for their bread." — Jake & Amy R. ★★★★★ Google
- Review 2: "Their almond croissant changed my life. Not exaggerating." — Nadia K. ★★★★★ Yelp
- Review 3: "Cozy atmosphere, amazing coffee, and the breakfast sandwich is perfection." — Tom W. ★★★★★ Google
- Review 4: "We order their bread box subscription weekly. Never disappoints." — Lisa M. ★★★★★ Google
- Auto-advance every 5 seconds, dot navigation, pause on hover
- Warm background (#FEF3C7)
9. CATERING & EVENTS PROMO (split section)
- Left side content:
- Headline: "Catering for Every Occasion"
- "From office breakfast spreads to wedding dessert tables, we craft custom menus for groups of 10 to 200."
- 3 bullet points with icons:
- "Pastry & bread platters for corporate meetings"
- "Custom wedding and celebration cakes"
- "Weekly office bread box subscriptions"
- CTA: "Request a Catering Quote" button
- Right side: photo of a beautifully arranged pastry platter on a wooden board
10. BREAD SUBSCRIPTION BOX (promotional section)
- Headline: "The Weekly Bread Box"
- Description: "Get a curated selection of our freshest breads and one surprise pastry delivered to your door every Saturday."
- Pricing: "$32/week — Free delivery within 5 miles"
- What's included: "2 loaves of bread + 1 specialty pastry + tasting notes"
- CTA: "Subscribe Now" button
- Illustration or photo of an open box with bread wrapped in kraft paper
- Badge: "🎁 Perfect gift — Gift subscriptions available"
11. VISIT US SECTION
- Two-column layout: map embed on left, details on right
- Address: "247 Elm Street, Maplewood Village"
- Hours:
- Tue–Fri: 7:00 AM – 4:00 PM
- Saturday: 7:00 AM – 3:00 PM
- Sunday: 8:00 AM – 2:00 PM (pastries & coffee only)
- Monday: Closed (baking day!)
- Phone: (555) 847-2200
- Parking: "Free street parking + lot behind the building"
- Special note: "🐕 Dog-friendly patio seating available"
12. NEWSLETTER & FOOTER
- Newsletter strip: "Join the Crumb Club" — "Get early access to seasonal specials, baking tips, and a 10% off coupon for your first online order."
- Email input + "Join" button
- Footer: 3 columns — Menu, Company, Connect
- Social icons: Instagram, Facebook, TikTok
- Payment icons: Visa, Mastercard, Apple Pay, Google Pay
- Small text: "© 2026 Golden Crumb Bakery & Cafe. Made with flour, butter, and love."
Design: Warm, artisan, rustic-modern. Primary: #B45309 (warm amber), secondary: #92400E (deep brown), cream background: #FFFBEB, card surfaces: #FEF3C7, body text: #451A03. Typography: Playfair Display for headings (serif, elegant), Inter for body text, and a script font (e.g., Dancing Script) for taglines. Cards with 16px border-radius and soft warm shadows. Paper-like texture on section backgrounds where appropriate.
Responsive: On mobile, all grids stack to single column. Menu tabs become horizontal scrollable pills. Gallery switches to 2-column grid. Carousel shows one review at a time with swipe. Navigation collapses to hamburger. Sticky bottom bar with "Order Now" CTA on mobile. So verwendest du diesen Prompt
- 1 Kopiere den Prompt oben
- 2 Füge ihn in dein Lieblings-KI-Tool ein (ChatGPT, Claude, v0, etc.)
- 3 Die KI generiert den Website-Code für dich
- 4 Passe an und iteriere nach deinen Bedürfnissen
Mehr Restaurant Prompts
Digital Menu Page
An interactive digital menu with categories, dietary filters, and beautiful food imagery
Food Delivery Landing Page
A conversion-focused landing page for a food delivery service or ghost kitchen
Reservation Booking Page
A streamlined table reservation system with date picker, party size, and special requests
Über diesen Restaurant Prompt
Dieser Bakery & Cafe Homepage Prompt wurde entwickelt, um dir zu helfen, schnell professionelle restaurant-Websites mit KI-Tools wie ChatGPT, Claude, v0 von Vercel, Cursor und Bolt.new zu erstellen.
Ob Entwickler, Designer oder Unternehmer - dieser kostenlose KI-Prompt gibt dir einen Vorsprung beim Erstellen von bakery & cafe homepage. Kopiere einfach den Prompt, füge ihn in deinen bevorzugten KI-Coding-Assistenten ein und passe ihn an deine Marke an.
Kompatible KI-Tools
- ChatGPT (GPT-4) - Hervorragend für detaillierte Code-Generierung und Erklärungen
- Claude 3 - Ausgezeichnet für komplexe, nuancierte Website-Designs
- v0 von Vercel - Perfekt für React- und Next.js-Komponenten
- Cursor - Ideal für KI-gestütztes Coding in deiner IDE
- Bolt.new - Schnelles Prototyping und Full-Stack-Apps
- Lovable - Benutzerfreundlicher KI-Website-Builder