Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for the informational portal of the Ministry of Ports and Airports, focusing on the National Biometrics Identification Policy. The landing page aims to provide users with clear and concise information about the policy, its benefits, and how it works, emphasizing security and efficiency in travel processes.

## CORE FEATURES
1. **Hero Section**: A visually appealing introduction that captures the essence of the policy, encouraging users to learn more about its benefits and operation.
2. **About the Initiative**: A detailed explanation of what the National Biometrics Identification Policy is, highlighting its objectives and importance in modernizing travel.
3. **How It Works**: A section that outlines the process of biometric identification in travel, showcasing its efficiency and security features.
4. **Benefits**: A summary of the key advantages of the policy for travelers, including faster processing times and enhanced security.
5. **FAQs**: A section addressing common questions about the policy, ensuring users have access to important information and clarifications.
6. **Call to Action (CTA)**: Prominent buttons encouraging users to download official documents or learn more about the policy.

## 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 layout includes a sticky header for navigation, a hero section with engaging visuals, followed by content sections that are vertically aligned for easy scrolling and readability. Each section will have clear headings, descriptions, and interactive elements.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Use React's built-in state management (useState) for any interactive elements such as FAQs

## IMPLEMENTATION STEPS
1. **Setup Project**:
   - Create a new React project using Create React App with TypeScript.
   - Install Tailwind CSS and configure it for the project.
   - Import Inter font from Google Fonts in the index.html file.

2. **Create Layout Components**:
   - Build a Header component that includes navigation links.
   - Implement a Hero component that captures the user's attention with a headline and engaging visuals.
   - Create individual sections for About, How It Works, Benefits, and FAQs.

3. **Implement State Management**:
   - Use useState for managing the active FAQ in the FAQ section, allowing users to expand and collapse answers.

4. **Design Implementation**:
   - Apply Tailwind CSS classes for styling according to the design specifications, ensuring proper use of the primary color and typography.
   - Ensure all interactive elements like buttons have the specified border-radius.

5. **Testing**:
   - Test the responsiveness of the landing page on various devices to ensure a seamless user experience.

6. **Deployment**:
   - Deploy the completed landing page using a platform like Vercel or Netlify for easy access.

## USER EXPERIENCE
Users will land on a visually engaging page that clearly outlines the policy's importance and functionality. The navigation is intuitive, allowing users to quickly jump to different sections. The hero section grabs attention, while the FAQ section addresses potential concerns, enhancing trust and clarity. CTAs are strategically placed to encourage user interaction and further exploration of the policy. The overall experience is designed to be smooth, informative, and encouraging, fostering a positive impression of the Ministry's initiative.