Update insulation brand pages (Armaflex, Aeroflex, Maxflex)
- 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
This commit is contained in:
Kunthawat Greethong
@@ -11,7 +11,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
"@type": "Product",
|
||||
"name": "ระบบรั้วไวน์แมน Vineman รั้วตาข่าย ลวดหนาม",
|
||||
"description": "จำหน่ายระบบรั้วไวน์แมน Vineman รั้วตาข่าย ลวดหนามคุณภาพสูง ราคาโรงงาน ส่งฟรี กทม. ปริมณฑล",
|
||||
"image": "https://dealplustech.co.th/images/products-raw/vineman/ระบบรั้วไวน์แมน-Vineman-e1613286324569-1024x880.jpg",
|
||||
"image": "https://dealplustech.co.th/images/products-raw/vineman/ระบบรั้วไวน์แมน-Vineman-e1613286324569-1024x880.svg",
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"url": "https://dealplustech.co.th/ระบบรั้วไวน์แมน-vineman-2",
|
||||
@@ -27,13 +27,13 @@ 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">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<nav class="text-sm mb-4 text-primary-100">
|
||||
<a href="/" class="hover:text-white">หน้าแรก</a> / <a href="/all-products" class="hover:text-white">สินค้าทั้งหมด</a> / <span class="text-white">ระบบรั้วไวน์แมน</span>
|
||||
</nav>
|
||||
<div class="grid lg:grid-cols-2 gap-8 items-center">
|
||||
<div class="img-hover rounded-2xl overflow-hidden bg-white/10">
|
||||
<img src="/images/products-raw/vineman/ระบบรั้วไวน์แมน-Vineman-e1613286324569-1024x880.jpg" alt="ระบบรั้วไวน์แมน Vineman" class="w-full" loading="eager" />
|
||||
<img src="/images/products-raw/vineman/ระบบรั้วไวน์แมน-Vineman-e1613286324569-1024x880.svg" alt="ระบบรั้วไวน์แมน Vineman" class="w-full" loading="eager" />
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm text-primary-200 font-medium">ระบบรั้ว</span>
|
||||
@@ -77,19 +77,19 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<h2 class="text-2xl font-bold text-neutral-900 mb-8 text-center">ลวดหนาม/เสารั้ว/เสารับแรง</h2>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/ระบบรั้วไวน์แมน.jpg" alt="ระบบรั้วไวน์แมน" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/ระบบรั้วไวน์แมน.svg" alt="ระบบรั้วไวน์แมน" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<p class="text-neutral-700 font-medium">ระบบรั้วไวน์แมน</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/ลวดหนาม.jpg" alt="ลวดหนาม" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/ลวดหนาม.svg" alt="ลวดหนาม" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<p class="text-neutral-700 font-medium">ลวดหนาม</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/ตาข่ายถักปม.jpg" alt="ตาข่ายถักปม" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/ตาข่ายถักปม.svg" alt="ตาข่ายถักปม" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<p class="text-neutral-700 font-medium">ตาข่ายถักปม</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/ฟิคซ์ล็อค.jpg" alt="ฟิคซ์ล็อค" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/ฟิคซ์ล็อค.svg" alt="ฟิคซ์ล็อค" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<p class="text-neutral-700 font-medium">ฟิคซ์ล็อค</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -104,7 +104,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<h2 class="text-2xl font-bold text-neutral-900 mb-8 text-center">6 เทคนิคน่ารู้ ก่อนเลือกใช้ ระบบรั้วตาข่าย</h2>
|
||||
<div class="grid lg:grid-cols-2 gap-8 items-center">
|
||||
<div>
|
||||
<img src="/images/products-raw/vineman/เทคนิคน่ารู้-ก่อนเลือกใช้-ระบบรั้วตาข่าย-488x1024.jpg" alt="6 เทคนิคน่ารู้" class="w-full h-auto rounded-xl max-w-md mx-auto" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/เทคนิคน่ารู้-ก่อนเลือกใช้-ระบบรั้วตาข่าย-488x1024.svg" alt="6 เทคนิคน่ารู้" class="w-full h-auto rounded-xl max-w-md mx-auto" loading="lazy" />
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start space-x-3">
|
||||
@@ -146,27 +146,27 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<!-- Problems Grid -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/จุดเชื่อมของเสาค้ำยันไม่คงทน.jpg" alt="จุดเชื่อมของเสาค้ำยันไม่คงทน" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/จุดเชื่อมของเสาค้ำยันไม่คงทน.svg" alt="จุดเชื่อมของเสาค้ำยันไม่คงทน" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<p class="text-sm text-neutral-700">จุดเชื่อมของเสาค้ำยันไม่คงทน</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/เปราะ-แตกหักง่าย.jpg" alt="เปราะ แตกหักง่าย" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/เปราะ-แตกหักง่าย.svg" alt="เปราะ แตกหักง่าย" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<p class="text-sm text-neutral-700">เปราะ แตกหักง่าย</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/ตัวยึดลวดหนาม-หลุดง่าย.jpg" alt="ตัวยึดลวดหนาม หลุดง่าย" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/ตัวยึดลวดหนาม-หลุดง่าย.svg" alt="ตัวยึดลวดหนาม หลุดง่าย" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<p class="text-sm text-neutral-700">ตัวยึดลวดหนาม หลุดง่าย</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/เสาค้ำยันไม่แข็งแรง.jpg" alt="เสาค้ำยันไม่แข็งแรง" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/เสาค้ำยันไม่แข็งแรง.svg" alt="เสาค้ำยันไม่แข็งแรง" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<p class="text-sm text-neutral-700">เสาค้ำยันไม่แข็งแรง</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/เกิดรอยร้าวง่าย.jpg" alt="เกิดรอยร้าวง่าย" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/เกิดรอยร้าวง่าย.svg" alt="เกิดรอยร้าวง่าย" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<p class="text-sm text-neutral-700">เกิดรอยร้าวง่าย</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/ต้องหล่อปูนทำฐานรากทุกต้น.jpg" alt="ต้องหล่อปูนทำฐานรากทุกต้น" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/ต้องหล่อปูนทำฐานรากทุกต้น.svg" alt="ต้องหล่อปูนทำฐานรากทุกต้น" class="w-full h-auto rounded-lg mb-2" loading="lazy" />
|
||||
<p class="text-sm text-neutral-700">ต้องหล่อปูนทำฐานรากทุกต้น</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -174,10 +174,10 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<!-- Solutions -->
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<img src="/images/products-raw/vineman/รั้วโปร่งโล่งสบายตา-1024x1013.jpg" alt="รั้วโปร่งโล่งสบายตา" class="w-full h-auto rounded-xl" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/รั้วโปร่งโล่งสบายตา-1024x1013.svg" alt="รั้วโปร่งโล่งสบายตา" class="w-full h-auto rounded-xl" loading="lazy" />
|
||||
</div>
|
||||
<div>
|
||||
<img src="/images/products-raw/vineman/แข็งแรง-ติดตั้งง่าย-ได้ทุกภูมิทัศน์.jpg" alt="แข็งแรง ติดตั้งง่าย ได้ทุกภูมิทัศน์" class="w-full h-auto rounded-xl" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/แข็งแรง-ติดตั้งง่าย-ได้ทุกภูมิทัศน์.svg" alt="แข็งแรง ติดตั้งง่าย ได้ทุกภูมิทัศน์" class="w-full h-auto rounded-xl" loading="lazy" />
|
||||
<p class="text-center text-neutral-700 font-medium mt-4">แข็งแรง ติดตั้งง่าย ได้ทุกภูมิทัศน์</p>
|
||||
<p class="text-neutral-600 text-sm mt-2">ระบบรั้วตาข่ายไวน์แมน สามารถติดตั้งเดินแนวรั้วบนพื้นที่ทุกรูปแบบทั้งขึ้น-ลง เนินส่วนเว้า-ส่วนโค้งได้อย่างแข็งแรงและต่อเนื่อง</p>
|
||||
</div>
|
||||
@@ -193,15 +193,15 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<h2 class="text-2xl font-bold text-neutral-900 mb-8 text-center">รั้วตาข่ายไวน์แมน ใช้ได้กับเสาทุกประเภท</h2>
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/ระบบรั้วไวน์แมน-ระยะห่างของเสา-5-8-เมตร-1024x302.jpg" alt="ระยะห่างของเสา 5-8 เมตร" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/ระบบรั้วไวน์แมน-ระยะห่างของเสา-5-8-เมตร-1024x302.svg" alt="ระยะห่างของเสา 5-8 เมตร" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<p class="text-neutral-700 font-medium">เสาไวน์แมน ระยะห่าง 5-8 เมตร</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/เสาปูน-ระยะห่างของเสา-4-6-เมตร-1024x299.jpg" alt="เสาปูน ระยะห่าง 4-6 เมตร" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/เสาปูน-ระยะห่างของเสา-4-6-เมตร-1024x299.svg" alt="เสาปูน ระยะห่าง 4-6 เมตร" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<p class="text-neutral-700 font-medium">เสาปูน ระยะห่าง 4-6 เมตร</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img src="/images/products-raw/vineman/เสาไม้เนื้อแข็ง-ระยะห่างของเสา-4-6-เมตร-1024x295.jpg" alt="เสาไม้เนื้อแข็ง ระยะห่าง 4-6 เมตร" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/เสาไม้เนื้อแข็ง-ระยะห่างของเสา-4-6-เมตร-1024x295.svg" alt="เสาไม้เนื้อแข็ง ระยะห่าง 4-6 เมตร" class="w-full h-auto rounded-xl mb-3" loading="lazy" />
|
||||
<p class="text-neutral-700 font-medium">เสาไม้เนื้อแข็ง ระยะห่าง 4-6 เมตร</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -216,7 +216,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<h2 class="text-2xl font-bold text-neutral-900 mb-8 text-center">ไวน์แมน รั้วตาข่ายกึ่งสปริง</h2>
|
||||
<div class="grid lg:grid-cols-2 gap-8 items-center">
|
||||
<div>
|
||||
<img src="/images/products-raw/vineman/ไวน์แมน-รั้วตาข่ายกึ่งสปริง.jpg" alt="รั้วตาข่ายกึ่งสปริง" class="w-full h-auto rounded-xl" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/ไวน์แมน-รั้วตาข่ายกึ่งสปริง.svg" alt="รั้วตาข่ายกึ่งสปริง" class="w-full h-auto rounded-xl" loading="lazy" />
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<p class="text-neutral-700 leading-relaxed">
|
||||
@@ -253,7 +253,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<h2 class="text-2xl font-bold text-neutral-900 mb-8 text-center">VINEMAN Buying Guide</h2>
|
||||
<div class="grid lg:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<img src="/images/products-raw/vineman/VINEMAN-Buying-Guide.jpg" alt="VINEMAN Buying Guide" class="w-full h-auto rounded-xl" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/VINEMAN-Buying-Guide.svg" alt="VINEMAN Buying Guide" class="w-full h-auto rounded-xl" loading="lazy" />
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<p class="text-neutral-700 font-medium">สูตรคำนวณความยาวรอบพื้นที่โดยประมาณ</p>
|
||||
@@ -273,7 +273,7 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold text-neutral-900 mb-8 text-center">ตาราง การคำนวณปริมาณเบื้องต้น</h2>
|
||||
<img src="/images/products-raw/vineman/ตารางการคำนวณปริมาณเบื้องต้น-1024x322.jpg" alt="ตารางการคำนวณปริมาณเบื้องต้น" class="w-full max-w-3xl mx-auto h-auto rounded-xl" loading="lazy" />
|
||||
<img src="/images/products-raw/vineman/ตารางการคำนวณปริมาณเบื้องต้น-1024x322.svg" alt="ตารางการคำนวณปริมาณเบื้องต้น" class="w-full max-w-3xl mx-auto h-auto rounded-xl" loading="lazy" />
|
||||
<div class="mt-6 p-4 bg-yellow-50 rounded-xl max-w-3xl mx-auto">
|
||||
<p class="text-neutral-700 text-sm"><strong>หมายเหตุ:</strong></p>
|
||||
<ul class="text-neutral-600 text-sm list-disc list-inside space-y-1 mt-2">
|
||||
@@ -456,6 +456,38 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="border border-neutral-200 rounded-xl overflow-hidden">
|
||||
<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>
|
||||
|
||||
<!-- Floating Particles -->
|
||||
<div class="absolute top-1/4 left-1/4 w-2 h-2 bg-white/30 rounded-full animate-float"></div>
|
||||
<div class="absolute top-1/3 right-1/4 w-3 h-3 bg-primary-300/20 rounded-full animate-float-delayed-1"></div>
|
||||
<div class="absolute top-2/3 left-1/3 w-2 h-2 bg-primary-200/20 rounded-full animate-float-delayed-2"></div>
|
||||
<div class="absolute top-1/2 right-1/3 w-4 h-4 bg-white/15 rounded-full animate-float"></div>
|
||||
<div class="absolute bottom-1/4 left-2/3 w-3 h-3 bg-primary-400/15 rounded-full animate-float-delayed-3"></div>
|
||||
|
||||
<!-- Water-inspired Waves -->
|
||||
<svg class="absolute bottom-0 left-0 w-full h-[250px] opacity-20" viewBox="0 0 1440 250" preserveAspectRatio="none">
|
||||
<path d="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z" fill="none" stroke="url(#water-gradient-hero)" stroke-width="2">
|
||||
<animate attributeName="d" dur="10s" repeatCount="indefinite" values="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z;M0,180 Q360,80 720,180 T1440,180 L1440,250 L0,250 Z;M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z"/>
|
||||
</path>
|
||||
<defs>
|
||||
<linearGradient id="water-gradient-hero" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#40916c"/>
|
||||
<stop offset="50%" stop-color="#74c69d"/>
|
||||
<stop offset="100%" stop-color="#40916c"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<!-- Second Wave Layer -->
|
||||
<svg class="absolute bottom-0 left-0 w-full h-[200px] opacity-10" viewBox="0 0 1440 200" preserveAspectRatio="none">
|
||||
<path d="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1">
|
||||
<animate attributeName="d" dur="15s" repeatCount="indefinite" values="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z;M0,120 Q240,20 480,120 T960,120 T1440,120 L1440,200 L0,200 Z;M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z"/>
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-4 cursor-pointer bg-neutral-50 hover:bg-neutral-100 transition-colors">
|
||||
<span class="font-medium text-neutral-900">ระบบรั้วไวน์แมนมีอายุการใช้งานนานเท่าไหร่?</span>
|
||||
@@ -470,6 +502,38 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
</div>
|
||||
|
||||
<div class="border border-neutral-200 rounded-xl overflow-hidden">
|
||||
<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>
|
||||
|
||||
<!-- Floating Particles -->
|
||||
<div class="absolute top-1/4 left-1/4 w-2 h-2 bg-white/30 rounded-full animate-float"></div>
|
||||
<div class="absolute top-1/3 right-1/4 w-3 h-3 bg-primary-300/20 rounded-full animate-float-delayed-1"></div>
|
||||
<div class="absolute top-2/3 left-1/3 w-2 h-2 bg-primary-200/20 rounded-full animate-float-delayed-2"></div>
|
||||
<div class="absolute top-1/2 right-1/3 w-4 h-4 bg-white/15 rounded-full animate-float"></div>
|
||||
<div class="absolute bottom-1/4 left-2/3 w-3 h-3 bg-primary-400/15 rounded-full animate-float-delayed-3"></div>
|
||||
|
||||
<!-- Water-inspired Waves -->
|
||||
<svg class="absolute bottom-0 left-0 w-full h-[250px] opacity-20" viewBox="0 0 1440 250" preserveAspectRatio="none">
|
||||
<path d="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z" fill="none" stroke="url(#water-gradient-hero)" stroke-width="2">
|
||||
<animate attributeName="d" dur="10s" repeatCount="indefinite" values="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z;M0,180 Q360,80 720,180 T1440,180 L1440,250 L0,250 Z;M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z"/>
|
||||
</path>
|
||||
<defs>
|
||||
<linearGradient id="water-gradient-hero" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#40916c"/>
|
||||
<stop offset="50%" stop-color="#74c69d"/>
|
||||
<stop offset="100%" stop-color="#40916c"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<!-- Second Wave Layer -->
|
||||
<svg class="absolute bottom-0 left-0 w-full h-[200px] opacity-10" viewBox="0 0 1440 200" preserveAspectRatio="none">
|
||||
<path d="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1">
|
||||
<animate attributeName="d" dur="15s" repeatCount="indefinite" values="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z;M0,120 Q240,20 480,120 T960,120 T1440,120 L1440,200 L0,200 Z;M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z"/>
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-4 cursor-pointer bg-neutral-50 hover:bg-neutral-100 transition-colors">
|
||||
<span class="font-medium text-neutral-900">ระยะห่างของเสาควรเท่าไหร่?</span>
|
||||
@@ -484,6 +548,38 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
</div>
|
||||
|
||||
<div class="border border-neutral-200 rounded-xl overflow-hidden">
|
||||
<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>
|
||||
|
||||
<!-- Floating Particles -->
|
||||
<div class="absolute top-1/4 left-1/4 w-2 h-2 bg-white/30 rounded-full animate-float"></div>
|
||||
<div class="absolute top-1/3 right-1/4 w-3 h-3 bg-primary-300/20 rounded-full animate-float-delayed-1"></div>
|
||||
<div class="absolute top-2/3 left-1/3 w-2 h-2 bg-primary-200/20 rounded-full animate-float-delayed-2"></div>
|
||||
<div class="absolute top-1/2 right-1/3 w-4 h-4 bg-white/15 rounded-full animate-float"></div>
|
||||
<div class="absolute bottom-1/4 left-2/3 w-3 h-3 bg-primary-400/15 rounded-full animate-float-delayed-3"></div>
|
||||
|
||||
<!-- Water-inspired Waves -->
|
||||
<svg class="absolute bottom-0 left-0 w-full h-[250px] opacity-20" viewBox="0 0 1440 250" preserveAspectRatio="none">
|
||||
<path d="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z" fill="none" stroke="url(#water-gradient-hero)" stroke-width="2">
|
||||
<animate attributeName="d" dur="10s" repeatCount="indefinite" values="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z;M0,180 Q360,80 720,180 T1440,180 L1440,250 L0,250 Z;M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z"/>
|
||||
</path>
|
||||
<defs>
|
||||
<linearGradient id="water-gradient-hero" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#40916c"/>
|
||||
<stop offset="50%" stop-color="#74c69d"/>
|
||||
<stop offset="100%" stop-color="#40916c"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<!-- Second Wave Layer -->
|
||||
<svg class="absolute bottom-0 left-0 w-full h-[200px] opacity-10" viewBox="0 0 1440 200" preserveAspectRatio="none">
|
||||
<path d="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1">
|
||||
<animate attributeName="d" dur="15s" repeatCount="indefinite" values="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z;M0,120 Q240,20 480,120 T960,120 T1440,120 L1440,200 L0,200 Z;M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z"/>
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-4 cursor-pointer bg-neutral-50 hover:bg-neutral-100 transition-colors">
|
||||
<span class="font-medium text-neutral-900">ติดตั้งระบบรั้วไวน์แมนยากหรือไม่?</span>
|
||||
@@ -498,6 +594,38 @@ import StickyBottomCTA from '@/components/common/StickyBottomCTA.astro';
|
||||
</div>
|
||||
|
||||
<div class="border border-neutral-200 rounded-xl overflow-hidden">
|
||||
<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>
|
||||
|
||||
<!-- Floating Particles -->
|
||||
<div class="absolute top-1/4 left-1/4 w-2 h-2 bg-white/30 rounded-full animate-float"></div>
|
||||
<div class="absolute top-1/3 right-1/4 w-3 h-3 bg-primary-300/20 rounded-full animate-float-delayed-1"></div>
|
||||
<div class="absolute top-2/3 left-1/3 w-2 h-2 bg-primary-200/20 rounded-full animate-float-delayed-2"></div>
|
||||
<div class="absolute top-1/2 right-1/3 w-4 h-4 bg-white/15 rounded-full animate-float"></div>
|
||||
<div class="absolute bottom-1/4 left-2/3 w-3 h-3 bg-primary-400/15 rounded-full animate-float-delayed-3"></div>
|
||||
|
||||
<!-- Water-inspired Waves -->
|
||||
<svg class="absolute bottom-0 left-0 w-full h-[250px] opacity-20" viewBox="0 0 1440 250" preserveAspectRatio="none">
|
||||
<path d="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z" fill="none" stroke="url(#water-gradient-hero)" stroke-width="2">
|
||||
<animate attributeName="d" dur="10s" repeatCount="indefinite" values="M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z;M0,180 Q360,80 720,180 T1440,180 L1440,250 L0,250 Z;M0,150 Q360,50 720,150 T1440,150 L1440,250 L0,250 Z"/>
|
||||
</path>
|
||||
<defs>
|
||||
<linearGradient id="water-gradient-hero" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#40916c"/>
|
||||
<stop offset="50%" stop-color="#74c69d"/>
|
||||
<stop offset="100%" stop-color="#40916c"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<!-- Second Wave Layer -->
|
||||
<svg class="absolute bottom-0 left-0 w-full h-[200px] opacity-10" viewBox="0 0 1440 200" preserveAspectRatio="none">
|
||||
<path d="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1">
|
||||
<animate attributeName="d" dur="15s" repeatCount="indefinite" values="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z;M0,120 Q240,20 480,120 T960,120 T1440,120 L1440,200 L0,200 Z;M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,200 L0,200 Z"/>
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<details class="group">
|
||||
<summary class="flex items-center justify-between p-4 cursor-pointer bg-neutral-50 hover:bg-neutral-100 transition-colors">
|
||||
<span class="font-medium text-neutral-900">ควรเลือกตาข่ายถักปมหรือตาข่ายฟิคซ์ล็อค?</span>
|
||||
|
||||
Reference in New Issue
Block a user