# Deal Plus Tech - Next.js Website

Complete redesign of dealplustech.co.th website built with Next.js 14, TypeScript, and Tailwind CSS.

## Features

- 🚀 Next.js 14 with App Router
- 💅 Tailwind CSS for styling
- 📝 Headless WordPress integration for Blog
- 🌐 Thai URL support for product categories
- 📱 Fully responsive design
- 🔍 SEO optimized

## Getting Started

### Prerequisites

- Node.js 18.17 or later
- npm or yarn

### Installation

```bash
npm install
```

### Environment Variables

Copy `.env.example` to `.env.local` and fill in your values:

```bash
cp .env.example .env.local
```

Required environment variables:
- `NEXT_PUBLIC_WORDPRESS_API_URL` - Your WordPress REST API URL (e.g., https://your-domain.com/wp-json/wp/v2)
- `NEXT_PUBLIC_SITE_URL` - Your production site URL
- `NEXT_PUBLIC_PHONE` - Contact phone number
- `NEXT_PUBLIC_EMAIL` - Contact email
- `NEXT_PUBLIC_LINE_ID` - LINE ID for contact
- `NEXT_PUBLIC_FACEBOOK_URL` - Facebook page URL
- `NEXT_PUBLIC_COMPANY_ADDRESS` - Company address

### Development

```bash
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) in your browser.

### Production Build

```bash
npm run build
npm start
```

## Project Structure

```
src/
├── app/                    # Next.js App Router pages
│   ├── layout.tsx          # Root layout
│   ├── page.tsx            # Homepage
│   ├── about-us/           # About page
│   ├── services/           # Services page
│   ├── portfolio/          # Portfolio page
│   ├── contact-us/         # Contact page
│   ├── all-projects/       # FAQ page
│   ├── product/            # Products listing
│   ├── blog/               # Blog pages
│   └── [[...slug]]/        # Product category catch-all
├── components/
│   ├── layout/             # Header, Footer, FloatingContact
│   ├── sections/           # Page sections
│   └── ui/                 # UI components
├── lib/
│   ├── utils.ts            # Utility functions
│   └── wordpress.ts        # WordPress API client
├── types/
│   └── index.ts            # TypeScript types
├── data/
│   └── site-config.ts      # Site configuration
└── styles/
    └── globals.css         # Global styles
```

## Deployment

### Vercel (Recommended)

1. Push your code to GitHub
2. Import your repository on Vercel
3. Add environment variables in Vercel dashboard
4. Deploy!

### Other Platforms

The project can be deployed to any platform that supports Next.js:
- Netlify
- AWS Amplify
- Docker
- Self-hosted Node.js server

## WordPress Integration

This site uses WordPress as a headless CMS for the Blog section. 

### Setup WordPress

1. Install WordPress on your server
2. Ensure the REST API is enabled (default in modern WordPress)
3. Set `NEXT_PUBLIC_WORDPRESS_API_URL` to your WordPress API endpoint
4. Create posts with featured images for best display

### API Endpoints Used

- `/posts` - Blog posts
- `/categories` - Post categories
- `/_embed` - Embedded author and media data

## License

Private project for Deal Plus Tech Co., Ltd.