🌿 FloralDemo: Plant Shop -
Product Listing Page A pixel-perfect, fully responsive implementation of an e-commerce product listing page, built using React and Tailwind CSS. This project was developed with a meticulous focus on accessibility, component reusability, and delivering a high degree of fidelity to the provided Figma design.
Live Demo
🔗 View Live Site - floral-demo.vercel.app
Technical Stack
React.js – Component-based UI
Tailwind CSS – Utility-first styling
JavaScript (ES6+)
Vite – Fast development environment
Git/Github
📦 Setup Instructions
Prerequisites
Node.js (v16 or above)
npm or yarn
Installation
git clone https://github.com/Arghyadeep09/FloralDemo.git
cd FloralDemo
npm install
Start Development Server
npm run dev
Production Build
npm run build
📂 Project Structure
Here's the project structure based on the image you provided:
.
├── .git
├── node_modules
├── public
├── src
│ ├── assets
│ ├── components
│ │ ├── layout
│ │ │ ├── Footer.jsx
│ │ │ └── Navbar.jsx
│ │ ├── sections
│ │ │ ├── HeroSection.jsx
│ │ │ └── TopSellingSection.jsx
│ │ └── ui
│ │ ├── Button.jsx
│ │ ├── CarouselCard.jsx
│ │ ├── CartButton.jsx
│ │ ├── PlantCard.jsx
│ │ ├── PlantCarousel.jsx
│ │ ├── ReviewCard.jsx
│ │ └── SectionTitle.jsx
│ ├── utils
│ │ ├── demoProductData.js
│ │ └── demoReviewData.js
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── .gitignore
├── eslint.config.js
├── index.html
├── package-lock.json
└── package.json
🌱 Features
Pixel-aligned layout based on the provided design
Fully responsive across breakpoints (mobile → large screens)
Reusable components for cleaner structure
Smooth hover and interaction effects
Tailwind-based styling for fast customizations
Simple and organized file structure
🌍 Browser Compatibility
Tested on:
Chrome
Firefox
Safari
Edge
🎨 Design Reference
Based on the Figma design provided for the assignment.
📎 Development Notes
--All components written manually with clean, readable code
--modular file structure for better maintainability
--Tested layout across devices for visual consistency
--Used Tailwind utility classes directly instead of external CSS files, except where necessary
📸 Screenshots
Desktop view
Mobile view
Tab view
🧑💻 Submitted By
Arghyadeep Hari
[email protected]
