Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a minimalist portfolio landing page designed to showcase an individual's work, skills, and personal brand. The focus will be on clean design and typography, providing a simple yet effective presentation of content to attract potential clients or employers.

## CORE FEATURES
1. **Hero Section**: A prominent introduction area featuring the user's name, tagline, and a call-to-action (CTA) button leading to a contact form or project showcase.
2. **About Section**: A brief biography that highlights the user's background, skills, and professional journey, establishing a personal connection with visitors.
3. **Portfolio Gallery**: A visually appealing grid layout displaying featured projects with images and brief descriptions, allowing users to click for more details.
4. **Testimonials**: A section dedicated to quotes from clients or colleagues that demonstrate the user's credibility and the quality of their work.
5. **Contact Form**: A simple and intuitive form for visitors to reach out, ensuring an easy way to connect for inquiries or collaboration.
6. **Footer**: Includes social media links and copyright information, ensuring users can easily find additional ways to connect.

## 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 consists of a full-width hero section at the top, followed by stacked sections for About, Portfolio Gallery, Testimonials, and Contact Form, all organized for easy scrolling and navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not necessary for this static landing page but can be incorporated if interactivity is desired later.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript using Create React App or Vite. Install Tailwind CSS and configure it.
2. **Create the Layout**: Structure the landing page using functional components for each section (Hero, About, Portfolio, Testimonials, Contact).
3. **Style the Components**: Utilize Tailwind CSS for styling, applying the specified design specifications, including the primary color, typography, and border radius.
4. **Implement the Hero Section**: Add the user's name, tagline, and a CTA button that directs to the contact form.
5. **Develop the Portfolio Section**: Create a grid layout to display the projects, integrating image placeholders and text descriptions.
6. **Add the Testimonials Section**: Include a carousel or static display of testimonials from clients or colleagues.
7. **Build the Contact Form**: Design a user-friendly contact form with fields for name, email, and message, styled according to the design specifications.
8. **Finalize Responsive Design**: Ensure all sections are responsive and visually appealing on various screen sizes using Tailwind's responsive utilities.
9. **Test Functionality**: Verify that all links and buttons function correctly, and ensure the form collects and displays input as intended.

## USER EXPERIENCE
The user experience will focus on intuitive navigation and visual clarity. Visitors will be greeted by a striking hero section that draws attention immediately. As they scroll, they will encounter well-organized sections, each leading seamlessly to the next, allowing for an engaging exploration of the user's portfolio. The contact form will be straightforward, encouraging users to reach out with minimal friction. The overall goal is to create a smooth, enjoyable journey that leaves a memorable impression.