Three mobile issues fixed:
1. Categories section: <640px (mobile) now 1 column. Previously it was
already 2 columns at the smallest breakpoint which made the tiles feel
cramped. Uses Tailwind's default sm: (640px) for the 1->2 transition,
not a custom min-[500px].
2. Footer mobile layout (<1024px): three centered rows inside the same
max-w-7xl container.
- Row 1: Company Info (1 col, max-w-md, centered)
- Row 2: Quick Links + สินค้ายอดนิยม (2 cols, max-w-2xl, centered)
- Row 3: ติดต่อเรา (1 col, max-w-sm outer, max-w-xs button column)
The narrow inner max-widths are deliberate: a full-width row of
contact buttons looks stretched, especially the bottom one with the
โทรเลย / แอดไลน์ buttons.
3. Horizontal overflow bug: data-animate='fade-left' and 'fade-right'
children sit at translateX(30px) / translateX(-30px) in their
initial state, before the IntersectionObserver fires. On small
viewports this pushes the page 30px wider than the viewport and
reveals a horizontal scrollbar as soon as the user loads the page.
Adding overflow-x-clip on <footer> keeps the off-screen translation
contained inside the footer.
## homepage (index.astro)
- Drop '500+ รายการสินค้า' from stat badges and rebuild the trust-badges
section to show only 15+ ปีประสบการณ์, 400+ ลูกค้าทั่วประเทศ, 98%
ลูกค้าพึงพอใจ — bigger numbers (text-5xl/6xl), no icons, counter animation
- Add 'ทำไมเลือกเรา' section (4 cards: ส่งฟรี กทม./ปริมณฑล, Lead time 1-3
วัน, ราคาโรงงาน, ทีมช่างแนะนำ) — no icons, primary/accent border hover
- Add 'หมวดสินค้า' section (8 tiles: 7 categories + 'สินค้าทั้งหมด')
placed after 'สินค้าแนะนำ' — each tile is a real product photo with
dark gradient overlay and a CTA link to /all-products?filter=<id>
- Reorder: Hero → ทำไมเลือกเรา → สินค้าแนะนำ → หมวดสินค้า → Stats →
บทความล่าสุด → CTA
## all-products (filter from URL)
- Script now reads ?filter=<id> on load and applies it without rewriting
the URL, then on click updates both the filter and the URL via
history.replaceState so the back/forward buttons work
## footer (BaseLayout.astro)
- Replace productLinks with the curated 6 popular products: ไทยพีพีอาร์,
เทอร์โมเบรค, กริลแอร์, หัวจ่ายแอร์ Ball Jet, ท่อ HDPE, ท่อ Syler
## about-us
- Stats: 10+/1000+/500+ replaced with 15+ / 400+ + counter animation,
bigger numbers, rounded-3xl + shadow (matches home)
- Why Choose Us: rebuilt with the same 4 cards + same style as home's
'ทำไมเลือกเรา' (no icons, pill header, larger h2 + subtitle)
## all-products.astro
Remove 2 broken product links (Poloplast, PVC + fittings) and align the
remaining 24 products with the header main menu (BaseLayout.astro):
- Reorganise categories to match the 7 header categories (ท่อพีพีอาร์,
เครื่องเชื่อมท่อ, ระบบน้ำ, อุปกรณ์ปรับอากาศ, อุปกรณ์ดับเพลิง,
ฉนวนหุ้มท่อ, ระบบรั้ว) instead of the old ad-hoc split
- Add Ball Jet to "อุปกรณ์ปรับอากาศ" so the page matches the menu
- Re-point 6 product images to each product page's actual hero/feature
image so the cards show what the linked page shows:
- HDPE, Syler, HDPE welding, PPR welding, Ball Jet, Vineman
## index.astro (homepage)
Drop the <time>...</time> block from the "บทความล่าสุด" article cards
to match the blog index (no dates, just tag chips).
The JSON-LD Product schema in 6 product pages had hardcoded
URLs to dealplustech.co.th, but astro.config.mjs configures the
site as dealplustech.com. When this project replaces the old
site, those URLs would 404.
Changes:
- Replace `https://dealplustech.co.th/images/...` with relative
`/images/...` paths (resolved by Astro at build time)
- Replace `https://dealplustech.co.th/<page>` with
`https://dealplustech.com/<page>` (canonical domain)
- Special case: vineman schema `image` referenced an .svg that
doesn't exist locally — switch to the .jpg version that does
(also used by the page body) at
/images/products-raw/vineman/ระบบรั้วไวน์แมน-Vineman-e1613286324569-1024x880.jpg
Files changed:
- realflex.astro
- วาล์ว-valve.astro
- water-treatment.astro
- เครื่องเชื่อม-hdpe.astro
- ระบบรั้วไวน์แมน.astro
- เทอร์โมเบรค-thermobreak.astro
The HTML tables for dimensions and airflow performance are less
complete than the user-supplied spec images (which include more
data: bigger size range, more flow rates, unit annotations).
Remove the tables — the spec images alone are clearer and more
informative for the customer.
The 7 product photos in commit 47f28cd were scraped from
sapaengineer.com without copyright clearance. Replace them
with 4 user-supplied photos from the LINE album:
- ball-jet-main.jpg (478x542) — original main product photo
- ball-jet-main-hd.jpg (1764x2000) — 4x upscale for hero
- ball-jet-front.jpg — front view of the diffuser
- ball-jet-specs.jpg — dimensions + parameters table
- ball-jet-performance.jpg — airflow performance table
Page now uses:
- Hero: ball-jet-main-hd (upscaled from user's photo)
- Gallery: ball-jet-main-hd + ball-jet-front
- New section: ขนาดและพารามิเตอร์ (Dimensions & Parameters)
- Spec image + readable HTML table (sizes 4"-10")
- D / A / B / C / E dimensions in mm
- New section: ตารางสมรรถนะการจ่ายลม (Airflow Performance)
- Performance image + HTML table (sizes 4"-10", 5 flow rates each)
- Columns: Air Volume (CMH), Outlet Velocity (m/s), Pressure
Loss (Pa), Throw Distance (m), Noise (dB(A))
New product page at /หัวจ่าย-ball-jet covering Ball Spout Jet
Diffuser (JD Series) — long-throw ceiling air diffuser for
high-ceiling commercial/industrial buildings.
Content sourced from sapamaket.com, sapaengineer.com (official),
superaircool.com technical specs, and the user's brief. The page
covers:
- Hero with full feature badges (360° rotation, 45° nozzle, sizes,
materials)
- Product description, features, technical specs, applications,
advantages
- Image gallery (7 photos scraped from the official SAPA source at
sapaengineer.com — public product marketing images, used to
illustrate the product)
- 5-question FAQ
- Contact CTA
Nav updated: added หัวจ่ายแอร์ Ball Jet as the 3rd subcategory under
'อุปกรณ์ปรับอากาศ' in BaseLayout.astro.
No PDF pricelist (none provided by source). No price data displayed
(per user request — pricing to be confirmed separately).
The กริลแอร์ floating card image remains in the homepage hero,
but the 'กริลแอร์คุณภาพสูง' text label that previously overlaid the
card has been removed.
Copy all 12 PDF price lists from dealplustech-emdash-old (pdf-batch3
branch) into public/documents/. These were the actual price lists
referenced by the original site.
Add the missing #pricelist sections and data-price-button links in
the hero to the 4 nav products that were missing them:
- ท่อ-ppr-thai-ppr.astro → PRICE-LIST_TPPR_V28-2023.pdf
- ท่อ-ppr-scg.astro → เอสซีเจ ปี68.pdf
- ท่อ-hdpe.astro → Price List HDPE TAP.pdf
- ท่อ-xy-lent.astro → Price List XYLENT_Novat.pdf
The 6 products that already had pricelists (aeroflex, armflex, maxflex,
เครื่องเชื่อม-hdpe, เทอร์โมเบรค, เม็กกรู๊ฟ-คับปลิ้ง) are unchanged.
The BaseLayout auto-detect script now finds #pricelist on these pages
and unhides the data-price-button (ราคาสินค้า) in the hero.
EmDash CMS integration is being removed. The blog content is
moved to native Astro content collections (markdown files in
src/content/blog/) which works with the static output config.
Changes:
- Remove EmDash from astro.config.mjs (revert to static output)
- Remove emdash packages from package.json/package-lock.json
- Remove seed/seed.json (was EmDash-only)
- Remove src/live.config.ts (EmDash Astro loader)
- Add src/content.config.ts (Astro content collection for blog)
- Move 3 blog posts to src/content/blog/*.md
- Update src/pages/index.astro to use getCollection('blog')
- Update src/pages/บทความ/[slug].astro to use render() from astro:content
(Astro 6 API: render(article), not article.render())
- Update src/pages/บทความ/index.astro (blog list)
- Add .hermes/ to .gitignore
Verified:
- npm run build: 35 pages, complete in 2.50s
- / , /aeroflex, /about-us, /บทความ, /บทความ/welcome-post: all 200
- Add EmDash CMS integration with SQLite and local storage
- Add blog collection (seed/seed.json) with 3 sample posts
- Add /บทความ list page and /บทความ/[slug] detail page
- Add blog section to homepage
- Fix reserved field slugs (slug, published_at removed from fields)
- Fix date field mapping (publishedAt camelCase)
- Fix featured image URL for admin-uploaded images (meta.storageKey)
- Standardize all product page hero sections
- Update navigation with 'บทความ' link
- Configure Google OAuth provider
- All product pages now have lg:sticky lg:top-24 on image container
- LINE button: bg-accent-500 orange
- Phone button: bg-white green
- Grid alignment: items-start
1. Fixed animated hero background - now inside the hero section with proper class structure
2. Changed อุปกรณ์ดับเพลิง to ตู้ดับเพลิง in Header main menu
- Renamed page file from อุปกรณ์ดับเพลิง.astro to ตู้ดับเพลิง.astro
- Updated title and content to ตู้ดับเพลิง
- Updated Header navigation link
- Updated all-products page link
- Removed animated background divs from FAQ and product card sections
- Kept all content (FAQ answers, product details) intact
- Animation code now only in hero sections
- Removed animation blocks from FAQ sections in ระบบรั้วไวน์แมน.astro
- Removed animation blocks from product cards in อุปกรณ์ปรับอากาศ.astro
- Animation code now only appears in hero sections
- Added 3 new brand pages: armflex.astro, aeroflex.astro, maxflex.astro
- Updated hero images with product photos from 3t-insulation.com
- Enhanced content with product specifications and benefits
- Added standard certifications (FM Approved, UL 94, GREENGUARD)
- Added product gallery sections
- Shortened menu names to brand only (Armaflex, Aeroflex, Maxflex)
- Removed old ฉนวนหุ้มท่อ.astro page
- Updated Header and BaseLayout navigation
- Downloaded product images for all 3 brands
