Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a one-page, mobile-first landing page designed for an end-to-end technical content platform. The primary goal is to communicate the platform's measurable impact on speed, order, and consistency while establishing strong software credibility. The tone is technical yet readable, appealing to both industry professionals and engineering students.

## CORE FEATURES
- **Hero Section:** Engaging introductory copy highlighting the platform's purpose and benefits, including a primary CTA to request a demo and a secondary CTA to see the workflow.
- **Value Proposition:** Clearly articulates the benefits of reducing friction between technical and commercial teams, emphasizing standardized content and organized assets.
- **Use Cases:** Three distinct cards showcasing real-world applications in industrial marketing, sales/pre-sales, and operations/R&D.
- **How It Works:** A 5-step process illustrated with a stepper to guide users through content creation, review, and publishing.
- **Features Overview:** Six cards detailing key functionalities such as a structured editor, workflow processes, and asset management.
- **Metrics & FAQ:** Provides measurable outcomes and answers to common questions, reinforcing the platform's usability and effectiveness.

## DESIGN SPECIFICATIONS
- **Visual Style:** Minimalist design with a clean, simple aesthetic that emphasizes white space and modern typography. The layout should be structured for easy navigation and readability.
- **Color Mode:** Light theme with dark text on light backgrounds.
- **Layout:** 
  - Hero section at the top, followed by the value proposition.
  - A grid for use cases with three cards.
  - A horizontal stepper for the "How It Works" section.
  - A grid for features with six cards displayed.
  - A two-column table for benefits.
  - Technical section with a mini diagram.
  - FAQ section followed by a final CTA with a contact form.
- **Typography:** Use modern sans-serif fonts with a clear hierarchy to differentiate headings, subheadings, and body text.

## TECHNICAL REQUIREMENTS
- **Framework:** React with TypeScript
- **Styling:** Tailwind CSS for responsive and utility-first styling.
- **UI Components:** Utilize shadcn/ui components for a consistent design.
- **State Management:** Consider using React Context or Zustand for state management if needed.

## IMPLEMENTATION STEPS
1. **Set Up the Project:**
   - Initialize a new React project with TypeScript.
   - Install Tailwind CSS and shadcn/ui as dependencies.
   - Configure Tailwind CSS with appropriate paths and settings.

2. **Create the Landing Page Structure:**
   - Set up the main components: Hero, Value Proposition, Use Cases, How It Works, Features, Benefits, Technical Section, FAQ, and Final CTA.
   - Ensure a sticky navigation bar that anchors to each section.

3. **Build the Hero Section:**
   - Design the hero area with the provided H1, subtitle, bullets, and CTAs.
   - Use responsive design to ensure it looks great on mobile.

4. **Develop Each Section:**
   - Implement the value section, use cases with cards, stepper for the "How It Works", features grid, benefits table, technical section, and FAQ.
   - Add appropriate spacing and alignment to maintain a clean look.

5. **Implement CTA and Form:**
   - Design the final CTA section with a contact form, ensuring it captures name, company, email, and message.
   - Set up form handling to send demo requests.

6. **Style and Optimize:**
   - Apply Tailwind CSS classes for styling, following the color scheme and typography guidelines.
   - Optimize for performance and ensure responsiveness across devices.

7. **Test and Deploy:**
   - Conduct thorough testing for usability and responsiveness.
   - Deploy the landing page to your preferred hosting service.

## USER EXPERIENCE
The user journey begins with an engaging hero section that captures attention. Visitors can quickly navigate through the value proposition, use cases, and how the platform works, all while interacting with intuitive elements like cards and a stepper. The design emphasizes clarity and ease of use, ensuring that users can easily find information and understand the benefits of the platform. The final CTA encourages users to request a demo, guiding them towards conversion while maintaining a professional and technical tone throughout the experience.