Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a landing page for "Nara Komputer," designed to showcase engineering IT and networking solutions. It aims to provide a visually appealing and informative experience to potential customers while promoting services offered by Nara Komputer.

## CORE FEATURES
1. **Hero Section:** A captivating introduction with an H1 headline, sub-headline, and CTA buttons encouraging users to consult or view the product catalog.
2. **Services Section:** A grid layout displaying three service cards, each highlighting a specific service with icons and descriptions.
3. **Custom Illustration:** A large brain-shaped lightbulb illustration that visually represents engineering concepts, accompanied by animated tech icons and characters.
4. **Contact & Social Integration:** Easy access to support through a floating WhatsApp button and social media links in the footer.
5. **Smooth Scrolling & Animations:** Enhanced user experience with smooth scrolling and on-scroll animations for sections.

## 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 consists of a transparent sticky navbar, followed by a hero section with left-aligned text and a right-aligned custom illustration. Below, a grid layout for service cards and a footer for contact information and social links.

## TECHNICAL REQUIREMENTS
- **Framework:** React with TypeScript
- **Styling:** Tailwind CSS
- **UI Components:** shadcn/ui
- **State Management:** Not specified; consider using React's Context API or local state management as needed.

## IMPLEMENTATION STEPS
1. **Set Up Project:**
   - Create a new React project using Create React App with TypeScript.
   - Install Tailwind CSS and configure it according to the documentation.
   - Install shadcn/ui for any additional UI components needed.

2. **Create Layout Components:**
   - Develop a `Navbar` component with links to Home, Services, Shop, and Contact.
   - Design the `Hero` section with headings, sub-headlines, and CTA buttons.

3. **Implement Custom Illustration:**
   - Use SVG or canvas to create the brain-shaped lightbulb and animated icons.
   - Ensure characters interacting with tech elements are included.

4. **Develop Services Section:**
   - Create a `ServiceCard` component for each service, incorporating the icons and descriptions as specified.

5. **Add Contact Features:**
   - Implement a floating WhatsApp button linking to the provided number.
   - Add social media links in the footer with icons.

6. **Enhance User Experience:**
   - Implement smooth scrolling and on-scroll animations for sections using libraries like Framer Motion.

## USER EXPERIENCE
Users will first encounter a visually striking hero section that clearly communicates the brand message and services. The intuitive navigation allows users to easily explore services, while the engaging illustrations and animations create a memorable experience. The contact features ensure users can quickly reach out for consultations or follow on social media, enhancing engagement and potential conversions. 

This prompt lays out a structured approach to building a landing page that aligns with the user's vision while ensuring a clean, minimalist design focusing on user experience.