Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a single-page landing page designed to present an institution's philosophy, including its mission, vision, and objectives, alongside a catalog of specific services. The focus is on providing a clean and minimal user experience optimized for mobile devices, ensuring easy navigation and engagement with actionable buttons linked to social media and WhatsApp.

## CORE FEATURES
1. **Hero Section**: A captivating introduction that outlines the institution's core values and invites users to explore further.
2. **Institutional Philosophy**: Dedicated sections for Mission, Vision, and Objectives, presented in a clear and engaging manner.
3. **Service Catalog**: A comprehensive list of services offered, each with a brief description to inform users effectively.
4. **Mobile Optimization**: A mobile-first design approach that ensures the site is fully responsive and provides a seamless experience on smartphones.
5. **Social Media Integration**: Direct action buttons that link to social media platforms and WhatsApp, promoting easy user engagement.
6. **Call to Action (CTA)**: Strategically placed CTAs to encourage user interaction, guiding them towards desired actions.

## 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 main layout will feature a fixed top navigation bar, followed by the hero section, philosophy sections stacked vertically, the service catalog, and a footer with social media links.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Layout Structure**: Design the main layout with a navigation bar, hero section, and sections for philosophy and services using Tailwind CSS for styling.
3. **Integrate Typography and Colors**: Apply the Inter font from Google Fonts and set the primary color to #1978E5 across the layout.
4. **Develop Hero Section**: Create an engaging hero section that captures the essence of the institution.
5. **Build Philosophy Sections**: Develop the mission, vision, and objectives sections, ensuring clarity and readability.
6. **Catalog of Services**: Implement a dynamic list for the services offered, allowing easy updates.
7. **Optimize for Mobile**: Ensure all components are responsive and provide an optimal viewing experience on mobile devices.
8. **Add Social Media Links**: Integrate buttons that link to social media platforms and WhatsApp, styled with the primary color.
9. **Test and Deploy**: Conduct thorough testing on various devices and browsers, then deploy the landing page to a suitable hosting service.

## USER EXPERIENCE
Users will start at the hero section, quickly understanding the institution's mission. They can scroll down to learn about the philosophy, view the services offered, and easily navigate to social media platforms or WhatsApp for direct engagement. The minimalist design ensures a smooth and distraction-free experience, prompting users to take action through well-placed CTAs.