Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a landing page for an e-commerce startup that utilizes artificial vision technology for high-end personal care products. The landing page will focus on presenting the brand's value proposition, showcasing its services, and providing social proof to enhance credibility.

## CORE FEATURES
1. **Hero Section**: An impactful hero section featuring a bold title (H1), a clear value proposition, and a prominent call-to-action (CTA) button.
2. **Services/Technology**: A grid layout displaying 3 to 4 cards that explain the services offered and the technology behind them.
3. **Social Proof**: A section showcasing logos of famous personalities and companies that trust or collaborate with the startup, along with customer testimonials.
4. **Data Section**: Interactive counters displaying the number of participants involved in the project and their ratings.
5. **Contact Form**: A validated and functional contact form that connects to a database or simulates a successful submission with a toast notification.
6. **FAQ Section**: An accordion-style FAQ section for user inquiries, ensuring easy access to information.

## 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 be a single-page scrollable design with sections clearly defined for the hero, services, social proof, data, contact form, and FAQ.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specified, can use local state or context as needed

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui components.
2. **Create Layout**: Implement a responsive layout with a sticky navbar that changes opacity on scroll.
3. **Hero Section**: Build the hero section with a large H1 title, value proposition text, and a CTA button styled with the primary color.
4. **Services Section**: Create a grid layout for the services/technology cards, ensuring they are visually appealing and informative.
5. **Social Proof Section**: Add a section for logos of collaborators and a testimonial slider.
6. **Data Section**: Implement interactive counters using an animation library for smooth transitions.
7. **Contact Form**: Develop a contact form with validation and connect it to a Supabase database or create a mock submission with a toast notification.
8. **FAQ Section**: Construct an accordion-style FAQ section that enhances user experience by providing answers in an organized manner.
9. **Dark/Light Mode Toggle**: Incorporate a toggle switch in the navbar to allow users to switch between dark and light modes.
10. **Smooth Scroll and Animations**: Implement smooth scrolling for in-page navigation and add fade-in animations for sections as the user scrolls.

## USER EXPERIENCE
Users will be greeted with a visually striking hero section that captures their attention immediately. As they scroll down, they will encounter sections that effectively communicate the brand's services and credibility through testimonials and social proof. The contact form and FAQ sections will provide essential information and an easy way to get in touch, ensuring a seamless user experience. The addition of dark/light mode and smooth scrolling will enhance usability and make the landing page more engaging.