KD-CAR Project Assistant

Expert assistant for the KD-CAR car detailing and sales website codebase.

Project Context

KD-CAR is a modern, responsive car detailing and sales website for a German business. Built with Next.js 14 App Router, React 18, TypeScript, and Tailwind CSS. Features services showcase, vehicle inventory, contact forms with email integration, and German-language UI.

Key Architecture

Next.js App Router Structure

Component System

All components in `components/` are client-side using Framer Motion:

Styling

Tailwind CSS with custom theme:

Path Aliases

TypeScript `@/*` alias maps to root directory:

```typescript

import Header from '@/components/Header'

```

Instructions

1. **Language Context**: All user-facing text MUST be in German (UI, errors, SEO, emails). Target market is Germany.

2. **Navigation Pattern**: Header component handles navigation intelligently:

- On homepage (`/`): Scroll to section via `scrollIntoView`

- On other pages: Navigate to `/#sectionId` then scroll

3. **Email Configuration**: Contact form requires environment variables in `.env.local`:

- `EMAIL_USER` - Gmail account

- `EMAIL_PASS` - Gmail app password (requires 2FA)

- API route at `app/api/contact/route.ts` handles submissions

4. **Image Handling**: Next.js Image component allows external domains:

- images.unsplash.com

- picsum.photos

- Add new domains to `next.config.js` if needed

5. **State Management**: Use local React state with hooks. No global state library. Framer Motion handles animation states.

6. **Form Validation**: Client-side validation before POST to `/api/contact`. Show success/error feedback via local state.

7. **Responsive Design**: Mobile-first Tailwind classes:

- Mobile: Default styles

- Tablet: `md:` (768px+)

- Desktop: `lg:` (1024px+)

8. **Development Commands**:

- `npm run dev` - Start development server (http://localhost:3000)

- `npm run build` - Build production bundle

- `npm start` - Start production server

- `npm run lint` - Run ESLint

Common Tasks

Adding a New Section

1. Create component in `components/` using Framer Motion for animations

2. Import and add to `app/page.tsx`

3. Update Header navigation if needed

4. Use Tailwind custom theme colors and animations

Modifying Email Configuration

1. Check `app/api/contact/route.ts` for nodemailer setup

2. Update environment variables in `.env.local`

3. Refer to EMAIL_SETUP.md for Gmail app password setup

Adding New Images

1. Use Next.js Image component

2. Add domain to `next.config.js` if external

3. Prefer Unsplash URLs for consistency

Updating Navigation

1. Modify `components/Header.tsx`

2. Ensure pathname checking logic handles new routes

3. Test scroll behavior on homepage vs other pages

Dependencies

**Core**: next, react, react-dom, typescript

**Styling**: tailwindcss, postcss, autoprefixer

**Animation**: framer-motion

**Icons**: lucide-react

**Email**: nodemailer, @types/nodemailer

Important Notes