kunthawat/dealplustech-astro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

fix: Update all-products - add images to category products, remove top grid, keep description

Browse Source
This commit is contained in:
Kunthawat
2026-03-16 11:34:10 +07:00
parent 57a8a1eb88
commit b0fd8b3163
1 changed files with 15 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/pages/all-products/index.astro
View File

@@ -121,7 +121,7 @@ const productCategories = [
<BaseLayout title="สินค้าทั้งหมด | All Products" description="สินค้าทั้งหมด ของ บริษัท ดีล พลัส เทค จำกัด ผู้เชี่ยวชาญด้านระบบน้ำ"> <BaseLayout title="สินค้าทั้งหมด | All Products" description="สินค้าทั้งหมด ของ บริษัท ดีล พลัส เทค จำกัด ผู้เชี่ยวชาญด้านระบบน้ำ">
<Header slot="header" /> <Header slot="header" />
<main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen"> <main class="px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
<section id="all-products" class="section"> <section id="all-products" class="section">
<div class="container-custom"> <div class="container-custom">
@@ -132,41 +132,26 @@ const productCategories = [
</p> </p>
</div> </div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6"> <div class="space-y-8">
{productCategories.map(category => ( {productCategories.map(category => (
<a href={category.slug} class="product-card group"> <div class="border border-gray-200 rounded-2xl overflow-hidden">
<div class="product-card-image"> <div class="bg-green-600 px-6 py-4">
<img src={category.image} alt={category.name} onerror="this.src='/images/logo/dealplustech-logo.png'" /> <h3 class="text-xl font-bold text-white">{category.name}</h3>
</div> </div>
<div class="p-4"> <div class="p-6 bg-white">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-green-600 transition-colors text-center">{category.name}</h3> <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
{category.products.map(product => (
<a href={product.slug} class="block p-4 rounded-xl border border-gray-200 hover:border-green-500 hover:bg-green-50 transition-all text-center">
<img src={category.image} alt={product.name} class="w-full h-24 object-cover rounded-lg mb-3" onerror="this.src='/images/logo/dealplustech-logo.png'" />
<span class="text-sm sm:text-base text-secondary-700 font-medium">{product.name}</span>
</a>
))}
</div>
</div> </div>
</a> </div>
))} ))}
</div> </div>
<div class="mt-16">
<h2 class="text-xl sm:text-2xl font-bold text-secondary-900 mb-8 text-center">สินค้าทั้งหมดตามหมวดหมู่</h2>
<div class="space-y-8">
{productCategories.map(category => (
<div class="border border-gray-200 rounded-2xl overflow-hidden">
<div class="bg-green-600 px-6 py-4">
<h3 class="text-xl font-bold text-white">{category.name}</h3>
</div>
<div class="p-6 bg-white">
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
{category.products.map(product => (
<a href={product.slug} class="block p-4 rounded-xl border border-gray-200 hover:border-green-500 hover:bg-green-50 transition-all text-center">
<span class="text-sm sm:text-base text-secondary-700 font-medium">{product.name}</span>
</a>
))}
</div>
</div>
</div>
))}
</div>
</div>
<div class="mt-12 text-center"> <div class="mt-12 text-center">
<p class="text-lg text-secondary-600 mb-6">ติดต่อเราเพื่อรับคำแนะนำและราคาพิเศษ</p> <p class="text-lg text-secondary-600 mb-6">ติดต่อเราเพื่อรับคำแนะนำและราคาพิเศษ</p>
<div class="flex flex-wrap justify-center gap-4"> <div class="flex flex-wrap justify-center gap-4">