https://github.com/zidvsd/smash-d
A high-fidelity, frontend-only landing page for a burger brand. Built using React, Tailwind CSS, and Shadcn UI with a focus on high-contrast branding and custom responsive navigation.
https://github.com/zidvsd/smash-d
Last synced: 26 days ago
JSON representation
A high-fidelity, frontend-only landing page for a burger brand. Built using React, Tailwind CSS, and Shadcn UI with a focus on high-contrast branding and custom responsive navigation.
- Host: GitHub
- URL: https://github.com/zidvsd/smash-d
- Owner: zidvsd
- Created: 2026-04-23T07:45:41.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-04-23T12:55:10.000Z (3 months ago)
- Last Synced: 2026-04-23T14:19:11.935Z (3 months ago)
- Language: TypeScript
- Size: 4.06 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```bash
git clone
cd smash'd
npm install
```
### Development
```bash
npm run dev
```
Starts the Vite dev server at `http://localhost:5173`
### Build
```bash
npm run build
```
Generates optimized production build in `dist/`
### Preview
```bash
npm run preview
```
Serves the production build locally
## Project Structure
```
src/
├── components/
│ ├── animations/ # InView, SectionWrapper, StaggerItem/Wrapper
│ ├── hooks/ # Custom React hooks (useSmoothScroll)
│ ├── layout/ # Navbar, Footer, MobileMenu
│ ├── sections/ # Hero, Menu, Bestsellers, Featured, etc
│ ├── ui/ # Reusable UI components (Button, Avatar, Dialog)
│ ├── ContactForm.tsx # Contact form with sharing buttons
│ ├── ContactMap.tsx # Location map component
│ ├── TagBadge.tsx # Product tag badges
│ ├── ThemeToggle.tsx # Dark mode toggle with View Transitions
│ ├── ViewImage.tsx # Image modal/lightbox component
│ └── theme-provider.tsx
├── data/ # Menu and navigation JSON data
├── lib/ # Utility functions
├── App.tsx # Main component
├── main.tsx # Entry point
└── index.css # Global styles with Tailwind
```
## Key Technologies
- **React 19** - UI framework
- **TypeScript** - Type safety and developer experience
- **Tailwind CSS 4** - Utility-first styling with custom theme
- **Vite** - Lightning-fast build tool
- **Motion** - Animation library for staggered and smooth animations
- **Radix UI** - Unstyled, accessible UI primitives (dialogs, modals)
- **Lucide React** - Icon library
## Development Scripts
| Command | Description |
| ------------------- | -------------------------- |
| `npm run dev` | Start development server |
| `npm run build` | Build for production |
| `npm run preview` | Preview production build |
| `npm run lint` | Run ESLint |
| `npm run format` | Format code with Prettier |
| `npm run typecheck` | Type check with TypeScript |
## Styling & Theme
The project uses Tailwind CSS with a custom theme defined in `src/index.css`:
- **Primary**: Electric Yellow (#FFD600)
- **Secondary**: Ketchup Red (#E8272A)
- **Background**: Warm Cream (light) / Neutral Dark (dark)
### Dark Mode
Theme switching is handled via the `theme-provider.tsx`. The app automatically respects system preferences and includes manual theme toggle support.
CSS variables automatically adapt colors across the entire application:
```css
--foreground /* Text color */
--background /* Background color */
--primary /* Primary accent color */
--secondary /* Secondary accent color */
```
## Performance Optimizations
- **Code Splitting**: Automatic route-based splitting with Vite
- **CSS Variables**: Reduces duplication and enables fast theme switching
- **Lazy Loading**: Components load only when needed
- **Image Optimization**: Using native browser image loading
- **Memoization**: React components optimized with memo where beneficial
- **Tree Shaking**: Unused code removed during build
## Contributing
To contribute:
1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Make your changes
4. Run `npm run format` and `npm run lint` to ensure code quality
5. Commit your changes (`git commit -m 'Add amazing feature'`)
6. Push to the branch (`git push origin feature/amazing-feature`)
7. Open a Pull Request
## Code Quality
The project maintains high code quality standards:
- ESLint configuration for code consistency
- Prettier for automatic formatting
- TypeScript for type safety
- Tailwind CSS for consistent styling
## License
This project is licensed under the MIT License - see the LICENSE file for details.
## Author
Created with passion for bold, functional design.
---
For questions or support, feel free to open an issue in the repository.