Artisan Coffee Shop Homepage

Create a warm, inviting homepage for an independent specialty coffee shop called "Ember & Bloom" — a small-batch roastery and cafe in Portland, Oregon. The design should feel artisanal, cozy, and craft-forward without being cluttered. Think exposed brick textures, muted earth tones, and beautiful coffee photography.

1. NAVIGATION BAR
- Logo: "Ember & Bloom" in a warm serif font with a small coffee bean and flower icon mark
- Links: Menu, Our Story, Roastery, Locations, Shop Online
- Right side: "Order Ahead" CTA button (solid #92400E amber-800, cream text), cart icon with item count badge
- Background: warm cream (#FFFBEB) with a thin bottom border (#E5E0D8)
- Sticky on scroll with subtle backdrop blur
- Mobile: logo + hamburger + cart icon

2. HERO SECTION
- Full-width background image: barista pouring latte art in a sunlit cafe with exposed brick and hanging plants
- Warm overlay gradient from left (rgba(41,25,12,0.7)) fading to transparent on right
- Headline: "Roasted with intention. Brewed with care."
- Subheadline: "Single-origin, small-batch coffee — roasted in-house every morning in Portland's Pearl District"
- Two CTAs side-by-side:
  - "View Our Menu" (outline cream border, cream text)
  - "Order for Pickup" (solid #92400E amber-800, cream text)
- Below CTAs: three micro-stats — "Est. 2018 · 4 Locations · 12 Origin Partners"
- Height: 90vh on desktop, 70vh on mobile
- Content left-aligned with max-width 600px

3. FEATURED DRINKS CAROUSEL
- Section headline: "What's Brewing"
- Subtitle: "Seasonal favorites and everyday essentials"
- 4 drink cards in a horizontal scroll row:
  - "Lavender Oat Latte" — $6.50 — "House-pulled espresso, organic oat milk, and Pacific Northwest lavender syrup" — photo of purple-tinted latte with latte art
  - "Cold Brew Flight" — $9.00 — "Three 4oz pours: Ethiopian Yirgacheffe, Colombian Huila, and Guatemalan Antigua — taste the origins" — photo of three small glasses on a wooden board
  - "Matcha Rose Latte" — $7.00 — "Ceremonial-grade Uji matcha, steamed milk, and house-made rose syrup" — photo of vibrant green latte with rose petal garnish
  - "Classic Drip — Roaster's Pick" — $3.50 — "Today's single-origin: Kenya Nyeri AA — notes of blackcurrant, grapefruit, and brown sugar" — photo of black coffee in a ceramic mug
- Each card: 280px wide, rounded image on top (aspect 4:5), title, price, description below
- Card background: white, 12px border-radius, subtle shadow on hover
- "See Full Menu →" link below the carousel

4. ORIGIN STORY SECTION
- Split layout: image left (50%), content right (50%)
- Image: coffee beans being sorted on a wooden table with natural light, warm tones
- Small label above headline: "OUR STORY" in spaced uppercase (#92400E)
- Headline: "From seed to cup, we know every hand that touches your coffee"
- Body text: "Ember & Bloom was born in a 200-square-foot garage in 2018, when our founder Maya Chen started roasting beans she'd sourced directly from a women's cooperative in Huila, Colombia. Today, we partner with 12 farming communities across Ethiopia, Colombia, Guatemala, and Indonesia — paying 40% above fair-trade prices."
- Second paragraph: "Every batch is roasted in small 15-kilo lots at our Pearl District roastery, profiled to bring out the unique character of each origin. No dark-roast shortcuts. No commodity blends. Just honest, traceable coffee."
- CTA: "Visit Our Roastery →" text link with arrow
- Background: warm cream (#FFFBEB) section
- On mobile: image stacks above text, full-width

5. MENU HIGHLIGHTS GRID
- Section headline: "The Menu"
- Subtitle: "More than just coffee — though the coffee is the reason you'll come back"
- 3-column grid of menu categories:
  - ESPRESSO DRINKS (coffee cup icon)
    - Espresso — $3.00
    - Cortado — $4.50
    - Flat White — $5.50
    - Cappuccino — $5.50
    - Latte — $6.00
    - Mocha — $6.50
  - BREWED & COLD (water drop icon)
    - Drip Coffee — $3.50
    - Pour Over — $5.00
    - Cold Brew — $5.50
    - Cold Brew Flight — $9.00
    - Iced Americano — $4.50
    - Nitro Cold Brew — $6.00
  - FOOD & PASTRIES (croissant icon)
    - Almond Croissant — $4.50
    - Avocado Toast — $9.00
    - Açaí Bowl — $11.00
    - Banana Bread (GF) — $4.00
    - Breakfast Burrito — $10.00
    - Seasonal Scone — $3.50
- Each column: white card, 16px padding, 12px border-radius, category icon + title at top
- Dietary indicators: (V) Vegan, (GF) Gluten-Free tags where applicable
- "Download Full Menu (PDF)" link at the bottom
- Mobile: cards stack vertically, full-width

6. SOCIAL PROOF STRIP
- Warm brown background (#3C1A0B) with cream text
- Centered layout with quotes
- "Portland's best-kept coffee secret" — Portland Monthly
- 5-star rating with "4.9 on Google · 340+ reviews"
- Logos row: Portland Monthly, Eater Portland, Willamette Week, Google Reviews (cream/muted logos)
- Compact section height — roughly 200px

7. LOCATIONS SECTION
- Section headline: "Find Us"
- Subtitle: "Four spots across Portland — all roasting in-house daily"
- 4 location cards in a row:
  - Pearl District (Flagship & Roastery) — "1028 NW Glisan St" — Mon-Fri 6:30am-6pm, Sat-Sun 7am-5pm — "Roastery tours Saturdays at 10am"
  - Division Street — "3847 SE Division St" — Mon-Fri 7am-5pm, Sat-Sun 7:30am-4pm
  - Alberta Arts — "2215 NE Alberta St" — Mon-Fri 7am-4pm, Sat-Sun 8am-3pm
  - Sellwood — "7614 SE 13th Ave" — Mon-Fri 7am-3pm, Sat-Sun 8am-2pm
- Each card: small map thumbnail image at top, address, hours, special notes
- "Get Directions" link on each card (opens Google Maps)
- Cards: white, 12px border-radius, thin border (#E5E0D8)
- Mobile: horizontal scroll or vertical stack

8. ONLINE SHOP PREVIEW
- Background: #FFFBEB cream
- Section headline: "Brew at Home"
- Subtitle: "Our freshly roasted beans — delivered to your door within 48 hours of roasting"
- 3 product cards:
  - "Ethiopia Yirgacheffe" — 12oz bag — $19.00 — Tasting notes: blueberry, jasmine, honey — Light Roast badge
  - "Colombia Huila" — 12oz bag — $17.00 — Tasting notes: caramel, red apple, cocoa — Medium Roast badge
  - "House Blend — Ember" — 12oz bag — $15.00 — Tasting notes: chocolate, hazelnut, brown sugar — Medium-Dark Roast badge
- Each card: product photo (white bag with kraft paper label), name, origin, price, tasting notes, roast level badge
- "Add to Cart" button on each card (#92400E amber-800)
- "Shop All Coffee →" link below
- Mobile: cards scroll horizontally

9. NEWSLETTER & LOYALTY SECTION
- Split layout: newsletter left (60%), loyalty right (40%)
- Newsletter side:
  - Headline: "Stay in the Loop"
  - Body: "Weekly brew tips, new origin drops, and 10% off your first online order"
  - Email input + "Subscribe" button (#92400E)
  - Small text: "No spam. Just coffee. Unsubscribe anytime."
- Loyalty side:
  - Headline: "Ember Rewards"
  - Body: "Earn 1 point per dollar. Hit 50 points, get a free drink. It's that simple."
  - "Join Rewards →" text link
  - Small illustration of a loyalty card or stamp icon
- Divider between sides: thin vertical line on desktop
- Mobile: stacks vertically, newsletter first

10. FOOTER
- Background: warm dark brown (#1C0F06) with cream text (#FFFBEB)
- 4 columns:
  - Visit: Pearl District, Division, Alberta Arts, Sellwood (each linked)
  - Coffee: Menu, Shop Online, Subscriptions, Wholesale
  - Company: Our Story, Roastery, Careers, Press
  - Connect: Instagram, TikTok, Contact Us, Gift Cards
- Bottom bar: "© 2026 Ember & Bloom Coffee Co. All rights reserved." + Privacy · Terms
- Social icons row: Instagram, TikTok, Facebook (cream icons)

Design: Warm, artisanal, coffee-forward. Primary: #92400E (warm amber-800 for CTAs and accents), secondary: #3C1A0B (dark roast brown for contrast sections), background alternating between white (#FFFFFF) and warm cream (#FFFBEB). Typography: Playfair Display for headlines (elegant serif), Inter for body text (clean and readable). Cards with 12px border-radius, subtle warm shadows. Photography-driven with rich, warm color grading. Generous whitespace. Coffee-stain watermark textures as subtle background accents where appropriate.

Responsive: Mobile-first. Hero image becomes portrait crop with centered text overlay. Drink cards and product cards become horizontal swipe carousels. Menu grid stacks to single column. Location cards stack vertically. Newsletter and loyalty sections stack. All touch targets minimum 44px. Navigation collapses to hamburger with slide-out drawer. Order Ahead CTA remains visible in mobile nav.