Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to provide a safe and structured community for women experiencing emotional fluctuations and borderline personality disorder (BPD). The objective is to create an inviting space that allows users to learn about the community, engage with its offerings, and seamlessly navigate through sections without excessive scrolling.

## CORE FEATURES
1. **Hero Section**: A visually appealing hero section that features a prominent call-to-action (CTA) button, inviting users to join the community.
2. **Community Offer**: A dedicated section that outlines the benefits of joining the community, presenting key features in a visually engaging manner.
3. **Responsive Design**: The page will be fully responsive, ensuring optimal viewing on both desktop and mobile devices.
4. **Smooth Scroll Navigation**: Users will experience a smooth scrolling effect that allows them to transition between sections easily.
5. **Contact Information**: A clear and accessible contact section for inquiries and support.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean design with ample white space and a minimal color palette that emphasizes typography.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability and reduce eye strain.
- **Layout**: 
  - A grid layout for the hero section, featuring a large card on the right for community information, with the CTA button prominently displayed on the left.
  - Subsequent sections will follow a single-column format for easy navigation.
- **Typography**: Use a sans-serif font for clarity, with a hierarchy that emphasizes headings, subheadings, and body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust component-based architecture.
- **Styling**: Tailwind CSS for utility-first styling that allows for rapid design adjustments.
- **UI Components**: Utilize shadcn/ui components for consistent design patterns.
- **State Management**: Not required for this static landing page.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui components to facilitate styling and component use.
3. **Create Components**:
   - **Hero Section**: Create a component for the hero section with the CTA button.
   - **Community Offer Section**: Develop a component that details the community benefits in a card format.
   - **Contact Section**: Create a simple contact form or display contact information.
4. **Implement Smooth Scroll**: Add smooth scrolling functionality for internal navigation links.
5. **Responsive Design**: Ensure all sections are responsive, utilizing Tailwind CSS classes to adjust layouts for varying screen sizes.
6. **Testing**: Test the landing page across different devices and browsers to ensure compatibility and responsiveness.

## USER EXPERIENCE
Users will be welcomed by an engaging hero section that succinctly introduces the community with a strong CTA. As they scroll down, they will encounter sections that clearly outline the community's values and offerings. Each section will be easily accessible through smooth scrolling, ensuring a pleasant and intuitive navigation experience, encouraging users to explore and ultimately join the community.