Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a versatile and beautifully structured landing page designed to showcase contact information and photos without the need for an admin panel. The landing page will focus on simplicity and ease of navigation, providing a clean aesthetic that highlights the content.

## CORE FEATURES
1. **Hero Section**: A visually striking hero area that presents the brand message and a clear call-to-action (CTA).
2. **Contact Information**: A dedicated section to display contact details, including phone numbers, email addresses, and social media links.
3. **Photo Gallery**: A visually appealing gallery to showcase images, allowing users to view and appreciate the content easily.
4. **Responsive Design**: Ensures the landing page looks great on all devices, providing an optimal viewing experience on mobile, tablet, and desktop.
5. **CTA Section**: A clear call-to-action prompting users to get in touch or take the next step, enhancing conversion rates.

## 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 landing page will feature a top navigation bar, followed by the hero section, contact information section, photo gallery, and concluding with the CTA section at the bottom.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not necessary for this project due to its static nature.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Create a new React project using TypeScript and install Tailwind CSS and shadcn/ui for component styling.
2. **Create the Layout**: Define the main layout structure using Flexbox or Grid in Tailwind CSS to organize the header, hero, contact, photo gallery, and CTA sections.
3. **Implement the Hero Section**: Design the hero section with a prominent title, subtitle, and a CTA button using the specified typography and primary color.
4. **Add Contact Information Section**: Create a clear layout for contact details that is easy to read and visually appealing.
5. **Build the Photo Gallery**: Use a grid layout to display images, ensuring proper spacing and alignment to maintain a minimalist aesthetic.
6. **Insert the CTA Section**: Conclude with a strong CTA that encourages users to reach out or follow the brand on social media.
7. **Test Responsiveness**: Ensure that the landing page looks and functions well on various screen sizes using responsive design techniques.

## USER EXPERIENCE
The user will first encounter a captivating hero section that clearly communicates the brand's message. They can easily access contact information and view the photo gallery. The clear and prominent CTA at the bottom encourages users to connect, enhancing the overall user experience and driving engagement. The clean design and intuitive navigation will ensure users can find what they need quickly and effortlessly.