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

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

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

2.5 KiB Raw Permalink Blame History