Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a minimalist landing page for an architecture studio that features a sophisticated entry animation. The primary purpose is to showcase the studio's identity and aesthetic through a clean interface, enhancing user engagement and leaving a lasting impression.

## CORE FEATURES
1. **Initial Animation**: A black screen covers the viewport with the studio's logo (IFGA) centered in white. After 1 second, the logo transitions to the top left, revealing a white background.
2. **Fixed Navigation**: The IFGA logo remains fixed in the corner as a navigation element on the landing page.
3. **Responsive Design**: The landing page is designed to function seamlessly on both desktop and mobile devices, ensuring accessibility and usability across platforms.
4. **Minimalist Layout**: The page emphasizes white space and typography, allowing for a clean and focused presentation of content.
5. **Single-page Structure**: The landing page contains essential sections without unnecessary complexity, focusing on the studio's offerings and aesthetic.

## 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 main layout features a central content area with the logo animation, followed by sections presenting the architecture studio's portfolio, services, and contact information, all laid out in a vertical stacking format with ample margins.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this simple landing page

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui for UI components.
2. **Create Initial Animation**:
   - Implement the black screen with centered logo using CSS animations.
   - Utilize CSS transitions or Framer Motion to create the smooth movement of the logo and the curtain wipe effect.
3. **Build Landing Page Structure**:
   - Create components for the navigation (logo), main content, and footer.
   - Ensure that the logo remains fixed in the corner post-animation.
4. **Style Components**:
   - Apply Tailwind CSS classes for layout, typography, and responsive design.
   - Ensure the primary color (#1978E5) is used appropriately for buttons and highlights.
5. **Test Responsiveness**: Verify that the landing page functions correctly across different devices and screen sizes, making adjustments as necessary.

## USER EXPERIENCE
Users will be greeted with a visually striking animation that sets the tone for the architecture studio's identity. The smooth transition from the initial black screen to the white landing page creates an engaging experience. Once the animation concludes, users can easily navigate the clean layout to explore the studio's offerings, ensuring a seamless and enjoyable interaction with the site.