Fix hero section structure - remove order classes, add missing classes
Changes: - Removed order-2 lg:order-1 from 9 pages (image now on LEFT) - Added bg-white/10 p-2 to image containers in 8 pages - Added lg:py-24 padding to sections in 8 pages Pages fixed: durgo-avvs, grilles, water-pump, pipe-coupling, ท่อ-hdpe, ท่อ-ppr-scg, ท่อ-ppr-thai-ppr, ท่อ-syler, ท่อ-upvc, ระบบน้ำ, วาล์ว-valve, เครื่องเชื่อม-hdpe, เครื่องเชื่อม-ppr
This commit is contained in:
Kunthawat Greethong
@@ -1,7 +1,49 @@
|
||||
{
|
||||
"version": 1,
|
||||
"updatedAt": "2026-05-21T09:49:46.267Z",
|
||||
"updatedAt": "2026-05-24T14:08:35.336Z",
|
||||
"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 Analyzed all 23 product pages against reference `armflex.astro`. ### Reference Structure (armflex.astro) ```html <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\"> <di…",
|
||||
"searchText": "plan Hero Section Fix Plan # Plan: Fix Hero Section Structure for All Product Pages ## Context Analyzed all 23 product pages against reference `armflex.astro`. ### Reference Structure (armflex.astro) ```html <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\"> <di… /Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md markdown approved false",
|
||||
"createdAt": "2026-05-24T13:16:51.249Z",
|
||||
"updatedAt": "2026-05-24T14:08:35.335Z",
|
||||
"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-24T14-04-15-688Z-hero-section-fix-plan-v2",
|
||||
"category": "plan",
|
||||
"title": "Hero Section Fix Plan v2",
|
||||
"summary": "# Plan: Fix Hero Section Structure for All Product Pages ## Context Compared `armflex.astro` (reference) vs `water-pump.astro` (problem page). Found clear differences: ### Key Differences Identified | Element | armflex (Reference) ✓ | water-pump (Problem) ✗ | |---------|------------------------|-----------------------…",
|
||||
"searchText": "plan Hero Section Fix Plan v2 # Plan: Fix Hero Section Structure for All Product Pages ## Context Compared `armflex.astro` (reference) vs `water-pump.astro` (problem page). Found clear differences: ### Key Differences Identified | Element | armflex (Reference) ✓ | water-pump (Problem) ✗ | |---------|------------------------|-----------------------… /Users/kunthawatgreethong/gitea/dealplustech-emdash/.context/todo.md markdown declined false",
|
||||
"createdAt": "2026-05-24T14:04:15.688Z",
|
||||
"updatedAt": "2026-05-24T14:04:15.688Z",
|
||||
"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 v2",
|
||||
"tags": [
|
||||
"plan",
|
||||
"markdown"
|
||||
],
|
||||
"metadata": {
|
||||
"action": "declined",
|
||||
"modified": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "2026-05-21T09-49-46-266Z-modern-animated-redesign-deal-plus-tech",
|
||||
"category": "plan",
|
||||
|
||||
240
.context/todo.md
240
.context/todo.md
@@ -1,163 +1,141 @@
|
||||
# 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.
|
||||
Analyzed all 23 product pages against reference `armflex.astro`.
|
||||
|
||||
**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`
|
||||
### Reference Structure (armflex.astro)
|
||||
|
||||
**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
|
||||
|
||||
---
|
||||
|
||||
## Phase 1: Animation Library & CSS Infrastructure
|
||||
|
||||
**Why:** Set up the foundation for all modern animations before touching components.
|
||||
|
||||
**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
|
||||
|
||||
---
|
||||
|
||||
## Phase 2: Homepage Redesign
|
||||
|
||||
**Why:** The homepage is the first impression - needs the most dramatic animation showcase.
|
||||
|
||||
**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
|
||||
```html
|
||||
<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="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<!-- 3 floating particles -->
|
||||
<!-- 1 wave SVG -->
|
||||
</div>
|
||||
|
||||
- **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
|
||||
<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">
|
||||
<img ... />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<!-- Content: badge, h1, p, buttons -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Phase 3: Product Pages & Components
|
||||
## Issues Found
|
||||
|
||||
**Why:** Extend animations consistently across all pages.
|
||||
### Issue 1: ORDER CLASSES (9 pages)
|
||||
**Problem:** Order classes swap image/content positions differently on mobile vs desktop.
|
||||
|
||||
**Modify** → `src/layouts/BaseLayout.astro`
|
||||
- Enhance footer with scroll-triggered animations
|
||||
| Page | Current Order | Result |
|
||||
|------|--------------|--------|
|
||||
| durgo-avvs | order-2 lg:order-1 | Image on right (desktop) |
|
||||
| grilles | order-2 lg:order-1 | Image on right (desktop) |
|
||||
| water-pump | order-2 lg:order-1 | Image on right (desktop) |
|
||||
| ท่อ-hdpe | order-2 lg:order-1 | Image on right (desktop) |
|
||||
| ท่อ-ppr-scg | order-2 lg:order-1 | Image on right (desktop) |
|
||||
| ท่อ-ppr-thai-ppr | order-2 lg:order-1 | Image on right (desktop) |
|
||||
| ท่อ-syler | order-2 lg:order-1 | Image on right (desktop) |
|
||||
| ท่อ-upvc | order-2 lg:order-1 | Image on right (desktop) |
|
||||
| เครื่องเชื่อม-hdpe | order-2 lg:order-1 | Image on right (desktop) |
|
||||
|
||||
**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
|
||||
**Fix:** Remove order classes entirely. Image will be on LEFT on ALL screen sizes.
|
||||
|
||||
---
|
||||
|
||||
## Phase 4: Modern Design Enhancements
|
||||
### Issue 2: MISSING IMAGE CONTAINER CLASSES (7 pages)
|
||||
|
||||
**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
|
||||
| Page | Fix Needed |
|
||||
|------|-----------|
|
||||
| durgo-avvs | Add `bg-white/10 p-2` to image container |
|
||||
| grilles | Add `bg-white/10 p-2` to image container |
|
||||
| water-pump | Add `bg-white/10 p-2` to image container |
|
||||
| ท่อ-hdpe | Add `bg-white/10 p-2` to image container |
|
||||
| ท่อ-ppr-scg | Add `bg-white/10 p-2` to image container |
|
||||
| ท่อ-ppr-thai-ppr | Add `bg-white/10 p-2` to image container |
|
||||
| ท่อ-upvc | Add `bg-white/10 p-2` to image container |
|
||||
| ท่อ-syler | Add `bg-white/10 p-2` to image container |
|
||||
|
||||
---
|
||||
|
||||
## Phase 5: Performance & Polish
|
||||
### Issue 3: MISSING SECTION PADDING (7 pages)
|
||||
|
||||
**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)
|
||||
| Page | Fix Needed |
|
||||
|------|-----------|
|
||||
| durgo-avvs | Add `lg:py-24` to section class |
|
||||
| grilles | Add `lg:py-24` to section class |
|
||||
| pipe-coupling | Add `lg:py-24` to section class |
|
||||
| ท่อ-syler | Add `lg:py-24` to section class |
|
||||
| ระบบน้ำ | Add `lg:py-24` to section class |
|
||||
| วาล์ว-valve | Add `lg:py-24` to section class |
|
||||
| เครื่องเชื่อม-hdpe | Add `lg:py-24` to section class |
|
||||
| เครื่องเชื่อม-ppr | Add `lg:py-24` to section class |
|
||||
|
||||
---
|
||||
|
||||
## Critical Files
|
||||
## Pages Status Summary
|
||||
|
||||
| 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 |
|
||||
| Page | Order Class | Image Container | Section Padding |
|
||||
|------|-------------|-----------------|-----------------|
|
||||
| aeroflex | ✅ OK | ✅ OK | ✅ OK |
|
||||
| armflex | ✅ OK | ✅ OK | ✅ OK |
|
||||
| maxflex | ✅ OK | ✅ OK | ✅ OK |
|
||||
| pipe-coupling | ✅ OK | ✅ OK | ❌ Missing lg:py-24 |
|
||||
| realflex | ✅ OK | ✅ OK | ✅ OK |
|
||||
| water-treatment | ✅ OK | ✅ OK | ✅ OK |
|
||||
| ตู้ดับเพลิง | ✅ OK | ✅ OK | ✅ OK |
|
||||
| ระบบน้ำ | ✅ OK | ✅ OK | ❌ Missing lg:py-24 |
|
||||
| ระบบรั้วไวน์แมน | ✅ OK | ✅ OK | ✅ OK |
|
||||
| รั้วเทวดา | ✅ OK | ✅ OK | ✅ OK |
|
||||
| เทอร์โมเบรค-thermobreak | ✅ OK | ✅ OK | ✅ OK |
|
||||
| เม็ดกรู๊ฟ-คับปลิ้ง | ✅ OK | ✅ OK | ✅ OK |
|
||||
| ท่อ-xy-lent | ✅ OK | ✅ OK | ✅ OK |
|
||||
| durgo-avvs | ❌ WRONG | ❌ Missing | ❌ Missing |
|
||||
| grilles | ❌ WRONG | ❌ Missing | ❌ Missing |
|
||||
| water-pump | ❌ WRONG | ❌ Missing | ❌ Missing |
|
||||
| ท่อ-hdpe | ❌ WRONG | ❌ Missing | ✅ OK |
|
||||
| ท่อ-ppr-scg | ❌ WRONG | ❌ Missing | ✅ OK |
|
||||
| ท่อ-ppr-thai-ppr | ❌ WRONG | ❌ Missing | ✅ OK |
|
||||
| ท่อ-syler | ❌ WRONG | ❌ Missing | ❌ Missing |
|
||||
| ท่อ-upvc | ❌ WRONG | ❌ Missing | ✅ OK |
|
||||
| เครื่องเชื่อม-hdpe | ❌ WRONG | ✅ OK | ❌ Missing |
|
||||
| วาล์ว-valve | ✅ OK | ✅ OK | ❌ Missing |
|
||||
| เครื่องเชื่อม-ppr | ✅ OK | ✅ OK | ❌ Missing |
|
||||
|
||||
## 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 |
|
||||
## Implementation
|
||||
|
||||
### Intersection Observer Script
|
||||
- Trigger animations when elements enter viewport
|
||||
- Add `data-animate` attribute to elements
|
||||
- Configure threshold and delay options
|
||||
### Fix Order (to avoid conflicts):
|
||||
1. **First:** Remove order classes from all affected pages
|
||||
2. **Second:** Add missing image container classes
|
||||
3. **Third:** Add missing section padding
|
||||
|
||||
### Fix Code for each page:
|
||||
|
||||
```javascript
|
||||
// Remove order classes
|
||||
.replace(/order-[12] lg:order-[12]/g, '')
|
||||
|
||||
// Add image container classes
|
||||
.replace('class="rounded-2xl overflow-hidden"', 'class="rounded-2xl overflow-hidden bg-white/10 p-2"')
|
||||
|
||||
// Add section padding
|
||||
.replace('py-16 overflow-hidden">', 'py-16 lg:py-24 overflow-hidden">')
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 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. `npm run build` succeeds
|
||||
2. Visual check on dev server (mobile AND desktop)
|
||||
3. Image should be on LEFT side in ALL pages
|
||||
@@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<BaseLayout title="ระบบวาล์วเติมอากาศ DURGO AVVs" description="จำหน่ายระบบวาล์วเติมอากาศ DURGO AVVs คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
|
||||
<main class="bg-white min-h-screen">
|
||||
<!-- Product Hero Section -->
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 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">
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
|
||||
@@ -40,13 +40,13 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
</div>
|
||||
<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">
|
||||
<div class="">
|
||||
<div class="lg:sticky lg:top-24">
|
||||
<div class="rounded-2xl overflow-hidden">
|
||||
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
|
||||
<img src="/images/products-cropped/durgo_000C.jpg" alt="DURGO AVVs" class="w-full h-auto rounded-xl" width="600" height="400" loading="eager" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 lg:order-2">
|
||||
<div class="">
|
||||
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">วาล์วเติมอากาศ</span>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">ระบบวาล์วเติมอากาศ DURGO AVVs</h1>
|
||||
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
|
||||
|
||||
@@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<BaseLayout title="กริลแอร์พลาสติก (Grilles air plastic)" description="จำหน่ายกริลแอร์พลาสติก (ABS) และอลูมิเนียม คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
|
||||
<main class="bg-white min-h-screen">
|
||||
<!-- Product Hero Section -->
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 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">
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
|
||||
@@ -40,13 +40,13 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
</div>
|
||||
<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">
|
||||
<div class="">
|
||||
<div class="lg:sticky lg:top-24">
|
||||
<div class="rounded-2xl overflow-hidden">
|
||||
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
|
||||
<img src="/images/products-cropped/grilles_000C.jpg" alt="กริลแอร์พลาสติก" class="w-full h-auto rounded-xl" width="600" height="400" loading="eager" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 lg:order-2">
|
||||
<div class="">
|
||||
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">กริลแอร์</span>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">กริลแอร์ (Grilles air)</h1>
|
||||
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
|
||||
|
||||
@@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<BaseLayout title="ข้อต่อท่อ SMC (Pipe Coupling)" description="จำหน่ายข้อต่อท่อ SMC (Pipe Coupling) คุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
|
||||
<main class="bg-white min-h-screen">
|
||||
<!-- Product Hero Section -->
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 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">
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
|
||||
|
||||
@@ -40,13 +40,13 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
</div>
|
||||
<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">
|
||||
<div class="">
|
||||
<div class="lg:sticky lg:top-24">
|
||||
<div class="rounded-2xl overflow-hidden">
|
||||
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
|
||||
<img src="/images/products-cropped/water-pump_000C.jpg" alt="ปั๊มน้ำ (Water Pump)" class="w-full h-auto rounded-xl" width="600" height="400" loading="eager" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 lg:order-2">
|
||||
<div class="">
|
||||
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ปั๊มน้ำ</span>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">ปั๊มน้ำ (Water Pump)</h1>
|
||||
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
|
||||
|
||||
@@ -41,7 +41,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-start">
|
||||
<div class="order-2 lg:order-1">
|
||||
<div class="">
|
||||
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ HDPE</span>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">ท่อ HDPE (High Density Polyethylene)</h1>
|
||||
<p class="text-lg text-primary-100 mb-8 leading-relaxed">
|
||||
@@ -82,9 +82,9 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 lg:order-2">
|
||||
<div class="">
|
||||
<div class="lg:sticky lg:top-24">
|
||||
<div class="rounded-2xl overflow-hidden">
|
||||
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
|
||||
<img src="/images/products-cropped/hdpe001.png" alt="ท่อ HDPE (High Density Polyethylene)" class="w-full" loading="eager" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -41,7 +41,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-start">
|
||||
<div class="order-2 lg:order-1">
|
||||
<div class="">
|
||||
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ PPR</span>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">ท่อ PPR ตราช้าง (SCG)</h1>
|
||||
<p class="text-lg text-primary-100 mb-8 leading-relaxed">
|
||||
@@ -82,9 +82,9 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 lg:order-2">
|
||||
<div class="">
|
||||
<div class="lg:sticky lg:top-24">
|
||||
<div class="rounded-2xl overflow-hidden">
|
||||
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
|
||||
<img src="/images/products-cropped/ppr-scg.jpg" alt="ท่อ PPR ตราช้าง (SCG)" class="w-full" loading="eager" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -41,7 +41,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-start">
|
||||
<div class="order-2 lg:order-1">
|
||||
<div class="">
|
||||
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ PPR</span>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">ไทยพีพีอาร์ (Thai PPR)</h1>
|
||||
<p class="text-lg text-primary-100 mb-8 leading-relaxed">
|
||||
@@ -82,9 +82,9 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 lg:order-2">
|
||||
<div class="">
|
||||
<div class="lg:sticky lg:top-24">
|
||||
<div class="rounded-2xl overflow-hidden">
|
||||
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
|
||||
<img src="/images/products-cropped/ppr-pipe_000C.jpg" alt="ไทยพีพีอาร์ (Thai PPR)" class="w-full" loading="eager" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<BaseLayout title="ท่อ Syler | ท่อเหล็กบุพีอี" description="จำหน่ายท่อ Syler ท่อเหล็กบุพีอีคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
|
||||
<main class="bg-white min-h-screen">
|
||||
<!-- Product Hero Section -->
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 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">
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
|
||||
@@ -40,13 +40,13 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
</div>
|
||||
<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">
|
||||
<div class="">
|
||||
<div class="lg:sticky lg:top-24">
|
||||
<div class="rounded-2xl overflow-hidden">
|
||||
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
|
||||
<img src="/images/products-cropped/syler-pipe-cold-water.jpg" alt="ท่อ Syler" class="w-full h-auto rounded-xl" width="600" height="400" loading="eager" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 lg:order-2">
|
||||
<div class="">
|
||||
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ Syler</span>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">ท่อ Syler | ท่อเหล็กบุพีอี</h1>
|
||||
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
|
||||
|
||||
@@ -41,7 +41,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-start">
|
||||
<div class="order-2 lg:order-1">
|
||||
<div class="">
|
||||
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">ท่อ UPVC</span>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">ท่อ UPVC (Unplasticized Polyvinyl Chloride)</h1>
|
||||
<p class="text-lg text-primary-100 mb-8 leading-relaxed">
|
||||
@@ -82,9 +82,9 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 lg:order-2">
|
||||
<div class="">
|
||||
<div class="lg:sticky lg:top-24">
|
||||
<div class="rounded-2xl overflow-hidden">
|
||||
<div class="rounded-2xl overflow-hidden bg-white/10 p-2">
|
||||
<img src="/images/products-cropped/upvc-pipe_000C.jpg" alt="ท่อ UPVC" class="w-full" loading="eager" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<BaseLayout title="ระบบน้ำ - วาล์ว ปั๊มน้ำ ระบบกรองน้ำ" description="ระบบน้ำครบวงจร วาล์ว ปั๊มน้ำ ระบบกรองน้ำ คุณภาพสูง ราคาโรงงาน ส่งฟรี กรุงเทพมหานคร ปริมณฑล">
|
||||
<main class="bg-white min-h-screen">
|
||||
<!-- Category Hero Section -->
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 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">
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
|
||||
|
||||
@@ -21,7 +21,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<BaseLayout title="วาล์ว (Valve) - วาล์วน้ำทุกประเภท" description="จำหน่ายวาล์ว (Valve) - วาล์วน้ำทุกประเภทคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล">
|
||||
<main class="bg-white min-h-screen">
|
||||
<!-- Product Hero Section -->
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 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">
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
|
||||
|
||||
@@ -21,7 +21,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<BaseLayout title="เครื่องเชื่อมท่อ HDPE (HDPE Pipe Welding Machine)" description="จำหน่ายเครื่องเชื่อมท่อ HDPE คุณภาพสูง ราคาโรงงาน เครื่องเชื่อมแบบ Butt Fusion และ Electrofusion">
|
||||
<main class="bg-white min-h-screen">
|
||||
<!-- Product Hero Section -->
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 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">
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
|
||||
@@ -56,13 +56,13 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
</div>
|
||||
<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">
|
||||
<div class="">
|
||||
<div class="lg:sticky lg:top-24">
|
||||
<div class="rounded-2xl overflow-hidden bg-white/10">
|
||||
<img src="/images/HDPE-welding-crop.jpg" alt="เครื่องเชื่อมท่อ HDPE" class="w-full" width="600" height="400" loading="eager" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-1 lg:order-2">
|
||||
<div class="">
|
||||
<span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">เครื่องเชื่อมท่อ</span>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">เครื่องเชื่อมท่อ HDPE</h1>
|
||||
<p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
|
||||
|
||||
@@ -9,7 +9,7 @@ import Footer from '@/components/common/Footer.astro';
|
||||
|
||||
<main class="bg-white min-h-screen">
|
||||
<!-- Product Hero Section -->
|
||||
<section class="relative bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white py-16 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">
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/30 via-primary-500/15 to-transparent rounded-full blur-[100px] animate-mesh-1"></div>
|
||||
|
||||
Reference in New Issue
Block a user