Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a high-converting multi-page website for HD Auto Detailing, focused on showcasing services, customer testimonials, and conversion through effective call-to-action (CTA) placements. The site will pull all relevant business information from the existing website, enhancing user engagement and driving conversions.

## CORE FEATURES
1. **Hero Section**: An impactful introductory section with a captivating headline, a brief description of services, and a strong CTA button to encourage immediate contact or bookings.
2. **Services Overview**: Detailed descriptions of each service offered, including images, pricing, and benefits to inform potential customers.
3. **Testimonials Section**: A dedicated area to display customer reviews and ratings, enhancing credibility and trust.
4. **About Us Page**: A page that tells the story of HD Auto Detailing, its mission, and the team behind the services, fostering a personal connection with visitors.
5. **Contact Form**: A user-friendly contact form that allows visitors to easily get in touch for inquiries or appointments.
6. **Blog Section**: An optional blog section to share tips on car maintenance and detailing, improving SEO and providing value to visitors.

## 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 structured layout with a top navigation bar for easy access to sections, a prominent hero section at the top, followed by services, testimonials, about us, and contact form. Each section is visually distinct yet cohesive.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specified, but could use Context API or Redux if needed for form handling.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Layout**: Build the main layout structure including the top navigation, footer, and section containers for the hero, services, testimonials, about us, and contact.
3. **Design Hero Section**: Implement the hero section with a background image, overlay text, and CTA button styled with the primary color.
4. **Develop Services Overview**: Create individual service cards with images, descriptions, and buttons linking to detailed service pages (if applicable).
5. **Implement Testimonials Section**: Style a grid or carousel layout to display customer testimonials.
6. **Build About Us Page**: Design this page with a blend of images and text to tell the brand's story.
7. **Implement Contact Form**: Create a responsive contact form that captures user inquiries, styled according to the design specifications.
8. **Add Blog Section**: (If included) Create a simple layout for blog posts with a list of articles and individual post pages.
9. **Responsive Design**: Ensure all components are responsive and optimized for various devices.
10. **Testing and Deployment**: Conduct thorough testing and deploy the website to a hosting platform.

## USER EXPERIENCE
Key user interactions include smooth navigation through the website with a sticky navigation bar, engaging with the hero section CTA, exploring services with easy access to detailed descriptions, reading testimonials to build trust, and completing the contact form seamlessly. All interactions should feel intuitive and straightforward, enhancing the overall user experience.