Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to present information about personal assets, including stocks, cryptocurrencies, gold, and dividends. The page will utilize scroll animations to engage users while displaying key data through pie charts and graphs. The goal is to provide a clean, informative experience that encourages visitors to explore and learn about personal finance.

## CORE FEATURES
1. **Hero Section**: A visually striking hero area that introduces the topic of personal wealth, featuring a compelling headline and a clear call-to-action button.
2. **Asset Overview**: A section that summarizes the different types of assets (stocks, crypto, gold, dividends) with engaging visuals and brief descriptions.
3. **Interactive Charts**: Dynamic pie charts and graphs that visually represent the distribution of personal assets and their performance.
4. **Educational Content**: Informative articles or sections that provide insights into each type of asset, helping users understand their benefits and risks.
5. **Testimonials**: A section featuring user testimonials or success stories to build credibility and engage visitors.
6. **Contact CTA**: A prominent call-to-action encouraging users to subscribe for updates or contact for more information.

## 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 will feature a vertical scroll with sections stacked one below the other, utilizing full-width sections for the hero and interactive charts, while maintaining a clear hierarchy of information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API (if needed for managing state across components)

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS along with any necessary dependencies.
2. **Create the Hero Section**: Design and implement the hero section with a background image or color, headline, and CTA button styled with the primary color and typography specifications.
3. **Develop the Asset Overview Section**: Create components for each asset type, incorporating visuals and descriptions. Use cards with rounded borders for a cohesive look.
4. **Integrate Interactive Charts**: Utilize a chart library (like Chart.js or Recharts) to create dynamic pie charts and graphs. Ensure these are responsive and visually appealing.
5. **Add Educational Content**: Implement sections for articles or insights, ensuring they are easy to read and navigate.
6. **Implement Testimonials**: Design a testimonial slider or static section to display user experiences, enhancing trust.
7. **Create the Contact CTA**: Develop a contact form or subscription section that stands out, encouraging user engagement.
8. **Ensure Responsiveness**: Test the application on various devices and screen sizes, adjusting styles as necessary to maintain usability and aesthetic appeal.

## USER EXPERIENCE
The user experience will focus on smooth scrolling and engaging animations as users navigate through sections. Key interactions will include hovering over charts to reveal data points, clicking on the CTA buttons for more information or to subscribe, and easy navigation through the content. The minimalist design will ensure that users can focus on the information presented without distractions, creating a seamless educational experience about personal wealth management.