DEMO WEBSITE FOR USAMA CHAUDHRY
A modern, responsive bakery website built with React and Tailwind CSS. Features a beautiful amber glow design inspired by traditional Pakistani bakeries.
- Responsive design that works on all devices
- Beautiful amber gradient backgrounds
- Animated hero section with floating elements
- Product showcase with hover effects
- Testimonials section
- Contact form with WhatsApp integration
- Floating WhatsApp button
- Smooth scroll navigation
- Modern UI/UX
- React 19 - Frontend framework
- Vite - Build tool
- Tailwind CSS - Styling
- ESLint - Code linting
- Node.js 18+ installed
- npm or yarn
# Clone the repository
git clone https://github.com/YOUR_USERNAME/usama-bakery-website.git
# Navigate to project directory
cd usama-bakery-website
# Install dependencies
npm install
# Start development server
npm run devnpm run buildnpm run preview- Push this repository to GitHub
- Go to Vercel
- Import your GitHub repository
- Vercel will auto-detect Vite and configure the build settings
- Click "Deploy"
That's it! Your site will be live in seconds.
bakery-website/
├── public/
│ └── favicon.svg
├── src/
│ ├── components/
│ │ ├── Navbar.jsx
│ │ ├── Hero.jsx
│ │ ├── Marquee.jsx
│ │ ├── Products.jsx
│ │ ├── About.jsx
│ │ ├── Features.jsx
│ │ ├── Testimonials.jsx
│ │ ├── Contact.jsx
│ │ ├── Footer.jsx
│ │ └── WhatsAppButton.jsx
│ ├── App.jsx
│ ├── main.jsx
│ └── index.css
├── index.html
├── tailwind.config.js
├── postcss.config.js
├── vite.config.js
└── package.json
- Colors: Edit
tailwind.config.jsto change the color scheme - Content: Update the component files to change text, images, and products
- WhatsApp: Update the phone number in
Contact.jsxandWhatsAppButton.jsx
MIT License - Feel free to use this for your projects!
Built with love for Usama Chaudhry