{"id":51246002,"url":"https://github.com/zidvsd/smash-d","last_synced_at":"2026-06-29T04:32:10.938Z","repository":{"id":353336569,"uuid":"1218770710","full_name":"zidvsd/smash-d","owner":"zidvsd","description":"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.","archived":false,"fork":false,"pushed_at":"2026-04-23T12:55:10.000Z","size":4252,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-23T14:19:11.935Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zidvsd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-23T07:45:41.000Z","updated_at":"2026-04-23T12:55:14.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/zidvsd/smash-d","commit_stats":null,"previous_names":["zidvsd/smash-d"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/zidvsd/smash-d","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zidvsd%2Fsmash-d","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zidvsd%2Fsmash-d/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zidvsd%2Fsmash-d/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zidvsd%2Fsmash-d/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zidvsd","download_url":"https://codeload.github.com/zidvsd/smash-d/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zidvsd%2Fsmash-d/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34913586,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-29T02:00:05.398Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-29T04:32:09.558Z","updated_at":"2026-06-29T04:32:10.932Z","avatar_url":"https://github.com/zidvsd.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Smash'd - Comic Book Burger Shop\n\nA 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.\n\n**Live demo:** https://smash-d.vercel.app/\n\n## Features\n\n- **Comic Book Design**: Bold, colorful UI with a retro comic aesthetic\n- **Dark Mode Support**: Automatic dark/light theme switching using CSS variables with smooth View Transition API animations\n- **Responsive Layout**: Mobile-first design that adapts to all screen sizes\n- **Smooth Animations**: Subtle transitions and hover effects for enhanced UX, including staggered animations for items\n- **Menu System**: Interactive burger menu with categories and filtering\n- **Featured Products**: Showcase hero section for promotional items\n- **Contact Section**: Integrated contact form, location map, and social sharing buttons\n- **Image Lightbox**: Click-to-expand modal for viewing product images in full size with animations\n- **Product Tags \u0026 Badges**: Visual tags for special items (Best Seller, Spicy AF, Premium) with unique styling\n- **Mobile Navigation**: Responsive hamburger menu for seamless mobile experience\n- **Smooth Scroll Navigation**: Automatic smooth scrolling between page sections via anchor links\n- **Accessibility**: Semantic HTML and keyboard navigation support\n\n## Quick Start\n\n### Prerequisites\n\n- Node.js 18+\n- npm or yarn\n\n### Installation\n\n```bash\ngit clone \u003crepository-url\u003e\ncd smash'd\nnpm install\n```\n\n### Development\n\n```bash\nnpm run dev\n```\n\nStarts the Vite dev server at `http://localhost:5173`\n\n### Build\n\n```bash\nnpm run build\n```\n\nGenerates optimized production build in `dist/`\n\n### Preview\n\n```bash\nnpm run preview\n```\n\nServes the production build locally\n\n## Project Structure\n\n```\nsrc/\n├── components/\n│   ├── animations/       # InView, SectionWrapper, StaggerItem/Wrapper\n│   ├── hooks/           # Custom React hooks (useSmoothScroll)\n│   ├── layout/          # Navbar, Footer, MobileMenu\n│   ├── sections/        # Hero, Menu, Bestsellers, Featured, etc\n│   ├── ui/              # Reusable UI components (Button, Avatar, Dialog)\n│   ├── ContactForm.tsx  # Contact form with sharing buttons\n│   ├── ContactMap.tsx   # Location map component\n│   ├── TagBadge.tsx     # Product tag badges\n│   ├── ThemeToggle.tsx  # Dark mode toggle with View Transitions\n│   ├── ViewImage.tsx    # Image modal/lightbox component\n│   └── theme-provider.tsx\n├── data/                # Menu and navigation JSON data\n├── lib/                 # Utility functions\n├── App.tsx              # Main component\n├── main.tsx             # Entry point\n└── index.css            # Global styles with Tailwind\n```\n\n## Key Technologies\n\n- **React 19** - UI framework\n- **TypeScript** - Type safety and developer experience\n- **Tailwind CSS 4** - Utility-first styling with custom theme\n- **Vite** - Lightning-fast build tool\n- **Motion** - Animation library for staggered and smooth animations\n- **Radix UI** - Unstyled, accessible UI primitives (dialogs, modals)\n- **Lucide React** - Icon library\n\n## Development Scripts\n\n| Command             | Description                |\n| ------------------- | -------------------------- |\n| `npm run dev`       | Start development server   |\n| `npm run build`     | Build for production       |\n| `npm run preview`   | Preview production build   |\n| `npm run lint`      | Run ESLint                 |\n| `npm run format`    | Format code with Prettier  |\n| `npm run typecheck` | Type check with TypeScript |\n\n## Styling \u0026 Theme\n\nThe project uses Tailwind CSS with a custom theme defined in `src/index.css`:\n\n- **Primary**: Electric Yellow (#FFD600)\n- **Secondary**: Ketchup Red (#E8272A)\n- **Background**: Warm Cream (light) / Neutral Dark (dark)\n\n### Dark Mode\n\nTheme switching is handled via the `theme-provider.tsx`. The app automatically respects system preferences and includes manual theme toggle support.\n\nCSS variables automatically adapt colors across the entire application:\n\n```css\n--foreground    /* Text color */\n--background    /* Background color */\n--primary       /* Primary accent color */\n--secondary     /* Secondary accent color */\n```\n\n## Performance Optimizations\n\n- **Code Splitting**: Automatic route-based splitting with Vite\n- **CSS Variables**: Reduces duplication and enables fast theme switching\n- **Lazy Loading**: Components load only when needed\n- **Image Optimization**: Using native browser image loading\n- **Memoization**: React components optimized with memo where beneficial\n- **Tree Shaking**: Unused code removed during build\n\n## Contributing\n\nTo contribute:\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Make your changes\n4. Run `npm run format` and `npm run lint` to ensure code quality\n5. Commit your changes (`git commit -m 'Add amazing feature'`)\n6. Push to the branch (`git push origin feature/amazing-feature`)\n7. Open a Pull Request\n\n## Code Quality\n\nThe project maintains high code quality standards:\n\n- ESLint configuration for code consistency\n- Prettier for automatic formatting\n- TypeScript for type safety\n- Tailwind CSS for consistent styling\n\n## License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n## Author\n\nCreated with passion for bold, functional design.\n\n---\n\nFor questions or support, feel free to open an issue in the repository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzidvsd%2Fsmash-d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzidvsd%2Fsmash-d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzidvsd%2Fsmash-d/lists"}