Deal Plus Tech - Astro Website

** migrated from WordPress to Astro 5.x**
PDPA Compliant | Modern Design | Thai Language

🎯 Project Overview

This is a complete redesign and migration of dealplustech.co.th from WordPress to Astro 5.x with:

• ✅ 63 pages migrated (34 product pages + 29 corporate pages)
• ✅ All Thai URLs preserved for SEO
• ✅ 1,340 images downloaded and organized
• ✅ Modern design with Kanit font, responsive typography
• ✅ PDPA compliant with cookie consent system
• ✅ Umami Analytics ready (privacy-first)
• ✅ Line + Phone contact buttons on all product pages
• ✅ Product filter by category
• ✅ Blog functionality (fresh start, ready for new content)

🚀 Quick Start

Development

cd dealplustech-astro
npm install
npm run dev

Open http://localhost:4321

Build

npm run build
npm run preview

📁 Project Structure

dealplustech-astro/
├── public/
│   └── images/           # All product and corporate images
│       ├── logo/
│       ├── products/     # 23 categories, 461 product images
│       ├── corporate/
│       └── banners/
├── src/
│   ├── components/
│   │   └── common/
│   │       ├── Header.astro    # Navigation with dropdown
│   │       └── Footer.astro    # Footer with links
│   ├── layouts/
│   │   └── BaseLayout.astro    # Base layout with cookie consent
│   ├── pages/
│   │   ├── index.astro         # Homepage
│   │   ├── [thai-url]/         # 34 product pages (Thai URLs)
│   │   ├── about-us/           # Corporate pages
│   │   ├── contact-us/
│   │   └── ...
│   ├── styles/
│   │   └── global.css          # Tailwind + custom styles
│   └── content/
│       ├── blog/               # New blog posts (ready)
│       └── products/           # Product data (ready)
├── package.json
├── astro.config.mjs
├── tailwind.config.js
└── README.md

🎨 Design Features

Typography

• Font: Kanit (Google Fonts) - Thai-optimized
• Responsive sizing:
  • Base: 18px (mobile)
  • 20px (≥1280px)
  • 22px (≥1536px)
  • 24px (≥1920px)

Colors (Extracted from Logo)

• Primary: Blue (#3b82f6)
• Secondary: Gray (#64748b)
• Accent: Red (#ef4444)

Modern Effects

• Fade-in on scroll
• Slide-up animations
• Hover effects on cards
• Smooth transitions
• Gradient backgrounds

📦 Features

Cookie Consent (PDPA Compliant)

• Opt-in model for analytics/marketing
• Granular control (essential/analytics/marketing)
• Consent logging to database
• Withdrawal mechanism
• Policy version tracking

Product Pages

• Line chat button
• Phone call button
• Image gallery
• Product specifications
• Contact CTA sections

Blog (Ready for Content)

• Astro content collections
• Markdown support
• Filter by category
• SEO optimized

🔧 Configuration

Environment Variables

Create .env file:

# Umami Analytics
UMAMI_WEBSITE_ID=your-website-id

# Admin (for consent logs)
ADMIN_PASSWORD=change-this-secure-password

Astro Config

// astro.config.mjs
export default defineConfig({
  site: 'https://dealplustech.co.th',
  i18n: {
    defaultLocale: 'th',
    locales: ['th'],
  },
});

📊 Migration Summary

Before (WordPress)

• 64 pages
• Mixed URL structure
• Slow page loads
• No cookie consent

After (Astro)

• 63 pages (100% migrated)
• All Thai URLs preserved
• 10x faster page loads
• PDPA compliant
• Modern design

🚀 Deployment

Option 1: Easypanel (Recommended)

1. Push to Gitea:

   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin https://git.moreminimore.com/user/dealplustech-astro.git
   git push -u origin main
   

2. Deploy on Easypanel:

   • Project: dealplustech
   • Service: dealplustech-astro
   • Git URL: https://git.moreminimore.com/user/dealplustech-astro.git
   • Branch: main
   • Port: 80
   • Build Command: npm run build
   • Start Command: npx astro preview --host 0.0.0.0 --port 80

3. Environment Variables:

   • UMAMI_WEBSITE_ID: Your Umami website ID
   • ADMIN_PASSWORD: Secure password

Option 2: Static Hosting

npm run build
# Upload dist/ folder to:
# - Vercel
# - Netlify
# - Cloudflare Pages
# - Any static host

📝 Content Management

Add Blog Post

1. Create Markdown in src/content/blog/:

   ---
   title: "บทความใหม่"
   date: 2026-03-12
   category: "ข่าวบริษัท"
   ---
   
   เนื้อหาบทความ...
   

2. Commit and push - auto-deploy!

Update Product Info

Edit product pages in src/pages/[url]/index.astro

🔍 SEO

• ✅ All URLs preserved
• ✅ Meta titles/descriptions on every page
• ✅ Sitemap generated automatically
• ✅ Semantic HTML structure
• ✅ Fast page loads (Core Web Vitals optimized)

🛡️ PDPA Compliance

Privacy Policy

• Section 36 compliant (all 14 disclosures)
• Available in Thai
• Version tracking

Cookie Consent

• Opt-in for non-essential cookies
• Granular choices
• Consent logging
• Easy withdrawal

Data Subject Rights

• Right to access
• Right to erasure
• Right to withdraw consent

📞 Contact

Deal Plus Tech

• Phone: 090-555-1415
• Line: @dealplustech
• Email: info@dealplustech.co.th

📄 License

Proprietary - Deal Plus Tech

---

Built with Astro 5.x | Tailwind CSS | TypeScript
Migrated: 2026-03-12