A cutting-edge, fully responsive coffee shop website that blends quantum physics with coffee culture. Experience coffee beyond reality with our futuristic design, smooth animations, and exceptional user experience.
Check out the live demo: Quantum Coffee Website
- Custom Color Palette: Quantum-themed colors (orange, pink, purple, blue, teal)
- Consistent Typography: Inter for body text, Space Grotesk for headings
- Gradient Text Effects: Stunning gradient animations throughout
- Glassmorphism Effects: Modern backdrop blur and transparency
- Custom Animations: Float, gradient, pulse effects
- Lazy Loading: Components and images load on-demand
- Image Optimization: WebP and AVIF formats for faster loading
- Code Splitting: Automatic chunking for optimal performance
- Memoization: React.memo and useCallback for efficient rendering
- Preloading: Critical resources preloaded for instant display
- Keyboard Navigation: Full keyboard support with visible focus states
- ARIA Labels: Comprehensive screen reader support
- Semantic HTML: Proper heading hierarchy and landmarks
- Alt Text: Descriptive alternative text for all images
- Focus Management: Logical tab order and focus trapping in modals
- Motion Preferences: Respects
prefers-reduced-motion - High Contrast Support: Adapts to high contrast preferences
- Mobile-First Approach: Optimized for all screen sizes
- Breakpoint System: sm, md, lg, xl, 2xl breakpoints
- Touch Optimizations: Proper touch targets and gestures
- Flexible Layouts: Grid and flexbox for adaptive layouts
- Responsive Typography: Fluid text scaling
- Error Boundaries: Graceful error handling with custom UI
- Loading States: Beautiful skeleton screens and spinners
- Scroll to Top: Smooth scroll button with animation
- Modal System: Accessible modal with focus trap and escape key
- Smooth Scrolling: Native smooth scroll with polyfill
- Hero Carousel: Auto-rotating background images with controls
- Open Graph Tags: Rich social media previews
- Twitter Cards: Optimized Twitter sharing
- Meta Descriptions: Search engine optimized
- Semantic Structure: Proper document outline
- Mobile Viewport: Correct mobile rendering
- Framework: React 18.3
- Styling: Tailwind CSS 3.4
- Animations: Framer Motion 11.5
- Icons: Lucide React
- Build Tool: Vite 5.4
- Linting: ESLint 9.9
# Clone the repository
git clone https://github.com/StarKnightt/Coffee-Website.git
# Navigate to project directory
cd Coffee-Website
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run previewCoffee-Website/
├── public/
│ └── images/ # Optimized images (WebP/AVIF)
├── src/
│ ├── components/
│ │ ├── About.jsx # Company story section
│ │ ├── ErrorBoundary.jsx # Error handling wrapper
│ │ ├── Experience.jsx # Quantum experience features
│ │ ├── Footer.jsx # Site footer with links
│ │ ├── Header.jsx # Navigation header
│ │ ├── Hero.jsx # Hero section with carousel
│ │ ├── LoadingSpinner.jsx # Loading state component
│ │ ├── Menu.jsx # Product menu grid
│ │ ├── Modal.jsx # Product detail modal
│ │ ├── ScrollToTop.jsx # Scroll to top button
│ │ └── Testimonials.jsx # Customer reviews
│ ├── App.jsx # Main app component
│ ├── App.css # Custom styles
│ ├── index.css # Global styles & Tailwind
│ └── main.jsx # App entry point
├── index.html # HTML template with meta tags
├── tailwind.config.js # Tailwind configuration
├── vite.config.js # Vite configuration
└── package.json # Dependencies
quantum: {
blue: '#3B82F6',
purple: '#8B5CF6',
pink: '#EC4899',
orange: '#F97316',
teal: '#14B8A6',
}- Headings: Space Grotesk (400-700)
- Body: Inter (300-800)
- Mono: JetBrains Mono
gradient-x: Horizontal gradient animationgradient-y: Vertical gradient animationgradient-xy: Diagonal gradient animationfloat: Floating effectpulse-slow: Slow pulse effectglow: Glowing shadow effect
- ✅ Unified Quantum Coffee theme throughout
- ✅ Removed conflicting content
- ✅ Consistent quantum/futuristic messaging
- ✅ Custom design system with brand colors
- ✅ Gradient text effects and animations
- ✅ Glassmorphism and modern UI patterns
- ✅ Professional typography hierarchy
- ✅ Smooth page transitions
- ✅ Interactive hover effects
- ✅ Loading states and error handling
- ✅ Scroll to top functionality
- ✅ Enhanced modal interactions
- ✅ Full keyboard navigation
- ✅ Screen reader support (ARIA)
- ✅ Focus visible states
- ✅ Semantic HTML structure
- ✅ Motion preference respect
- ✅ Lazy loading components
- ✅ Image optimization
- ✅ React.memo optimization
- ✅ Code splitting
- ✅ Comprehensive meta tags
- ✅ Open Graph tags
- ✅ Twitter Card tags
- ✅ Semantic HTML
- ✅ Responsive design system
- ✅ Touch-optimized interactions
- ✅ Mobile navigation drawer
- ✅ Flexible layouts
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
This project is deployed on Vercel. To deploy your own version:
- Fork this repository
- Connect your Vercel account
- Import the project
- Deploy with one click
This project is open source and available under the MIT License.
Created by StarKnight
- GitHub: @StarKnightt
- Twitter: @Star_Knight12
- CodePen: @StarKnightt
- Buy Me a Coffee: prasen
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
Give a ⭐️ if you like this project!
Note: This project showcases modern web development practices including responsive design, accessibility features, performance optimization, and advanced React patterns.