Crust Never Sleeps - Artisan Bakery Website

A premium, boutique website for Crust Never Sleeps, a beloved weekend-only artisan bakery in West Asheville, NC.

Design System

Color Palette

• Moonlit Midnight (#0F172A) - Deep, dramatic base for hero sections and dark backgrounds
• Golden Crust (#F9B248) - Primary highlight color for accents and icons
• Cherry Jam (#E24A68) - Main CTA color for buttons and highlights
• Cream Frosting (#FFF7E9) - Light background for high-readability content sections
• Sage Smoke (#8FAF9F) - Supporting accent for borders, tags, and subtle details

Typography

• Headers: Playfair Display SC - Elegant small caps serif for titles and headings
• Body: Source Sans 3 - Clean, modern, warm sans-serif for readability
• Accent: DM Serif Display - Used sparingly for special callouts and quotes

Brand Voice

Warm, witty, conversational, slightly rebellious, deeply neighborhood-rooted. Like your neighbors who happen to make impossibly good croissants.

Features

Pages

• Home - Hero section, weekend highlights, features, testimonial showcase, Instagram preview
• Menu - Full menu organized by category (Pastries, Breads, Sweet Treats, Savory Bites, Seasonal)
• About - Story of Dawn & Jonathan, values, and brand personality
• Reviews - Customer testimonials with 5-star rating display
• Visit - Hours, location with Google Maps embed, contact info, pro tips

Components

• Sticky navigation header with mobile menu
• Open/Closed status badge with live time checking
• Feature cards with icons
• Item cards with hover effects
• Testimonial cards
• Primary and secondary CTA buttons
• Footer with contact information

Technical Stack

• React 18 with TypeScript
• React Router for navigation
• Tailwind CSS for styling
• Vite for build tooling
• Lucide React for icons

Real Data Integration

All real business data is centralized in /src/data/businessData.ts including:

• Business name and address
• Phone and contact information
• Hours of operation
• Photos from Google Maps API
• Customer reviews
• Location coordinates
• Social media links

Getting Started

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Design Principles

1. High Contrast - Bold use of dark (Midnight) and light (Cream) backgrounds
2. Editorial Spacing - Generous whitespace and clear visual hierarchy
3. Premium Feel - Meticulous attention to detail in animations and interactions
4. Weekend-Only Brand - Emphasizes exclusivity and special-occasion positioning
5. Mobile-First - Fully responsive design that works beautifully on all devices

Animations & Interactions

• Fade-up on scroll for sections
• Soft hover lift effects on all cards
• Smooth scroll behavior
• Header transforms on scroll (reduces height, adds backdrop)
• Button hover effects with shadow and slight lift
• Instagram grid images zoom on hover

Hours Logic

The "Open Now" badge dynamically checks current time:

• Saturday: 8:00 AM - 2:00 PM
• Sunday: 9:00 AM - 2:00 PM
• Closed Monday - Friday

Notes

• No database required - all content is static
• Photos are linked from Google Maps API
• Instagram integration via external links
• Google Maps embedded via iframe
• All data can be easily updated in /src/data/businessData.ts