fe442790ab
## homepage (index.astro) - Drop '500+ รายการสินค้า' from stat badges and rebuild the trust-badges section to show only 15+ ปีประสบการณ์, 400+ ลูกค้าทั่วประเทศ, 98% ลูกค้าพึงพอใจ — bigger numbers (text-5xl/6xl), no icons, counter animation - Add 'ทำไมเลือกเรา' section (4 cards: ส่งฟรี กทม./ปริมณฑล, Lead time 1-3 วัน, ราคาโรงงาน, ทีมช่างแนะนำ) — no icons, primary/accent border hover - Add 'หมวดสินค้า' section (8 tiles: 7 categories + 'สินค้าทั้งหมด') placed after 'สินค้าแนะนำ' — each tile is a real product photo with dark gradient overlay and a CTA link to /all-products?filter=<id> - Reorder: Hero → ทำไมเลือกเรา → สินค้าแนะนำ → หมวดสินค้า → Stats → บทความล่าสุด → CTA ## all-products (filter from URL) - Script now reads ?filter=<id> on load and applies it without rewriting the URL, then on click updates both the filter and the URL via history.replaceState so the back/forward buttons work ## footer (BaseLayout.astro) - Replace productLinks with the curated 6 popular products: ไทยพีพีอาร์, เทอร์โมเบรค, กริลแอร์, หัวจ่ายแอร์ Ball Jet, ท่อ HDPE, ท่อ Syler ## about-us - Stats: 10+/1000+/500+ replaced with 15+ / 400+ + counter animation, bigger numbers, rounded-3xl + shadow (matches home) - Why Choose Us: rebuilt with the same 4 cards + same style as home's 'ทำไมเลือกเรา' (no icons, pill header, larger h2 + subtitle)
563 lines
43 KiB
Plaintext
563 lines
43 KiB
Plaintext
---
|
||
import BaseLayout from '@/layouts/BaseLayout.astro';
|
||
import { getCollection } from 'astro:content';
|
||
|
||
const articles = (await getCollection('blog')).sort(
|
||
(a, b) => b.data.published_at.getTime() - a.data.published_at.getTime()
|
||
).slice(0, 3);
|
||
---
|
||
|
||
<BaseLayout title="ดีล พลัส เทค - ระบบน้ำคุณภาพสูง ราคาโรงงาน" description="ดีล พลัส เทค จำกัด ผู้นำด้านระบบน้ำคุณภาพสูง ราคาโรงงาน ท่อ PPR ท่อ HDPE อุปกรณ์วาล์ว ปั๊มน้ำ เครื่องเชื่อมท่อ และอุปกรณ์โรงงานคุณภาพ">
|
||
|
||
<!-- Hero Section with Modern Animations -->
|
||
<section class="relative min-h-[70vh] flex items-center overflow-hidden bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white">
|
||
<!-- Advanced Animated Background -->
|
||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||
<!-- Animated Gradient Orbs -->
|
||
<div class="absolute -top-1/4 -right-1/4 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/40 via-primary-500/20 to-transparent rounded-full blur-[120px] animate-mesh-1"></div>
|
||
<div class="absolute -bottom-1/4 -left-1/4 w-[700px] h-[700px] bg-gradient-to-tr from-primary-300/30 via-primary-400/10 to-transparent rounded-full blur-[100px] animate-mesh-2"></div>
|
||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[1200px] h-[1200px] bg-gradient-to-r from-primary-500/10 via-primary-400/5 to-primary-600/10 rounded-full blur-[150px] animate-mesh-3"></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-[300px] opacity-20" viewBox="0 0 1440 300" preserveAspectRatio="none">
|
||
<path d="M0,150 Q360,50 720,150 T1440,150 L1440,300 L0,300 Z" fill="none" stroke="url(#water-gradient)" stroke-width="2">
|
||
<animate attributeName="d" dur="10s" repeatCount="indefinite" values="M0,150 Q360,50 720,150 T1440,150 L1440,300 L0,300 Z;M0,180 Q360,80 720,180 T1440,180 L1440,300 L0,300 Z;M0,150 Q360,50 720,150 T1440,150 L1440,300 L0,300 Z"/>
|
||
</path>
|
||
<defs>
|
||
<linearGradient id="water-gradient" 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-[250px] opacity-10" viewBox="0 0 1440 250" preserveAspectRatio="none">
|
||
<path d="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,250 L0,250 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,250 L0,250 Z;M0,120 Q240,20 480,120 T960,120 T1440,120 L1440,250 L0,250 Z;M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,250 L0,250 Z"/>
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24 relative z-10">
|
||
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
||
<!-- Text Content -->
|
||
<div class="space-y-8">
|
||
<!-- Badge -->
|
||
<div data-animate="fade-up" class="inline-flex items-center gap-2 px-5 py-2 bg-white/10 backdrop-blur-sm rounded-full border border-white/20">
|
||
<span class="w-2 h-2 bg-primary-400 rounded-full animate-pulse"></span>
|
||
<span class="text-sm font-medium">ระบบน้ำคุณภาพสูง ราคาโรงงาน</span>
|
||
</div>
|
||
|
||
<!-- Main Heading with Text Reveal -->
|
||
<h1 class="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold leading-[1.1] tracking-tight">
|
||
<span data-animate="fade-up" data-animate-delay="100" class="block">ระบบน้ำ</span>
|
||
<span data-animate="fade-up" data-animate-delay="200" class="block text-transparent bg-clip-text bg-gradient-to-r from-white to-primary-200">คุณภาพสูง</span>
|
||
<span data-animate="fade-up" data-animate-delay="300" class="block mt-2">
|
||
<span class="text-primary-300">ราคาโรงงาน</span>
|
||
</span>
|
||
</h1>
|
||
|
||
<!-- Description -->
|
||
<p data-animate="fade-up" data-animate-delay="400" class="text-lg lg:text-xl text-primary-100 max-w-xl leading-relaxed">
|
||
ดีล พลัส เทค จำกัด ผู้นำด้านระบบน้ำและสุขภัณฑ์คุณภาพสูง ท่อ PPR ท่อ HDPE อุปกรณ์วาล์ว ปั๊มน้ำ เครื่องเชื่อมท่อ อุปกรณ์ปรับอากาศ และฉนวนหุ้มท่อสำหรับโรงงานและบ้านเรือน
|
||
</p>
|
||
|
||
<!-- CTA Buttons -->
|
||
<div data-animate="fade-up" data-animate-delay="500" class="flex flex-wrap gap-4">
|
||
<a
|
||
href="/all-products"
|
||
class="group relative inline-flex items-center justify-center gap-3 bg-accent-500 hover:bg-accent-600 text-white py-4 px-8 rounded-xl font-semibold text-lg transition-all duration-300 hover:shadow-2xl hover:shadow-accent-500/30 hover:-translate-y-1 magnetic-btn btn-shimmer overflow-hidden"
|
||
>
|
||
<span class="relative z-10 flex items-center gap-2">
|
||
ดูสินค้าทั้งหมด
|
||
<svg class="w-5 h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||
</svg>
|
||
</span>
|
||
</a>
|
||
<a
|
||
href="/contact-us"
|
||
class="group inline-flex items-center justify-center gap-2 bg-white/10 hover:bg-white/20 text-white py-4 px-8 rounded-xl font-semibold text-lg border border-white/30 transition-all duration-300 hover:-translate-y-1 magnetic-btn"
|
||
>
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||
</svg>
|
||
ติดต่อเรา
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Floating Product Cards -->
|
||
<div class="relative h-[300px] lg:h-[400px] perspective-1000">
|
||
<!-- Card 1 - Small, back left -->
|
||
<div class="absolute top-0 left-0 w-32 lg:w-44 rounded-2xl shadow-2xl overflow-hidden animate-float glass-strong tilt-card">
|
||
<img src="/images/products-cropped/ppr-pipe_000C.jpg" alt="ท่อ PPR" class="w-full h-full object-cover" loading="lazy" />
|
||
</div>
|
||
|
||
<!-- Card 2 - Medium, back right -->
|
||
<div class="absolute top-16 right-4 lg:right-12 w-40 lg:w-52 rounded-2xl shadow-2xl overflow-hidden animate-float-delayed-1 glass-strong tilt-card">
|
||
<img src="/images/thermobreak/thermobreak-solarblock.png" alt="เทอร์โมเบรค" class="w-full h-full object-cover" loading="lazy" />
|
||
</div>
|
||
|
||
<!-- Card 3 - Large, center front -->
|
||
<div class="absolute top-32 left-1/2 -translate-x-1/2 w-52 lg:w-72 rounded-2xl shadow-2xl overflow-hidden animate-float-delayed-2 glass-strong tilt-card z-10">
|
||
<img src="/images/products-cropped/grilles_000C.jpg" alt="กริลแอร์" class="w-full h-full object-cover" loading="lazy" />
|
||
</div>
|
||
|
||
<!-- Decorative Elements -->
|
||
<div class="absolute bottom-8 left-4 lg:left-8 w-20 h-20 rounded-full bg-primary-400/20 blur-xl animate-pulse-glow"></div>
|
||
<div class="absolute top-8 right-8 w-16 h-16 rounded-full bg-primary-300/20 blur-xl animate-pulse-glow" style="animation-delay: 1s;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scroll Indicator -->
|
||
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-primary-200">
|
||
<span class="text-sm font-medium">เลื่อนลง</span>
|
||
<div class="w-6 h-10 rounded-full border-2 border-primary-200/50 flex justify-center pt-2">
|
||
<div class="w-1.5 h-3 bg-primary-200 rounded-full scroll-indicator"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ทำไมเลือกเรา -->
|
||
<section class="py-16 lg:py-24 bg-gradient-to-br from-neutral-50 to-white">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<!-- Section Header -->
|
||
<div class="text-center mb-12 lg:mb-16" data-animate="fade-up">
|
||
<span class="inline-block px-4 py-1 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-4">จุดเด่นของเรา</span>
|
||
<h2 class="text-3xl lg:text-4xl xl:text-5xl font-bold text-neutral-900 mb-4">ทำไมช่าง/ผู้รับเหมาเลือกเรา</h2>
|
||
<p class="text-neutral-600 max-w-2xl mx-auto text-lg">ครบทั้งสินค้า บริการ และความเร็ว — เพื่อให้งานของคุณเดินหน้าไม่สะดุด</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8" data-animate-stagger>
|
||
<!-- Why 1: ส่งฟรี -->
|
||
<div class="group bg-white rounded-3xl p-8 border border-neutral-200 hover:border-primary-300 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
|
||
<div class="inline-flex items-center justify-center w-14 h-14 bg-primary-100 rounded-2xl mb-5 group-hover:bg-primary-600 group-hover:text-white transition-colors">
|
||
<svg class="w-7 h-7 text-primary-600 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0" />
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-neutral-900 mb-2">ส่งฟรี กทม./ปริมณฑล</h3>
|
||
<p class="text-neutral-600 text-sm leading-relaxed">ส่งถึงไซต์งานฟรี ไม่ต้องวิ่งรับเอง ลดเวลา ลดต้นทุนขนส่ง</p>
|
||
</div>
|
||
|
||
<!-- Why 2: Lead time -->
|
||
<div class="group bg-white rounded-3xl p-8 border border-neutral-200 hover:border-primary-300 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
|
||
<div class="inline-flex items-center justify-center w-14 h-14 bg-accent-100 rounded-2xl mb-5 group-hover:bg-accent-500 group-hover:text-white transition-colors">
|
||
<svg class="w-7 h-7 text-accent-500 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-neutral-900 mb-2">Lead time 1–3 วัน</h3>
|
||
<p class="text-neutral-600 text-sm leading-relaxed">สั่งวันนี้ ได้ของไว — ไม่ต้องรอ 1-2 สัปดาห์เหมือนเจ้าอื่น</p>
|
||
</div>
|
||
|
||
<!-- Why 3: ราคาโรงงาน -->
|
||
<div class="group bg-white rounded-3xl p-8 border border-neutral-200 hover:border-primary-300 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
|
||
<div class="inline-flex items-center justify-center w-14 h-14 bg-primary-100 rounded-2xl mb-5 group-hover:bg-primary-600 group-hover:text-white transition-colors">
|
||
<svg class="w-7 h-7 text-primary-600 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-neutral-900 mb-2">ราคาโรงงาน</h3>
|
||
<p class="text-neutral-600 text-sm leading-relaxed">ตรงจากผู้ผลิต ไม่ผ่านตัวกลาง คุณภาพเดียวกันในราคาที่ต่ำกว่า</p>
|
||
</div>
|
||
|
||
<!-- Why 4: ทีมช่างแนะนำ -->
|
||
<div class="group bg-white rounded-3xl p-8 border border-neutral-200 hover:border-primary-300 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
|
||
<div class="inline-flex items-center justify-center w-14 h-14 bg-accent-100 rounded-2xl mb-5 group-hover:bg-accent-500 group-hover:text-white transition-colors">
|
||
<svg class="w-7 h-7 text-accent-500 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||
</svg>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-neutral-900 mb-2">ทีมช่างแนะนำ</h3>
|
||
<p class="text-neutral-600 text-sm leading-relaxed">ส่งสเปกมา ช่วยเทียบยี่ห้อ ขนาด PN ฟรี — ไม่ต้องเดาว่าท่อตัวไหนใช่</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Featured Products Section -->
|
||
<section class="py-16 lg:py-24 bg-white">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<!-- Section Header -->
|
||
<div class="text-center mb-12 lg:mb-16" data-animate="fade-up">
|
||
<span class="inline-block px-4 py-1 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-4">สินค้าของเรา</span>
|
||
<h2 class="text-3xl lg:text-4xl xl:text-5xl font-bold text-neutral-900 mb-4">สินค้าแนะนำ</h2>
|
||
<p class="text-neutral-600 max-w-2xl mx-auto text-lg">สินค้าคุณภาพสูงจากแบรนด์ชั้นนำ ที่ได้รับความไว้วางใจจากลูกค้าทั่วประเทศ</p>
|
||
</div>
|
||
|
||
<!-- Product Grid -->
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8" data-animate-stagger>
|
||
<!-- Product Card 1 -->
|
||
<a href="/ท่อ-ppr-thai-ppr" class="group bg-neutral-50 rounded-3xl overflow-hidden border border-neutral-200 hover:border-primary-300 transition-all duration-500 hover:shadow-2xl hover:shadow-primary-600/10 hover:-translate-y-2">
|
||
<div class="aspect-square img-hover relative overflow-hidden">
|
||
<img
|
||
src="/images/products-cropped/ppr-pipe_000C.jpg"
|
||
alt="ท่อ PPR ไทยพีพีอาร์"
|
||
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
||
loading="lazy"
|
||
/>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-primary-900/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||
<div class="absolute bottom-4 left-4 right-4 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
|
||
<span class="inline-flex items-center gap-2 text-white text-sm font-medium bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full">
|
||
ดูรายละเอียด
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||
</svg>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h3 class="text-xl font-bold text-primary-700 group-hover:text-primary-600 transition-colors">ท่อ PPR ไทยพีพีอาร์</h3>
|
||
<svg class="w-5 h-5 text-neutral-400 group-hover:text-primary-500 group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||
</svg>
|
||
</div>
|
||
<p class="text-neutral-500">ท่อน้ำดื่มคุณภาพสูง ทนความร้อน ทนแรงดัน มาตรฐาน ม.อ.ก.</p>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Product Card 2 -->
|
||
<a href="/grilles" class="group bg-neutral-50 rounded-3xl overflow-hidden border border-neutral-200 hover:border-primary-300 transition-all duration-500 hover:shadow-2xl hover:shadow-primary-600/10 hover:-translate-y-2">
|
||
<div class="aspect-square img-hover relative overflow-hidden">
|
||
<img
|
||
src="/images/products-cropped/grilles_000C.jpg"
|
||
alt="กริลแอร์"
|
||
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
||
loading="lazy"
|
||
/>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-primary-900/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||
<div class="absolute bottom-4 left-4 right-4 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
|
||
<span class="inline-flex items-center gap-2 text-white text-sm font-medium bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full">
|
||
ดูรายละเอียด
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||
</svg>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h3 class="text-xl font-bold text-primary-700 group-hover:text-primary-600 transition-colors">กริลแอร์</h3>
|
||
<svg class="w-5 h-5 text-neutral-400 group-hover:text-primary-500 group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||
</svg>
|
||
</div>
|
||
<p class="text-neutral-500">อุปกรณ์ปรับอากาศ ระบายอากาศคุณภาพสูง หลากหลายรูปแบบ</p>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Product Card 3 -->
|
||
<a href="/เทอร์โมเบรค-thermobreak" class="group bg-neutral-50 rounded-3xl overflow-hidden border border-neutral-200 hover:border-primary-300 transition-all duration-500 hover:shadow-2xl hover:shadow-primary-600/10 hover:-translate-y-2">
|
||
<div class="aspect-square img-hover relative overflow-hidden">
|
||
<img
|
||
src="/images/thermobreak/thermobreak-solarblock.png"
|
||
alt="เทอร์โมเบรค ฉนวนหุ้มท่อ"
|
||
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
||
loading="lazy"
|
||
/>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-primary-900/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||
<div class="absolute bottom-4 left-4 right-4 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
|
||
<span class="inline-flex items-center gap-2 text-white text-sm font-medium bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full">
|
||
ดูรายละเอียด
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||
</svg>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h3 class="text-xl font-bold text-primary-700 group-hover:text-primary-600 transition-colors">เทอร์โมเบรค</h3>
|
||
<svg class="w-5 h-5 text-neutral-400 group-hover:text-primary-500 group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||
</svg>
|
||
</div>
|
||
<p class="text-neutral-500">ฉนวนกันความร้อน ประหยัดพลังงาน ทนทาน คุณภาพสูง</p>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- View All Button -->
|
||
<div class="text-center mt-12" data-animate="fade-up">
|
||
<a
|
||
href="/all-products"
|
||
class="inline-flex items-center gap-2 bg-primary-600 hover:bg-primary-700 text-white py-4 px-8 rounded-xl font-semibold text-lg transition-all hover:shadow-lg hover:shadow-primary-600/25 hover:-translate-y-0.5 magnetic-btn btn-shimmer"
|
||
>
|
||
ดูสินค้าทั้งหมด
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- หมวดสินค้า -->
|
||
<section class="py-16 lg:py-24 bg-white">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<!-- Section Header -->
|
||
<div class="text-center mb-12 lg:mb-16" data-animate="fade-up">
|
||
<span class="inline-block px-4 py-1 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-4">เลือกตามงาน</span>
|
||
<h2 class="text-3xl lg:text-4xl xl:text-5xl font-bold text-neutral-900 mb-4">หมวดสินค้าของเรา</h2>
|
||
<p class="text-neutral-600 max-w-2xl mx-auto text-lg">ทุกหมวดเน้นงานอาคาร/โรงงาน/โรงแรม — คลิกเพื่อดูสินค้าเฉพาะหมวด</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 lg:gap-6" data-animate-stagger>
|
||
<!-- Category 1: ท่อพีพีอาร์ (ไทย PPR) -->
|
||
<a href="/all-products?filter=ppr" class="group relative h-64 rounded-3xl overflow-hidden border border-neutral-200 hover:shadow-2xl transition-all duration-500 hover:-translate-y-1">
|
||
<img src="/images/products-cropped/ppr-pipe_000C.jpg" alt="ท่อพีพีอาร์" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" loading="lazy" />
|
||
<div class="absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/40 to-transparent"></div>
|
||
<div class="relative h-full flex flex-col justify-end p-6 text-white">
|
||
<h3 class="text-xl font-bold mb-1">ท่อพีพีอาร์</h3>
|
||
<p class="text-sm text-white/80 mb-2">6 รายการ</p>
|
||
<span class="inline-flex items-center gap-1 text-sm font-medium group-hover:gap-2 transition-all">
|
||
ดูสินค้า
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
|
||
</span>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Category 2: เครื่องเชื่อมท่อ -->
|
||
<a href="/all-products?filter=welding" class="group relative h-64 rounded-3xl overflow-hidden border border-neutral-200 hover:shadow-2xl transition-all duration-500 hover:-translate-y-1">
|
||
<img src="/images/products-misc/ppr-welding-machine-main.jpg" alt="เครื่องเชื่อมท่อ" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" loading="lazy" />
|
||
<div class="absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/40 to-transparent"></div>
|
||
<div class="relative h-full flex flex-col justify-end p-6 text-white">
|
||
<h3 class="text-xl font-bold mb-1">เครื่องเชื่อมท่อ</h3>
|
||
<p class="text-sm text-white/80 mb-2">4 รายการ</p>
|
||
<span class="inline-flex items-center gap-1 text-sm font-medium group-hover:gap-2 transition-all">
|
||
ดูสินค้า
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
|
||
</span>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Category 3: ระบบน้ำ -->
|
||
<a href="/all-products?filter=water" class="group relative h-64 rounded-3xl overflow-hidden border border-neutral-200 hover:shadow-2xl transition-all duration-500 hover:-translate-y-1">
|
||
<img src="/images/products-cropped/water-pump_000C.jpg" alt="ระบบน้ำ" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" loading="lazy" />
|
||
<div class="absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/40 to-transparent"></div>
|
||
<div class="relative h-full flex flex-col justify-end p-6 text-white">
|
||
<h3 class="text-xl font-bold mb-1">ระบบน้ำ</h3>
|
||
<p class="text-sm text-white/80 mb-2">3 รายการ</p>
|
||
<span class="inline-flex items-center gap-1 text-sm font-medium group-hover:gap-2 transition-all">
|
||
ดูสินค้า
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
|
||
</span>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Category 4: อุปกรณ์ปรับอากาศ (กริล) -->
|
||
<a href="/all-products?filter=ac" class="group relative h-64 rounded-3xl overflow-hidden border border-neutral-200 hover:shadow-2xl transition-all duration-500 hover:-translate-y-1">
|
||
<img src="/images/products-cropped/grilles_000C.jpg" alt="อุปกรณ์ปรับอากาศ" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" loading="lazy" />
|
||
<div class="absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/40 to-transparent"></div>
|
||
<div class="relative h-full flex flex-col justify-end p-6 text-white">
|
||
<h3 class="text-xl font-bold mb-1">อุปกรณ์ปรับอากาศ</h3>
|
||
<p class="text-sm text-white/80 mb-2">3 รายการ</p>
|
||
<span class="inline-flex items-center gap-1 text-sm font-medium group-hover:gap-2 transition-all">
|
||
ดูสินค้า
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
|
||
</span>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Category 5: อุปกรณ์ดับเพลิง -->
|
||
<a href="/all-products?filter=fire" class="group relative h-64 rounded-3xl overflow-hidden border border-neutral-200 hover:shadow-2xl transition-all duration-500 hover:-translate-y-1">
|
||
<img src="/images/products-cropped/extinguishers_000C.jpg" alt="อุปกรณ์ดับเพลิง" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" loading="lazy" />
|
||
<div class="absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/40 to-transparent"></div>
|
||
<div class="relative h-full flex flex-col justify-end p-6 text-white">
|
||
<h3 class="text-xl font-bold mb-1">อุปกรณ์ดับเพลิง</h3>
|
||
<p class="text-sm text-white/80 mb-2">2 รายการ</p>
|
||
<span class="inline-flex items-center gap-1 text-sm font-medium group-hover:gap-2 transition-all">
|
||
ดูสินค้า
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
|
||
</span>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Category 6: ฉนวนหุ้มท่อ (Thermobreak) -->
|
||
<a href="/all-products?filter=insulation" class="group relative h-64 rounded-3xl overflow-hidden border border-neutral-200 hover:shadow-2xl transition-all duration-500 hover:-translate-y-1">
|
||
<img src="/images/thermobreak/thermobreak-solarblock.png" alt="ฉนวนหุ้มท่อ" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" loading="lazy" />
|
||
<div class="absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/40 to-transparent"></div>
|
||
<div class="relative h-full flex flex-col justify-end p-6 text-white">
|
||
<h3 class="text-xl font-bold mb-1">ฉนวนหุ้มท่อ</h3>
|
||
<p class="text-sm text-white/80 mb-2">4 รายการ</p>
|
||
<span class="inline-flex items-center gap-1 text-sm font-medium group-hover:gap-2 transition-all">
|
||
ดูสินค้า
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
|
||
</span>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Category 7: ระบบรั้ว -->
|
||
<a href="/all-products?filter=fence" class="group relative h-64 rounded-3xl overflow-hidden border border-neutral-200 hover:shadow-2xl transition-all duration-500 hover:-translate-y-1">
|
||
<img src="/images/products-raw/vineman/ระบบรั้วไวน์แมน-Vineman-e1613286324569-1024x880.jpg" alt="ระบบรั้ว" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" loading="lazy" />
|
||
<div class="absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/40 to-transparent"></div>
|
||
<div class="relative h-full flex flex-col justify-end p-6 text-white">
|
||
<h3 class="text-xl font-bold mb-1">ระบบรั้ว</h3>
|
||
<p class="text-sm text-white/80 mb-2">2 รายการ</p>
|
||
<span class="inline-flex items-center gap-1 text-sm font-medium group-hover:gap-2 transition-all">
|
||
ดูสินค้า
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
|
||
</span>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- All products tile (no image, just text CTA) -->
|
||
<a href="/all-products" class="group relative h-64 rounded-3xl overflow-hidden bg-gradient-to-br from-neutral-900 to-neutral-700 border border-neutral-700 hover:border-neutral-500 hover:shadow-2xl transition-all duration-500 hover:-translate-y-1 text-white flex flex-col justify-end p-6">
|
||
<h3 class="text-xl font-bold mb-1 group-hover:text-primary-300 transition-colors">สินค้าทั้งหมด</h3>
|
||
<p class="text-sm text-white/70 mb-2">ดูทุกหมวดพร้อมกัน</p>
|
||
<span class="inline-flex items-center gap-1 text-sm font-medium text-primary-300 group-hover:gap-2 transition-all">
|
||
เปิดหน้ารวม
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Trust Badges with Counter Animation -->
|
||
<section class="py-16 lg:py-20 bg-gradient-to-br from-neutral-50 to-primary-50">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8" data-animate-stagger>
|
||
<!-- Badge 1 -->
|
||
<div class="text-center p-6 bg-white rounded-3xl shadow-sm hover:shadow-lg transition-shadow duration-300">
|
||
<h3 class="text-5xl lg:text-6xl font-bold text-primary-700 mb-2">
|
||
<span data-counter="15">0</span>+
|
||
</h3>
|
||
<p class="text-neutral-600 font-medium">ปีประสบการณ์</p>
|
||
</div>
|
||
|
||
<!-- Badge 2 -->
|
||
<div class="text-center p-6 bg-white rounded-3xl shadow-sm hover:shadow-lg transition-shadow duration-300">
|
||
<h3 class="text-5xl lg:text-6xl font-bold text-primary-700 mb-2">
|
||
<span data-counter="400">0</span>+
|
||
</h3>
|
||
<p class="text-neutral-600 font-medium">ลูกค้าทั่วประเทศ</p>
|
||
</div>
|
||
|
||
<!-- Badge 3 -->
|
||
<div class="text-center p-6 bg-white rounded-3xl shadow-sm hover:shadow-lg transition-shadow duration-300">
|
||
<h3 class="text-5xl lg:text-6xl font-bold text-primary-700 mb-2">
|
||
<span data-counter="98">0</span>%
|
||
</h3>
|
||
<p class="text-neutral-600 font-medium">ลูกค้าพึงพอใจ</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- บทความ Section -->
|
||
<section class="py-16 lg:py-24 bg-white">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="flex items-end justify-between mb-12">
|
||
<div>
|
||
<span class="inline-block px-4 py-1.5 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-4">บทความ</span>
|
||
<h2 class="text-3xl lg:text-4xl font-bold text-slate-900">บทความล่าสุด</h2>
|
||
<p class="text-lg text-slate-600 mt-2">ความรู้และข้อมูลที่เป็นประโยชน์เกี่ยวกับระบบน้ำและอุปกรณ์</p>
|
||
</div>
|
||
<a href="/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1" class="hidden sm:inline-flex items-center gap-2 text-primary-600 hover:text-primary-700 font-semibold transition-colors">
|
||
ดูทั้งหมด
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
{articles.length > 0 && articles.map(article => (
|
||
<a href={`/${encodeURI('บทความ')}/${encodeURIComponent(article.id)}`} class="group block bg-white rounded-3xl overflow-hidden border border-slate-100 hover:border-primary-200 hover:shadow-xl transition-all duration-300">
|
||
<div class="aspect-[16/9] bg-slate-100 overflow-hidden">
|
||
{article.data.featured_image ? (
|
||
<img src={article.data.featured_image} alt={article.data.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" />
|
||
) : (
|
||
<div class="w-full h-full flex items-center justify-center text-slate-300">
|
||
<svg class="w-16 h-16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||
</svg>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="flex items-center gap-3 text-sm text-slate-500 mb-3">
|
||
{article.data.tags?.[0] && (
|
||
<span class="px-2.5 py-0.5 bg-primary-50 text-primary-600 rounded-full text-xs font-medium">{article.data.tags[0]}</span>
|
||
)}
|
||
</div>
|
||
<h3 class="text-lg font-bold text-slate-900 group-hover:text-primary-600 transition-colors mb-2 line-clamp-2">{article.data.title}</h3>
|
||
<p class="text-sm text-slate-600 line-clamp-2">{article.data.excerpt}</p>
|
||
</div>
|
||
</a>
|
||
))}
|
||
{articles.length === 0 && (
|
||
<div class="md:col-span-2 lg:col-span-3 text-center py-16">
|
||
<div class="text-slate-300 mb-4">
|
||
<svg class="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
|
||
</svg>
|
||
</div>
|
||
<p class="text-lg text-slate-400">ยังไม่มีบทความในขณะนี้</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div class="text-center mt-10 sm:hidden">
|
||
<a href="/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1" class="inline-flex items-center gap-2 text-primary-600 hover:text-primary-700 font-semibold transition-colors">
|
||
ดูบทความทั้งหมด
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA Section -->
|
||
<section class="py-16 lg:py-24 bg-gradient-to-br from-primary-700 via-primary-600 to-primary-800 text-white relative overflow-hidden">
|
||
<!-- Background Elements -->
|
||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||
<div class="absolute -top-20 -right-20 w-[400px] h-[400px] bg-primary-400/20 rounded-full blur-3xl animate-mesh-1"></div>
|
||
<div class="absolute -bottom-20 -left-20 w-[300px] h-[300px] bg-primary-300/20 rounded-full blur-3xl animate-mesh-2"></div>
|
||
</div>
|
||
|
||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
|
||
<h2 data-animate="fade-up" class="text-3xl lg:text-4xl xl:text-5xl font-bold mb-6">ต้องการสอบถามราคา?</h2>
|
||
<p data-animate="fade-up" data-animate-delay="100" class="text-lg lg:text-xl text-primary-100 mb-10 max-w-2xl mx-auto">
|
||
ติดต่อทีมงานของเราได้เลย พร้อมให้บริการให้คำปรึกษาฟรี ตอบทุกคำถามเรื่องระบบน้ำและอุปกรณ์ต่างๆ
|
||
</p>
|
||
<div data-animate="fade-up" data-animate-delay="200" class="flex flex-wrap justify-center gap-4">
|
||
<a
|
||
href="tel:090-555-1415"
|
||
class="group inline-flex items-center justify-center gap-3 bg-white text-primary-700 py-4 px-10 rounded-xl font-semibold text-lg hover:bg-primary-50 transition-all hover:shadow-2xl hover:shadow-white/25 hover:-translate-y-1 magnetic-btn btn-shimmer"
|
||
>
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||
</svg>
|
||
090-555-1415
|
||
</a>
|
||
<a
|
||
href="https://line.me/ti/p/~JPPSELECTION"
|
||
target="_blank"
|
||
rel="noopener"
|
||
class="group inline-flex items-center justify-center gap-3 bg-accent-500 hover:bg-accent-600 text-white py-4 px-10 rounded-xl font-semibold text-lg transition-all hover:shadow-2xl hover:shadow-accent-500/30 hover:-translate-y-1 magnetic-btn btn-shimmer"
|
||
>
|
||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
|
||
</svg>
|
||
แอดไลน์
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</BaseLayout>
|