Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for an SEO SaaS website featuring a modern, galaxy-inspired design with a transparent header and a liquid glass aesthetic. The primary goal is to attract potential customers with a visually striking interface while presenting key features and benefits of the service.

## CORE FEATURES
1. **Hero Section**: A captivating introduction with a transparent header overlay, featuring a strong headline, subheadline, and a prominent call-to-action button.
2. **Features Showcase**: A section highlighting the key features of the SEO SaaS, presented in a visually appealing manner with icons and brief descriptions.
3. **Testimonials**: A carousel or grid layout displaying customer testimonials to build trust and credibility.
4. **Call to Action (CTA)**: A dedicated section encouraging visitors to sign up for a trial or demo, with a clear and enticing message.
5. **Contact Information**: A simple contact form for inquiries, along with links to social media and additional resources.

## 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 starting from the hero section, followed by features, testimonials, CTA, and contact information. Each section will have ample spacing to enhance readability and focus.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this landing page, as it will be primarily static content.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and configure it for your project.
3. **Create Components**:
   - Create a `Header` component for the transparent header.
   - Create a `Hero` component for the hero section.
   - Create a `Features` component to showcase the key features.
   - Create a `Testimonials` component for displaying user feedback.
   - Create a `CTA` component for the call-to-action section.
   - Create a `Contact` component for the contact form.
4. **Design the Layout**: Use Tailwind CSS to style each component according to the design specifications, ensuring responsiveness across devices.
5. **Integrate Fonts**: Import Inter from Google Fonts in your project to apply the typography styles.
6. **Test Responsiveness**: Check the design on multiple devices to ensure a seamless user experience.

## USER EXPERIENCE
Users will land on a visually engaging homepage that immediately communicates the value of the SEO SaaS. They will be greeted by a transparent header and a dynamic hero section. As they scroll down, they will encounter well-structured sections that clearly outline the product's features, read testimonials from satisfied customers, and find a clear CTA encouraging them to engage with the service. The clean design and minimalist approach will guide users effortlessly through the content, ensuring a smooth and appealing experience.