Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project entails creating a minimalist landing page for an online t-shirt sales website. The landing page will effectively showcase products, highlight unique selling points, and encourage visitors to make purchases through clear calls to action.

## CORE FEATURES
1. **Hero Section**: A visually appealing hero section featuring the latest t-shirt designs and a prominent call-to-action button that encourages users to shop now.
2. **Product Showcase**: A section displaying a selection of featured t-shirts with images, brief descriptions, and prices to attract potential buyers.
3. **Benefits Section**: Highlight the unique selling propositions of the t-shirts, such as quality, design, and eco-friendliness, with engaging visuals and text.
4. **Testimonials**: A section for customer reviews and testimonials to build trust and credibility for the brand.
5. **Call to Action (CTA)**: A strong CTA section that encourages users to sign up for newsletters or promotions, enhancing engagement.
6. **Contact Information**: A simple contact form or information section for customer inquiries, including social media links.

## 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**: A one-column layout with sections stacked vertically, including a hero section at the top, followed by product showcases, benefits, testimonials, and a final CTA.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specifically required for a landing page, but consider using React's built-in state management for any dynamic components.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Folder Structure**: Organize the project into components, styles, and assets folders.
3. **Develop Hero Section**: Implement the hero section with a prominent headline, subheadline, images, and a CTA button styled with Tailwind CSS.
4. **Build Product Showcase**: Create a product showcase component that maps through an array of products, displaying images, names, and prices.
5. **Design Benefits Section**: Outline the benefits of the t-shirts using icons and text, ensuring it aligns with the minimalist aesthetic.
6. **Add Testimonials**: Create a testimonials component that displays customer feedback dynamically.
7. **Implement CTA Section**: Develop a CTA section that invites users to subscribe to a newsletter or follow on social media.
8. **Contact Information**: Provide a simple contact form for inquiries, ensuring it captures name, email, and message.
9. **Test Responsiveness**: Ensure that all components are responsive and look good on various screen sizes.
10. **Deploy**: Use a platform like Vercel or Netlify for deployment, ensuring the site is live and accessible.

## USER EXPERIENCE
Users will experience a seamless and intuitive journey through the landing page. The hero section will immediately capture their attention, leading them to explore featured products, understand the brand's benefits, and read customer testimonials. The clear CTAs will guide users towards making purchases or engaging further with the brand, all while maintaining a clean and minimalist aesthetic that enhances usability.