Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a landing page for Swera Motors, a local showroom specializing in both locally manufactured Pakistani cars and imported Japanese cars. The website will serve as a digital storefront, showcasing available cars with a modern, premium design that emphasizes clarity and intentionality.

## CORE FEATURES
1. **Hero Section**: A visually captivating hero section featuring a high-quality image of a highlighted car with an engaging tagline that clearly communicates the showroom's unique value proposition.
  
2. **Car Stock Display**: A dedicated stock page that elegantly lists all available cars, including key details such as make, model, price, and a brief description without relying on blocky card designs.

3. **About Us Section**: A concise section detailing Swera Motors' mission, values, and background, reinforcing credibility and connection with potential customers.

4. **Testimonials**: Real customer testimonials presented in a refined manner, highlighting positive experiences with Swera Motors to build trust.

5. **Contact Information**: A simple and accessible contact section, including a contact form and social media links, allowing potential customers to reach out easily.

6. **Responsive Design**: Ensures that all components are optimized for both desktop and mobile devices, maintaining a premium feel across all screen sizes.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, a minimal color palette, and a focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds, using a disciplined color palette to enhance readability and visual hierarchy.
- **Layout**: A structured grid layout that aligns content consistently without visual wobble. Each section should have adequate breathing room, and elements should not drift.
- **Typography**: 
  - **Heading Font**: Use a modern sans-serif font for headings (e.g., Montserrat).
  - **Body Font**: Use a clean serif font for body text (e.g., Lora).
  - Define a type ramp with consistent sizes and line heights for clarity and hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling and responsive design.
- **UI Components**: Utilize shadcn/ui for all interactive elements, ensuring consistent design language across components.
- **State Management**: Use React's built-in state management for handling dynamic content.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Layout Structure**: Design the main layout components (Header, Footer, Main Content) using Tailwind CSS for spacing and alignment.
3. **Build Hero Section**: Implement the hero section with a full-width background image and overlay text using Tailwind utilities.
4. **Develop Car Stock Display**: Create a responsive grid layout for the car stock section, ensuring that each car is displayed with proper spacing and alignment.
5. **Implement About Us and Testimonials**: Design these sections with consistent typography, spacing, and minimal distractions.
6. **Add Contact Section**: Build a contact form with validation and ensure it is easy to interact with on both desktop and mobile.
7. **Test Responsiveness**: Ensure all components are responsive and maintain design integrity across different devices and screen sizes.
8. **Optimize Performance**: Include loading states and skeleton screens for data-heavy areas, ensuring smooth user interactions.

## USER EXPERIENCE
Key user interactions will include seamless navigation through the hero section to the car stock display, where users can easily scroll and explore available cars. The website will feature subtle animations like scroll reveals as users navigate down the page, enhancing the experience without overwhelming the user. Hover effects on buttons will provide feedback without distorting the layout, ensuring all interactions feel intentional and polished. The site will also include a loading indicator for the contact form submission to maintain responsiveness and provide clarity during asynchronous actions. 

This comprehensive prompt is designed to create a premium, minimalist landing page for Swera Motors that adheres to the specified design principles and technical requirements.