Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed for an upcoming auto tech performance auto repair service located at 1246 Castleton Ave, Staten Island, NY 10310. The website aims to attract customers by showcasing the services offered in a modern yet colorful and minimalist design, enhancing user engagement and conversion.

## CORE FEATURES
1. **Hero Section**: A visually appealing introduction with a catchy tagline, brief description of services, and a prominent call-to-action (CTA) button to encourage bookings or inquiries.
2. **Services Overview**: A section detailing the various auto repair and performance services offered, with icons and short descriptions for each service to aid understanding.
3. **Testimonials**: A section featuring customer reviews to build trust and credibility, showcasing real experiences with the auto repair service.
4. **Contact Information**: Clear display of contact details including phone number (347 920 9477) and a contact form for inquiries, making it easy for customers to reach out.
5. **Location Map**: An embedded map showing the location of the auto repair shop to assist customers in finding the shop easily.
6. **Call-to-Action Section**: A final CTA encouraging visitors to book an appointment or contact the service for more 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 feature a full-width hero section at the top, followed by a grid layout for services, a testimonials carousel, and a contact section at the bottom. The design will prioritize mobile responsiveness and easy navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specifically required for this landing page but can utilize React's built-in state management for any dynamic components.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project for styling and UI components.
3. **Create Components**:
   - Develop the Hero component with a catchy tagline and a CTA button.
   - Create a Services component to list the different services offered.
   - Implement a Testimonials component to display customer reviews.
   - Set up a Contact component with a form and contact details.
   - Embed a map using a Google Maps API or similar service.
4. **Style Components**: Use Tailwind CSS to style the components according to the design specifications, ensuring proper use of the primary color and typography.
5. **Responsive Design**: Ensure that all components are responsive and optimized for both desktop and mobile views.
6. **Testing**: Conduct testing for functionality and user experience, ensuring all links, forms, and interactive elements work as intended.
7. **Deployment**: Deploy the landing page on a suitable web hosting service.

## USER EXPERIENCE
Users will arrive at a clean, modern landing page that clearly communicates the services offered by the auto repair shop. The hero section will immediately grab attention, while the easy navigation through services, testimonials, and contact information will facilitate quick access to necessary details. The contact form will allow for easy inquiries, and the embedded map will help users locate the shop without hassle. Overall, the design will focus on simplicity and effectiveness, ensuring a seamless experience that encourages potential customers to engage with the business.