Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project aims to upgrade the existing not-for-profit website sina.pk into a modern, minimalist landing page that effectively communicates the organization's mission and engages visitors. The focus will be on providing essential information while encouraging user interaction through clear calls to action.

## CORE FEATURES
1. **Hero Section**: A prominent introductory section that features the organization's mission statement and a compelling call-to-action button to encourage user engagement.
2. **About Us**: A concise section detailing the organization's background, vision, and impact, enhancing transparency and trust.
3. **Programs/Services**: A brief overview of key programs or services offered, highlighting their benefits and importance.
4. **Testimonials**: A section to showcase positive feedback from beneficiaries or partners, reinforcing credibility and community support.
5. **Get Involved**: A clear call-to-action for donations or volunteer opportunities, encouraging visitor participation and support.
6. **Contact Information**: An easily accessible section for users to reach out, including a contact form and social media links.

## 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 vertical scroll structure, where each section smoothly transitions into the next, ensuring a cohesive user experience.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for a simple landing page, but Context API can be used if needed for managing any global state.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript using Create React App.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project for styling and UI components.
3. **Create Layout Components**: Build reusable layout components such as Header, Footer, and Section components to maintain a consistent design.
4. **Implement Hero Section**: Design the Hero section using Tailwind CSS, including a catchy headline, a brief description, and a prominent call-to-action button.
5. **Develop Each Section**: Create components for About Us, Programs, Testimonials, Get Involved, and Contact, ensuring they align with the minimalist aesthetic.
6. **Responsive Design**: Ensure all components are responsive and adapt to different screen sizes using Tailwind's responsive utilities.
7. **Testing**: Test the website on various devices and browsers to ensure functionality and performance.
8. **Deployment**: Deploy the completed landing page using a service like Vercel or Netlify for easy access.

## USER EXPERIENCE
Visitors will navigate through the landing page seamlessly, engaging with each section to learn about the organization's mission and initiatives. The Hero section will capture attention immediately, while the clear calls-to-action will guide users toward getting involved, whether through donations or volunteering. The minimalist design will reduce distractions, allowing users to focus on the content and take meaningful actions that support the organization.