Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves redesigning an existing "Contact Us" page into a modern and premium landing page that emphasizes minimalist design and smooth animations. The purpose is to create a visually appealing and user-friendly interface that encourages visitors to reach out and engage with the brand.

## CORE FEATURES
1. **Hero Section**: A visually striking introduction with a compelling headline and a strong call-to-action (CTA) button that invites users to contact.
2. **Contact Form**: A user-friendly form for visitors to submit inquiries, featuring fields for name, email, message, and a submit button.
3. **Animation Effects**: Implement smooth transitions and animations for elements on the page to enhance user engagement and provide a modern feel.
4. **Social Media Links**: Icons linking to social media profiles, encouraging users to connect on various platforms.
5. **Testimonials Section**: A section showcasing positive feedback from previous clients to build trust and credibility.

## 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 layout will follow a vertical flow with a hero section at the top, followed by the contact form, testimonials, and social media links at the bottom. Each section will be clearly defined with ample spacing to maintain minimalist aesthetics.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this static page but can be considered for future updates.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create the Main Layout**: Design the main layout using a vertical stack, ensuring proper spacing and alignment for each section.
3. **Develop the Hero Section**: Implement the hero section with an eye-catching headline, description, and CTA button, ensuring it uses the primary color and typography specified.
4. **Build the Contact Form**: Create a form with necessary fields and a submit button, utilizing Tailwind CSS for styling and animations for button hover effects.
5. **Add Animation Effects**: Integrate CSS transitions and animations for elements to create a dynamic user experience.
6. **Incorporate Testimonials**: Add a testimonials section with a simple design to display client feedback.
7. **Include Social Media Links**: Add icons for social media channels at the footer, ensuring they match the overall design aesthetic.
8. **Test Responsiveness**: Ensure the layout is responsive and looks great on various devices and screen sizes.

## USER EXPERIENCE
Users will first encounter a visually appealing hero section that invites them to take action. The contact form will be straightforward and easy to fill out, with animations that guide the user through the process. Testimonials will provide social proof, building trust before users decide to reach out. The overall experience will be smooth, with quick load times and a focus on user engagement, ensuring a premium feel throughout the interaction.