Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for an auto-école, Auto Ecole Kenzi Anfa, designed to provide essential information about driving courses available in Morocco, including Permis B, Permis Moto, and Camion. The site aims to present a clean and straightforward user experience while reflecting the artistic direction of the existing Facebook presence.

## CORE FEATURES
1. **Hero Section**: A captivating introduction with the auto-école logo, a brief tagline, and a call-to-action button to enroll or learn more.
2. **Service Offerings**: Detailed descriptions of the driving courses available, including Permis B, Permis Moto, and Camion, with engaging visuals and clear information.
3. **Testimonials**: A section showcasing student testimonials to build trust and credibility.
4. **Contact Information**: Easy-to-find contact details and a simple contact form for inquiries.
5. **Location Information**: A map or directions to the auto-école, ensuring prospective students can easily find the location.
6. **FAQs**: A section addressing common questions regarding course schedules, pricing, and requirements.

## 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 single-page layout with a smooth scroll experience; sections stacked vertically with a fixed navigation bar for easy access to each section.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not needed for this static landing page.

## IMPLEMENTATION STEPS
1. Set up a new React project with TypeScript.
2. Install Tailwind CSS and configure it for the project.
3. Create a header component with navigation links to each section (Hero, Offerings, Testimonials, Contact, FAQs).
4. Develop the Hero section with the logo, tagline, and CTA button, styled with the primary color.
5. Construct the Service Offerings section, including cards for each driving course with descriptions and visuals.
6. Implement the Testimonials section, using a carousel or grid layout for nice presentation.
7. Build the Contact section with a form that collects user inquiries.
8. Add the Location Information section with an embedded map.
9. Create the FAQs section with expandable content for user-friendly navigation.
10. Ensure responsiveness for mobile and tablet views by using Tailwind's utility classes.

## USER EXPERIENCE
The user experience focuses on simplicity and clarity. Users will be greeted by a visually appealing hero section that invites them to explore the offerings. Each section will smoothly scroll into view, maintaining user engagement. The contact form will be straightforward, ensuring ease of use for inquiries, while the testimonials will provide social proof to encourage enrollment. The design will prioritize readability and accessibility, ensuring that all text is easily legible against the light background.