Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project aims to redesign the existing website, transforming it into a modern, minimalist landing page that effectively communicates the mission and services of GBI PRJ. The primary goal is to enhance user engagement through a clean design, intuitive navigation, and clear calls to action.

## CORE FEATURES
1. **Hero Section**: A captivating hero area that includes a concise headline, a brief description of the organization, and a prominent call-to-action button leading to contact or sign-up.
2. **About Us**: A section detailing the organization's mission, vision, and values, presented in a visually appealing format that encourages user engagement.
3. **Services Overview**: A showcase of the main services offered, with icons or images and brief descriptions to highlight each service effectively.
4. **Testimonials**: A section featuring quotes from beneficiaries or partners to build credibility and trust with visitors.
5. **Contact Form**: A simple and accessible contact form for inquiries, equipped with essential fields like name, email, and message.
6. **Footer**: A well-structured footer containing links to social media, a sitemap, and contact information.

## 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-column layout for mobile responsiveness, with sections stacked vertically and ample white space to enhance readability.

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

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Create React App with TypeScript and install Tailwind CSS.
2. **Create Components**: Develop reusable components for the Hero, About Us, Services, Testimonials, Contact Form, and Footer sections.
3. **Implement Styling**: Use Tailwind CSS to style components according to the design specifications, ensuring responsiveness and accessibility.
4. **Integrate Typography**: Import Inter from Google Fonts and apply it across all text elements.
5. **Setup Routing**: Implement React Router if necessary for any additional page navigation, ensuring a seamless user experience.
6. **Test Responsiveness**: Ensure all components are responsive and function correctly on various screen sizes and devices.
7. **Deploy**: Choose a hosting service (e.g., Vercel, Netlify) to deploy the landing page and make it live.

## USER EXPERIENCE
Users will experience a smooth and intuitive journey through the landing page. Upon arrival, they will be greeted by the hero section, guiding them toward the organization's mission and services. Each section will be easily navigable, with clear visual cues and calls to action. The contact form will facilitate direct communication, making it easy for users to engage with the organization. The minimalist design will promote focus and clarity, enhancing overall user satisfaction.