Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application will be a modern landing page website for a tech service provider that offers services such as website and mobile app development, video editing, logo creation, and motion graphics. The main purpose of this landing page is to present the services in a clear, engaging manner, encouraging potential clients to learn more and get in touch.

## CORE FEATURES
1. **Service Showcase**: A clean, organized section displaying all offered services with brief descriptions and visually appealing icons for each service.
2. **Portfolio Gallery**: An interactive gallery that highlights previous projects, complete with thumbnails and links for detailed views of each project.
3. **Contact Form**: A user-friendly contact form that allows potential clients to easily reach out for inquiries, featuring fields for name, email, message, and service interest.
4. **Testimonials Section**: A dedicated area for client testimonials to build trust and credibility, presented with a minimalist design.
5. **Call-to-Action Buttons**: Strategically placed buttons throughout the site to encourage users to contact or request a quote, enhancing user engagement.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design emphasizing clean lines and ample white space. The layout should prioritize readability and function without unnecessary distractions.
- **Color Mode**: Light theme featuring a minimal color palette with dark text on light backgrounds, ensuring high contrast and readability.
- **Layout**: A single-page scrolling layout with sections for each core feature, utilizing flexbox for responsive arrangements. The header should include a navigation bar with smooth scrolling links to each section.
- **Typography**: Use a sans-serif font for body text (e.g., Inter or Roboto) for modern clarity, with larger headings (e.g., 24px for H1, 20px for H2) and ample line spacing for easy reading.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for strong type safety and component-based architecture.
- **Styling**: Utilize Tailwind CSS for rapid styling and responsive design, ensuring consistency across different screen sizes.
- **UI Components**: Integrate shadcn/ui for high-quality, reusable UI components that adhere to the minimalist design.
- **State Management**: Use React Context API or Zustand for managing state if needed.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Component Structure**: Develop components for the header, service showcase, portfolio gallery, testimonials, and contact form.
3. **Develop the Navigation Bar**: Implement a sticky navigation bar that smoothly scrolls to respective sections when links are clicked.
4. **Design Each Section**: Utilize Tailwind CSS classes to style each section according to the minimalist design specifications, ensuring responsive behavior.
5. **Integrate Form Handling**: Set up the contact form using React Hook Form or Formik for efficient form handling and validation.
6. **Add Interactivity**: Implement any necessary animations or transitions using CSS or a library like Framer Motion to enhance user experience.
7. **Test Across Devices**: Conduct thorough testing on various devices and browsers to ensure responsiveness and functionality.

## USER EXPERIENCE
Key user interactions will include smooth scrolling navigation, intuitive form filling, and engaging visual storytelling through the service showcase and portfolio. Users should easily find information about services and feel encouraged to reach out through clear calls to action. The minimalist design will provide a seamless experience, allowing users to focus on content without distractions, fostering a sense of professionalism and trustworthiness.