Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a modern and premium "Contact Us" page that is fully reimagined with a focus on animations and a minimalist design aesthetic. The goal is to enhance user engagement while keeping the existing content the same, using HTML and modern web development practices.

## CORE FEATURES
1. **Animated Hero Section**: A visually striking hero area with smooth animations that grab users' attention and invite them to interact.
2. **Contact Form**: A straightforward contact form that allows users to send inquiries easily, featuring validation and user-friendly error messages.
3. **Location Map**: An embedded map showing the business location for better accessibility.
4. **Testimonials Section**: A rotating carousel of customer testimonials to build trust and credibility.
5. **FAQ Section**: A collapsible section addressing common queries, enhancing user experience without overwhelming them with information.
6. **Social Media Links**: Clearly displayed icons linking to social media platforms for further engagement.

## 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 that emphasizes vertical scrolling, with the hero section at the top, followed by the contact form, testimonials, FAQ, and social media links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for responsive and utility-first styling.
- **UI Components**: shadcn/ui for pre-built components that enhance visual consistency and speed up development.
- **State Management**: Not required at this stage unless form state management is needed.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui components.
3. **Create Layout Structure**: Implement the main layout using Tailwind for responsive design.
4. **Develop Hero Section**: Create an animated hero section using CSS animations or React Spring for smooth transitions.
5. **Build Contact Form**: Develop the contact form with appropriate fields, validation, and submission handling.
6. **Integrate Map**: Use a mapping library (like Google Maps API) to display the location.
7. **Add Testimonials**: Implement the testimonials carousel using shadcn/ui components.
8. **Create FAQ Section**: Build the FAQ section with collapsible items for a clean user experience.
9. **Include Social Links**: Add social media icons that link to external profiles.
10. **Test and Deploy**: Ensure responsiveness and functionality across devices, then deploy the application.

## USER EXPERIENCE
Users will enter the page and be immediately welcomed by a visually appealing hero section. The contact form will be easy to fill out, with instant feedback on errors. As they scroll, they can view testimonials and FAQs, creating a seamless flow of information that encourages them to engage further. The site should maintain a light and inviting atmosphere, facilitating easy navigation and interaction.