# Planto - Plant Website A modern, responsive plant e-commerce website built with React and Vite, based on a Figma design. ## 🎨 Design Source This website is built based on the Figma design: [Plant Website Design](https://www.figma.com/design/FZweWqeOd5mpGOKr2Waot4/Plant-website?node-id=2-19&t=omqdSFlv2ZSgRvJC-4) ## ✨ Features - **Responsive Design**: Fully responsive layout that works on all devices - **Modern UI**: Clean, modern interface with glassmorphism effects - **Interactive Components**: Hover effects, smooth transitions, and animations - **Product Showcase**: Display of trendy plants and top-selling products - **Customer Reviews**: Testimonials with star ratings - **Newsletter Subscription**: Email subscription functionality - **Social Media Integration**: Links to social media platforms ## 🏗️ Project Structure ``` src/ ├── components/ │ ├── Header.jsx # Navigation header │ ├── Hero.jsx # Hero section with main banner │ ├── TrendyPlants.jsx # Trending plants section │ ├── TopSelling.jsx # Top selling products │ ├── CustomerReviews.jsx # Customer testimonials │ ├── O2Collection.jsx # O2 plants collection │ └── Footer.jsx # Footer with links and info ├── App.jsx # Main application component ├── App.css # Main stylesheet └── index.css # Global styles public/ └── images/ # All website images ``` ## 🚀 Getting Started ### Prerequisites - Node.js (version 14 or higher) - npm or yarn ### Installation 1. Clone the repository or navigate to the project directory 2. Install dependencies: ```bash npm install ``` 3. Start the development server: ```bash npm run dev ``` 4. Open your browser and visit `http://localhost:5173` ### Build for Production ```bash npm run build ``` ## 🎯 Key Sections 1. **Header**: Navigation with logo, menu items, and search/cart icons 2. **Hero**: Main banner with "Breath Natural" message and call-to-action 3. **Trendy Plants**: Grid of popular plants with ratings and prices 4. **Top Selling**: Featured products with detailed descriptions 5. **Customer Reviews**: Testimonials from satisfied customers 6. **O2 Collection**: Special collection showcase 7. **Footer**: Company info, quick links, newsletter, and social media ## 🎨 Design Elements - **Color Scheme**: Dark green background (#171F12) with white text - **Typography**: Inter font family for modern look - **Effects**: Glassmorphism, backdrop blur, and smooth transitions - **Icons**: Custom icons for shopping cart, social media, etc. - **Images**: High-quality plant images from the Figma design ## 📱 Responsive Design The website is fully responsive and includes: - Mobile-first approach - Flexible grid layouts - Adaptive typography - Touch-friendly interactions - Optimized for all screen sizes ## 🔧 Technologies Used - **React 19**: Modern React with hooks - **Vite**: Fast build tool and development server - **CSS3**: Custom styling with modern features - **HTML5**: Semantic markup - **JavaScript ES6+**: Modern JavaScript features ## 📸 Images All images are sourced from the Figma design and stored in the `public/images/` directory: - Hero background images - Plant product images - Customer profile pictures - Icons and logos - Social media icons ## 🎯 Future Enhancements - Add shopping cart functionality - Implement product filtering and search - Add user authentication - Integrate with a backend API - Add more interactive animations - Implement a blog section ## 📄 License This project is for educational and portfolio purposes. --- Built with ❤️ using React and Vite # MA2