Lovable Prompt Creator - AI Prompt Generator

```markdown
## APPLICATION OVERVIEW
AIFirstYou is an AI-powered career services landing page that focuses on helping users optimize their resumes and LinkedIn profiles. It features a clean, professional design with easy navigation, providing users with quick access to essential career tools and insights to enhance their job applications.

## CORE FEATURES
1. **Hero Section**: A captivating introduction with a strong message about the importance of resume optimization, including primary and secondary calls to action.
2. **Stats Bar**: A visually engaging row displaying key statistics about resume visibility and effectiveness to establish credibility.
3. **Services Overview**: A grid layout showcasing various free and pro tools available to users, each with a clear description and call to action.
4. **How It Works**: A step-by-step guide illustrating the simple process users will follow to optimize their resumes and LinkedIn profiles with AI.
5. **Before/After Comparison**: Real-life examples demonstrating the impact of AI optimization on resumes and LinkedIn profiles, helping users visualize the benefits.
6. **Footer**: Comprehensive information about the brand, services, company details, and legal links, enhancing trust and 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 layout consists of a sticky navbar at the top, followed by six well-defined sections that guide the user through the content, ending with a comprehensive footer.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specified but can be implemented as needed (e.g., React Context or Zustand).

## IMPLEMENTATION STEPS
1. **Set up the Project**: Initialize a new Next.js project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Navbar Implementation**: Create a sticky navbar component with proper links and responsive behavior (hamburger menu for mobile).
3. **Section Development**:
   - Develop the Hero section with a full viewport height and center-aligned text.
   - Create the Stats Bar using Tailwind CSS for styling and responsive design.
   - Implement the Services section with a responsive grid layout of cards.
   - Construct the How It Works section with side-by-side flows for desktop and stacked for mobile.
   - Design the Before/After comparison section with toggle functionality.
   - Finish with a Footer that includes all necessary links and brand information.
4. **Integrate Animations**: Use framer-motion to implement subtle fade-in animations as users scroll through sections.
5. **Testing**: Ensure responsiveness and functionality across various devices and screen sizes. Test the smooth scroll behavior for anchor links.
6. **Deploy**: Prepare the application for deployment and host it on a suitable platform (e.g., Vercel).

## USER EXPERIENCE
Users will experience a seamless journey, starting with a compelling hero message that immediately communicates value. They can easily navigate to different sections via the sticky navbar, explore the services offered, and understand the process through visual flows. The before/after comparisons will help them appreciate the potential improvements in their job applications, culminating in a user-friendly footer that provides additional resources and links.
```