feat(homepage): rework homepage + align about-us + footer popular products
## 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)
This commit is contained in:
hermes
@@ -122,20 +122,20 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
</section>
|
||||
|
||||
<!-- Stats -->
|
||||
<section class="py-16 bg-neutral-50">
|
||||
<section class="py-16 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 relative z-10">
|
||||
<div class="grid grid-cols-3 gap-6 lg:gap-8">
|
||||
<div class="text-center p-8 bg-white rounded-2xl border border-neutral-200">
|
||||
<div class="text-4xl lg:text-5xl font-bold text-primary-600 mb-2">10+</div>
|
||||
<div class="text-neutral-600">ปีประสบการณ์</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8" data-animate-stagger>
|
||||
<div class="text-center p-8 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>
|
||||
<div class="text-center p-8 bg-white rounded-2xl border border-neutral-200">
|
||||
<div class="text-4xl lg:text-5xl font-bold text-primary-600 mb-2">1000+</div>
|
||||
<div class="text-neutral-600">โปรเจคสำเร็จ</div>
|
||||
</div>
|
||||
<div class="text-center p-8 bg-white rounded-2xl border border-neutral-200">
|
||||
<div class="text-4xl lg:text-5xl font-bold text-primary-600 mb-2">500+</div>
|
||||
<div class="text-neutral-600">สินค้าในคลัง</div>
|
||||
<div class="text-center p-8 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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -145,44 +145,26 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
|
||||
<section class="py-16 lg:py-24 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl font-bold text-primary-700 mb-4">ทำไมต้องเลือกเรา</h2>
|
||||
<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">
|
||||
<div class="text-center p-6">
|
||||
<div class="w-16 h-16 mx-auto mb-4 bg-accent-100 rounded-2xl flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-accent-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-primary-700 mb-2">คุณภาพสูง</h3>
|
||||
<p class="text-sm text-neutral-600">สินค้าผ่านมาตรฐาน มอก. รับประกันคุณภาพ</p>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8" data-animate-stagger>
|
||||
<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">
|
||||
<h3 class="text-xl font-bold text-neutral-900 mb-2">ส่งฟรี กทม./ปริมณฑล</h3>
|
||||
<p class="text-neutral-600 text-sm leading-relaxed">ส่งถึงไซต์งานฟรี ไม่ต้องวิ่งรับเอง ลดเวลา ลดต้นทุนขนส่ง</p>
|
||||
</div>
|
||||
<div class="text-center p-6">
|
||||
<div class="w-16 h-16 mx-auto mb-4 bg-accent-100 rounded-2xl flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-accent-500" 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-lg font-semibold text-primary-700 mb-2">ราคาโรงงาน</h3>
|
||||
<p class="text-sm text-neutral-600">ราคาพิเศษ ราคาโรงงาน ไม่มีมาร์จิ้นกลาง</p>
|
||||
<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">
|
||||
<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>
|
||||
<div class="text-center p-6">
|
||||
<div class="w-16 h-16 mx-auto mb-4 bg-accent-100 rounded-2xl flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-accent-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-primary-700 mb-2">จัดส่งรวดเร็ว</h3>
|
||||
<p class="text-sm text-neutral-600">สินค้าพร้อมส่ง จัดส่งภายใน 1-3 วัน</p>
|
||||
<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">
|
||||
<h3 class="text-xl font-bold text-neutral-900 mb-2">ราคาโรงงาน</h3>
|
||||
<p class="text-neutral-600 text-sm leading-relaxed">ตรงจากผู้ผลิต ไม่ผ่านตัวกลาง คุณภาพเดียวกันในราคาที่ต่ำกว่า</p>
|
||||
</div>
|
||||
<div class="text-center p-6">
|
||||
<div class="w-16 h-16 mx-auto mb-4 bg-accent-100 rounded-2xl flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-accent-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-primary-700 mb-2">บริการดี</h3>
|
||||
<p class="text-sm text-neutral-600">ให้คำปรึกษาฟรี ตอบคำถามทุกคำถาม</p>
|
||||
<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">
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user