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. Cómo usar este prompt
- 1 Copia el prompt de arriba
- 2 Pégalo en tu herramienta de IA favorita (ChatGPT, Claude, v0, etc.)
- 3 La IA generará el código del sitio web por ti
- 4 Personaliza e itera según tus necesidades
Más Prompts de Restaurant
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
Acerca de este Prompt de Restaurant
Este prompt Bakery & Cafe Homepage está diseñado para ayudarte a crear rápidamente sitios web profesionales de restaurant usando herramientas de IA como ChatGPT, Claude, v0 de Vercel, Cursor y Bolt.new.
Ya seas desarrollador, diseñador o emprendedor, este prompt de IA gratuito te da una ventaja al crear bakery & cafe homepage. Simplemente copia el prompt, pégalo en tu asistente de código IA favorito y personalízalo para tu marca.
Herramientas de IA Compatibles
- ChatGPT (GPT-4) - Excelente para generación detallada de código y explicaciones
- Claude 3 - Excelente para diseños web complejos y matizados
- v0 de Vercel - Perfecto para componentes React y Next.js
- Cursor - Ideal para codificación potenciada por IA en tu IDE
- Bolt.new - Prototipado rápido y apps full-stack
- Lovable - Constructor de sitios web IA fácil de usar