🌿 Botanica - Responsive Indoor Plant E-Commerce & Showcase Website

Botanica is a modern, responsive landing page and e-commerce showcase built for an indoor botanical nursery. Designed with sleek aesthetics, fluid layouts, and smooth interactive elements, it provides plant enthusiasts with a seamless browsing experience across all screen sizes.

---

✨ Features

• 📱 Fully Responsive Layout: Tailored custom breakpoints (sm, md, lg, xl) for mobile, tablet, and desktop viewing.
• 🎨 Custom Design System: Integrated Google Fonts (Caacupe One & Mulish) with nature-inspired color palettes.
• 🪴 Product Showcase: Interactive plant cards displaying pricing in INR (₹), ratings, and direct add-to-cart actions.
• 💬 Customer Reviews Slider: Smooth testimonial carousel powered by Swiper.js.
• ✨ Scroll Animations: Dynamic on-scroll element reveals powered by ScrollReveal.
• 📬 Newsletter Integration: Interactive subscription interface and organized multi-column footer navigation.

---

🛠️ Tech Stack

• HTML5: Semantic document structure
• Tailwind CSS (v3): Utility-first styling and responsive design
• JavaScript (ES6+): Interactive UI logic and DOM manipulation
• Swiper.js: Touch-friendly carousel slider
• ScrollReveal: Scroll-triggered animations
• Remix Icon: Lightweight, scalable vector iconography

---

📁 Project Structure

Botanica/
├── assets/             # Images, icons, and plant graphics
├── src/
│   ├── input.css       # Tailwind entry styles & font imports
│   └── index.html      # Main HTML document
├── output.css          # Compiled Tailwind CSS
├── main.js             # Swiper and ScrollReveal script logic
├── tailwind.config.js  # Tailwind theme extensions & screen breakpoints
├── package.json        # Project metadata and build scripts
└── README.md           # Project documentation

---

🚀 Getting Started

Prerequisites

Ensure you have Node.js installed on your machine.

Installation

1. Clone the repository:

   git clone [https://github.com/rahi4403/Botanica.git](https://github.com/rahi4403/Botanica.git)
   cd Botanica

2. Install dependencies:

   npm install

3. Start the Tailwind compiler in watch mode:

   npm run watch

4. Launch the site: Open index.html in your browser (or use the VS Code Live Server extension).

---

📜 Available Scripts

• npm run watch — Runs the Tailwind CLI in watch mode to automatically compile src/input.css into output.css whenever changes are saved.

---

Deployment

https://botanica-ruby.vercel.app/