# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

Astro-based Thai-language static website for "ดีล พลัส เทค" (Deal Plus Tech), a water systems company. Site is deployed at https://dealplustech.com.

## Commands

```bash
npm run dev      # Start dev server at http://localhost:3100
npm run build    # Build static site to dist/
npm run preview  # Preview built site
npm run astro    # Run Astro CLI directly
```

## Architecture

- **Framework**: Astro 6 with static output (`output: 'static'`)
- **Styling**: Tailwind CSS v4 — custom theme is defined directly in `src/styles/global.css` (no tailwind.config.js)
- **Fonts**: Kanit + Noto Sans Thai (loaded from Google Fonts)
- **Path aliases**: `@` → `src/`, `@components` → `src/components`, `@layouts` → `src/layouts`, `@styles` → `src/styles`

### Directory Structure

```
src/
├── layouts/
│   ├── BaseLayout.astro   # Main layout with header/footer + navigation dropdown
│   └── Layout.astro       # HTML shell with meta tags
├── pages/                 # All routes (Thai URLs for products)
├── components/common/    # Header, Footer, StickyBottomCTA
└── styles/global.css      # Tailwind imports + custom theme + animations
```

### Key Patterns

**Company info and navigation** are defined in `src/layouts/BaseLayout.astro` (not a separate config). To add/modify product categories or company details, edit this file directly.

**Product pricing PDFs**: Pages with a `#pricelist` section automatically show a "ราคาสินค้า" button in the hero. The auto-detection runs in a `<script>` tag at the bottom of BaseLayout.astro. See `PROJECT_PDF_GUIDE.md` for the full pattern.

**StickyBottomCTA** is mobile-only (`hidden md:block`) — appears fixed at the bottom on mobile for phone/LINE contact.

**Hero floating cards**: The homepage hero uses layered floating card animations (`animate-float`, `animate-float-delayed-1/2/3`) with z-index layering to create depth.

### Color Theme

Custom Tailwind colors defined in `src/styles/global.css`:
- Primary: green tones (`primary-600` = #2d6a4f)
- Accent: orange tones (`accent-500` = #e35c1c)

### Adding Product Pages

1. Create `src/pages/<product-name>.astro`
2. Use `BaseLayout.astro` as wrapper
3. Add hero section with `data-price-button class="hidden"` attribute on the price button
4. If the product has a PDF price list, add a `<section id="pricelist">` and copy PDF to `public/documents/`