🎨 Fix: Add CSS import to BaseLayout + use standard Tailwind colors

- Added import '../styles/global.css' to BaseLayout.astro - Changed custom colors to standard Tailwind (green-600, gray-600) - CSS now properly bundled and served Fixes: ✅ No styles applying to website ✅ Tailwind CSS now working ✅ Button and card styles functional
2026-03-09 22:19:01 +07:00
parent 92072a4ebf
commit 2c23588dd0
189 changed files with 25 additions and 4478 deletions
--- a/dist/services/index.html
+++ b/dist/services/index.html
@@ -1,52 +0,0 @@
-<!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><style>html{font-family:Kanit,system-ui,sans-serif;font-size:18px}@media(min-width:1280px){html{font-size:20px}}@media(min-width:1536px){html{font-size:22px}}@media(min-width:1920px){html{font-size:24px}}
-</style></head> <body class="flex flex-col min-h-screen">  <main> <!-- Hero Section --> <section class="relative h-[50vh] min-h-[400px] 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"></div> <img src="/images/2021/03/hdpe-pipe_000C.jpg" alt="บริการของเรา" class="absolute inset-0 w-full h-full object-cover opacity-40" loading="eager"> <div class="relative z-20 container mx-auto px-4 h-full flex items-center"> <div class="max-w-2xl"> <span class="inline-block px-4 py-2 bg-primary-600 text-white font-semibold mb-4 rounded">
-บริการครบวงจร
-</span> <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
-บริการ<span class="text-primary-400">ของเรา</span> </h1> <p class="text-xl text-secondary-200">
-ตั้งแต่การให้คำปรึกษา ออกแบบ จัดส่ง จนถึงติดตั้ง เราพร้อมดูแลโครงการของคุณครบวงจร
-</p> </div> </div> </section> <!-- Services Grid --> <section class="py-20 bg-white"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Service 1 --> <div class="group p-8 bg-secondary-50 rounded-2xl hover:bg-primary-600 transition-all duration-300 hover:shadow-xl"> <div class="w-16 h-16 bg-primary-600 text-white rounded-xl flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-primary-600 transition-colors"> <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path> </svg> </div> <h3 class="text-xl font-bold text-secondary-900 mb-3 group-hover:text-white transition-colors">
-จำหน่ายวัสดุท่อ
-</h3> <p class="text-secondary-600 group-hover:text-primary-100 transition-colors">
-จำหน่ายท่อพีพีอาร์ ท่อ HDPE ท่อ PVC วาล์ว และอุปกรณ์ต่อท่อครบวงจร สินค้าคุณภาพ ราคาแข่งขันได้
-</p> </div> <!-- Service 2 --> <div class="group p-8 bg-secondary-50 rounded-2xl hover:bg-primary-600 transition-all duration-300 hover:shadow-xl"> <div class="w-16 h-16 bg-primary-600 text-white rounded-xl flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-primary-600 transition-colors"> <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path> </svg> </div> <h3 class="text-xl font-bold text-secondary-900 mb-3 group-hover:text-white transition-colors">
-ให้คำปรึกษา
-</h3> <p class="text-secondary-600 group-hover:text-primary-100 transition-colors">
-ทีมงานมืออาชีพพร้อมให้คำปรึกษาเกี่ยวกับการเลือกวัสดุท่อที่เหมาะสมกับโครงการของคุณ
-</p> </div> <!-- Service 3 --> <div class="group p-8 bg-secondary-50 rounded-2xl hover:bg-primary-600 transition-all duration-300 hover:shadow-xl"> <div class="w-16 h-16 bg-primary-600 text-white rounded-xl flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-primary-600 transition-colors"> <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"></path> </svg> </div> <h3 class="text-xl font-bold text-secondary-900 mb-3 group-hover:text-white transition-colors">
-ออกแบบระบบ
-</h3> <p class="text-secondary-600 group-hover:text-primary-100 transition-colors">
-บริการออกแบบระบบท่อน้ำ ระบบดับเพลิง และระบบปรับอากาศ โดยวิศวกรผู้เชี่ยวชาญ
-</p> </div> <!-- Service 4 --> <div class="group p-8 bg-secondary-50 rounded-2xl hover:bg-primary-600 transition-all duration-300 hover:shadow-xl"> <div class="w-16 h-16 bg-primary-600 text-white rounded-xl flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-primary-600 transition-colors"> <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> </svg> </div> <h3 class="text-xl font-bold text-secondary-900 mb-3 group-hover:text-white transition-colors">
-ติดตั้งระบบ
-</h3> <p class="text-secondary-600 group-hover:text-primary-100 transition-colors">
-ทีมช่างผู้เชี่ยวชาญติดตั้งระบบท่อครบวงจร พร้อมรับประกันงาน
-</p> </div> <!-- Service 5 --> <div class="group p-8 bg-secondary-50 rounded-2xl hover:bg-primary-600 transition-all duration-300 hover:shadow-xl"> <div class="w-16 h-16 bg-primary-600 text-white rounded-xl flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-primary-600 transition-colors"> <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path> </svg> </div> <h3 class="text-xl font-bold text-secondary-900 mb-3 group-hover:text-white transition-colors">
-จัดส่งสินค้า
-</h3> <p class="text-secondary-600 group-hover:text-primary-100 transition-colors">
-บริการจัดส่งสินค้าทั่วประเทศ รวดเร็ว ปลอดภัย มีประกันความเสียหาย
-</p> </div> <!-- Service 6 --> <div class="group p-8 bg-secondary-50 rounded-2xl hover:bg-primary-600 transition-all duration-300 hover:shadow-xl"> <div class="w-16 h-16 bg-primary-600 text-white rounded-xl flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-primary-600 transition-colors"> <svg class="w-8 h-8" 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"></path> </svg> </div> <h3 class="text-xl font-bold text-secondary-900 mb-3 group-hover:text-white transition-colors">
-บริการหลังการขาย
-</h3> <p class="text-secondary-600 group-hover:text-primary-100 transition-colors">
-ทีมงานพร้อมให้การดูแลและบริการซ่อมบำรุงหลังการขายตลอดอายุการใช้งาน
-</p> </div> </div> </div> </section> <!-- Process Section --> <section class="py-20 bg-secondary-900"> <div class="container mx-auto px-4"> <div class="text-center mb-16"> <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
-ขั้นตอน<span class="text-primary-400">การทำงาน</span> </h2> <p class="text-secondary-300 text-lg max-w-2xl mx-auto">
-เราให้ความสำคัญกับทุกขั้นตอน เพื่อให้ลูกค้าได้รับบริการที่ดีที่สุด
-</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <!-- Step 1 --> <div class="relative"> <div class="text-center"> <span class="text-6xl font-bold text-primary-600/30">01</span> <h3 class="text-xl font-bold text-white mt-4 mb-2">ปรึกษา</h3> <p class="text-secondary-400">ติดต่อเราเพื่อปรึกษาเกี่ยวกับความต้องการของโครงการ</p> </div> </div> <!-- Step 2 --> <div class="relative"> <div class="text-center"> <span class="text-6xl font-bold text-primary-600/30">02</span> <h3 class="text-xl font-bold text-white mt-4 mb-2">ออกแบบ</h3> <p class="text-secondary-400">ทีมวิศวกรออกแบบระบบให้เหมาะสมกับการใช้งาน</p> </div> </div> <!-- Step 3 --> <div class="relative"> <div class="text-center"> <span class="text-6xl font-bold text-primary-600/30">03</span> <h3 class="text-xl font-bold text-white mt-4 mb-2">เสนอราคา</h3> <p class="text-secondary-400">เสนอราคาสินค้าและบริการอย่างโปร่งใส</p> </div> </div> <!-- Step 4 --> <div class="relative"> <div class="text-center"> <span class="text-6xl font-bold text-primary-600/30">04</span> <h3 class="text-xl font-bold text-white mt-4 mb-2">ติดตั้ง</h3> <p class="text-secondary-400">ทีมช่างติดตั้งโดยมืออาชีพตรงตามกำหนด</p> </div> </div> </div> </div> </section> <!-- Why Choose Us --> <section class="py-20 bg-secondary-50"> <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> <div class="space-y-6"> <div class="flex gap-4"> <div class="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center flex-shrink-0"> <svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> </div> <div> <h3 class="font-bold text-secondary-900 mb-1">ประสบการณ์กว่า 10 ปี</h3> <p class="text-secondary-600">เชี่ยวชาญด้านระบบท่อและอุปกรณ์ครบวงจร</p> </div> </div> <div class="flex gap-4"> <div class="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center flex-shrink-0"> <svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> </div> <div> <h3 class="font-bold text-secondary-900 mb-1">สินค้าคุณภาพ</h3> <p class="text-secondary-600">สินค้าผ่านมาตรฐาน มอก. / FM / UL พร้อมรับประกัน</p> </div> </div> <div class="flex gap-4"> <div class="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center flex-shrink-0"> <svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> </div> <div> <h3 class="font-bold text-secondary-900 mb-1">ทีมงานมืออาชีพ</h3> <p class="text-secondary-600">วิศวกรและช่างผู้เชี่ยวชาญพร้อมให้คำปรึกษา</p> </div> </div> <div class="flex gap-4"> <div class="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center flex-shrink-0"> <svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> </div> <div> <h3 class="font-bold text-secondary-900 mb-1">บริการรวดเร็ว</h3> <p class="text-secondary-600">จัดส่งสินค้าทั่วประเทศ ตรงตามกำหนด</p> </div> </div> </div> </div> <div class="relative aspect-video bg-secondary-200 rounded-2xl overflow-hidden"> <img src="/images/2021/03/hdpe-welding_000C-1.jpg" alt="ทีมงานมืออาชีพ" class="object-cover w-full h-full" loading="lazy"> </div> </div> </div> </section> <!-- CTA --> <section class="py-20 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-primary-100 text-lg mb-8 max-w-">
-ต2xl mx-autoิดต่อเราวันนี้เพื่อรับคำปรึกษาและใบเสนอราคาฟรี
-</p> <div class="flex flex-wrap justify-center gap-4"> <a href="/contact-us/" class="btn-secondary bg-white text-primary-600 hover:bg-primary-50">
-ติดต่อเรา
-</a> <a href="tel:090-555-1415" class="btn-outline border-white text-white hover:bg-white hover:text-primary-600">
-โทร: 090-555-1415
-</a> </div> </div> </section> </main> <div class="fixed bottom-6 right-6 z-40 flex flex-col gap-3"> <!-- LINE --> <a href="https://line.me/ti/p/@dealplustech" target="_blank" rel="noopener noreferrer" class="w-14 h-14 bg-[#00B900] rounded-full flex items-center justify-center shadow-lg hover:scale-110 transition-transform" aria-label="ติดต่อผ่าน LINE"> <svg class="w-7 h-7 text-white" viewBox="0 0 24 24" fill="currentColor"> <path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"></path> </svg> </a> <!-- Phone --> <a href="tel:090-555-1415" class="w-14 h-14 bg-primary-600 rounded-full flex items-center justify-center shadow-lg hover:scale-110 transition-transform" aria-label="โทรหาเรา"> <svg class="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path> </svg> </a> </div>  <!-- Cookie Consent Banner --> <script type="module">const t=JSON.parse(localStorage.getItem("consent-preferences")||"null");if(t)t.analytics;else{const e=document.createElement("div");e.id="cookie-banner",e.className="fixed bottom-0 left-0 right-0 bg-secondary-900 text-white p-6 z-50 shadow-lg",e.innerHTML=`
-          <div class="container mx-auto max-w-4xl">
-            <p class="text-lg mb-4">เราใช้คุกกี้เพื่อปรับปรุงประสบการณ์การใช้งานเว็บไซต์ โดยคลิกยอมรับเพื่อใช้งานคุกกี้ทุกประเภท หรือคลิกปรับแต่งเพื่อเลือกคุกกี้ที่ต้องการ</p>
-            <div class="flex flex-wrap gap-3">
-              <button id="accept-all" class="px-6 py-2 bg-primary-600 text-white font-semibold rounded-md hover:bg-primary-700">ยอมรับ</button>
-              <button id="reject-all" class="px-6 py-2 bg-secondary-700 text-white font-semibold rounded-md hover:bg-secondary-600">ปฏิเสธ</button>
-              <button id="customize" class="px-6 py-2 border border-white text-white font-semibold rounded-md hover:bg-white hover:text-secondary-900">ปรับแต่ง</button>
-            </div>
-          </div>
-        `,document.body.appendChild(e),document.getElementById("accept-all")?.addEventListener("click",()=>{localStorage.setItem("consent-preferences",JSON.stringify({essential:!0,analytics:!0,marketing:!0,timestamp:new Date().toISOString()})),e.remove()}),document.getElementById("reject-all")?.addEventListener("click",()=>{localStorage.setItem("consent-preferences",JSON.stringify({essential:!0,analytics:!1,marketing:!1,timestamp:new Date().toISOString()})),e.remove()}),document.getElementById("customize")?.addEventListener("click",()=>{localStorage.setItem("consent-preferences",JSON.stringify({essential:!0,analytics:!1,marketing:!1,timestamp:new Date().toISOString()})),e.remove()})}</script> </body> </html>