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

feat: Restore full product data from commit 668f69048f

Browse Source 
- Restored site-config.ts (2100 lines with all product tables)
- Restored proper product page template with table rendering
- Restored Header, Footer, FloatingContact components
- All 6 products now show detailed specification tables
- Preserved all PDPA compliance features
This commit is contained in:
Kunthawat
2026-03-12 14:58:57 +07:00
parent 7e8c7d1314
commit 2894e836a6
23 changed files with 3328 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/layouts/BaseLayout.astro
View File

@@ -1,6 +1,10 @@
---
import CookieConsentBanner from '../components/CookieConsentBanner.astro';
export interface Props { title: string; description?: string; image?: string; }
export interface Props {
title: string;
description?: string;
image?: string;
}
const { title, description, image } = Astro.props;
---
@@ -9,18 +13,35 @@ const { title, description, image } = Astro.props;
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content={description || 'บริษัท ดีล พลัส เทค จำกัด'} />
<meta name="generator" content={Astro.generator} />
<meta name="description" content={description || 'บริษัท ดีล พลัส เทค จำกัด - ผู้เชี่ยวชาญด้านระบบน้ำ ท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ HDPE'} />
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="alternate icon" href="/favicon.ico" sizes="any" />
<link rel="apple-touch-icon" href="/favicon.svg" />
<!-- Google Fonts: Kanit for Thai -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<!-- SEO -->
<meta property="og:title" content={title} />
<meta property="og:description" content={description || 'Deal Plus Tech'} />
<meta property="og:description" content={description || 'Deal Plus Tech - ผู้เชี่ยวชาญด้านระบบน้ำ'} />
<meta property="og:image" content={image || '/og-image.jpg'} />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<title>{title} | ดีล พลัส เทค</title>
</head>
<body class="flex flex-col min-h-screen">
<slot />
<CookieConsentBanner />
</body>
</html>
<style is:global>@import "../styles/globals.css";</style>
<style is:global>
html {
font-family: 'Kanit', system-ui, sans-serif;
}
</style>

51
src/pages/products/[slug].astro
View File

@@ -2,8 +2,6 @@
import { getCollection, render } from 'astro:content';
import type { CollectionEntry } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';
import { productCategories } from '../../data/site-config';
export async function getStaticPaths() {
@@ -14,7 +12,9 @@ export async function getStaticPaths() {
}));
}
interface Props { product: CollectionEntry<'products'>; }
interface Props {
product: CollectionEntry<'products'>;
}
const { product } = Astro.props;
const { Content } = await render(product);
@@ -24,29 +24,35 @@ const productData = productCategories.find(p => p.id === product.data.id);
const productTables = productData?.productTables || [];
---
<BaseLayout title={product.data.title} description={product.data.description || ''}>
<Header />
<main class="pt-20">
<article class="container mx-auto px-4 py-12">
<h1 class="text-4xl font-bold mb-6">{product.data.title}</h1>
<div class="prose max-w-none mb-12"><Content /></div>
<BaseLayout title={product.data.name} description={product.data.shortDescription || product.data.description}>
<main class="py-12">
<article class="container mx-auto px-4 max-w-7xl">
<header class="mb-12">
<h1 class="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold text-secondary-900 mb-6">{product.data.name}</h1>
<p class="text-lg md:text-xl lg:text-2xl xl:text-3xl text-secondary-600 max-w-4xl">{product.data.description}</p>
</header>
<div class="prose prose-lg md:prose-xl lg:prose-2xl max-w-none mb-12"><Content /></div>
{productTables.length > 0 && (
<div class="space-y-8">
{productTables.map((table: any) => (
<div>
<h3 class="text-2xl font-bold mb-4">{table.tableName}</h3>
<div class="overflow-x-auto">
<table class="w-full border-collapse border">
<section class="mb-12">
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-8">ข้อมูลจำเพาะ</h2>
{productTables.map((table: any, tableIndex: number) => (
<div class="bg-white rounded-2xl border-2 border-secondary-200 shadow-lg mb-8">
<h3 class="text-lg md:text-xl lg:text-2xl font-semibold text-secondary-800 p-4 md:p-6 bg-secondary-50 border-b-2 border-secondary-200">{table.tableName}</h3>
<div class="w-full overflow-x-auto">
<table class="w-full min-w-[600px] border-collapse text-sm md:text-base">
<thead>
<tr class="bg-secondary-100">
{table.headers?.map((h: string) => <th class="border p-3 text-left">{h}</th>)}
<tr class="bg-primary-100">
{table.headers.map((header: string, headerIndex: number) => (
<th class="px-3 py-2 md:px-4 md:py-3 text-left text-xs md:text-sm lg:text-base font-bold text-primary-800 border-b-2 border-primary-300 whitespace-nowrap">{header}</th>
))}
</tr>
</thead>
<tbody>
{table.rows?.map((row: string[]) => (
<tr>
{row.map((cell: string) => <td class="border p-3">{cell}</td>)}
{table.rows.map((row: string[], rowIndex: number) => (
<tr class={rowIndex % 2 === 0 ? 'bg-white' : 'bg-secondary-50'}>
{row.map((cell: string, cellIndex: number) => (
<td class="px-3 py-2 md:px-4 md:py-3 text-secondary-700 border-b border-secondary-200">{cell}</td>
))}
</tr>
))}
</tbody>
@@ -54,9 +60,8 @@ const productTables = productData?.productTables || [];
</div>
</div>
))}
</div>
</section>
)}
</article>
</main>
<Footer />
</BaseLayout>

36
src/styles/globals.css
View File

@@ -1,36 +0,0 @@
@import "tailwindcss";
@theme {
--color-primary-500: #22c55e;
--color-primary-600: #16a34a;
--color-primary-700: #15803d;
--color-secondary-50: #f8fafc;
--color-secondary-100: #f1f5f9;
--color-secondary-200: #e2e8f0;
--color-secondary-300: #cbd5e1;
--color-secondary-500: #64748b;
--color-secondary-600: #475569;
--color-secondary-700: #334155;
--color-secondary-800: #1e293b;
--color-secondary-900: #0f172a;
--color-accent-500: #eab308;
}
html { font-family: 'Kanit', system-ui, sans-serif; scroll-behavior: smooth; }
body { background-color: white; color: var(--color-secondary-900); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.025em; }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; background-color: var(--color-primary-600); color: white; font-weight: 600; border-radius: 0.5rem; transition: all 0.2s; }
.btn-primary:hover { background-color: var(--color-primary-700); }
.btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; background-color: var(--color-secondary-800); color: white; font-weight: 600; border-radius: 0.5rem; transition: all 0.2s; }
.btn-secondary:hover { background-color: var(--color-secondary-900); }
.btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; border: 2px solid var(--color-primary-600); color: var(--color-primary-600); font-weight: 600; border-radius: 0.5rem; background-color: transparent; transition: all 0.2s; }
.btn-outline:hover { background-color: var(--color-primary-600); color: white; }
.section-title { font-size: 1.875rem; font-weight: 700; text-align: center; margin-bottom: 1rem; }
@media (min-width: 768px) { .section-title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .section-title { font-size: 3rem; } }
.section-subtitle { font-size: 1.125rem; text-align: center; color: var(--color-secondary-600); }
.card { background-color: white; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); transition: all 0.3s; }
.card:hover { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); transform: translateY(-0.25rem); }