Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed for an affiliate product sales website. The main purpose is to showcase affiliate products with links and images, encouraging users to make purchases through these links. The design will be classic and minimalist, focusing on clarity and ease of navigation.

## CORE FEATURES
1. **Hero Section**: An eye-catching introduction featuring a prominent product image, a brief description, and a call-to-action (CTA) button that directs users to the affiliate link.
2. **Product Showcase**: A section displaying a grid of affiliate products, each with an image, title, brief description, and a CTA button for easy access to purchase.
3. **Benefits Section**: Highlight the benefits of the products or services being promoted, enhancing the value proposition for potential customers.
4. **Testimonials**: A section for customer reviews or testimonials to build trust and credibility, showcasing satisfied customers' experiences with the products.
5. **Contact Information**: A simple contact form or section for inquiries, allowing users to reach out for more information or support.
6. **Footer**: A minimal footer with links to social media, privacy policy, and terms of service.

## 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 follow a single-column structure, with the hero section at the top, followed by product showcases, benefits, testimonials, and the contact section, ensuring a smooth flow of information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not required for this simple landing page, as it does not involve complex state handling.

## 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 styling and UI components.
3. **Create Layout Structure**: Build the main layout with a single-column design using Tailwind classes for spacing and alignment.
4. **Implement Hero Section**: Design and code the hero section with a product image, description, and CTA button.
5. **Build Product Showcase**: Create a grid layout for displaying affiliate products with images, titles, and CTA buttons.
6. **Add Benefits and Testimonials**: Develop sections for product benefits and customer testimonials, ensuring they align with the minimalist style.
7. **Create Contact Section**: Implement a simple contact form or details for users to reach out.
8. **Style Components**: Apply Tailwind CSS styles based on the design specifications, ensuring responsiveness across devices.
9. **Test Functionality**: Ensure all links and buttons are functional, and the layout performs well on various screen sizes.
10. **Deploy**: Use a service like Vercel or Netlify to deploy the landing page.

## USER EXPERIENCE
The user experience will focus on simplicity and clarity. Users will be greeted with a compelling hero section, followed by a seamless browsing experience through the product showcases and benefits. The testimonials will enhance trust, and the contact section will provide easy access for inquiries. The minimalist design will ensure that users can navigate effortlessly, with clear CTAs guiding them towards making a purchase through the affiliate links.