Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a landing page for a digital product store named "Step Positif." The primary purpose of this website is to showcase digital products, engage visitors, and drive conversions through a compelling layout that emphasizes clarity and simplicity.

## CORE FEATURES
1. **Hero Section**: A visually striking hero area that introduces Step Positif, featuring a brief tagline and a prominent call-to-action (CTA) button leading to product listings or sign-up.
2. **Product Showcase**: A section displaying featured digital products with images, descriptions, and purchase links that guide users to learn more or buy.
3. **Benefits Section**: Highlight the unique selling points of the digital products, explaining why customers should choose Step Positif.
4. **Testimonials**: A section for customer reviews and testimonials to build trust and credibility for potential buyers.
5. **Contact Form**: An easy-to-use contact form for inquiries, allowing users to reach out for support or additional information.
6. **Footer**: A comprehensive footer with links to social media, privacy policy, terms of service, and a newsletter subscription option.

## 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 consist of a top navigation bar, followed by the hero section, product showcase, benefits, testimonials, contact form, and footer, ensuring a smooth vertical flow for users.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this static landing page but can be integrated if dynamic features are added later.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Layout Components**: Develop reusable components for the header, footer, and main sections (Hero, Product Showcase, Benefits, Testimonials, Contact).
3. **Implement Navigation**: Create a responsive navigation bar that links to each section of the landing page.
4. **Design Hero Section**: Add a captivating hero image or background with the tagline and CTA button styled with the primary color.
5. **Build Product Showcase**: Integrate a grid layout to display products with images and descriptions.
6. **Add Testimonials**: Create a section for customer testimonials that can be easily updated.
7. **Implement Contact Form**: Build a simple contact form with fields for name, email, and message.
8. **Style Components**: Use Tailwind CSS classes to style all components according to the design specifications.
9. **Responsive Design**: Ensure all sections are responsive and look great on various devices.
10. **Deploy**: Publish the landing page on a hosting platform to make it live.

## USER EXPERIENCE
Key user interactions include navigating through the site using the top navigation, clicking on the CTA buttons to view products, reading testimonials to gain trust, and filling out the contact form for inquiries. The minimalist design allows for intuitive navigation, ensuring users can quickly find the information they need without distractions. The overall experience should feel smooth and engaging, with a focus on converting visitors into customers.