Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page aimed at enhancing the visual appeal and functionality of an existing webpage. The main purpose is to present information clearly and attractively, introducing categories, location on a map, and employing a clean, minimalist design that emphasizes typography and user engagement.

## CORE FEATURES
1. **Hero Section**: A prominent introduction area with a catchy title, brief description, and a call-to-action button that encourages user interaction.
2. **Categories Display**: Clearly defined sections that categorize content, allowing users to navigate easily through different offerings.
3. **Location Map**: An embedded map showing the physical location, providing users with visual context and directions.
4. **Testimonials or Reviews Section**: A space for user feedback, enhancing credibility and encouraging new visitors to engage with the service.
5. **Contact Information**: Easy access to contact details, including a form for user inquiries, ensuring open communication lines.
6. **Responsive Design**: Ensuring the landing page adapts seamlessly to various screen sizes for an optimal user experience on mobile and desktop devices.

## 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 that includes sections arranged vertically. The hero section at the top, followed by categories, a map, testimonials, and a contact form at the bottom.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this static landing page but can be integrated if dynamic data loading is needed.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript. Install Tailwind CSS and shadcn/ui components.
2. **Create Layout Structure**: Develop the main layout using React components, ensuring sections are organized as specified.
3. **Design Hero Section**: Implement the hero section with a background image or solid color, a heading using Inter font, and a call-to-action button styled with the primary color.
4. **Add Categories**: Create a categories section with cards or list items that are visually appealing and easy to navigate.
5. **Integrate Map**: Use a mapping library (e.g., Google Maps API or Leaflet) to embed the map showing the location, ensuring it is responsive.
6. **Testimonials Section**: Design a simple testimonials area that displays user reviews or quotes.
7. **Implement Contact Form**: Create a contact form at the bottom of the page with fields for user input, styled accordingly.
8. **Ensure Responsiveness**: Utilize Tailwind CSS to ensure all components look great on various devices.
9. **Test and Optimize**: Review the page for usability, loading times, and ensure all links and buttons function correctly.

## USER EXPERIENCE
The user journey begins with the hero section catching their attention, encouraging them to explore categories. Users can easily navigate through different sections, view the location on the map, read testimonials for reassurance, and reach out through the contact form. The minimalist design ensures that users can focus on the content without unnecessary distractions, leading to a seamless experience.