Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for Mnemo, an open-source, privacy-first, offline-first desktop learning app designed for serious learners who seek a unified workspace for notes, mindmaps, spaced practice, and local AI. The site will focus on conveying the app's core benefits while encouraging users to download it from GitHub Releases.

## CORE FEATURES
1. **Hero Section**: A compelling introduction featuring the app's name, a one-line promise, and clear CTAs for downloading and viewing the project on GitHub, along with OS badges.
2. **Problem Statement**: A succinct description of the issues with fragmented study tools, emphasizing the need for a unified solution.
3. **Product Features**: Showcase 3-4 key features (block notes/editor, mindmaps, AI learning paths, local AI chat) with real screenshots to illustrate functionality.
4. **Privacy & Open Source Commitment**: Highlight the local-first approach, no telemetry, and the MIT license, ensuring users that their data remains private.
5. **Social Proof**: Display light social proof through GitHub activity or genuine quotes without fake testimonials.
6. **Technical Overview**: Briefly mention the tech stack used (e.g., .NET, Avalonia, SQLite) for transparency.

## 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 single-page layout with a smooth scroll to each section, featuring a hero at the top, followed by problem, product features, privacy commitment, social proof, technical overview, and footer.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for the landing page.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Components**: Build reusable components for the hero section, feature blocks, privacy strip, and footer.
3. **Implement Layout**: Use a single-page structure with React Router or scroll-based navigation to link sections.
4. **Design Styling**: Apply Tailwind CSS classes to ensure a minimalist design with the specified color, typography, and border radius.
5. **Add Content**: Populate each section with content based on the defined core messages and features.
6. **Optimize for Mobile**: Ensure responsiveness with media queries and responsive design principles, optimizing images and implementing lazy loading for performance.
7. **Test Functionality**: Review the site for usability, ensuring all links and CTAs work as intended.

## USER EXPERIENCE
Users will land on a visually appealing hero section that immediately communicates the app's purpose. As they scroll down, they will encounter the problem statement, followed by detailed descriptions of the product features with visuals. The privacy commitment assures them of the app's integrity, while light social proof fosters trust. The footer provides easy access to GitHub and related resources, concluding a smooth and informative user journey.