ðŸŽĻ Fix Header & Footer: Solid colors, no transparency

Fixed transparency and overlap issues:

HEADER:
✅ Changed from primary-600 to green-600 (solid)
✅ White background with shadow-lg
✅ Solid green top bar
✅ Fixed overlap - pages have pt-32 padding

FOOTER:
✅ Dark theme (bg-gray-900)
✅ Solid dark background
✅ Green accents (text-green-400)
✅ Better contrast with white text

COLOR SCHEME:
- Header: Green top bar (#22c55e) + White nav
- Footer: Dark gray (#111827) + Green accents
- No transparency, all solid colors
- Consistent green/gray industrial theme

Build: 11 pages ✅
This commit is contained in:
Kunthawat Greethong
2026-03-09 22:40:48 +07:00
parent a6c45c6216
commit 538765370b
15 changed files with 123 additions and 284 deletions

View File

@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="th"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="generator" content="Astro v5.18.0"><meta name="description" content="āļ›āļąāđŠāļĄāļ™āđ‰āļģāđ€āļ›āđ‡āļ™āļ­āļļāļ›āļāļĢāļ“āđŒāļŠāļģāļ„āļąāļāđƒāļ™āļĢāļ°āļšāļšāļ™āđ‰āļģāļ—āļļāļāļšāđ‰āļēāļ™ āļāļēāļĢāļšāļģāļĢāļļāļ‡āļĢāļąāļāļĐāļēāļ—āļĩāđˆāļ–āļđāļāļ•āđ‰āļ­āļ‡āļˆāļ°āļŠāđˆāļ§āļĒāļĒāļ·āļ”āļ­āļēāļĒāļļāļāļēāļĢāđƒāļŠāđ‰āļ‡āļēāļ™āđāļĨāļ°āļ›āļĢāļ°āļŦāļĒāļąāļ”āļ„āđˆāļēāđ„āļŸāļŸāđ‰āļē"><!-- 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="āļāļēāļĢāļšāļģāļĢāļļāļ‡āļĢāļąāļāļĐāļēāļ›āļąāđŠāļĄāļ™āđ‰āļģāđƒāļŦāđ‰āļĄāļĩāļ­āļēāļĒāļļāļāļēāļĢāđƒāļŠāđ‰āļ‡āļēāļ™āļĒāļēāļ§āļ™āļēāļ™"><meta property="og:description" content="āļ›āļąāđŠāļĄāļ™āđ‰āļģāđ€āļ›āđ‡āļ™āļ­āļļāļ›āļāļĢāļ“āđŒāļŠāļģāļ„āļąāļāđƒāļ™āļĢāļ°āļšāļšāļ™āđ‰āļģāļ—āļļāļāļšāđ‰āļēāļ™ āļāļēāļĢāļšāļģāļĢāļļāļ‡āļĢāļąāļāļĐāļēāļ—āļĩāđˆāļ–āļđāļāļ•āđ‰āļ­āļ‡āļˆāļ°āļŠāđˆāļ§āļĒāļĒāļ·āļ”āļ­āļēāļĒāļļāļāļēāļĢāđƒāļŠāđ‰āļ‡āļēāļ™āđāļĨāļ°āļ›āļĢāļ°āļŦāļĒāļąāļ”āļ„āđˆāļēāđ„āļŸāļŸāđ‰āļē"><meta property="og:image" content="/og-image.jpg"><meta property="og:type" content="website"><meta name="twitter:card" content="summary_large_image"><title>āļāļēāļĢāļšāļģāļĢāļļāļ‡āļĢāļąāļāļĐāļēāļ›āļąāđŠāļĄāļ™āđ‰āļģāđƒāļŦāđ‰āļĄāļĩāļ­āļēāļĒāļļāļāļēāļĢāđƒāļŠāđ‰āļ‡āļēāļ™āļĒāļēāļ§āļ™āļēāļ™ | āļ”āļĩāļĨ āļžāļĨāļąāļŠ āđ€āļ—āļ„</title><link rel="stylesheet" href="/_astro/index.aag4P04t.css"></head> <body class="flex flex-col min-h-screen"> <main class="pt-32 pb-16"> <article class="container mx-auto px-4 max-w-4xl"> <!-- Header --> <header class="mb-8"> <div class="flex items-center gap-4 mb-4"> <span class="industrial-badge">āļ›āļąāđŠāļĄāļ™āđ‰āļģ</span> <time class="text-secondary-500"> 5 āļĄāļāļĢāļēāļ„āļĄ 2567 </time> <span class="text-secondary-500">â€Ē</span> <span class="text-secondary-500">Deal Plus Tech</span> </div> <h1 class="text-4xl md:text-5xl font-bold text-secondary-900 mb-4"> āļāļēāļĢāļšāļģāļĢāļļāļ‡āļĢāļąāļāļĐāļēāļ›āļąāđŠāļĄāļ™āđ‰āļģāđƒāļŦāđ‰āļĄāļĩāļ­āļēāļĒāļļāļāļēāļĢāđƒāļŠāđ‰āļ‡āļēāļ™āļĒāļēāļ§āļ™āļēāļ™ </h1> </header> <!-- Featured Image --> <div class="relative aspect-video bg-secondary-100 rounded-xl overflow-hidden mb-8"> <img src="/images/2021/02/Water-Pump1.jpg" alt="āļāļēāļĢāļšāļģāļĢāļļāļ‡āļĢāļąāļāļĐāļēāļ›āļąāđŠāļĄāļ™āđ‰āļģāđƒāļŦāđ‰āļĄāļĩāļ­āļēāļĒāļļāļāļēāļĢāđƒāļŠāđ‰āļ‡āļēāļ™āļĒāļēāļ§āļ™āļēāļ™" class="object-cover w-full h-full" loading="lazy"> </div> <!-- Content --> <div class="prose prose-lg max-w-none prose-headings:font-bold prose-a:text-primary-600 hover:prose-a:text-primary-700 prose-img:rounded-xl"> <h2 id="āļ„āļ§āļēāļĄāļŠāļģāļ„āļąāļāļ‚āļ­āļ‡āļāļēāļĢāļšāļģāļĢāļļāļ‡āļĢāļąāļāļĐāļēāļ›āļąāđŠāļĄāļ™āđ‰āļģ">āļ„āļ§āļēāļĄāļŠāļģāļ„āļąāļāļ‚āļ­āļ‡āļāļēāļĢāļšāļģāļĢāļļāļ‡āļĢāļąāļāļĐāļēāļ›āļąāđŠāļĄāļ™āđ‰āļģ</h2>
<!DOCTYPE html><html lang="th"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="generator" content="Astro v5.18.0"><meta name="description" content="āļ›āļąāđŠāļĄāļ™āđ‰āļģāđ€āļ›āđ‡āļ™āļ­āļļāļ›āļāļĢāļ“āđŒāļŠāļģāļ„āļąāļāđƒāļ™āļĢāļ°āļšāļšāļ™āđ‰āļģāļ—āļļāļāļšāđ‰āļēāļ™ āļāļēāļĢāļšāļģāļĢāļļāļ‡āļĢāļąāļāļĐāļēāļ—āļĩāđˆāļ–āļđāļāļ•āđ‰āļ­āļ‡āļˆāļ°āļŠāđˆāļ§āļĒāļĒāļ·āļ”āļ­āļēāļĒāļļāļāļēāļĢāđƒāļŠāđ‰āļ‡āļēāļ™āđāļĨāļ°āļ›āļĢāļ°āļŦāļĒāļąāļ”āļ„āđˆāļēāđ„āļŸāļŸāđ‰āļē"><!-- 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="āļāļēāļĢāļšāļģāļĢāļļāļ‡āļĢāļąāļāļĐāļēāļ›āļąāđŠāļĄāļ™āđ‰āļģāđƒāļŦāđ‰āļĄāļĩāļ­āļēāļĒāļļāļāļēāļĢāđƒāļŠāđ‰āļ‡āļēāļ™āļĒāļēāļ§āļ™āļēāļ™"><meta property="og:description" content="āļ›āļąāđŠāļĄāļ™āđ‰āļģāđ€āļ›āđ‡āļ™āļ­āļļāļ›āļāļĢāļ“āđŒāļŠāļģāļ„āļąāļāđƒāļ™āļĢāļ°āļšāļšāļ™āđ‰āļģāļ—āļļāļāļšāđ‰āļēāļ™ āļāļēāļĢāļšāļģāļĢāļļāļ‡āļĢāļąāļāļĐāļēāļ—āļĩāđˆāļ–āļđāļāļ•āđ‰āļ­āļ‡āļˆāļ°āļŠāđˆāļ§āļĒāļĒāļ·āļ”āļ­āļēāļĒāļļāļāļēāļĢāđƒāļŠāđ‰āļ‡āļēāļ™āđāļĨāļ°āļ›āļĢāļ°āļŦāļĒāļąāļ”āļ„āđˆāļēāđ„āļŸāļŸāđ‰āļē"><meta property="og:image" content="/og-image.jpg"><meta property="og:type" content="website"><meta name="twitter:card" content="summary_large_image"><title>āļāļēāļĢāļšāļģāļĢāļļāļ‡āļĢāļąāļāļĐāļēāļ›āļąāđŠāļĄāļ™āđ‰āļģāđƒāļŦāđ‰āļĄāļĩāļ­āļēāļĒāļļāļāļēāļĢāđƒāļŠāđ‰āļ‡āļēāļ™āļĒāļēāļ§āļ™āļēāļ™ | āļ”āļĩāļĨ āļžāļĨāļąāļŠ āđ€āļ—āļ„</title><link rel="stylesheet" href="/_astro/index.C5qR9YjN.css"></head> <body class="flex flex-col min-h-screen"> <main class="pt-32 pb-16"> <article class="container mx-auto px-4 max-w-4xl"> <!-- Header --> <header class="mb-8"> <div class="flex items-center gap-4 mb-4"> <span class="industrial-badge">āļ›āļąāđŠāļĄāļ™āđ‰āļģ</span> <time class="text-secondary-500"> 5 āļĄāļāļĢāļēāļ„āļĄ 2567 </time> <span class="text-secondary-500">â€Ē</span> <span class="text-secondary-500">Deal Plus Tech</span> </div> <h1 class="text-4xl md:text-5xl font-bold text-secondary-900 mb-4"> āļāļēāļĢāļšāļģāļĢāļļāļ‡āļĢāļąāļāļĐāļēāļ›āļąāđŠāļĄāļ™āđ‰āļģāđƒāļŦāđ‰āļĄāļĩāļ­āļēāļĒāļļāļāļēāļĢāđƒāļŠāđ‰āļ‡āļēāļ™āļĒāļēāļ§āļ™āļēāļ™ </h1> </header> <!-- Featured Image --> <div class="relative aspect-video bg-secondary-100 rounded-xl overflow-hidden mb-8"> <img src="/images/2021/02/Water-Pump1.jpg" alt="āļāļēāļĢāļšāļģāļĢāļļāļ‡āļĢāļąāļāļĐāļēāļ›āļąāđŠāļĄāļ™āđ‰āļģāđƒāļŦāđ‰āļĄāļĩāļ­āļēāļĒāļļāļāļēāļĢāđƒāļŠāđ‰āļ‡āļēāļ™āļĒāļēāļ§āļ™āļēāļ™" class="object-cover w-full h-full" loading="lazy"> </div> <!-- Content --> <div class="prose prose-lg max-w-none prose-headings:font-bold prose-a:text-primary-600 hover:prose-a:text-primary-700 prose-img:rounded-xl"> <h2 id="āļ„āļ§āļēāļĄāļŠāļģāļ„āļąāļāļ‚āļ­āļ‡āļāļēāļĢāļšāļģāļĢāļļāļ‡āļĢāļąāļāļĐāļēāļ›āļąāđŠāļĄāļ™āđ‰āļģ">āļ„āļ§āļēāļĄāļŠāļģāļ„āļąāļāļ‚āļ­āļ‡āļāļēāļĢāļšāļģāļĢāļļāļ‡āļĢāļąāļāļĐāļēāļ›āļąāđŠāļĄāļ™āđ‰āļģ</h2>
<p>āļ›āļąāđŠāļĄāļ™āđ‰āļģāđ€āļ›āđ‡āļ™āļŦāļąāļ§āđƒāļˆāļ‚āļ­āļ‡āļĢāļ°āļšāļšāļ™āđ‰āļģāđƒāļ™āļšāđ‰āļēāļ™ āļāļēāļĢāļšāļģāļĢāļļāļ‡āļĢāļąāļāļĐāļēāļ­āļĒāđˆāļēāļ‡āļŠāļĄāđˆāļģāđ€āļŠāļĄāļ­āļˆāļ°āļŠāđˆāļ§āļĒ:</p>
<ul>
<li>āļĒāļ·āļ”āļ­āļēāļĒāļļāļāļēāļĢāđƒāļŠāđ‰āļ‡āļēāļ™āļ‚āļ­āļ‡āļ›āļąāđŠāļĄāļ™āđ‰āļģ</li>