58 lines
2.5 KiB
Markdown
58 lines
2.5 KiB
Markdown
# 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/` |