# MatchMark

> AI-powered recruitment platform built with Next.js 16 (App Router)

This is the marketing and landing page site for MatchMark, an AI-powered recruitment service. The site is optimized for SEO with server-side rendering and integrates with the Base44 backend platform.

## Quick Start

```bash
npm install          # Install dependencies
npm run dev          # Start development server (http://localhost:3000)
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run Next.js ESLint
```

## Tech Stack

- **Framework**: Next.js 16 with App Router
- **React**: Version 19
- **Styling**: Tailwind CSS with shadcn/ui components (New York style)
- **Backend SDK**: Base44 SDK (@base44/sdk)
- **UI Components**: Radix UI primitives with custom components
- **Forms**: React Hook Form with Zod validation
- **Animations**: Framer Motion
- **Analytics**: Vercel Analytics

## Project Structure

```
MatchMarkSite/
├── app/                          # Next.js App Router pages (file-based routing)
│   ├── layout.jsx                # Root layout with metadata
│   ├── page.jsx                  # Homepage
│   ├── AboutUs/page.jsx          # About page
│   ├── Careers/page.jsx          # Careers page
│   ├── Pricing/page.jsx          # Pricing page
│   ├── Blog/page.jsx             # Blog listing
│   ├── BlogHowMatchMarkSavesTime/page.jsx
│   ├── BlogTop5Mistakes/page.jsx
│   ├── BlogFutureOfRecruitment/page.jsx
│   ├── PrivacyPolicy/page.jsx    # Legal pages
│   ├── TermsOfService/page.jsx
│   ├── GDPRPolicy/page.jsx
│   └── confirmation/page.jsx     # Confirmation page (noindex)
├── src/
│   ├── page-components/          # Client components for pages ('use client')
│   │   ├── Landing.jsx           # Main landing page component
│   │   ├── Pricing.jsx
│   │   ├── AboutUs.jsx
│   │   ├── Careers.jsx
│   │   ├── Blog.jsx
│   │   └── ...                   # Other page components
│   ├── components/
│   │   ├── landing/              # Landing page sections
│   │   │   ├── Navigation.jsx    # Top navigation bar
│   │   │   ├── Hero.jsx          # Hero section with CTA
│   │   │   ├── HowItWorks.jsx    # Process explanation
│   │   │   ├── DemoVideo.jsx     # Video demonstration
│   │   │   ├── Features.jsx      # Feature highlights
│   │   │   ├── Benefits.jsx      # Benefit statements
│   │   │   ├── TrustSecurity.jsx # Trust and security badges
│   │   │   ├── CTA.jsx           # Call-to-action section
│   │   │   └── Footer.jsx        # Footer with links
│   │   └── ui/                   # shadcn/ui components (New York style)
│   ├── api/                      # Base44 SDK integration
│   │   ├── base44Client.js       # Client config (App ID: 68ad6693eeb33b8b2aaaeae3)
│   │   ├── entities.js           # User auth entity
│   │   └── integrations.js       # Base44 Core integrations
│   ├── lib/
│   │   └── utils.js              # Utility functions (cn(), etc.)
│   ├── hooks/                    # Custom React hooks
│   ├── index.css                 # Main CSS file
│   └── App.css                   # Component-specific styles
├── CLAUDE.md                     # Detailed project documentation
├── jsconfig.json                 # Path aliases (@/ -> ./src/)
└── package.json
```

## Path Aliases

The project uses `@/` as an alias for `./src/`:
- `@/components` → `./src/components`
- `@/lib` → `./src/lib`
- `@/hooks` → `./src/hooks`
- `@/api` → `./src/api`
- `@/page-components` → `./src/page-components`

## Routing

Next.js App Router with file-based routing:
- Each route is a directory in `app/` with a `page.jsx` file
- All routes include metadata exports for SEO optimization
- Server Components by default
- Client Components marked with 'use client'

## Base44 Integration

The app integrates with Base44 SDK for backend services:
- **Authentication**: Required (`requiresAuth: true`)
- **Available Integrations**: InvokeLLM, SendEmail, UploadFile, GenerateImage, ExtractDataFromUploadedFile, CreateFileSignedUrl, UploadPrivateFile
- **User Auth**: Via `User` entity from `src/api/entities.js`
- **App ID**: `68ad6693eeb33b8b2aaaeae3`

## Styling Conventions

- Tailwind CSS with `neutral` base color
- CSS variables enabled for theming
- No prefix on utility classes
- shadcn/ui components use `cn()` utility for className composition
- Framer Motion for animations

## Component Architecture

### Server Components (Default)
Used for pages with metadata and static content. Located in `app/` directory.

### Client Components ('use client')
Used for components with:
- React hooks (useState, useEffect, etc.)
- Event handlers (onClick, onChange, etc.)
- Browser APIs
- Framer Motion animations
- Next.js navigation hooks (usePathname, useRouter)

All page implementations in `src/page-components/` are client components.

## Navigation

- Uses Next.js `Link` component from `next/link`
- Uses `usePathname()` from `next/navigation` (not React Router's useLocation)
- Uses `useRouter()` from `next/navigation` (not React Router's useNavigate)
- All internal links use Next.js Link for optimized client-side navigation

## Pages

- `/` - Landing page (homepage)
- `/Pricing` - Pricing plans
- `/AboutUs` - About the company
- `/Careers` - Career opportunities
- `/Blog` - Blog listing page
- `/BlogHowMatchMarkSavesTime` - Blog post
- `/BlogTop5Mistakes` - Blog post
- `/BlogFutureOfRecruitment` - Blog post
- `/PrivacyPolicy` - Privacy policy
- `/TermsOfService` - Terms of service
- `/GDPRPolicy` - GDPR policy
- `/confirmation` - Confirmation page (noindex)

## Additional Resources

- [CLAUDE.md](./CLAUDE.md) - Detailed project documentation for AI assistants
- [package.json](./package.json) - Full dependency list