☕ Brewed Benedick

A modern, premium, and cozy coffee shop website built for Brewed Benedick, a handcrafted coffee brand based in the Philippines. The website features a warm aesthetic, smooth animations, and a seamless user experience designed to reflect the quality of artisanal coffee.

✨ Features

• Premium Hero Animation: Features a high-quality, auto-looping WebP animation of an Iced Coffee Latte with optimized loading and a cinematic fade-in effect.
• Modern UI/UX: Clean, minimal, and cozy design utilizing a custom color palette (Deep Coffee Brown, Warm Latte, Creamy White).
• Interactive Menu: A dynamic, filterable menu section showcasing Coffee Classics, Signature Drinks, Pastries, and Light Meals.
• Smooth Animations: Page transitions, scroll reveals, and micro-interactions powered by Framer Motion.
• Fully Responsive: Mobile-first design ensuring a flawless experience across desktop, tablet, and mobile devices.
• Optimized Performance: Uses modern web standards, lazy loading techniques, and efficient asset handling for fast load times.

🛠️ Tech Stack

• Frontend Framework: React 19
• Build Tool: Vite 6
• Styling: Tailwind CSS v4
• Animations: Framer Motion
• Routing: React Router v7
• Icons: Lucide React

📂 Project Structure

/
├── public/
│   └── ice-coffee-latte.webp   # Hero section animation asset
├── src/
│   ├── components/
│   │   └── layout/           # Navbar, Footer, and main Layout wrapper
│   ├── lib/
│   │   └── utils.ts          # Utility functions (e.g., Tailwind class merging)
│   ├── pages/
│   │   ├── Home.tsx          # Landing page with animated hero
│   │   ├── Menu.tsx          # Filterable product menu
│   │   ├── About.tsx         # Brand story and vision
│   │   └── Contact.tsx       # Location, hours, and contact form
│   ├── App.tsx               # Main application router
│   ├── index.css             # Global styles and Tailwind theme variables
│   └── main.tsx              # React entry point
├── package.json              # Project dependencies and scripts
├── tailwind.config.ts        # Tailwind configuration
└── vite.config.ts            # Vite configuration

🚀 Getting Started

Prerequisites

Ensure you have Node.js (v18 or higher) installed on your machine.

Installation

1. Clone the repository or download the source code.
2. Navigate to the project directory:

   cd brewed-benedick

3. Install the dependencies:

   npm install

Running the Development Server

Start the local development server:

npm run dev

The application will be available at http://localhost:3000 (or the port specified in your terminal).

Building for Production

To create a production-ready build:

npm run build

The compiled assets will be generated in the dist/ directory, ready to be deployed to any static hosting service (Vercel, Netlify, Firebase Hosting, etc.).

🎨 Customization

Changing the Hero Animation

To update the hero animation, simply replace the ice-coffee-latte.webp file inside the public/ directory with your own WebP file, ensuring it keeps the exact same filename, or update the path in src/pages/Home.tsx.

Updating Brand Colors

The brand colors are defined as CSS variables in src/index.css. You can easily modify the hex codes under the @theme directive to match a new brand identity.

📝 License

This project was created for John Benedick V. Borgonia and the Brewed Benedick brand. All rights reserved.