Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for the Masonic Lodge Igualdad No. 1, aimed at providing information about the lodge, its history, and its values, as well as engaging visitors with a blog section and contact information. The design will be inspired by the Grand Lodge of New York's website, incorporating elegant animations and a clean layout to enhance the user experience.

## CORE FEATURES
1. **Hero Section**: A visually impactful introduction featuring an aerial video of the temple and lodge activities, along with a welcoming message and the lodge logo.
2. **Our Lodge**: A dedicated section detailing the lodge's history, a gallery of important figures, and a timeline of Past Masters.
3. **Who We Are**: An introduction to the lodge's values, including integrity, brotherhood, respect, and service, with descriptive text for each value.
4. **Blog**: A section for news and events, populated initially with fictional articles and images related to Masonic activities.
5. **Discover Freemasonry**: Information about the history and significance of Freemasonry, tailored to include local context from Honduras.
6. **Contact Us**: A user-friendly contact form, along with a map, address, and phone numbers for inquiries.

## 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 will feature a top navigation bar with a transparent background, a hero section with full-width video, followed by section blocks for each feature with smooth scrolling animations.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies (React Router, Tailwind CSS, etc.).
2. **Create Components**: Build reusable components for the navigation bar, hero section, feature blocks, and footer.
3. **Implement Navigation**: Create a smooth scrolling navigation menu that shrinks upon scrolling down.
4. **Add Hero Section**: Embed the aerial video in the hero section and overlay a welcome message with the logo.
5. **Develop Section Content**: For each main section (Our Lodge, Who We Are, Blog, etc.), create corresponding components and populate them with placeholder content.
6. **Contact Form**: Implement a contact form with validation and integrate it with a backend service for form submissions.
7. **Styling**: Apply Tailwind CSS classes for styling and ensure all elements adhere to the specified design guidelines.
8. **Testing**: Test responsiveness and overall functionality across different devices and browsers.

## USER EXPERIENCE
Users will be greeted with an engaging hero section featuring a video that captures the essence of the lodge. As they scroll down, they will smoothly transition through sections that provide insight into the lodge's history, values, and current activities. The contact form will be easily accessible, encouraging visitors to reach out for more information. The design will prioritize clarity and ease of navigation, enhancing user interaction with elegant animations and a cohesive visual aesthetic.