fix(responsive): mobile footer restructure + categories 1-col + overflow fix

Three mobile issues fixed: 1. Categories section: <640px (mobile) now 1 column. Previously it was already 2 columns at the smallest breakpoint which made the tiles feel cramped. Uses Tailwind's default sm: (640px) for the 1->2 transition, not a custom min-[500px]. 2. Footer mobile layout (<1024px): three centered rows inside the same max-w-7xl container. - Row 1: Company Info (1 col, max-w-md, centered) - Row 2: Quick Links + สินค้ายอดนิยม (2 cols, max-w-2xl, centered) - Row 3: ติดต่อเรา (1 col, max-w-sm outer, max-w-xs button column) The narrow inner max-widths are deliberate: a full-width row of contact buttons looks stretched, especially the bottom one with the โทรเลย / แอดไลน์ buttons. 3. Horizontal overflow bug: data-animate='fade-left' and 'fade-right' children sit at translateX(30px) / translateX(-30px) in their initial state, before the IntersectionObserver fires. On small viewports this pushes the page 30px wider than the viewport and reveals a horizontal scrollbar as soon as the user loads the page. Adding overflow-x-clip on <footer> keeps the off-screen translation contained inside the footer.
2026-06-09 14:18:54 +07:00
parent 0bd480d103
commit b7931731f9
2 changed files with 109 additions and 3 deletions
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -430,9 +430,115 @@ const productLinks = [
  <slot />

  <!-- Footer -->
-  <footer class="text-neutral-800 bg-gradient-to-b from-white to-neutral-50" data-animate="fade-up">
+  <footer class="text-neutral-800 bg-gradient-to-b from-white to-neutral-50 overflow-x-clip" data-animate="fade-up">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
+
+      <!-- ============================================================ -->
+      <!-- Mobile layout (<1024px): 3 rows, all centered, content kept   -->
+      <!-- narrower than the container so long rows (especially the      -->
+      <!-- button row) do not stretch edge to edge.                     -->
+      <!-- `overflow-x-clip` on <footer> catches the initial state of    -->
+      <!-- data-animate="fade-left"/"fade-right" children which are      -->
+      <!-- translated off-screen until the IntersectionObserver fires.  -->
+      <!-- ============================================================ -->
+      <div class="lg:hidden space-y-10 text-center">
+        <!-- Row 1: Company Info -->
+        <div class="max-w-md mx-auto" data-animate="fade-up">
+          <img src="/images/logo/dealplustech-logo.png" alt="ดีล พลัส เทค" class="h-10 w-auto mb-4 mx-auto transition-transform hover:scale-105 duration-300" />
+          <div class="space-y-3 text-sm text-neutral-600 inline-flex flex-col items-center">
+            <p class="flex items-start gap-2 hover:text-primary-600 transition-colors">
+              <svg class="w-5 h-5 shrink-0 mt-0.5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
+              <span>{companyInfo.address}</span>
+            </p>
+            <p class="flex items-center gap-2 hover:text-primary-600 transition-colors">
+              <svg class="w-5 h-5 shrink-0 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <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" />
+              </svg>
+              <a href={`tel:${companyInfo.phone}`}>{companyInfo.phone}</a>
+            </p>
+            <p class="flex items-center gap-2 hover:text-primary-600 transition-colors">
+              <svg class="w-5 h-5 shrink-0 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+              </svg>
+              <a href={`mailto:${companyInfo.email}`}>{companyInfo.email}</a>
+            </p>
+            <p class="flex items-center gap-2 hover:text-primary-600 transition-colors">
+              <svg class="w-5 h-5 shrink-0 text-primary-600" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <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"/>
+              </svg>
+              <span>LINE: {companyInfo.line}</span>
+            </p>
+            <p class="text-neutral-400 text-xs">{companyInfo.hours}</p>
+          </div>
+        </div>
+
+        <!-- Row 2: Quick Links + Products (2 columns) -->
+        <div class="grid grid-cols-2 gap-6 text-center max-w-2xl mx-auto">
+          <div data-animate="fade-up" data-animate-delay="100">
+            <h3 class="font-semibold text-lg mb-4 text-primary-700">ลิงก์ด่วน</h3>
+            <ul class="space-y-2 text-sm text-neutral-600">
+              <li><a href="/" class="hover:text-primary-600 hover:translate-x-1 transition-all inline-block">หน้าแรก</a></li>
+              <li><a href="/about-us" class="hover:text-primary-600 hover:translate-x-1 transition-all inline-block">เกี่ยวกับเรา</a></li>
+              <li><a href="/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1" class="hover:text-primary-600 hover:translate-x-1 transition-all inline-block">บทความ</a></li>
+              <li><a href="/all-products" class="hover:text-primary-600 hover:translate-x-1 transition-all inline-block">สินค้าทั้งหมด</a></li>
+              <li><a href="/portfolio" class="hover:text-primary-600 hover:translate-x-1 transition-all inline-block">ผลงาน</a></li>
+              <li><a href="/contact-us" class="hover:text-primary-600 hover:translate-x-1 transition-all inline-block">ติดต่อเรา</a></li>
+            </ul>
+          </div>
+          <div data-animate="fade-up" data-animate-delay="200">
+            <h3 class="font-semibold text-lg mb-4 text-primary-700">สินค้ายอดนิยม</h3>
+            <ul class="space-y-2 text-sm text-neutral-600">
+              {productLinks.map(link => (
+                <li>
+                  <a href={link.href} class="hover:text-primary-600 hover:translate-x-1 transition-all inline-block">{link.title}</a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        <!-- Row 3: Contact CTA -->
+        <div class="max-w-sm mx-auto" data-animate="fade-up" data-animate-delay="300">
+          <h3 class="font-semibold text-lg mb-4 text-primary-700">ติดต่อเรา</h3>
+          <div class="space-y-3 max-w-xs mx-auto">
+            <a
+              href={`tel:${companyInfo.phone}`}
+              class="flex items-center justify-center gap-2 w-full bg-primary-600 hover:bg-primary-700 text-white py-3 px-4 rounded-xl font-medium transition-all hover:shadow-lg hover:shadow-primary-600/25 hover:-translate-y-0.5 magnetic-btn btn-shimmer"
+            >
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <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" />
+              </svg>
+              โทรเลย
+            </a>
+            <div class="flex flex-col items-center gap-2">
+              <img
+                src="/images/line-qr.svg"
+                alt="LINE QR Code"
+                class="w-28 h-28 rounded-xl bg-white p-2 shadow-lg hover:shadow-xl transition-shadow"
+              />
+              <a
+                href="https://line.me/ti/p/~JPPSELECTION"
+                target="_blank"
+                rel="noopener"
+                class="flex items-center justify-center gap-2 w-full bg-accent-500 hover:bg-accent-600 text-white py-3 px-4 rounded-xl font-medium transition-all hover:shadow-lg hover:shadow-accent-500/25 hover:-translate-y-0.5 magnetic-btn btn-shimmer"
+              >
+                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                  <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"/>
+                </svg>
+                แอดไลน์
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ============================================================ -->
+      <!-- Desktop layout (>=1024px): 4 columns, original layout           -->
+      <!-- ============================================================ -->
+      <div class="hidden lg:grid lg:grid-cols-4 gap-8 lg:gap-12">
        <!-- Company Info -->
        <div class="lg:col-span-1" data-animate="fade-left" data-animate-delay="0">
          <img src="/images/logo/dealplustech-logo.png" alt="ดีล พลัส เทค" class="h-10 w-auto mb-4 transition-transform hover:scale-105 duration-300" />
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -315,7 +315,7 @@ const articles = (await getCollection('blog')).sort(
        <p class="text-neutral-600 max-w-2xl mx-auto text-lg">ทุกหมวดเน้นงานอาคาร/โรงงาน/โรงแรม — คลิกเพื่อดูสินค้าเฉพาะหมวด</p>
      </div>

-      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 lg:gap-6" data-animate-stagger>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 lg:gap-6" data-animate-stagger>
        <!-- Category 1: ท่อพีพีอาร์ (ไทย PPR) -->
        <a href="/all-products?filter=ppr" class="group relative h-64 rounded-3xl overflow-hidden border border-neutral-200 hover:shadow-2xl transition-all duration-500 hover:-translate-y-1">
          <img src="/images/products-cropped/ppr-pipe_000C.jpg" alt="ท่อพีพีอาร์" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" loading="lazy" />