Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
3S Tuning is a landing page designed for a car lighting and optics studio specializing in the repair, modernization, and tuning of automotive lighting. The main purpose of the site is to showcase services offered, enhance the visibility of the brand, and convert visitors into customers by providing essential information and easy access to contact options.

## CORE FEATURES
1. **Hero Section**: An engaging introduction with a strong headline, a brief description of services, and a prominent call-to-action button encouraging visitors to get in touch or book a service.
2. **Services Overview**: A detailed list of services, including installation of Bi-LED lenses, lens replacement and repair, headlight polishing, and more, each with brief descriptions to inform potential customers.
3. **Testimonials**: A section dedicated to customer reviews highlighting the quality of service and customer satisfaction to build trust and credibility.
4. **Contact Form**: An easy-to-use contact form allowing potential customers to ask questions or request services directly from the site.
5. **Gallery**: A visually appealing showcase of before-and-after images of past projects to demonstrate the quality of work and results achieved.

## 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 should be structured with a clear vertical flow, starting with the hero section at the top, followed by the services overview, testimonials, gallery, and contact form at the bottom.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not explicitly required for a landing page; simple props and state management should suffice.

## IMPLEMENTATION STEPS
1. **Initial Setup**: Create a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Components**: Build the individual components for the hero section, services overview, testimonials, gallery, and contact form.
4. **Implement Routing**: Set up basic routing if necessary, ensuring that all sections can be accessed smoothly.
5. **Styling**: Apply Tailwind CSS classes to achieve the minimalist design, using the specified primary color and typography.
6. **Content Population**: Fill in the text and images for each section following the structure outlined above.
7. **Testing**: Test the landing page for responsiveness and usability across different devices and browsers.
8. **Deployment**: Deploy the landing page on a web hosting platform, ensuring to configure domain settings if applicable.

## USER EXPERIENCE
Visitors will be greeted by a visually appealing hero section that clearly communicates the brand’s purpose. They can easily navigate through the services offered, view testimonials to build trust, explore a gallery of past work, and fill out a contact form to inquire about services. The clean and intuitive design will enhance user interaction, encouraging engagement and conversions. The minimalist approach ensures that users focus on the content without distractions, making for a smooth and enjoyable browsing experience.