Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a minimalist landing page designed to promote the Hack4SDG initiative. The site will feature a modern aesthetic with engaging animations, aiming to attract participants to the event through a clear message and intuitive design. The primary goal is to convey the mission of Hack4SDG while facilitating user registration.

## CORE FEATURES
1. **Hero Section**: A visually striking hero area that fades in as users scroll, featuring the event title and a brief tagline that captures the essence of the initiative.
2. **Mission Statement**: A dedicated section outlining the mission of Hack4SDG, emphasizing its role as a catalyst for the United Nations Sustainable Development Goals.
3. **Registration Form**: A user-friendly form allowing users to input their team name and institution to secure their spot at the event, complete with submission functionality.
4. **Contact Information**: A section displaying contact details for inquiries, ensuring potential participants can easily reach out for more information.
5. **Responsive Design**: The landing page will be fully responsive, providing an optimal viewing experience across devices.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, emphasizing typography and animations to enhance user engagement.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and visual comfort.
- **Layout**: The main structure includes a full-height hero section, followed by a manifesto and registration sections, organized in a single scrolling format.
- **Typography**: Utilize a combination of Google Fonts for headers and body text:
  - Hero Text: Large, bold font for the event title.
  - Section Headers: Medium weight for clarity.
  - Body Text: Simple and clean for easy reading.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building the user interface.
- **Styling**: Tailwind CSS to facilitate responsive design and rapid development.
- **UI Components**: Utilize shadcn/ui for clean and modern UI elements.
- **State Management**: Use React's built-in state management for handling form submissions and user interactions.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project for styling and UI components.
3. **Create Layout Components**: Build components for the hero section, mission statement, registration form, and contact information.
4. **Implement Scroll Effects**: Add animations that trigger as users scroll to enhance visual appeal (e.g., fading in text).
5. **Style with Tailwind**: Apply Tailwind CSS classes to ensure a cohesive minimalist design across all components.
6. **Test Responsiveness**: Verify that the landing page displays correctly on various devices and screen sizes.
7. **Deploy**: Host the landing page on a platform like Vercel or Netlify for public access.

## USER EXPERIENCE
Users will be greeted with a captivating hero section that draws them in with a fading effect. As they scroll, they will gain insight into the mission behind Hack4SDG before reaching the registration form. The form will be straightforward, with clear labels and an easy submission process, followed by contact details for any inquiries. The entire experience will be smooth and visually appealing, encouraging participation in the initiative.