🌸 Petal & Bloom — Flower Shop

A polished front-end flower shop experience built with pure HTML, CSS, and JavaScript. Petal & Bloom is designed as a portfolio-ready demo that showcases dynamic product rendering, filtering, cart interactions, theming, and responsive UX — all without a backend.

---

🌿 Overview

Petal & Bloom is a modern, responsive landing page for a fictional flower boutique. It features interactive product discovery, live search, category filters, a shopping cart with persistent state, dark mode, and polished UI animations. This project runs entirely in the browser and requires no build tools or server setup.

---

✨ Key Features

• Responsive Design: Works smoothly on desktop, tablet, and mobile.
• Dynamic Product Rendering: Product cards are generated from JavaScript data.
• Live Search: Filter products instantly as the user types.
• Category Filtering: Browse product categories with a single click.
• Best Sellers Section: Highlight top-rated products.
• Persistent Cart: Cart contents are saved using localStorage.
• Dark Mode Toggle: Theme preference saves across visits.
• Mobile Navigation: Accessible menu for small screens.
• Animated UI: Loader, floating petals, and card transitions.
• Forms & CTA Sections: Newsletter and contact form UI components.

---

🧱 Project Structure

Flower-Shop/
├── index.html          # Main markup and page structure
├── css/
│   ├── style.css       # Main styles and responsive rules
│   ├── base/           # Global reset, typography, utilities, variables
│   ├── components/     # Component-specific styles
│   ├── layout/         # Layout section styles
│   └── responsive/     # Responsive breakpoints
├── img/
│   └── image.png       # Local favicon / preview asset
|   └─ image-readme.png # for readme.md png
└── js/
    ├── main.js         # App initialization and feature wiring
    ├── data.js         # Product and category data
    ├── utils.js        # Shared helper functions
    ├── theme.js        # Dark/light mode behavior
    ├── navbar.js       # Navigation + mobile menu + search behavior
    ├── products.js     # Product rendering, filters, interactions
    ├── cart.js         # Shopping cart management and UI
    ├── testimonials.js # Testimonials carousel behavior
    └── forms.js        # Newsletter and contact form handling

---

🚀 Getting Started

The project does not require installation. Open the site directly in any modern browser.

Run locally

1. Open the Flower-Shop folder.
2. Double-click index.html, or open it via your browser.

Tip: For faster development, you can also use the Live Server extension in VS Code.

---

🔧 How It Works

• index.html contains the visual layout and page sections.
• css/style.css and the files in css/ define styling and responsive behavior.
• js/data.js contains product and category definitions.
• js/main.js initializes the app and wires up features.
• js/products.js renders products, categories, and handles filters.
• js/cart.js manages cart state, UI updates, and persistence.
• js/navbar.js handles navigation, mobile menu, and search.
• js/theme.js manages dark mode behavior.
• js/utils.js provides common helper functions.

---

🛠 Customization Guide

Update products

Edit the PRODUCTS array in js/data.js to change, add, or remove products.

Change categories

Update the CATEGORIES array in js/data.js to modify category cards.

Adjust styling

Modify css/style.css to update colors, spacing, typography, and responsive breakpoints.

Modify theme behavior

Change theme persistence and defaults in js/theme.js.

---

📌 Notes

• The cart is persisted locally using localStorage.
• Forms are demo-only and do not submit data to a backend.
• The site is front-end only and works once index.html is opened in the browser.

---

📝 License

This project is free to use and adapt for personal, portfolio, and learning purposes.

---

Made with 🌸 for flower lovers everywhere