Initial commit: Astro 6 migration with teal design

This commit is contained in:
Kunthawat Greethong
2026-04-22 12:35:39 +07:00
commit c2466c14f1
52 changed files with 11282 additions and 0 deletions

207
src/layouts/Layout.astro Normal file
View File

@@ -0,0 +1,207 @@
---
interface Props {
title: string;
description?: string;
}
const { title, description = "รับทำเว็บไซต์ SEO AI Chatbot และ Marketing Automation สำหรับ SMEs ไทย เพิ่มยอดขาย ลดต้นทุน ด้วยเทคโนโลยีที่ทันสมัย" } = Astro.props;
---
<!doctype html>
<html lang="th">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content={description} />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- Google Fonts -->
<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&family=Prompt:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
</head>
<body class="font-prompt bg-white text-gray-900 antialiased">
<!-- Navigation -->
<header class="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-md border-b border-gray-100">
<nav class="container mx-auto px-4">
<div class="flex items-center justify-between h-16 md:h-20">
<!-- Logo -->
<a href="/" class="flex items-center gap-2">
<div class="w-10 h-10 bg-gradient-to-br from-teal-500 to-teal-600 rounded-xl flex items-center justify-center">
<span class="text-white font-bold text-xl">M</span>
</div>
<span class="font-kanit font-bold text-xl text-gray-900">MoreminiMore</span>
</a>
<!-- Desktop Navigation -->
<div class="hidden md:flex items-center gap-8">
<a href="/" class="text-gray-700 hover:text-teal-600 font-medium transition-colors">หน้าแรก</a>
<a href="/portfolio" class="text-gray-700 hover:text-teal-600 font-medium transition-colors">ผลงาน</a>
<a href="/about-us" class="text-gray-700 hover:text-teal-600 font-medium transition-colors">เกี่ยวกับเรา</a>
<a href="/contact-us" class="text-gray-700 hover:text-teal-600 font-medium transition-colors">ติดต่อ</a>
</div>
<!-- CTA Button -->
<div class="hidden md:flex items-center gap-4">
<a href="tel:0809955945" class="flex items-center gap-2 text-gray-700 hover:text-teal-600 font-medium transition-colors">
<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>
080-995-5945
</a>
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="bg-teal-600 text-white px-5 py-2.5 rounded-full font-medium hover:bg-teal-700 transition-colors flex items-center gap-2">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<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.627-.63h2.386c.349 0 .63.285.63.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.627-.63.349 0 .631.285.631.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>
LINE
</a>
</div>
<!-- Mobile Menu Button -->
<button id="mobile-menu-btn" class="md:hidden p-2 text-gray-700 hover:text-teal-600 transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden pb-4">
<div class="flex flex-col gap-3">
<a href="/" class="text-gray-700 hover:text-teal-600 font-medium py-2 transition-colors">หน้าแรก</a>
<a href="/portfolio" class="text-gray-700 hover:text-teal-600 font-medium py-2 transition-colors">ผลงาน</a>
<a href="/about-us" class="text-gray-700 hover:text-teal-600 font-medium py-2 transition-colors">เกี่ยวกับเรา</a>
<a href="/contact-us" class="text-gray-700 hover:text-teal-600 font-medium py-2 transition-colors">ติดต่อ</a>
<div class="flex gap-3 pt-3 border-t border-gray-100">
<a href="tel:0809955945" class="flex-1 text-center bg-gray-100 text-gray-700 py-3 rounded-xl font-medium">
โทร 080-995-5945
</a>
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="flex-1 text-center bg-teal-600 text-white py-3 rounded-xl font-medium">
LINE
</a>
</div>
</div>
</div>
</nav>
</header>
<!-- Main Content -->
<main class="pt-16 md:pt-20">
<slot />
</main>
<!-- Footer -->
<footer class="bg-gray-900 text-white">
<div class="container mx-auto px-4 py-16">
<div class="grid md:grid-cols-4 gap-12">
<!-- Brand -->
<div class="md:col-span-2">
<div class="flex items-center gap-3 mb-6">
<div class="w-12 h-12 bg-gradient-to-br from-teal-400 to-teal-500 rounded-xl flex items-center justify-center">
<span class="text-white font-bold text-2xl">M</span>
</div>
<span class="font-kanit font-bold text-2xl">MoreminiMore</span>
</div>
<p class="text-gray-400 leading-relaxed mb-6 max-w-md">
บริษัท มอร์มินิมอร์ จำกัด ให้บริการรับทำเว็บไซต์ SEO และ AI Chatbot ครบวงจร สำหรับธุรกิจ SMEs ทั่วประเทศไทย
</p>
<div class="flex gap-4">
<a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-teal-600 transition-colors">
<svg class="w-5 h-5" 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>
</a>
<a href="https://twitter.com/moreminimore" target="_blank" rel="noopener noreferrer" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-teal-600 transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
</svg>
</a>
<a href="https://www.linkedin.com/company/moreminimore" target="_blank" rel="noopener noreferrer" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-teal-600 transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
</div>
</div>
<!-- Services -->
<div>
<h3 class="font-kanit font-semibold text-lg mb-6">บริการ</h3>
<ul class="space-y-3">
<li><a href="/web-development" class="text-gray-400 hover:text-teal-400 transition-colors">รับทำเว็บไซต์</a></li>
<li><a href="/marketing-automation" class="text-gray-400 hover:text-teal-400 transition-colors">Marketing Automation</a></li>
<li><a href="/ai-automation" class="text-gray-400 hover:text-teal-400 transition-colors">AI Automation</a></li>
<li><a href="/tech-consult" class="text-gray-400 hover:text-teal-400 transition-colors">Tech Consult</a></li>
</ul>
</div>
<!-- Contact -->
<div>
<h3 class="font-kanit font-semibold text-lg mb-6">ติดต่อ</h3>
<ul class="space-y-3">
<li class="flex items-center gap-3 text-gray-400">
<svg class="w-5 h-5 text-teal-400" 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>
080-995-5945
</li>
<li class="flex items-center gap-3 text-gray-400">
<svg class="w-5 h-5 text-teal-400" 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>
contact@moreminimore.com
</li>
<li class="flex items-start gap-3 text-gray-400">
<svg class="w-5 h-5 text-teal-400 mt-0.5" 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>
53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120
</li>
</ul>
</div>
</div>
<!-- Bottom Bar -->
<div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-gray-500 text-sm">
© 2024 บริษัท มอร์มินิมอร์ จำกัด. สงวนลิขสิทธิ์.
</p>
<div class="flex gap-6 text-sm">
<a href="/privacy-policy" class="text-gray-500 hover:text-teal-400 transition-colors">นโยบายความเป็นส่วนตัว</a>
<a href="/terms-and-conditions" class="text-gray-500 hover:text-teal-400 transition-colors">ข้อกำหนดการใช้งาน</a>
</div>
</div>
</div>
</footer>
<!-- Mobile Menu Script -->
<script>
const menuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
menuBtn?.addEventListener('click', () => {
mobileMenu?.classList.toggle('hidden');
});
</script>
</body>
</html>
<style is:global>
* {
scroll-behavior: smooth;
}
body {
font-family: 'Prompt', sans-serif;
}
.font-kanit {
font-family: 'Kanit', sans-serif;
}
</style>