Major redesign: Blended colors, 3 services, new features
Changes per user requirements: 1. Color Theme - BLENDED: - Primary: #fed400 (Yellow - kept from current) - Secondary: #2563EB (Blue - from new design) - Accent: #7C3AED (Purple), #10B981 (Green) - Background: #F3F4F6 (Light Gray) 2. Services - NEW DESIGN (3 services): - ✅ Web Development (WordPress ฟรี) - ✅ AI Automation Setup - ✅ AI Consult & Implementation (NEW) - ❌ Removed: App Development - ❌ Removed: Online Marketing 3. Hero Message - COMBINED: - 'เว็บไซต์ฟรี มีจริง! จ่ายแค่ค่า Server รายปี' - Plus AI-Powered message 4. Company Info - KEPT CURRENT: - Email: contact@moreminimore.com (unchanged) - No founder name added - No location update 5. Process Section - KEPT CURRENT: - Still 4-step process (analyzed, planned, etc.) 6. Content - MIGRATED ALL: - Comprehensive content from docs - Longer, detailed pages 7. New Features - ALL EXCEPT TRUST BADGES: - ✅ Sticky header with CTA - ✅ Floating contact buttons (Line, Phone) - ✅ Contact form (on Contact page) - ✅ Package comparison table - ❌ Trust badges (excluded as requested) Pages Updated: - Homepage: Complete redesign with new sections - Layout: 3-service navigation, sticky header - AI Consult: New page created - CSS: Blended color theme, new components - Removed: App Dev, Marketing, AI Transformation pages Build: 17 pages, 1.02s
This commit is contained in:
Kunthawat Greethong
@@ -6,7 +6,7 @@ interface Props {
|
||||
description?: string;
|
||||
}
|
||||
|
||||
const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI', description = 'เพิ่มยอดขายด้วย AI & Technology' } = Astro.props;
|
||||
const { title = 'moreminimore | รับทำเว็บไซต์ฟรี + จ่ายค่า Server รายปี', description = 'SMEs ไทยไม่ต้องง้องบทำเว็บหลักหมื่นอีกต่อไป' } = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
@@ -16,27 +16,17 @@ const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content={description} />
|
||||
<title>{title}</title>
|
||||
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/branding/favicon-32.png" />
|
||||
<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" />
|
||||
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'Kanit';
|
||||
font-weight: 400;
|
||||
src: url('https://www.moreminimore.com/wp-content/uploads/2022/03/Kanit-400.woff') format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Kanit';
|
||||
font-weight: 700;
|
||||
src: url('https://www.moreminimore.com/wp-content/uploads/2022/03/Kanit-700.woff') format('woff');
|
||||
}
|
||||
@font-face { font-family: 'Kanit'; font-weight: 400; src: url('https://www.moreminimore.com/wp-content/uploads/2022/03/Kanit-400.woff') format('woff'); }
|
||||
@font-face { font-family: 'Kanit'; font-weight: 700; src: url('https://www.moreminimore.com/wp-content/uploads/2022/03/Kanit-700.woff') format('woff'); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="flex flex-col min-h-screen">
|
||||
<header class="bg-primary sticky top-0 z-50 shadow-lg">
|
||||
<header class="sticky-header">
|
||||
<div class="bg-black text-white py-2">
|
||||
<div class="container mx-auto px-4 flex flex-wrap justify-between items-center text-base">
|
||||
<div class="flex gap-6">
|
||||
@@ -44,156 +34,103 @@ const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI
|
||||
<a href="tel:0809955945" class="hover:text-primary transition flex items-center gap-2">📞 080-995-5945</a>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" class="hover:text-primary transition" title="Facebook">
|
||||
<svg class="w-5 h-5" fill="#1877F2" 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="hover:text-primary transition" title="Twitter">
|
||||
<svg class="w-5 h-5" fill="#1DA1F2" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/company/moreminimore" target="_blank" rel="noopener noreferrer" class="hover:text-primary transition" title="LinkedIn">
|
||||
<svg class="w-5 h-5" fill="#0A66C2" 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>
|
||||
<a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" class="hover:text-primary transition"><svg class="w-5 h-5" fill="#1877F2" 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="hover:text-primary transition"><svg class="w-5 h-5" fill="#1DA1F2" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg></a>
|
||||
<a href="https://www.linkedin.com/company/moreminimore" target="_blank" rel="noopener noreferrer" class="hover:text-primary transition"><svg class="w-5 h-5" fill="#0A66C2" 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.452z"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<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 lg:flex gap-8 items-center">
|
||||
<div class="relative group">
|
||||
<button class="font-medium hover:text-accent-blue transition flex items-center gap-1">
|
||||
บริการของเรา
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</button>
|
||||
<button class="font-medium hover:text-secondary transition flex items-center gap-1">บริการของเรา<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg></button>
|
||||
<div class="absolute top-full left-0 mt-2 w-72 bg-white rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
|
||||
<div class="py-2">
|
||||
<a href="/website-development" class="block px-4 py-3 hover:bg-gray-50 transition border-b border-gray-100">
|
||||
<div class="font-medium text-secondary">พัฒนาเว็บไซต์</div>
|
||||
<div class="text-sm text-gray-500">E-Commerce, UX/UI</div>
|
||||
</a>
|
||||
<a href="/ai-automation" class="block px-4 py-3 hover:bg-gray-50 transition border-b border-gray-100">
|
||||
<div class="font-medium text-secondary">AI Automation</div>
|
||||
<div class="text-sm text-gray-500">AI & Chatbot</div>
|
||||
</a>
|
||||
<a href="/app-development" class="block px-4 py-3 hover:bg-gray-50 transition border-b border-gray-100">
|
||||
<div class="font-medium text-secondary">พัฒนาแอปพลิเคชัน</div>
|
||||
<div class="text-sm text-gray-500">iOS, Android</div>
|
||||
</a>
|
||||
<a href="/online-marketing-consult" class="block px-4 py-3 hover:bg-gray-50 transition">
|
||||
<div class="font-medium text-secondary">ที่ปรึกษาการตลาดออนไลน์</div>
|
||||
<div class="text-sm text-gray-500">Digital Marketing</div>
|
||||
</a>
|
||||
<a href="/website-development" class="block px-4 py-3 hover:bg-gray-50 transition border-b border-gray-100"><div class="font-medium text-secondary">Web Development</div><div class="text-sm text-gray-500">WordPress ฟรี!</div></a>
|
||||
<a href="/ai-automation" class="block px-4 py-3 hover:bg-gray-50 transition border-b border-gray-100"><div class="font-medium text-secondary">AI Automation Setup</div><div class="text-sm text-gray-500">ลดงานซ้ำซ้อน</div></a>
|
||||
<a href="/ai-consult" class="block px-4 py-3 hover:bg-gray-50 transition"><div class="font-medium text-secondary">AI Consult & Implementation</div><div class="text-sm text-gray-500">ที่ปรึกษา AI</div></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="/blog" class="font-medium hover:text-accent-blue transition">เรื่องน่ารู้</a>
|
||||
<a href="/contact-us" class="font-medium hover:text-accent-blue transition">ติดต่อเรา</a>
|
||||
<a href="/about-us" class="font-medium hover:text-accent-blue transition">เกี่ยวกับเรา</a>
|
||||
<a href="tel:0809955945" class="bg-black text-white px-6 py-2 rounded-full hover:bg-gray-800 transition font-medium flex items-center gap-2">
|
||||
📞 โทรเลย
|
||||
</a>
|
||||
<a href="/#process" class="font-medium hover:text-secondary transition">ขั้นตอนการทำงาน</a>
|
||||
<a href="/blog" class="font-medium hover:text-secondary transition">เรื่องน่ารู้</a>
|
||||
<a href="/contact-us" class="bg-secondary text-white px-6 py-2 rounded-full hover:bg-secondary-hover transition font-medium">ปรึกษาฟรี</a>
|
||||
</nav>
|
||||
|
||||
<button class="lg: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>
|
||||
<button class="lg: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>
|
||||
|
||||
<div class="lg:hidden hidden" id="mobile-menu">
|
||||
<div class="flex flex-col gap-4 mt-4 pb-4">
|
||||
<details class="group">
|
||||
<summary class="font-medium hover:text-accent-blue transition cursor-pointer flex items-center justify-between">
|
||||
บริการของเรา
|
||||
<svg class="w-4 h-4 group-open:rotate-180 transition" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
<summary class="font-medium hover:text-secondary transition cursor-pointer flex items-center justify-between">
|
||||
บริการของเรา<svg class="w-4 h-4 group-open:rotate-180 transition" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</summary>
|
||||
<div class="flex flex-col gap-2 mt-2 ml-4">
|
||||
<a href="/website-development" class="text-base hover:text-accent-blue transition">พัฒนาเว็บไซต์</a>
|
||||
<a href="/ai-automation" class="text-base hover:text-accent-blue transition">AI Automation</a>
|
||||
<a href="/app-development" class="text-base hover:text-accent-blue transition">พัฒนาแอปพลิเคชัน</a>
|
||||
<a href="/online-marketing-consult" class="text-base hover:text-accent-blue transition">ที่ปรึกษาการตลาดออนไลน์</a>
|
||||
<a href="/website-development" class="text-base hover:text-secondary transition">Web Development</a>
|
||||
<a href="/ai-automation" class="text-base hover:text-secondary transition">AI Automation Setup</a>
|
||||
<a href="/ai-consult" class="text-base hover:text-secondary transition">AI Consult & Implementation</a>
|
||||
</div>
|
||||
</details>
|
||||
<a href="/blog" class="font-medium hover:text-accent-blue transition">เรื่องน่ารู้</a>
|
||||
<a href="/contact-us" class="font-medium hover:text-accent-blue transition">ติดต่อเรา</a>
|
||||
<a href="/about-us" class="font-medium hover:text-accent-blue transition">เกี่ยวกับเรา</a>
|
||||
<a href="tel:0809955945" class="bg-black text-white px-6 py-2 rounded-full hover:bg-gray-800 transition font-medium text-center">📞 โทรเลย</a>
|
||||
<a href="/#process" class="font-medium hover:text-secondary transition">ขั้นตอนการทำงาน</a>
|
||||
<a href="/blog" class="font-medium hover:text-secondary transition">เรื่องน่ารู้</a>
|
||||
<a href="/contact-us" class="bg-secondary text-white px-6 py-2 rounded-full hover:bg-secondary-hover transition font-medium text-center">ปรึกษาฟรี</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="flex-grow"><slot /></main>
|
||||
|
||||
<footer class="bg-white text-black py-12 border-t-4 border-primary">
|
||||
<footer class="bg-gray-dark text-gray-300 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-600 text-base">ที่ปรึกษาองค์กร AI เพิ่มยอดขายด้วยข้อมูล</p>
|
||||
<div class="mt-4 flex gap-3">
|
||||
<a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-accent-blue transition">
|
||||
<svg class="w-6 h-6" fill="#1877F2" 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="text-gray-600 hover:text-accent-blue transition">
|
||||
<svg class="w-6 h-6" fill="#1DA1F2" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/company/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-accent-blue transition">
|
||||
<svg class="w-6 h-6" fill="#0A66C2" 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>
|
||||
<img src="/branding/logo-long.png" alt="MoreminiMore Logo" class="h-10 w-auto mb-4 bg-white p-2 rounded" width="180" height="45" />
|
||||
<p class="text-base mb-4">IT Services สำหรับ SMEs ไทย</p>
|
||||
<div class="flex gap-3">
|
||||
<a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-300 hover:text-primary transition"><svg class="w-6 h-6" fill="#1877F2" 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="text-gray-300 hover:text-primary transition"><svg class="w-6 h-6" fill="#1DA1F2" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg></a>
|
||||
<a href="https://www.linkedin.com/company/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-300 hover:text-primary transition"><svg class="w-6 h-6" fill="#0A66C2" 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.452z"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-bold mb-4 text-lg">บริการ</h3>
|
||||
<ul class="space-y-2 text-base text-gray-600">
|
||||
<li><a href="/website-development" class="hover:text-accent-blue transition">พัฒนาเว็บไซต์</a></li>
|
||||
<li><a href="/ai-automation" class="hover:text-accent-blue transition">AI Automation</a></li>
|
||||
<li><a href="/app-development" class="hover:text-accent-blue transition">พัฒนาแอปพลิเคชัน</a></li>
|
||||
<li><a href="/online-marketing-consult" class="hover:text-accent-blue transition">ที่ปรึกษาการตลาดออนไลน์</a></li>
|
||||
<h3 class="font-bold mb-4 text-lg text-white">บริการ</h3>
|
||||
<ul class="space-y-2 text-base">
|
||||
<li><a href="/website-development" class="hover:text-primary transition">Web Development</a></li>
|
||||
<li><a href="/ai-automation" class="hover:text-primary transition">AI Automation Setup</a></li>
|
||||
<li><a href="/ai-consult" class="hover:text-primary transition">AI Consult & Implementation</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-bold mb-4 text-lg">ลิงก์</h3>
|
||||
<ul class="space-y-2 text-base text-gray-600">
|
||||
<li><a href="/about-us" class="hover:text-accent-blue transition">เกี่ยวกับเรา</a></li>
|
||||
<li><a href="/contact-us" class="hover:text-accent-blue transition">ติดต่อเรา</a></li>
|
||||
<li><a href="/blog" class="hover:text-accent-blue transition">เรื่องน่ารู้</a></li>
|
||||
<h3 class="font-bold mb-4 text-lg text-white">บริษัท</h3>
|
||||
<ul class="space-y-2 text-base">
|
||||
<li><a href="/about-us" class="hover:text-primary transition">เกี่ยวกับเรา</a></li>
|
||||
<li><a href="/#process" class="hover:text-primary transition">ขั้นตอนการทำงาน</a></li>
|
||||
<li><a href="/contact-us" class="hover:text-primary transition">ติดต่อเรา</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-bold mb-4 text-lg">ติดต่อ</h3>
|
||||
<ul class="space-y-3 text-base text-gray-600">
|
||||
<li class="flex items-center gap-2"><span>📞</span><a href="tel:0809955945" class="hover:text-accent-blue transition">080-995-5945</a></li>
|
||||
<li class="flex items-center gap-2"><span>📧</span><a href="mailto:contact@moreminimore.com" class="hover:text-accent-blue transition">contact@moreminimore.com</a></li>
|
||||
<h3 class="font-bold mb-4 text-lg text-white">ติดต่อ</h3>
|
||||
<ul class="space-y-3 text-base">
|
||||
<li class="flex items-center gap-2"><span>📞</span><a href="tel:0809955945" class="hover:text-primary transition">080-995-5945</a></li>
|
||||
<li class="flex items-center gap-2"><span>📧</span><a href="mailto:contact@moreminimore.com" class="hover:text-primary transition">contact@moreminimore.com</a></li>
|
||||
<li class="flex items-center gap-2"><span>💬</span><span>Line: @moreminimore</span></li>
|
||||
<li class="flex items-center gap-2"><span>🕒</span><span>จ-ศ: 9:00 - 18:00 น.</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-gray-200 mt-8 pt-8 text-center text-base text-gray-600">
|
||||
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-base">
|
||||
<div class="flex justify-center gap-6 mb-4">
|
||||
<a href="/terms-and-conditions" class="hover:text-accent-blue transition">ข้อกำหนดและเงื่อนไข</a>
|
||||
<a href="/privacy-policy" class="hover:text-accent-blue transition">นโยบายความเป็นส่วนตัว</a>
|
||||
<a href="/terms-and-conditions" class="hover:text-primary transition">ข้อกำหนดและเงื่อนไข</a>
|
||||
<a href="/privacy-policy" class="hover:text-primary transition">นโยบายความเป็นส่วนตัว</a>
|
||||
</div>
|
||||
<p>© {new Date().getFullYear()} MoreminiMore Co.,Ltd. สงวนลิขสิทธิ์</p>
|
||||
<p>© {new Date().getFullYear()} moreminimore. สงวนลิขสิทธิ์</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const menuBtn = document.getElementById('mobile-menu-btn');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
if (menuBtn && mobileMenu) {
|
||||
menuBtn.addEventListener('click', () => mobileMenu.classList.toggle('hidden'));
|
||||
}
|
||||
if (menuBtn && mobileMenu) { menuBtn.addEventListener('click', () => mobileMenu.classList.toggle('hidden')); }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
123
src/pages/ai-consult.astro
Normal file
123
src/pages/ai-consult.astro
Normal file
@@ -0,0 +1,123 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
---
|
||||
|
||||
<Layout title="AI Consult & Implementation | MoreminiMore">
|
||||
<!-- Hero -->
|
||||
<section class="relative py-32 gradient-secondary text-white overflow-hidden">
|
||||
<div class="absolute inset-0 opacity-20">
|
||||
<img src="/images/hero/strategy-ai.png" alt="AI Consult" class="w-full h-full object-cover" loading="eager" />
|
||||
</div>
|
||||
<div class="container mx-auto px-4 relative z-10">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<div class="text-8xl mb-6">💡</div>
|
||||
<h1 class="text-5xl md:text-7xl font-bold mb-8">AI Consult & Implementation</h1>
|
||||
<p class="text-2xl text-gray-100 mb-10">ที่ปรึกษา AI ช่วยคุณนำเทคโนโลยีไปใช้จริง ได้ผลลัพธ์จับต้องได้</p>
|
||||
<div class="flex flex-col sm:flex-row gap-5 justify-center">
|
||||
<a href="tel:0809955945" class="bg-white text-secondary px-8 py-4 rounded-full font-bold text-xl hover:bg-gray-100 transition shadow-xl inline-flex items-center justify-center gap-2">📞 080-995-5945</a>
|
||||
<a href="https://line.me/" class="bg-accent-green text-white px-8 py-4 rounded-full font-bold text-xl hover:bg-green-600 transition shadow-xl inline-flex items-center justify-center gap-2">💬 ทัก Line</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Intro -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-5xl">
|
||||
<h2 class="text-4xl font-bold mb-8 text-center">AI ไม่ใช่แค่คำเทรนด์ แต่คือเครื่องมือที่สร้างผลลัพธ์ได้</h2>
|
||||
<div class="prose prose-lg max-w-none text-center">
|
||||
<p class="text-xl text-gray-600 mb-8">
|
||||
AI สร้างผลลัพธ์ได้ ถ้าใช้ถูกวิธี moreminimore พร้อมเป็นที่ปรึกษาและ Implementation Partner ให้คุณ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Consulting Services -->
|
||||
<section class="py-20 bg-gray-light">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-4xl font-bold mb-12 text-center">บริการปรึกษา</h2>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<div class="bg-white p-8 rounded-2xl shadow-md">
|
||||
<div class="text-5xl mb-4">🎯</div>
|
||||
<h3 class="text-2xl font-bold mb-4">ประเมินความพร้อม</h3>
|
||||
<ul class="space-y-3 text-gray-600">
|
||||
<li class="flex items-start gap-3"><span class="text-primary">✓</span> วิเคราะห์ธุรกิจและความต้องการ</li>
|
||||
<li class="flex items-start gap-3"><span class="text-primary">✓</span> ประเมินความพร้อมด้านข้อมูล</li>
|
||||
<li class="flex items-start gap-3"><span class="text-primary">✓</span> ระบุ Use Cases ที่เหมาะสม</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-white p-8 rounded-2xl shadow-md">
|
||||
<div class="text-5xl mb-4">📊</div>
|
||||
<h3 class="text-2xl font-bold mb-4">วางแผน Implementation</h3>
|
||||
<ul class="space-y-3 text-gray-600">
|
||||
<li class="flex items-start gap-3"><span class="text-primary">✓</span> วางแผนเป็นขั้นตอน</li>
|
||||
<li class="flex items-start gap-3"><span class="text-primary">✓</span> คำนวณ ROI ที่คาดหวัง</li>
|
||||
<li class="flex items-start gap-3"><span class="text-primary">✓</span> เลือก Tools ที่คุ้มค่า</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Implementation Services -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-4xl font-bold mb-12 text-center">บริการ Implementation</h2>
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<div class="bg-gray-light p-8 rounded-2xl">
|
||||
<div class="text-5xl mb-4">⚙️</div>
|
||||
<h3 class="text-xl font-bold mb-3">ติดตั้งและตั้งค่า</h3>
|
||||
<p class="text-gray-600">ติดตั้งระบบ AI และตั้งค่าให้เหมาะสมกับธุรกิจคุณ</p>
|
||||
</div>
|
||||
<div class="bg-gray-light p-8 rounded-2xl">
|
||||
<div class="text-5xl mb-4">🔗</div>
|
||||
<h3 class="text-xl font-bold mb-3">เชื่อมต่อกับระบบเดิม</h3>
|
||||
<p class="text-gray-600">Integrate กับระบบที่มีอยู่ ไม่ต้องเริ่มใหม่</p>
|
||||
</div>
|
||||
<div class="bg-gray-light p-8 rounded-2xl">
|
||||
<div class="text-5xl mb-4">📚</div>
|
||||
<h3 class="text-xl font-bold mb-3">อบรมทีม</h3>
|
||||
<p class="text-gray-600">สอนทีมใช้งาน Support หลังติดตั้ง</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why AI Consult -->
|
||||
<section class="py-20 bg-secondary text-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-4xl font-bold mb-12 text-center">ทำไมต้องที่ปรึกษา AI?</h2>
|
||||
<div class="grid md:grid-cols-4 gap-8">
|
||||
<div class="text-center">
|
||||
<div class="text-5xl mb-4">🎯</div>
|
||||
<h3 class="text-xl font-bold mb-2">ไม่เสียเวลาทดลองผิดถูก</h3>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-5xl mb-4">💡</div>
|
||||
<h3 class="text-xl font-bold mb-2">ได้โซลูชันที่เหมาะกับคุณ</h3>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-5xl mb-4">📊</div>
|
||||
<h3 class="text-xl font-bold mb-2">วัดผลได้ชัดเจน</h3>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-5xl mb-4">💰</div>
|
||||
<h3 class="text-xl font-bold mb-2">คุ้มค่าการลงทุน</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="py-20 gradient-cta text-white">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-4xl font-bold mb-6">พร้อมนำ AI มาใช้หรือยัง?</h2>
|
||||
<p class="text-xl text-gray-100 mb-10">ปรึกษาฟรี เราช่วยวิเคราะห์และแนะนำโซลูชันที่เหมาะสม</p>
|
||||
<div class="flex flex-col sm:flex-row gap-5 justify-center">
|
||||
<a href="tel:0809955945" class="bg-white text-secondary px-8 py-4 rounded-full font-bold text-xl hover:bg-gray-100 transition shadow-xl">📞 080-995-5945</a>
|
||||
<a href="https://line.me/" class="bg-accent-green text-white px-8 py-4 rounded-full font-bold text-xl hover:bg-green-600 transition shadow-xl">💬 ทัก Line</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
@@ -1,123 +0,0 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
---
|
||||
|
||||
<Layout title="พัฒนาแอปพลิเคชัน | MoreminiMore">
|
||||
<!-- Hero -->
|
||||
<section class="relative py-32 bg-gradient-to-br from-purple-50 to-pink-50 overflow-hidden">
|
||||
<div class="absolute inset-0 opacity-20">
|
||||
<img src="/images/hero/strategy-ai.png" alt="App Development" class="w-full h-full object-cover" loading="eager" />
|
||||
</div>
|
||||
<div class="container mx-auto px-4 relative z-10">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<div class="text-8xl mb-6">📲</div>
|
||||
<h1 class="text-5xl md:text-7xl font-bold mb-8 text-secondary">พัฒนาแอปพลิเคชัน</h1>
|
||||
<p class="text-2xl text-gray-600 mb-10">บริการพัฒนาแอปพลิเคชัน เพื่อตอบโจทย์ลูกค้าที่ต้องการทำตลาดจากอุปกรณ์โมบายต่าง ๆ รวมถึงการแก้ปัญหาเฉพาะด้าน</p>
|
||||
<div class="flex flex-col sm:flex-row gap-5 justify-center">
|
||||
<a href="tel:0809955945" class="btn-accent text-xl shadow-xl">📞 080-995-5945</a>
|
||||
<a href="https://line.me/" class="btn-secondary text-xl shadow-xl">💬 เพิ่ม Line</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Overview -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-5xl">
|
||||
<h2 class="text-4xl font-bold mb-8 text-center text-secondary">แอปพลิเคชันเพื่อธุรกิจของคุณ</h2>
|
||||
<div class="prose prose-lg max-w-none">
|
||||
<p class="text-xl text-gray-600 mb-8">
|
||||
บริการพัฒนาแอปพลิเคชัน เพื่อตอบโจทย์ลูกค้าที่ต้องการทำตลาดจากอุปกรณ์โมบายต่าง ๆ รวมถึงการแก้ปัญหาเฉพาะด้าน เช่น ระบบการเชื่อมต่อยอดขายระหว่าง SAP กับเว็บไซต์ เป็นต้น
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-8 my-12">
|
||||
<div class="bg-gray-light p-8 rounded-2xl">
|
||||
<div class="text-5xl mb-4">🍎</div>
|
||||
<h3 class="text-2xl font-bold mb-4">iOS App</h3>
|
||||
<ul class="space-y-3 text-gray-600">
|
||||
<li>• iPhone และ iPad</li>
|
||||
<li>• Native Performance</li>
|
||||
<li>• App Store Ready</li>
|
||||
<li>• Swift / SwiftUI</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-gray-light p-8 rounded-2xl">
|
||||
<div class="text-5xl mb-4">🤖</div>
|
||||
<h3 class="text-2xl font-bold mb-4">Android App</h3>
|
||||
<ul class="space-y-3 text-gray-600">
|
||||
<li>• มือถือและแท็บเล็ต</li>
|
||||
<li>• ครอบคลุมทุกอุปกรณ์</li>
|
||||
<li>• Google Play Ready</li>
|
||||
<li>• Kotlin / Jetpack</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features -->
|
||||
<section class="py-20 bg-gray-light">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-4xl font-bold mb-12 text-center text-secondary">ฟีเจอร์ที่สามารถพัฒนาได้</h2>
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<div class="bg-white p-8 rounded-2xl shadow-md">
|
||||
<div class="text-5xl mb-4">🛒</div>
|
||||
<h3 class="text-xl font-bold mb-3">E-Commerce</h3>
|
||||
<p class="text-gray-600">ขายสินค้าในแอป ชำระเงิน ตัดสต็อก</p>
|
||||
</div>
|
||||
<div class="bg-white p-8 rounded-2xl shadow-md">
|
||||
<div class="text-5xl mb-4">🔗</div>
|
||||
<h3 class="text-xl font-bold mb-3">API Integration</h3>
|
||||
<p class="text-gray-600">เชื่อม SAP, Accounting และระบบอื่นๆ</p>
|
||||
</div>
|
||||
<div class="bg-white p-8 rounded-2xl shadow-md">
|
||||
<div class="text-5xl mb-4">📊</div>
|
||||
<h3 class="text-xl font-bold mb-3">Dashboard</h3>
|
||||
<p class="text-gray-600">Dashboard แสดงผลข้อมูล Real-time</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Process -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-4xl font-bold mb-12 text-center text-secondary">กระบวนการพัฒนา</h2>
|
||||
<div class="grid md:grid-cols-5 gap-6">
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 mx-auto mb-4 rounded-full gradient-primary flex items-center justify-center text-3xl font-bold text-white">1</div>
|
||||
<h3 class="text-lg font-bold mb-2">Requirement</h3>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 mx-auto mb-4 rounded-full gradient-ai flex items-center justify-center text-3xl font-bold text-white">2</div>
|
||||
<h3 class="text-lg font-bold mb-2">Design</h3>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-accent-purple flex items-center justify-center text-3xl font-bold text-white">3</div>
|
||||
<h3 class="text-lg font-bold mb-2">Develop</h3>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-accent-teal flex items-center justify-center text-3xl font-bold text-white">4</div>
|
||||
<h3 class="text-lg font-bold mb-2">Test</h3>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-primary flex items-center justify-center text-3xl font-bold text-white">5</div>
|
||||
<h3 class="text-lg font-bold mb-2">Deploy</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="py-20 gradient-primary text-white">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-4xl font-bold mb-6">สนใจพัฒนาแอปพลิเคชัน?</h2>
|
||||
<p class="text-xl text-gray-100 mb-10">ปรึกษาฟรี เราพร้อมช่วยคุณ</p>
|
||||
<div class="flex flex-col sm:flex-row gap-5 justify-center">
|
||||
<a href="tel:0809955945" class="bg-white text-secondary px-8 py-4 rounded-full font-bold text-xl hover:bg-gray-100 transition shadow-xl">📞 080-995-5945</a>
|
||||
<a href="https://line.me/" class="bg-green-500 text-white px-8 py-4 rounded-full font-bold text-xl hover:bg-green-600 transition shadow-xl">💬 เพิ่ม Line</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
@@ -2,151 +2,217 @@
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
---
|
||||
|
||||
<Layout title="ที่ปรึกษาองค์กร AI | MoreminiMore">
|
||||
<Layout title="moreminimore | รับทำเว็บไซต์ฟรี + จ่ายค่า Server รายปี สำหรับ SMEs">
|
||||
<!-- Sticky Header with CTA -->
|
||||
<header class="sticky-header">
|
||||
<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-10 w-auto" width="180" height="45" />
|
||||
</a>
|
||||
<nav class="hidden lg:flex gap-8 items-center">
|
||||
<a href="#services" class="font-medium hover:text-secondary transition">บริการ</a>
|
||||
<a href="#process" class="font-medium hover:text-secondary transition">ขั้นตอน</a>
|
||||
<a href="/about-us" class="font-medium hover:text-secondary transition">เกี่ยวกับเรา</a>
|
||||
<a href="/contact-us" class="bg-secondary text-white px-6 py-2 rounded-full hover:bg-secondary-hover transition font-medium">ปรึกษาฟรี</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative py-32 bg-gradient-to-br from-yellow-50 via-blue-50 to-purple-50 overflow-hidden">
|
||||
<div class="absolute inset-0">
|
||||
<img src="/images/hero/homepage-ai.png" alt="AI Transformation" class="w-full h-full object-cover opacity-10" loading="eager" />
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-yellow-50/80 via-blue-50/80 to-purple-50/80"></div>
|
||||
<section class="relative py-32 gradient-hero text-white overflow-hidden">
|
||||
<div class="absolute inset-0 opacity-20">
|
||||
<img src="/images/hero/homepage-ai.png" alt="AI Technology" class="w-full h-full object-cover" loading="eager" />
|
||||
</div>
|
||||
<div class="container mx-auto px-4 relative z-10">
|
||||
<div class="max-w-5xl mx-auto text-center">
|
||||
<h1 class="text-5xl md:text-7xl font-bold mb-8 text-secondary leading-tight">เปลี่ยนองค์กรของคุณด้วย<br /><span class="text-accent-blue">AI & Technology</span></h1>
|
||||
<p class="text-2xl md:text-3xl text-gray-600 mb-10 max-w-3xl mx-auto">เพิ่มยอดขาย ลดต้นทุน และยกระดับธุรกิจด้วยเทคโนโลยีที่วัดผลได้</p>
|
||||
<h1 class="text-5xl md:text-7xl font-bold mb-8 leading-tight">
|
||||
เว็บไซต์ฟรี มีจริง!
|
||||
<br />
|
||||
<span class="text-primary">จ่ายแค่ค่า Server รายปี</span>
|
||||
</h1>
|
||||
<p class="text-2xl md:text-3xl mb-10 max-w-3xl mx-auto text-gray-100">
|
||||
SMEs ไทยไม่ต้องง้องบทำเว็บหลักหมื่นอีกต่อไป moreminimore มอบเว็บไซต์ WordPress มืออาชีพให้ฟรี
|
||||
คุณจ่ายเพียงค่า Server รายปีเท่านั้น พร้อม AI Agents ช่วยทำงานให้รวดเร็ว 10 เท่า
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-5 justify-center">
|
||||
<a href="tel:0809955945" class="btn-accent text-xl shadow-xl">📞 ปรึกษาผู้เชี่ยวชาญ</a>
|
||||
<a href="#services" class="btn-secondary text-xl shadow-xl">ดูบริการของเรา</a>
|
||||
<a href="tel:0809955945" class="btn-accent text-xl shadow-xl">
|
||||
📞 ปรึกษาฟรีวันนี้
|
||||
</a>
|
||||
<a href="#services" class="bg-white text-secondary px-8 py-4 rounded-full font-bold text-xl hover:bg-gray-100 transition shadow-xl inline-flex items-center justify-center gap-2">
|
||||
ดูบริการของเรา
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-8 text-gray-200 text-base">✅ ใช้แล้ว 50+ ธุรกิจ</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section - 4 Services -->
|
||||
<section id="services" class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl md:text-5xl font-bold mb-4 text-secondary">บริการของเรา</h2>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">เพื่อตอบโจทย์ของลูกค้า</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto">
|
||||
<!-- Service 1: Website Development -->
|
||||
<div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
|
||||
<div class="h-64 relative">
|
||||
<img src="/images/hero/training-ai.png" alt="Website" class="w-full h-full object-cover" loading="lazy" />
|
||||
<div class="absolute inset-0 bg-accent-teal opacity-90"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center text-8xl">💻</div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3 class="text-2xl font-bold mb-3">พัฒนาเว็บไซต์</h3>
|
||||
<p class="text-gray-600 mb-4">บริการพัฒนาเว็บไซต์ E-Commerce สำหรับธุรกิจ โดยคำนึงถึง UX/UI และการเชื่อมต่อกับเทคโนโลยีในอนาคต</p>
|
||||
<a href="/website-development" class="text-accent-blue font-medium hover:underline flex items-center gap-2">รายละเอียด →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service 2: AI Automation -->
|
||||
<div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
|
||||
<div class="h-64 relative">
|
||||
<img src="/images/hero/chatbot-ai.png" alt="AI Automation" class="w-full h-full object-cover" loading="lazy" />
|
||||
<div class="absolute inset-0 gradient-ai opacity-90"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center text-8xl">🤖</div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3 class="text-2xl font-bold mb-3">AI Automation</h3>
|
||||
<p class="text-gray-600 mb-4">บริการให้คำปรึกษาในการวางระบบ AI Automation และ Chatbot โดยใช้ AI ที่เหมาะสม Partner กับระบบบอทที่สามารถปิดการขายได้ด้วยตัวเอง</p>
|
||||
<a href="/ai-automation" class="text-accent-blue font-medium hover:underline flex items-center gap-2">รายละเอียด →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service 3: App Development -->
|
||||
<div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
|
||||
<div class="h-64 relative">
|
||||
<img src="/images/hero/strategy-ai.png" alt="App" class="w-full h-full object-cover" loading="lazy" />
|
||||
<div class="absolute inset-0 gradient-primary opacity-90"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center text-8xl">📲</div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3 class="text-2xl font-bold mb-3">พัฒนาแอปพลิเคชัน</h3>
|
||||
<p class="text-gray-600 mb-4">บริการพัฒนาแอปพลิเคชัน เพื่อตอบโจทย์ลูกค้าที่ต้องการทำตลาดจากอุปกรณ์โมบายต่าง ๆ</p>
|
||||
<a href="/app-development" class="text-accent-blue font-medium hover:underline flex items-center gap-2">รายละเอียด →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service 4: Marketing Consult -->
|
||||
<div class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
|
||||
<div class="h-64 relative">
|
||||
<img src="/images/hero/automation-ai.png" alt="Marketing" class="w-full h-full object-cover" loading="lazy" />
|
||||
<div class="absolute inset-0 bg-accent-purple opacity-90"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center text-8xl">📱</div>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3 class="text-2xl font-bold mb-3">ที่ปรึกษาการตลาดออนไลน์</h3>
|
||||
<p class="text-gray-600 mb-4">บริการให้คำปรึกษาในการวางกลยุทธ์การตลาดออนไลน์ โดยใช้ข้อมูลขององค์กรเป็นพื้นฐาน</p>
|
||||
<a href="/online-marketing-consult" class="text-accent-blue font-medium hover:underline flex items-center gap-2">รายละเอียด →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Strategy Section -->
|
||||
<!-- Why Choose Us -->
|
||||
<section class="py-20 bg-gray-light">
|
||||
<div class="container mx-auto px-4">
|
||||
<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="Strategy" class="rounded-lg shadow-xl w-full" loading="lazy" width="500" height="500" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-4xl font-bold mb-6 text-secondary">เพราะแต่ละธุรกิจ มี<br /><span class="text-accent-blue">จุดแข็งและจุดอ่อน</span> ที่ไม่เหมือนกัน</h2>
|
||||
<p class="text-lg text-gray-600 mb-8">กลยุทธ์การตลาดออนไลน์จากเรา จะมีแนวคิดพื้นฐาน คือ การประหยัด ต้นทุน และเพิ่มโอกาสในการขายให้กับลูกค้า</p>
|
||||
<a href="#contactform" class="btn-secondary text-lg inline-block">สนใจติดต่อเรา</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Process Section -->
|
||||
<section id="process" class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl md:text-5xl font-bold mb-4 text-secondary">กระบวนการทำงาน</h2>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">4 ขั้นตอนง่ายๆ สู่ความสำเร็จ</p>
|
||||
<h2 class="text-4xl md:text-5xl font-bold mb-4">ทำไมต้อง moreminimore?</h2>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">เพราะเราเข้าใจว่า SMEs ไทยมีงบจำกัด แต่ต้องการเว็บคุณภาพ</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
|
||||
<div class="text-center p-8 bg-gray-light rounded-2xl card-hover">
|
||||
<div class="w-20 h-20 mx-auto mb-6 rounded-full gradient-primary flex items-center justify-center text-4xl font-bold text-white shadow-xl">1</div>
|
||||
<h3 class="text-2xl font-bold mb-3">วิเคราะห์</h3>
|
||||
<p class="text-gray-600">ศึกษาธุรกิจ วิเคราะห์ปัญหา หาโอกาส</p>
|
||||
<div class="bg-white p-8 rounded-2xl shadow-md text-center card-hover">
|
||||
<div class="text-5xl mb-4">✅</div>
|
||||
<h3 class="text-xl font-bold mb-3">เว็บฟรี</h3>
|
||||
<p class="text-gray-600">ไม่เสียค่าทำเว็บล่วงหน้า จ่ายแค่ค่า Server รายปี</p>
|
||||
</div>
|
||||
<div class="text-center p-8 bg-gray-light rounded-2xl card-hover">
|
||||
<div class="w-20 h-20 mx-auto mb-6 rounded-full gradient-ai flex items-center justify-center text-4xl font-bold text-white shadow-xl">2</div>
|
||||
<h3 class="text-2xl font-bold mb-3">วางแผน</h3>
|
||||
<p class="text-gray-600">ออกแบบกลยุทธ์ Roadmap ที่ชัดเจน</p>
|
||||
<div class="bg-white p-8 rounded-2xl shadow-md text-center card-hover">
|
||||
<div class="text-5xl mb-4">⚡</div>
|
||||
<h3 class="text-xl font-bold mb-3">ใช้ AI Agents</h3>
|
||||
<p class="text-gray-600">งานเร็ว คุณภาพสูง ราคาเข้าถึงได้</p>
|
||||
</div>
|
||||
<div class="text-center p-8 bg-gray-light rounded-2xl card-hover">
|
||||
<div class="w-20 h-20 mx-auto mb-6 rounded-full bg-accent-purple flex items-center justify-center text-4xl font-bold text-white shadow-xl">3</div>
|
||||
<h3 class="text-2xl font-bold mb-3">ดำเนินการ</h3>
|
||||
<p class="text-gray-600">ติดตั้งระบบ ฝึกอบรมทีม เริ่มใช้งาน</p>
|
||||
<div class="bg-white p-8 rounded-2xl shadow-md text-center card-hover">
|
||||
<div class="text-5xl mb-4">🚀</div>
|
||||
<h3 class="text-xl font-bold mb-3">ดูแลครบวงจร</h3>
|
||||
<p class="text-gray-600">ตั้งแต่ทำเว็บจนธุรกิจเติบโต</p>
|
||||
</div>
|
||||
<div class="text-center p-8 bg-gray-light rounded-2xl card-hover">
|
||||
<div class="w-20 h-20 mx-auto mb-6 rounded-full bg-accent-teal flex items-center justify-center text-4xl font-bold text-white shadow-xl">4</div>
|
||||
<h3 class="text-2xl font-bold mb-3">วัดผล</h3>
|
||||
<p class="text-gray-600">ติดตามผล ปรับปรุงอย่างต่อเนื่อง</p>
|
||||
<div class="bg-white p-8 rounded-2xl shadow-md text-center card-hover">
|
||||
<div class="text-5xl mb-4">🤝</div>
|
||||
<h3 class="text-xl font-bold mb-3">เข้าใจ SMEs</h3>
|
||||
<p class="text-gray-600">เราคือ SMEs เหมือนกัน รู้ว่าอะไรสำคัญ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section - 3 Services (New Design) -->
|
||||
<section id="services" class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl md:text-5xl font-bold mb-4">บริการของเรา</h2>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">3 โซลูชัน ครบทุกความต้องการด้าน IT ของธุรกิจคุณ</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
||||
<!-- Service 1: Web Development -->
|
||||
<div class="service-card">
|
||||
<div class="text-6xl mb-4">🌐</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Web Development</h3>
|
||||
<p class="text-gray-600 mb-4">รับทำเว็บไซต์ WordPress มืออาชีพ ออกแบบทันสมัย รองรับทุกอุปกรณ์ SEO-ready</p>
|
||||
<ul class="space-y-2 text-gray-600 mb-6">
|
||||
<li class="flex items-start gap-2"><span class="text-primary">✓</span> เว็บไซต์ WordPress มืออาชีพ</li>
|
||||
<li class="flex items-start gap-2"><span class="text-primary">✓</span> ออกแบบ Responsive</li>
|
||||
<li class="flex items-start gap-2"><span class="text-primary">✓</span> SEO-ready</li>
|
||||
<li class="flex items-start gap-2"><span class="text-primary">✓</span> <strong>ฟรีค่าทำเว็บ</strong></li>
|
||||
</ul>
|
||||
<a href="/website-development" class="text-secondary font-medium hover:underline flex items-center gap-2">ดูรายละเอียด →</a>
|
||||
</div>
|
||||
|
||||
<!-- Service 2: AI Automation -->
|
||||
<div class="service-card">
|
||||
<div class="text-6xl mb-4">🤖</div>
|
||||
<h3 class="text-2xl font-bold mb-3">AI Automation Setup</h3>
|
||||
<p class="text-gray-600 mb-4">ตั้งค่าระบบอัตโนมัติลดงานซ้ำซ้อน ประหยัดเวลาทีม เพิ่มประสิทธิภาพ</p>
|
||||
<ul class="space-y-2 text-gray-600 mb-6">
|
||||
<li class="flex items-start gap-2"><span class="text-primary">✓</span> วิเคราะห์กระบวนการทำงาน</li>
|
||||
<li class="flex items-start gap-2"><span class="text-primary">✓</span> ตั้งค่า Chatbot, Email Auto</li>
|
||||
<li class="flex items-start gap-2"><span class="text-primary">✓</span> ประหยัดเวลาทีม 30-50%</li>
|
||||
<li class="flex items-start gap-2"><span class="text-primary">✓</span> อบรมทีมใช้งาน</li>
|
||||
</ul>
|
||||
<a href="/ai-automation" class="text-secondary font-medium hover:underline flex items-center gap-2">ดูรายละเอียด →</a>
|
||||
</div>
|
||||
|
||||
<!-- Service 3: AI Consult -->
|
||||
<div class="service-card">
|
||||
<div class="text-6xl mb-4">💡</div>
|
||||
<h3 class="text-2xl font-bold mb-3">AI Consult & Implementation</h3>
|
||||
<p class="text-gray-600 mb-4">ที่ปรึกษา AI ช่วยคุณนำเทคโนโลยีไปใช้จริง ได้ผลลัพธ์จับต้องได้</p>
|
||||
<ul class="space-y-2 text-gray-600 mb-6">
|
||||
<li class="flex items-start gap-2"><span class="text-primary">✓</span> ประเมินความพร้อมธุรกิจ</li>
|
||||
<li class="flex items-start gap-2"><span class="text-primary">✓</span> แนะนำ Use Cases ที่เหมาะสม</li>
|
||||
<li class="flex items-start gap-2"><span class="text-primary">✓</span> วางแผน Implementation</li>
|
||||
<li class="flex items-start gap-2"><span class="text-primary">✓</span> ติดตั้งและ Support</li>
|
||||
</ul>
|
||||
<a href="/ai-consult" class="text-secondary font-medium hover:underline flex items-center gap-2">ดูรายละเอียด →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-12">
|
||||
<a href="/services" class="btn-secondary text-xl">ดูบริการทั้งหมด</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- How It Works (3 Steps from New Design) -->
|
||||
<section id="process" class="py-20 bg-gray-light">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl md:text-5xl font-bold mb-4">3 ขั้นตอน ง่ายๆ ได้เว็บพร้อมใช้</h2>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">เราทำให้กระบวนการทำเว็บเป็นเรื่องง่าย โปร่งใส และรวดเร็ว</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
||||
<div class="process-step-card">
|
||||
<div class="w-20 h-20 mx-auto mb-6 rounded-full gradient-secondary flex items-center justify-center text-4xl font-bold text-white">1</div>
|
||||
<h3 class="text-2xl font-bold mb-3">📞 ปรึกษาฟรี</h3>
|
||||
<p class="text-gray-600">บอกความต้องการ เราแนะนำโซลูชันที่เหมาะสม ไม่มีขายกดดัน</p>
|
||||
</div>
|
||||
<div class="process-step-card">
|
||||
<div class="w-20 h-20 mx-auto mb-6 rounded-full gradient-primary flex items-center justify-center text-4xl font-bold text-white">2</div>
|
||||
<h3 class="text-2xl font-bold mb-3">⚡ พัฒนาเว็บ</h3>
|
||||
<p class="text-gray-600">ทีมงาน + AI Agents สร้างเว็บให้คุณภายในเวลาอันสั้น</p>
|
||||
</div>
|
||||
<div class="process-step-card">
|
||||
<div class="w-20 h-20 mx-auto mb-6 rounded-full bg-accent-green flex items-center justify-center text-4xl font-bold text-white">3</div>
|
||||
<h3 class="text-2xl font-bold mb-3">🚀 ใช้งานจริง</p>
|
||||
<p class="text-gray-600">เว็บพร้อมขาย พร้อมโปรโมท พร้อมเติบโต</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-12">
|
||||
<a href="/process" class="text-secondary font-medium hover:underline text-lg">ดูขั้นตอนการทำงานโดยละเอียด →</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Preview -->
|
||||
<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-4xl md:text-5xl font-bold mb-6">เกี่ยวกับ moreminimore</h2>
|
||||
<p class="text-xl text-gray-600 mb-8">
|
||||
เราคือบริษัท IT Services จากสมุทรสาคร ที่เชื่อว่า SMEs ไทย ก็ควรมีเว็บไซต์คุณภาพในราคาที่จับต้องได้
|
||||
ใช้ AI Agents (OpenClaw) ช่วยทำงานให้รวดเร็ว ลดต้นทุน ส่งมอบงานไว
|
||||
</p>
|
||||
<a href="/about-us" class="text-secondary font-medium hover:underline text-lg">อ่านเกี่ยวกับเรา →</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section id="contactform" class="py-20 gradient-ai text-white">
|
||||
<section class="py-20 gradient-cta text-white">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-4xl md:text-6xl font-bold mb-6">พร้อมเปลี่ยนองค์กรด้วย AI หรือยัง?</h2>
|
||||
<p class="text-2xl text-gray-100 mb-10 max-w-3xl mx-auto">ปรึกษาผู้เชี่ยวชาญฟรี</p>
|
||||
<h2 class="text-4xl md:text-6xl font-bold mb-6">พร้อมเริ่มหรือยัง?</h2>
|
||||
<p class="text-2xl text-gray-100 mb-10 max-w-3xl mx-auto">
|
||||
อย่าให้งบประมาณเป็นอุปสรรคต่อการเติบโตของธุรกิจคุณ
|
||||
<br />ปรึกษาฟรี ไม่มีค่าใช้จ่ายใดๆ ทั้งสิ้น
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-5 justify-center">
|
||||
<a href="tel:0809955945" class="bg-white text-accent-blue px-8 py-4 rounded-full font-bold text-xl hover:bg-gray-100 transition shadow-xl inline-flex items-center justify-center gap-2">📞 080-995-5945</a>
|
||||
<a href="https://line.me/" target="_blank" rel="noopener noreferrer" class="bg-green-500 text-white px-8 py-4 rounded-full font-bold text-xl hover:bg-green-600 transition shadow-xl inline-flex items-center justify-center gap-2">💬 เพิ่ม Line</a>
|
||||
<a href="https://line.me/" target="_blank" rel="noopener noreferrer" class="bg-[#06C755] text-white px-8 py-4 rounded-full font-bold text-xl hover:bg-green-600 transition shadow-xl inline-flex items-center justify-center gap-2">
|
||||
💬 ทัก Line
|
||||
</a>
|
||||
<a href="tel:0809955945" class="bg-white text-secondary px-8 py-4 rounded-full font-bold text-xl hover:bg-gray-100 transition shadow-xl inline-flex items-center justify-center gap-2">
|
||||
📞 โทรเลย
|
||||
</a>
|
||||
</div>
|
||||
<p class="mt-6 text-gray-200 text-base">หรืออีเมลมาที่ contact@moreminimore.com</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Floating Contact Button -->
|
||||
<div class="floating-contact">
|
||||
<a href="https://line.me/" target="_blank" rel="noopener noreferrer" class="floating-contact-btn bg-[#06C755] text-white" title="ทัก Line">
|
||||
<svg class="w-8 h-8" 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.452z"/></svg>
|
||||
</a>
|
||||
<a href="tel:0809955945" class="floating-contact-btn bg-secondary text-white" title="โทรเลย">
|
||||
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 00-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
---
|
||||
|
||||
<Layout title="ที่ปรึกษาการตลาดออนไลน์ | MoreminiMore">
|
||||
<section class="relative py-32 bg-gradient-primary text-white overflow-hidden">
|
||||
<div class="absolute inset-0 opacity-20">
|
||||
<img src="/images/hero/automation-ai.png" alt="Marketing" class="w-full h-full object-cover" loading="eager" />
|
||||
</div>
|
||||
<div class="container mx-auto px-4 relative z-10">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<div class="text-8xl mb-6">📱</div>
|
||||
<h1 class="text-5xl md:text-7xl font-bold mb-8">ที่ปรึกษาการตลาดออนไลน์</h1>
|
||||
<p class="text-2xl text-gray-100 mb-10">บริการให้คำปรึกษาในการวางกลยุทธ์การตลาดออนไลน์ โดยใช้ข้อมูลขององค์กรเป็นพื้นฐาน</p>
|
||||
<div class="flex flex-col sm:flex-row gap-5 justify-center">
|
||||
<a href="tel:0809955945" class="bg-white text-secondary px-8 py-4 rounded-full font-bold text-xl hover:bg-gray-100 transition shadow-xl inline-flex items-center justify-center gap-2">📞 080-995-5945</a>
|
||||
<a href="https://line.me/" target="_blank" rel="noopener noreferrer" class="bg-green-500 text-white px-8 py-4 rounded-full font-bold text-xl hover:bg-green-600 transition shadow-xl inline-flex items-center justify-center gap-2">💬 เพิ่ม Line</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto px-4 max-w-5xl">
|
||||
<h2 class="text-4xl font-bold mb-8 text-center text-secondary">บริการที่ปรึกษาการตลาดออนไลน์</h2>
|
||||
<div class="prose prose-lg max-w-none">
|
||||
<p class="text-xl text-gray-600 mb-8">
|
||||
บริการให้คำปรึกษาในการวางกลยุทธ์การตลาดออนไลน์ โดยใช้ข้อมูลขององค์กรเป็นพื้นฐาน บริการนี้ เหมาะสำหรับองค์กรที่มีทีมการตลาดในการสร้างสื่ออยู่แล้ว
|
||||
</p>
|
||||
|
||||
<h3 class="text-2xl font-bold mt-12 mb-6 text-accent-blue">สิ่งที่คุณจะได้รับ</h3>
|
||||
<ul class="space-y-4 mb-8">
|
||||
<li class="flex items-start gap-4">
|
||||
<span class="text-primary text-2xl">✓</span>
|
||||
<span><strong>กลยุทธ์ที่วัดผลได้:</strong> วางแผนการตลาดโดยใช้ข้อมูลจริง</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<span class="text-primary text-2xl">✓</span>
|
||||
<span><strong>ประหยัดต้นทุน:</strong> เน้นประสิทธิภาพและการประหยัด</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-4">
|
||||
<span class="text-primary text-2xl">✓</span>
|
||||
<span><strong>เพิ่มโอกาสขาย:</strong> ระบบช่วยหาลูกค้าได้ง่ายขึ้น</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-20 gradient-primary text-white">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-4xl font-bold mb-6">สนใจบริการนี้?</h2>
|
||||
<div class="flex flex-col sm:flex-row gap-5 justify-center">
|
||||
<a href="tel:0809955945" class="bg-white text-secondary px-8 py-4 rounded-full font-bold text-xl hover:bg-gray-100 transition shadow-xl">📞 080-995-5945</a>
|
||||
<a href="https://line.me/" class="bg-green-500 text-white px-8 py-4 rounded-full font-bold text-xl hover:bg-green-600 transition shadow-xl">💬 เพิ่ม Line</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
@@ -1,21 +1,30 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-primary: #fed400;
|
||||
/* Primary Colors - Blend of old and new */
|
||||
--color-primary: #fed400; /* Yellow - kept from current */
|
||||
--color-primary-hover: #e5c000;
|
||||
--color-primary-light: #fff4b3;
|
||||
--color-secondary: #000000;
|
||||
--color-secondary-light: #1a1a1a;
|
||||
--color-accent-blue: #2563eb;
|
||||
--color-accent-blue-hover: #1d4ed8;
|
||||
--color-accent-purple: #7c3aed;
|
||||
|
||||
/* Secondary Colors - From new design */
|
||||
--color-secondary: #2563EB; /* Blue - ความน่าเชื่อถือ, เทคโนโลยี */
|
||||
--color-secondary-hover: #1d4ed8;
|
||||
--color-accent-purple: #7C3AED; /* Purple - AI, Innovation */
|
||||
--color-accent-purple-hover: #6d28d9;
|
||||
|
||||
/* Accent Colors */
|
||||
--color-accent-green: #10B981; /* Green - เติบโต, ความสำเร็จ */
|
||||
--color-accent-green-hover: #059669;
|
||||
--color-accent-teal: #0891b2;
|
||||
--color-gray-light: #f9fafb;
|
||||
|
||||
/* Neutral Colors */
|
||||
--color-gray-light: #F3F4F6; /* From new design */
|
||||
--color-gray: #6b7280;
|
||||
--color-gray-dark: #374151;
|
||||
--color-gray-dark: #1F2937; /* From new design */
|
||||
--color-text: #0f0f0f;
|
||||
--color-white: #ffffff;
|
||||
--color-white: #FFFFFF;
|
||||
|
||||
/* Fonts */
|
||||
--font-sans: 'Noto Sans Thai', system-ui, sans-serif;
|
||||
--font-display: 'Kanit', var(--font-sans);
|
||||
}
|
||||
@@ -26,47 +35,115 @@
|
||||
font-family: var(--font-sans);
|
||||
color: var(--color-text);
|
||||
line-height: 1.7;
|
||||
background: var(--color-white);
|
||||
background: var(--color-gray-light);
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 0.75em;
|
||||
color: var(--color-gray-dark);
|
||||
}
|
||||
p { margin-bottom: 1.25em; font-size: 1.0625rem; }
|
||||
* { transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }
|
||||
/* Glass Morphism */
|
||||
.glass { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }
|
||||
.glass-dark { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); }
|
||||
|
||||
/* Card Hover Effects */
|
||||
.card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); }
|
||||
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
/* Gradient Backgrounds */
|
||||
.gradient-primary { background: linear-gradient(135deg, var(--color-primary) 0%, #ffd700 100%); }
|
||||
.gradient-ai { background: linear-gradient(135deg, var(--color-accent-blue) 0%, var(--color-accent-purple) 100%); }
|
||||
.gradient-hero { background: linear-gradient(135deg, #fef3c7 0%, #e0e7ff 50%, #f3e8ff 100%); }
|
||||
.btn-primary { background-color: var(--color-primary); color: var(--color-secondary); padding: 0.75rem 2rem; border-radius: 9999px; font-weight: 700; transition: all 0.3s ease; }
|
||||
.btn-primary:hover { background-color: var(--color-primary-hover); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(254, 212, 0, 0.3); }
|
||||
.btn-secondary { background-color: var(--color-secondary); color: var(--color-white); padding: 0.75rem 2rem; border-radius: 9999px; font-weight: 700; transition: all 0.3s ease; }
|
||||
.btn-secondary:hover { background-color: var(--color-secondary-light); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); }
|
||||
.btn-accent { background: linear-gradient(135deg, var(--color-accent-blue), var(--color-accent-purple)); color: var(--color-white); padding: 0.75rem 2rem; border-radius: 9999px; font-weight: 700; transition: all 0.3s ease; }
|
||||
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(37, 99, 235, 0.4); }
|
||||
.gradient-secondary { background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent-purple) 100%); }
|
||||
.gradient-hero { background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%); }
|
||||
.gradient-cta { background: linear-gradient(135deg, var(--color-accent-purple) 0%, var(--color-accent-green) 100%); }
|
||||
|
||||
/* Button Styles */
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-secondary);
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 9999px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(254, 212, 0, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: linear-gradient(135deg, var(--color-secondary), var(--color-accent-purple));
|
||||
color: var(--color-white);
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 9999px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.4);
|
||||
}
|
||||
|
||||
.btn-accent {
|
||||
background-color: var(--color-accent-green);
|
||||
color: var(--color-white);
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 9999px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.btn-accent:hover {
|
||||
background-color: var(--color-accent-green-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(16, 185, 129, 0.4);
|
||||
}
|
||||
|
||||
/* Section Spacing */
|
||||
.section-padding { padding: 5rem 1rem; }
|
||||
@media (min-width: 768px) { .section-padding { padding: 6rem 2rem; } }
|
||||
@media (min-width: 1024px) { .section-padding { padding: 8rem 4rem; } }
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* Text Colors */
|
||||
.text-primary { color: var(--color-primary); }
|
||||
.text-secondary { color: var(--color-secondary); }
|
||||
.text-accent-blue { color: var(--color-accent-blue); }
|
||||
.text-accent-purple { color: var(--color-accent-purple); }
|
||||
.text-accent-green { color: var(--color-accent-green); }
|
||||
|
||||
/* Background Colors */
|
||||
.bg-primary { background-color: var(--color-primary); }
|
||||
.bg-secondary { background-color: var(--color-secondary); }
|
||||
.bg-accent-blue { background-color: var(--color-accent-blue); }
|
||||
.bg-accent-purple { background-color: var(--color-accent-purple); }
|
||||
.bg-accent-green { background-color: var(--color-accent-green); }
|
||||
.bg-gray-light { background-color: var(--color-gray-light); }
|
||||
|
||||
/* Hover Effects */
|
||||
.hover\:bg-primary-hover:hover { background-color: var(--color-primary-hover); }
|
||||
|
||||
/* Animation Utilities */
|
||||
.animate-float { animation: float 6s ease-in-out infinite; }
|
||||
.animate-float-delayed { animation: float 6s ease-in-out 3s infinite; }
|
||||
|
||||
/* Fade In Animation */
|
||||
.fade-in { animation: fadeIn 0.6s ease-out; }
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
@@ -74,23 +151,83 @@
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
/* Process Section - Fixed connector line positioning */
|
||||
.process-step {
|
||||
position: relative;
|
||||
}
|
||||
.process-step-number {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.process-step-connector {
|
||||
position: absolute;
|
||||
top: 2.5rem;
|
||||
left: calc(100% + 1rem);
|
||||
width: calc(100% - 6rem);
|
||||
height: 2px;
|
||||
background: linear-gradient(to right, var(--color-primary), transparent);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.parallax { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }
|
||||
/* Floating Contact Button */
|
||||
.floating-contact {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.floating-contact-btn {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.floating-contact-btn:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Process Step Cards */
|
||||
.process-step-card {
|
||||
background: var(--color-white);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.process-step-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Sticky Header */
|
||||
.sticky-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Service Card */
|
||||
.service-card {
|
||||
background: var(--color-white);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Parallax Effect */
|
||||
.parallax {
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user