Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves recreating a minimalist landing page inspired by the layout of an existing website, focusing on a two-column grid and large typography. The primary goal is to build a visually appealing and user-friendly page using React, Tailwind CSS, and Framer Motion, emphasizing simplicity and clarity.

## CORE FEATURES
1. **Hero Section**: A prominent hero area featuring a large headline, subheadline, and a call-to-action button that encourages user engagement.
2. **Two-Column Grid**: Main content laid out in a two-column structure, allowing for a balanced presentation of text and visuals.
3. **Large Typography**: Utilization of oversized fonts for headings and clear, legible text for body content to create an impactful visual hierarchy.
4. **Smooth Animations**: Incorporation of Framer Motion for transitions and animations to enhance user interaction and make the experience dynamic.
5. **Contact Section**: A simple contact form or contact information area to facilitate user inquiries and engagement.
6. **Responsive Design**: Ensuring the layout adapts seamlessly across different screen sizes for optimal user experience on both desktop and mobile devices.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design with a clean layout, abundant white space, and a limited color palette that emphasizes typography.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and a fresh aesthetic.
- **Layout**: The main layout consists of a hero section at the top, followed by a two-column grid for the content. The contact section will be at the bottom.
- **Typography**: Use a modern sans-serif font for headings (e.g., 'Inter' or 'Montserrat') and a clean serif or sans-serif font for body text (e.g., 'Roboto' or 'Lora') to maintain a professional look.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling
- **UI Components**: Utilize shadcn/ui for pre-built components to speed up development
- **State Management**: Not necessary for this landing page; simple props and local state will suffice

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and Framer Motion using npm or yarn.
2. **Configure Tailwind CSS**: Set up Tailwind by creating a configuration file and including it in your CSS entry file.
3. **Create Component Structure**: Develop reusable components for the Hero, Two-Column Grid, and Contact sections.
4. **Implement Layout**: Use CSS grid or flexbox to create the two-column layout within the main content area.
5. **Add Typography and Styling**: Apply the chosen fonts and Tailwind classes to ensure the design adheres to the specified visual style.
6. **Integrate Framer Motion**: Add animation effects to components, such as fade-in or slide effects, to enhance user engagement.
7. **Test Responsiveness**: Ensure that the layout is responsive, adjusting elements for various screen sizes.
8. **Deploy**: Choose a hosting solution (e.g., Vercel or Netlify) to deploy the landing page and make it accessible online.

## USER EXPERIENCE
The user experience focuses on simplicity and ease of navigation. Users will be greeted by a captivating hero section that draws them in, followed by engaging content laid out in a structured format. Smooth animations will guide their attention as they scroll through the page, and the contact section will provide a straightforward way for users to reach out. The responsive design ensures that the experience remains consistent across devices, making it easy for users to engage with the content.