Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to provide information about finance, aimed at engaging users and encouraging them to explore financial topics. The website will feature a clean and minimalist design that highlights key financial information and resources, ensuring a user-friendly experience.

## CORE FEATURES
1. **Hero Section**: A visually appealing introduction that captures the essence of finance, featuring a catchy tagline and a call-to-action button.
2. **Financial Topics Overview**: A section that briefly describes various financial topics such as budgeting, investing, and saving, providing users with a quick reference.
3. **Resources and Tools**: A compilation of helpful resources, such as calculators, guides, and articles, to assist users in their financial journey.
4. **Testimonials**: A section showcasing user testimonials to build trust and credibility regarding the information provided.
5. **Contact Form**: A simple contact form for users to reach out for more information or inquiries.

## 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 be structured in a single-column format with a clear hierarchy, featuring a full-width hero section at the top, followed by sections stacked vertically, ensuring easy navigation and flow of information.

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

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Create a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Layout Components**: Develop components for the hero section, topics overview, resources, testimonials, and contact form.
4. **Style Components**: Apply Tailwind CSS classes to achieve the minimalist design, using the defined primary color and typography.
5. **Implement Responsive Design**: Ensure the layout adjusts seamlessly across different screen sizes using responsive utility classes in Tailwind CSS.
6. **Test Functionality**: Review each component to ensure proper rendering and functionality on various devices.

## USER EXPERIENCE
Users will land on a visually striking hero section that clearly communicates the purpose of the website. As they scroll down, they will encounter engaging content about financial topics, followed by practical resources. The testimonials will provide social proof, enhancing trust. Finally, the contact form will offer a straightforward way for users to connect for further inquiries, ensuring a smooth and user-centric experience throughout the site.