Accessible E- Commerce Homepage - Copy this Html, Tailwind Component to your project

Here’s a **shorter and concise version** of the frontend development prompt, retaining all the key elements: ### **Frontend Development Prompt for AI:** #### **Project Title: Accessible E Commerce Platform – InclusiveShop** #### **Objective:** Develop a **responsive, accessible e commerce platform** for users with physical disabilities, focusing on **voice commands**, **keyboard navigation**, **screen reader support**, and a clean, responsive UI with **high contrast mode** and **text scaling** options. ### **Key Requirements:** #### **1. Overall Layout and Structure:** Use **HTML5**, **CSS3**, and **JavaScript** to create a **responsive design** using **CSS Grid/Flexbox**. Ensure the layout adapts across **mobile, tablet, and desktop**. Follow **semantic HTML** for accessibility (use `header`, `nav`, `main`, etc.). #### **2. Navigation:** **Header** with logo, **search bar** (voice command enabled), **cart icon**, and **profile icon**. Add an **Accessibility Settings button** to toggle **high contrast mode**, **dark mode**, and **text scaling**. **Mobile sidebar menu** for product categories. #### **3. Accessibility Features:** **Voice Commands**: Use the **Web Speech API** for navigation (e.g., "Search for shoes", "Go to cart"). Include a microphone button to activate voice input. **Keyboard Navigation**: Ensure full keyboard accessibility with `tabindex` and `aria labels` for all interactive elements. **Screen Reader Compatibility**: Use **ARIA** attributes, add **alt text** for images, and ensure compatibility with screen readers. **High Contrast Mode & Text Scaling**: Implement options in the Accessibility Settings to switch to high contrast mode and adjust font size. #### **4. Home Page:** **Hero section** with image slider for promotions. **Search bar** (with voice command support). Featured categories in a **grid layout** and **top selling products**. All images should have **alt text** for accessibility. #### **5. Product Listing Page:** **Grid layout** for products with **product image** (with `alt` text), **name**, **price**, and **Add to Cart button**. Implement **voice commands** to add products to the cart and view details. #### **6. Product Details Page:** Display product images with **alt text** and a **3D viewer** for products (using **three.js**, optional). Include **Add to Cart** and **Buy Now** buttons (keyboard and voice command accessible). #### **7. Cart Page:** List items with options to **update quantities**, **remove items**, and **proceed to checkout**. Support **voice commands** (e.g., "Remove shoes", "Proceed to checkout"). #### **8. Checkout Page:** Implement **form validation** with clear, accessible error messages. Ensure keyboard and screen reader accessibility throughout the checkout process. #### **9. Footer:** Include links to **About Us**, **Contact**, and **Social Media Icons** (all accessible). Add a **high contrast mode toggle**. ### **Design Guidelines:** Use a **high contrast color palette** and ensure WCAG 2.1 AA standards. Implement **responsive layouts** using CSS Grid/Flexbox. Default font size should be **16px** with adjustable scaling. ### **Interactions & Animations:** Subtle **hover effects** for buttons and smooth **transitions** for switching modes (high contrast/dark mode). ### **Technology Stack:** **HTML5**, **CSS3**, **JavaScript**. **ARIA** for screen readers. **Web Speech API** for voice commands. **three.js** for 3D product viewing.