Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a modern landing page for mixbazar.de that addresses the findings from a previous diagnostic assessment. The landing page will showcase two options for the client: developing a new standard e-commerce site or enhancing the existing one while focusing on the B2B segment. The design will prioritize a clean, minimalist aesthetic that aligns with contemporary web standards.

## CORE FEATURES
1. **Hero Section**: A prominent introduction to the services offered, paired with a call-to-action button that links to the diagnostic report.
2. **Service Options**: Clear presentation of the two options—creating a new e-commerce site or optimizing the existing one, including key details on B2B features and pricing.
3. **Diagnostic Report Button**: An interactive button that allows users to access the diagnostic report for deeper insights.
4. **Contact Form**: A simple form for potential clients to reach out for further inquiries or to start a project.
5. **Testimonials Section**: Showcase client feedback to build trust and credibility.
6. **Footer**: Basic contact information and links to social media or additional resources.

## 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 feature a single-column format with a full-width hero image, followed by sections stacked vertically for services, testimonials, and contact.

## 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 React project with TypeScript and install Tailwind CSS.
2. **Create Layout Components**: Develop reusable components for the hero section, service options, testimonials, and contact form.
3. **Implement Styling**: Use Tailwind CSS to style components according to the design specifications, ensuring responsiveness across devices.
4. **Add Interactivity**: Implement a button that links to the diagnostic report and a functional contact form that captures user input.
5. **Optimize for SEO**: Ensure that the landing page is optimized for search engines with appropriate metadata and alt texts.
6. **Testing**: Conduct user testing to gather feedback and make necessary adjustments for improved user experience.

## USER EXPERIENCE
Users will be greeted with a visually appealing hero section that clearly outlines the services offered. They can easily navigate through the service options and understand the benefits of each. The interactive diagnostic report button provides instant access to critical insights, while the contact form facilitates seamless communication. Overall, the design will focus on simplicity and clarity, making it easy for users to engage with the content and take action.