Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a minimalist landing page similar to awwwards-style websites, designed to showcase a portfolio or design studio. It aims to provide a clean and engaging user experience with a focus on visual impact, typography, and simple navigation.

## CORE FEATURES
1. **Hero Section**: A striking introductory area with a captivating headline, subheading, and a prominent call-to-action button to draw users in.
2. **Portfolio Showcase**: A visually appealing grid layout displaying project thumbnails with hover effects, linking to detailed project pages.
3. **About Section**: A brief introduction to the brand or designer, including a mission statement and key values.
4. **Testimonials**: A section for user feedback or client testimonials, enhancing credibility with quotes and names.
5. **Contact Form**: A simple, user-friendly contact form for inquiries, designed to encourage interactions.
6. **Call to Action (CTA)**: Strategically placed CTA buttons throughout the page to guide users towards desired actions.

## 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 should consist of a full-width hero section at the top, followed by a grid of portfolio items, an about section, testimonials in a carousel format, and a contact form at the bottom.

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

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using Create React App with TypeScript. Install Tailwind CSS and configure it.
2. **Create Components**: Build reusable components for the hero section, portfolio items, about section, testimonials, and contact form.
3. **Implement Layout**: Arrange components according to the specified layout, ensuring responsiveness for different screen sizes.
4. **Style Components**: Use Tailwind CSS for styling, ensuring to apply the primary color, typography, and border radius as specified.
5. **Add Content**: Populate the sections with placeholder content, ensuring the design remains clean and uncluttered.
6. **Optimize for Performance**: Ensure images are optimized for web use and the site is performant with fast load times.
7. **Test Responsiveness**: Check how the landing page looks on various devices and make adjustments as necessary.

## USER EXPERIENCE
Users will be greeted with a visually striking hero section that invites them to explore more. The portfolio showcase will enable users to view projects in a clean, grid format, enhancing engagement. The about section provides context, while testimonials build trust. Finally, the contact form allows for easy communication, ensuring a smooth user experience throughout the site.