kunthawat/moreminimore-redesign
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Activity

Add Facebook card for symmetric 2x2 grid layout

Browse Source
This commit is contained in:
Kunthawat Greethong
2026-04-01 22:56:41 +07:00
parent b3b4fa720a
commit b8de1de888
1 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/pages/contact-us.astro
View File

@@ -38,11 +38,10 @@ import Layout from '../layouts/Layout.astro'
</div>
</section>
<!-- Contact Methods - 2+1 Layout -->
<!-- Contact Methods - 2x2 Grid -->
<section class="reveal py-20 bg-gradient-to-b from-gray-50 to-white">
<div class="container mx-auto px-4">
<!-- Top Row - Phone and LINE -->
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto mb-8">
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<!-- 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">
@@ -65,10 +64,8 @@ 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>
<!-- Bottom Row - Email (Centered, Same Width as One Top Card) -->
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<!-- Email -->
<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">
@@ -79,6 +76,18 @@ import Layout from '../layouts/Layout.astro'
<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>
<!-- Facebook -->
<a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" 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-600 rounded-2xl flex items-center justify-center mx-auto mb-5 group-hover:bg-blue-500 transition-colors">
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
</div>
<h3 class="text-xl font-bold mb-3 text-gray-800">Facebook</h3>
<p class="text-lg font-bold text-blue-700">moreminimore</p>
<p class="text-sm text-gray-500 mt-2">Message ได้ตลอด 24 ชม.</p>
</a>
</div>
</div>
</section>