After adding the products dropdown (7 categories + 27 subcategory
links), the mobile menu was taller than typical phone screens
(~640px on iPhone SE). Without overflow handling, users on
short screens could not reach the bottom items (ผลงาน, ติดต่อเรา).
Added to mobile menu container:
- max-h-[calc(100vh-4rem)]: cap height at viewport minus header
- overflow-y-auto: enable internal scrollbar when content overflows
- overscroll-contain: prevent scroll chain to background page
(iOS Safari specific)
Menu is now fully scrollable within its own container — page
content underneath stays still while user scrolls through menu
items.
The mobile menu previously had only flat links (หน้าแรก, เกี่ยวกับเรา,
สินค้าทั้งหมด, ผลงาน, ติดต่อเรา) while the desktop menu had a mega
dropdown with 7 product categories (ระบบท่อ, ฉนวนหุ้มท่อ, เครื่องเชื่อมท่อ,
ระบบน้ำ, อุปกรณ์ปรับอากาศ, อุปกรณ์ดับเพลิง, ระบบรั้ว) and 27
subcategory links.
Updated mobile menu in BaseLayout.astro to mirror the desktop
structure: "สินค้าทั้งหมด" is now a collapsible button that
expands to show all 7 categories and their 27 subcategory links,
plus a "ดูสินค้าทั้งหมด →" CTA at the bottom.
Toggle behavior:
- Click button: opens submenu, rotates chevron 180°, sets
aria-expanded="true"
- Click again: closes submenu, returns chevron
- aria-controls="mobile-products-submenu" for accessibility
Reverted Header.astro changes — that file is not actually used
by the site (BaseLayout.astro has its own inline header with the
real desktop mega menu and mobile menu).
Mobile menu now has parity with desktop navigation structure.
Two changes driven by content review:
1) @JPPSELECTION → JPPSELECTION in user-visible text only
- 19 page files: drop @ from inline JPPSELECTION in <p> tags
- BaseLayout.astro + Footer.astro: drop @ from companyInfo.line
(rendered as "LINE: @JPPSELECTION" in mobile CTA + footer)
- URL line.me/ti/p/~JPPSELECTION left unchanged (the @ belongs
in the URL per line.me convention)
2) Add missing CTA section to all 20 product pages
- 16 pages had no CTA at all
- 4 pages (armflex, aeroflex, maxflex, xy-lent) had bespoke
CTA variants; replaced with canonical template
- Template copied from ppr-thai-ppr
- CTA inserted before </main> in all 20 product pages
Verified rendered HTML:
- @JPPSELECTION in <p> text = 0 across all 20 pages
- "LINE: JPPSELECTION" rendered in footer / mobile CTA
- heading + contact + line buttons present in all 20
Files touched: 30
- Extract data from each page (pill, title, image, features, hasPricelist)
- Generate hero from canonical template (text-LEFT, image-RIGHT, animated bg)
- Remove dead <Header slot=Footer slot= StickyBottomCTA slots (BaseLayout renders defaults)
- Remove dead data-price-button when id="pricelist" missing (auto-detect hides it)
- Drop legacy justify-center/max-w-md workarounds; use canonical classes
- Apply consistent TEXT-LEFT order across all product heroes
- Drop unused mobile-only sections in ตู้ดับเพลิง (page now follows template)
- Add overflow-x-clip on header/footer (submenu overflow fix)
- Add .submenu-anchor class for submenu positioning
Verified: 9 pages render with valid HTML, TEXT-LEFT, correct features, no dead links.
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)
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).
- 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
- 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
