Part 1: Source code - Astro project structure and components

CLAUDE.md

@@ -0,0 +1,58 @@
+# 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/`