From f715e2715dd4a4ada1da8e3b4f69abaa0abac17a Mon Sep 17 00:00:00 2001
From: Kunthawat Greethong <kunthawat@gmailcom>
Date: Wed, 1 Apr 2026 22:39:24 +0700
Subject: [PATCH] Adjust contact cards layout - email on separate row, wider
 card

---
 src/pages/contact-us.astro | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/pages/contact-us.astro b/src/pages/contact-us.astro
index 28d7035..50b5969 100644
--- a/src/pages/contact-us.astro
+++ b/src/pages/contact-us.astro
@@ -38,10 +38,11 @@ import Layout from '../layouts/Layout.astro'
     </div>
   </section>
 
-  <!-- Contact Methods - 3 Cards Centered -->
+  <!-- Contact Methods - 2+1 Layout -->
   <section class="reveal py-20 bg-gradient-to-b from-gray-50 to-white">
     <div class="container mx-auto px-4">
-      <div class="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
+      <!-- Top Row - Phone and LINE -->
+      <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto mb-8">
         
         <!-- Phone -->
         <a href="tel:0809955945" class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 text-center">
@@ -64,8 +65,10 @@ import Layout from '../layouts/Layout.astro'
           <p class="text-lg font-bold text-[#06C755]">@moreminimore</p>
           <p class="text-sm text-gray-500 mt-2">คลิกเพื่อเพิ่มเพื่อน</p>
         </a>
+      </div>
 
-        <!-- Email -->
+      <!-- Bottom Row - Email (Centered, Wider) -->
+      <div class="grid md:grid-cols-2 gap-8 max-w-3xl mx-auto">
         <a href="mailto:contact@moreminimore.com" class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 text-center">
           <div class="w-16 h-16 bg-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-5 group-hover:bg-blue-400 transition-colors">
             <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -73,7 +76,7 @@ import Layout from '../layouts/Layout.astro'
             </svg>
           </div>
           <h3 class="text-xl font-bold mb-3 text-gray-800">อีเมล</h3>
-          <p class="text-base font-bold text-blue-700 break-all">contact@moreminimore.com</p>
+          <p class="text-lg font-bold text-blue-700">contact@moreminimore.com</p>
           <p class="text-sm text-gray-500 mt-2">ตอบกลับภายใน 24 ชม.</p>
         </a>
       </div>