Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a minimalist landing page designed to help users support their mothers through various resources, tips, and community engagement. It focuses on delivering valuable content in a simple, accessible format, encouraging visitors to explore and connect.

## CORE FEATURES
1. **Hero Section**: A visually appealing introduction that conveys the mission of the site with a clear call-to-action (CTA) encouraging users to engage with the content.
2. **Resource Library**: A curated collection of articles, videos, and tips aimed at helping individuals support their mothers in various aspects of life.
3. **Testimonials**: A section showcasing stories or quotes from users who have benefited from the resources, enhancing credibility and connection.
4. **Community Forum**: A space for users to share their experiences, ask questions, and offer support to one another.
5. **Contact Form**: A simple form allowing users to reach out for more personalized support or inquiries.
6. **Newsletter Signup**: An option for users to subscribe to updates, tips, and resources directly in their inbox.

## 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 a single-page scrolling design, featuring distinct sections for the hero, resources, testimonials, community forum, and contact information.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Basic Structure**: Develop the main layout components for the hero, resource library, testimonials, community forum, and contact form.
3. **Implement Hero Section**: Design the hero section with an engaging background, a strong headline, and a prominent CTA button.
4. **Build Resource Library**: Create a grid layout to showcase various resources with links to articles or videos.
5. **Add Testimonials Section**: Implement a simple carousel or grid to display user testimonials.
6. **Develop Community Forum**: Set up a discussion board layout for users to interact (consider using a third-party service or a simple form for submissions).
7. **Create Contact Form**: Develop a contact form component that captures user inquiries.
8. **Integrate Newsletter Signup**: Implement a form for users to subscribe to updates, connecting it to an email service provider.
9. **Test Responsiveness**: Ensure that the layout and components look good on different screen sizes.

## USER EXPERIENCE
Users will be greeted by a welcoming hero section that encourages them to explore resources. As they scroll, they'll find valuable content presented in an organized manner, with easy navigation to testimonials and community sections. The contact form and newsletter signup will be easily accessible, making it simple for users to reach out or stay updated. The minimalist design ensures that interactions are straightforward, enhancing the overall user experience.