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

Redesign: Complete AI transformation with new branding

Browse Source 
Features:
- New 5-color palette (Yellow, Black, Blue, Purple, Teal)
- White footer with updated navigation
- Homepage redesigned with Hero, Tech Stack, Process, FAQ, Blog sections
- 4 new AI service pages (Strategy, Automation, Training, Analytics)
- Modern effects: glass morphism, hover animations, gradients
- Removed all 'รับปรึกษา ฟรี' CTAs, replaced with Phone/Line
- Updated content to AI Transformation theme
- Port changed to 80 for Easypanel deployment

Breaking Changes:
- Old service pages removed (replaced with AI-focused services)
- Layout structure updated with new color variables
- CSS completely rewritten with new design system
This commit is contained in:
Kunthawat Greethong
2026-03-04 00:15:08 +07:00
parent 80e0c0406f
commit 34e5625a17
12 changed files with 848 additions and 556 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/layouts/Layout.astro
View File

@@ -6,7 +6,7 @@ interface Props {
description?: string;
}
const { title = 'MoreminiMore - เพิ่มยอดขายของลูกค้ามากที่สุด', description = 'เราให้คำปรึกษาด้านกลยุทธ์การตลาดโดยใช้ข้อมูลเป็นพื้นฐาน พัฒนาศักยภาพของบุคลากรให้สูงขึ้น เพื่อเพิ่มยอดขายให้กับลูกค้าให้มากที่สุด' } = Astro.props;
const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI เพิ่มยอดขายด้วยข้อมูล', description = 'เราให้คำปรึกษาด้าน AI Transformation กลยุทธ์การตลาดโดยใช้ข้อมูลเป็นพื้นฐาน พัฒนาศักยภาพของบุคลากรให้สูงขึ้น เพื่อเพิ่มยอดขายให้กับลูกค้าให้มากที่สุด' } = Astro.props;
---
<!doctype html>
@@ -65,15 +65,9 @@ const { title = 'MoreminiMore - เพิ่มยอดขายของลู
</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>
<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>
@@ -92,12 +86,13 @@ const { title = 'MoreminiMore - เพิ่มยอดขายของลู
</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 href="/#services" class="hover:text-accent-blue transition font-medium">บริการของเรา</a>
<a href="/#process" class="hover:text-accent-blue transition font-medium">กระบวนการ</a>
<a href="/category/seo" class="hover:text-accent-blue transition font-medium">เรื่องน่ารู้</a>
<a href="/contact-us" class="hover:text-accent-blue transition font-medium">ติดต่อเรา</a>
<a href="/about-us" class="hover:text-accent-blue transition font-medium">เกี่ยวกับเรา</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>
</nav>
@@ -112,12 +107,13 @@ const { title = 'MoreminiMore - เพิ่มยอดขายของลู
<!-- 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 href="/#services" class="hover:text-accent-blue transition font-medium">บริการของเรา</a>
<a href="/#process" class="hover:text-accent-blue transition font-medium">กระบวนการ</a>
<a href="/category/seo" class="hover:text-accent-blue transition font-medium">เรื่องน่ารู้</a>
<a href="/contact-us" class="hover:text-accent-blue transition font-medium">ติดต่อเรา</a>
<a href="/about-us" class="hover:text-accent-blue transition font-medium">เกี่ยวกับเรา</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 flex items-center justify-center gap-2">
📞 โทรเลย
</a>
</div>
</div>
@@ -128,7 +124,7 @@ const { title = 'MoreminiMore - เพิ่มยอดขายของลู
<slot />
</main>
<footer class="bg-black text-white py-12">
<footer class="bg-white text-black py-12 border-t-4 border-primary">
<div class="container mx-auto px-4">
<div class="grid md:grid-cols-4 gap-8">
<div>
@@ -139,49 +135,63 @@ const { title = 'MoreminiMore - เพิ่มยอดขายของลู
width="180"
height="45"
/>
<p class="text-gray-400 text-sm">
เพิ่มยอดขายของลูกค้ามากที่สุด ด้วยงบประมาณต่ำที่สุด
<p class="text-gray-600 text-sm">
ที่ปรึกษาองค์กร 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 text-2xl">📘</a>
<a href="https://twitter.com/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-accent-blue transition text-2xl">🐦</a>
<a href="https://www.linkedin.com/company/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-accent-blue transition text-2xl">💼</a>
</div>
</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>
<h3 class="font-bold mb-4 text-lg">บริการ</h3>
<ul class="space-y-2 text-sm text-gray-600">
<li><a href="/ai-strategy-consult" class="hover:text-accent-blue transition">ที่ปรึกษากลยุทธ์ AI</a></li>
<li><a href="/ai-automation" class="hover:text-accent-blue transition">AI Automation</a></li>
<li><a href="/ai-training" class="hover:text-accent-blue transition">ฝึกอบรม AI</a></li>
<li><a href="/ai-analytics" class="hover:text-accent-blue transition">AI Analytics</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>
<h3 class="font-bold mb-4 text-lg">ลิงก์</h3>
<ul class="space-y-2 text-sm 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="/category/seo" class="hover:text-accent-blue transition">เรื่องน่ารู้</a></li>
<li><a href="/faq" class="hover:text-accent-blue transition">FAQ</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>
<h3 class="font-bold mb-4 text-lg">ติดต่อ</h3>
<ul class="space-y-3 text-sm 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>
<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-800 mt-8 pt-8 text-center text-sm text-gray-400">
<div class="border-t border-gray-200 mt-8 pt-8 text-center text-sm text-gray-600">
<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>
<a href="/terms-and-conditions" class="hover:text-accent-blue transition">ข้อกำหนดและเงื่อนไข</a>
<a href="/privacy-policy" class="hover:text-accent-blue transition">นโยบายความเป็นส่วนตัว</a>
</div>
<p>&copy; {new Date().getFullYear()} MoreminiMore Co.,Ltd. สงวนลิขสิทธิ์</p>
</div>

40
src/pages/ai-analytics.astro Normal file
View File

@@ -0,0 +1,40 @@
---
import Layout from '../layouts/Layout.astro'
---
<Layout title="AI Analytics | MoreminiMore - Predictive Analytics">
<section class="relative py-24 bg-accent-teal text-white overflow-hidden">
<div class="container mx-auto px-4 relative z-10">
<div class="max-w-4xl mx-auto text-center">
<div class="text-7xl mb-6">📊</div>
<h1 class="text-4xl md:text-6xl font-bold mb-8">AI Analytics</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-accent-teal px-8 py-4 rounded-full font-bold text-lg 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-lg 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-3xl font-bold mb-8 text-center text-secondary">บริการ AI Analytics</h2>
<div class="grid md:grid-cols-2 gap-8 mb-12">
<div class="bg-gray-light p-6 rounded-2xl card-hover">
<div class="text-5xl mb-4">📈</div>
<h3 class="text-2xl font-bold mb-3">Predictive Analytics</h3>
<p class="text-gray-600">ทำนายยอดขาย พฤติกรรมลูกค้า และแนวโน้มตลาด</p>
</div>
<div class="bg-gray-light p-6 rounded-2xl card-hover">
<div class="text-5xl mb-4">🎯</div>
<h3 class="text-2xl font-bold mb-3">Customer Segmentation</h3>
<p class="text-gray-600">แบ่งกลุ่มลูกค้าด้วย AI หา High-value Customers</p>
</div>
</div>
<div class="text-center">
<a href="tel:0809955945" class="btn-accent text-lg shadow-xl inline-block">📞 ปรึกษาฟรี</a>
</div>
</div>
</section>
</Layout>

55
src/pages/ai-automation.astro Normal file
View File

@@ -0,0 +1,55 @@
---
import Layout from '../layouts/Layout.astro'
---
<Layout title="AI Automation | MoreminiMore - Chatbot & Workflow">
<section class="relative py-24 gradient-primary text-white overflow-hidden">
<div class="absolute inset-0 opacity-20">
<div class="absolute top-20 right-10 w-96 h-96 bg-white rounded-full mix-blend-overlay filter blur-3xl animate-float"></div>
</div>
<div class="container mx-auto px-4 relative z-10">
<div class="max-w-4xl mx-auto text-center">
<div class="text-7xl mb-6">⚙️</div>
<h1 class="text-4xl md:text-6xl font-bold mb-8">AI Automation</h1>
<p class="text-2xl text-gray-100 mb-10">ลดงานซ้ำซ้อน เพิ่มประสิทธิภาพด้วย Chatbot, RPA และ Workflow Automation</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-lg 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-lg 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-3xl font-bold mb-8 text-center text-secondary">บริการ AI Automation</h2>
<div class="grid md:grid-cols-2 gap-8 mb-12">
<div class="glass p-6 rounded-2xl border border-gray-200 card-hover">
<div class="text-5xl mb-4">💬</div>
<h3 class="text-2xl font-bold mb-3">AI Chatbot</h3>
<p class="text-gray-600 mb-4">ตอบคำถามลูกค้าอัตโนมัติ 24/7 ลดงานบริการลูกค้า 40%</p>
<ul class="space-y-2 text-gray-700">
<li>• Facebook Messenger, LINE OA</li>
<li>• Website Chat Widget</li>
<li>• AI-powered Responses</li>
<li>• Handover to Human</li>
</ul>
</div>
<div class="glass p-6 rounded-2xl border border-gray-200 card-hover">
<div class="text-5xl mb-4">🔄</div>
<h3 class="text-2xl font-bold mb-3">Workflow Automation</h3>
<p class="text-gray-600 mb-4">อัตโนมัติกระบวนการทำงาน ลดเวลา ลดข้อผิดพลาด</p>
<ul class="space-y-2 text-gray-700">
<li>• Data Entry Automation</li>
<li>• Email Processing</li>
<li>• Document Generation</li>
<li>• Approval Workflow</li>
</ul>
</div>
</div>
<div class="text-center">
<a href="tel:0809955945" class="btn-accent text-lg shadow-xl inline-block">📞 ปรึกษาฟรี</a>
</div>
</div>
</section>
</Layout>

119
src/pages/ai-strategy-consult.astro Normal file
View File

@@ -0,0 +1,119 @@
---
import Layout from '../layouts/Layout.astro'
---
<Layout title="ที่ปรึกษากลยุทธ์ AI | MoreminiMore">
<!-- Hero Section -->
<section class="relative py-24 gradient-ai text-white overflow-hidden">
<div class="absolute inset-0 opacity-20">
<div class="absolute top-20 left-10 w-96 h-96 bg-white rounded-full mix-blend-overlay filter blur-3xl animate-float"></div>
<div class="absolute bottom-10 right-10 w-96 h-96 bg-primary rounded-full mix-blend-overlay filter blur-3xl animate-float-delayed"></div>
</div>
<div class="container mx-auto px-4 relative z-10">
<div class="max-w-4xl mx-auto text-center">
<div class="text-7xl mb-6">🎯</div>
<h1 class="text-4xl md:text-6xl font-bold mb-8">
AI Strategy Consulting
</h1>
<p class="text-2xl text-gray-100 mb-10">
วางกลยุทธ์ AI ที่สอดคล้องกับเป้าหมายธุรกิจ你的 Roadmap ที่ชัดเจน วัดผลได้
</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-lg hover:bg-gray-100 transition shadow-xl inline-flex items-center justify-center gap-2">
📞 080-995-5945
</a>
<a href="#contact" class="bg-transparent border-2 border-white text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-accent-blue transition shadow-xl inline-flex items-center justify-center gap-2">
💬 ติดต่อผ่าน Line
</a>
</div>
</div>
</div>
</section>
<!-- Content Section -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4 max-w-5xl">
<div class="prose prose-lg max-w-none">
<h2 class="text-3xl font-bold mb-6 text-secondary">บริการที่ปรึกษากลยุทธ์ AI</h2>
<p class="text-xl text-gray-600 mb-8">
การนำ AI มาใช้ในองค์กรต้องมีการวางแผนที่ดี เราช่วยคุณวิเคราะห์โอกาส กำหนดกลยุทธ์ และสร้าง Roadmap ที่ชัดเจน
</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> ประเมินสถานะปัจจุบันขององค์กร ข้อมูล และระบบ IT</span>
</li>
<li class="flex items-start gap-4">
<span class="text-primary text-2xl">✓</span>
<span><strong>หาโอกาสใช้ AI:</strong> ระบุจุดที่ AI จะสร้างมูลค่าสูงสุด</span>
</li>
<li class="flex items-start gap-4">
<span class="text-primary text-2xl">✓</span>
<span><strong>กำหนด Roadmap:</strong> แผนการดำเนินงานเป็นขั้นตอน วัดผลได้</span>
</li>
<li class="flex items-start gap-4">
<span class="text-primary text-2xl">✓</span>
<span><strong>คำนวณ ROI:</strong> ประมาณการผลตอบแทนจากการลงทุน</span>
</li>
<li class="flex items-start gap-4">
<span class="text-primary text-2xl">✓</span>
<span><strong>เลือกเทคโนโลยี:</strong> แนะนำ AI Tools และ Platform ที่เหมาะสม</span>
</li>
</ul>
<h3 class="text-2xl font-bold mt-12 mb-6 text-accent-blue">กระบวนการทำงาน</h3>
<div class="grid md:grid-cols-3 gap-6 mb-8">
<div class="glass p-6 rounded-xl border border-gray-200">
<div class="text-4xl mb-3">📊</div>
<h4 class="font-bold mb-2">1. วิเคราะห์</h4>
<p class="text-gray-600">สัมภาษณ์ทีม ศึกษาข้อมูลปัจจุบัน</p>
</div>
<div class="glass p-6 rounded-xl border border-gray-200">
<div class="text-4xl mb-3">🎯</div>
<h4 class="font-bold mb-2">2. วางแผน</h4>
<p class="text-gray-600">กำหนดกลยุทธ์และ Roadmap</p>
</div>
<div class="glass p-6 rounded-xl border border-gray-200">
<div class="text-4xl mb-3">📈</div>
<h4 class="font-bold mb-2">3. นำเสนอ</h4>
<p class="text-gray-600">รายงานผล และคำแนะนำ</p>
</div>
</div>
<div class="bg-gray-light p-8 rounded-2xl my-12">
<h3 class="text-2xl font-bold mb-4 text-accent-blue">เหมาะสำหรับ</h3>
<ul class="space-y-2 text-gray-700">
<li>• ธุรกิจที่ต้องการเริ่มต้นใช้ AI แต่ไม่รู้ว่าต้องเริ่มจาก đâu</li>
<li>• องค์กรที่ต้องการวางแผน AI ระยะยาว</li>
<li>• ผู้บริหารที่ต้องการเข้าใจโอกาสและความเสี่ยงของ AI</li>
<li>• ธุรกิจที่ต้องการคำนวณ ROI ก่อนลงทุน</li>
</ul>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section id="contact" class="py-20 gradient-hero">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-secondary">
ปรึกษาผู้เชี่ยวชาญฟรี
</h2>
<p class="text-xl text-gray-600 mb-10 max-w-2xl mx-auto">
เราพร้อมช่วยคุณวางกลยุทธ์ AI ที่วัดผลได้
</p>
<div class="flex flex-col sm:flex-row gap-5 justify-center">
<a href="tel:0809955945" class="btn-secondary text-lg shadow-xl">
📞 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-lg hover:bg-green-600 transition shadow-xl inline-flex items-center justify-center gap-2">
💬 เพิ่ม Line
</a>
</div>
</div>
</section>
</Layout>

45
src/pages/ai-training.astro Normal file
View File

@@ -0,0 +1,45 @@
---
import Layout from '../layouts/Layout.astro'
---
<Layout title="ฝึกอบรม AI | MoreminiMore - AI Training for Team">
<section class="relative py-24 bg-accent-purple text-white overflow-hidden">
<div class="container mx-auto px-4 relative z-10">
<div class="max-w-4xl mx-auto text-center">
<div class="text-7xl mb-6">🎓</div>
<h1 class="text-4xl md:text-6xl font-bold mb-8">AI Training</h1>
<p class="text-2xl text-gray-100 mb-10">ฝึกอบรมทีมของคุณ ให้ใช้งาน AI Tools เป็น และประยุกต์ใช้ในงานจริง</p>
<div class="flex flex-col sm:flex-row gap-5 justify-center">
<a href="tel:0809955945" class="bg-white text-accent-purple px-8 py-4 rounded-full font-bold text-lg 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-lg 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-3xl font-bold mb-8 text-center text-secondary">หลักสูตรฝึกอบรม</h2>
<div class="grid md:grid-cols-3 gap-6 mb-12">
<div class="bg-gray-light p-6 rounded-2xl card-hover">
<div class="text-4xl mb-3">🤖</div>
<h3 class="text-xl font-bold mb-2">AI for Everyone</h3>
<p class="text-gray-600 text-sm">พื้นฐาน AI สำหรับทุกคน เข้าใจง่าย ไม่ต้องมีพื้นฐานเทคนิค</p>
</div>
<div class="bg-gray-light p-6 rounded-2xl card-hover">
<div class="text-4xl mb-3">💼</div>
<h3 class="text-xl font-bold mb-2">AI for Business</h3>
<p class="text-gray-600 text-sm">ใช้ AI ในงานธุรกิจ วิเคราะห์ข้อมูล ตัดสินใจแม่นยำ</p>
</div>
<div class="bg-gray-light p-6 rounded-2xl card-hover">
<div class="text-4xl mb-3">🛠️</div>
<h3 class="text-xl font-bold mb-2">AI Tools Masterclass</h3>
<p class="text-gray-600 text-sm">ใช้งาน ChatGPT, Midjourney, และ AI Tools ระดับโปร</p>
</div>
</div>
<div class="text-center">
<a href="tel:0809955945" class="btn-accent text-lg shadow-xl inline-block">📞 สอบถามหลักสูตร</a>
</div>
</div>
</section>
</Layout>

73
src/pages/app-development.astro
View File

@@ -1,73 +0,0 @@
---
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>

73
src/pages/chatbot-consult.astro
View File

@@ -1,73 +0,0 @@
---
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>

73
src/pages/digital-transformation-consult.astro
View File

@@ -1,73 +0,0 @@
---
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>

516
src/pages/index.astro
View File

@@ -2,168 +2,408 @@
import Layout from '../layouts/Layout.astro'
---
<Layout title="เพิ่มยอดขายกับที่ปรึกษาองค์กรดิจิตอลและการตลาดดิจิตอล | MoreminiMore">
<Layout title="ที่ปรึกษาองค์กร AI | MoreminiMore - เพิ่มยอดขายด้วย AI Transformation">
<!-- 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>
<section class="relative py-24 gradient-hero overflow-hidden">
<div class="absolute inset-0 opacity-10">
<div class="absolute top-20 left-10 w-72 h-72 bg-accent-blue rounded-full mix-blend-multiply filter blur-xl animate-float"></div>
<div class="absolute top-40 right-10 w-72 h-72 bg-accent-purple rounded-full mix-blend-multiply filter blur-xl animate-float-delayed"></div>
<div class="absolute -bottom-8 left-20 w-72 h-72 bg-primary rounded-full mix-blend-multiply filter blur-xl animate-float"></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">
เราวิเคราะห์ข้อมูลเชิงลึก เพื่อพัฒนากลยุทธ์ที่เหมาะสมกับธุรกิจของคุณโดยเฉพาะ
เพิ่มจุดแข็ง แก้จุดอ่อน และเพิ่มยอดขายอย่างยั่งยืน
<div class="container mx-auto px-4 relative z-10">
<div class="max-w-5xl mx-auto text-center">
<h1 class="text-4xl md:text-6xl lg:text-7xl font-bold mb-8 text-secondary leading-tight">
เปลี่ยนองค์กรของคุณด้วย<br />
<span class="text-accent-blue">AI Transformation</span>
</h1>
<p class="text-xl md:text-2xl text-gray-600 mb-10 max-w-3xl mx-auto">
เพิ่มยอดขาย ลดต้นทุน และยกระดับธุรกิจด้วยกลยุทธ์ AI ที่วัดผลได้ เราพร้อมพาคุณสู่ยุค AI อย่างมั่นใจ
</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">
ติดต่อเราเลย
<div class="flex flex-col sm:flex-row gap-5 justify-center">
<a href="tel:0809955945" class="btn-accent text-lg shadow-xl">
📞 ปรึกษาผู้เชี่ยวชาญ
</a>
<a href="#services" class="btn-secondary text-lg shadow-xl">
ดูบริการของเรา
</a>
</div>
</div>
</div>
</section>
<!-- Booking Section -->
<section id="contactform" class="py-20 bg-white">
<!-- Tech Stack Section -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto text-center">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-secondary">
นัดปรึกษาฟรี 1 ชั่วโมง
เทคโนโลยี AI ที่เรานำมาใช้
</h2>
<p class="text-lg text-gray-600 mb-12">
จองคิวพูดคุยกับเรา เพื่อวิเคราะห์ธุรกิจของคุณเบื้องต้น
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
เราคัดสรรเทคโนโลยี AI ที่ดีที่สุดในโลก มาประยุกต์ใช้กับธุรกิจของคุณ
</p>
</div>
<!-- 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 class="grid md:grid-cols-3 lg:grid-cols-4 gap-8">
<!-- Tech 1 -->
<div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
<div class="text-5xl mb-4">🤖</div>
<h3 class="text-xl font-bold mb-2">Machine Learning</h3>
<p class="text-gray-600 text-sm">ทำนายแนวโน้ม วิเคราะห์ข้อมูลเชิงลึก</p>
</div>
<!-- Tech 2 -->
<div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
<div class="text-5xl mb-4">💬</div>
<h3 class="text-xl font-bold mb-2">NLP / Chatbot</h3>
<p class="text-gray-600 text-sm">ประมวลผลภาษาธรรมชาติ ตอบคำถามอัตโนมัติ</p>
</div>
<!-- Tech 3 -->
<div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
<div class="text-5xl mb-4">📊</div>
<h3 class="text-xl font-bold mb-2">Predictive Analytics</h3>
<p class="text-gray-600 text-sm">วิเคราะห์ล่วงหน้า วางแผนแม่นยำ</p>
</div>
<!-- Tech 4 -->
<div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
<div class="text-5xl mb-4">👁️</div>
<h3 class="text-xl font-bold mb-2">Computer Vision</h3>
<p class="text-gray-600 text-sm">วิเคราะห์ภาพ ตรวจสอบอัตโนมัติ</p>
</div>
<!-- Tech 5 -->
<div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
<div class="text-5xl mb-4">🔄</div>
<h3 class="text-xl font-bold mb-2">RPA</h3>
<p class="text-gray-600 text-sm">อัตโนมัติกระบวนการทำงาน</p>
</div>
<!-- Tech 6 -->
<div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
<div class="text-5xl mb-4">📈</div>
<h3 class="text-xl font-bold mb-2">Business Intelligence</h3>
<p class="text-gray-600 text-sm">Dashboard แสดงผลแบบ Real-time</p>
</div>
<!-- Tech 7 -->
<div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
<div class="text-5xl mb-4">🌐</div>
<h3 class="text-xl font-bold mb-2">Generative AI</h3>
<p class="text-gray-600 text-sm">สร้างเนื้อหา อัตโนมัติด้วย AI</p>
</div>
<!-- Tech 8 -->
<div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
<div class="text-5xl mb-4">☁️</div>
<h3 class="text-xl font-bold mb-2">Cloud AI</h3>
<p class="text-gray-600 text-sm">บริการ AI บน Cloud ประสิทธิภาพสูง</p>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-20 bg-gray-light">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-secondary">
บริการที่ปรึกษาองค์กร AI
</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
บริการครบวงจร เพื่อการเปลี่ยนแปลงองค์กรสู่ยุค AI
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Service 1 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-xl card-hover">
<div class="h-48 gradient-ai flex items-center justify-center">
<div class="text-7xl">🎯</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-3">AI Strategy Consulting</h3>
<p class="text-gray-600 mb-4">วางกลยุทธ์ AI ที่สอดคล้องกับเป้าหมายธุรกิจ วิเคราะห์โอกาส และกำหนด Roadmap ที่ชัดเจน</p>
<a href="/ai-strategy-consult" class="text-accent-blue font-medium hover:underline flex items-center gap-2">
ดูรายละเอียด →
</a>
</div>
</div>
<!-- Service 2 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-xl card-hover">
<div class="h-48 gradient-primary flex items-center justify-center">
<div class="text-7xl">⚙️</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-3">AI Automation</h3>
<p class="text-gray-600 mb-4">นำ Chatbot, Workflow Automation และ RPA มาใช้ ลดงานซ้ำซ้อน เพิ่มประสิทธิภาพ</p>
<a href="/ai-automation" class="text-accent-blue font-medium hover:underline flex items-center gap-2">
ดูรายละเอียด →
</a>
</div>
</div>
<!-- Service 3 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-xl card-hover">
<div class="h-48 bg-accent-purple flex items-center justify-center">
<div class="text-7xl">🎓</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-3">AI Training</h3>
<p class="text-gray-600 mb-4">ฝึกอบรมทีมของคุณ ให้ใช้งาน AI Tools เป็น และประยุกต์ใช้ในงานจริง</p>
<a href="/ai-training" class="text-accent-blue font-medium hover:underline flex items-center gap-2">
ดูรายละเอียด →
</a>
</div>
</div>
<!-- Service 4 -->
<div class="bg-white rounded-2xl overflow-hidden shadow-xl card-hover">
<div class="h-48 bg-accent-teal flex items-center justify-center">
<div class="text-7xl">📊</div>
</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-3">AI Analytics</h3>
<p class="text-gray-600 mb-4">ใช้ AI วิเคราะห์ข้อมูล หาลูกค้าที่มีแนวโน้มซื้อสูง เพิ่มยอดขายอย่างชาญฉลาด</p>
<a href="/ai-analytics" class="text-accent-blue font-medium hover:underline flex items-center gap-2">
ดูรายละเอียด →
</a>
</div>
</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-3xl md:text-4xl font-bold mb-4 text-secondary">
กระบวนการทำงาน
</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
4 ขั้นตอนง่ายๆ สู่การเป็นองค์กร AI
</p>
</div>
<div class="grid md:grid-cols-4 gap-8">
<!-- Step 1 -->
<div class="text-center relative">
<div class="w-24 h-24 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-xl font-bold mb-3">วิเคราะห์</h3>
<p class="text-gray-600">ศึกษาธุรกิจ ปัจจุบัน วิเคราะห์ปัญหา และหาโอกาสที่ใช้ AI แก้ได้</p>
<div class="hidden md:block absolute top-12 left-full w-full h-1 bg-gradient-to-r from-primary to-transparent -translate-x-1/2"></div>
</div>
<!-- Step 2 -->
<div class="text-center relative">
<div class="w-24 h-24 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-xl font-bold mb-3">วางแผน</h3>
<p class="text-gray-600">ออกแบบกลยุทธ์ AI Roadmap ที่ชัดเจน วัดผลได้ เหมาะกับองค์กร</p>
<div class="hidden md:block absolute top-12 left-full w-full h-1 bg-gradient-to-r from-accent-blue to-transparent -translate-x-1/2"></div>
</div>
<!-- Step 3 -->
<div class="text-center relative">
<div class="w-24 h-24 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-xl font-bold mb-3">ดำเนินการ</h3>
<p class="text-gray-600">ติดตั้งระบบ AI ฝึกอบรมทีม และเริ่มใช้งานจริง</p>
<div class="hidden md:block absolute top-12 left-full w-full h-1 bg-gradient-to-r from-accent-purple to-transparent -translate-x-1/2"></div>
</div>
<!-- Step 4 -->
<div class="text-center">
<div class="w-24 h-24 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-xl font-bold mb-3">วัดผล</h3>
<p class="text-gray-600">ติดตามผล วิเคราะห์ข้อมูล ปรับปรุงอย่างต่อเนื่อง เพื่อผลลัพธ์สูงสุด</p>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="py-20 bg-gray-light">
<div class="container mx-auto px-4 max-w-5xl">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-secondary">
คำถามที่พบบ่อย
</h2>
<p class="text-xl text-gray-600">
ข้อสงสัยเกี่ยวกับการนำ AI มาใช้ในองค์กร
</p>
</div>
<div class="space-y-4">
<!-- FAQ 1 -->
<details class="group bg-white rounded-2xl shadow-md overflow-hidden">
<summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-lg hover:bg-gray-50 transition">
<span>AI Transformation คืออะไร?</span>
<span class="text-2xl group-open:rotate-45 transition">+</span>
</summary>
<div class="px-6 pb-6 text-gray-600">
AI Transformation คือกระบวนการเปลี่ยนแปลงองค์กร โดยการนำ AI มาใช้ในทุกด้าน เพื่อเพิ่มประสิทธิภาพ ลดต้นทุน และสร้างโอกาสทางธุรกิจใหม่
</div>
</details>
<!-- FAQ 2 -->
<details class="group bg-white rounded-2xl shadow-md overflow-hidden">
<summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-lg hover:bg-gray-50 transition">
<span>ธุรกิจของฉันพร้อมสำหรับ AI หรือยัง?</span>
<span class="text-2xl group-open:rotate-45 transition">+</span>
</summary>
<div class="px-6 pb-6 text-gray-600">
ธุรกิจส่วนใหญ่พร้อมใช้ AI แล้ว! เราช่วยวิเคราะห์ความพร้อม และเริ่มต้นจากจุดเล็กๆ ก่อนขยายผล
</div>
</details>
<!-- FAQ 3 -->
<details class="group bg-white rounded-2xl shadow-md overflow-hidden">
<summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-lg hover:bg-gray-50 transition">
<span>ใช้เวลานานแค่ไหนที่จะเห็นผล?</span>
<span class="text-2xl group-open:rotate-45 transition">+</span>
</summary>
<div class="px-6 pb-6 text-gray-600">
โดยทั่วไปจะเริ่มเห็นผลภายใน 1-3 เดือน สำหรับโครงการเล็กๆ และ 6-12 เดือน สำหรับโครงการใหญ่
</div>
</details>
<!-- FAQ 4 -->
<details class="group bg-white rounded-2xl shadow-md overflow-hidden">
<summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-lg hover:bg-gray-50 transition">
<span>ลงทุนเท่าไหร่?</span>
<span class="text-2xl group-open:rotate-45 transition">+</span>
</summary>
<div class="px-6 pb-6 text-gray-600">
ขึ้นอยู่กับขอบเขตโครงการ เรามีทั้งโครงการเริ่มต้นหลักหมื่น ไปจนถึงโครงการใหญ่หลักล้าน คุยรายละเอียดได้ฟรี!
</div>
</details>
<!-- FAQ 5 -->
<details class="group bg-white rounded-2xl shadow-md overflow-hidden">
<summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-lg hover:bg-gray-50 transition">
<span>พนักงานจะถูกแทนที่ด้วย AI หรือไม่?</span>
<span class="text-2xl group-open:rotate-45 transition">+</span>
</summary>
<div class="px-6 pb-6 text-gray-600">
ไม่! AI เป็นเครื่องมือช่วยงาน ไม่ใช่แทนที่คน เราฝึกอบรมให้พนักงานใช้ AI ทำงานได้ดีขึ้น
</div>
</details>
</div>
</div>
</section>
<!-- Blog Section -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-secondary">
เรื่องน่ารู้เกี่ยวกับ AI
</h2>
<p class="text-xl text-gray-600">
อัปเดตความรู้ AI ล่าสุด เพื่อธุรกิจของคุณ
</p>
</div>
<div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
<!-- Blog 1 -->
<article class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
<div class="h-48 gradient-ai flex items-center justify-center">
<div class="text-6xl">📝</div>
</div>
<div class="p-6">
<div class="text-accent-blue text-sm font-bold mb-2">AI Strategy</div>
<h3 class="text-xl font-bold mb-3 hover:text-accent-blue transition">
<a href="/blog/ai-transformation-guide">
คู่มือ AI Transformation สำหรับ SME
</a>
</h3>
<p class="text-gray-600 text-sm mb-4">
ขั้นตอนการนำ AI มาใช้ในธุรกิจขนาดกลางและย่อม เริ่มต้นอย่างไร ให้ได้ผลเร็ว
</p>
<a href="/blog/ai-transformation-guide" class="text-accent-blue font-medium hover:underline">
อ่านเพิ่มเติม →
</a>
</div>
</article>
<!-- Blog 2 -->
<article class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
<div class="h-48 gradient-primary flex items-center justify-center">
<div class="text-6xl">🤖</div>
</div>
<div class="p-6">
<div class="text-accent-blue text-sm font-bold mb-2">Chatbot</div>
<h3 class="text-xl font-bold mb-3 hover:text-accent-blue transition">
<a href="/blog/chatbot-roi">
Chatbot ช่วยเพิ่มยอดขายได้อย่างไร?
</a>
</h3>
<p class="text-gray-600 text-sm mb-4">
กรณีศึกษาจริง การใช้ Chatbot ลดต้นทุนบริการลูกค้า 40% และเพิ่มยอดขาย 25%
</p>
<a href="/blog/chatbot-roi" class="text-accent-blue font-medium hover:underline">
อ่านเพิ่มเติม →
</a>
</div>
</article>
<!-- Blog 3 -->
<article class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
<div class="h-48 bg-accent-purple flex items-center justify-center">
<div class="text-6xl">📊</div>
</div>
<div class="p-6">
<div class="text-accent-blue text-sm font-bold mb-2">Analytics</div>
<h3 class="text-xl font-bold mb-3 hover:text-accent-blue transition">
<a href="/blog/predictive-analytics">
Predictive Analytics ทำนายยอดขายล่วงหน้า
</a>
</h3>
<p class="text-gray-600 text-sm mb-4">
ใช้ Machine Learning ทำนายยอดขายล่วงหน้า 90% แม่นยำ ช่วยวางแผนสต็อกและการตลาด
</p>
<a href="/blog/predictive-analytics" class="text-accent-blue font-medium hover:underline">
อ่านเพิ่มเติม →
</a>
</div>
</article>
</div>
<div class="text-center mt-12">
<a href="/category/seo" class="btn-secondary inline-block">
ดูบทความทั้งหมด →
</a>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 bg-black text-white">
<section class="py-20 gradient-ai text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">
พร้อมเพิ่มยอดขายให้ธุรกิจของคุณแล้วหรือยัง?
<h2 class="text-3xl md:text-5xl font-bold mb-6">
พร้อมเปลี่ยนองค์กรด้วย AI หรือยัง?
</h2>
<p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
ให้เราช่วยคุณพัฒนากลยุทธ์ที่วัดผลได้ ด้วยงบประมาณที่เหมาะสม
<p class="text-xl text-gray-100 mb-10 max-w-3xl mx-auto">
ปรึกษาผู้เชี่ยวชาญฟรี เราพร้อมช่วยคุณวางกลยุทธ์ AI ที่วัดผลได้
</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 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-lg 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-lg hover:bg-green-600 transition shadow-xl inline-flex items-center justify-center gap-2">
💬 เพิ่ม Line
</a>
</div>
</div>
</section>
</Layout>

73
src/pages/online-marketing-consult.astro
View File

@@ -1,73 +0,0 @@
---
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>

73
src/pages/website-development.astro
View File

@@ -1,73 +0,0 @@
---
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>

154
src/styles/global.css
View File

@@ -1,12 +1,30 @@
@import "tailwindcss";
@theme {
/* Primary Colors */
--color-primary: #fed400;
--color-primary-hover: #e5c000;
--color-secondary: #000000;
--color-accent: #e8e8e8;
--color-text: #0f0f0f;
--color-primary-light: #fff4b3;
/* Secondary Colors */
--color-secondary: #000000;
--color-secondary-light: #1a1a1a;
/* AI/Tech Accent Colors */
--color-accent-blue: #2563eb;
--color-accent-blue-hover: #1d4ed8;
--color-accent-purple: #7c3aed;
--color-accent-purple-hover: #6d28d9;
--color-accent-teal: #0891b2;
/* Neutral Colors */
--color-gray-light: #f9fafb;
--color-gray: #6b7280;
--color-gray-dark: #374151;
--color-text: #0f0f0f;
--color-white: #ffffff;
/* Fonts */
--font-sans: 'Noto Sans Thai', system-ui, sans-serif;
--font-display: 'Kanit', var(--font-sans);
}
@@ -20,16 +38,146 @@
font-family: var(--font-sans);
color: var(--color-text);
line-height: 1.6;
background: var(--color-white);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.2;
}
/* Smooth animations */
* {
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
}
@layer components {
/* Glass Morphism */
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-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);
-webkit-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);
}
/* 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%);
}
/* Button Styles */
.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);
}
}
@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); }
/* 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-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;
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
/* Parallax Effect Class */
.parallax {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}