Web Development Project-
Leisure Tea & Coffee
This project is a clean and minimal website for a fictional tea and coffee store, built with React and Vite. It features multi-page navigation using React Router, supports a fully responsive layout for seamless viewing across devices, and is deployed on GitHub Pages for easy access and sharing.
Website Github
React
Html
Javascript
CSS
Role
Desiger and Developer
Duration
3 weeks
Team
1
Home
Built Hero Section, Introduction Block, Gallery, Review, and Footer using a React component-based architecture, enhancing modularity and maintainability.
Implemented smooth button hover effects using CSS to enrich user interaction.
Integrated navigation functionality for seamless page transitions.
Developed an interactive review section with buttons to switch between individual reviews.
About
Applied consistent typography (Oswald) and brand color palette to reinforce brand identity.
Structured content into reusable React components for maintainability and scalability.
Created a custom Story Section with a two-column layout: text on the left and a supporting image on the right.
Built a “What We Serve” section featuring 6 interactive cards arranged in two rows.
Integrated hover effects with smooth zoom animation while maintaining border-radius consistency
Menu
Implemented tabbed navigation (Food / Drinks) using React state management to toggle content dynamically.
Built a modular MenuContent component with conditional rendering for food and drinks sections
Added hover effects and Lightbox feature for image zoom-in with fullscreen display
Disabled background scrolling and dimmed page during Lightbox activation for better UX focus.
Enabled arrow navigation within Lightbox to browse images without closing the overlay.
Location
Created a consistent Hero Section using a reusable React component, maintaining design alignment across all pages
Displayed location details clearly with address and working hours
Integrated an interactive Google Map iframe, centered and styled to match the site’s aesthetics
