Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves the relaunch of a visually impactful landing page that emphasizes large imagery, parallax effects, flat glassmorphism, and animations, all while maintaining the existing corporate identity and content. The goal is to create a stunning user experience that leaves a lasting impression.

## CORE FEATURES
1. **Hero Section**: A visually striking hero area with large images and an engaging tagline.
2. **Parallax Scrolling**: Implement parallax effects that enhance the visual depth and engagement as users scroll through the page.
3. **Features Showcase**: A section dedicated to highlighting key offerings using eye-catching visuals and concise text descriptions.
4. **Testimonials**: An area for user feedback or testimonials, enhanced with animations for smooth transitions.
5. **Call to Action (CTA)**: Prominent buttons encouraging users to take action, like signing up or learning more.
6. **Contact Section**: A simple form or contact information that allows users to connect easily.

## 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 feature a vertical scroll with distinct sections for the hero, features, testimonials, and contact, allowing for an intuitive user journey.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for responsive design and utility-first styling.
- **UI Components**: shadcn/ui for modern and customizable UI components.
- **State Management**: Not required for this landing page as it focuses on static content and visual effects.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Layout Structure**: Define the main layout components: Hero, Features, Testimonials, CTA, and Contact.
3. **Implement Hero Section**: Add a full-width image with a captivating tagline and ensure parallax scrolling is enabled.
4. **Design Features Section**: Develop a grid or card layout to display features with animations on hover.
5. **Testimonials Section**: Integrate a carousel or grid layout for testimonials, applying animations for smooth transitions.
6. **Add CTA**: Create a prominent call-to-action button styled with the primary color and rounded edges.
7. **Contact Section**: Include a simple contact form or display contact information, ensuring it is easily accessible.
8. **Optimize for Responsiveness**: Use Tailwind CSS to ensure all components are responsive and visually appealing on different devices.
9. **Test Interactions**: Review all animations and interactions to ensure they provide the desired "wow" effect.
10. **Deploy the Landing Page**: Publish the website using a suitable hosting platform.

## USER EXPERIENCE
The user experience will be seamless and engaging. Users will be greeted with a captivating hero image that draws them in. As they scroll, the parallax effect will provide a sense of depth, while animations will guide their attention to key features and testimonials. The CTA will stand out, encouraging users to take action without feeling overwhelmed, and the contact section will be easily accessible for any inquiries. Overall, the design will prioritize clarity, engagement, and aesthetic appeal, resulting in a memorable interaction.