Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The ABALAWE ONLINE STORE is a web application designed to serve as a centralized digital platform for showcasing products and services. This application will facilitate product visibility and customer engagement while directing inquiries to WhatsApp for further interactions. It aims to improve the user experience by providing detailed information about offerings without handling transactions directly on the site.

## CORE FEATURES
1. **Homepage**: A visually appealing entry point featuring highlighted products, categories, and a brief business introduction.
2. **Product Catalog**: A searchable and filterable catalog that allows users to browse products by categories such as Phones & Electronics, Fashion & Footwear, and more.
3. **Product Details Page**: Dedicated pages for each product with images, descriptions, pricing, and direct WhatsApp inquiry options.
4. **Contact Form**: A simple form for customer inquiries that integrates with Google Sheets and sends email notifications.
5. **WhatsApp Integration**: Direct buttons that allow users to engage in pre-filled inquiries through WhatsApp, enhancing lead generation.
6. **Analytics Tracking**: Integration with Google Analytics to monitor user activity, including page views and inquiry submissions.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: A straightforward grid layout for product displays, with a top navigation bar and a footer containing contact information and social media links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API (if needed for managing simple state)

## IMPLEMENTATION STEPS
1. **Set Up Environment**:
   - Create a new React app using Create React App with TypeScript.
   - Install Tailwind CSS and configure it for the project.
   - Integrate shadcn/ui components for UI elements.

2. **Create Layout Components**:
   - Develop a Header component for navigation.
   - Create a Footer component for contact details and social media links.
   - Build a Main component to house the homepage and product catalog.

3. **Implement Routing**:
   - Use React Router to set up routes for the homepage and individual product detail pages.

4. **Product Catalog Functionality**:
   - Create a mock product data file to simulate product offerings.
   - Implement a ProductList component to render products dynamically based on the mock data.
   - Add filtering and searching capabilities to the catalog.

5. **Develop Product Detail Pages**:
   - Create a ProductDetail component to display individual product information.
   - Integrate WhatsApp buttons with pre-filled messages for inquiries.

6. **Contact Form Integration**:
   - Develop a ContactForm component that captures user inquiries.
   - Set up email notifications and Google Sheets integration for tracking inquiries.

7. **Implement Analytics**:
   - Integrate Google Analytics to track user interactions and page views.

8. **Styling and Responsiveness**:
   - Apply Tailwind CSS classes to ensure a minimalist design and responsiveness across devices.
   - Test the application on various screen sizes to ensure usability.

## USER EXPERIENCE
Users will arrive at a well-structured homepage that introduces the ABALAWE ONLINE STORE and showcases featured products. They can easily navigate through the product catalog, filter items, and access detailed product pages. Each product page will have clear inquiry buttons leading directly to WhatsApp, making it easy for customers to engage. The contact form will be straightforward, allowing for quick inquiries without requiring users to create accounts or log in. The overall experience will be smooth, intuitive, and focused on guiding users towards taking action without overwhelming them with unnecessary information.