From 43df6a4eacc4c5346c18bac90ec1024487d1323d Mon Sep 17 00:00:00 2001
From: Kunthawat <kunthawat@dealplustech.co.th>
Date: Wed, 11 Mar 2026 19:37:21 +0700
Subject: [PATCH] fix: Header overlap and image paths

1. Header overlap fixed:
   - Added pt-32 (padding-top: 8rem) to main
   - Compensates for fixed header height

2. Images not showing ROOT CAUSE FIXED:
   - Public folder NOT auto-copied to dist by Astro
   - Added: RUN cp -r /app/public/* /app/dist/
   - Now images will be in dist/images/ after build
   - Serve can find them at /images/...

This is the actual fix - Astro doesn't copy public to dist!
---
 Dockerfile            | 8 +++++---
 src/pages/index.astro | 3 +--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index a566578ba..73efcc024 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -14,6 +14,9 @@ RUN mkdir -p data
 # Build Astro
 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
 
@@ -25,9 +28,8 @@ RUN apk add --no-cache sqlite-libs
 COPY package*.json ./
 RUN npm install --production
 
-# Copy ALL built assets
+# Copy built assets from builder
 COPY --from=builder /app/dist ./dist
-COPY --from=builder /app/public ./public
 COPY --from=builder /app/data ./data
 
 EXPOSE 80
@@ -41,5 +43,5 @@ ENV ASTRO_DB_REMOTE_URL=file:/app/data/consent.db
 ENV HOST=0.0.0.0
 ENV PORT=80
 
-# Serve static files on port 80
+# Serve static files from dist
 CMD ["npx", "serve", "dist", "-l", "80", "--no-clipboard", "--cors"]
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b50660b40..be5e74c9e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,7 +5,6 @@ import Footer from '../components/Footer.astro';
 import FloatingContact from '../components/FloatingContact.astro';
 import { productCategories } from '../data/site-config';
 
-// Featured products
 const featuredProducts = productCategories.filter(p => 
   ['ppr-elephant', 'hdpe', 'poloplast', 'syler', 'xylent'].includes(p.id)
 ).slice(0, 6);
@@ -16,7 +15,7 @@ const featuredProducts = productCategories.filter(p =>
     <Header />
   </Fragment>
   
-  <main>
+  <main class="pt-32">
     <!-- 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" />