Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to create a minimalist landing page showcasing a user’s photo in Udaipur, specifically designed to capture the essence of the Gemini zodiac sign. The page will serve as a visual portfolio piece, emphasizing simplicity and elegance, while engaging visitors through a clean design and clear call-to-action.

## CORE FEATURES
1. **Hero Section**: A visually striking introduction with the featured photo prominently displayed, accompanied by a catchy tagline that highlights the connection to Gemini.
2. **About the Photo**: A brief description of the photo's significance, its location in Udaipur, and how it relates to the Gemini theme.
3. **Gallery Section**: A collection of additional images from Udaipur, displayed in a simple grid layout, allowing users to explore more of the visual story.
4. **Call to Action (CTA)**: A prominent button encouraging visitors to learn more or get in touch, driving engagement.
5. **Contact Form**: A simple form allowing visitors to reach out for inquiries or collaborations, enhancing interactivity.

## 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 be structured with a full-width hero section at the top, followed by the about section, gallery grid, CTA, and a simple contact form at the bottom.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for efficient styling and responsiveness.
- **UI Components**: shadcn/ui for reusable and customizable UI elements.
- **State Management**: Not required for this landing page due to its simplicity.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript using Create React App or Vite.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui using npm or yarn.
3. **Create Components**:
   - Hero Section: Create a component for the hero image and tagline.
   - About Section: Develop a component to display the description of the photo.
   - Gallery Section: Implement a grid layout to showcase additional images.
   - CTA Button: Create a reusable button component styled with Tailwind CSS.
   - Contact Form: Build a simple form component to collect user inquiries.
4. **Implement Routing**: Use React Router if needed for navigation, although a single-page layout may not require it.
5. **Style Components**: Apply Tailwind CSS classes to style components according to the design specifications.
6. **Test Responsiveness**: Ensure all sections are responsive and visually appealing on various screen sizes.

## USER EXPERIENCE
Users will land on a visually captivating page that immediately showcases the photo in Udaipur. The hero section will draw attention, inviting users to scroll down to learn more about the photo's significance. The gallery will allow users to explore more images effortlessly, while the CTA will encourage further engagement. The contact form will be straightforward, ensuring that users can easily reach out for inquiries or collaborations. The overall experience will be smooth, intuitive, and aesthetically pleasing, aligning with the minimalist theme.