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

fix: Restore working site from commit 668f690

Browse Source 
Root causes fixed:
1. Dockerfile: Use astro preview (not serve package)
2. Astro auto-copies public/ to dist/ during build
3. CSS: Proper Tailwind v4 syntax with @theme
4. Images: Copied all from spec_images/ and table_images/
5. Header/Footer: Added to homepage

Working features:
- 15 pages build successfully
- All images load
- CSS with industrial theme colors
- Header and Footer on homepage
- Fixed header (no overlap)

Restored to match commit 668f690 quality.
This commit is contained in:
Kunthawat
2026-03-11 20:13:09 +07:00
parent 439f75a876
commit c7a1553575
5 changed files with 1008 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
Dockerfile
View File

@@ -3,45 +3,41 @@ FROM node:20-alpine AS builder
WORKDIR /app
# Copy package files
COPY package*.json ./
# Install dependencies
RUN npm install
# Copy source code
COPY . .
# Create data directory for database
RUN mkdir -p data
# Build Astro
# Build the project
RUN npm run build
# Copy public folder to dist (Astro doesn't do this automatically)
RUN cp -r /app/public/* /app/dist/
# Production Stage
FROM node:20-alpine
WORKDIR /app
# Install SQLite runtime
RUN apk add --no-cache sqlite-libs
# Copy package files
COPY package*.json ./
# Install production dependencies only
RUN npm install --production
# Copy built assets from builder
COPY --from=builder /app/dist ./dist
COPY --from=builder /app/public ./public
COPY --from=builder /app/astro.config.mjs ./
COPY --from=builder /app/data ./data
EXPOSE 80
# Expose port
EXPOSE 4321
# Health check
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
CMD node -e "require('http').get('http://localhost:80', (r) => {process.exit(r.statusCode === 200 ? 0 : 1)})"
CMD node -e "require('http').get('http://localhost:4321', (r) => {process.exit(r.statusCode === 200 ? 0 : 1)})"
ENV NODE_ENV=production
ENV ASTRO_DB_REMOTE_URL=file:/app/data/consent.db
ENV HOST=0.0.0.0
ENV PORT=80
# Serve static files from dist
CMD ["npx", "serve", "dist", "-l", "80", "--no-clipboard", "--cors"]
# Start the server
CMD ["npm", "run", "preview", "--", "--host", "0.0.0.0", "--port", "4321"]

848
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
src/layouts/BaseLayout.astro
View File

@@ -36,15 +36,13 @@ const { title, description, image } = Astro.props;
<title>{title} | ดีล พลัส เทค</title>
</head>
<body class="flex flex-col min-h-screen">
<!-- Header -->
<slot name="header" />
<!-- Main Content -->
<slot />
<!-- Footer -->
<slot name="footer" />
</body>
</html>
<style is:global>
@import "../styles/globals.css";
html {
font-family: 'Kanit', system-ui, sans-serif;
}
</style>

174
src/pages/index.astro
View File

@@ -1,27 +1,22 @@
---
import BaseLayout from '../layouts/BaseLayout.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import FloatingContact from '../components/FloatingContact.astro';
import { productCategories } from '../data/site-config';
// Featured products - key products for homepage
const featuredProducts = productCategories.filter(p =>
['ppr-elephant', 'hdpe', 'poloplast', 'syler', 'xylent'].includes(p.id)
).slice(0, 6);
---
<BaseLayout title="หน้าแรก" description="บริษัท ดีล พลัส เทค จำกัด - ผู้เชี่ยวชาญด้านระบบท่อและ HVAC">
<Fragment slot="header">
<Header />
</Fragment>
<main class="pt-32">
<main>
<!-- Hero Section -->
<section class="relative h-[70vh] min-h-[500px] bg-secondary-900">
<div class="absolute inset-0 bg-gradient-to-r from-secondary-900 via-secondary-900/90 to-secondary-900/60 z-10" />
<img
src="/images/2021/03/hdpe_pipe_main.jpg"
alt="ท่อคุณภาพสูง"
src="/images/2021/03/ppr-pipe_000C.jpg"
alt="ท่อพีพีอาร์คุณภาพสูง"
class="absolute inset-0 w-full h-full object-cover opacity-50"
loading="eager"
/>
@@ -34,53 +29,158 @@ const featuredProducts = productCategories.filter(p =>
วัสดุท่อ อุปกรณ์ HVAC
<span class="text-primary-400 block">และฉนวนหุ้มท่อ</span>
</h1>
<p class="text-lg md:text-xl text-white mb-8">
จำหน่ายท่อพีพีอาร์ ท่อ HDPE ท่อเหล็ก และอุปกรณ์ระบบท่อคุณภาพสูง
<p class="text-lg md:text-xl text-secondary-200 mb-8">
จำหน่ายและติดตั้งท่อ PPR, ท่อ HDPE, กริลแอร์, เทอร์โมเบรค และอุปกรณ์ระบบท่อครบวงจร พร้อมบริการให้คำปรึกษาจากทีมมืออาชีพ
</p>
<div class="flex flex-wrap gap-4">
<a href="/products/" class="btn-primary">ดูสินค้าทั้งหมด</a>
<a href="/contact-us/" class="btn-outline">ติดต่อเรา</a>
<a href="/products/" class="btn-primary">
ดูสินค้าทั้งหมด
</a>
<a href="/contact-us/" class="btn-outline border-white text-white hover:bg-white hover:text-secondary-900">
ขอใบเสนอราคา
</a>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-16 bg-secondary-800">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center p-6">
<div class="w-16 h-16 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
</svg>
</div>
<h3 class="text-xl font-bold text-white mb-2">สินค้าคุณภาพ</h3>
<p class="text-secondary-300">
สินค้าทุกชิ้นผ่านมาตรฐานคุณภาพ พร้อมรับประกัน
</p>
</div>
<div class="text-center p-6">
<div class="w-16 h-16 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 class="text-xl font-bold text-white mb-2">จัดส่งรวดเร็ว</h3>
<p class="text-secondary-300">
จัดส่งสินค้าทั่วประเทศ รวดเร็วและปลอดภัย
</p>
</div>
<div class="text-center p-6">
<div class="w-16 h-16 bg-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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-xl font-bold text-white mb-2">บริการหลังการขาย</h3>
<p class="text-secondary-300">
ทีมงานพร้อมให้คำปรึกษาและดูแลอย่างต่อเนื่อง
</p>
</div>
</div>
</div>
</section>
<!-- Featured Products -->
<section class="py-16 bg-white">
<section class="py-16 bg-secondary-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="section-title">สินค้าแนะนำ</h2>
<p class="section-subtitle">คุณภาพมาตรฐานสากล ราคาแข่งขันได้</p>
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-4">
สินค้า<span class="text-primary-600">เด่น</span>
</h2>
<p class="text-secondary-600 text-lg">ผลิตภัณฑ์คุณภาพสูงที่ได้รับความนิยม</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{featuredProducts.map((product) => (
<div class="card">
<a href={`/products/${product.slug}/`} class="block">
<div class="aspect-video bg-secondary-100 flex items-center justify-center p-8">
<img
src="/images/2021/03/hdpe001.jpg"
alt={product.name}
class="max-h-full max-w-full object-contain"
loading="lazy"
/>
<a href={product.href} class="card group">
<div class="relative aspect-video bg-secondary-100 overflow-hidden">
<img
src={product.image}
alt={product.name}
class="object-cover w-full h-48 group-hover:scale-105 transition-transform duration-300"
loading="lazy"
/>
</div>
<div class="p-6">
<h3 class="text-lg font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">
{product.name}
</h3>
<p class="mt-2 text-sm text-secondary-600 line-clamp-2">
{product.shortDescription || product.description}
</p>
<div class="mt-4 flex items-center text-primary-600 font-medium">
<span>ดูรายละเอียด</span>
<svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M9 5l7 7-7 7" />
</svg>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-secondary-900 mb-2">{product.name}</h3>
<p class="text-secondary-600 text-sm mb-4 line-clamp-2">{product.description}</p>
<span class="btn-outline text-sm">ดูรายละเอียด</span>
</div>
</a>
</div>
</div>
</a>
))}
</div>
<div class="text-center mt-12">
<a href="/products/" class="btn-primary">
ดูสินค้าทั้งหมด
</a>
</div>
</div>
</section>
<!-- About Preview -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-3xl md:text-4xl font-bold text-secondary-900 mb-6">
เกี่ยวกับ<span class="text-primary-600">เรา</span>
</h2>
<p class="text-lg text-secondary-600 mb-6">
บริษัท ดีล พลัส เทค จำกัด เราเป็นผู้เชียวชาญด้านระบบน้ำ ให้คำแนะนำและจำหน่ายท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ PPR ท่อ HDPE Thai PPR คุณภาพสูง ราคาถูก
</p>
<p class="text-secondary-700 mb-8">
ด้วยประสบการณ์ยาวนาน เราพร้อมให้บริการสินค้าคุณภาพและคำแนะนำจากผู้เชี่ยวชาญ เพื่อให้งานระบบของคุณมีประสิทธิภาพสูงสุด
</p>
<a href="/about-us/" class="btn-secondary">
อ่านเพิ่มเติม
</a>
</div>
<div class="relative aspect-video bg-secondary-100 rounded-xl overflow-hidden">
<img
src="/images/2021/03/ppr-pipe_000C.jpg"
alt="เกี่ยวกับดีลพลัสเทค"
class="object-cover w-full h-full"
loading="lazy"
/>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 bg-primary-600">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
สนใจสินค้าหรือต้องการคำปรึกษา?
</h2>
<p class="text-xl text-primary-100 mb-8 max-w-2xl mx-auto">
ทีมงานของเราพร้อมให้คำแนะนำและช่วยคุณเลือกสินค้าที่เหมาะสมที่สุด
</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="tel:090-555-1415" class="btn-secondary bg-white text-primary-600 hover:bg-primary-50">
โทร: 090-555-1415
</a>
<a href="https://line.me/ti/p/@dealplustech" target="_blank" rel="noopener" class="btn-outline border-white text-white hover:bg-white hover:text-primary-600">
เพิ่มเพื่อน LINE
</a>
</div>
</div>
</section>
</main>
<Fragment slot="footer">
<Footer />
</Fragment>
<FloatingContact />
</BaseLayout>

72
src/styles/globals.css
View File

@@ -9,6 +9,7 @@
--color-secondary-100: #f1f5f9;
--color-secondary-200: #e2e8f0;
--color-secondary-300: #cbd5e1;
--color-secondary-400: #94a3b8;
--color-secondary-500: #64748b;
--color-secondary-600: #475569;
--color-secondary-700: #334155;
@@ -18,7 +19,6 @@
--color-accent-500: #eab308;
}
/* Base styles */
html {
scroll-behavior: smooth;
font-family: 'Kanit', system-ui, sans-serif;
@@ -35,20 +35,6 @@ h1, h2, h3, h4, h5, h6 {
letter-spacing: -0.025em;
}
/* Desktop-first typography */
@media (min-width: 1280px) {
html {
font-size: 18px;
}
}
@media (min-width: 1536px) {
html {
font-size: 20px;
}
}
/* Button components */
.btn-primary {
display: inline-flex;
align-items: center;
@@ -59,16 +45,10 @@ h1, h2, h3, h4, h5, h6 {
font-weight: 600;
border-radius: 0.5rem;
transition: all 0.2s;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.btn-primary:hover {
background-color: var(--color-primary-700);
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
.btn-primary:active {
transform: translateY(0.125rem);
}
.btn-secondary {
@@ -97,6 +77,7 @@ h1, h2, h3, h4, h5, h6 {
font-weight: 600;
border-radius: 0.5rem;
transition: all 0.2s;
background-color: transparent;
}
.btn-outline:hover {
@@ -104,11 +85,12 @@ h1, h2, h3, h4, h5, h6 {
color: white;
}
/* Section typography */
.section-title {
font-size: 1.875rem;
font-weight: 700;
color: var(--color-secondary-900);
text-align: center;
margin-bottom: 1rem;
}
@media (min-width: 768px) {
@@ -126,16 +108,9 @@ h1, h2, h3, h4, h5, h6 {
.section-subtitle {
font-size: 1.125rem;
color: var(--color-secondary-600);
margin-top: 1rem;
text-align: center;
}
@media (min-width: 768px) {
.section-subtitle {
font-size: 1.25rem;
}
}
/* Card components */
.card {
background-color: white;
border-radius: 0.75rem;
@@ -148,40 +123,3 @@ h1, h2, h3, h4, h5, h6 {
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
transform: translateY(-0.25rem);
}
.card-industrial {
background-color: var(--color-secondary-800);
color: white;
border-radius: 0.75rem;
padding: 1.5rem;
border-left: 4px solid var(--color-primary-500);
}
/* Utility classes */
.text-balance {
text-wrap: balance;
}
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, var(--color-primary-500), var(--color-primary-700));
}
.gradient-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgb(15 23 42 / 0.9), rgb(15 23 42 / 0.7));
}
.industrial-badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
background-color: var(--color-primary-600);
color: white;
font-size: 0.875rem;
font-weight: 600;
border-radius: 0.25rem;
}