Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page featuring a video scrubbing effect that synchronizes with the user's scroll. The page will have a fixed background video that advances or rewinds based on scrolling, complemented by dynamic text and UI elements that appear in stages to enhance user engagement.

## CORE FEATURES
1. **Video Background**: A full-screen fixed video that progresses in frames based on the user's scroll position, implemented with Framer Motion or GSAP ScrollTrigger.
2. **Phase 1 UI**: A translucent Liquid Glass-style UI that appears at the beginning of the video, featuring black text and buttons.
3. **Phase 2 Messaging**: Centered text that highlights the core message: "Automação com IA para facilitar os processos atuais da sua empresa" during the middle phase of the video.
4. **Pricing Cards**: Three stylized Liquid Glass pricing cards that appear on the right side during the final phase of the video.
5. **Animated Footer**: A footer displaying the company name in bold white text with a black outline, featuring a rapid gradient animation.

## 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 should consist of vertically stacked sections, each with a height of 200vh to allow smooth scrolling and sufficient time for the video to progress.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specified, but consider using React Context or Redux if needed for managing UI state.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Video Component**: Implement a video component that uses Framer Motion or GSAP ScrollTrigger to control video playback based on scroll position.
3. **Design Phase 1 UI**: Create the Liquid Glass-style UI with buttons that appear at the start of the scroll.
4. **Implement Phase 2 Text**: Add the centered message that appears during the mid-scroll phase.
5. **Design Pricing Cards**: Create three Liquid Glass pricing cards that appear towards the end of the scroll.
6. **Build Footer**: Design and implement the footer with the animated gradient effect.
7. **Responsive Design**: Ensure all components are responsive and look good on various screen sizes.
8. **Testing**: Test the video scrubbing effect and responsiveness across different browsers and devices.

## USER EXPERIENCE
Users will experience a visually engaging landing page where they can scroll down to see a captivating video that illustrates a narrative aligned with the text and UI elements. The transition between phases will create an interactive experience that keeps users engaged, guiding them through the message while allowing them to explore the features of the service offered. The footer will serve as a final touchpoint, ensuring brand visibility with an appealing animation.