Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to create a high-converting masterclass funnel for iAMconnected. The main purpose is to introduce users to the concept of “contractions” and seamlessly lead them into the Meeting The Moment (MTM) program, focusing on simplicity, speed, and clarity throughout the user journey.

## CORE FEATURES
1. **Registration Page (Opt-in)**: A clean and straightforward registration form to capture user details and encourage sign-ups.
2. **Confirmation Page**: A follow-up page providing next steps along with a short introductory video to engage users immediately after registration.
3. **Webinar / Video Delivery Page**: A dedicated space for hosting the masterclass video, ensuring a smooth viewing experience.
4. **Offer Page**: A straightforward landing area where users can learn more about the MTM program and make a purchase.
5. **Checkout Integration**: Utilizes Stripe checkout for secure and efficient payment processing, with clear CTA buttons linking directly to the checkout flow.
6. **Mobile-First Design**: Fully responsive design ensuring optimal user experience across all devices, prioritizing mobile users.

## 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 will feature a vertical flow starting from the registration form, followed by confirmation, video delivery, and the offer page, ensuring a clear hierarchy and user journey.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specified; consider using React Context or a simple state management solution if needed.

## IMPLEMENTATION STEPS
1. **Set up the React environment**: Initialize a new React project with TypeScript and install required dependencies including Tailwind CSS and shadcn/ui.
2. **Create the Registration Page**: Implement a responsive registration form with necessary fields, buttons styled using Tailwind CSS.
3. **Develop the Confirmation Page**: Design a simple confirmation page with a short video and next steps clearly outlined.
4. **Build the Webinar Delivery Page**: Integrate a video player that supports live or recorded content for the masterclass.
5. **Design the Offer Page**: Create a clean layout that presents the MTM program, incorporating persuasive copy and a clear CTA leading to the checkout.
6. **Implement Stripe Checkout**: Set up the backend to handle Stripe integration and ensure CTA buttons link correctly to the Stripe checkout process.
7. **Test Responsiveness**: Ensure that all pages work seamlessly on various devices, particularly focusing on mobile-first design.

## USER EXPERIENCE
Users will begin their journey on the registration page, where they can easily input their information. Upon submitting, they will be redirected to the confirmation page, where they receive immediate feedback and a video introduction. Next, they will access the masterclass video, followed by the offer page where they can learn more about the MTM program and complete their purchase through a simple and secure checkout process. The emphasis will be on maintaining a smooth flow and clear navigation throughout the entire experience, maximizing conversion rates.