Initial commit: MoreminiMore redesign with Astro

This commit is contained in:
Kunthawat Greethong
2026-03-03 21:18:55 +07:00
commit a578dd5a30
33 changed files with 7922 additions and 0 deletions

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

@@ -0,0 +1,203 @@
---
import '../styles/global.css'
interface Props {
title?: string;
description?: string;
}
const { title = 'MoreminiMore - เพิ่มยอดขายของลูกค้ามากที่สุด', description = 'เราให้คำปรึกษาด้านกลยุทธ์การตลาดโดยใช้ข้อมูลเป็นพื้นฐาน พัฒนาศักยภาพของบุคลากรให้สูงขึ้น เพื่อเพิ่มยอดขายให้กับลูกค้าให้มากที่สุด' } = 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} />
<!-- Favicons -->
<link rel="icon" type="image/png" sizes="32x32" href="/branding/favicon-32.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/branding/favicon-192.png" />
<link rel="apple-touch-icon" href="/branding/apple-touch-icon.png" />
<!-- 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=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
<!-- Local Fonts -->
<style>
@font-face {
font-family: 'Kanit';
font-weight: 400;
font-display: swap;
src: url('https://www.moreminimore.com/wp-content/uploads/2022/03/Kanit-400.woff') format('woff');
}
@font-face {
font-family: 'Kanit';
font-weight: 700;
font-display: swap;
src: url('https://www.moreminimore.com/wp-content/uploads/2022/03/Kanit-700.woff') format('woff');
}
</style>
<!-- SEO -->
<title>{title}</title>
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:type" content="website" />
<meta property="og:image" content="/branding/logo-long.png" />
<meta property="twitter:card" content="summary_large_image" />
</head>
<body class="flex flex-col min-h-screen">
<header class="bg-primary sticky top-0 z-50 shadow-lg">
<!-- Top Bar -->
<div class="bg-black text-white py-2">
<div class="container mx-auto px-4 flex flex-wrap justify-between items-center text-sm">
<div class="flex gap-4">
<a href="mailto:contact@moreminimore.com" class="hover:text-primary transition">
📧 contact@moreminimore.com
</a>
<a href="tel:0809955945" class="hover:text-primary transition">
📞 080-995-5945
</a>
</div>
<div class="flex gap-3">
<a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" class="hover:text-primary transition">
Facebook
</a>
<a href="https://twitter.com/moreminimore" target="_blank" rel="noopener noreferrer" class="hover:text-primary transition">
Twitter
</a>
<a href="https://www.linkedin.com/company/moreminimore" target="_blank" rel="noopener noreferrer" class="hover:text-primary transition">
LinkedIn
</a>
</div>
</div>
</div>
<!-- Navigation -->
<div class="container mx-auto px-4 py-4">
<div class="flex justify-between items-center">
<a href="/" class="flex-shrink-0">
<img
src="/branding/logo-long-black.png"
alt="MoreminiMore Logo"
class="h-12 w-auto"
width="200"
height="50"
/>
</a>
<nav class="hidden md:flex gap-6 items-center">
<a href="/#services" class="hover:text-primary transition font-medium">บริการของเรา</a>
<a href="/category/seo" class="hover:text-primary transition font-medium">เรื่องน่ารู้</a>
<a href="/contact-us" class="hover:text-primary transition font-medium">ติดต่อเรา</a>
<a href="/about-us" class="hover:text-primary transition font-medium">เกี่ยวกับเรา</a>
<a href="/#contactform" class="bg-black text-white px-6 py-2 rounded-full hover:bg-gray-800 transition font-medium">
รับปรึกษา ฟรี!
</a>
</nav>
<!-- Mobile Menu Button -->
<button class="md:hidden text-black" id="mobile-menu-btn">
<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 class="md:hidden hidden" id="mobile-menu">
<div class="flex flex-col gap-4 mt-4 pb-4">
<a href="/#services" class="hover:text-primary transition font-medium">บริการของเรา</a>
<a href="/category/seo" class="hover:text-primary transition font-medium">เรื่องน่ารู้</a>
<a href="/contact-us" class="hover:text-primary transition font-medium">ติดต่อเรา</a>
<a href="/about-us" class="hover:text-primary transition font-medium">เกี่ยวกับเรา</a>
<a href="/#contactform" class="bg-black text-white px-6 py-2 rounded-full hover:bg-gray-800 transition font-medium text-center">
รับปรึกษา ฟรี!
</a>
</div>
</div>
</div>
</header>
<main class="flex-grow">
<slot />
</main>
<footer class="bg-black text-white py-12">
<div class="container mx-auto px-4">
<div class="grid md:grid-cols-4 gap-8">
<div>
<img
src="/branding/logo-long.png"
alt="MoreminiMore Logo"
class="h-10 w-auto mb-4"
width="180"
height="45"
/>
<p class="text-gray-400 text-sm">
เพิ่มยอดขายของลูกค้ามากที่สุด ด้วยงบประมาณต่ำที่สุด
</p>
</div>
<div>
<h3 class="font-bold mb-4">บริการ</h3>
<ul class="space-y-2 text-sm text-gray-400">
<li><a href="/digital-transformation-consult" class="hover:text-primary transition">ที่ปรึกษาองค์กรดิจิตอล</a></li>
<li><a href="/online-marketing-consult" class="hover:text-primary transition">ที่ปรึกษาการตลาดออนไลน์</a></li>
<li><a href="/website-development" class="hover:text-primary transition">พัฒนาเว็บไซต์</a></li>
<li><a href="/app-development" class="hover:text-primary transition">พัฒนาแอปพลิเคชัน</a></li>
<li><a href="/chatbot-consult" class="hover:text-primary transition">ระบบแชทบอท</a></li>
</ul>
</div>
<div>
<h3 class="font-bold mb-4">ลิงก์</h3>
<ul class="space-y-2 text-sm text-gray-400">
<li><a href="/about-us" class="hover:text-primary transition">เกี่ยวกับเรา</a></li>
<li><a href="/contact-us" class="hover:text-primary transition">ติดต่อเรา</a></li>
<li><a href="/category/seo" class="hover:text-primary transition">เรื่องน่ารู้</a></li>
</ul>
</div>
<div>
<h3 class="font-bold mb-4">ติดต่อ</h3>
<ul class="space-y-2 text-sm text-gray-400">
<li>📧 contact@moreminimore.com</li>
<li>📞 080-995-5945</li>
<li class="flex gap-3 mt-4">
<a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" class="hover:text-primary transition">Facebook</a>
<a href="https://twitter.com/moreminimore" target="_blank" rel="noopener noreferrer" class="hover:text-primary transition">Twitter</a>
<a href="https://www.linkedin.com/company/moreminimore" target="_blank" rel="noopener noreferrer" class="hover:text-primary transition">LinkedIn</a>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-sm text-gray-400">
<div class="flex justify-center gap-6 mb-4">
<a href="/terms-and-conditions" class="hover:text-primary transition">ข้อกำหนดและเงื่อนไข</a>
<a href="/privacy-policy" class="hover:text-primary transition">นโยบายความเป็นส่วนตัว</a>
</div>
<p>&copy; {new Date().getFullYear()} MoreminiMore Co.,Ltd. สงวนลิขสิทธิ์</p>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
const menuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
if (menuBtn && mobileMenu) {
menuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
}
</script>
</body>
</html>

87
src/pages/about-us.astro Normal file
View File

@@ -0,0 +1,87 @@
---
import Layout from '../layouts/Layout.astro'
---
<Layout title="About Us | MoreminiMore Co.,Ltd.">
<section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
<div class="container mx-auto px-4">
<h1 class="text-4xl md:text-5xl font-bold text-center mb-8 text-secondary">
เกี่ยวกับเรา
</h1>
<p class="text-xl text-center text-gray-600 max-w-3xl mx-auto mb-12">
ระบบเบื้องหลังการทำงานของเรา ระบบของเราจะมี Server ประมวลผล 3 เครื่อง ในการดึงข้อมูลจากแหล่งต่าง ๆ
</p>
<div class="grid md:grid-cols-2 gap-12 items-center max-w-6xl mx-auto">
<div>
<img
src="https://www.moreminimore.com/wp-content/uploads/2022/01/Bright-Wisdom-Backgroud-service-2@2x.png"
alt="Our System"
class="rounded-lg shadow-xl w-full"
width="500"
height="500"
/>
</div>
<div>
<h2 class="text-3xl font-bold mb-6 text-secondary">ระบบของเรา</h2>
<div class="space-y-6">
<div class="flex gap-4">
<div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-2xl">1⃣</div>
<div>
<h3 class="text-xl font-bold mb-2">Server ประมวลผลหลัก</h3>
<p class="text-gray-600">ประมวลผลข้อมูลจากแหล่งต่าง ๆ อย่างรวดเร็วและมีประสิทธิภาพ</p>
</div>
</div>
<div class="flex gap-4">
<div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-2xl">2⃣</div>
<div>
<h3 class="text-xl font-bold mb-2">Server วิเคราะห์ข้อมูล</h3>
<p class="text-gray-600">วิเคราะห์ข้อมูลเชิงลึก เพื่อหาแนวทางที่เหมาะสม</p>
</div>
</div>
<div class="flex gap-4">
<div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-2xl">3⃣</div>
<div>
<h3 class="text-xl font-bold mb-2">Server จัดเก็บข้อมูล</h3>
<p class="text-gray-600">จัดเก็บข้อมูลอย่างเป็นระบบ ปลอดภัย เข้าถึงได้ง่าย</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-center mb-12 text-secondary">วิสัยทัศน์ของเรา</h2>
<div class="prose prose-lg mx-auto text-gray-600">
<p class="mb-6">
MoreminiMore มุ่งมั่นที่จะช่วยธุรกิจไทยเติบโตในยุคดิจิตอล ด้วยการใช้ข้อมูลเป็นพื้นฐานในการตัดสินใจ
และพัฒนาศักยภาพของคนในองค์กรให้สามารถขับเคลื่อนธุรกิจได้อย่างยั่งยืน
</p>
<p class="mb-6">
เราไม่เพียงแค่ให้คำแนะนำ แต่เรายังลงมือทำร่วมกับคุณ เพื่อให้มั่นใจว่ากลยุทธ์ที่วางไว้จะเกิดขึ้นจริง
และวัดผลได้อย่างชัดเจน
</p>
<p>
ด้วยประสบการณ์และทีมงานที่มีความเชี่ยวชาญ เราพร้อมที่จะเป็นพาร์ทเนอร์ในการเติบโตของธุรกิจคุณ
</p>
</div>
</div>
</div>
</section>
<section class="py-20 bg-gray-100">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-8 text-secondary">พร้อมร่วมงานกับคุณ</h2>
<p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
ให้เราช่วยคุณพัฒนาระบบและกลยุทธ์ที่ตอบโจทย์ธุรกิจ
</p>
<a href="/contact-us" class="bg-primary text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-primary-hover transition inline-block shadow-lg">
ติดต่อเรา
</a>
</div>
</section>
</Layout>

View File

@@ -0,0 +1,73 @@
---
import Layout from '../layouts/Layout.astro'
---
<Layout title="พัฒนาแอปพลิเคชัน | MoreminiMore">
<section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="text-6xl mb-6">📲</div>
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-secondary">
พัฒนาแอปพลิเคชัน
</h1>
<p class="text-xl text-gray-600 mb-8">
แอปพลิเคชันบนมือถือ ทั้ง iOS และ Android ใช้งานง่าย ประสิทธิภาพสูง
</p>
<a href="/#contactform" class="bg-primary text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-primary-hover transition inline-block shadow-lg">
ปรึกษาฟรี
</a>
</div>
</div>
</section>
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold mb-8 text-secondary">บริการของเรา</h2>
<div class="prose prose-lg text-gray-600">
<p class="mb-6">
แอปพลิเคชันมือถือคือช่องทางที่ทรงพลังในการเข้าถึงลูกค้า เราสร้างแอปที่ใช้งานง่าย
มีประสิทธิภาพ และตอบโจทย์ธุรกิจของคุณ
</p>
<h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">สิ่งที่เราทำ</h3>
<ul class="space-y-3 mb-8">
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>iOS App - สำหรับ iPhone และ iPad</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>Android App - สำหรับมือถือและแท็บเล็ต Android</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>Cross-platform - ประหยัดด้วย Flutter/React Native</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>UI/UX Design - ใช้งานง่าย สวยงาม</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>API Integration - เชื่อมต่อระบบหลังบ้าน</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>App Store Submission - นำขึ้น Store</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="py-20 bg-gray-100">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-8 text-secondary">พร้อมสร้างแอป?</h2>
<a href="/#contactform" class="bg-black text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-800 transition inline-block shadow-lg">
นัดคุยกับเรา
</a>
</div>
</section>
</Layout>

View File

@@ -0,0 +1,100 @@
---
import Layout from '../../layouts/Layout.astro'
---
<Layout title="เรื่องน่ารู้ SEO | MoreminiMore">
<section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
<div class="container mx-auto px-4">
<h1 class="text-4xl md:text-5xl font-bold text-center mb-8 text-secondary">
เรื่องน่ารู้ SEO
</h1>
<p class="text-xl text-center text-gray-600 max-w-3xl mx-auto mb-12">
บทความและเกร็ดความรู้เกี่ยวกับ SEO และการตลาดดิจิตอล
</p>
</div>
</section>
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
<!-- Blog Post 1 -->
<article class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition">
<div class="p-6">
<div class="text-sm text-primary font-bold mb-2">SEO</div>
<h2 class="text-xl font-bold mb-3 hover:text-primary transition">
<a href="/core-web-vitals-ux-google-ranking-factors-4">
Core Web Vitals และ UX ปัจจัยการจัดอันดับ Google
</a>
</h2>
<p class="text-gray-600 text-sm mb-4">
ทำความเข้าใจ Core Web Vitals และ User Experience ที่มีผลต่อการจัดอันดับเว็บไซต์บน Google
</p>
<a href="/core-web-vitals-ux-google-ranking-factors-4" class="text-primary font-medium hover:underline">
อ่านเพิ่มเติม →
</a>
</div>
</article>
<!-- Blog Post 2 -->
<article class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition">
<div class="p-6">
<div class="text-sm text-primary font-bold mb-2">SEO</div>
<h2 class="text-xl font-bold mb-3 hover:text-primary transition">
<a href="/alt-text-seo-google-ranking-factors-3">
ALT Text กับ SEO ปัจจัยที่ 3 ของ Google
</a>
</h2>
<p class="text-gray-600 text-sm mb-4">
การเขียน ALT Text สำหรับรูปภาพ ช่วย SEO อย่างไร และทำไม Google ให้ความสำคัญ
</p>
<a href="/alt-text-seo-google-ranking-factors-3" class="text-primary font-medium hover:underline">
อ่านเพิ่มเติม →
</a>
</div>
</article>
<!-- Blog Post 3 -->
<article class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition">
<div class="p-6">
<div class="text-sm text-primary font-bold mb-2">SEO</div>
<h2 class="text-xl font-bold mb-3 hover:text-primary transition">
<a href="/8-seo-google-ranking-factors-2">
8 ปัจจัย SEO สำหรับ Google Ranking
</a>
</h2>
<p class="text-gray-600 text-sm mb-4">
8 ปัจจัยสำคัญที่ Google ใช้ในการจัดอันดับเว็บไซต์ คุณทำครบหรือยัง?
</p>
<a href="/8-seo-google-ranking-factors-2" class="text-primary font-medium hover:underline">
อ่านเพิ่มเติม →
</a>
</div>
</article>
<!-- Blog Post 4 -->
<article class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition">
<div class="p-6">
<div class="text-sm text-primary font-bold mb-2">SEO</div>
<h2 class="text-xl font-bold mb-3 hover:text-primary transition">
<a href="/google-ranking-factors-1">
Google Ranking Factors พื้นฐาน SEO ที่ต้องรู้
</a>
</h2>
<p class="text-gray-600 text-sm mb-4">
เรียนรู้ปัจจัยพื้นฐานที่ Google ใช้ในการจัดอันดับเว็บไซต์ เริ่มต้นทำ SEO ให้ถูกต้อง
</p>
<a href="/google-ranking-factors-1" class="text-primary font-medium hover:underline">
อ่านเพิ่มเติม →
</a>
</div>
</article>
</div>
<div class="text-center mt-12">
<p class="text-gray-500">
กำลังอัปเดตบทความใหม่เร็ว ๆ นี้...
</p>
</div>
</div>
</section>
</Layout>

View File

@@ -0,0 +1,73 @@
---
import Layout from '../layouts/Layout.astro'
---
<Layout title="ระบบแชทบอท | MoreminiMore">
<section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="text-6xl mb-6">🤖</div>
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-secondary">
ระบบแชทบอท
</h1>
<p class="text-xl text-gray-600 mb-8">
อัตโนมัติการตอบคำถาม ลดงานซ้ำซ้อน เพิ่มความพึงพอใจลูกค้า 24/7
</p>
<a href="/#contactform" class="bg-primary text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-primary-hover transition inline-block shadow-lg">
ปรึกษาฟรี
</a>
</div>
</div>
</section>
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold mb-8 text-secondary">บริการของเรา</h2>
<div class="prose prose-lg text-gray-600">
<p class="mb-6">
แชทบอทช่วยลดงานซ้ำซ้อนของทีมบริการลูกค้า ตอบคำถามพื้นฐานได้ตลอด 24 ชั่วโมง
และเพิ่มความพึงพอใจของลูกค้า
</p>
<h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">ฟีเจอร์</h3>
<ul class="space-y-3 mb-8">
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>ตอบคำถามอัตโนมัติ 24/7</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>Facebook Messenger Integration</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>LINE OA Integration</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>Website Chat Widget</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>AI-Powered Responses - ฉลาดขึ้นเรื่อย ๆ</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>Handover to Human - ส่งต่อให้คนเมื่อจำเป็น</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="py-20 bg-gray-100">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-8 text-secondary">พร้อมลดงานซ้ำซ้อน?</h2>
<a href="/#contactform" class="bg-black text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-800 transition inline-block shadow-lg">
นัดคุยกับเรา
</a>
</div>
</section>
</Layout>

View File

@@ -0,0 +1,84 @@
---
import Layout from '../layouts/Layout.astro'
---
<Layout title="Contact Us | MoreminiMore Co.,Ltd.">
<section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
<div class="container mx-auto px-4">
<h1 class="text-4xl md:text-5xl font-bold text-center mb-8 text-secondary">
ติดต่อเรา
</h1>
<p class="text-xl text-center text-gray-600 max-w-3xl mx-auto mb-12">
คุณสามารถติดต่อเราได้หลายช่องทาง พร้อมข้อมูลเบื้องต้น กรอกแบบฟอร์ม
</p>
<div class="grid md:grid-cols-2 gap-12 max-w-6xl mx-auto">
<!-- Contact Info -->
<div class="space-y-8">
<div class="bg-white p-8 rounded-lg shadow-md">
<h2 class="text-2xl font-bold mb-6 text-secondary">ช่องทางติดต่อ</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-2xl">📧</div>
<div>
<h3 class="font-bold mb-1">อีเมล</h3>
<a href="mailto:contact@moreminimore.com" class="text-gray-600 hover:text-primary transition">contact@moreminimore.com</a>
</div>
</div>
<div class="flex items-start gap-4">
<div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-2xl">📞</div>
<div>
<h3 class="font-bold mb-1">โทรศัพท์</h3>
<a href="tel:0809955945" class="text-gray-600 hover:text-primary transition">080-995-5945</a>
</div>
</div>
<div class="flex items-start gap-4">
<div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-2xl">💬</div>
<div>
<h3 class="font-bold mb-1">Social Media</h3>
<div class="flex gap-4 mt-2">
<a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-primary transition">Facebook</a>
<a href="https://twitter.com/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-primary transition">Twitter</a>
<a href="https://www.linkedin.com/company/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-primary transition">LinkedIn</a>
</div>
</div>
</div>
</div>
</div>
<div class="bg-black text-white p-8 rounded-lg">
<h3 class="text-xl font-bold mb-4">เวลาทำการ</h3>
<p class="text-gray-300">จันทร์ - ศุกร์: 9:00 - 18:00 น.</p>
<p class="text-gray-300">เสาร์ - อาทิตย์: ตามนัดหมาย</p>
</div>
</div>
<!-- Contact Form Placeholder -->
<div class="bg-white p-8 rounded-lg shadow-md">
<h2 class="text-2xl font-bold mb-6 text-secondary">ส่งข้อความถึงเรา</h2>
<div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
<p class="text-gray-500 mb-4">📝 แบบฟอร์มติดต่อ</p>
<p class="text-gray-400 text-sm mb-4">
ในระหว่างนี้ คุณสามารถติดต่อเราผ่านช่องทางด้านซ้าย
</p>
<a href="mailto:contact@moreminimore.com" class="bg-primary text-black px-6 py-3 rounded-full font-bold hover:bg-primary-hover transition inline-block">
ส่งอีเมล
</a>
</div>
</div>
</div>
</div>
</section>
<section class="py-20 bg-gray-100">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-8 text-secondary">สนใจรับปรึกษาฟรี?</h2>
<p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
เราพร้อมให้คำปรึกษาเบื้องต้น โดยไม่มีค่าใช้จ่าย
</p>
<a href="/#contactform" class="bg-black text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-800 transition inline-block shadow-lg">
นัดคุยกับเรา
</a>
</div>
</section>
</Layout>

View File

@@ -0,0 +1,73 @@
---
import Layout from '../layouts/Layout.astro'
---
<Layout title="ที่ปรึกษาองค์กรดิจิตอล | MoreminiMore">
<section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="text-6xl mb-6">🏢</div>
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-secondary">
ที่ปรึกษาองค์กรดิจิตอล
</h1>
<p class="text-xl text-gray-600 mb-8">
ปรับเปลี่ยนองค์กรให้ทันยุคดิจิตอล วางระบบการทำงาน เพิ่มประสิทธิภาพ ลดต้นทุน
</p>
<a href="/#contactform" class="bg-primary text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-primary-hover transition inline-block shadow-lg">
ปรึกษาฟรี
</a>
</div>
</div>
</section>
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold mb-8 text-secondary">บริการของเรา</h2>
<div class="prose prose-lg text-gray-600">
<p class="mb-6">
การเปลี่ยนแปลงสู่ยุคดิจิตอลไม่ใช่แค่การใช้เทคโนโลยีใหม่ แต่เป็นการปรับเปลี่ยนวิธีคิด
วิธีทำงาน และวัฒนธรรมองค์กรให้ทันกับโลกที่เปลี่ยนไป
</p>
<p class="mb-6">
เราช่วยคุณวิเคราะห์กระบวนการทำงานปัจจุบัน หาจุดที่ต้องปรับปรุง และวางระบบดิจิตอลที่ตอบโจทย์ธุรกิจ
พร้อมทั้งพัฒนาทีมงานให้สามารถใช้งานระบบได้อย่างมีประสิทธิภาพ
</p>
<h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">สิ่งที่คุณจะได้รับ</h3>
<ul class="space-y-3 mb-8">
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>วิเคราะห์กระบวนการทำงานปัจจุบัน</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>วางระบบดิจิตอลที่เหมาะสมกับองค์กร</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>ลดขั้นตอนการทำงานที่ซ้ำซ้อน</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>เพิ่มประสิทธิภาพการทำงาน</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>อบรมทีมงานให้ใช้งานระบบได้จริง</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="py-20 bg-gray-100">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-8 text-secondary">พร้อมเปลี่ยนแปลงองค์กรของคุณ?</h2>
<a href="/#contactform" class="bg-black text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-800 transition inline-block shadow-lg">
นัดคุยกับเรา
</a>
</div>
</section>
</Layout>

169
src/pages/index.astro Normal file
View File

@@ -0,0 +1,169 @@
---
import Layout from '../layouts/Layout.astro'
---
<Layout title="เพิ่มยอดขายกับที่ปรึกษาองค์กรดิจิตอลและการตลาดดิจิตอล | MoreminiMore">
<!-- Hero Section -->
<section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
<div class="container mx-auto px-4 text-center">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-secondary leading-tight">
เพิ่มยอดขายของลูกค้ามากที่สุด<br />
<span class="text-primary">ด้วยงบประมาณต่ำที่สุด</span>
</h1>
<p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto">
เราให้คำปรึกษาด้านกลยุทธ์การตลาดโดยใช้ข้อมูลเป็นพื้นฐาน
พัฒนาศักยภาพของบุคลากรให้สูงขึ้น เพื่อเพิ่มยอดขายให้กับลูกค้าให้มากที่สุด
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#contactform" class="bg-primary text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-primary-hover transition shadow-lg">
นัดคุยกับเรา
</a>
<a href="#services" class="bg-black text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-800 transition shadow-lg">
ดูบริการของเรา
</a>
</div>
</div>
</section>
<!-- Strategy Section -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-8 text-secondary">
เพราะแต่ละธุรกิจ มี <span class="text-primary">จุดแข็งและจุดอ่อน</span> ที่ไม่เหมือนกัน
</h2>
<p class="text-lg text-gray-600 mb-12">
เราวิเคราะห์ข้อมูลเชิงลึก เพื่อพัฒนากลยุทธ์ที่เหมาะสมกับธุรกิจของคุณโดยเฉพาะ
เพิ่มจุดแข็ง แก้จุดอ่อน และเพิ่มยอดขายอย่างยั่งยืน
</p>
<div class="grid md:grid-cols-3 gap-8">
<div class="p-6 bg-gray-50 rounded-lg">
<div class="text-4xl mb-4">📊</div>
<h3 class="text-xl font-bold mb-3">วิเคราะห์ข้อมูล</h3>
<p class="text-gray-600">ใช้ข้อมูลจริงในการตัดสินใจ วางแผนอย่างมีระบบ</p>
</div>
<div class="p-6 bg-gray-50 rounded-lg">
<div class="text-4xl mb-4">🚀</div>
<h3 class="text-xl font-bold mb-3">พัฒนาศักยภาพ</h3>
<p class="text-gray-600">ยกระดับทีมงาน ให้สามารถขับเคลื่อนธุรกิจได้เอง</p>
</div>
<div class="p-6 bg-gray-50 rounded-lg">
<div class="text-4xl mb-4">💰</div>
<h3 class="text-xl font-bold mb-3">เพิ่มยอดขาย</h3>
<p class="text-gray-600">ผลลัพธ์ที่วัดได้ ยอดขายเพิ่มขึ้นอย่างยั่งยืน</p>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-20 bg-gray-100">
<div class="container mx-auto px-4">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4 text-secondary">
บริการของเรา
</h2>
<p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
เราให้บริการครบวงจรด้านดิจิตอลทรานส์ฟอร์เมชั่น และการตลาดออนไลน์
</p>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Service 1 -->
<a href="/digital-transformation-consult" class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition group">
<div class="text-5xl mb-6">🏢</div>
<h3 class="text-2xl font-bold mb-4 group-hover:text-primary transition">ที่ปรึกษาองค์กรดิจิตอล</h3>
<p class="text-gray-600">
ปรับเปลี่ยนองค์กรให้ทันยุคดิจิตอล วางระบบการทำงาน เพิ่มประสิทธิภาพ ลดต้นทุน
</p>
</a>
<!-- Service 2 -->
<a href="/online-marketing-consult" class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition group">
<div class="text-5xl mb-6">📱</div>
<h3 class="text-2xl font-bold mb-4 group-hover:text-primary transition">ที่ปรึกษาการตลาดออนไลน์</h3>
<p class="text-gray-600">
กลยุทธ์การตลาดที่วัดผลได้ เพิ่มการมองเห็น ดึงดูดลูกค้า เพิ่มยอดขาย
</p>
</a>
<!-- Service 3 -->
<a href="/website-development" class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition group">
<div class="text-5xl mb-6">💻</div>
<h3 class="text-2xl font-bold mb-4 group-hover:text-primary transition">พัฒนาเว็บไซต์</h3>
<p class="text-gray-600">
เว็บไซต์มืออาชีพ รองรับทุกอุปกรณ์ โหลดเร็ว SEO-ready เพิ่มความน่าเชื่อถือ
</p>
</a>
<!-- Service 4 -->
<a href="/app-development" class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition group">
<div class="text-5xl mb-6">📲</div>
<h3 class="text-2xl font-bold mb-4 group-hover:text-primary transition">พัฒนาแอปพลิเคชัน</h3>
<p class="text-gray-600">
แอปพลิเคชันบนมือถือ ทั้ง iOS และ Android ใช้งานง่าย ประสิทธิภาพสูง
</p>
</a>
<!-- Service 5 -->
<a href="/chatbot-consult" class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition group">
<div class="text-5xl mb-6">🤖</div>
<h3 class="text-2xl font-bold mb-4 group-hover:text-primary transition">ระบบแชทบอท</h3>
<p class="text-gray-600">
อัตโนมัติการตอบคำถาม ลดงานซ้ำซ้อน เพิ่มความพึงพอใจลูกค้า 24/7
</p>
</a>
<!-- Service 6 -->
<div class="bg-gradient-to-br from-primary to-yellow-600 p-8 rounded-lg shadow-md flex flex-col justify-center items-center text-center">
<div class="text-5xl mb-6">💡</div>
<h3 class="text-2xl font-bold mb-4 text-white">ปรึกษาฟรี!</h3>
<p class="text-white mb-6">
เราพร้อมให้คำปรึกษาเบื้องต้น โดยไม่มีค่าใช้จ่าย
</p>
<a href="#contactform" class="bg-black text-white px-6 py-3 rounded-full font-bold hover:bg-gray-800 transition">
ติดต่อเราเลย
</a>
</div>
</div>
</div>
</section>
<!-- Booking Section -->
<section id="contactform" class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-secondary">
นัดปรึกษาฟรี 1 ชั่วโมง
</h2>
<p class="text-lg text-gray-600 mb-12">
จองคิวพูดคุยกับเรา เพื่อวิเคราะห์ธุรกิจของคุณเบื้องต้น
</p>
<!-- TidyCal Embed Placeholder -->
<div class="bg-gray-50 rounded-lg p-8 border-2 border-dashed border-gray-300">
<p class="text-gray-500 mb-4">📅 ระบบนัดหมายกำลังจะอัปเดต</p>
<p class="text-gray-400 text-sm">
ในระหว่างนี้ คุณสามารถติดต่อเราผ่าน:<br />
📧 contact@moreminimore.com<br />
📞 080-995-5945
</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 bg-black text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">
พร้อมเพิ่มยอดขายให้ธุรกิจของคุณแล้วหรือยัง?
</h2>
<p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
ให้เราช่วยคุณพัฒนากลยุทธ์ที่วัดผลได้ ด้วยงบประมาณที่เหมาะสม
</p>
<a href="#contactform" class="bg-primary text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-primary-hover transition inline-block shadow-lg">
ปรึกษาเราฟรี
</a>
</div>
</section>
</Layout>

View File

@@ -0,0 +1,73 @@
---
import Layout from '../layouts/Layout.astro'
---
<Layout title="ที่ปรึกษาการตลาดออนไลน์ | MoreminiMore">
<section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="text-6xl mb-6">📱</div>
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-secondary">
ที่ปรึกษาการตลาดออนไลน์
</h1>
<p class="text-xl text-gray-600 mb-8">
กลยุทธ์การตลาดที่วัดผลได้ เพิ่มการมองเห็น ดึงดูดลูกค้า เพิ่มยอดขาย
</p>
<a href="/#contactform" class="bg-primary text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-primary-hover transition inline-block shadow-lg">
ปรึกษาฟรี
</a>
</div>
</div>
</section>
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold mb-8 text-secondary">บริการของเรา</h2>
<div class="prose prose-lg text-gray-600">
<p class="mb-6">
การตลาดออนไลน์ที่ประสบความสำเร็จ ต้องมาจากการวางแผนที่ดี วัดผลได้
และปรับปรุงอย่างต่อเนื่อง เราช่วยคุณสร้างกลยุทธ์ที่ตอบโจทย์ธุรกิจและกลุ่มเป้าหมาย
</p>
<h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">สิ่งที่ครอบคลุม</h3>
<ul class="space-y-3 mb-8">
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>วิเคราะห์ตลาดและคู่แข่ง</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>กำหนดกลุ่มเป้าหมายที่ชัดเจน</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>วางแผน Content Marketing</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>โฆษณา Facebook, Google, TikTok</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>SEO เพื่อเพิ่มการมองเห็น</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>วัดผลและรายงานอย่างโปร่งใส</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="py-20 bg-gray-100">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-8 text-secondary">พร้อมเพิ่มยอดขาย?</h2>
<a href="/#contactform" class="bg-black text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-800 transition inline-block shadow-lg">
นัดคุยกับเรา
</a>
</div>
</section>
</Layout>

View File

@@ -0,0 +1,51 @@
---
import Layout from '../layouts/Layout.astro'
---
<Layout title="นโยบายความเป็นส่วนตัว | MoreminiMore">
<section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
<div class="container mx-auto px-4">
<h1 class="text-4xl md:text-5xl font-bold text-center mb-12 text-secondary">
นโยบายความเป็นส่วนตัว
</h1>
<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-md p-8">
<div class="prose prose-lg max-w-none">
<h2 class="text-2xl font-bold mb-4 text-secondary">1. การเก็บรวบรวมข้อมูล</h2>
<p class="mb-6 text-gray-600">
เราเก็บรวบรวมข้อมูลส่วนบุคคลเฉพาะเมื่อคุณติดต่อเราหรือใช้บริการของเราเท่านั้น
</p>
<h2 class="text-2xl font-bold mb-4 text-secondary">2. การใช้ข้อมูล</h2>
<p class="mb-6 text-gray-600">
ข้อมูลของคุณจะถูกใช้เพื่อให้บริการและสื่อสารกับคุณ
</p>
<h2 class="text-2xl font-bold mb-4 text-secondary">3. การปกป้องข้อมูล</h2>
<p class="mb-6 text-gray-600">
เราใช้มาตรการรักษาความปลอดภัยที่เหมาะสมเพื่อปกป้องข้อมูลส่วนบุคคลของคุณ
</p>
<h2 class="text-2xl font-bold mb-4 text-secondary">4. การเปิดเผยข้อมูล</h2>
<p class="mb-6 text-gray-600">
เราจะไม่ขายหรือให้เช่าข้อมูลส่วนบุคคลของคุณให้ฝ่ายที่สาม
</p>
<h2 class="text-2xl font-bold mb-4 text-secondary">5. คุกกี้</h2>
<p class="mb-6 text-gray-600">
เว็บไซต์ของเราอาจใช้คุกกี้เพื่อปรับปรุงประสบการณ์การใช้งาน
</p>
<h2 class="text-2xl font-bold mb-4 text-secondary">6. สิทธิ์ของคุณ</h2>
<p class="mb-6 text-gray-600">
คุณมีสิทธิ์ในการขอเข้าถึง แก้ไข หรือลบข้อมูลส่วนบุคคลของคุณ
</p>
<p class="mt-8 text-gray-500 text-sm">
อัปเดตล่าสุด: {new Date().toLocaleDateString('th-TH')}
</p>
</div>
</div>
</div>
</section>
</Layout>

View File

@@ -0,0 +1,49 @@
---
import Layout from '../layouts/Layout.astro'
---
<Layout title="ข้อกำหนดและเงื่อนไข | MoreminiMore">
<section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
<div class="container mx-auto px-4">
<h1 class="text-4xl md:text-5xl font-bold text-center mb-12 text-secondary">
ข้อกำหนดและเงื่อนไข
</h1>
<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-md p-8">
<div class="prose prose-lg max-w-none">
<h2 class="text-2xl font-bold mb-4 text-secondary">1. การยอมรับเงื่อนไข</h2>
<p class="mb-6 text-gray-600">
การใช้เว็บไซต์และบริการของ MoreminiMore Co.,Ltd. แสดงว่าคุณยอมรับและตกลงที่จะปฏิบัติตามข้อกำหนดและเงื่อนไขเหล่านี้
</p>
<h2 class="text-2xl font-bold mb-4 text-secondary">2. บริการ</h2>
<p class="mb-6 text-gray-600">
เราให้บริการที่ปรึกษาองค์กรดิจิตอล ที่ปรึกษาการตลาดออนไลน์ พัฒนาเว็บไซต์ พัฒนาแอปพลิเคชัน และระบบแชทบอท
รายละเอียดบริการเป็นไปตามที่ตกลงกันในสัญญา
</p>
<h2 class="text-2xl font-bold mb-4 text-secondary">3. ทรัพย์สินทางปัญญา</h2>
<p class="mb-6 text-gray-600">
เนื้อหาทั้งหมดบนเว็บไซต์นี้ รวมถึงข้อความ รูปภาพ โลโก้ และซอฟต์แวร์ เป็นทรัพย์สินของ MoreminiMore Co.,Ltd.
ห้ามคัดลอกหรือใช้โดยไม่ได้รับอนุญาต
</p>
<h2 class="text-2xl font-bold mb-4 text-secondary">4. ความรับผิดชอบ</h2>
<p class="mb-6 text-gray-600">
เราให้คำปรึกษาและบริการตามความสามารถ แต่ไม่สามารถรับประกันผลลัพธ์ทางธุรกิจที่เฉพาะเจาะจงได้
ผลลัพธ์ขึ้นอยู่กับหลายปัจจัยนอกเหนือจากการควบคุมของเรา
</p>
<h2 class="text-2xl font-bold mb-4 text-secondary">5. การแก้ไขเงื่อนไข</h2>
<p class="mb-6 text-gray-600">
เราขอสงวนสิทธิ์ในการแก้ไขข้อกำหนดและเงื่อนไขนี้ได้ทุกเวลา โดยไม่ต้องแจ้งให้ทราบล่วงหน้า
</p>
<p class="mt-8 text-gray-500 text-sm">
อัปเดตล่าสุด: {new Date().toLocaleDateString('th-TH')}
</p>
</div>
</div>
</div>
</section>
</Layout>

View File

@@ -0,0 +1,73 @@
---
import Layout from '../layouts/Layout.astro'
---
<Layout title="พัฒนาเว็บไซต์ | MoreminiMore">
<section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="text-6xl mb-6">💻</div>
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-secondary">
พัฒนาเว็บไซต์
</h1>
<p class="text-xl text-gray-600 mb-8">
เว็บไซต์มืออาชีพ รองรับทุกอุปกรณ์ โหลดเร็ว SEO-ready เพิ่มความน่าเชื่อถือ
</p>
<a href="/#contactform" class="bg-primary text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-primary-hover transition inline-block shadow-lg">
ปรึกษาฟรี
</a>
</div>
</div>
</section>
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-bold mb-8 text-secondary">บริการของเรา</h2>
<div class="prose prose-lg text-gray-600">
<p class="mb-6">
เว็บไซต์คือหน้าตาของธุรกิจคุณในโลกออนไลน์ เราสร้างเว็บไซต์ที่不仅仅สวยงาม
แต่ยังใช้งานได้ดี โหลดเร็ว และช่วยเพิ่มยอดขาย
</p>
<h3 class="text-2xl font-bold mt-8 mb-4 text-secondary">คุณสมบัติ</h3>
<ul class="space-y-3 mb-8">
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>Responsive Design - สวยงามทุกอุปกรณ์</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>SEO Optimization - ติดอันดับ Google</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>Fast Loading - โหลดเร็ว ไม่让客户รอ</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>Secure - ปลอดภัย ด้วย SSL</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>Easy to Update - อัปเดตง่าย</span>
</li>
<li class="flex items-start gap-3">
<span class="text-primary text-xl">✓</span>
<span>Analytics - วัดผลได้</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="py-20 bg-gray-100">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-8 text-secondary">พร้อมสร้างเว็บไซต์?</h2>
<a href="/#contactform" class="bg-black text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-800 transition inline-block shadow-lg">
นัดคุยกับเรา
</a>
</div>
</section>
</Layout>

35
src/styles/global.css Normal file
View File

@@ -0,0 +1,35 @@
@import "tailwindcss";
@theme {
--color-primary: #fed400;
--color-primary-hover: #e5c000;
--color-secondary: #000000;
--color-accent: #e8e8e8;
--color-text: #0f0f0f;
--font-sans: 'Noto Sans Thai', system-ui, sans-serif;
--font-display: 'Kanit', var(--font-sans);
}
@layer base {
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-sans);
color: var(--color-text);
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 700;
}
}
@layer utilities {
.text-primary { color: var(--color-primary); }
.bg-primary { background-color: var(--color-primary); }
.hover\:bg-primary-hover:hover { background-color: var(--color-primary-hover); }
}