A Modern Website for a Local Flower Shop (https://mzands2622.github.io/FlowerShopSite/site/templates/index.html)

Introduction

This project merges the timeless charm of floral artistry with modern technology. Designed as a sleek and user-friendly website for a local flower shop in Boston, the site provides a seamless platform for customers to browse, customize, and purchase floral arrangements. The website incorporates modern web design principles, responsive layouts, and dynamic features to enhance the customer experience and showcase the shop’s unique offerings.

The project highlights the ability to design and develop a fully functional website that addresses real-world business needs, such as customer engagement, product personalization, and responsive design.

---

Features

• Responsive Design: Optimized for seamless viewing across desktops, tablets, and mobile devices.
• Dynamic FAQ Section: Expands and collapses answers to customer questions automatically.
• Smooth Navigation: Scroll-based navigation for a modern and intuitive user experience.
• Visual Appeal: Combines high-quality images with sleek animations to enhance engagement.
• Shopping Cart System:
  • Add, remove, and modify items in the cart.
  • View real-time order totals.
  • Proceed to checkout to input billing, delivery, and payment details.

---

Technologies Used

Front-End:

• HTML and CSS: Provides the structure and styling for the website.
• JavaScript: Powers dynamic features such as the FAQ section, shopping cart system, and personalized recommendations.
• Responsive Design: Ensures optimal usability with CSS media queries.

Back-End:

• PHP: Handles form submissions and manages user preferences.
• Database (SiteGround): Stores user information, preferences, and order history.
• Google Maps API: Allows users to enter their current location and determine potential delivery times.

Design Principles:

• Smooth Animations: Creates an engaging experience through subtle animations and transitions.

---

How It Works

Product Browsing:

• Customers can scroll through a wide variety of floral arrangements

FAQ Section:

• Clicking on a question expands it to reveal the answer. This feature is powered by JavaScript for a smooth and interactive experience.

Contact Form:

• Users can input their contact information and send messages to the shop for inquiries, comments, or custom order requests.

Shopping Cart:

• Customers can:
  • Add items to their cart directly from the product display.
  • View dynamically updated order totals and adjust quantities or remove items.
  • Proceed to checkout to input:
    • Name, email, and phone number.
    • Billing and delivery address.
    • Credit card details, including expiration date and CVV.

Responsive Experience:

• The website adapts seamlessly to any device, ensuring a consistent and enjoyable browsing experience.

---

Future Roadmap

1. Subscription Plans: Allow customers to subscribe to regular flower deliveries.
2. Real-Time Inventory Updates: Connect to the shop’s inventory system to display product availability.
3. Customer Reviews: Include a section where customers can leave reviews for specific arrangements.

---