Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
BikeStore is an e-commerce web application designed to sell bicycles. The platform will feature a modern and sporty aesthetic, focusing on usability and simplicity, allowing users to easily browse, search, and purchase various types of bikes. With essential features such as product lists, detailed product pages, a shopping cart, and a streamlined checkout process, BikeStore aims to offer a professional and enjoyable online shopping experience.

## CORE FEATURES
1. **Home Page**: A welcoming landing area showcasing featured products, promotions, and easy navigation options to other sections of the site.
2. **Product List**: A comprehensive list of bicycles available for purchase, with options to filter by category (Mountain Bike, Road Bike, BMX) and a search functionality to enhance user experience.
3. **Product Detail**: Detailed pages for each bicycle, including high-quality images, specifications, price, and an “Add to Cart” button.
4. **Cart**: A user-friendly cart interface where customers can view selected items, adjust quantities, and proceed to checkout.
5. **Checkout**: A secure and straightforward checkout process that captures essential information for order completion, including shipping and payment details.

## 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**: The layout will feature a top navigation bar for categories, a grid display for the product list, and responsive design elements to ensure usability across various devices.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API or Zustand for managing cart state if needed.

## IMPLEMENTATION STEPS
1. **Set up the React project**: Initialize a new React app with TypeScript support using Create React App or Vite.
2. **Install necessary packages**: Add Tailwind CSS for styling and shadcn/ui for UI components.
3. **Create the main layout**: Develop a responsive layout with a navigation bar, footer, and main content area.
4. **Build the Home Page**: Implement the home page with featured products and links to the product list.
5. **Develop the Product List Page**: Create the product list with filtering and search functionalities.
6. **Implement Product Detail Pages**: Set up individual product pages that display detailed information and allow users to add items to their cart.
7. **Design the Cart**: Create the cart page where users can review their selected items and proceed to checkout.
8. **Develop the Checkout Process**: Implement a secure checkout page that captures user information and payment details.
9. **Test the application**: Ensure all features work seamlessly and the app is responsive on various devices.
10. **Deploy the application**: Use a hosting service like Vercel or Netlify to make the application live.

## USER EXPERIENCE
Users will start at the Home Page, where they can see featured bikes and navigate to the product list. From there, they can filter products by category or use the search bar to find specific bikes. Upon selecting a product, users will be taken to a detailed view, where they can learn more about the bike and add it to their cart. The cart will allow them to review their selections before proceeding to the checkout, which will be a simple and secure process. The overall design will emphasize a smooth and efficient shopping experience, ensuring users can easily find and purchase their desired bicycles.