Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is for a landing page designed to serve as a company profile for a distributor in Indonesia. The purpose of the landing page is to provide an overview of the company, highlight its services, and facilitate contact with potential clients, all while maintaining a clean and minimalist aesthetic.

## CORE FEATURES
1. **Hero Section**: A prominent introductory section with the company name, tagline, and a call-to-action button that encourages visitors to learn more or get in touch.
2. **About Us**: A brief overview of the company, its mission, and values to establish credibility and connect with the audience.
3. **Services Offered**: A section detailing the various distribution services provided by the company, each with a short description and relevant icons.
4. **Testimonials**: A section showcasing client testimonials to build trust and demonstrate the company’s effectiveness and reliability.
5. **Contact Form**: A simple contact form for inquiries, including fields for name, email, message, and a submit button.
6. **Footer**: A footer with links to social media, contact information, and 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 main layout will feature a vertical flow with sections stacked one below the other. The hero section will be at the top, followed by the "About Us," "Services Offered," "Testimonials," and "Contact Form" sections, concluding with a footer.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this landing page, as it will be primarily static content.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App or your preferred boilerplate.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui components.
3. **Create Components**:
   - Build the Hero, About Us, Services, Testimonials, and Contact Form components.
   - Style each component using Tailwind CSS classes.
4. **Implement Routing**: If using React Router, set up routes for any additional sections or to handle navigation.
5. **Integrate Contact Form**: Use a service like Formik or just simple state management to handle form submissions.
6. **Optimize for Responsiveness**: Ensure the design is responsive across devices using Tailwind CSS's responsive utilities.
7. **Deploy**: Choose a hosting service (like Vercel or Netlify) to deploy the landing page.

## USER EXPERIENCE
The user experience will focus on smooth navigation and easy access to information. Visitors will be greeted by a visually appealing hero section that captures attention. As they scroll, they will find clear, concise information about the company and its services. The contact form will be straightforward to complete, encouraging inquiries from potential clients. Overall, the design will prioritize usability and engagement, ensuring visitors can easily find what they need and connect with the company.