Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to market and sell compressed shirts for gym enthusiasts. The landing page will feature a minimalist aesthetic with a focus on clean design, engaging animations, and a responsive layout, ensuring a smooth user experience across devices.

## CORE FEATURES
1. **Hero Section**: An eye-catching introductory section showcasing the product with a high-quality image and a compelling tagline.
2. **Product Features**: Highlight the key benefits of the compressed shirts, including material quality, performance benefits, and style options.
3. **Customer Testimonials**: A section dedicated to user reviews and testimonials to build trust and credibility.
4. **Call to Action (CTA)**: Prominent buttons encouraging visitors to purchase or learn more about the shirts, strategically placed throughout the page.
5. **Contact Form**: A simple form for inquiries or custom requests, allowing users to connect easily.
6. **Responsive Design**: Ensure the landing page looks great on all devices, including desktops, tablets, and smartphones.

## 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 will be structured in a single-column format with sections stacked vertically. The hero section will be at the top, followed by product features, testimonials, CTA, and the contact form.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS following the official documentation.
2. **Create Layout**: Structure the landing page with sections for the hero, features, testimonials, CTA, and contact form.
3. **Integrate Typography**: Import Inter font from Google Fonts and apply it to headings and body text using Tailwind CSS classes.
4. **Style Components**: Use Tailwind CSS to style buttons, cards, and inputs with the specified primary color and border radius.
5. **Add Animations**: Implement CSS animations and hover effects for buttons and images to enhance interactivity.
6. **Ensure Responsiveness**: Use Tailwind’s responsive utilities to ensure the layout adapts seamlessly to different screen sizes.

## USER EXPERIENCE
Users will be greeted with a visually appealing hero section that captures their attention. As they scroll down, they will encounter easy-to-read product features and real-life testimonials that reinforce the product's value. The CTA will stand out, encouraging immediate purchases, while the contact form provides a way for users to engage further or ask questions. The overall experience will be smooth and intuitive, with responsive design ensuring usability across all devices.