Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to showcase a streamlined process for rendering frames efficiently. The primary objective is to create a visually appealing "Process Steps" section that communicates the workflow clearly, using an engaging layout and animations to enhance user interaction.

## CORE FEATURES
1. **Process Steps Header**: Centered title and subtitle that explain the workflow, with a light gray background.
2. **Responsive Grid Layout**: A 4-column grid that adapts to different screen sizes (1 column on mobile, 2 on tablet, 4 on desktop).
3. **Interactive Cards**: Four cards that detail each step of the process, featuring a split design with distinct color blocks.
4. **Scroll-Triggered Animation**: Cards animate into view when scrolled into the viewport, enhancing engagement and focus.
5. **Accessibility Considerations**: Ensure that all text is legible and that animations do not interfere with usability.

## 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: Centered header, followed by a responsive grid layout consisting of four animated cards with distinct sections.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: Not required for this static content

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using TypeScript. Install Tailwind CSS and configure it for styling.
2. **Create Header Component**: Build a header component that includes the title 'The Workflow' and subtitle with a light gray background.
3. **Develop Card Component**: 
   - Create a Card component that accepts props for the top and bottom text.
   - Ensure the card has rounded corners, a subtle drop shadow, and a height of 350px-400px.
   - Implement a split design for the card with the top block in white and the bottom block in dark navy blue.
4. **Implement Grid Layout**: Use a responsive grid layout to display four Card components. Use Tailwind CSS for responsive classes (e.g., `grid-cols-1 md:grid-cols-2 lg:grid-cols-4`).
5. **Add Scroll Animation**: Utilize the Intersection Observer API in a useEffect hook to animate cards when they scroll into view. Set initial styles to `opacity: 0` and `transform: translateY(50px)` and transition to `opacity: 1` and `transform: translateY(0)`.
6. **Sequential Animation Logic**: Implement staggered animation for the cards by using a delay based on the index of the card (0.2s increments).
7. **Test Responsiveness**: Ensure the layout and animations function correctly across different devices and screen sizes.

## USER EXPERIENCE
The user will be greeted with a clean and modern landing page that presents the workflow in an easy-to-understand manner. As they scroll down, the cards will animate into view, drawing their attention to each step of the process. The use of clear typography and a minimalist design will ensure that the content is easily digestible, allowing users to quickly grasp the process from upload to final delivery. 

This landing page will effectively guide users through the frame rendering process, encouraging them to engage with the content and understand the service offered.