Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web app dedicated to displaying a "Coming Soon" page for a website currently under construction. The main purpose is to inform visitors that the site is being developed while maintaining a professional and inviting appearance.

## CORE FEATURES
1. **Hero Section**: A prominent area at the top of the page featuring a bold message indicating that the site is under construction, with a simple call-to-action to subscribe for updates.
2. **Countdown Timer**: An optional feature that counts down to the expected launch date, creating anticipation among visitors.
3. **Contact Form**: A minimalistic form allowing users to enter their email addresses to receive notifications when the site is live.
4. **Social Media Links**: Icons linking to social media platforms for users to follow updates and engage with the brand on social media.
5. **FAQ Section**: A collapsible section addressing common questions about the upcoming website and its launch.
6. **Responsive Design**: Ensuring that the layout adapts seamlessly across different devices and screen sizes.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design emphasizing cleanliness and simplicity, with ample white space to enhance readability and focus.
- **Color Mode**: Light theme featuring dark text on light backgrounds, ensuring high contrast and easy readability.
- **Layout**: The layout will be centered, with the hero section at the top, followed by the countdown timer, contact form, social media links, and the FAQ section. Each section will have generous padding for a spacious feel.
- **Typography**: Utilize sans-serif fonts for a modern look. Primary font: 'Helvetica Neue' for headings (bold) and 'Arial' for body text. Establish a clear hierarchy using font sizes—larger for headings, medium for subheadings, and standard size for body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling approach
- **UI Components**: Utilize shadcn/ui for pre-built UI components to maintain consistency and speed up development.
- **State Management**: React Context API for managing the state of form submissions and countdown timer.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript using Create React App.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui components.
3. **Create the Main Layout**: Construct the main layout with a functional component that includes the hero section, countdown timer, contact form, social media links, and FAQ section.
4. **Design the Hero Section**: Implement the hero section with a large heading and a call-to-action button styled using Tailwind CSS.
5. **Add a Countdown Timer**: Create a countdown timer component that calculates the time until the launch date.
6. **Build the Contact Form**: Develop a simple form with input validation and integrate email subscription functionality.
7. **Include Social Media Links**: Add icons using shadcn/ui for social media links and position them appropriately.
8. **Implement the FAQ Section**: Create a collapsible component for frequently asked questions.
9. **Ensure Responsiveness**: Test and refine the layout for different screen sizes using Tailwind's responsive design utilities.
10. **Deploy the Application**: Choose a hosting platform (e.g., Vercel or Netlify) to deploy the web app.

## USER EXPERIENCE
Users will arrive on a clean and simple "Coming Soon" page with a welcoming hero message. The intuitive layout guides them through features like the countdown timer, encouraging them to subscribe via the contact form. Social media links allow for easy engagement, while the FAQ section provides answers to common inquiries, enhancing user satisfaction and anticipation for the launch. The responsive design ensures a seamless experience across all devices, keeping users informed and excited about the upcoming website.