Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a modern and premium "Contact Us" landing page designed to provide users with a seamless way to reach out. It incorporates proper animations and a minimalist aesthetic to enhance user engagement and deliver a visually appealing experience.

## CORE FEATURES
1. **Hero Section**: A captivating introduction that includes an engaging headline, a brief description, and a prominent call-to-action button encouraging users to get in touch.
2. **Contact Form**: A user-friendly form that captures user inquiries, featuring fields for name, email, message, and a submit button.
3. **Location Map**: An embedded map showing the business’s physical location, providing users with a visual reference for where to find you.
4. **Testimonials**: A section showcasing positive feedback from customers to build trust and credibility.
5. **Animated Transitions**: Smooth animations throughout the page that enhance the modern feel, such as fading effects on scroll and hover animations on buttons.
6. **FAQ Section**: A dropdown or accordion-style FAQ section addressing common inquiries, improving user experience and reducing the number of direct contacts.

## 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-column layout with a fixed header, featuring sections stacked vertically for clarity. The footer will include additional contact information and links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specifically needed for this page, but can utilize React's built-in state management if necessary.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling components.
3. **Create Layout Structure**: Implement the main layout with a header, hero section, contact form, location map, testimonials, and FAQ section.
4. **Design Hero Section**: Use Tailwind CSS to style the hero section with a large headline and CTA button.
5. **Develop Contact Form**: Create form inputs with controlled components for handling user input and validation.
6. **Integrate Map**: Use a mapping library (e.g., Google Maps API) to embed the location map.
7. **Add Testimonials and FAQ**: Create sections with dynamic rendering for testimonials and interactive FAQ items.
8. **Implement Animations**: Use CSS transitions and animations to enhance user interactions throughout the site.
9. **Test Responsiveness**: Ensure the design is responsive for various screen sizes using Tailwind’s responsive utilities.
10. **Deploy**: Host the landing page using a service like Vercel or Netlify for public access.

## USER EXPERIENCE
Users will be welcomed by a clean and modern hero section that draws attention. They can easily navigate the page to find the contact form, which is straightforward and encourages completion with well-placed buttons. The testimonials will add credibility, while the FAQ section will help users find answers quickly without needing to reach out directly. The overall experience will be enhanced with smooth animations that provide feedback on user actions, ensuring a delightful interaction.