Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
TOCELIA is a specialized e-commerce web application designed for beauty and personal organization products. The platform emphasizes a seamless shopping experience, showcasing curated products while ensuring user conversion through optimized product pages. The design will reflect a premium yet accessible aesthetic, catering specifically to the Spanish market.

## CORE FEATURES
1. **Product Pages**: Each product will have its own dedicated landing page with high-quality images, clear benefits, pricing, and contextual upsells.
2. **Bundling Options**: Users can purchase related products as bundles, offering savings and enhancing the shopping experience.
3. **Trust Signals**: Incorporate elements such as secure payment information, customer service details in Spanish, and transparent shipping and return policies.
4. **Responsive Design**: The application will be fully responsive, ensuring a consistent experience across desktop, tablet, and mobile devices.
5. **SEO Optimization**: Each page will be optimized for search engines with clean URLs and effective metadata to drive organic traffic.

## 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 main layout will feature a fixed header for navigation, a hero section to introduce TOCELIA, followed by sections for product categories, highlighted products, and trust signals. Each product page will utilize a clean, structured format to enhance readability and conversion.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specified, but could utilize React Context or Redux if necessary for larger state management needs.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Layout Components**: Develop reusable components for the header, footer, product cards, and buttons using Tailwind CSS for styling.
3. **Build the Home Page**: Implement the homepage layout with sections for the hero, categories, featured products, and trust signals.
4. **Develop Product Pages**: Create dynamic product pages that pull data based on the selected product, ensuring all specified features are included (benefits, pricing, upsells).
5. **Implement Bundles and Upsells**: Integrate contextual upselling features and bundling options directly on product pages to enhance conversion.
6. **Configure Routing**: Set up routing for navigating between product pages and the homepage.
7. **SEO Optimization**: Ensure all pages have relevant metadata, clean URLs, and optimized content for search engines.
8. **Testing and Refinement**: Conduct thorough testing across devices to ensure responsiveness and fix any bugs.

## USER EXPERIENCE
Users will navigate TOCELIA through a clean and intuitive interface. Upon landing on the homepage, they will be greeted by a visually appealing hero section that clearly communicates the brand's mission. As they browse products, each product page will offer comprehensive information, including visuals and clear calls to action, allowing users to add products to their cart or view related items seamlessly. The responsive design will ensure a smooth experience across all devices, optimizing for mobile users particularly since ads will direct traffic to product pages.