Smash'd - Comic Book Burger Shop
A modern, vibrant burger restaurant website built with React, TypeScript, and Tailwind CSS. Features bold comic-book inspired design with dark mode support and smooth animations.
Live demo: https://smash-d.vercel.app/
Features
- Comic Book Design: Bold, colorful UI with a retro comic aesthetic
- Dark Mode Support: Automatic dark/light theme switching using CSS variables with smooth View Transition API animations
- Responsive Layout: Mobile-first design that adapts to all screen sizes
- Smooth Animations: Subtle transitions and hover effects for enhanced UX, including staggered animations for items
- Menu System: Interactive burger menu with categories and filtering
- Featured Products: Showcase hero section for promotional items
- Contact Section: Integrated contact form, location map, and social sharing buttons
- Image Lightbox: Click-to-expand modal for viewing product images in full size with animations
- Product Tags & Badges: Visual tags for special items (Best Seller, Spicy AF, Premium) with unique styling
- Mobile Navigation: Responsive hamburger menu for seamless mobile experience
- Smooth Scroll Navigation: Automatic smooth scrolling between page sections via anchor links
- Accessibility: Semantic HTML and keyboard navigation support
Quick Start
Prerequisites
- Node.js 18+
- npm or yarn
Installation
git clone <repository-url>
cd smash'd
npm install
Development
npm run dev
Starts the Vite dev server at http://localhost:5173
Build
npm run build
Generates optimized production build in dist/
Preview
npm run preview