Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for a Genshin Impact account management service, focusing on offering "joki" (booster) services. The primary goal is to showcase the various services available, including exploration, daily missions, character builds, and endgame content assistance. The design will be minimalist, ensuring a user-friendly experience that emphasizes clarity and visual appeal.

## CORE FEATURES
1. **Hero Section**: A captivating introduction with a brief description of the services and a prominent call-to-action button.
2. **Service Offerings**: Detailed sections for each joki service (exploration, daily mission, character build, endgame content) with descriptions and pricing.
3. **Testimonials**: A section highlighting customer reviews to build trust and credibility.
4. **Contact Information**: Easy access to contact details for inquiries and support.
5. **Call-to-Action**: Strategically placed buttons encouraging users to engage with services.

## 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 top navigation bar, followed by the hero section, service offerings in a grid format, testimonials in a carousel, and a footer containing contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for utility-first styling.
- **UI Components**: shadcn/ui for reusable component design.
- **State Management**: Context API or Zustand for managing application state as needed.

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create the structure**: Develop the main components (Hero, ServiceList, TestimonialCarousel, Footer) using React functional components.
3. **Implement routing**: Set up React Router for any necessary navigation (even if it's a single page).
4. **Style components**: Use Tailwind CSS classes to style components according to the design specifications.
5. **Add interactivity**: Implement the functionality for the service offerings and testimonials, ensuring smooth transitions and animations where appropriate.
6. **Test responsiveness**: Ensure the landing page is mobile-friendly and adjusts well to different screen sizes.

## USER EXPERIENCE
Users will land on a visually appealing hero section that clearly communicates the service offerings. As they scroll down, they'll encounter detailed descriptions of each joki service, accompanied by testimonials that enhance trust. The layout will be intuitive, with clear calls to action guiding users to engage with the services, making the overall experience seamless and enjoyable.