BrewHaven Cafe ☕

BrewHaven Cafe is a modern , minimal , elegant web experience created to bring the warmth and authenticity of a cozy coffee shop online.

It reflects the peaceful charm of a handcrafted brew by being simple , using soft tones , immersive storytelling visuals.

🌿 Design Philosophy

A digital café space mixing white space , earthy textures and natural warmth.
Every section feels like a slow morning with good coffee — calm, airy, and handcrafted.

Color Palette:

Primary: Ivory White #FAF8F5
Secondary: Warm Beige #DCC7AA
Accent: Coffee Brown #4B2E05
Highlight: Sage Green #9CA986 or Dusty Cream #F1E3C3
Text: Charcoal Gray #2D2D2D

Soft shadows simulate sun lighting, while textures such as paper and wood grain provide depth naturally .

Page Sections

1️⃣ Hero Section
A fullscreen welcoming scene with latte & croissant imagery and soft overlay text .

"Sip. Relax. Repeat."
"A cozy corner where every brew tells a story."
Includes View Menu and Book a Table buttons with subtle parallax and fade effects.

2️⃣ About Section
Two-column layout featuring café ambience imagery beside text :

"Born out of love for coffee and community ."
A signature-style font adds personality and warmth .

3️⃣ Menu Preview Section
Grid display of 6–8 featured drinks and pastries.
Cards have gentle hover shadows and price labels.
Filter buttons allow sorting by Coffee, Tea, Bakery.

4️⃣ Gallery Section
Masonry grid of sunlit café photos with smooth zoom or fade animations.
Elegant serif typography caption: “Our Space” .

5️⃣ Packages / Specials (Optional)
Showcase memberships, seasonal offers, or subscription plans.
Clean cards with gold or green highlights.

6️⃣ Contact & Location Section
Simple contact form and café map.
Includes Open Hours and a warm CTA:

“Come Say Hi ☕”

7️⃣ Footer
Minimal centered layout:

“BrewHaven Café — Crafted with love, served with warmth.”
With subtle leaf or coffee bean icons.

✨ Design & Animation Guidelines

Built with Next.js, React, TailwindCSS, and Framer Motion
Floating transparent navbar → solid on scroll
Steam-like aroma animation in hero
Coffee cup preloader
Scroll progress bar in warm coffee tone
Typography:
- Headings → Playfair Display / Cormorant Garamond
- Body → Inter / Lato / DM Sans

🎯 Vibe Summary

“Warm, minimal, handcrafted — a café aesthetic that feels calm and inviting.
Designed to make you smell the coffee before the page even loads.”

🛠️ Tech Stack

Next.js 16 (App Router)
React
Tailwind CSS
Framer Motion
TypeScript