Fix hero section structure across all product pages

Changes: - Section class: relative now first, 3-stop gradient (from-primary-800 via-primary-700 to-primary-900) - Added py-16 lg:py-24 padding - Added relative z-10 to content wrapper - All 22 product pages standardized Reference: armflex.astro hero section structure
2026-05-24 20:18:18 +07:00
parent f12f84cf52
commit 6992754699
26 changed files with 136 additions and 181 deletions
--- a/.context/reports/index.json
+++ b/.context/reports/index.json
@@ -1,7 +1,28 @@
 {
  "version": 1,
-  "updatedAt": "2026-05-21T09:49:46.267Z",
+  "updatedAt": "2026-05-24T13:16:51.251Z",
  "entries": [
+    {
+      "id": "2026-05-24T13-16-51-249Z-hero-section-fix-plan",
+      "category": "plan",
+      "title": "Hero Section Fix Plan",
+      "summary": "# Plan: Fix Hero Section Structure for All Product Pages ## Context After analyzing all product pages, found **3 major structural issues**: ### Issue 1: Section Class Order Wrong **Problem:** Many pages have `bg-gradient...` BEFORE `relative` in section class ```html <!-- WRONG --> <section class=\"bg-gradient-to-br fr…",
+      "searchText": "plan Hero Section Fix Plan # Plan: Fix Hero Section Structure for All Product Pages ## Context After analyzing all product pages, found **3 major structural issues**: ### Issue 1: Section Class Order Wrong **Problem:** Many pages have `bg-gradient...` BEFORE `relative` in section class ```html <!-- WRONG --> <section class=\"bg-gradient-to-br fr… /Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md markdown approved false",
+      "createdAt": "2026-05-24T13:16:51.249Z",
+      "updatedAt": "2026-05-24T13:16:51.249Z",
+      "sourcePath": "/Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md",
+      "sourceLabel": "todo.md",
+      "viewerPath": "/Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md",
+      "viewerLabel": "Hero Section Fix Plan",
+      "tags": [
+        "plan",
+        "markdown"
+      ],
+      "metadata": {
+        "action": "approved",
+        "modified": false
+      }
+    },
    {
      "id": "2026-05-21T09-49-46-266Z-modern-animated-redesign-deal-plus-tech",
      "category": "plan",
--- a/.context/reports/reports.db-shm
+++ b/.context/reports/reports.db-shm
--- a/.context/reports/reports.db-wal
+++ b/.context/reports/reports.db-wal
--- a/.context/todo.md
+++ b/.context/todo.md
@@ -1,163 +1,97 @@
-# Plan: Modern Animated Redesign — Deal Plus Tech Website
+# Plan: Fix Hero Section Structure for All Product Pages

 ## Context

-The current website at `/Users/kunthawatgreethong/gitea/dealplustech-emdash` is an Astro-based Thai-language static site for "ดีล พลัส เทค" (Deal Plus Tech). It has basic animations (float, orb-drift, fade-in) but lacks modern scroll-triggered effects and sophisticated micro-interactions.
+After analyzing all product pages, found **3 major structural issues**:

-**Current State:**
- Color scheme: Green primary (#2d6a4f), Orange accent (#e35c1c)
- Animations: Basic float, fade-in, stagger, image hover zoom
- Layout: Standard header with dropdown, hero with floating cards, product grid, footer
- Working directory: `/Users/kunthawatgreethong/gitea/dealplustech-emdash`
+### Issue 1: Section Class Order Wrong
+**Problem:** Many pages have `bg-gradient...` BEFORE `relative` in section class
+```html
+<!-- WRONG -->
+<section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">

-**Goal:** Redesign with modern animated effects including:
- Scroll-triggered reveal animations
- Text split/reveal effects
- Magnetic hover buttons
- Parallax sections
- Smooth page transitions
- Bento grid layouts
- Glassmorphism cards
- Animated gradient mesh backgrounds
+<!-- CORRECT -->
+<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
+```
+
+### Issue 2: Gradient Style Differs
+**Problem:** Some pages use 2-stop gradient, others use 3-stop with `via-`
+- Reference uses: `from-primary-800 via-primary-700 to-primary-900`
+- Some use: `from-primary-700 to-primary-600` (2-stop)
+
+### Issue 3: Orphan Div Without Closing
+**Problem:** Pages ท่อ-hdpe, ท่อ-upvc, ท่อ-ppr-scg have:
+```html
+</div>  <!-- closes animated background -->
+<div class="max-w-7xl...">  <!-- orphan div outside section -->
+```
+
+But reference has:
+```html
+</div>  <!-- closes animated background -->
+<div class="max-w-7xl...">  <!-- inside section -->
+</section>
+```

 ---

-## Phase 1: Animation Library & CSS Infrastructure
+## Phase 1: Create Reference Hero Template

-**Why:** Set up the foundation for all modern animations before touching components.
+Extract the correct hero structure from `armflex.astro`:

-**Test first** → `src/styles/global.css`
- Add scroll-triggered animation classes (fade-up, fade-left, fade-right, scale-in)
- Add Intersection Observer script for scroll animations
- Add text split animation utilities
- Add magnetic button effect CSS
- Add glassmorphism utility classes
- Add gradient mesh animation keyframes
- Add parallax utility classes
- Add page transition styles
-
-**Modify** → `src/layouts/BaseLayout.astro`
- Add animation initialization script in head
- Add page transition wrapper
-
-**Modify** → `src/components/common/Header.astro`
- Add scroll-triggered header style changes (shrink on scroll)
- Add mobile menu animation
- Add hover effects for nav items
+| Element | Correct Value |
+|---------|---------------|
+| Section class | `relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden` |
+| Animated bg div | `<div class="absolute inset-0 overflow-hidden pointer-events-none">` with mesh + particles + wave |
+| Content wrapper | `<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">` |
+| Grid | `<div class="grid lg:grid-cols-2 gap-12 items-start">` |
+| Image container | `<div class="lg:sticky lg:top-24">` + `<div class="rounded-2xl overflow-hidden bg-white/10 p-2">` |
+| Content div | `<div>` (no extra classes) |
+| Buttons | Orange LINE, White phone, White price (auto) |

 ---

-## Phase 2: Homepage Redesign
+## Phase 2: Fix All Product Pages

-**Why:** The homepage is the first impression - needs the most dramatic animation showcase.
+**Pages to fix (23 product pages):**
+1. ท่อ-ppr-scg.astro, ท่อ-ppr-thai-ppr.astro, ท่อ-hdpe.astro
+2. ท่อ-upvc.astro, ท่อ-syler.astro, ท่อ-xy-lent.astro
+3. วาล์ว-valve.astro, durgo-avvs.astro, grilles.astro
+4. pipe-coupling.astro, water-pump.astro, water-treatment.astro
+5. realflex.astro, รั้วเทวดา.astro, ระบบรั้วไวน์แมน.astro
+6. เครื่องเชื่อม-hdpe.astro, เครื่องเชื่อม-ppr.astro
+7. เทอร์โมเบรค-thermobreak.astro, เม็กกรู๊ฟ-คับปลิ้ง.astro
+8. ตู้ดับเพลิง.astro, aeroflex.astro, maxflex.astro

-**Modify** → `src/pages/index.astro`
- **Hero Section:**
-  - Replace static gradient with animated gradient mesh
-  - Add text split reveal animation (heading characters animate in sequence)
-  - Add floating 3D product cards with parallax on mouse move
-  - Add magnetic CTA buttons
-  
- **Featured Products:**
-  - Add scroll-triggered reveal with stagger
-  - Add 3D tilt effect on card hover
-  - Add image reveal animation on scroll
-  
- **Trust Badges:**
-  - Add counter animation (numbers count up)
-  - Add scroll-triggered icon animations
-  
- **CTA Section:**
-  - Add parallax background effect
-  - Add gradient animation
-
---
-
-## Phase 3: Product Pages & Components
-
-**Why:** Extend animations consistently across all pages.
-
-**Modify** → `src/layouts/BaseLayout.astro`
- Enhance footer with scroll-triggered animations
-
-**Modify** → `src/components/common/Header.astro`
- Add smooth scroll navigation highlighting
- Add mega menu with staggered item reveals
-
-**Modify** → Product pages (`src/pages/*.astro`)
- Add breadcrumb with reveal animation
- Add product gallery with lightbox and zoom
- Add related products carousel
-
---
-
-## Phase 4: Modern Design Enhancements
-
-**Why:** Add sophisticated design patterns beyond animations.
-
-**Modify** → `src/styles/global.css`
- Add bento grid layout utilities
- Add glassmorphism component classes
- Add custom cursor styles
- Add loading skeleton animations
-
-**Modify** → `src/pages/all-products.astro`
- Implement bento grid product layout
- Add filter animations
- Add lazy load with skeleton
-
---
-
-## Phase 5: Performance & Polish
-
-**Why:** Ensure animations don't impact performance negatively.
-
-**Test** → Run `npm run build` to verify no errors
-**Test** → Run `npm run dev` and verify animations work smoothly
-**Polish** → Add reduced-motion media query for accessibility
-**Polish** → Optimize animation performance (transform/opacity only)
+**For each page:**
+1. Fix section class order → put `relative` first
+2. Change gradient to 3-stop → `from-primary-800 via-primary-700 to-primary-900`
+3. Add `py-16 lg:py-24` padding
+4. Ensure content wrapper has `relative z-10`
+5. Add sticky wrapper around image

 ---

 ## Critical Files

-| File | Action | Changes |
-|------|--------|---------|
-| `src/styles/global.css` | Modify | Add animation library, utilities, glassmorphism |
-| `src/layouts/BaseLayout.astro` | Modify | Add animation scripts, page wrapper |
-| `src/layouts/Layout.astro` | Modify | Add meta tags, fonts |
-| `src/components/common/Header.astro` | Modify | Scroll effects, animations, mobile menu |
-| `src/components/common/Footer.astro` | Modify | Scroll animations, hover effects |
-| `src/pages/index.astro` | Modify | Complete hero/product/cta redesign with animations |
-
-## Animation Effects to Implement
-
-### CSS Animations (global.css)
-| Class | Effect |
-|-------|--------|
-| `.animate-fade-up` | Fade in + translate up on scroll |
-| `.animate-fade-left` | Fade in + translate left on scroll |
-| `.animate-fade-right` | Fade in + translate right on scroll |
-| `.animate-scale-in` | Scale from 0.9 to 1 on scroll |
-| `.animate-text-reveal` | Text reveals word by word/char by char |
-| `.animate-gradient-shift` | Animated gradient background |
-| `.glassmorphism` | Frosted glass effect |
-| `.magnetic-btn` | Button follows cursor on hover |
-| `.parallax` | Parallax scroll effect |
-| `.tilt-card` | 3D tilt on hover |
-
-### Intersection Observer Script
- Trigger animations when elements enter viewport
- Add `data-animate` attribute to elements
- Configure threshold and delay options
+| File | Action |
+|------|--------|
+| src/pages/armflex.astro | Reference (read-only) |
+| src/pages/ท่อ-ppr-thai-ppr.astro | Fix section class order |
+| src/pages/ท่อ-hdpe.astro | Fix orphan div |
+| All 23 product pages | Apply standard hero |

 ---

 ## Verification

-1. Run `npm run dev` at http://localhost:3100
-2. Scroll through homepage - verify animations trigger at correct positions
-3. Hover on product cards - verify 3D tilt effect
-4. Hover on CTA buttons - verify magnetic effect
-5. Resize to mobile - verify responsive animations
-6. Check `prefers-reduced-motion` - verify fallback animations
+1. Build succeeds: `npm run build`
+2. Check for duplicate `relative` or orphaned `<div>`
+3. Verify buttons have correct classes
+4. Visual check on dev server
+
+---
+
+## Implementation Notes
+
+Will fix each page individually to preserve unique content while applying standard hero structure.
--- a/src/pages/aeroflex.astro
+++ b/src/pages/aeroflex.astro
@@ -249,7 +249,7 @@ import Footer from '@/components/common/Footer.astro';
    </section>

    <!-- Download Section -->
-    <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden" id="pricelist">
+    <section class="py-16 bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white  relative overflow-hidden" id="pricelist">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="max-w-lg mx-auto text-center">
          <h2 class="text-xl font-bold mb-6">📥 ดาวน์โหลดราคาสินค้า Aeroflex</h2>
--- a/src/pages/durgo-avvs.astro
+++ b/src/pages/durgo-avvs.astro
@@ -295,7 +295,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
    </section>

    <!-- Contact CTA -->
-    <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-xl sm:text-2xl font-bold mb-6">สนใจสินค้าของเรา?</h2>
        <p class="text-lg text-white/80 mb-8 max-w-2xl mx-auto">
--- a/src/pages/grilles.astro
+++ b/src/pages/grilles.astro
@@ -301,7 +301,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
    </section>

    <!-- Contact CTA -->
-    <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-xl sm:text-2xl font-bold mb-6">สนใจสินค้าของเรา?</h2>
        <p class="text-lg text-white/80 mb-8 max-w-2xl mx-auto">
--- a/src/pages/maxflex.astro
+++ b/src/pages/maxflex.astro
@@ -248,7 +248,7 @@ import Footer from '@/components/common/Footer.astro';
    </section>

    <!-- Download Section -->
-    <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden" id="pricelist">
+    <section class="py-16 bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white  relative overflow-hidden" id="pricelist">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="max-w-lg mx-auto text-center">
          <h2 class="text-xl font-bold mb-6">📥 ดาวน์โหลดราคาสินค้า Maxflex FR</h2>
--- a/src/pages/pipe-coupling.astro
+++ b/src/pages/pipe-coupling.astro
@@ -198,7 +198,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
    </section>

    <!-- Contact CTA -->
-    <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-xl sm:text-2xl font-bold mb-6">สนใจสินค้าของเรา?</h2>
        <p class="text-lg text-white/80 mb-8 max-w-2xl mx-auto">
--- a/src/pages/realflex.astro
+++ b/src/pages/realflex.astro
@@ -26,7 +26,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';

  <main class="bg-white min-h-screen pb-24 md:pb-0">
    <!-- Hero Section -->
-    <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-12  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      
    <!-- Animated Background -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
@@ -217,7 +217,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
    </section>

    <!-- Contact CTA -->
-    <section class="py-16 px-4 bg-gradient-to-br from-primary-700 to-primary-600 text-white text-center  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      <div class="max-w-4xl mx-auto">
        <h2 class="text-3xl font-bold mb-6">สนใจสินค้านี้?</h2>
        <p class="text-lg text-primary-100 mb-8">ติดต่อ 090-555-1415 หรือแอดไลน์ @JPPSELECTION</p>
--- a/src/pages/water-pump.astro
+++ b/src/pages/water-pump.astro
@@ -327,7 +327,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
    </section>

    <!-- Contact CTA -->
-    <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-xl sm:text-2xl font-bold mb-6">สนใจสินค้าของเรา?</h2>
        <p class="text-lg text-white/80 mb-8 max-w-2xl mx-auto">
--- a/src/pages/water-treatment.astro
+++ b/src/pages/water-treatment.astro
@@ -26,7 +26,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';

  <main class="bg-white min-h-screen pb-24 md:pb-0">
    <!-- Hero Section -->
-    <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-12  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      
    <!-- Animated Background -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
@@ -216,7 +216,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
    </section>

    <!-- Contact CTA -->
-    <section class="py-16 px-4 bg-gradient-to-br from-primary-700 to-primary-600 text-white text-center  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      <div class="max-w-4xl mx-auto">
        <h2 class="text-3xl font-bold mb-6">สนใจสินค้านี้?</h2>
        <p class="text-lg text-primary-100 mb-8">ติดต่อ 090-555-1415 หรือแอดไลน์ @JPPSELECTION</p>
--- a/src/pages/ตู้ดับเพลิง.astro
+++ b/src/pages/ตู้ดับเพลิง.astro
@@ -45,8 +45,8 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
      </div>

      <!-- Desktop: Side-by-side (Hero Section) -->
-      <div class="hidden md:block bg-gradient-to-br from-primary-700 to-primary-600">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      <div class="hidden md:block bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div class="grid lg:grid-cols-2 gap-12 items-start">
            <div class="lg:sticky lg:top-24">
              <div class="rounded-2xl overflow-hidden bg-white/10 p-2">
@@ -349,7 +349,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
    </section>

    <!-- CTA Section -->
-    <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white text-center  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      
    <!-- Animated Background -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
--- a/src/pages/ท่อ-hdpe.astro
+++ b/src/pages/ท่อ-hdpe.astro
@@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 <BaseLayout title="ท่อ HDPE (High Density Polyethylene)" description="ท่อ HDPE ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร ปริมณฑล ท่อ HDPE คุณภาพสูง ทนทาน อายุการใช้งาน 50 ปี">
  <main class="bg-white min-h-screen">
    <!-- Hero Section -->
-    <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      
    <!-- Animated Background -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
@@ -39,7 +39,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
        </path>
      </svg>
    </div>
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="grid lg:grid-cols-2 gap-12 items-start">
          <div class="order-2 lg:order-1">
            <span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ HDPE</span>
@@ -132,7 +132,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
    </section>

    <!-- CTA -->
-    <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl font-bold mb-6">สนใจสินค้านี้?</h2>
        <p class="text-lg text-primary-100 mb-8">ติดต่อเราวันนี้ 090-555-1415 หรือแอดไลน์ @JPPSELECTION</p>
--- a/src/pages/ท่อ-ppr-scg.astro
+++ b/src/pages/ท่อ-ppr-scg.astro
@@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 <BaseLayout title="ท่อ PPR ตราช้าง (SCG)" description="ท่อ PPR ตราช้าง (SCG) ผลิตจากเม็ดพลาสติก PP-R 80 มาตรฐานยุโรป ทนแรงดัน 20 บาร์ ทนอุณหภูมิ 95°C ราคาถูก ส่งฟรี กทม. ปริมณฑล">
  <main class="bg-white min-h-screen">
    <!-- Hero Section -->
-    <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      
    <!-- Animated Background -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
@@ -39,7 +39,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
        </path>
      </svg>
    </div>
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="grid lg:grid-cols-2 gap-12 items-start">
          <div class="order-2 lg:order-1">
            <span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ PPR</span>
@@ -124,7 +124,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
    </section>

    <!-- CTA -->
-    <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl font-bold mb-6">สนใจสินค้านี้?</h2>
        <p class="text-lg text-primary-100 mb-8">ติดต่อเราวันนี้ 090-555-1415 หรือแอดไลน์ @JPPSELECTION</p>
--- a/src/pages/ท่อ-ppr-thai-ppr.astro
+++ b/src/pages/ท่อ-ppr-thai-ppr.astro
@@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 <BaseLayout title="ไทยพีพีอาร์ (Thai PPR) | ท่อพีพีอาร์ คุณภาพสูง" description="ไทยพีพีอาร์ (Thai PPR) ทางเลือกที่ดีที่สุดสำหรับงานระบบน้ำคุณภาพสูง ทั้งน้ำร้อนและน้ำเย็น ผลิตจากวัสดุ PP-R เกรดพรีเมียม ทนความร้อน 95°C อายุการใช้งาน 50 ปี">
  <main class="bg-white min-h-screen">
    <!-- Hero Section -->
-    <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      
    <!-- Animated Background -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
@@ -39,7 +39,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
        </path>
      </svg>
    </div>
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="grid lg:grid-cols-2 gap-12 items-start">
          <div class="order-2 lg:order-1">
            <span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ PPR</span>
@@ -143,7 +143,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
    </section>

    <!-- CTA -->
-    <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl font-bold mb-6">สนใจสินค้านี้?</h2>
        <p class="text-lg text-primary-100 mb-8">ติดต่อเราวันนี้ 090-555-1415 หรือแอดไลน์ @JPPSELECTION</p>
--- a/src/pages/ท่อ-syler.astro
+++ b/src/pages/ท่อ-syler.astro
@@ -344,7 +344,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
    </section>

    <!-- Contact CTA -->
-    <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-xl sm:text-2xl font-bold mb-6">สนใจสินค้าของเรา?</h2>
        <p class="text-lg text-white/80 mb-8 max-w-2xl mx-auto">
--- a/src/pages/ท่อ-upvc.astro
+++ b/src/pages/ท่อ-upvc.astro
@@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 <BaseLayout title="ท่อ UPVC (Unplasticized Polyvinyl Chloride)" description="ท่อ UPVC ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร ปริมณฑล ท่อยูพีวีซี ทนสารเคมี ทนความร้อน สำหรับงานอุตสาหกรรม">
  <main class="bg-white min-h-screen">
    <!-- Hero Section -->
-    <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      
    <!-- Animated Background -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
@@ -39,7 +39,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
        </path>
      </svg>
    </div>
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="grid lg:grid-cols-2 gap-12 items-start">
          <div class="order-2 lg:order-1">
            <span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ UPVC</span>
@@ -143,7 +143,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
    </section>

    <!-- CTA -->
-    <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl font-bold mb-6">สนใจสินค้านี้?</h2>
        <p class="text-lg text-primary-100 mb-8">ติดต่อเราวันนี้ 090-555-1415 หรือแอดไลน์ @JPPSELECTION</p>
--- a/src/pages/ท่อ-xy-lent.astro
+++ b/src/pages/ท่อ-xy-lent.astro
@@ -2,7 +2,7 @@
 import BaseLayout from '@/layouts/BaseLayout.astro';
 ---
 <BaseLayout title="ท่อ XYLENT - ดีล พลัส เทค" description="ท่อระบายน้ำ 3 ชั้น ไซเลนท์ (XYLENT) ระบบ Push Fit เงียบสนิท 22 เดซิเบล จาก Poloplast">
-  <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-12  relative overflow-hidden">
+  <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
    
    <!-- Animated Background -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
@@ -243,7 +243,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
  </section>

  <!-- CTA -->
-  <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white text-center  relative overflow-hidden">
+  <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
    <div class="max-w-4xl mx-auto px-4">
      <h2 class="text-3xl font-bold mb-6">สนใจสินค้านี้?</h2>
      <p class="text-lg text-primary-100 mb-8">ติดต่อ 090-555-1415 หรือแอดไลน์ @JPPSELECTION</p>
--- a/src/pages/ระบบรั้วไวน์แมน.astro
+++ b/src/pages/ระบบรั้วไวน์แมน.astro
@@ -26,7 +26,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';

  <main class="bg-white min-h-screen pb-24 md:pb-0">
    <!-- Hero Section -->
-    <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-12  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      
    <!-- Animated Background -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
@@ -555,7 +555,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
    </section>

    <!-- Contact CTA -->
-    <section class="py-16 px-4 bg-gradient-to-br from-primary-700 to-primary-600 text-white text-center  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      <div class="max-w-4xl mx-auto">
        <h2 class="text-3xl font-bold mb-6">สนใจสินค้านี้?</h2>
        <p class="text-lg text-primary-100 mb-8">ติดต่อ 090-555-1415 หรือแอดไลน์ @JPPSELECTION</p>
--- a/src/pages/รั้วเทวดา.astro
+++ b/src/pages/รั้วเทวดา.astro
@@ -3,7 +3,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 ---

 <BaseLayout title="รั้วเทวดา | ระบบรั้วสำเร็จรูป คุณภาพสูง ราคาคุ้มค่า" description="รั้วเทวดา ระบบรั้วสำเร็จรูปสำหรับโรงงาน โกดัง สถานที่เกษตร รีสอร์ท และอื่นๆ พร้อมบริการติดตั้งครบวงจร">
-  <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-12  relative overflow-hidden">
+  <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
    
    <!-- Animated Background -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
@@ -234,7 +234,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
  </section>

  <!-- CTA Section -->
-  <section class="py-16 bg-gradient-to-br from-accent-500 to-accent-600 text-white  relative overflow-hidden">
+  <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
      <h2 class="text-3xl lg:text-4xl font-bold mb-4">สนใจรั้วเทวดา?</h2>
      <p class="text-lg text-white/80 mb-8">ติดต่อทีมงานของเราวันนี้เพื่อรับใบเสนอราคาและคำแนะนำจากผู้เชี่ยวชาญ</p>
--- a/src/pages/วาล์ว-valve.astro
+++ b/src/pages/วาล์ว-valve.astro
@@ -237,7 +237,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
    </section>

    <!-- CTA Section -->
-    <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl font-bold mb-6">สนใจสินค้าของเรา?</h2>
        <p class="text-lg text-primary-100 mb-8">ติดต่อเราวันนี้เพื่อรับคำแนะนำและราคาพิเศษ</p>
--- a/src/pages/เครื่องเชื่อม-hdpe.astro
+++ b/src/pages/เครื่องเชื่อม-hdpe.astro
@@ -264,7 +264,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
    </section>

    <!-- Contact CTA -->
-    <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl font-bold mb-6">สนใจสินค้าของเรา?</h2>
        <p class="text-lg text-primary-100 mb-8">ติดต่อเราวันนี้เพื่อรับคำแนะนำและราคาพิเศษ</p>
--- a/src/pages/เครื่องเชื่อม-ppr.astro
+++ b/src/pages/เครื่องเชื่อม-ppr.astro
@@ -271,7 +271,7 @@ import Footer from '@/components/common/Footer.astro';
    </section>

    <!-- CTA Section -->
-    <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white text-center  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      <div class="max-w-4xl mx-auto px-4">
        <h2 class="text-2xl md:text-3xl font-bold mb-6">สนใจสินค้าของเรา?</h2>
        <p class="text-lg text-white/80 mb-8 max-w-2xl mx-auto">
--- a/src/pages/เทอร์โมเบรค-thermobreak.astro
+++ b/src/pages/เทอร์โมเบรค-thermobreak.astro
@@ -26,7 +26,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';

  <main class="bg-white min-h-screen pb-24 md:pb-0">
    <!-- Hero Section -->
-    <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-12  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      
    <!-- Animated Background -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
@@ -334,7 +334,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
    </section>

    <!-- Price Download Section -->
-    <section id="pricelist" class="py-16 px-4 bg-gradient-to-br from-primary-700 to-primary-600  relative overflow-hidden">
+    <section id="pricelist" class="py-16 px-4 bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900  relative overflow-hidden">
      <div class="max-w-4xl mx-auto text-center">
        <h2 class="text-2xl font-bold text-white mb-6">ดาวน์โหลดราคาสินค้า</h2>
        <a href="/documents/2026-New Update Thermobreak Price List.pdf" target="_blank" class="inline-flex items-start gap-4 p-6 bg-white rounded-xl hover:bg-neutral-100 transition-colors group">
@@ -348,7 +348,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
    </section>

    <!-- Contact CTA Section -->
-    <section class="py-16 px-4 bg-gradient-to-br from-primary-700 to-primary-600 text-white text-center  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      <div class="max-w-4xl mx-auto">
        <h2 class="text-3xl font-bold mb-6">สนใจสินค้านี้?</h2>
        <p class="text-lg text-primary-100 mb-8">ติดต่อ 090-555-1415 หรือแอดไลน์ @JPPSELECTION</p>
--- a/src/pages/เม็กกรู๊ฟ-คับปลิ้ง.astro
+++ b/src/pages/เม็กกรู๊ฟ-คับปลิ้ง.astro
@@ -45,8 +45,8 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
      </div>

      <!-- Desktop: Side-by-side (Hero Section) -->
-      <div class="hidden md:block bg-gradient-to-br from-primary-700 to-primary-600">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      <div class="hidden md:block bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div class="grid lg:grid-cols-2 gap-12 items-start">
            <div class="lg:sticky lg:top-24">
              <div class="rounded-2xl overflow-hidden bg-white/10 p-2">
@@ -324,7 +324,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
    </section>

    <!-- Price List Section -->
-    <section id="pricelist" class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white  relative overflow-hidden">
+    <section id="pricelist" class="py-16 bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white  relative overflow-hidden">
      
    <!-- Animated Background -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
@@ -373,7 +373,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
    </section>

    <!-- CTA Section -->
-    <section class="py-16 bg-gradient-to-br from-accent-500 to-accent-600 text-white text-center  relative overflow-hidden">
+    <section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 lg:py-24 overflow-hidden">
      <div class="max-w-4xl mx-auto px-4">
        <h2 class="text-2xl md:text-3xl font-bold mb-6">สนใจสินค้าของเรา?</h2>
        <p class="text-lg text-white/80 mb-8 max-w-2xl mx-auto">