Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page titled "Troubleshoot Before Launch," designed to provide a minimalist and informative presence for users seeking solutions before launching their projects. The main purpose is to guide users through troubleshooting tasks and offer insightful resources to ensure smooth project launches.

## CORE FEATURES
1. **Hero Section**: A captivating introduction with a brief overview of the troubleshooting process, featuring a clear call-to-action (CTA) button that encourages users to start their journey.
2. **Features Overview**: A section outlining key troubleshooting features, such as checklists, common pitfalls, and expert tips, presented in a visually appealing grid layout.
3. **Testimonials**: Quotes and feedback from users who have successfully launched their projects after utilizing the troubleshooting resources, enhancing credibility and trust.
4. **Resource Links**: A curated collection of articles, guides, and tools that users can explore to aid in their troubleshooting process.
5. **Contact Form**: A simple contact form for users to reach out with questions or to request additional support, ensuring engagement and responsiveness.

## 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 with a vertical flow, starting with the hero section, followed by features, testimonials, resource links, and ending with the contact form.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not required for a simple landing page but can be integrated if needed for form submissions.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App or Vite.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Layout Components**: Develop reusable components for the hero section, feature cards, testimonials, resource links, and contact form.
4. **Implement Styling**: Apply Tailwind CSS classes to achieve the minimalist design, ensuring proper spacing and alignment.
5. **Integrate Typography**: Import Inter from Google Fonts and set it for headings and body text across the application.
6. **Configure Forms**: Set up the contact form with appropriate input fields and validation as needed.
7. **Test Responsiveness**: Ensure the layout is responsive and adjusts well on different screen sizes.

## USER EXPERIENCE
Users will be greeted with a striking hero section that clearly communicates the purpose of the page. They can easily navigate through the features and testimonials, gaining insights into the troubleshooting process. The resource links will provide additional support, and the contact form will allow users to engage directly for further assistance. The overall experience will focus on simplicity and clarity, guiding users towards successful project launches with minimal distractions.