Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a minimalist landing page designed to showcase personal profiles on various social media platforms, inspired by the aesthetics of Cobalt.tools. The page will feature links to Instagram, GitHub, and YouTube, while maintaining a clean and simple design with a focus on typography and user engagement.

## CORE FEATURES
1. **Hero Section**: A prominent section at the top featuring a brief introduction and a call-to-action button that directs users to the social media links.
2. **Social Media Links**: Clearly displayed icons and links for Instagram, GitHub, and YouTube, encouraging visitors to connect on these platforms.
3. **About Section**: A brief description of the individual or brand, providing context and background information.
4. **Contact Form**: A simple form allowing users to get in touch via email, enhancing engagement and communication.
5. **Responsive Design**: The layout will be optimized for both desktop and mobile devices, ensuring a smooth user experience across different screen sizes.

## 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 consist of a full-width hero section followed by stacked sections for social media links, about information, and the contact form, all centered and spaced evenly.

## 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. **Set Up Project**: Initialize a new React project with TypeScript using Create React App.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project for styling and component use.
3. **Create Components**: Develop the following components:
   - `Hero`: Includes the introduction and CTA button.
   - `SocialLinks`: Displays icons and links for Instagram, GitHub, and YouTube.
   - `About`: A section for personal or brand information.
   - `ContactForm`: A form for user inquiries.
4. **Style Components**: Use Tailwind CSS classes to style each component according to the design specifications.
5. **Responsive Design**: Ensure all components are responsive and look good on mobile devices.
6. **Testing**: Conduct testing to ensure all links work and the contact form submits correctly.

## USER EXPERIENCE
Visitors will land on the page and immediately see the hero section with a brief introduction and a clear call-to-action button. As they scroll down, they will encounter easy-to-navigate links to social media profiles, followed by an about section that provides context. The contact form will allow users to engage directly, enhancing the overall experience and encouraging interaction. Each section will be visually distinct yet cohesive, ensuring a smooth flow throughout the landing page.