Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a comprehensive web application for an NGO organization that includes a user-friendly interface for visitors to learn about the organization, register for membership, and access social media links. The application will focus on clean design, ease of navigation, and responsiveness, ensuring that users can easily access information and connect with the organization.

## CORE FEATURES
1. **Hero Section**: A visually appealing hero area that introduces the NGO with a compelling tagline and call-to-action buttons for membership registration and social media links.
2. **About Us**: A section detailing the mission, vision, and values of the NGO, helping users understand the organization's purpose.
3. **Membership Registration**: An easy-to-use form allowing users to register for membership, with fields for personal information and a submit button.
4. **Social Media Integration**: Floating tabs for direct access to the NGO's Facebook, Instagram, YouTube, and WhatsApp, ensuring a seamless connection to social platforms.
5. **Contact Information**: A section with contact details and a simple form for inquiries, enhancing communication with potential members and supporters.
6. **Updates/News Section**: A dynamic area for posting updates or news events related to the NGO, keeping users informed about ongoing initiatives.

## 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 distinct sections for the hero, about, membership registration, social media links, contact information, and updates/news, organized in a vertical flow for easy scrolling.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API for managing global state, if necessary

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui components.
2. **Create Layout**: Develop the main layout structure using a single-page format, ensuring responsive design for all sections.
3. **Implement Hero Section**: Design the hero section with a strong call-to-action, incorporating the primary color and typography.
4. **Build About Us Section**: Write content and style the About Us section to reflect the NGO's mission and vision.
5. **Develop Membership Registration Form**: Create a form that captures user information, ensuring validation and user feedback.
6. **Add Social Media Floating Tabs**: Implement floating tabs for social media that remain visible during scrolling for easy access.
7. **Construct Contact Information Section**: Add contact details and a simple inquiry form, styling it to match the overall design.
8. **Create Updates/News Section**: Design a section for displaying news updates dynamically, considering future updates and content management.
9. **Test Responsiveness**: Ensure the application is fully responsive across different devices and screen sizes.
10. **Deployment Guide**: Prepare a guide for launching the website, covering steps for hosting, domain setup, and managing updates.

## USER EXPERIENCE
The user experience will be streamlined and intuitive, allowing users to easily navigate through the sections. The floating social media tabs will provide quick access to the NGO's social channels, while the membership registration form will be straightforward, encouraging user sign-ups. The minimalist design will focus on clarity and accessibility, ensuring that all information is readily available and engaging for visitors.