Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for "Studio Pixel," a digital marketing agency specializing in branding, social media management, and strategic marketing solutions. The primary goal is to present the agency's services, showcase their expertise, and encourage potential clients to initiate contact.

## CORE FEATURES
1. **Hero Section**: A visually striking introduction with a compelling headline and subtext that encapsulates the agency’s mission, along with a clear CTA ("Contact Us").
2. **About Us Section**: An overview of the agency, detailing its vision, mission, and the unique value it offers to clients.
3. **Services Offered**: A section dedicated to outlining the various services provided, such as branding, social media management, campaign management, content creation, and website design.
4. **Client Testimonials**: A rotating carousel of quotes from satisfied clients to build trust and credibility.
5. **Portfolio Section**: Showcase of previous projects with images and brief descriptions to demonstrate the agency's expertise and results.
6. **Contact Form**: A straightforward form for potential clients to reach out, including fields for name, contact information, and inquiry type.

## 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 follow a single-column structure with clear sections that flow naturally from one to the next, ensuring ease of navigation and visual clarity.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React's built-in context API for handling any state needs.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for component styling.
3. **Create Components**: Develop functional components for each section (Hero, About Us, Services, Testimonials, Portfolio, Contact).
4. **Style Components**: Use Tailwind CSS classes to implement design specifications, ensuring consistent padding, margins, and typography.
5. **Add Functionality**: Implement form handling for the contact form, ensuring validation and state management.
6. **Optimize for Responsiveness**: Ensure the design is responsive across different devices using Tailwind’s responsive utility classes.

## USER EXPERIENCE
Users will first encounter the hero section, which grabs their attention and invites them to learn more about Studio Pixel. As they scroll down, they will find information about the agency, detailed descriptions of services, and testimonials, all designed to build interest and trust. The seamless flow encourages users to reach out through the contact form, facilitating easy communication.

This landing page will effectively convey Studio Pixel's brand identity while providing a user-friendly experience that drives conversions.