Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a modernized web application for a code-review AI product similar to Greptile.com. The application aims to provide an intuitive and engaging user experience with a focus on dark-themed aesthetics and advanced animation techniques, combining cutting-edge web design trends of 2025-2026.

## CORE FEATURES
1. **Hero Section**: Engaging introductory area with animated typography and a floating product screenshot to capture user attention.
2. **How It Works**: A visually appealing section explaining the service flow with animated SVG connections and interactive step cards.
3. **Features/Bento Section**: Showcase of key product features in a visually dynamic Bento grid layout, incorporating micro-interactions and glassmorphism.
4. **Integrations**: Pinned horizontal scroll section displaying partner logos with tooltip interactions, enhancing user engagement.
5. **Testimonials**: Continuous horizontal marquee for user feedback that rotates testimonials smoothly, ensuring the content feels dynamic.
6. **FAQ Section**: An accordion-style FAQ with smooth animations and engaging interactions to improve information accessibility.

## 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 main layout consists of a vertically stacked structure with a prominent hero section, followed by sections for features, testimonials, and an FAQ, maintaining consistent spacing and alignment for a cohesive look.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand (if needed)

## IMPLEMENTATION STEPS
1. **Install Required Libraries**: Ensure you have the following libraries installed via npm:
   - GSAP, Lenis, Framer Motion, Splitting.js, Vanilla-tilt, Three.js, etc.
2. **Global Styles**: Implement global styles for fonts, grain texture, custom cursor, and Lenis smooth scrolling.
3. **Hero Section**: Create a hero section with animated typewriter effects, background orbs, and the floating product screenshot.
4. **How It Works Section**: Use animated SVG paths to connect steps, animate cards entering from the sides, and large background numbers.
5. **Features/Bento Section**: Design the bento grid layout with unique illustrations, glassmorphism effects, and interactive hover states.
6. **Integrations Section**: Implement a pinned horizontal scroll for integrations, ensuring smooth transitions and tooltips for each logo.
7. **Testimonials Section**: Create a marquee for testimonials that rotates seamlessly, including decorative elements in the layout.
8. **FAQ Section**: Implement an accordion with GSAP animations for height transitions and visual indicators for open/close actions.
9. **Footer**: Finish with an oversized decorative text behind the footer content and subtle textures for visual interest.
10. **Performance Optimizations**: Ensure performance requirements are met, such as applying will-change properties and optimizing animations for smooth user interactions.

## USER EXPERIENCE
The user experience focuses on smooth transitions and engaging visuals, encouraging exploration of the product features. Key interactions include scrolling through sections that reveal animations and information dynamically, engaging with CTAs that respond with magnetic effects, and enjoying a responsive layout that adapts seamlessly across devices. Each section maintains a narrative flow, guiding users through the application’s capabilities while keeping them visually intrigued. 

This design and implementation plan aims to create a state-of-the-art web application that resonates with modern web design standards while ensuring optimal performance and user engagement.