Mkhulu's On Main - Restaurant Website

A modern, responsive restaurant website built with React, TypeScript, and Tailwind CSS for Mkhulu's On Main restaurant in Etwatwa Daveyton, Benoni.

Features

• Responsive Design: Fully responsive across mobile, tablet, and desktop devices
• Accessibility: WCAG 2.1 compliant with ARIA labels, keyboard navigation, and screen reader support
• Performance: Optimized images with lazy loading, code splitting, and efficient rendering
• SEO: Meta tags, Open Graph, Twitter Cards, structured data (JSON-LD), and semantic HTML
• Modern UI: Smooth animations, scroll-triggered effects, and polished transitions
• Form Validation: Client-side validation with real-time error feedback
• Interactive Components: Auto-advancing carousels, tabbed menu, mobile drawer navigation

Tech Stack

• React 19 - UI library
• TypeScript - Type safety
• Tailwind CSS 3 - Utility-first styling
• React Icons - Icon library
• Custom Hooks - Intersection Observer, scroll tracking, autoplay

Project Structure

src/
├── components/
│   ├── common/
│   │   └── AnimatedSection.tsx    # Reusable scroll animation wrapper
│   ├── Navbar.tsx                 # Navigation with mobile drawer
│   ├── Hero.tsx                   # Hero slider with auto-advance
│   ├── Menu.tsx                   # Tabbed menu display
│   ├── About.tsx                  # About section with features
│   ├── Testimonials.tsx           # Customer reviews grid
│   ├── Events.tsx                 # Events carousel
│   ├── Contacts.tsx               # Contact form with validation
│   └── Footer.tsx                 # Footer with social links
├── data/
│   └── menuData.ts                # Menu data with types
├── hooks/
│   └── useInView.ts               # Custom hooks for animations
├── App.tsx                        # Main app component
├── App.css                        # App-level styles
├── index.tsx                      # Entry point
└── index.css                      # Global styles & CSS variables

Getting Started

Prerequisites

• Node.js 16+
• npm or yarn

Installation

npm install

Development

npm start

Runs the app in development mode at http://localhost:3000.

Build

npm run build

Creates a production build in the build folder with optimized assets.

Test

npm test

Runs tests in interactive watch mode.

Key Improvements from Original

Design

• Modern color system with CSS custom properties
• Google Fonts (Playfair Display + Inter)
• Consistent spacing and typography scale
• Enhanced shadows and hover effects
• Polished mobile menu with overlay

Accessibility

• Skip-to-content link
• ARIA labels and roles throughout
• Keyboard navigation support
• Focus-visible styles
• Screen reader announcements
• Reduced motion support

Performance

• Lazy loading on all images
• Passive scroll listeners
• Intersection Observer for animations
• Optimized re-renders with useCallback
• Code splitting ready

SEO

• Structured data (JSON-LD) for local business
• Open Graph and Twitter meta tags
• Semantic HTML5 elements
• Proper heading hierarchy
• Descriptive alt texts

Code Quality

• TypeScript interfaces for all data
• Custom hooks for reusable logic
• Separated data from components
• Consistent component architecture
• Clean import paths

Customization

Colors

Edit the color palette in tailwind.config.js:

colors: {
  primary: { /* your colors */ },
  accent: { /* your colors */ },
}

Menu Items

Edit src/data/menuData.ts to update menu categories and items.

Animations

Modify keyframes and animations in tailwind.config.js and src/index.css.

Deployment

The app can be deployed to any static hosting service:

npm run build

Upload the build folder to your hosting provider (Netlify, Vercel, etc.).

License

This project is proprietary and belongs to Mkhulu's On Main.

Credits

Designed and developed by Bongani Masanabo