Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to serve as a conversion system that effectively communicates the value of Adrenyx, guiding users to understand its purpose, why it matters, and what actions to take next. The focus is on clarity, simplicity, and user engagement, ensuring that visitors grasp the offer within seconds.

## CORE FEATURES
1. **Hero Section**: A full-screen introduction featuring a bold headline, subtext, and two clear call-to-action buttons, accompanied by a real product visual.
2. **Problem Statement**: A succinct presentation of common user challenges that Adrenyx addresses, evoking recognition and connection.
3. **Solution Overview**: A structured explanation of Adrenyx's core offerings, including structured challenges, proof systems, and real tracking, displayed using icons and concise blocks.
4. **How It Works**: A simple, three-step process detailing the user journey, presented with clear visuals.
5. **Product Preview**: Real screenshots showcasing the product in action, including the feed, quest screen, and upload flow.
6. **Social Proof**: Early-stage testimonials and activity metrics to build trust and credibility.

## 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**: A structured flow from the hero section to problem identification, solution explanation, how it works, product preview, social proof, and a final call to action.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specified; use React's built-in state management as needed.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Create a new React project with TypeScript and install necessary dependencies including Tailwind CSS and shadcn/ui.
2. **Create the Hero Section**: Implement the full-screen layout with a bold headline, subtext, and buttons styled according to the design specifications.
3. **Develop the Problem Section**: Design a clean layout that presents user problems in a straightforward manner, ensuring no clutter.
4. **Build the Solution Overview**: Create a section with icons and blocks that clearly articulate what Adrenyx does.
5. **Design the How It Works Section**: Use simple visuals to depict the three-step process.
6. **Showcase Product Preview**: Integrate real screenshots to illustrate the product’s functionality.
7. **Add Social Proof**: Display early testimonials and activity metrics in a clean format.
8. **Construct the Final Call to Action**: Ensure a prominent, centered CTA that encourages users to start building consistency.
9. **Refine User Experience**: Conduct usability testing to ensure fast load times, smooth scrolling, and mobile responsiveness, adhering to UX rules outlined.
10. **Deploy the Landing Page**: Host the landing page on a suitable platform, ensuring it meets all technical and design requirements.

## USER EXPERIENCE
Users will be greeted with a clear, impactful hero section that conveys the essence of Adrenyx immediately. As they scroll down, they will encounter relatable problems, a straightforward solution overview, and a simple explanation of how to engage with the product. Real product visuals and social proof will enhance credibility, culminating in a strong call to action that motivates users to take the next step. The overall experience will prioritize clarity, consistency, and a sense of seriousness about the service offered.