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

Phase 1: Homepage seamless design - add gradient transitions

Browse Source 
- Added gradient transitions between sections in global.css
- Portfolio section now has gradient-top (dark to white fade)
- Blog section now has gradient-bottom (white fade from dark)
- Reduced portfolio overlay opacity from 0.85 to 0.65
- Added border to blog cards for white-on-white visibility
- Blog cards now have primary color accent on hover
This commit is contained in:
Kunthawat Greethong
2026-05-21 14:29:31 +07:00
parent 9db1d12b9c
commit b9cd01a55f
85 changed files with 8005 additions and 4702 deletions
Download Patch File Download Diff File Expand all files Collapse all files

578
.emdash/seed.json Normal file
View File

@@ -0,0 +1,578 @@
{
"version": "1",
"collections": [
{
"slug": "pages",
"label": "Pages",
"fields": [
{ "slug": "title", "type": "string", "label": "Title" },
{ "slug": "subtitle", "type": "string", "label": "Subtitle" },
{ "slug": "badge", "type": "string", "label": "Badge" },
{ "slug": "hero_image", "type": "image", "label": "Hero Image" },
{ "slug": "theme", "type": "select", "label": "Theme", "options": ["yellow", "accent"] },
{ "slug": "show_cta", "type": "boolean", "label": "Show CTA" },
{ "slug": "cta_text", "type": "string", "label": "CTA Text" },
{ "slug": "cta_link", "type": "string", "label": "CTA Link" },
{ "slug": "variant", "type": "select", "label": "Hero Variant", "options": ["split", "centered", "text_only", "floating_cards"] },
{ "slug": "size", "type": "select", "label": "Hero Size", "options": ["full", "compact"] }
]
},
{
"slug": "services",
"label": "Services",
"fields": [
{ "slug": "title", "type": "string", "label": "Title" },
{ "slug": "subtitle", "type": "string", "label": "Subtitle" },
{ "slug": "badge", "type": "string", "label": "Badge" },
{ "slug": "hero_image", "type": "image", "label": "Hero Image" },
{ "slug": "content", "type": "portableText", "label": "Content" },
{
"slug": "features",
"type": "repeater",
"label": "Features",
"fields": [
{ "slug": "icon", "type": "string", "label": "Icon" },
{ "slug": "feature_title", "type": "string", "label": "Title" },
{ "slug": "description", "type": "string", "label": "Description" }
]
}
]
},
{
"slug": "portfolio",
"label": "Portfolio",
"fields": [
{ "slug": "name", "type": "string", "label": "Name" },
{ "slug": "url", "type": "url", "label": "URL" },
{ "slug": "category", "type": "select", "label": "Category", "options": ["webdev", "ecommerce", "marketing"] },
{ "slug": "category_label", "type": "string", "label": "Category Label" },
{ "slug": "thumbnail", "type": "image", "label": "Thumbnail" },
{ "slug": "description", "type": "text", "label": "Description" },
{
"slug": "services",
"type": "repeater",
"label": "Services",
"fields": [
{ "slug": "service_name", "type": "string", "label": "Name" }
]
}
]
},
{
"slug": "blog",
"label": "Blog",
"fields": [
{ "slug": "title", "type": "string", "label": "Title" },
{ "slug": "excerpt", "type": "string", "label": "Excerpt" },
{ "slug": "image", "type": "image", "label": "Image" },
{ "slug": "date", "type": "datetime", "label": "Date" },
{ "slug": "category", "type": "string", "label": "Category" },
{ "slug": "content", "type": "portableText", "label": "Content" }
]
},
{
"slug": "faq",
"label": "FAQ",
"fields": [
{ "slug": "category", "type": "string", "label": "Category" },
{ "slug": "question", "type": "string", "label": "Question" },
{ "slug": "answer", "type": "text", "label": "Answer" }
]
},
{
"slug": "settings",
"label": "Site Settings",
"fields": [
{ "slug": "site_name", "type": "string", "label": "Site Name" },
{ "slug": "email", "type": "string", "label": "Contact Email" },
{ "slug": "phone", "type": "string", "label": "Contact Phone" },
{ "slug": "address", "type": "text", "label": "Address" },
{ "slug": "facebook", "type": "url", "label": "Facebook URL" },
{ "slug": "line", "type": "url", "label": "LINE URL" },
{ "slug": "linkedin", "type": "url", "label": "LinkedIn URL" }
]
}
],
"content": {
"pages": [
{
"id": "page-home",
"slug": "home",
"data": {
"title": "เปลี่ยนธุรกิจของคุณ ด้วย AI และเทคโนโลยีสมัยใหม่",
"subtitle": "รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย<br>เพิ่มยอดขาย ลดต้นทุน ด้วยเทคโนโลยีล้ำสมัย",
"badge": "ดิจิทัลเอเจนซี่ในประเทศไทย",
"hero_image": "/images/hero/hero.jpg",
"theme": "yellow",
"variant": "split",
"size": "full",
"show_cta": true,
"cta_text": "เริ่มต้นวันนี้",
"cta_link": "/contact"
}
},
{
"id": "page-about",
"slug": "about",
"data": {
"title": "เกี่ยวกับ มอร์มินิมอร์",
"subtitle": "บริษัท มอร์มินิมอร์ จำกัด<br>รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย",
"badge": "เกี่ยวกับเรา",
"hero_image": "/images/hero/about.jpg",
"theme": "yellow",
"variant": "centered",
"size": "compact",
"show_cta": false
}
},
{
"id": "page-portfolio",
"slug": "portfolio",
"data": {
"title": "ผลงานของเรา",
"subtitle": "รวมผลงานพัฒนาเว็บไซต์และโปรเจกต์ที่เราภาคภูมิใจ",
"badge": "พอร์ตโฟลิโอ",
"hero_image": "/images/hero/hero.jpg",
"theme": "yellow",
"variant": "text-only",
"size": "compact",
"show_cta": false
}
},
{
"id": "page-contact",
"slug": "contact",
"data": {
"title": "พูดคุยกับเรา วันนี้เลย!",
"subtitle": "พร้อมให้คำปรึกษาและช่วยเหลือคุณ<br>ปรึกษาฟรี ไม่มีค่าใช้จ่าย",
"badge": "ติดต่อเรา",
"hero_image": "/images/hero/contact.jpg",
"theme": "yellow",
"variant": "text-only",
"size": "compact",
"show_cta": false
}
},
{
"id": "page-faq",
"slug": "faq",
"data": {
"title": "คำถามที่พบบ่อย",
"subtitle": "หาคำตอบสำหรับคำถามที่พบบ่อยเกี่ยวกับบริการของเรา",
"badge": "FAQ",
"hero_image": "/images/hero/tech-consult.jpg",
"theme": "yellow",
"variant": "centered",
"size": "compact",
"show_cta": false
}
},
{
"id": "page-privacy",
"slug": "privacy",
"data": {
"title": "นโยบายความเป็นส่วนตัว",
"subtitle": "มีผลบังคับใช้วันที่ 5 พฤษภาคม 2569",
"badge": "กฎหมาย",
"hero_image": "/images/hero/ai-automation.jpg",
"theme": "yellow",
"variant": "text-only",
"size": "compact",
"show_cta": false
}
},
{
"id": "page-terms",
"slug": "terms",
"data": {
"title": "เงื่อนไขการให้บริการ",
"subtitle": "มีผลบังคับใช้วันที่ 5 พฤษภาคม 2569",
"badge": "กฎหมาย",
"hero_image": "/images/hero/marketing-automation.jpg",
"theme": "yellow",
"variant": "text-only",
"size": "compact",
"show_cta": false
}
}
],
"services": [
{
"id": "service-webdev",
"slug": "webdev",
"data": {
"title": "พัฒนาเว็บไซต์",
"subtitle": "สร้างเว็บไซต์ที่ทันสมัย รวดเร็ว และตอบสนองความต้องการของลูกค้าของคุณ ด้วยเทคโนโลยีล่าสุดและ design ที่สวยงาม",
"badge": "บริการ",
"hero_image": "/images/hero/web-development-hero.jpg",
"feature1_icon": "⚡",
"feature1_title": "เร็วสุดใน class",
"feature1_desc": "โหลดเร็ว เพิ่ม conversion และ SEO ranking",
"feature2_icon": "📱",
"feature2_title": "Responsive ทุก device",
"feature2_desc": "แสดงผลได้ดีบน mobile tablet และ desktop",
"feature3_icon": "🎨",
"feature3_title": "Design สวยงาม",
"feature3_desc": "ออกแบบ UI/UX ที่ดึงดูดและใช้งานง่าย",
"feature4_icon": "🔒",
"feature4_title": "ปลอดภัย",
"feature4_desc": "Security ระดับสูง ป้องกันการโจมตี",
"feature5_icon": "🔍",
"feature5_title": "SEO Optimized",
"feature5_desc": "ออกแบบมาเพื่อให้ Google ชอบ",
"feature6_icon": "📊",
"feature6_title": "Analytics ในตัว",
"feature6_desc": "ติดตามผู้เข้าชมและวัดผลได้"
}
},
{
"id": "service-marketing",
"slug": "marketing",
"data": {
"title": "Marketing Automation",
"subtitle": "เพิ่มประสิทธิภาพการตลาดและลดต้นทุนด้วยระบบอัตโนมัติ ประหยัดเวลา เพิ่ม conversion วัดผลได้",
"badge": "บริการ",
"hero_image": "/images/hero/marketing-automation-hero.jpg",
"feature1_icon": "📧",
"feature1_title": "Email Automation",
"feature1_desc": "ส่ง email อัตโนมัติเมื่อ trigger ตรงกับเงื่อนไขที่กำหนด",
"feature2_icon": "💬",
"feature2_title": "Chatbot Integration",
"feature2_desc": "เชื่อมต่อ chatbot กับระบบ CRM เพื่อเก็บข้อมูลลูกค้า",
"feature3_icon": "📱",
"feature3_title": "SMS/Line Automation",
"feature3_desc": "ส่ง SMS หรือ LINE message อัตโนมัติตาม timeline",
"feature4_icon": "📊",
"feature4_title": "Analytics Dashboard",
"feature4_desc": "ติดตามผลแคมเปญและวัด ROI ได้แบบ real-time",
"feature5_icon": "🎯",
"feature5_title": "Lead Scoring",
"feature5_desc": "ให้คะแนน leads ตามพฤติกรรมเพื่อจัดลำดับความสำคัญ",
"feature6_icon": "🔄",
"feature6_title": "Workflow Automation",
"feature6_desc": "สร้าง workflow อัตโนมัติสำหรับงานที่ทำซ้ำๆ"
}
},
{
"id": "service-ai",
"slug": "ai",
"data": {
"title": "AI Automation",
"subtitle": "นำ AI มาใช้เพื่อเพิ่มยอดขายและปรับปรุงการให้บริการลูกค้า เพิ่มประสิทธิภาพ ลดต้นทุน ด้วยเทคโนโลยีล้ำสมัย",
"badge": "บริการ",
"hero_image": "/images/hero/ai-automation-hero.jpg",
"feature1_icon": "🤖",
"feature1_title": "AI Chatbot",
"feature1_desc": "Chatbot ที่ใช้ AI ตอบคำถามลูกค้าได้ 24/7 รองรับภาษาไทย",
"feature2_icon": "💬",
"feature2_title": "AI Customer Service",
"feature2_desc": "ระบบตอบคำถามอัตโนมัติด้วย AI ที่เข้าใจบริบท",
"feature3_icon": "📝",
"feature3_title": "AI Content Generation",
"feature3_desc": "สร้าง content อัตโนมัติด้วย AI ที่ SEO friendly",
"feature4_icon": "📧",
"feature4_title": "AI Email Marketing",
"feature4_desc": "ส่ง email ที่ personalized ด้วย AI ที่วิเคราะห์พฤติกรรม",
"feature5_icon": "📊",
"feature5_title": "AI Sales Prediction",
"feature5_desc": "ทำนายยอดขายและวางแผนการตลาดด้วย AI",
"feature6_icon": "🎯",
"feature6_title": "AI Lead Scoring",
"feature6_desc": "ให้คะแนน leads อัตโนมัติด้วย AI ที่เรียนรู้จากข้อมูล"
}
},
{
"id": "service-consult",
"slug": "consult",
"data": {
"title": "Tech Consult",
"subtitle": "ให้คำปรึกษาด้านเทคโนโลยีเพื่อธุรกิจของคุณ วางแผน ออกแบบ และ implement ระบบที่เหมาะสม",
"badge": "บริการ",
"hero_image": "/images/hero/tech-consult-hero.jpg",
"feature1_icon": "🔍",
"feature1_title": "Digital Audit",
"feature1_desc": "วิเคราะห์สถานะดิจิทัลปัจจุบันของธุรกิจคุณอย่างละเอียด",
"feature2_icon": "📋",
"feature2_title": "Digital Strategy",
"feature2_desc": "วางแผน digital transformation ที่เหมาะกับเป้าหมายธุรกิจ",
"feature3_icon": "🛠️",
"feature3_title": "Technology Selection",
"feature3_desc": "แนะนำเทคโนโลยีที่เหมาะสมกับ budget และความต้องการ",
"feature4_icon": "📐",
"feature4_title": "System Architecture",
"feature4_desc": "ออกแบบระบบที่ scalable และ maintainable",
"feature5_icon": "🔧",
"feature5_title": "Implementation Support",
"feature5_desc": "ดูแลและให้คำปรึกษาตลอดการ implement",
"feature6_icon": "📈",
"feature6_title": "Performance Optimization",
"feature6_desc": "ปรับปรุงประสิทธิภาพระบบให้ดีขึ้นอย่างต่อเนื่อง"
}
}
],
"portfolio": [
{
"id": "portfolio-001",
"slug": "lungfinler",
"data": {
"name": "Lungfinler",
"url": "https://lungfinler.com",
"category": "webdev",
"category_label": "พัฒนาเว็บไซต์",
"thumbnail": "/images/portfolio/lungfinler.png",
"description": "Digital Agency - บริการด้านการสร้างแบรนด์ กราฟิกดีไซน์ และถ่ายภาพสินค้าคุณภาพสูง"
}
},
{
"id": "portfolio-002",
"slug": "jetindustries",
"data": {
"name": "Jet Industries",
"url": "https://jetindustries.co.th",
"category": "webdev",
"category_label": "พัฒนาเว็บไซต์",
"thumbnail": "/images/portfolio/jetindustries.png",
"description": "ผู้ผลิตพลาสติกฉีดขึ้นรูปอย่างแม่นยำ (Precision Plastic Injection Molding) มีประสบการณ์กว่า 40 ปี"
}
},
{
"id": "portfolio-003",
"slug": "lawyernoom",
"data": {
"name": "สำนักงานกฎหมาย ตถาตา",
"url": "https://lawyernoom.com",
"category": "webdev",
"category_label": "พัฒนาเว็บไซต์",
"thumbnail": "/images/portfolio/lawyernoom.png",
"description": "สำนักงานกฎหมายโดย ทนายความ คมสัน ศรีวนิชย์ - บริการด้านคดีความ คดีแพ่ง คดีอาญา"
}
},
{
"id": "portfolio-004",
"slug": "underdog",
"data": {
"name": "Underdog Marketing",
"url": "https://underdog.run",
"category": "webdev",
"category_label": "พัฒนาเว็บไซต์",
"thumbnail": "/images/portfolio/underdog.png",
"description": "บล็อกการตลาดและการขายสไตล์ ลุยไม่ยั้ง โดย บุ้ง ดีดติ่งหู"
}
},
{
"id": "portfolio-005",
"slug": "baofuling",
"data": {
"name": "Baofuling Shop",
"url": "https://baofulingshop.com",
"category": "ecommerce",
"category_label": "อีคอมเมิร์ซ",
"thumbnail": "/images/portfolio/baofuling.png",
"description": "ร้านค้าออนไลน์ครีมบัวหิมะและผลิตภัณฑ์ความงามจีน"
}
},
{
"id": "portfolio-006",
"slug": "trainersunny",
"data": {
"name": "เทรนเนอร์ซันนี่",
"url": "https://trainersunny.com",
"category": "webdev",
"category_label": "พัฒนาเว็บไซต์",
"thumbnail": "/images/portfolio/trainersunny.png",
"description": "ผู้เชี่ยวชาญด้านการพัฒนาบุคลากรและ Soft Skill"
}
},
{
"id": "portfolio-007",
"slug": "luadjob",
"data": {
"name": "เลือดจระเข้วานิไทย",
"url": "https://เลือดจระเข้วานิไทย.com",
"category": "ecommerce",
"category_label": "อีคอมเมิร์ซ",
"thumbnail": "/images/portfolio/luadjob.png",
"description": "ตัวแทนจำหน่ายเลือดจระเข้วานิไทยอย่างเป็นทางการ"
}
},
{
"id": "portfolio-008",
"slug": "tuanthong",
"data": {
"name": "ทวนทอง 99",
"url": "https://tuanthong99.com",
"category": "ecommerce",
"category_label": "อีคอมเมิร์ซ",
"thumbnail": "/images/portfolio/tuanthong.png",
"description": "ร้านค้าออนไลน์สมุนไพรไทยคุณภาพสูง"
}
},
{
"id": "portfolio-009",
"slug": "odooportal",
"data": {
"name": "Odoo Portal",
"url": "https://odooportal.com",
"category": "marketing",
"category_label": "ที่ปรึกษาการตลาด",
"thumbnail": "/images/portfolio/odooportal.png",
"description": "ตัวแทนจำหน่าย Odoo อย่างเป็นทางการในประเทศไทย"
}
}
],
"faq": [
{
"id": "faq-001",
"slug": "service-001",
"data": { "category": "บริการ", "category_icon": "🎯", "question": "MoreminiMore ให้บริการอะไรบ้าง?", "answer": "เราให้บริการ 4 ประเภทหลัก: พัฒนาเว็บไซต์, Marketing Automation, AI Automation และ Tech Consult สำหรับธุรกิจไทย" }
},
{
"id": "faq-002",
"slug": "service-002",
"data": { "category": "บริการ", "category_icon": "🎯", "question": "สามารถสั่งทำเว็บไซต์เฉพาะประเภทได้ไหม?", "answer": "ได้ เราสามารถพัฒนาเว็บไซต์ได้ทุกประเภท ไม่ว่าจะเป็นเว็บบริษัท เว็บขายของ เว็บ Landing Page หรือระบบ Web Application" }
},
{
"id": "faq-003",
"slug": "service-003",
"data": { "category": "บริการ", "category_icon": "🎯", "question": "AI Chatbot สามารถทำอะไรได้บ้าง?", "answer": "AI Chatbot ของเราสามารถตอบคำถามลูกค้า รับออร์เดอร์ นัดหมาย และเชื่อมต่อกับระบบ CRM หรือร้านค้าออนไลน์ได้" }
},
{
"id": "faq-004",
"slug": "price-001",
"data": { "category": "ราคา", "category_icon": "💰", "question": "ราคาเริ่มต้นของการทำเว็บไซต์เท่าไหร่?", "answer": "ราคาเริ่มต้นอยู่ที่ 15,000 บาท ขึ้นอยู่กับความซับซ้อนและฟีเจอร์ที่ต้องการ เราจะประเมินและเสนอราคาหลังจากการปรึกษาฟรี" }
},
{
"id": "faq-005",
"slug": "price-002",
"data": { "category": "ราคา", "category_icon": "💰", "question": "มีราคาแพ็คเกจหรือไม่?", "answer": "มี เรามีแพ็คเกจสำหรับธุรกิจที่ต้องการเริ่มต้นอย่างง่ายๆ และแพ็คเกจสำหรับธุรกิจที่ต้องการระบบครบวงจร สามารถเลือกได้ตามความต้องการ" }
},
{
"id": "faq-006",
"slug": "price-003",
"data": { "category": "ราคา", "category_icon": "💰", "question": "ชำระเงินอย่างไร?", "answer": "รองรับการชำระเงินผ่านโอนเงินธนาคาร หรือผ่อนชำระผ่านบัตรเครดิต 3-6 งวด (มีดอกเบี้ย)" }
},
{
"id": "faq-007",
"slug": "time-001",
"data": { "category": "ระยะเวลา", "category_icon": "⏱️", "question": "ใช้เวลาพัฒนานานเท่าไหร่?", "answer": "ขึ้นอยู่กับความซับซ้อน Landing Page ใช้เวลา 1-2 สัปดาห์ เว็บไซต์ขนาดกลาง 2-4 สัปดาห์ ระบบ Web Application 4-8 สัปดาห์" }
},
{
"id": "faq-008",
"slug": "time-002",
"data": { "category": "ระยะเวลา", "category_icon": "⏱️", "question": "ถ้าต้องการด่วนได้ไหม?", "answer": "ได้ เรามีบริการด่วนพิเศษ (เพิ่มค่าใช้จ่าย 30%) สามารถส่งมอบงานได้เร็วขึ้น 50%" }
},
{
"id": "faq-009",
"slug": "support-001",
"data": { "category": "หลังการขาย", "category_icon": "💬", "question": "มีการรับประกันหรือไม่?", "answer": "เรารับประกันงาน 30 วันหลังส่งมอบ หากมีปัญหาจากการพัฒนา เราจะแก้ไขให้ฟรี" }
},
{
"id": "faq-010",
"slug": "support-002",
"data": { "category": "หลังการขาย", "category_icon": "💬", "question": "มีบริการดูแลหลังการขายไหม?", "answer": "มี เรามีแพ็คเกจดูแลรายเดือนเริ่มต้นที่ 2,000 บาท/เดือน รวมการอัพเดทเนื้อหา ปรับปรุงความปลอดภัย และ Backup" }
}
],
"blog": [
{
"id": "post-001",
"slug": "5-ways-ai-increase-sales",
"data": {
"title": "5 วิธีใช้ AI เพิ่มยอดขายให้ธุรกิจของคุณ",
"excerpt": "ค้นพบ 5 วิธีที่ AI สามารถช่วยเพิ่มยอดขายให้ธุรกิจ SMEs ไทย พร้อมตัวอย่างและแนวทางการนำไปใช้จริง",
"image": "/images/blog/5-ways-ai-increase-sales.jpg",
"date": "2026-03-11",
"category": "AI Business",
"content": {
"type": "doc",
"content": [
{ "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีที่ 1: ใช้ AI วิเคราะห์ลูกค้าและแนะนำสินค้าที่ตรงใจ" }] },
{ "type": "paragraph", "content": [{ "type": "text", "text": "หนึ่งในความสามารถที่ทรงพลังที่สุดของ AI คือการวิเคราะห์ข้อมูลลูกค้าและค้นหารูปแบบที่มนุษย์อาจมองไม่เห็น AI สามารถวิเคราะห์ว่าลูกค้าแต่ละคนชอบสินค้าประเภทไหน ซื้อในช่วงเวลาไหน และมีพฤติกรรมการซื้ออย่างไร" }] },
{ "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีที่ 2: ใช้ Chatbot ดูแลลูกค้าตลอด 24 ชั่วโมง" }] },
{ "type": "paragraph", "content": [{ "type": "text", "text": "ลูกค้าจำนวนมากต้องการได้รับคำตอบทันที ไม่ว่าจะกี่โมง แต่การจ้างพนักงานทำงาน 24 ชั่วโมงนั้นมีค่าใช้จ่ายสูง Chatbot ที่ใช้ AI สามารถตอบคำถามลูกค้าได้ตลอดเวลา โดยไม่ต้องเสียค่าล่วงเวลา" }] },
{ "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีที่ 3: ใช้ AI ส่งข้อความการตลาดในเวลาที่เหมาะสม" }] },
{ "type": "paragraph", "content": [{ "type": "text", "text": "การส่งข้อความการตลาดไม่ใช่แค่การส่งออกไปเท่านั้น แต่ต้องส่งในเวลาที่ลูกค้ามีโอกาสอ่านและตอบสนองมากที่สุด AI สามารถวิเคราะห์ว่าลูกค้าแต่ละคนมีช่วงเวลาไหนที่เปิดอ่านข้อความบ่อยที่สุด และส่งในเวลานั้น" }] },
{ "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีที่ 4: ใช้ AI สร้างเนื้อหาการตลาด" }] },
{ "type": "paragraph", "content": [{ "type": "text", "text": "เนื้อหาการตลาดที่ดีเป็นหัวใจสำคัญในการดึงดูดลูกค้า แต่การสร้างเนื้อหาที่มีคุณภาพตลอดเวลาต้องใช้เวลาและทรัพยากรมาก AI สามารถช่วยสร้างเนื้อหาได้เร็วขึ้น ไม่ว่าจะเป็นโพสต์เฟซบุ๊ก คำบรรยายสินค้า อีเมลการตลาด หรือบทความบล็อก" }] },
{ "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีที่ 5: ใช้ AI ทำนายแนวโน้มและวางแผนสินค้า" }] },
{ "type": "paragraph", "content": [{ "type": "text", "text": "การมีสินค้าคงคลงเป็นสิ่งจำเป็นสำหรับธุรกิจค้าปลีก แต่การมีสินค้ามากเกินไปก็เป็นปัญหา AI สามารถวิเคราะห์ข้อมูลยอดขายในอดีต ฤดูกาล และปัจจัยอื่นๆ เพื่อทำนายว่าควรสั่งสินค้าเท่าไหร่ในแต่ละช่วง" }] }
]
}
}
},
{
"id": "post-002",
"slug": "ai-content-google-love",
"data": {
"title": "วิธีสร้าง Content ด้วย AI ที่ Google รัก",
"excerpt": "เรียนรู้วิธีการใช้ AI ช่วยสร้างเนื้อหาการตลาดที่มีคุณภาพและได้รับการจัดอันดับดีจาก Google พร้อมเทคนิคและตัวอย่างจริง",
"image": "/images/blog/ai-content-google-love.jpg",
"date": "2026-03-10",
"category": "AI Content",
"content": {
"type": "doc",
"content": [
{ "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "ทำไม AI Content ต้องมีคุณภาพ" }] },
{ "type": "paragraph", "content": [{ "type": "text", "text": "Google มีอัลกอริทึมที่ฉลาดมาก สามารถแยกแยะได้ว่าเนื้อหาที่สร้างโดย AI มีคุณภาพหรือไม่ เนื้อหาที่ไม่มีคุณค่า สร้างขึ้นแค่เพื่อใส่คีย์เวิร์ด จะถูกลงโทษและไม่ติดอันดับ" }] },
{ "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีใช้ AI สร้างเนื้อหาที่ดี" }] },
{ "type": "paragraph", "content": [{ "type": "text", "text": "ใช้ AI เป็นผู้ช่วย ไม่ใช่ผู้เขียนทั้งหมด วิธีที่ดีที่สุดคือใช้ AI ช่วยในบางส่วน เช่น รวบรวมข้อมูล สร้างโครงสร้าง หรือเขียน draft แล้วนำมาปรับแก้ด้วยมนุษย์" }] }
]
}
}
},
{
"id": "post-003",
"slug": "ai-for-sme-thailand",
"data": {
"title": "AI สำหรับ SME ไทย: คู่มือฉบับสมบูรณ์",
"excerpt": "การใช้ AI สำหรับธุรกิจ SME ไทยเพื่อเพิ่มขีดความสามารถในการแข่งขัน พร้อมแนวทางปฏิบัติจริง",
"image": "/images/blog/ai-for-sme-thailand.jpg",
"date": "2026-03-08",
"category": "AI Business",
"content": {
"type": "doc",
"content": [
{ "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "ทำไม SME ต้องใช้ AI" }] },
{ "type": "paragraph", "content": [{ "type": "text", "text": "AI ไม่ใช่เทคโนโลยีสำหรับบริษัทใหญ่เท่านั้น ธุรกิจ SME สามารถเริ่มใช้ประโยชน์จาก AI ได้ง่ายๆ ด้วยเครื่องมือที่เข้าถึงได้" }] }
]
}
}
},
{
"id": "post-004",
"slug": "digital-transformation-guide",
"data": {
"title": "คู่มือ Digital Transformation ฉบับสมบูรณ์",
"excerpt": "การ transform ธุรกิจของคุณสู่ดิจิทัลอย่างครบวงจร ตั้งแต่การวางแผนจนถึงการ Implement",
"image": "/images/blog/digital-transformation.jpg",
"date": "2026-03-05",
"category": "Business",
"content": {
"type": "doc",
"content": [
{ "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "Digital Transformation คืออะไร" }] },
{ "type": "paragraph", "content": [{ "type": "text", "text": "Digital Transformation คือการนำเทคโนโลยีดิจิทัลมาใช้ในทุกด้านของธุรกิจ เพื่อเพิ่มประสิทธิภาพและสร้างคุณค่าใหม่ให้กับลูกค้า" }] }
]
}
}
},
{
"id": "post-005",
"slug": "marketing-automation-guide",
"data": {
"title": "Marketing Automation: คู่มือเริ่มต้น",
"excerpt": "เรียนรู้พื้นฐานของ Marketing Automation และวิธีเริ่มต้นใช้งานสำหรับธุรกิจของคุณ",
"image": "/images/blog/marketing-automation-guide.jpg",
"date": "2026-03-01",
"category": "Marketing",
"content": {
"type": "doc",
"content": [
{ "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "Marketing Automation คืออะไร" }] },
{ "type": "paragraph", "content": [{ "type": "text", "text": "Marketing Automation คือการใช้ซอฟต์แวร์เพื่อ automate การตลาดซ้ำๆ เช่น การส่งอีเมล การโพสต์โซเชียลมีเดีย และการวิเคราะห์ข้อมูล" }] }
]
}
}
}
]
}
}

223
.omc/project-memory.json
View File

@@ -1,6 +1,6 @@
{ {
"version": "1.0.0", "version": "1.0.0",
"lastScanned": 1777964900860, "lastScanned": 1779069605402,
"projectRoot": "/Users/kunthawatgreethong/Gitea/moreminimore-emdash/moreminimore-site", "projectRoot": "/Users/kunthawatgreethong/Gitea/moreminimore-emdash/moreminimore-site",
"techStack": { "techStack": {
"languages": [ "languages": [
@@ -26,13 +26,23 @@
"name": "astro", "name": "astro",
"version": "6.2.2", "version": "6.2.2",
"category": "fullstack" "category": "fullstack"
},
{
"name": "react",
"version": "19.2.5",
"category": "frontend"
},
{
"name": "react-dom",
"version": "19.2.5",
"category": "frontend"
} }
], ],
"packageManager": "npm", "packageManager": "npm",
"runtime": "Node.js 22.12.0" "runtime": "Node.js 22.12.0"
}, },
"build": { "build": {
"buildCommand": "pkill -f \"node.*entry.mjs\" 2>/dev/null; sleep 1; npm run build 2>&1 | tail -10", "buildCommand": "npm run build",
"testCommand": null, "testCommand": null,
"lintCommand": null, "lintCommand": null,
"devCommand": "npm run dev", "devCommand": "npm run dev",
@@ -45,7 +55,7 @@
}, },
"conventions": { "conventions": {
"namingStyle": null, "namingStyle": null,
"importStyle": null, "importStyle": "ES modules",
"testPattern": null, "testPattern": null,
"fileOrganization": "type-based" "fileOrganization": "type-based"
}, },
@@ -63,9 +73,10 @@
"dist": { "dist": {
"path": "dist", "path": "dist",
"purpose": "Distribution/build output", "purpose": "Distribution/build output",
"fileCount": 3, "fileCount": 4,
"lastAccessed": 1777964900843, "lastAccessed": 1779069605371,
"keyFiles": [ "keyFiles": [
"config.yml",
"favicon.ico", "favicon.ico",
"favicon.svg", "favicon.svg",
"index.html" "index.html"
@@ -74,191 +85,115 @@
"public": { "public": {
"path": "public", "path": "public",
"purpose": "Public files", "purpose": "Public files",
"fileCount": 2, "fileCount": 3,
"lastAccessed": 1777964900843, "lastAccessed": 1779069605375,
"keyFiles": [ "keyFiles": [
"config.yml",
"favicon.ico", "favicon.ico",
"favicon.svg" "favicon.svg"
] ]
}, },
"seed": {
"path": "seed",
"purpose": null,
"fileCount": 1,
"lastAccessed": 1779069605376,
"keyFiles": [
"seed.json"
]
},
"src": { "src": {
"path": "src", "path": "src",
"purpose": "Source code", "purpose": "Source code",
"fileCount": 1,
"lastAccessed": 1779069605376,
"keyFiles": [
"content.config.ts"
]
},
"uploads": {
"path": "uploads",
"purpose": null,
"fileCount": 0, "fileCount": 0,
"lastAccessed": 1777964900843, "lastAccessed": 1779069605376,
"keyFiles": [] "keyFiles": []
}, },
"src/components": { "src/components": {
"path": "src/components", "path": "src/components",
"purpose": "UI components", "purpose": "UI components",
"fileCount": 2, "fileCount": 7,
"lastAccessed": 1777964900844, "lastAccessed": 1779069605377,
"keyFiles": [ "keyFiles": [
"BlogCard.astro",
"Footer.astro", "Footer.astro",
"Navigation.astro" "Hero.astro"
]
},
"src/data": {
"path": "src/data",
"purpose": "Data files",
"fileCount": 1,
"lastAccessed": 1779069605377,
"keyFiles": [
"portfolio.ts"
] ]
}, },
"src/pages": { "src/pages": {
"path": "src/pages", "path": "src/pages",
"purpose": "Page components", "purpose": "Page components",
"fileCount": 7, "fileCount": 7,
"lastAccessed": 1777964900844, "lastAccessed": 1779069605378,
"keyFiles": [ "keyFiles": [
"about.astro", "about.astro",
"contact.astro", "contact.astro",
"faq.astro" "faq.astro"
] ]
},
"src/utils": {
"path": "src/utils",
"purpose": "Utility functions",
"fileCount": 1,
"lastAccessed": 1779069605378,
"keyFiles": [
"site-identity.ts"
]
} }
}, },
"hotPaths": [ "hotPaths": [
{ {
"path": "src/pages/services/webdev.astro", "path": "src/pages",
"accessCount": 15, "accessCount": 1,
"lastAccessed": 1777995299269, "lastAccessed": 1779069626755,
"type": "file" "type": "directory"
}, },
{ {
"path": "src/pages/contact.astro", "path": "src/pages/terms.astro",
"accessCount": 13, "accessCount": 1,
"lastAccessed": 1778035753279, "lastAccessed": 1779069632645,
"type": "file"
},
{
"path": "src/pages/services/marketing.astro",
"accessCount": 12,
"lastAccessed": 1777995302629,
"type": "file"
},
{
"path": "src/pages/services/ai.astro",
"accessCount": 12,
"lastAccessed": 1777995305997,
"type": "file"
},
{
"path": "src/pages/services/consult.astro",
"accessCount": 12,
"lastAccessed": 1777995309322,
"type": "file"
},
{
"path": "src/components/Hero.astro",
"accessCount": 10,
"lastAccessed": 1777990559849,
"type": "file"
},
{
"path": "src/pages/portfolio.astro",
"accessCount": 10,
"lastAccessed": 1777995338202,
"type": "file"
},
{
"path": "src/pages/faq.astro",
"accessCount": 10,
"lastAccessed": 1778035785098,
"type": "file"
},
{
"path": "src/pages/blog/index.astro",
"accessCount": 9,
"lastAccessed": 1777990683296,
"type": "file" "type": "file"
}, },
{ {
"path": "src/pages/privacy.astro", "path": "src/pages/privacy.astro",
"accessCount": 8,
"lastAccessed": 1778035781772,
"type": "file"
},
{
"path": "src/pages/index.astro",
"accessCount": 7,
"lastAccessed": 1777990666698,
"type": "file"
},
{
"path": "src/pages/terms.astro",
"accessCount": 7,
"lastAccessed": 1778035778435,
"type": "file"
},
{
"path": "src/components/Footer.astro",
"accessCount": 6,
"lastAccessed": 1778035958612,
"type": "file"
},
{
"path": "src/components/Navigation.astro",
"accessCount": 5,
"lastAccessed": 1778035955274,
"type": "file"
},
{
"path": "src/pages/blog/[slug].astro",
"accessCount": 4,
"lastAccessed": 1777984290050,
"type": "file"
},
{
"path": "src/pages/about.astro",
"accessCount": 4,
"lastAccessed": 1777990670077,
"type": "file"
},
{
"path": "src/layouts/Base.astro",
"accessCount": 4,
"lastAccessed": 1778036775836,
"type": "file"
},
{
"path": "src/styles/global.css",
"accessCount": 3,
"lastAccessed": 1777972416964,
"type": "file"
},
{
"path": "src/pages/services",
"accessCount": 2,
"lastAccessed": 1777995178143,
"type": "directory"
},
{
"path": "astro.config.mjs",
"accessCount": 2,
"lastAccessed": 1778036187649,
"type": "file"
},
{
"path": "src/pages",
"accessCount": 1, "accessCount": 1,
"lastAccessed": 1777995189679, "lastAccessed": 1779069632748,
"type": "directory"
},
{
"path": "src",
"accessCount": 1,
"lastAccessed": 1778035760907,
"type": "directory"
},
{
"path": "src/live.config.ts",
"accessCount": 1,
"lastAccessed": 1778036198221,
"type": "file" "type": "file"
}, },
{ {
"path": "seed/seed.json", "path": "src/pages/faq.astro",
"accessCount": 1, "accessCount": 1,
"lastAccessed": 1778036244021, "lastAccessed": 1779069632766,
"type": "file" "type": "file"
}, },
{ {
"path": "src/utils/site-identity.ts", "path": "src/pages/contact.astro",
"accessCount": 1, "accessCount": 1,
"lastAccessed": 1778036594901, "lastAccessed": 1779069632802,
"type": "file"
},
{
"path": "src/pages/portfolio.astro",
"accessCount": 1,
"lastAccessed": 1779069632820,
"type": "file" "type": "file"
} }
], ],

8
.omc/sessions/94834f07-4375-45f9-b0d8-3e7a91395e8f.json Normal file
View File

@@ -0,0 +1,8 @@
{
"session_id": "94834f07-4375-45f9-b0d8-3e7a91395e8f",
"ended_at": "2026-05-07T04:05:46.804Z",
"reason": "prompt_input_exit",
"agents_spawned": 15,
"agents_completed": 14,
"modes_used": []
}

8
.omc/sessions/e5f480d6-2b75-4bfe-b154-b1e53e34e0a3.json Normal file
View File

@@ -0,0 +1,8 @@
{
"session_id": "e5f480d6-2b75-4bfe-b154-b1e53e34e0a3",
"ended_at": "2026-05-14T02:42:09.203Z",
"reason": "prompt_input_exit",
"agents_spawned": 0,
"agents_completed": 0,
"modes_used": []
}

95
.omc/state/agent-replay-94834f07-4375-45f9-b0d8-3e7a91395e8f.jsonl
View File

@@ -1,95 +0,0 @@
{"t":0,"agent":"ade9261","agent_type":"fork","event":"agent_start","parent_mode":"none"}
{"t":0,"agent":"a4b5aad","agent_type":"fork","event":"agent_start","parent_mode":"none"}
{"t":0,"agent":"a104ef8","agent_type":"fork","event":"agent_start","parent_mode":"none"}
{"t":0,"agent":"a4c6388","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"adc93f5","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a8606b2","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"af35d14","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a261e73","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"acef11f","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a571fa7","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a297250","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a124be4","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a131297","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"ae0fc7a","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"ac40e63","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"aa0080c","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"aad1a0a","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"afce4e2","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a7e6113","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a0590f1","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a6f3810","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a255c75","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a4a30a2","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a165902","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a8859ee","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a11a614","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a9cb2dd","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a8a58ba","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a8d86e8","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a01fdbd","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"aebaf8e","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a6b5bfa","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a316247","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a12a161","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a8f7b2c","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"ade9261","agent_type":"fork","event":"agent_stop","success":true,"duration_ms":656345}
{"t":0,"agent":"a678073","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a741600","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"ab2b460","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"ad7cf0f","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a4b5aad","agent_type":"fork","event":"agent_stop","success":true,"duration_ms":738755}
{"t":0,"agent":"ab374a5","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a007485","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a994226","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a55deb4","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"ad24b40","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a89f2ae","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a1e2f4c","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a34d6ab","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a989a9d","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a104ef8","agent_type":"fork","event":"agent_stop","success":true,"duration_ms":1115685}
{"t":0,"agent":"a98f0bd","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"aba2ef2","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a2a7ceb","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a034dc2","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a4cc262","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a5b9932","agent_type":"fork","event":"agent_start","parent_mode":"none"}
{"t":0,"agent":"a105a90","agent_type":"fork","event":"agent_start","parent_mode":"none"}
{"t":0,"agent":"a56af70","agent_type":"fork","event":"agent_start","parent_mode":"none"}
{"t":0,"agent":"a427839","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a49dd76","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a4bda0e","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a9970b5","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a8da033","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a1f3b1b","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a9ba877","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"aa0d819","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a79f02d","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"ad3b81c","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"aca8182","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"aed8490","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a5b9932","agent_type":"fork","event":"agent_stop","success":true,"duration_ms":204749}
{"t":0,"agent":"a81f94e","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a105a90","agent_type":"fork","event":"agent_stop","success":true,"duration_ms":214097}
{"t":0,"agent":"a4dfee9","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a99405e","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"af606f8","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a8de9bc","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"aa7b9c6","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"aed75f8","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"ae3a10e","agent_type":"Explore","event":"agent_start","parent_mode":"none"}
{"t":0,"agent":"a56af70","agent_type":"fork","event":"agent_stop","success":true,"duration_ms":357026}
{"t":0,"agent":"ae9660b","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"ae3a10e","agent_type":"Explore","event":"agent_stop","success":true,"duration_ms":52349}
{"t":0,"agent":"a0702f4","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a7b8d11","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"ae38803","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"ac8967a","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a74f381","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a8c023c","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a106f58","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"ae7178f","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"aacfce0","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a55df33","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"ad63ce0","agent_type":"unknown","event":"agent_stop","success":true}

37
.omc/state/agent-replay-e564571a-2c3e-4064-a3bb-d2ba1fb5c94e.jsonl Normal file
View File

@@ -0,0 +1,37 @@
{"t":0,"agent":"a52ff9b","agent_type":"verification","event":"agent_start","parent_mode":"none"}
{"t":0,"agent":"ab1174d","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a326c52","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a32446a","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a52ff9b","agent_type":"verification","event":"agent_stop","success":true,"duration_ms":112580}
{"t":0,"agent":"a4424f0","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a4e64c4","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a2c932d","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a2e9f82","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a8fb1c6","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a8a29cb","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a4f35b2","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a719f1d","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a13a58e","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"ad43c53","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a751239","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a9abb1a","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a1e9a14","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a3e3c98","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"adbcc19","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a84e570","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a4ea252","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a8762a8","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a097b1b","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"ae95a8d","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"abf1ace","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a83c72d","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a3e4b31","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a750dca","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a0e9097","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"acb1af1","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"ae8e570","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"af853e9","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"acaf2d6","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a283fe1","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"af732d5","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a30c404","agent_type":"unknown","event":"agent_stop","success":true}

16
.omc/state/checkpoints/checkpoint-2026-05-06T03-07-52-974Z.json Normal file
View File

@@ -0,0 +1,16 @@
{
"created_at": "2026-05-06T03:07:52.973Z",
"trigger": "auto",
"active_modes": {},
"todo_summary": {
"pending": 0,
"in_progress": 0,
"completed": 0
},
"wisdom_exported": false,
"background_jobs": {
"active": [],
"recent": [],
"stats": null
}
}

16
.omc/state/checkpoints/checkpoint-2026-05-06T03-10-31-066Z.json Normal file
View File

@@ -0,0 +1,16 @@
{
"created_at": "2026-05-06T03:10:31.065Z",
"trigger": "auto",
"active_modes": {},
"todo_summary": {
"pending": 0,
"in_progress": 0,
"completed": 0
},
"wisdom_exported": false,
"background_jobs": {
"active": [],
"recent": [],
"stats": null
}
}

16
.omc/state/checkpoints/checkpoint-2026-05-06T04-26-08-868Z.json Normal file
View File

@@ -0,0 +1,16 @@
{
"created_at": "2026-05-06T04:26:08.867Z",
"trigger": "auto",
"active_modes": {},
"todo_summary": {
"pending": 0,
"in_progress": 0,
"completed": 0
},
"wisdom_exported": false,
"background_jobs": {
"active": [],
"recent": [],
"stats": null
}
}

16
.omc/state/checkpoints/checkpoint-2026-05-06T04-40-11-215Z.json Normal file
View File

@@ -0,0 +1,16 @@
{
"created_at": "2026-05-06T04:40:11.214Z",
"trigger": "auto",
"active_modes": {},
"todo_summary": {
"pending": 0,
"in_progress": 0,
"completed": 0
},
"wisdom_exported": false,
"background_jobs": {
"active": [],
"recent": [],
"stats": null
}
}

16
.omc/state/checkpoints/checkpoint-2026-05-06T06-48-58-221Z.json Normal file
View File

@@ -0,0 +1,16 @@
{
"created_at": "2026-05-06T06:48:58.220Z",
"trigger": "auto",
"active_modes": {},
"todo_summary": {
"pending": 0,
"in_progress": 0,
"completed": 0
},
"wisdom_exported": false,
"background_jobs": {
"active": [],
"recent": [],
"stats": null
}
}

16
.omc/state/checkpoints/checkpoint-2026-05-06T11-19-04-928Z.json Normal file
View File

@@ -0,0 +1,16 @@
{
"created_at": "2026-05-06T11:19:04.927Z",
"trigger": "auto",
"active_modes": {},
"todo_summary": {
"pending": 0,
"in_progress": 0,
"completed": 0
},
"wisdom_exported": false,
"background_jobs": {
"active": [],
"recent": [],
"stats": null
}
}

16
.omc/state/checkpoints/checkpoint-2026-05-07T03-07-55-333Z.json Normal file
View File

@@ -0,0 +1,16 @@
{
"created_at": "2026-05-07T03:07:55.332Z",
"trigger": "auto",
"active_modes": {},
"todo_summary": {
"pending": 0,
"in_progress": 0,
"completed": 0
},
"wisdom_exported": false,
"background_jobs": {
"active": [],
"recent": [],
"stats": null
}
}

16
.omc/state/checkpoints/checkpoint-2026-05-16T04-47-41-599Z.json Normal file
View File

@@ -0,0 +1,16 @@
{
"created_at": "2026-05-16T04:47:41.597Z",
"trigger": "auto",
"active_modes": {},
"todo_summary": {
"pending": 0,
"in_progress": 0,
"completed": 0
},
"wisdom_exported": false,
"background_jobs": {
"active": [],
"recent": [],
"stats": null
}
}

16
.omc/state/checkpoints/checkpoint-2026-05-16T04-52-02-990Z.json Normal file
View File

@@ -0,0 +1,16 @@
{
"created_at": "2026-05-16T04:52:02.989Z",
"trigger": "auto",
"active_modes": {},
"todo_summary": {
"pending": 0,
"in_progress": 0,
"completed": 0
},
"wisdom_exported": false,
"background_jobs": {
"active": [],
"recent": [],
"stats": null
}
}

16
.omc/state/checkpoints/checkpoint-2026-05-16T04-57-33-690Z.json Normal file
View File

@@ -0,0 +1,16 @@
{
"created_at": "2026-05-16T04:57:33.689Z",
"trigger": "auto",
"active_modes": {},
"todo_summary": {
"pending": 0,
"in_progress": 0,
"completed": 0
},
"wisdom_exported": false,
"background_jobs": {
"active": [],
"recent": [],
"stats": null
}
}

16
.omc/state/checkpoints/checkpoint-2026-05-16T05-10-05-736Z.json Normal file
View File

@@ -0,0 +1,16 @@
{
"created_at": "2026-05-16T05:10:05.734Z",
"trigger": "auto",
"active_modes": {},
"todo_summary": {
"pending": 0,
"in_progress": 0,
"completed": 0
},
"wisdom_exported": false,
"background_jobs": {
"active": [],
"recent": [],
"stats": null
}
}

16
.omc/state/checkpoints/checkpoint-2026-05-18T01-59-16-903Z.json Normal file
View File

@@ -0,0 +1,16 @@
{
"created_at": "2026-05-18T01:59:16.902Z",
"trigger": "auto",
"active_modes": {},
"todo_summary": {
"pending": 0,
"in_progress": 0,
"completed": 0
},
"wisdom_exported": false,
"background_jobs": {
"active": [],
"recent": [],
"stats": null
}
}

8
.omc/state/last-tool-error.json
View File

@@ -1,7 +1,7 @@
{ {
"tool_name": "Write", "tool_name": "Read",
"tool_input_preview": "{\"file_path\":\"/Users/kunthawatgleethong/Gitea/moreminimore-emdash/moreminimore-site/src/utils/site-identity.ts\",\"content\":\"import { emdash } from \\\"emdash/astro\\\";\\nimport type { CollectionEntry } fro...", "tool_input_preview": "{\"file_path\":\"/Users/kunthawatgreethong/.openclaude/projects/-Users-kunthawat-gith-Gitea-moreminimore-emdash/memory/private/redesign-2026-05-13.md\"}",
"error": "EACCES: permission denied, mkdir '/Users/kunthawatgleethong'", "error": "File does not exist. Note: your current working directory is /Users/kunthawatgreethong/Gitea/moreminimore-emdash/moreminimore-site.",
"timestamp": "2026-05-06T03:03:02.581Z", "timestamp": "2026-05-16T09:37:19.453Z",
"retry_count": 1 "retry_count": 1
} }

396
.omc/state/mission-state.json
View File

@@ -1,231 +1,331 @@
{ {
"updatedAt": "2026-05-06T02:55:08.166Z", "updatedAt": "2026-05-18T02:00:05.002Z",
"missions": [ "missions": [
{ {
"id": "session:94834f07-4375-45f9-b0d8-3e7a91395e8f:none", "id": "session:e564571a-2c3e-4064-a3bb-d2ba1fb5c94e:none",
"source": "session", "source": "session",
"name": "none", "name": "none",
"objective": "Session mission", "objective": "Session mission",
"createdAt": "2026-05-05T06:50:59.238Z", "createdAt": "2026-05-16T02:09:52.147Z",
"updatedAt": "2026-05-06T02:55:08.166Z", "updatedAt": "2026-05-18T02:00:05.002Z",
"status": "done", "status": "done",
"workerCount": 7, "workerCount": 1,
"taskCounts": { "taskCounts": {
"total": 7, "total": 1,
"pending": 0, "pending": 0,
"blocked": 0, "blocked": 0,
"inProgress": 0, "inProgress": 0,
"completed": 7, "completed": 1,
"failed": 0 "failed": 0
}, },
"agents": [ "agents": [
{ {
"name": "fork:ade9261", "name": "verification:a52ff9b",
"role": "fork", "role": "verification",
"ownership": "ade926181d79f7e22", "ownership": "a52ff9b6cf94795c4",
"status": "done", "status": "done",
"currentStep": null, "currentStep": null,
"latestUpdate": "completed", "latestUpdate": "completed",
"completedSummary": null, "completedSummary": null,
"updatedAt": "2026-05-06T02:55:08.166Z" "updatedAt": "2026-05-18T02:00:05.002Z"
},
{
"name": "fork:a4b5aad",
"role": "fork",
"ownership": "a4b5aad918d840cff",
"status": "done",
"currentStep": null,
"latestUpdate": "completed",
"completedSummary": null,
"updatedAt": "2026-05-05T07:03:18.034Z"
},
{
"name": "fork:a104ef8",
"role": "fork",
"ownership": "a104ef8dcedc591ee",
"status": "done",
"currentStep": null,
"latestUpdate": "completed",
"completedSummary": null,
"updatedAt": "2026-05-05T07:09:34.992Z"
},
{
"name": "fork:a5b9932",
"role": "fork",
"ownership": "a5b99323f956d7d4b",
"status": "done",
"currentStep": null,
"latestUpdate": "completed",
"completedSummary": null,
"updatedAt": "2026-05-05T12:29:50.254Z"
},
{
"name": "fork:a105a90",
"role": "fork",
"ownership": "a105a90f66e16a0fe",
"status": "done",
"currentStep": null,
"latestUpdate": "completed",
"completedSummary": null,
"updatedAt": "2026-05-05T12:29:59.631Z"
},
{
"name": "fork:a56af70",
"role": "fork",
"ownership": "a56af702c99ca12f9",
"status": "done",
"currentStep": null,
"latestUpdate": "completed",
"completedSummary": null,
"updatedAt": "2026-05-05T12:32:22.586Z"
},
{
"name": "Explore:ae3a10e",
"role": "Explore",
"ownership": "ae3a10eff79730260",
"status": "done",
"currentStep": null,
"latestUpdate": "completed",
"completedSummary": null,
"updatedAt": "2026-05-05T12:32:59.412Z"
} }
], ],
"timeline": [ "timeline": [
{ {
"id": "session-stop:aa7b9c61b8d8fa05e:2026-05-05T12:31:57.422Z", "id": "session-start:a52ff9b6cf94795c4:2026-05-16T02:09:52.147Z",
"at": "2026-05-05T12:31:57.422Z", "at": "2026-05-16T02:09:52.147Z",
"kind": "completion",
"agent": "fork:ade9261",
"detail": "completed",
"sourceKey": "session-stop:aa7b9c61b8d8fa05e"
},
{
"id": "session-stop:aed75f8c5b76a5a06:2026-05-05T12:32:02.929Z",
"at": "2026-05-05T12:32:02.929Z",
"kind": "completion",
"agent": "fork:ade9261",
"detail": "completed",
"sourceKey": "session-stop:aed75f8c5b76a5a06"
},
{
"id": "session-start:ae3a10eff79730260:2026-05-05T12:32:07.063Z",
"at": "2026-05-05T12:32:07.063Z",
"kind": "update", "kind": "update",
"agent": "Explore:ae3a10e", "agent": "verification:a52ff9b",
"detail": "started Explore:ae3a10e", "detail": "started verification:a52ff9b",
"sourceKey": "session-start:ae3a10eff79730260" "sourceKey": "session-start:a52ff9b6cf94795c4"
}, },
{ {
"id": "session-stop:a56af702c99ca12f9:2026-05-05T12:32:22.586Z", "id": "session-stop:ab1174d3ce0e6376a:2026-05-16T02:10:26.984Z",
"at": "2026-05-05T12:32:22.586Z", "at": "2026-05-16T02:10:26.984Z",
"kind": "completion", "kind": "completion",
"agent": "fork:a56af70", "agent": "verification:a52ff9b",
"detail": "completed", "detail": "completed",
"sourceKey": "session-stop:a56af702c99ca12f9" "sourceKey": "session-stop:ab1174d3ce0e6376a"
}, },
{ {
"id": "session-stop:ae9660bca33bb7788:2026-05-05T12:32:45.962Z", "id": "session-stop:a326c52dfaacc2663:2026-05-16T02:11:05.215Z",
"at": "2026-05-05T12:32:45.962Z", "at": "2026-05-16T02:11:05.215Z",
"kind": "completion", "kind": "completion",
"agent": "fork:ade9261", "agent": "verification:a52ff9b",
"detail": "completed", "detail": "completed",
"sourceKey": "session-stop:ae9660bca33bb7788" "sourceKey": "session-stop:a326c52dfaacc2663"
}, },
{ {
"id": "session-stop:ae3a10eff79730260:2026-05-05T12:32:59.412Z", "id": "session-stop:a32446a1150ab0b9a:2026-05-16T02:11:40.694Z",
"at": "2026-05-05T12:32:59.412Z", "at": "2026-05-16T02:11:40.694Z",
"kind": "completion", "kind": "completion",
"agent": "Explore:ae3a10e", "agent": "verification:a52ff9b",
"detail": "completed", "detail": "completed",
"sourceKey": "session-stop:ae3a10eff79730260" "sourceKey": "session-stop:a32446a1150ab0b9a"
}, },
{ {
"id": "session-stop:a0702f4cc61206062:2026-05-05T12:33:26.229Z", "id": "session-stop:a52ff9b6cf94795c4:2026-05-16T02:11:44.727Z",
"at": "2026-05-05T12:33:26.229Z", "at": "2026-05-16T02:11:44.727Z",
"kind": "completion", "kind": "completion",
"agent": "fork:ade9261", "agent": "verification:a52ff9b",
"detail": "completed", "detail": "completed",
"sourceKey": "session-stop:a0702f4cc61206062" "sourceKey": "session-stop:a52ff9b6cf94795c4"
}, },
{ {
"id": "session-stop:a7b8d11ec5adbf4dd:2026-05-05T12:34:01.769Z", "id": "session-stop:a4424f0af5bcdfbb7:2026-05-16T02:12:32.776Z",
"at": "2026-05-05T12:34:01.769Z", "at": "2026-05-16T02:12:32.776Z",
"kind": "completion", "kind": "completion",
"agent": "fork:ade9261", "agent": "verification:a52ff9b",
"detail": "completed", "detail": "completed",
"sourceKey": "session-stop:a7b8d11ec5adbf4dd" "sourceKey": "session-stop:a4424f0af5bcdfbb7"
}, },
{ {
"id": "session-stop:ae38803ce1dae768c:2026-05-05T12:34:57.078Z", "id": "session-stop:a4e64c457512e19a0:2026-05-16T03:44:04.372Z",
"at": "2026-05-05T12:34:57.078Z", "at": "2026-05-16T03:44:04.372Z",
"kind": "completion", "kind": "completion",
"agent": "fork:ade9261", "agent": "verification:a52ff9b",
"detail": "completed", "detail": "completed",
"sourceKey": "session-stop:ae38803ce1dae768c" "sourceKey": "session-stop:a4e64c457512e19a0"
}, },
{ {
"id": "session-stop:ac8967a5f624630b2:2026-05-05T13:12:36.634Z", "id": "session-stop:a2c932d87c4d902c4:2026-05-16T03:46:03.749Z",
"at": "2026-05-05T13:12:36.634Z", "at": "2026-05-16T03:46:03.749Z",
"kind": "completion", "kind": "completion",
"agent": "fork:ade9261", "agent": "verification:a52ff9b",
"detail": "completed", "detail": "completed",
"sourceKey": "session-stop:ac8967a5f624630b2" "sourceKey": "session-stop:a2c932d87c4d902c4"
}, },
{ {
"id": "session-stop:a74f3816c08a6f716:2026-05-05T13:21:12.812Z", "id": "session-stop:a2e9f825aee21bb1d:2026-05-16T03:50:56.609Z",
"at": "2026-05-05T13:21:12.812Z", "at": "2026-05-16T03:50:56.609Z",
"kind": "completion", "kind": "completion",
"agent": "fork:ade9261", "agent": "verification:a52ff9b",
"detail": "completed", "detail": "completed",
"sourceKey": "session-stop:a74f3816c08a6f716" "sourceKey": "session-stop:a2e9f825aee21bb1d"
}, },
{ {
"id": "session-stop:a8c023c9a30c271a0:2026-05-05T14:19:49.676Z", "id": "session-stop:a8fb1c6790f526ace:2026-05-16T04:44:36.486Z",
"at": "2026-05-05T14:19:49.676Z", "at": "2026-05-16T04:44:36.486Z",
"kind": "completion", "kind": "completion",
"agent": "fork:ade9261", "agent": "verification:a52ff9b",
"detail": "completed", "detail": "completed",
"sourceKey": "session-stop:a8c023c9a30c271a0" "sourceKey": "session-stop:a8fb1c6790f526ace"
}, },
{ {
"id": "session-stop:a106f58695dd12bb4:2026-05-05T15:37:58.942Z", "id": "session-stop:a8a29cb24b3982a84:2026-05-16T04:48:05.848Z",
"at": "2026-05-05T15:37:58.942Z", "at": "2026-05-16T04:48:05.848Z",
"kind": "completion", "kind": "completion",
"agent": "fork:ade9261", "agent": "verification:a52ff9b",
"detail": "completed", "detail": "completed",
"sourceKey": "session-stop:a106f58695dd12bb4" "sourceKey": "session-stop:a8a29cb24b3982a84"
}, },
{ {
"id": "session-stop:ae7178f1d50a672fe:2026-05-06T02:26:35.999Z", "id": "session-stop:a4f35b214ca428a48:2026-05-16T04:52:38.351Z",
"at": "2026-05-06T02:26:35.999Z", "at": "2026-05-16T04:52:38.351Z",
"kind": "completion", "kind": "completion",
"agent": "fork:ade9261", "agent": "verification:a52ff9b",
"detail": "completed", "detail": "completed",
"sourceKey": "session-stop:ae7178f1d50a672fe" "sourceKey": "session-stop:a4f35b214ca428a48"
}, },
{ {
"id": "session-stop:aacfce063672189e4:2026-05-06T02:51:18.289Z", "id": "session-stop:a719f1de7ab6a0fb0:2026-05-16T04:57:57.367Z",
"at": "2026-05-06T02:51:18.289Z", "at": "2026-05-16T04:57:57.367Z",
"kind": "completion", "kind": "completion",
"agent": "fork:ade9261", "agent": "verification:a52ff9b",
"detail": "completed", "detail": "completed",
"sourceKey": "session-stop:aacfce063672189e4" "sourceKey": "session-stop:a719f1de7ab6a0fb0"
}, },
{ {
"id": "session-stop:a55df33c9fc0b4fd3:2026-05-06T02:53:34.397Z", "id": "session-stop:a13a58ec501ffc2b3:2026-05-16T05:10:32.559Z",
"at": "2026-05-06T02:53:34.397Z", "at": "2026-05-16T05:10:32.559Z",
"kind": "completion", "kind": "completion",
"agent": "fork:ade9261", "agent": "verification:a52ff9b",
"detail": "completed", "detail": "completed",
"sourceKey": "session-stop:a55df33c9fc0b4fd3" "sourceKey": "session-stop:a13a58ec501ffc2b3"
}, },
{ {
"id": "session-stop:ad63ce0e956a53a8d:2026-05-06T02:55:08.166Z", "id": "session-stop:ad43c537c8c993dc6:2026-05-16T05:11:56.308Z",
"at": "2026-05-06T02:55:08.166Z", "at": "2026-05-16T05:11:56.308Z",
"kind": "completion", "kind": "completion",
"agent": "fork:ade9261", "agent": "verification:a52ff9b",
"detail": "completed", "detail": "completed",
"sourceKey": "session-stop:ad63ce0e956a53a8d" "sourceKey": "session-stop:ad43c537c8c993dc6"
},
{
"id": "session-stop:a7512397a57893c73:2026-05-16T05:20:51.866Z",
"at": "2026-05-16T05:20:51.866Z",
"kind": "completion",
"agent": "verification:a52ff9b",
"detail": "completed",
"sourceKey": "session-stop:a7512397a57893c73"
},
{
"id": "session-stop:a9abb1a7ba9bc3b0f:2026-05-16T06:11:49.823Z",
"at": "2026-05-16T06:11:49.823Z",
"kind": "completion",
"agent": "verification:a52ff9b",
"detail": "completed",
"sourceKey": "session-stop:a9abb1a7ba9bc3b0f"
},
{
"id": "session-stop:a1e9a14b490e8f03c:2026-05-16T06:12:27.391Z",
"at": "2026-05-16T06:12:27.391Z",
"kind": "completion",
"agent": "verification:a52ff9b",
"detail": "completed",
"sourceKey": "session-stop:a1e9a14b490e8f03c"
},
{
"id": "session-stop:a3e3c98cf768d8aa0:2026-05-16T06:12:59.980Z",
"at": "2026-05-16T06:12:59.980Z",
"kind": "completion",
"agent": "verification:a52ff9b",
"detail": "completed",
"sourceKey": "session-stop:a3e3c98cf768d8aa0"
},
{
"id": "session-stop:adbcc195235331236:2026-05-16T06:15:45.894Z",
"at": "2026-05-16T06:15:45.894Z",
"kind": "completion",
"agent": "verification:a52ff9b",
"detail": "completed",
"sourceKey": "session-stop:adbcc195235331236"
},
{
"id": "session-stop:a84e570ccb7854adb:2026-05-16T06:34:42.994Z",
"at": "2026-05-16T06:34:42.994Z",
"kind": "completion",
"agent": "verification:a52ff9b",
"detail": "completed",
"sourceKey": "session-stop:a84e570ccb7854adb"
},
{
"id": "session-stop:a4ea252627eab107b:2026-05-16T06:40:17.399Z",
"at": "2026-05-16T06:40:17.399Z",
"kind": "completion",
"agent": "verification:a52ff9b",
"detail": "completed",
"sourceKey": "session-stop:a4ea252627eab107b"
},
{
"id": "session-stop:a8762a81d3925b3c0:2026-05-16T06:45:23.942Z",
"at": "2026-05-16T06:45:23.942Z",
"kind": "completion",
"agent": "verification:a52ff9b",
"detail": "completed",
"sourceKey": "session-stop:a8762a81d3925b3c0"
},
{
"id": "session-stop:a097b1be116b4a6da:2026-05-16T07:33:01.473Z",
"at": "2026-05-16T07:33:01.473Z",
"kind": "completion",
"agent": "verification:a52ff9b",
"detail": "completed",
"sourceKey": "session-stop:a097b1be116b4a6da"
},
{
"id": "session-stop:ae95a8dd07cb77b4f:2026-05-16T07:37:15.058Z",
"at": "2026-05-16T07:37:15.058Z",
"kind": "completion",
"agent": "verification:a52ff9b",
"detail": "completed",
"sourceKey": "session-stop:ae95a8dd07cb77b4f"
},
{
"id": "session-stop:abf1acec7a6b7c672:2026-05-16T07:41:57.877Z",
"at": "2026-05-16T07:41:57.877Z",
"kind": "completion",
"agent": "verification:a52ff9b",
"detail": "completed",
"sourceKey": "session-stop:abf1acec7a6b7c672"
},
{
"id": "session-stop:a83c72d7cb732f30a:2026-05-16T08:00:50.958Z",
"at": "2026-05-16T08:00:50.958Z",
"kind": "completion",
"agent": "verification:a52ff9b",
"detail": "completed",
"sourceKey": "session-stop:a83c72d7cb732f30a"
},
{
"id": "session-stop:a3e4b31964d5865f7:2026-05-16T08:02:01.794Z",
"at": "2026-05-16T08:02:01.794Z",
"kind": "completion",
"agent": "verification:a52ff9b",
"detail": "completed",
"sourceKey": "session-stop:a3e4b31964d5865f7"
},
{
"id": "session-stop:a750dca8b7d4d9bb0:2026-05-16T08:13:02.231Z",
"at": "2026-05-16T08:13:02.231Z",
"kind": "completion",
"agent": "verification:a52ff9b",
"detail": "completed",
"sourceKey": "session-stop:a750dca8b7d4d9bb0"
},
{
"id": "session-stop:a0e90972e5385031c:2026-05-16T08:47:33.581Z",
"at": "2026-05-16T08:47:33.581Z",
"kind": "completion",
"agent": "verification:a52ff9b",
"detail": "completed",
"sourceKey": "session-stop:a0e90972e5385031c"
},
{
"id": "session-stop:acb1af1db3cee786f:2026-05-16T08:53:57.581Z",
"at": "2026-05-16T08:53:57.581Z",
"kind": "completion",
"agent": "verification:a52ff9b",
"detail": "completed",
"sourceKey": "session-stop:acb1af1db3cee786f"
},
{
"id": "session-stop:ae8e570fc783ce7da:2026-05-16T09:02:19.043Z",
"at": "2026-05-16T09:02:19.043Z",
"kind": "completion",
"agent": "verification:a52ff9b",
"detail": "completed",
"sourceKey": "session-stop:ae8e570fc783ce7da"
},
{
"id": "session-stop:af853e9569fe63346:2026-05-16T09:38:01.968Z",
"at": "2026-05-16T09:38:01.968Z",
"kind": "completion",
"agent": "verification:a52ff9b",
"detail": "completed",
"sourceKey": "session-stop:af853e9569fe63346"
},
{
"id": "session-stop:acaf2d63b8969c2b4:2026-05-17T01:59:59.881Z",
"at": "2026-05-17T01:59:59.881Z",
"kind": "completion",
"agent": "verification:a52ff9b",
"detail": "completed",
"sourceKey": "session-stop:acaf2d63b8969c2b4"
},
{
"id": "session-stop:a283fe1f1198a1755:2026-05-17T03:21:31.300Z",
"at": "2026-05-17T03:21:31.300Z",
"kind": "completion",
"agent": "verification:a52ff9b",
"detail": "completed",
"sourceKey": "session-stop:a283fe1f1198a1755"
},
{
"id": "session-stop:af732d50454684b9c:2026-05-17T03:43:23.370Z",
"at": "2026-05-17T03:43:23.370Z",
"kind": "completion",
"agent": "verification:a52ff9b",
"detail": "completed",
"sourceKey": "session-stop:af732d50454684b9c"
},
{
"id": "session-stop:a30c4047709401e71:2026-05-18T02:00:05.002Z",
"at": "2026-05-18T02:00:05.002Z",
"kind": "completion",
"agent": "verification:a52ff9b",
"detail": "completed",
"sourceKey": "session-stop:a30c4047709401e71"
} }
] ]
} }

6
.omc/state/sessions/e564571a-2c3e-4064-a3bb-d2ba1fb5c94e/session-started.json Normal file
View File

@@ -0,0 +1,6 @@
{
"session_id": "e564571a-2c3e-4064-a3bb-d2ba1fb5c94e",
"started_at": "2026-05-18T02:00:05.364Z",
"cwd": "/Users/kunthawatgreethong/Gitea/moreminimore-emdash/moreminimore-site",
"pid": 83099
}

70
.omc/state/subagent-tracking.json
View File

@@ -1,71 +1,17 @@
{ {
"agents": [ "agents": [
{ {
"agent_id": "ade926181d79f7e22", "agent_id": "a52ff9b6cf94795c4",
"agent_type": "fork", "agent_type": "verification",
"started_at": "2026-05-05T06:50:59.238Z", "started_at": "2026-05-16T02:09:52.147Z",
"parent_mode": "none", "parent_mode": "none",
"status": "completed", "status": "completed",
"completed_at": "2026-05-05T07:01:55.583Z", "completed_at": "2026-05-16T02:11:44.727Z",
"duration_ms": 656345 "duration_ms": 112580
},
{
"agent_id": "a4b5aad918d840cff",
"agent_type": "fork",
"started_at": "2026-05-05T06:50:59.279Z",
"parent_mode": "none",
"status": "completed",
"completed_at": "2026-05-05T07:03:18.034Z",
"duration_ms": 738755
},
{
"agent_id": "a104ef8dcedc591ee",
"agent_type": "fork",
"started_at": "2026-05-05T06:50:59.307Z",
"parent_mode": "none",
"status": "completed",
"completed_at": "2026-05-05T07:09:34.992Z",
"duration_ms": 1115685
},
{
"agent_id": "a5b99323f956d7d4b",
"agent_type": "fork",
"started_at": "2026-05-05T12:26:25.505Z",
"parent_mode": "none",
"status": "completed",
"completed_at": "2026-05-05T12:29:50.254Z",
"duration_ms": 204749
},
{
"agent_id": "a105a90f66e16a0fe",
"agent_type": "fork",
"started_at": "2026-05-05T12:26:25.534Z",
"parent_mode": "none",
"status": "completed",
"completed_at": "2026-05-05T12:29:59.631Z",
"duration_ms": 214097
},
{
"agent_id": "a56af702c99ca12f9",
"agent_type": "fork",
"started_at": "2026-05-05T12:26:25.560Z",
"parent_mode": "none",
"status": "completed",
"completed_at": "2026-05-05T12:32:22.586Z",
"duration_ms": 357026
},
{
"agent_id": "ae3a10eff79730260",
"agent_type": "Explore",
"started_at": "2026-05-05T12:32:07.063Z",
"parent_mode": "none",
"status": "completed",
"completed_at": "2026-05-05T12:32:59.412Z",
"duration_ms": 52349
} }
], ],
"total_spawned": 3, "total_spawned": 1,
"total_completed": 7, "total_completed": 1,
"total_failed": 0, "total_failed": 0,
"last_updated": "2026-05-06T02:55:08.267Z" "last_updated": "2026-05-18T02:00:05.104Z"
} }

17
astro.config.mjs
View File

@@ -1,20 +1,27 @@
// @ts-check // @ts-check
import { defineConfig } from 'astro/config'; import { defineConfig } from 'astro/config';
import node from "@astrojs/node";
import react from "@astrojs/react"; import react from "@astrojs/react";
import mdx from "@astrojs/mdx";
import node from "@astrojs/node";
import emdash, { local } from "emdash/astro"; import emdash, { local } from "emdash/astro";
import { sqlite } from "emdash/db"; import { sqlite } from "emdash/db";
export default defineConfig({ export default defineConfig({
output: "server", output: "server",
adapter: node({ mode: "standalone" }), adapter: node({
image: { layout: "constrained", responsiveStyles: true }, mode: 'standalone'
}),
integrations: [ integrations: [
react(), react(),
mdx(),
emdash({ emdash({
database: sqlite({ url: "file:./data.db" }), database: sqlite({ url: "file:./data.db" }),
storage: local({ directory: "./uploads", baseUrl: "/_emdash/api/media/file" }), storage: local({
directory: "./uploads",
baseUrl: "/_emdash/api/media/file",
}),
}), }),
], ],
devToolbar: { enabled: false }, image: { layout: "constrained", responsiveStyles: true },
devToolbar: { enabled: true },
}); });

19
count-cols.cjs Normal file
View File

@@ -0,0 +1,19 @@
const seed = require('./seed/seed.json');
const Database = require('better-sqlite3');
const db = new Database('./data.db');
const cols = ['title','subtitle','badge','hero_image',
'feature1_icon','feature1_title','feature1_desc',
'feature2_icon','feature2_title','feature2_desc',
'feature3_icon','feature3_title','feature3_desc',
'feature4_icon','feature4_title','feature4_desc',
'feature5_icon','feature5_title','feature5_desc',
'feature6_icon','feature6_title','feature6_desc'];
const placeholders = cols.map(() => '?').join(', ');
const sql = `INSERT OR REPLACE INTO ec_services (id, slug, status, ${cols.join(', ')}, created_at, updated_at, published_at) VALUES (?, ?, 'published', ${placeholders}, datetime('now'), datetime('now'), datetime('now'))`;
console.log('Columns:', 3 + cols.length); // id, slug, status + cols
console.log('SQL placeholders:', (sql.match(/\?/g) || []).length);
db.close();

BIN
data.db
View File

Binary file not shown.

BIN
data.db-shm Normal file
View File

Binary file not shown.

0
data.db-wal Normal file
View File

91
emdash-env.d.ts vendored
View File

@@ -5,11 +5,15 @@
import type { ContentBylineCredit, PortableTextBlock } from "emdash"; import type { ContentBylineCredit, PortableTextBlock } from "emdash";
export interface Page { export interface Blog {
id: string; id: string;
slug: string | null; slug: string | null;
status: string; status: string;
title: string; title?: string;
excerpt?: string;
image?: { id: string; src?: string; alt?: string; width?: number; height?: number; provider?: string; previewUrl?: string; meta?: Record<string, unknown> };
date?: string;
category?: string;
content?: PortableTextBlock[]; content?: PortableTextBlock[];
createdAt: Date; createdAt: Date;
updatedAt: Date; updatedAt: Date;
@@ -17,14 +21,83 @@ export interface Page {
bylines?: ContentBylineCredit[]; bylines?: ContentBylineCredit[];
} }
export interface Post { export interface Faq {
id: string; id: string;
slug: string | null; slug: string | null;
status: string; status: string;
title: string; category?: string;
featured_image?: { id: string; src?: string; alt?: string; width?: number; height?: number }; question?: string;
answer?: string;
createdAt: Date;
updatedAt: Date;
publishedAt: Date | null;
bylines?: ContentBylineCredit[];
}
export interface Page {
id: string;
slug: string | null;
status: string;
title?: string;
subtitle?: string;
badge?: string;
hero_image?: { id: string; src?: string; alt?: string; width?: number; height?: number; provider?: string; previewUrl?: string; meta?: Record<string, unknown> };
theme?: string;
show_cta?: boolean;
cta_text?: string;
cta_link?: string;
variant?: string;
size?: string;
createdAt: Date;
updatedAt: Date;
publishedAt: Date | null;
bylines?: ContentBylineCredit[];
}
export interface Portfolio {
id: string;
slug: string | null;
status: string;
name?: string;
url?: string;
category?: string;
category_label?: string;
thumbnail?: { id: string; src?: string; alt?: string; width?: number; height?: number; provider?: string; previewUrl?: string; meta?: Record<string, unknown> };
description?: string;
services?: unknown;
createdAt: Date;
updatedAt: Date;
publishedAt: Date | null;
bylines?: ContentBylineCredit[];
}
export interface Service {
id: string;
slug: string | null;
status: string;
title?: string;
subtitle?: string;
badge?: string;
hero_image?: { id: string; src?: string; alt?: string; width?: number; height?: number; provider?: string; previewUrl?: string; meta?: Record<string, unknown> };
content?: PortableTextBlock[]; content?: PortableTextBlock[];
excerpt?: string; features?: unknown;
createdAt: Date;
updatedAt: Date;
publishedAt: Date | null;
bylines?: ContentBylineCredit[];
}
export interface Setting {
id: string;
slug: string | null;
status: string;
site_name?: string;
email?: string;
phone?: string;
address?: string;
facebook?: string;
line?: string;
linkedin?: string;
createdAt: Date; createdAt: Date;
updatedAt: Date; updatedAt: Date;
publishedAt: Date | null; publishedAt: Date | null;
@@ -33,7 +106,11 @@ export interface Post {
declare module "emdash" { declare module "emdash" {
interface EmDashCollections { interface EmDashCollections {
blog: Blog;
faq: Faq;
pages: Page; pages: Page;
posts: Post; portfolio: Portfolio;
services: Service;
settings: Setting;
} }
} }

1565
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@@ -12,10 +12,11 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"@astrojs/node": "^10.0.6", "@astrojs/mdx": "^5.0.6",
"@astrojs/react": "^5.0.4", "@astrojs/node": "^10.1.1",
"@astrojs/react": "^5.0.5",
"astro": "^6.2.2", "astro": "^6.2.2",
"emdash": "^0.9.0", "emdash": "^0.12.0",
"react": "^19.2.5", "react": "^19.2.5",
"react-dom": "^19.2.5" "react-dom": "^19.2.5"
} }

BIN
public/images/services/ai-consult.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 241 KiB

BIN
public/images/services/automation.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 285 KiB

BIN
public/images/services/default.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 285 KiB

BIN
public/images/services/marketing.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 268 KiB

BIN
public/images/services/webdev.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 270 KiB

52
seed-all.cjs Normal file
View File

@@ -0,0 +1,52 @@
const seed = require('./seed/seed.json');
const Database = require('better-sqlite3');
const db = new Database('./data.db');
// Helper to get current timestamp
const now = new Date().toISOString();
// 1. Seed Pages
const insertPage = db.prepare(`
INSERT OR REPLACE INTO ec_pages (id, slug, status, locale, title, subtitle, badge, hero_image, theme, show_cta, cta_text, cta_link, variant, size, created_at, updated_at, published_at)
VALUES (?, ?, 'published', 'th', ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
`);
(seed.content?.pages || []).forEach(p => {
insertPage.run(p.id, p.slug, p.data.title, p.data.subtitle, p.data.badge, p.data.hero_image, p.data.theme, p.data.show_cta ? 1 : 0, p.data.cta_text, p.data.cta_link, p.data.variant, p.data.size, now, now, now);
});
console.log('Pages seeded:', db.prepare('SELECT COUNT(*) as c FROM ec_pages').get().c);
// 2. Seed Portfolio
const insertPortfolio = db.prepare(`
INSERT OR REPLACE INTO ec_portfolio (id, slug, status, locale, name, url, category, category_label, thumbnail, description, created_at, updated_at, published_at)
VALUES (?, ?, 'published', 'th', ?, ?, ?, ?, ?, ?, ?, ?, ?)
`);
(seed.content?.portfolio || []).forEach((p, i) => {
const pid = p.id || `portfolio-${String(i + 1).padStart(3, '0')}`;
insertPortfolio.run(pid, p.slug, p.data.name, p.data.url, p.data.category, p.data.category_label, p.data.thumbnail, p.data.description, now, now, now);
});
console.log('Portfolio seeded:', db.prepare('SELECT COUNT(*) as c FROM ec_portfolio').get().c);
// 3. Seed Blog
const insertBlog = db.prepare(`
INSERT OR REPLACE INTO ec_blog (id, slug, status, locale, title, excerpt, image, date, category, content, created_at, updated_at, published_at)
VALUES (?, ?, 'published', 'th', ?, ?, ?, ?, ?, ?, ?, ?, ?)
`);
(seed.content?.blog || []).forEach((p, i) => {
const bid = p.id || `blog-${String(i + 1).padStart(3, '0')}`;
insertBlog.run(bid, p.slug, p.data.title, p.data.excerpt, p.data.image, p.data.date, p.data.category, JSON.stringify(p.data.content), now, now, now);
});
console.log('Blog seeded:', db.prepare('SELECT COUNT(*) as c FROM ec_blog').get().c);
// 4. Seed FAQ
const insertFaq = db.prepare(`
INSERT OR REPLACE INTO ec_faq (id, slug, status, locale, category, question, answer, created_at, updated_at)
VALUES (?, ?, 'published', 'th', ?, ?, ?, ?, ?)
`);
(seed.content?.faq || []).forEach((p, i) => {
const fid = p.id || `faq-${String(i + 1).padStart(3, '0')}`;
insertFaq.run(fid, p.slug || fid, p.data.category, p.data.question, p.data.answer, now, now);
});
console.log('FAQ seeded:', db.prepare('SELECT COUNT(*) as c FROM ec_faq').get().c);
db.close();
console.log('All seeding complete!');

14
seed-db.cjs Normal file
View File

@@ -0,0 +1,14 @@
const seed = require('./seed/seed.json');
const Database = require('better-sqlite3');
const db = new Database('./data.db');
// Only seed pages for now
const insertPage = db.prepare(
"INSERT OR REPLACE INTO ec_pages (id, slug, status, title, subtitle, badge, hero_image, theme, show_cta, cta_text, cta_link, variant, size, created_at, updated_at, published_at) VALUES (?, ?, 'published', ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, datetime('now'), datetime('now'), datetime('now'))"
);
(seed.content?.pages || []).forEach(p => {
insertPage.run(p.id, p.slug, p.data.title, p.data.subtitle, p.data.badge, p.data.hero_image, p.data.theme, p.data.show_cta ? 1 : 0, p.data.cta_text, p.data.cta_link, p.data.variant, p.data.size);
});
console.log('Pages:', db.prepare('SELECT COUNT(*) as c FROM ec_pages').get().c);
db.close();
console.log('Done');

26
seed-services.cjs Normal file
View File

@@ -0,0 +1,26 @@
const seed = require('./seed/seed.json');
const Database = require('better-sqlite3');
const db = new Database('./data.db');
const cols = ['title','subtitle','badge','category','objective','hero_image',
'usp_free_server','usp_content_edit',
'feature1_icon','feature1_title','feature1_desc',
'feature2_icon','feature2_title','feature2_desc',
'feature3_icon','feature3_title','feature3_desc',
'feature4_icon','feature4_title','feature4_desc',
'feature5_icon','feature5_title','feature5_desc',
'feature6_icon','feature6_title','feature6_desc'];
const placeholders = cols.map(() => '?').join(', ');
const sql = `INSERT OR REPLACE INTO ec_services (id, slug, status, ${cols.join(', ')}, created_at, updated_at, published_at) VALUES (?, ?, 'published', ${placeholders}, datetime('now'), datetime('now'), datetime('now'))`;
const insertService = db.prepare(sql);
(seed.content?.services || []).forEach(s => {
const vals = [s.id, s.slug];
cols.forEach(c => vals.push(s.data[c] ?? null));
insertService.run(...vals);
});
console.log('Services:', db.prepare('SELECT COUNT(*) as c FROM ec_services').get().c);
db.close();
console.log('Done');

651
seed/seed.json
View File

@@ -1,85 +1,598 @@
{ {
"version": "1",
"collections": [ "collections": [
{ {
"name": "pages", "slug": "pages",
"label": "Pages", "label": "Pages",
"fields": [ "fields": [
{ "name": "title", "type": "string", "label": "Title" }, { "slug": "title", "type": "string", "label": "Title" },
{ "name": "subtitle", "type": "string", "label": "Subtitle" }, { "slug": "subtitle", "type": "string", "label": "Subtitle" },
{ "name": "badge", "type": "string", "label": "Badge" }, { "slug": "badge", "type": "string", "label": "Badge" },
{ "name": "heroImage", "type": "image", "label": "Hero Image" }, { "slug": "hero_image", "type": "image", "label": "Hero Image" },
{ "name": "theme", "type": "select", "label": "Theme", "options": ["yellow", "accent"] }, { "slug": "theme", "type": "select", "label": "Theme", "options": ["yellow", "accent"] },
{ "name": "showCTA", "type": "boolean", "label": "Show CTA" }, { "slug": "show_cta", "type": "boolean", "label": "Show CTA" },
{ "name": "ctaText", "type": "string", "label": "CTA Text" }, { "slug": "cta_text", "type": "string", "label": "CTA Text" },
{ "name": "ctaLink", "type": "string", "label": "CTA Link" }, { "slug": "cta_link", "type": "string", "label": "CTA Link" },
{ "name": "variant", "type": "select", "label": "Hero Variant", "options": ["split", "centered", "text-only", "floating-cards"] }, { "slug": "variant", "type": "select", "label": "Hero Variant", "options": ["split", "centered", "text_only", "floating_cards"] },
{ "name": "size", "type": "select", "label": "Hero Size", "options": ["full", "compact"] } { "slug": "size", "type": "select", "label": "Hero Size", "options": ["full", "compact"] }
] ]
}, },
{ {
"name": "services", "slug": "services",
"label": "Services", "label": "Services",
"fields": [ "fields": [
{ "name": "title", "type": "string", "label": "Title" }, { "slug": "title", "type": "string", "label": "Title" },
{ "name": "subtitle", "type": "string", "label": "Subtitle" }, { "slug": "subtitle", "type": "string", "label": "Subtitle" },
{ "name": "badge", "type": "string", "label": "Badge" }, { "slug": "badge", "type": "string", "label": "Badge" },
{ "name": "heroImage", "type": "image", "label": "Hero Image" }, { "slug": "category", "type": "select", "label": "Category", "options": ["tech-consult", "marketing-consult"] },
{ "name": "content", "type": "richtext", "label": "Content" }, { "slug": "objective", "type": "string", "label": "Objective (Headline)" },
{ "name": "features", "type": "array", "label": "Features", "fields": [ { "slug": "hero_image", "type": "image", "label": "Hero Image" },
{ "name": "icon", "type": "string", "label": "Icon" }, { "slug": "usp_free_server", "type": "string", "label": "USP: Free Server Description" },
{ "name": "title", "type": "string", "label": "Title" }, { "slug": "usp_content_edit", "type": "string", "label": "USP: Free Content Edit Description" },
{ "name": "description", "type": "string", "label": "Description" } { "slug": "content", "type": "portableText", "label": "Content" },
]}
]
},
{ {
"name": "portfolio", "slug": "features",
"label": "Portfolio", "type": "repeater",
"label": "Features",
"fields": [ "fields": [
{ "name": "name", "type": "string", "label": "Name" }, { "slug": "icon", "type": "string", "label": "Icon" },
{ "name": "url", "type": "string", "label": "URL" }, { "slug": "feature_title", "type": "string", "label": "Title" },
{ "name": "category", "type": "select", "label": "Category", "options": ["webdev", "ecommerce", "marketing"] }, { "slug": "description", "type": "string", "label": "Description" }
{ "name": "categoryLabel", "type": "string", "label": "Category Label" },
{ "name": "thumbnail", "type": "image", "label": "Thumbnail" },
{ "name": "description", "type": "string", "label": "Description" },
{ "name": "services", "type": "array", "label": "Services", "fields": [
{ "name": "name", "type": "string", "label": "Name" }
]}
]
},
{
"name": "blog",
"label": "Blog",
"fields": [
{ "name": "title", "type": "string", "label": "Title" },
{ "name": "excerpt", "type": "string", "label": "Excerpt" },
{ "name": "image", "type": "image", "label": "Image" },
{ "name": "date", "type": "date", "label": "Date" },
{ "name": "category", "type": "string", "label": "Category" },
{ "name": "content", "type": "richtext", "label": "Content" }
]
},
{
"name": "faq",
"label": "FAQ",
"fields": [
{ "name": "category", "type": "string", "label": "Category" },
{ "name": "question", "type": "string", "label": "Question" },
{ "name": "answer", "type": "string", "label": "Answer" }
]
},
{
"name": "settings",
"label": "Site Settings",
"fields": [
{ "name": "siteName", "type": "string", "label": "Site Name" },
{ "name": "email", "type": "string", "label": "Contact Email" },
{ "name": "phone", "type": "string", "label": "Contact Phone" },
{ "name": "address", "type": "string", "label": "Address" },
{ "name": "facebook", "type": "string", "label": "Facebook URL" },
{ "name": "line", "type": "string", "label": "LINE URL" },
{ "name": "linkedin", "type": "string", "label": "LinkedIn URL" }
] ]
} }
] ]
},
{
"slug": "portfolio",
"label": "Portfolio",
"fields": [
{ "slug": "name", "type": "string", "label": "Name" },
{ "slug": "url", "type": "url", "label": "URL" },
{ "slug": "category", "type": "select", "label": "Category", "options": ["webdev", "ecommerce", "marketing"] },
{ "slug": "category_label", "type": "string", "label": "Category Label" },
{ "slug": "thumbnail", "type": "image", "label": "Thumbnail" },
{ "slug": "description", "type": "text", "label": "Description" },
{
"slug": "services",
"type": "repeater",
"label": "Services",
"fields": [
{ "slug": "service_name", "type": "string", "label": "Name" }
]
}
]
},
{
"slug": "blog",
"label": "Blog",
"fields": [
{ "slug": "title", "type": "string", "label": "Title" },
{ "slug": "excerpt", "type": "string", "label": "Excerpt" },
{ "slug": "image", "type": "image", "label": "Image" },
{ "slug": "date", "type": "datetime", "label": "Date" },
{ "slug": "category", "type": "string", "label": "Category" },
{ "slug": "content", "type": "portableText", "label": "Content" }
]
},
{
"slug": "faq",
"label": "FAQ",
"fields": [
{ "slug": "category", "type": "string", "label": "Category" },
{ "slug": "question", "type": "string", "label": "Question" },
{ "slug": "answer", "type": "text", "label": "Answer" }
]
},
{
"slug": "settings",
"label": "Site Settings",
"fields": [
{ "slug": "site_name", "type": "string", "label": "Site Name" },
{ "slug": "email", "type": "string", "label": "Contact Email" },
{ "slug": "phone", "type": "string", "label": "Contact Phone" },
{ "slug": "address", "type": "text", "label": "Address" },
{ "slug": "facebook", "type": "url", "label": "Facebook URL" },
{ "slug": "line", "type": "url", "label": "LINE URL" },
{ "slug": "linkedin", "type": "url", "label": "LinkedIn URL" }
]
}
],
"content": {
"pages": [
{
"id": "page-home",
"slug": "home",
"data": {
"title": "เปลี่ยนธุรกิจของคุณ ด้วย AI และเทคโนโลยีสมัยใหม่",
"subtitle": "รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย<br>เพิ่มยอดขาย ลดต้นทุน ด้วยเทคโนโลยีล้ำสมัย",
"badge": "ดิจิทัลเอเจนซี่ในประเทศไทย",
"hero_image": "/images/hero/hero.jpg",
"theme": "yellow",
"variant": "split",
"size": "full",
"show_cta": true,
"cta_text": "เริ่มต้นวันนี้",
"cta_link": "/contact"
}
},
{
"id": "page-about",
"slug": "about",
"data": {
"title": "เกี่ยวกับ มอร์มินิมอร์",
"subtitle": "บริษัท มอร์มินิมอร์ จำกัด<br>รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย",
"badge": "เกี่ยวกับเรา",
"hero_image": "/images/hero/about.jpg",
"theme": "yellow",
"variant": "centered",
"size": "compact",
"show_cta": false
}
},
{
"id": "page-portfolio",
"slug": "portfolio",
"data": {
"title": "ผลงานของเรา",
"subtitle": "รวมผลงานพัฒนาเว็บไซต์และโปรเจกต์ที่เราภาคภูมิใจ",
"badge": "พอร์ตโฟลิโอ",
"hero_image": "/images/hero/hero.jpg",
"theme": "yellow",
"variant": "text-only",
"size": "compact",
"show_cta": false
}
},
{
"id": "page-contact",
"slug": "contact",
"data": {
"title": "พูดคุยกับเรา วันนี้เลย!",
"subtitle": "พร้อมให้คำปรึกษาและช่วยเหลือคุณ<br>ปรึกษาฟรี ไม่มีค่าใช้จ่าย",
"badge": "ติดต่อเรา",
"hero_image": "/images/hero/contact.jpg",
"theme": "yellow",
"variant": "text-only",
"size": "compact",
"show_cta": false
}
},
{
"id": "page-faq",
"slug": "faq",
"data": {
"title": "คำถามที่พบบ่อย",
"subtitle": "หาคำตอบสำหรับคำถามที่พบบ่อยเกี่ยวกับบริการของเรา",
"badge": "FAQ",
"hero_image": "/images/hero/tech-consult.jpg",
"theme": "yellow",
"variant": "centered",
"size": "compact",
"show_cta": false
}
},
{
"id": "page-privacy",
"slug": "privacy",
"data": {
"title": "นโยบายความเป็นส่วนตัว",
"subtitle": "มีผลบังคับใช้วันที่ 5 พฤษภาคม 2569",
"badge": "กฎหมาย",
"hero_image": "/images/hero/ai-automation.jpg",
"theme": "yellow",
"variant": "text-only",
"size": "compact",
"show_cta": false
}
},
{
"id": "page-terms",
"slug": "terms",
"data": {
"title": "เงื่อนไขการให้บริการ",
"subtitle": "มีผลบังคับใช้วันที่ 5 พฤษภาคม 2569",
"badge": "กฎหมาย",
"hero_image": "/images/hero/marketing-automation.jpg",
"theme": "yellow",
"variant": "text-only",
"size": "compact",
"show_cta": false
}
}
],
"services": [
{
"id": "service-automation",
"slug": "automation",
"data": {
"title": "Automation Consult",
"subtitle": "Implement specific unique app and AI for business to do automation workflow. ลดต้นทุนและเพิ่มประสิทธิภาพด้วยระบบอัตโนมัติที่ออกแบบมาเฉพาะสำหรับธุรกิจของคุณ",
"badge": "Technology Consult",
"category": "tech-consult",
"objective": "ลดต้นทุนและเวลา",
"hero_image": "/images/hero/automation-consult-hero.jpg",
"usp_free_server": "ลูกค้าที่ใช้บริการ Consult จะได้รับ Server สำหรับ App และ AI ฟรี (สำหรับการใช้งานปกติ) หากต้องการใช้งานหนักหรือ Resource-intensive จะมีค่าใช้จ่ายเพิ่มเติม",
"usp_content_edit": "",
"feature1_icon": "🤖",
"feature1_title": "Workflow Automation",
"feature1_desc": "ออกแบบและ implement ระบบ automation สำหรับงานที่ทำซ้ำๆ เช่น การประมวลผลออร์เดอร์ การจัดการ inventory",
"feature2_icon": "📊",
"feature2_title": "Business Process Optimization",
"feature2_desc": "วิเคราะห์และปรับปรุงกระบวนการทำงานให้มีประสิทธิภาพมากขึ้นด้วยเทคโนโลยีล่าสุด",
"feature3_icon": "🔗",
"feature3_title": "System Integration",
"feature3_desc": "เชื่อมต่อระบบต่างๆ ให้ทำงานร่วมกันอย่างราบรื่น เช่น CRM, ERP, E-commerce",
"feature4_icon": "📱",
"feature4_title": "Custom Application",
"feature4_desc": "พัฒนา application เฉพาะทางสำหรับธุรกิจของคุณที่ไม่สามารถหาซื้อได้ทั่วไป",
"feature5_icon": "🔒",
"feature5_title": "Security & Compliance",
"feature5_desc": "ตรวจสอบและปรับปรุงความปลอดภัยของระบบให้เป็นไปตามมาตรฐาน",
"feature6_icon": "📈",
"feature6_title": "Performance Monitoring",
"feature6_desc": "ติดตามและวัดผลประสิทธิภาพของระบบแบบ real-time"
}
},
{
"id": "service-ai-consult",
"slug": "ai-consult",
"data": {
"title": "AI Consult",
"subtitle": "Consult service for using AI to improve business workflow and knowledge management. ใช้ AI ให้เป็นประโยชน์สำหรับธุรกิจของคุณอย่างเต็มศักยภาพ",
"badge": "Technology Consult",
"category": "tech-consult",
"objective": "ลดต้นทุนและเวลา",
"hero_image": "/images/hero/ai-consult-hero.jpg",
"usp_free_server": "ลูกค้าที่ใช้บริการ Consult จะได้รับ Server สำหรับ App และ AI ฟรี (สำหรับการใช้งานปกติ) หากต้องการใช้งานหนักหรือ Resource-intensive จะมีค่าใช้จ่ายเพิ่มเติม",
"usp_content_edit": "",
"feature1_icon": "🧠",
"feature1_title": "AI Strategy & Roadmap",
"feature1_desc": "วางแผนการใช้ AI อย่างเป็นระบบเพื่อให้เห็นผลลัพธ์ที่ชัดเจน",
"feature2_icon": "💬",
"feature2_title": "AI Chatbot Implementation",
"feature2_desc": "พัฒนาและ deploy AI Chatbot ที่เข้าใจภาษาไทยและตอบคำถามลูกค้าได้ 24/7",
"feature3_icon": "📝",
"feature3_title": "Knowledge Management",
"feature3_desc": "สร้างระบบจัดการความรู้ด้วย AI ที่ช่วยให้การค้นหาและใช้งานข้อมูลง่ายขึ้น",
"feature4_icon": "🎯",
"feature4_title": "AI for Marketing",
"feature4_desc": "ใช้ AI วิเคราะห์ลูกค้าและสร้างแคมเปญการตลาดที่มีประสิทธิภาพ",
"feature5_icon": "🔍",
"feature5_title": "AI Audit",
"feature5_desc": "วิเคราะห์ว่าธุรกิจของคุณควรใช้ AI ตัวไหนและอย่างไร",
"feature6_icon": "🚀",
"feature6_title": "AI Implementation Support",
"feature6_desc": "ดูแลและให้คำปรึกษาตลอดการ implement AI ในองค์กร"
}
},
{
"id": "service-online-marketing",
"slug": "online-marketing",
"data": {
"title": "Online Marketing Automation",
"subtitle": "Use AI to help generate and manage marketing workflow. เพิ่มยอดขายด้วยระบบอัตโนมัติทางการตลาดที่ขับเคลื่อนด้วย AI",
"badge": "Marketing Consult",
"category": "marketing-consult",
"objective": "เพิ่มยอดขาย",
"hero_image": "/images/hero/online-marketing-hero.jpg",
"usp_free_server": "",
"usp_content_edit": "",
"feature1_icon": "📧",
"feature1_title": "Email Marketing Automation",
"feature1_desc": "สร้าง email campaign อัตโนมัติด้วย AI ที่ personalize ข้อความตามพฤติกรรมลูกค้า",
"feature2_icon": "💬",
"feature2_title": "Social Media Automation",
"feature2_desc": "กำหนดเวลาโพสต์และตอบสนองอัตโนมัติด้วย AI ที่เข้าใจบริบท",
"feature3_icon": "🎯",
"feature3_title": "Lead Generation AI",
"feature3_desc": "ใช้ AI หาและให้คะแนน leads ที่มีโอกาส conversion สูงสุด",
"feature4_icon": "📊",
"feature4_title": "Marketing Analytics",
"feature4_desc": "วิเคราะห์ข้อมูลการตลาดและให้คำแนะนำด้วย AI เพื่อปรับปรุง ROI",
"feature5_icon": "🔄",
"feature5_title": "Workflow Automation",
"feature5_desc": "สร้าง marketing workflow อัตโนมัติตั้งแต่ lead จนถึง sale",
"feature6_icon": "📱",
"feature6_title": "Multi-channel Integration",
"feature6_desc": "เชื่อมต่อทุกช่องทางการตลาดให้ทำงานร่วมกันอย่างไร้รอยต่อ"
}
},
{
"id": "service-webdev",
"slug": "webdev",
"data": {
"title": "Website Development",
"subtitle": "Implement website for business and integrate the website with marketing workflow. เว็บไซต์ที่ทันสมัย รวดเร็ว และเชื่อมต่อกับระบบการตลาดอย่างไร้รอยต่อ",
"badge": "Marketing Consult",
"category": "marketing-consult",
"objective": "เพิ่มยอดขาย",
"hero_image": "/images/hero/web-development-hero.jpg",
"usp_free_server": "",
"usp_content_edit": "ลูกค้าที่ใช้ Server ของเราจะได้รับบริการแก้ไขและเพิ่มเนื้อหาเว็บไซต์ฟรี! จ่ายเฉพาะเมื่อต้องการ Redesign ทั้งหมด หรือ Upgrade ฟีเจอร์ใหญ่ เช่น เพิ่มระบบ E-commerce",
"feature1_icon": "⚡",
"feature1_title": "Fast & Modern",
"feature1_desc": "โหลดเร็ว รองรับการขยายตัวของธุรกิจ และใช้เทคโนโลยีล่าสุด",
"feature2_icon": "📱",
"feature2_title": "Responsive Design",
"feature2_desc": "แสดงผลได้ดีบนทุกอุปกรณ์ ทั้ง mobile tablet และ desktop",
"feature3_icon": "🎨",
"feature3_title": "SEO Optimized",
"feature3_desc": "ออกแบบมาเพื่อให้ Google ชอบ ช่วยให้ติดอันดับได้ง่ายขึ้น",
"feature4_icon": "🔗",
"feature4_title": "Marketing Integration",
"feature4_desc": "เชื่อมต่อกับระบบ CRM, Email Marketing และ Analytics ได้อย่างไร้รอยต่อ",
"feature5_icon": "📊",
"feature5_title": "Analytics Dashboard",
"feature5_desc": "ติดตามผู้เข้าชมและวัดผลได้แบบ real-time",
"feature6_icon": "🔒",
"feature6_title": "Security",
"feature6_desc": "Security ระดับสูง ป้องกันการโจมตีและข้อมูลรั่วไหล"
}
}
],
"portfolio": [
{
"id": "portfolio-001",
"slug": "lungfinler",
"data": {
"name": "Lungfinler",
"url": "https://lungfinler.com",
"category": "webdev",
"category_label": "พัฒนาเว็บไซต์",
"thumbnail": "/images/portfolio/lungfinler.png",
"description": "Digital Agency - บริการด้านการสร้างแบรนด์ กราฟิกดีไซน์ และถ่ายภาพสินค้าคุณภาพสูง"
}
},
{
"id": "portfolio-002",
"slug": "jetindustries",
"data": {
"name": "Jet Industries",
"url": "https://jetindustries.co.th",
"category": "webdev",
"category_label": "พัฒนาเว็บไซต์",
"thumbnail": "/images/portfolio/jetindustries.png",
"description": "ผู้ผลิตพลาสติกฉีดขึ้นรูปอย่างแม่นยำ (Precision Plastic Injection Molding) มีประสบการณ์กว่า 40 ปี"
}
},
{
"id": "portfolio-003",
"slug": "lawyernoom",
"data": {
"name": "สำนักงานกฎหมาย ตถาตา",
"url": "https://lawyernoom.com",
"category": "webdev",
"category_label": "พัฒนาเว็บไซต์",
"thumbnail": "/images/portfolio/lawyernoom.png",
"description": "สำนักงานกฎหมายโดย ทนายความ คมสัน ศรีวนิชย์ - บริการด้านคดีความ คดีแพ่ง คดีอาญา"
}
},
{
"id": "portfolio-004",
"slug": "underdog",
"data": {
"name": "Underdog Marketing",
"url": "https://underdog.run",
"category": "webdev",
"category_label": "พัฒนาเว็บไซต์",
"thumbnail": "/images/portfolio/underdog.png",
"description": "บล็อกการตลาดและการขายสไตล์ ลุยไม่ยั้ง โดย บุ้ง ดีดติ่งหู"
}
},
{
"id": "portfolio-005",
"slug": "baofuling",
"data": {
"name": "Baofuling Shop",
"url": "https://baofulingshop.com",
"category": "ecommerce",
"category_label": "อีคอมเมิร์ซ",
"thumbnail": "/images/portfolio/baofuling.png",
"description": "ร้านค้าออนไลน์ครีมบัวหิมะและผลิตภัณฑ์ความงามจีน"
}
},
{
"id": "portfolio-006",
"slug": "trainersunny",
"data": {
"name": "เทรนเนอร์ซันนี่",
"url": "https://trainersunny.com",
"category": "webdev",
"category_label": "พัฒนาเว็บไซต์",
"thumbnail": "/images/portfolio/trainersunny.png",
"description": "ผู้เชี่ยวชาญด้านการพัฒนาบุคลากรและ Soft Skill"
}
},
{
"id": "portfolio-007",
"slug": "luadjob",
"data": {
"name": "เลือดจระเข้วานิไทย",
"url": "https://เลือดจระเข้วานิไทย.com",
"category": "ecommerce",
"category_label": "อีคอมเมิร์ซ",
"thumbnail": "/images/portfolio/luadjob.png",
"description": "ตัวแทนจำหน่ายเลือดจระเข้วานิไทยอย่างเป็นทางการ"
}
},
{
"id": "portfolio-008",
"slug": "tuanthong",
"data": {
"name": "ทวนทอง 99",
"url": "https://tuanthong99.com",
"category": "ecommerce",
"category_label": "อีคอมเมิร์ซ",
"thumbnail": "/images/portfolio/tuanthong.png",
"description": "ร้านค้าออนไลน์สมุนไพรไทยคุณภาพสูง"
}
},
{
"id": "portfolio-009",
"slug": "odooportal",
"data": {
"name": "Odoo Portal",
"url": "https://odooportal.com",
"category": "marketing",
"category_label": "ที่ปรึกษาการตลาด",
"thumbnail": "/images/portfolio/odooportal.png",
"description": "ตัวแทนจำหน่าย Odoo อย่างเป็นทางการในประเทศไทย"
}
}
],
"faq": [
{
"id": "faq-001",
"slug": "service-001",
"data": { "category": "บริการ", "category_icon": "🎯", "question": "MoreminiMore ให้บริการอะไรบ้าง?", "answer": "เราให้บริการ 4 ประเภทหลัก: พัฒนาเว็บไซต์, Marketing Automation, AI Automation และ Tech Consult สำหรับธุรกิจไทย" }
},
{
"id": "faq-002",
"slug": "service-002",
"data": { "category": "บริการ", "category_icon": "🎯", "question": "สามารถสั่งทำเว็บไซต์เฉพาะประเภทได้ไหม?", "answer": "ได้ เราสามารถพัฒนาเว็บไซต์ได้ทุกประเภท ไม่ว่าจะเป็นเว็บบริษัท เว็บขายของ เว็บ Landing Page หรือระบบ Web Application" }
},
{
"id": "faq-003",
"slug": "service-003",
"data": { "category": "บริการ", "category_icon": "🎯", "question": "AI Chatbot สามารถทำอะไรได้บ้าง?", "answer": "AI Chatbot ของเราสามารถตอบคำถามลูกค้า รับออร์เดอร์ นัดหมาย และเชื่อมต่อกับระบบ CRM หรือร้านค้าออนไลน์ได้" }
},
{
"id": "faq-004",
"slug": "price-001",
"data": { "category": "ราคา", "category_icon": "💰", "question": "ราคาเริ่มต้นของการทำเว็บไซต์เท่าไหร่?", "answer": "ราคาเริ่มต้นอยู่ที่ 15,000 บาท ขึ้นอยู่กับความซับซ้อนและฟีเจอร์ที่ต้องการ เราจะประเมินและเสนอราคาหลังจากการปรึกษาฟรี" }
},
{
"id": "faq-005",
"slug": "price-002",
"data": { "category": "ราคา", "category_icon": "💰", "question": "มีราคาแพ็คเกจหรือไม่?", "answer": "มี เรามีแพ็คเกจสำหรับธุรกิจที่ต้องการเริ่มต้นอย่างง่ายๆ และแพ็คเกจสำหรับธุรกิจที่ต้องการระบบครบวงจร สามารถเลือกได้ตามความต้องการ" }
},
{
"id": "faq-006",
"slug": "price-003",
"data": { "category": "ราคา", "category_icon": "💰", "question": "ชำระเงินอย่างไร?", "answer": "รองรับการชำระเงินผ่านโอนเงินธนาคาร หรือผ่อนชำระผ่านบัตรเครดิต 3-6 งวด (มีดอกเบี้ย)" }
},
{
"id": "faq-007",
"slug": "time-001",
"data": { "category": "ระยะเวลา", "category_icon": "⏱️", "question": "ใช้เวลาพัฒนานานเท่าไหร่?", "answer": "ขึ้นอยู่กับความซับซ้อน Landing Page ใช้เวลา 1-2 สัปดาห์ เว็บไซต์ขนาดกลาง 2-4 สัปดาห์ ระบบ Web Application 4-8 สัปดาห์" }
},
{
"id": "faq-008",
"slug": "time-002",
"data": { "category": "ระยะเวลา", "category_icon": "⏱️", "question": "ถ้าต้องการด่วนได้ไหม?", "answer": "ได้ เรามีบริการด่วนพิเศษ (เพิ่มค่าใช้จ่าย 30%) สามารถส่งมอบงานได้เร็วขึ้น 50%" }
},
{
"id": "faq-009",
"slug": "support-001",
"data": { "category": "หลังการขาย", "category_icon": "💬", "question": "มีการรับประกันหรือไม่?", "answer": "เรารับประกันงาน 30 วันหลังส่งมอบ หากมีปัญหาจากการพัฒนา เราจะแก้ไขให้ฟรี" }
},
{
"id": "faq-010",
"slug": "support-002",
"data": { "category": "หลังการขาย", "category_icon": "💬", "question": "มีบริการดูแลหลังการขายไหม?", "answer": "มี เรามีแพ็คเกจดูแลรายเดือนเริ่มต้นที่ 2,000 บาท/เดือน รวมการอัพเดทเนื้อหา ปรับปรุงความปลอดภัย และ Backup" }
}
],
"blog": [
{
"id": "post-001",
"slug": "5-ways-ai-increase-sales",
"data": {
"title": "5 วิธีใช้ AI เพิ่มยอดขายให้ธุรกิจของคุณ",
"excerpt": "ค้นพบ 5 วิธีที่ AI สามารถช่วยเพิ่มยอดขายให้ธุรกิจ SMEs ไทย พร้อมตัวอย่างและแนวทางการนำไปใช้จริง",
"image": "/images/blog/5-ways-ai-increase-sales.jpg",
"date": "2026-03-11",
"category": "AI Business",
"content": {
"type": "doc",
"content": [
{ "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีที่ 1: ใช้ AI วิเคราะห์ลูกค้าและแนะนำสินค้าที่ตรงใจ" }] },
{ "type": "paragraph", "content": [{ "type": "text", "text": "หนึ่งในความสามารถที่ทรงพลังที่สุดของ AI คือการวิเคราะห์ข้อมูลลูกค้าและค้นหารูปแบบที่มนุษย์อาจมองไม่เห็น AI สามารถวิเคราะห์ว่าลูกค้าแต่ละคนชอบสินค้าประเภทไหน ซื้อในช่วงเวลาไหน และมีพฤติกรรมการซื้ออย่างไร" }] },
{ "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีที่ 2: ใช้ Chatbot ดูแลลูกค้าตลอด 24 ชั่วโมง" }] },
{ "type": "paragraph", "content": [{ "type": "text", "text": "ลูกค้าจำนวนมากต้องการได้รับคำตอบทันที ไม่ว่าจะกี่โมง แต่การจ้างพนักงานทำงาน 24 ชั่วโมงนั้นมีค่าใช้จ่ายสูง Chatbot ที่ใช้ AI สามารถตอบคำถามลูกค้าได้ตลอดเวลา โดยไม่ต้องเสียค่าล่วงเวลา" }] },
{ "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีที่ 3: ใช้ AI ส่งข้อความการตลาดในเวลาที่เหมาะสม" }] },
{ "type": "paragraph", "content": [{ "type": "text", "text": "การส่งข้อความการตลาดไม่ใช่แค่การส่งออกไปเท่านั้น แต่ต้องส่งในเวลาที่ลูกค้ามีโอกาสอ่านและตอบสนองมากที่สุด AI สามารถวิเคราะห์ว่าลูกค้าแต่ละคนมีช่วงเวลาไหนที่เปิดอ่านข้อความบ่อยที่สุด และส่งในเวลานั้น" }] },
{ "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีที่ 4: ใช้ AI สร้างเนื้อหาการตลาด" }] },
{ "type": "paragraph", "content": [{ "type": "text", "text": "เนื้อหาการตลาดที่ดีเป็นหัวใจสำคัญในการดึงดูดลูกค้า แต่การสร้างเนื้อหาที่มีคุณภาพตลอดเวลาต้องใช้เวลาและทรัพยากรมาก AI สามารถช่วยสร้างเนื้อหาได้เร็วขึ้น ไม่ว่าจะเป็นโพสต์เฟซบุ๊ก คำบรรยายสินค้า อีเมลการตลาด หรือบทความบล็อก" }] },
{ "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีที่ 5: ใช้ AI ทำนายแนวโน้มและวางแผนสินค้า" }] },
{ "type": "paragraph", "content": [{ "type": "text", "text": "การมีสินค้าคงคลงเป็นสิ่งจำเป็นสำหรับธุรกิจค้าปลีก แต่การมีสินค้ามากเกินไปก็เป็นปัญหา AI สามารถวิเคราะห์ข้อมูลยอดขายในอดีต ฤดูกาล และปัจจัยอื่นๆ เพื่อทำนายว่าควรสั่งสินค้าเท่าไหร่ในแต่ละช่วง" }] }
]
}
}
},
{
"id": "post-002",
"slug": "ai-content-google-love",
"data": {
"title": "วิธีสร้าง Content ด้วย AI ที่ Google รัก",
"excerpt": "เรียนรู้วิธีการใช้ AI ช่วยสร้างเนื้อหาการตลาดที่มีคุณภาพและได้รับการจัดอันดับดีจาก Google พร้อมเทคนิคและตัวอย่างจริง",
"image": "/images/blog/ai-content-google-love.jpg",
"date": "2026-03-10",
"category": "AI Content",
"content": {
"type": "doc",
"content": [
{ "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "ทำไม AI Content ต้องมีคุณภาพ" }] },
{ "type": "paragraph", "content": [{ "type": "text", "text": "Google มีอัลกอริทึมที่ฉลาดมาก สามารถแยกแยะได้ว่าเนื้อหาที่สร้างโดย AI มีคุณภาพหรือไม่ เนื้อหาที่ไม่มีคุณค่า สร้างขึ้นแค่เพื่อใส่คีย์เวิร์ด จะถูกลงโทษและไม่ติดอันดับ" }] },
{ "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "วิธีใช้ AI สร้างเนื้อหาที่ดี" }] },
{ "type": "paragraph", "content": [{ "type": "text", "text": "ใช้ AI เป็นผู้ช่วย ไม่ใช่ผู้เขียนทั้งหมด วิธีที่ดีที่สุดคือใช้ AI ช่วยในบางส่วน เช่น รวบรวมข้อมูล สร้างโครงสร้าง หรือเขียน draft แล้วนำมาปรับแก้ด้วยมนุษย์" }] }
]
}
}
},
{
"id": "post-003",
"slug": "ai-for-sme-thailand",
"data": {
"title": "AI สำหรับ SME ไทย: คู่มือฉบับสมบูรณ์",
"excerpt": "การใช้ AI สำหรับธุรกิจ SME ไทยเพื่อเพิ่มขีดความสามารถในการแข่งขัน พร้อมแนวทางปฏิบัติจริง",
"image": "/images/blog/ai-for-sme-thailand.jpg",
"date": "2026-03-08",
"category": "AI Business",
"content": {
"type": "doc",
"content": [
{ "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "ทำไม SME ต้องใช้ AI" }] },
{ "type": "paragraph", "content": [{ "type": "text", "text": "AI ไม่ใช่เทคโนโลยีสำหรับบริษัทใหญ่เท่านั้น ธุรกิจ SME สามารถเริ่มใช้ประโยชน์จาก AI ได้ง่ายๆ ด้วยเครื่องมือที่เข้าถึงได้" }] }
]
}
}
},
{
"id": "post-004",
"slug": "digital-transformation-guide",
"data": {
"title": "คู่มือ Digital Transformation ฉบับสมบูรณ์",
"excerpt": "การ transform ธุรกิจของคุณสู่ดิจิทัลอย่างครบวงจร ตั้งแต่การวางแผนจนถึงการ Implement",
"image": "/images/blog/digital-transformation.jpg",
"date": "2026-03-05",
"category": "Business",
"content": {
"type": "doc",
"content": [
{ "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "Digital Transformation คืออะไร" }] },
{ "type": "paragraph", "content": [{ "type": "text", "text": "Digital Transformation คือการนำเทคโนโลยีดิจิทัลมาใช้ในทุกด้านของธุรกิจ เพื่อเพิ่มประสิทธิภาพและสร้างคุณค่าใหม่ให้กับลูกค้า" }] }
]
}
}
},
{
"id": "post-005",
"slug": "marketing-automation-guide",
"data": {
"title": "Marketing Automation: คู่มือเริ่มต้น",
"excerpt": "เรียนรู้พื้นฐานของ Marketing Automation และวิธีเริ่มต้นใช้งานสำหรับธุรกิจของคุณ",
"image": "/images/blog/marketing-automation-guide.jpg",
"date": "2026-03-01",
"category": "Marketing",
"content": {
"type": "doc",
"content": [
{ "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "Marketing Automation คืออะไร" }] },
{ "type": "paragraph", "content": [{ "type": "text", "text": "Marketing Automation คือการใช้ซอฟต์แวร์เพื่อ automate การตลาดซ้ำๆ เช่น การส่งอีเมล การโพสต์โซเชียลมีเดีย และการวิเคราะห์ข้อมูล" }] }
]
}
}
}
]
}
} }

84
src/components/BlogCard.astro Normal file
View File

@@ -0,0 +1,84 @@
---
interface Props {
title: string;
excerpt: string;
image?: string;
date: Date;
slug: string;
category: string;
}
const { title, excerpt, image, date, slug, category } = Astro.props;
const formattedDate = date.toLocaleDateString('th-TH', { year: 'numeric', month: 'short', day: 'numeric' });
---
<a href={`/blog/${slug}`} class="blog-card">
<div class="blog-image">
{image && <img src={image} alt={title} loading="lazy" />}
</div>
<div class="blog-content">
<span class="blog-date">{formattedDate}</span>
<h3 class="blog-title">{title}</h3>
<p class="blog-excerpt">{excerpt}</p>
<span class="blog-link">อ่านต่อ →</span>
</div>
</a>
<style>
.blog-card {
display: block;
background: var(--color-white);
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(0,0,0,0.05);
transition: all 0.3s ease;
}
.blog-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.blog-image {
aspect-ratio: 16/9;
overflow: hidden;
background: var(--color-gray-100);
}
.blog-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.blog-card:hover .blog-image img { transform: scale(1.05); }
.blog-content { padding: 24px; }
.blog-date {
font-size: 12px;
color: var(--color-medium-gray);
margin-bottom: 8px;
display: block;
}
.blog-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
color: var(--color-black);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-excerpt {
font-size: 14px;
color: var(--color-medium-gray);
line-height: 1.6;
margin-bottom: 16px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-link {
color: var(--color-primary);
font-weight: 600;
font-size: 14px;
}
</style>

489
src/components/Footer.astro
View File

@@ -1,184 +1,449 @@
--- ---
/**
* MOREMINIMORE - FOOTER COMPONENT
* Minimal design with animated elements
*/
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
const socialLinks = [ const navLinks = [
{ label: "Facebook", href: "https://www.facebook.com/moreminimore", icon: "facebook" }, { label: 'หน้าแรก', href: '/' },
{ label: "LINE", href: "https://line.me/ti/p/~@539hdlul", icon: "line" }, { label: 'บริการ', href: '/services' },
{ label: "LinkedIn", href: "https://www.linkedin.com/company/moreminimore", icon: "linkedin" }, { label: 'ผลงาน', href: '/portfolio' },
{ label: 'บทความ', href: '/blog' },
{ label: 'ติดต่อ', href: '/contact' },
]; ];
const footerLinks = [ const serviceLinks = [
{ label: "นโยบายความเป็นส่วนตัว", href: "/privacy" }, { label: 'พัฒนาเว็บไซต์', href: '/services/webdev' },
{ label: "เงื่อนไขการใช้บริการ", href: "/terms" }, { label: 'Marketing Automation', href: '/services/marketing' },
{ label: "ติดต่อเรา", href: "/contact" }, { label: 'AI Automation', href: '/services/automation' },
{ label: 'Tech Consult', href: '/services/ai-consult' },
]; ];
--- ---
<footer class="footer"> <footer class="footer">
<!-- Background Pattern -->
<div class="footer-bg">
<div class="bg-dots"></div>
</div>
<!-- Geometric Elements -->
<div class="footer-geo">
<div class="geo-circle"></div>
<div class="geo-ring"></div>
</div>
<div class="container"> <div class="container">
<div class="footer-grid"> <div class="footer-grid">
<!-- Brand Column -->
<div class="footer-brand"> <div class="footer-brand">
<img src="/images/logo-long.png" alt="MoreminiMore" class="footer-logo" /> <a href="/" class="footer-logo">
<p class="footer-tagline"> <div class="logo-banner">
บริษัท มอร์มินิมอร์ จำกัด<br /> <img src="/images/logo-long.png" alt="MoreminiMore" class="logo-img" />
ผู้เชี่ยวชาญด้าน IT และ Digital Transformation<br /> </div>
สำหรับธุรกิจ SMEs ไทย
</p>
<div class="social-links">
{socialLinks.map((social) => (
<a href={social.href} class="social-link" aria-label={social.label} target="_blank" rel="noopener noreferrer">
<img src={`/icons/social/${social.icon}.svg`} alt={social.label} />
</a> </a>
<p class="footer-tagline">
รับทำเว็บไซต์ SEO AI Chatbot<br/>
สำหรับธุรกิจไทย
</p>
<!-- Social Links -->
<div class="footer-social">
<a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener" class="social-btn" aria-label="Facebook">
<img src="/icons/social/facebook.svg" alt="Facebook" />
</a>
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="social-btn" aria-label="LINE">
<img src="/icons/social/line.svg" alt="LINE" />
</a>
<a href="https://www.linkedin.com/company/moreminimore" target="_blank" rel="noopener" class="social-btn" aria-label="LinkedIn">
<img src="/icons/social/linkedin.svg" alt="LinkedIn" />
</a>
</div>
</div>
<!-- Navigation Links -->
<div class="footer-col">
<h4 class="footer-title">ลิงก์</h4>
<ul class="footer-links">
{navLinks.map(link => (
<li>
<a href={link.href} class="footer-link">
<span class="link-arrow">→</span>
{link.label}
</a>
</li>
))} ))}
</div>
</div>
<div class="footer-links">
<h4>ลิงก์ด่วน</h4>
<ul>
<li><a href="/">หน้าแรก</a></li>
<li><a href="/about">เกี่ยวกับเรา</a></li>
<li><a href="/portfolio">ผลงาน</a></li>
<li><a href="/blog">บทความ</a></li>
</ul> </ul>
</div> </div>
<div class="footer-links"> <!-- Services -->
<h4>บริการ</h4> <div class="footer-col">
<ul> <h4 class="footer-title">บริการ</h4>
<li><a href="/services/consult">Tech Consult</a></li> <ul class="footer-links">
<li><a href="/services/ai">AI Automation</a></li> {serviceLinks.map(link => (
<li><a href="/services/marketing">Marketing Automation</a></li> <li>
<li><a href="/services/webdev">พัฒนาเว็บไซต์</a></li> <a href={link.href} class="footer-link">
<span class="link-arrow">→</span>
{link.label}
</a>
</li>
))}
</ul> </ul>
</div> </div>
<div class="footer-contact"> <!-- Contact -->
<h4>ติดต่อ</h4> <div class="footer-col footer-contact">
<p><strong>โทร:</strong> 080-995-5945</p> <h4 class="footer-title">ติดต่อเรา</h4>
<p><strong>อีเมล:</strong> contact@moreminimore.com</p> <div class="contact-item">
<p><strong>ที่อยู่:</strong> 53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120</p> <span class="contact-icon">📞</span>
<a href="tel:0809955945">080-995-5945</a>
</div>
<div class="contact-item">
<span class="contact-icon">✉️</span>
<a href="mailto:contact@moreminimore.com">contact@moreminimore.com</a>
</div>
<div class="contact-item">
<span class="contact-icon">📍</span>
<span>สมุทรสาคร, ประเทศไทย</span>
</div>
<a href="/contact" class="btn btn-primary footer-cta">
ปรึกษาฟรี
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
</div> </div>
</div> </div>
<!-- Footer Bottom -->
<div class="footer-bottom"> <div class="footer-bottom">
<p>&copy; {currentYear} บริษัท มอร์มินิมอร์ จำกัด. สงวนลิขสิทธิ์.</p> <div class="footer-legal">
<div class="legal-links"> <p>&copy; {currentYear} MoreminiMore. สงวนลิขสิทธิ์.</p>
{footerLinks.map((link) => ( </div>
<a href={link.href}>{link.label}</a> <div class="footer-links-bottom">
))} <a href="/privacy">นโยบายความเป็นส่วนตัว</a>
<a href="/terms">เงื่อนไขการใช้บริการ</a>
</div> </div>
</div> </div>
</div> </div>
</footer> </footer>
<!-- Back to Top Button -->
<button class="back-to-top" id="back-to-top" aria-label="กลับไปด้านบน">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
<path d="M12 19V5M5 12l7-7 7 7"/>
</svg>
</button>
<style> <style>
/* ============================================
FOOTER BASE
============================================ */
.footer { .footer {
background: var(--color-light-gray); position: relative;
color: var(--color-black); background: var(--color-dark);
padding: 80px 0 40px; color: var(--color-white);
padding: 100px 0 40px;
overflow: hidden;
} }
/* ============================================
BACKGROUND
============================================ */
.footer-bg {
position: absolute;
inset: 0;
pointer-events: none;
}
.bg-dots {
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(254, 212, 0, 0.06) 1px, transparent 0);
background-size: 50px 50px;
}
/* Geometric Elements */
.footer-geo {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.geo-circle {
position: absolute;
width: 400px;
height: 400px;
background: var(--color-primary);
border-radius: 50%;
bottom: -200px;
left: -150px;
opacity: 0.03;
}
.geo-ring {
position: absolute;
width: 250px;
height: 250px;
border: 2px solid var(--color-primary);
border-radius: 50%;
top: 20%;
right: -80px;
opacity: 0.08;
}
/* ============================================
GRID
============================================ */
.footer-grid { .footer-grid {
display: grid; display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr; grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
gap: 48px; gap: 60px;
margin-bottom: 60px; padding-bottom: 60px;
position: relative;
z-index: 1;
} }
/* ============================================
BRAND - LOGO BANNER
============================================ */
.footer-logo { .footer-logo {
height: 40px; display: inline-flex;
margin-bottom: 16px; margin-bottom: 24px;
}
.logo-banner {
background: var(--color-white);
border-radius: 0 16px 16px 0;
padding: 10px 20px 10px 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.logo-img {
height: 32px;
width: auto;
display: block;
} }
.footer-tagline { .footer-tagline {
font-size: 14px; font-size: 15px;
color: var(--color-medium-gray); line-height: 1.7;
margin-bottom: 24px; color: rgba(255, 255, 255, 0.6);
line-height: 1.6; margin-bottom: 32px;
} }
.social-links { /* Social Links */
.footer-social {
display: flex; display: flex;
gap: 16px; gap: 12px;
} }
.social-link img { .social-btn {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
transition: all 0.3s var(--ease-out-expo);
}
.social-btn img {
width: 24px; width: 24px;
height: 24px; height: 24px;
opacity: 0.6; object-fit: contain;
transition: opacity 0.2s;
} }
.social-link:hover img { .social-btn:hover {
opacity: 1; background: var(--color-primary);
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(254, 212, 0, 0.3);
} }
.footer-links h4, .social-btn:hover img {
.footer-contact h4 { /* Keep original icon colors */
font-family: var(--font-heading); filter: none;
font-size: 16px;
font-weight: 600;
margin-bottom: 20px;
color: var(--color-accent);
} }
.footer-links ul { /* ============================================
COLUMNS
============================================ */
.footer-title {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--color-primary);
margin-bottom: 24px;
}
.footer-links {
list-style: none; list-style: none;
padding: 0; display: flex;
flex-direction: column;
gap: 12px;
} }
.footer-links li { .footer-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
color: rgba(255, 255, 255, 0.7);
transition: all 0.3s ease;
}
.link-arrow {
opacity: 0;
transform: translateX(-10px);
transition: all 0.3s ease;
}
.footer-link:hover {
color: var(--color-primary);
transform: translateX(8px);
}
.footer-link:hover .link-arrow {
opacity: 1;
transform: translateX(0);
}
/* ============================================
CONTACT
============================================ */
.footer-contact {
display: flex;
flex-direction: column;
}
.contact-item {
display: flex;
align-items: center;
gap: 12px;
font-size: 15px;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 12px; margin-bottom: 12px;
} }
.footer-links a { .contact-icon {
color: var(--color-medium-gray); font-size: 18px;
font-size: 14px;
transition: color 0.2s;
} }
.footer-links a:hover { .contact-item a:hover {
color: var(--color-accent); color: var(--color-primary);
} }
.footer-contact p { .footer-cta {
font-size: 14px; margin-top: auto;
color: var(--color-medium-gray); align-self: flex-start;
margin-bottom: 12px;
} }
.footer-contact strong { .footer-cta svg {
color: var(--color-black); width: 20px;
height: 20px;
transition: transform 0.3s ease;
} }
.footer-cta:hover svg {
transform: translateX(6px);
}
/* ============================================
BOTTOM
============================================ */
.footer-bottom { .footer-bottom {
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-top: 24px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
font-size: 13px; padding-top: 32px;
color: var(--color-medium-gray); border-top: 1px solid rgba(255, 255, 255, 0.08);
position: relative;
z-index: 1;
} }
.legal-links { .footer-legal p {
font-size: 14px;
color: rgba(255, 255, 255, 0.4);
}
.footer-links-bottom {
display: flex; display: flex;
gap: 24px; gap: 24px;
} }
.legal-links a { .footer-links-bottom a {
color: var(--color-medium-gray); font-size: 14px;
transition: color 0.2s; color: rgba(255, 255, 255, 0.4);
transition: color 0.3s ease;
} }
.legal-links a:hover { .footer-links-bottom a:hover {
color: var(--color-accent); color: var(--color-primary);
} }
/* ============================================
BACK TO TOP
============================================ */
.back-to-top {
position: fixed;
bottom: 32px;
right: 32px;
width: 56px;
height: 56px;
background: var(--color-primary);
color: var(--color-black);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transform: translateY(20px) scale(0.8);
transition: all 0.3s var(--ease-out-expo);
z-index: 100;
box-shadow: 0 8px 30px rgba(254, 212, 0, 0.4);
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.back-to-top:hover {
transform: translateY(-4px) scale(1.05);
box-shadow: 0 12px 40px rgba(254, 212, 0, 0.5);
}
.back-to-top svg {
width: 24px;
height: 24px;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1024px) { @media (max-width: 1024px) {
.footer-grid { .footer-grid {
grid-template-columns: 1fr 1fr; grid-template-columns: repeat(2, 1fr);
gap: 48px;
} }
.footer-brand { .footer-brand {
@@ -187,8 +452,13 @@ const footerLinks = [
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.footer {
padding: 60px 0 32px;
}
.footer-grid { .footer-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 40px;
} }
.footer-brand { .footer-brand {
@@ -201,9 +471,28 @@ const footerLinks = [
text-align: center; text-align: center;
} }
.legal-links { .back-to-top {
flex-wrap: wrap; bottom: 20px;
justify-content: center; right: 20px;
width: 48px;
height: 48px;
} }
} }
</style> </style>
<script>
// Back to top functionality
const backToTop = document.getElementById('back-to-top');
window.addEventListener('scroll', () => {
if (window.scrollY > 600) {
backToTop?.classList.add('visible');
} else {
backToTop?.classList.remove('visible');
}
});
backToTop?.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
</script>

864
src/components/Hero.astro
View File

@@ -1,465 +1,611 @@
--- ---
/**
* MOREMINIMORE - KINETIC HERO COMPONENT
* Typography IS the hero - No images, just bold text
*/
interface Props { interface Props {
badge?: string;
title: string; title: string;
subtitle?: string; subtitle?: string;
badge?: string;
image?: string;
theme?: 'yellow' | 'accent';
showCTA?: boolean; showCTA?: boolean;
ctaText?: string; ctaText?: string;
ctaLink?: string; ctaLink?: string;
variant?: 'split' | 'centered' | 'image-bg' | 'text-only' | 'floating-cards';
size?: 'full' | 'compact';
} }
const { const {
title, badge = "ดิจิทัลเอเจนซี่ในประเทศไทย",
subtitle, title = "เปลี่ยนธุรกิจของคุณ ด้วย AI และเทคโนโลยีสมัยใหม่",
badge, subtitle = "รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย | เพิ่มยอดขาย ลดต้นทุน ด้วยเทคโนโลยีล้ำสมัย",
image = "/images/hero/hero.jpg",
theme = 'yellow',
showCTA = true, showCTA = true,
ctaText = "เริ่มต้นวันนี้", ctaText = "เริ่มต้นวันนี้",
ctaLink = "/contact", ctaLink = "/contact",
variant = 'split',
size = 'compact'
} = Astro.props; } = Astro.props;
// Split title into words for kinetic animation
const titleWords = title.split(' '); const titleWords = title.split(' ');
--- ---
<section class={`hero hero-${theme} hero-variant-${variant} hero-size-${size}`}> <section class="kinetic-hero">
{variant === 'image-bg' && ( <!-- Animated Background Pattern -->
<div class="hero-image-bg"> <div class="hero-bg">
<img src={image} alt="" class="hero-bg-img" /> <div class="bg-grid"></div>
<div class="hero-bg-overlay"></div> <div class="bg-gradient"></div>
</div> </div>
)}
<div class="hero-bg-pattern"></div> <!-- Floating Geometric Elements -->
<div class="hero-geometric">
<div class="geo-circle geo-1"></div>
<div class="geo-circle geo-2"></div>
<div class="geo-circle geo-3"></div>
<div class="geo-ring ring-1"></div>
<div class="geo-ring ring-2"></div>
<div class="geo-line line-1"></div>
<div class="geo-line line-2"></div>
</div>
<div class="container hero-container"> <div class="container hero-container">
{variant === 'split' && ( <!-- Badge -->
<> <div class="hero-badge" data-animate="fade-in">
<div class="hero-content"> <span class="badge-dot"></span>
{badge && <span class="hero-badge">{badge}</span>} {badge}
</div>
<!-- Main Title - Kinetic Typography -->
<h1 class="hero-title"> <h1 class="hero-title">
{titleWords.map((word, i) => ( {titleWords.map((word, index) => (
<span class="hero-title-word" style={`animation-delay: ${0.1 + i * 0.06}s`}>{word}</span> <span class="word-wrapper">
<span
class="word"
style={`--delay: ${0.4 + index * 0.12}s`}
>
{word}
</span>
</span>
))} ))}
</h1> </h1>
{subtitle && <p class="hero-subtitle" set:html={subtitle} />}
<!-- Accent Line -->
<div class="hero-accent-line">
<div class="accent-fill"></div>
</div>
<!-- Subtitle -->
<p class="hero-subtitle" data-animate="fade-in-up">
<Fragment set:html={subtitle} />
</p>
<!-- CTA Buttons -->
{showCTA && ( {showCTA && (
<div class="hero-actions"> <div class="hero-actions" data-animate="fade-in-up">
<a href={ctaLink} class="btn btn-dark btn-lg">{ctaText}</a> <a href={ctaLink} class="btn btn-primary btn-magnetic">
<a href="/portfolio" class="btn btn-outline-dark btn-lg">ดูผลงาน</a> <span class="btn-text">{ctaText}</span>
<svg class="btn-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
<a href="/portfolio" class="btn btn-outline btn-dark">
ดูผลงาน
</a>
</div> </div>
)} )}
</div> </div>
<div class="hero-visual">
<div class="hero-image-wrapper">
<div class="hero-image-border"></div>
<img src={image} alt="Hero" class="hero-image" />
</div>
<div class="hero-floating hero-floating-1">
<span class="floating-number">50+</span>
<span class="floating-label">โปรเจกต์</span>
</div>
<div class="hero-floating hero-floating-2">
<span class="floating-number">5+</span>
<span class="floating-label">ปีประสบการณ์</span>
</div>
</div>
</>
)}
{variant === 'centered' && (
<div class="hero-content centered">
{badge && <span class="hero-badge">{badge}</span>}
<h1 class="hero-title">
{titleWords.map((word, i) => (
<span class="hero-title-word" style={`animation-delay: ${0.1 + i * 0.06}s`}>{word}</span>
))}
</h1>
{subtitle && <p class="hero-subtitle" set:html={subtitle} />}
{showCTA && (
<div class="hero-actions centered">
<a href={ctaLink} class="btn btn-dark btn-lg">{ctaText}</a>
<a href="/portfolio" class="btn btn-outline-dark btn-lg">ดูผลงาน</a>
</div>
)}
{size === 'full' && (
<div class="hero-center-image">
<img src={image} alt="" />
</div>
)}
</div>
)}
{variant === 'text-only' && (
<div class="hero-content text-only">
<span class="hero-badge">{badge || 'บริการ'}</span>
<h1 class="hero-title text-only-title">
{titleWords.map((word, i) => (
<span class="hero-title-word" style={`animation-delay: ${0.1 + i * 0.08}s`}>{word}</span>
))}
</h1>
{subtitle && <p class="hero-subtitle text-only-sub" set:html={subtitle} />}
{showCTA && (
<div class="hero-actions">
<a href={ctaLink} class="btn btn-dark btn-lg">{ctaText}</a>
</div>
)}
</div>
)}
{variant === 'floating-cards' && (
<>
<div class="hero-content">
{badge && <span class="hero-badge">{badge}</span>}
<h1 class="hero-title">
{titleWords.map((word, i) => (
<span class="hero-title-word" style={`animation-delay: ${0.1 + i * 0.06}s`}>{word}</span>
))}
</h1>
{subtitle && <p class="hero-subtitle" set:html={subtitle} />}
</div>
{size === 'full' && (
<div class="hero-cards-visual">
<div class="hero-mini-card card-1">
<span class="mini-icon">🌐</span>
<span class="mini-text">เว็บไซต์</span>
</div>
<div class="hero-mini-card card-2">
<span class="mini-icon">🤖</span>
<span class="mini-text">AI Chatbot</span>
</div>
<div class="hero-mini-card card-3">
<span class="mini-icon">📈</span>
<span class="mini-text">Marketing</span>
</div>
<div class="hero-mini-card card-4">
<span class="mini-icon">💡</span>
<span class="mini-text">Consult</span>
</div>
</div>
)}
</>
)}
</div>
{size === 'full' && ( <!-- Giant Background Typography -->
<div class="hero-bg-text" aria-hidden="true">
AI
</div>
<!-- Scroll Indicator -->
<div class="scroll-indicator">
<span class="scroll-text">เลื่อนลง</span>
<div class="scroll-line">
<div class="scroll-dot"></div>
</div>
</div>
<!-- Wave Transition -->
<div class="hero-wave"> <div class="hero-wave">
<svg viewBox="0 0 1440 120" fill="none" preserveAspectRatio="none"> <svg viewBox="0 0 1440 100" fill="none" preserveAspectRatio="none">
<path d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H0Z" fill="currentColor"/> <path d="M0 50C240 100 480 0 720 50C960 100 1200 0 1440 50V100H0V50Z" fill="#ffffff"/>
</svg> </svg>
</div> </div>
)}
</section> </section>
<style> <style>
.hero { /* ============================================
HERO BASE
============================================ */
.kinetic-hero {
position: relative; position: relative;
min-height: 100vh;
display: flex; display: flex;
flex-direction: column; align-items: center;
justify-content: center; background: var(--color-dark);
overflow: hidden; overflow: hidden;
padding-top: 80px;
} }
.hero-size-full { /* ============================================
min-height: 90vh; BACKGROUND
} ============================================ */
.hero-size-compact { .hero-bg {
min-height: auto;
padding-top: 120px;
padding-bottom: 60px;
}
.hero-yellow { background: var(--color-primary); color: var(--color-black); }
.hero-accent { background: var(--color-accent); color: var(--color-white); }
/* Background Pattern */
.hero-bg-pattern {
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 2px 2px, rgba(0,0,0,0.05) 1px, transparent 0);
background-size: 40px 40px;
pointer-events: none;
}
/* Image Background Variant */
.hero-image-bg {
position: absolute; position: absolute;
inset: 0; inset: 0;
z-index: 0; z-index: 0;
} }
.hero-bg-img {
width: 100%; .bg-grid {
height: 100%;
object-fit: cover;
}
.hero-bg-overlay {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: linear-gradient(135deg, rgba(254,212,0,0.95) 0%, rgba(254,212,0,0.8) 50%, rgba(254,212,0,0.6) 100%); background-image:
} linear-gradient(rgba(254, 212, 0, 0.03) 1px, transparent 1px),
.hero-variant-image-bg .hero-container { linear-gradient(90deg, rgba(254, 212, 0, 0.03) 1px, transparent 1px);
position: relative; background-size: 60px 60px;
z-index: 1; animation: gridMove 20s linear infinite;
} }
/* Container */ @keyframes gridMove {
0% { transform: translate(0, 0); }
100% { transform: translate(60px, 60px); }
}
.bg-gradient {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 30% 20%, rgba(254, 212, 0, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(254, 212, 0, 0.05) 0%, transparent 50%);
}
/* ============================================
GEOMETRIC ELEMENTS
============================================ */
.hero-geometric {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.geo-circle {
position: absolute;
border-radius: 50%;
background: var(--color-primary);
}
.geo-1 {
width: 400px;
height: 400px;
top: -100px;
right: 10%;
opacity: 0.05;
animation: floatGeo1 12s ease-in-out infinite;
}
.geo-2 {
width: 250px;
height: 250px;
bottom: 10%;
left: -50px;
opacity: 0.08;
animation: floatGeo2 10s ease-in-out infinite;
}
.geo-3 {
width: 150px;
height: 150px;
top: 40%;
right: 30%;
opacity: 0.04;
animation: floatGeo3 8s ease-in-out infinite;
}
@keyframes floatGeo1 {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(-30px, -50px) rotate(45deg); }
}
@keyframes floatGeo2 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(40px, -30px); }
}
@keyframes floatGeo3 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-20px, 30px) scale(1.1); }
}
.geo-ring {
position: absolute;
border: 2px solid var(--color-primary);
border-radius: 50%;
opacity: 0.1;
}
.ring-1 {
width: 300px;
height: 300px;
top: 10%;
left: 60%;
animation: rotateRing 20s linear infinite;
}
.ring-2 {
width: 180px;
height: 180px;
bottom: 20%;
right: 20%;
animation: rotateRing 15s linear infinite reverse;
}
@keyframes rotateRing {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.geo-line {
position: absolute;
background: var(--color-primary);
opacity: 0.1;
}
.line-1 {
width: 200px;
height: 2px;
top: 25%;
right: 15%;
animation: lineSlide 8s ease-in-out infinite;
}
.line-2 {
width: 2px;
height: 150px;
bottom: 30%;
left: 25%;
animation: lineSlide 10s ease-in-out infinite reverse;
}
@keyframes lineSlide {
0%, 100% { transform: translateX(0); opacity: 0.1; }
50% { transform: translateX(30px); opacity: 0.2; }
}
/* ============================================
CONTAINER & CONTENT
============================================ */
.hero-container { .hero-container {
display: grid;
gap: 60px;
align-items: center;
padding: 40px var(--gutter);
position: relative; position: relative;
z-index: 1; z-index: 1;
padding: 120px var(--gutter) 100px;
max-width: 1200px;
} }
.hero-size-full .hero-container { /* ============================================
min-height: 80vh; BADGE
padding: 60px var(--gutter); ============================================ */
}
.hero-size-compact .hero-container {
min-height: auto;
}
.hero-variant-split .hero-container {
grid-template-columns: 1fr 1fr;
}
.hero-variant-centered .hero-container {
grid-template-columns: 1fr;
text-align: center;
justify-items: center;
}
.hero-variant-text-only .hero-container {
grid-template-columns: 1fr;
text-align: center;
justify-items: center;
}
.hero-variant-floating-cards .hero-container {
grid-template-columns: 1fr 1fr;
}
/* Content */
.hero-content { position: relative; }
.hero-content.centered { display: flex; flex-direction: column; align-items: center; }
.hero-content.text-only { display: flex; flex-direction: column; align-items: center; max-width: 900px; margin: 0 auto; }
.hero-badge { .hero-badge {
display: inline-block; display: inline-flex;
background: var(--color-black); align-items: center;
color: var(--color-primary); gap: 12px;
padding: 10px 24px; padding: 12px 24px;
border-radius: 30px; background: rgba(254, 212, 0, 0.15);
border: 1px solid rgba(254, 212, 0, 0.3);
border-radius: var(--radius-full);
font-family: var(--font-display);
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
font-family: var(--font-heading);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 2px; letter-spacing: 3px;
margin-bottom: 20px; color: var(--color-primary);
animation: slideIn 0.6s ease forwards; margin-bottom: 40px;
opacity: 0;
animation: fadeIn 0.6s var(--ease-out-expo) 0.2s forwards;
} }
.badge-dot {
width: 8px;
height: 8px;
background: var(--color-primary);
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.5); opacity: 0.5; }
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================
KINETIC TITLE
============================================ */
.hero-title { .hero-title {
font-size: clamp(28px, 4vw, 56px); font-family: var(--font-display);
font-weight: 800; font-size: clamp(40px, 8vw, 90px);
line-height: 1.1; font-weight: 900;
margin-bottom: 16px; line-height: 1;
display: flex; letter-spacing: -0.02em;
flex-wrap: wrap; text-transform: uppercase;
gap: 0.25em; color: var(--color-white);
}
.hero-size-full .hero-title {
font-size: clamp(32px, 5vw, 64px);
margin-bottom: 20px;
}
.hero-title-word {
display: inline-block;
opacity: 0;
transform: translateY(50px);
animation: slideUp 0.7s ease forwards;
}
.hero-subtitle {
font-size: 16px;
line-height: 1.7;
max-width: 520px;
margin-bottom: 24px;
opacity: 0;
animation: fadeIn 0.8s ease 0.4s forwards;
}
.hero-size-full .hero-subtitle {
font-size: 18px;
margin-bottom: 32px; margin-bottom: 32px;
} }
.hero-content.centered .hero-subtitle, .word-wrapper {
.hero-content.text-only .hero-subtitle { display: inline-block;
text-align: center; overflow: hidden;
}
.word {
display: inline-block;
opacity: 0;
transform: translateY(100%) skewY(10deg);
animation: wordReveal 0.9s var(--ease-out-expo) forwards;
animation-delay: var(--delay);
}
@keyframes wordReveal {
0% {
opacity: 0;
transform: translateY(100%) skewY(10deg);
}
60% {
opacity: 1;
transform: translateY(-5%) skewY(-2deg);
}
100% {
opacity: 1;
transform: translateY(0) skewY(0);
}
}
/* ============================================
ACCENT LINE
============================================ */
.hero-accent-line {
width: 200px;
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
margin-bottom: 32px;
overflow: hidden;
opacity: 0;
animation: fadeIn 0.6s var(--ease-out-expo) 1s forwards;
}
.accent-fill {
width: 100%;
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transform-origin: left;
animation: accentDraw 1s var(--ease-out-expo) 1.2s forwards;
transform: scaleX(0);
}
@keyframes accentDraw {
to { transform: scaleX(1); }
}
/* ============================================
SUBTITLE
============================================ */
.hero-subtitle {
font-size: 20px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.7);
max-width: 600px; max-width: 600px;
margin-bottom: 48px;
opacity: 0;
animation: fadeInUp 0.8s var(--ease-out-expo) 0.8s forwards;
} }
/* Text Only Variant */ @keyframes fadeInUp {
.text-only-title { from {
font-size: clamp(32px, 6vw, 72px); opacity: 0;
text-align: center; transform: translateY(30px);
justify-content: center; }
to {
opacity: 1;
transform: translateY(0);
}
} }
.hero-size-full .text-only-title { /* ============================================
font-size: clamp(40px, 8vw, 96px); CTA BUTTONS
} ============================================ */
.text-only-sub {
font-size: 18px;
max-width: 700px;
}
/* Actions */
.hero-actions { .hero-actions {
display: flex; display: flex;
gap: 16px; gap: 20px;
flex-wrap: wrap; flex-wrap: wrap;
opacity: 0; opacity: 0;
animation: fadeIn 0.8s ease 0.6s forwards; animation: fadeInUp 0.8s var(--ease-out-expo) 1s forwards;
} }
.hero-actions.centered { justify-content: center; }
@keyframes slideIn { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } .btn-magnetic {
@keyframes slideUp { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { to { opacity: 1; } }
/* Buttons */
.btn-lg { padding: 16px 32px; font-size: 15px; }
.hero-size-full .btn-lg { padding: 18px 40px; font-size: 16px; }
.btn-dark { background: var(--color-black); color: var(--color-primary); border: none; }
.btn-dark:hover { background: var(--color-dark-gray); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.btn-outline-dark { background: transparent; color: var(--color-black); border: 2px solid var(--color-black); }
.btn-outline-dark:hover { background: var(--color-black); color: var(--color-primary); }
/* Visual / Image */
.hero-visual {
position: relative; position: relative;
display: flex; padding: 24px 48px;
justify-content: center; font-size: 16px;
align-items: center;
opacity: 0;
animation: fadeIn 1s ease 0.3s forwards;
} }
.hero-image-wrapper { position: relative; width: 100%; max-width: 420px; } .btn-arrow {
.hero-image-border { width: 24px;
position: absolute; height: 24px;
inset: -15px; transition: transform 0.3s var(--ease-out-expo);
border: 4px solid var(--color-black);
border-radius: 25px;
opacity: 0.2;
transform: rotate(3deg);
} }
.hero-image { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 30px 60px rgba(0,0,0,0.2); position: relative; z-index: 1; }
/* Floating Elements */ .btn-magnetic:hover .btn-arrow {
.hero-floating { transform: translateX(8px);
position: absolute;
background: var(--color-black);
color: var(--color-primary);
padding: 14px 20px;
border-radius: 14px;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 15px 40px rgba(0,0,0,0.2);
z-index: 2;
animation: float 4s ease-in-out infinite;
} }
.hero-floating-1 { top: 10%; right: -15px; animation-delay: 0s; }
.hero-floating-2 { bottom: 15%; left: -20px; animation-delay: 2s; }
.floating-number { font-family: var(--font-heading); font-size: 24px; font-weight: 800; line-height: 1; }
.hero-floating-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.8; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .btn-outline.btn-dark {
background: transparent;
/* Centered Variant Image */ color: var(--color-white);
.hero-center-image { border: 2px solid var(--color-white);
margin-top: 32px;
max-width: 500px;
opacity: 0;
animation: fadeIn 1s ease 0.5s forwards;
} }
.hero-center-image img { width: 100%; border-radius: 16px; box-shadow: 0 25px 50px rgba(0,0,0,0.15); }
/* Floating Cards Visual */ .btn-outline.btn-dark:hover {
.hero-cards-visual {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
padding: 16px;
}
.hero-mini-card {
background: var(--color-white); background: var(--color-white);
border-radius: 16px; color: var(--color-dark);
padding: 24px; }
/* ============================================
BACKGROUND TEXT
============================================ */
.hero-bg-text {
position: absolute;
right: -5%;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-display);
font-size: clamp(200px, 30vw, 400px);
font-weight: 900;
text-transform: uppercase;
color: var(--color-white);
opacity: 0.02;
pointer-events: none;
user-select: none;
line-height: 1;
}
/* ============================================
SCROLL INDICATOR
============================================ */
.scroll-indicator {
position: absolute;
bottom: 120px;
left: 50%;
transform: translateX(-50%);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 10px; gap: 12px;
box-shadow: 0 15px 40px rgba(0,0,0,0.1); opacity: 0;
transition: transform 0.3s; animation: fadeIn 0.6s var(--ease-out-expo) 1.5s forwards;
} }
.hero-mini-card:hover { transform: translateY(-8px); }
.hero-mini-card.card-2 { background: var(--color-accent); color: var(--color-white); }
.hero-mini-card.card-4 { background: var(--color-black); color: var(--color-primary); }
.mini-icon { font-size: 32px; }
.mini-text { font-family: var(--font-heading); font-weight: 600; font-size: 13px; }
/* Wave */ .scroll-text {
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 3px;
color: rgba(255, 255, 255, 0.5);
}
.scroll-line {
width: 2px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
border-radius: 1px;
position: relative;
overflow: hidden;
}
.scroll-dot {
width: 4px;
height: 4px;
background: var(--color-primary);
border-radius: 50%;
position: absolute;
left: -1px;
animation: scrollDot 2s ease-in-out infinite;
}
@keyframes scrollDot {
0% { top: 0; opacity: 1; }
80% { top: 100%; opacity: 0; }
100% { top: 100%; opacity: 0; }
0% { top: 0; opacity: 1; }
}
/* ============================================
WAVE
============================================ */
.hero-wave { .hero-wave {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 70px; height: 100px;
color: var(--color-white); z-index: 2;
pointer-events: none;
} }
.hero-wave svg { width: 100%; height: 100%; }
/* Responsive */ .hero-wave svg {
width: 100%;
height: 100%;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1024px) { @media (max-width: 1024px) {
.hero-container { grid-template-columns: 1fr; gap: 32px; text-align: center; } .hero-title {
.hero-content.centered, .hero-content.text-only { align-items: center; } font-size: clamp(32px, 7vw, 64px);
.hero-subtitle { margin: 0 auto 24px; } }
.hero-actions { justify-content: center; }
.hero-visual { order: -1; max-width: 350px; margin: 0 auto; } .hero-container {
.hero-floating { padding: 10px 16px; } padding: 100px var(--gutter) 80px;
.floating-number { font-size: 20px; } }
.hero-floating-1 { right: 0; }
.hero-floating-2 { left: 0; } .hero-bg-text {
.hero-variant-floating-cards .hero-container { grid-template-columns: 1fr; } display: none;
.hero-cards-visual { max-width: 350px; margin: 0 auto; } }
.scroll-indicator {
bottom: 100px;
}
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.hero-title { font-size: clamp(24px, 7vw, 40px); } .hero-title {
.text-only-title { font-size: clamp(28px, 9vw, 56px); } font-size: clamp(28px, 9vw, 48px);
.hero-actions { flex-direction: column; width: 100%; } }
.btn-lg { width: 100%; justify-content: center; }
.hero-image-wrapper { max-width: 260px; } .hero-subtitle {
.hero-image-border { inset: -8px; } font-size: 16px;
.hero-cards-visual { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px; } }
.hero-mini-card { padding: 16px; }
.mini-icon { font-size: 24px; } .hero-actions {
flex-direction: column;
width: 100%;
}
.btn {
width: 100%;
justify-content: center;
}
.hero-badge {
font-size: 11px;
padding: 10px 16px;
}
.hero-accent-line {
width: 120px;
}
.scroll-indicator {
display: none;
}
.hero-wave {
height: 60px;
}
} }
</style> </style>

599
src/components/Navigation.astro
View File

@@ -1,274 +1,537 @@
--- ---
const navItems = [ /**
{ label: "หน้าแรก", href: "/" }, * MOREMINIMORE - NAVIGATION COMPONENT
{ label: "เกี่ยวกับเรา", href: "/about" }, * Morphing navigation with submenus
{ */
label: "บริการ",
submenu: [ const services = [
{ label: "Tech Consult", href: "/services/consult" }, { label: 'Website Development', href: '/services/webdev' },
{ label: "AI Automation", href: "/services/ai" }, { label: 'Marketing Automation', href: '/services/marketing' },
{ label: "Marketing Automation", href: "/services/marketing" }, { label: 'AI Automation', href: '/services/automation' },
{ label: "พัฒนาเว็บไซต์", href: "/services/webdev" }, { label: 'Tech Consult', href: '/services/ai-consult' },
]
},
{ label: "ผลงาน", href: "/portfolio" },
{ label: "บทความ", href: "/blog" },
{ label: "ติดต่อ", href: "/contact" },
]; ];
const currentPath = Astro.url.pathname;
--- ---
<header class="header"> <header class="nav" id="nav">
<nav class="nav container"> <div class="nav-container container">
<a href="/" class="logo"> <!-- Logo with Banner Style -->
<a href="/" class="nav-logo">
<div class="logo-banner">
<img src="/images/logo-long.png" alt="MoreminiMore" class="logo-img" /> <img src="/images/logo-long.png" alt="MoreminiMore" class="logo-img" />
</div>
</a> </a>
<ul class="nav-links">
{navItems.map((item) => ( <!-- Desktop Navigation -->
<li class:list={["nav-item", { "has-submenu": item.submenu }]}> <nav class="nav-desktop">
{item.submenu ? ( <a href="/" class="nav-link" data-magnetic>หน้าแรก</a>
<>
<span class="nav-link nav-dropdown"> <!-- Services with Submenu -->
{item.label} <div class="nav-dropdown">
<svg class="dropdown-arrow" width="12" height="12" viewBox="0 0 12 12" fill="none"> <a href="/services" class="nav-link nav-dropdown-trigger" data-magnetic>
<path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> บริการ
<svg class="dropdown-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 9l6 6 6-6"/>
</svg> </svg>
</span>
<ul class="submenu">
{item.submenu.map((sub) => (
<li>
<a href={sub.href} class="submenu-link">{sub.label}</a>
</li>
))}
</ul>
</>
) : (
<a
href={item.href}
class:list={["nav-link", { active: currentPath === item.href }]}
>
{item.label}
</a> </a>
)} <div class="nav-dropdown-menu">
</li> {services.map(service => (
<a href={service.href} class="dropdown-item">
{service.label}
</a>
))} ))}
</ul> </div>
<a href="/contact" class="btn btn-primary nav-cta">ปรึกษาฟรี</a> </div>
<button class="mobile-menu-btn" aria-label="Toggle menu">
<span></span> <a href="/portfolio" class="nav-link" data-magnetic>ผลงาน</a>
<span></span> <a href="/blog" class="nav-link" data-magnetic>บทความ</a>
<span></span> <a href="/about" class="nav-link" data-magnetic>เกี่ยวกับเรา</a>
</button> <a href="/contact" class="nav-link nav-cta" data-magnetic>ติดต่อเรา</a>
</nav> </nav>
<!-- Mobile Menu Toggle -->
<button class="nav-toggle" id="nav-toggle" aria-label="Toggle menu">
<span class="toggle-line"></span>
<span class="toggle-line"></span>
<span class="toggle-line"></span>
</button>
</div>
<!-- Mobile Navigation Overlay -->
<div class="nav-mobile-overlay" id="nav-mobile">
<nav class="nav-mobile-content">
<a href="/" class="mobile-link">หน้าแรก</a>
<!-- Mobile Services with Submenu -->
<div class="mobile-dropdown">
<button class="mobile-dropdown-trigger">
บริการ
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 9l6 6 6-6"/>
</svg>
</button>
<div class="mobile-dropdown-content">
{services.map(service => (
<a href={service.href} class="mobile-link mobile-sublink">{service.label}</a>
))}
</div>
</div>
<a href="/portfolio" class="mobile-link">ผลงาน</a>
<a href="/blog" class="mobile-link">บทความ</a>
<a href="/about" class="mobile-link">เกี่ยวกับเรา</a>
<a href="/contact" class="mobile-link mobile-cta">ติดต่อเรา</a>
</nav>
</div>
</header> </header>
<!-- Scroll Progress Bar -->
<div class="scroll-progress" id="scroll-progress"></div>
<style> <style>
.header { /* ============================================
NAVIGATION BASE
============================================ */
.nav {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: 1000; z-index: 1000;
background: rgba(255, 255, 255, 0.98); padding: 16px 0;
backdrop-filter: blur(10px); transition: all 0.4s var(--ease-out-expo);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
} }
.nav { .nav.scrolled {
padding: 12px 0;
background: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(254, 212, 0, 0.1);
}
/* ============================================
CONTAINER
============================================ */
.nav-container {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 80px; }
/* ============================================
LOGO BANNER
============================================ */
.nav-logo {
display: flex;
align-items: center;
z-index: 1001;
}
.logo-banner {
background: var(--color-white);
border-radius: 0 0 12px 12px;
padding: 8px 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.logo-banner:hover {
transform: scale(1.02);
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}
.nav.scrolled .logo-banner {
border-radius: 0 0 8px 8px;
padding: 6px 12px;
} }
.logo-img { .logo-img {
height: 40px; height: 36px;
width: auto; width: auto;
display: block;
} }
.nav-links { .nav.scrolled .logo-img {
height: 28px;
}
/* ============================================
DESKTOP NAVIGATION
============================================ */
.nav-desktop {
display: flex; display: flex;
list-style: none; align-items: center;
gap: 4px; gap: 4px;
} }
.nav-item {
position: relative;
}
.nav-link { .nav-link {
font-family: var(--font-heading); position: relative;
font-weight: 500;
font-size: 15px;
color: var(--color-black);
padding: 12px 16px; padding: 12px 16px;
border-radius: 8px; font-family: var(--font-display);
transition: all 0.2s; font-size: 13px;
cursor: pointer; font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--color-white);
transition: color 0.3s ease;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
} }
.nav-link:hover { .nav-link:hover {
background: var(--color-light-gray); color: var(--color-primary);
} }
.nav-link.active { .nav-cta {
color: var(--color-accent); background: var(--color-primary);
color: var(--color-black) !important;
border-radius: var(--radius-md);
margin-left: 16px;
transition: all 0.3s var(--ease-out-expo);
}
.nav-cta:hover {
background: var(--color-primary-dark);
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(254, 212, 0, 0.4);
}
/* ============================================
DROPDOWN
============================================ */
.nav-dropdown {
position: relative;
}
.nav-dropdown-trigger {
cursor: pointer;
} }
.dropdown-arrow { .dropdown-arrow {
transition: transform 0.2s; width: 16px;
height: 16px;
transition: transform 0.3s ease;
} }
.has-submenu:hover .dropdown-arrow { .nav-dropdown:hover .dropdown-arrow {
transform: rotate(180deg); transform: rotate(180deg);
} }
/* Submenu */ .nav-dropdown-menu {
.submenu {
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; left: 50%;
background: var(--color-white); transform: translateX(-50%) translateY(10px);
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
padding: 12px 0;
min-width: 220px; min-width: 220px;
background: var(--color-dark);
border-radius: var(--radius-lg);
padding: 12px 0;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transform: translateY(-10px); transition: all 0.3s var(--ease-out-expo);
transition: all 0.3s ease; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(0, 0, 0, 0.08); border: 1px solid rgba(254, 212, 0, 0.1);
list-style: none;
} }
.has-submenu:hover .submenu { .nav-dropdown:hover .nav-dropdown-menu {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
transform: translateY(0); transform: translateX(-50%) translateY(0);
} }
.submenu li { .dropdown-item {
margin: 0;
}
.submenu-link {
display: block; display: block;
padding: 12px 20px;
font-family: var(--font-heading);
font-size: 14px;
color: var(--color-black);
transition: all 0.2s;
}
.submenu-link:hover {
background: var(--color-accent);
color: var(--color-white);
border-radius: 0;
}
.nav-cta {
padding: 12px 24px; padding: 12px 24px;
font-size: 14px; font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
transition: all 0.2s ease;
} }
.mobile-menu-btn { .dropdown-item:hover {
background: rgba(254, 212, 0, 0.1);
color: var(--color-primary);
}
/* ============================================
MOBILE TOGGLE
============================================ */
.nav-toggle {
display: none; display: none;
flex-direction: column; flex-direction: column;
justify-content: center;
gap: 5px; gap: 5px;
width: 44px;
height: 44px;
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
padding: 8px; z-index: 1001;
padding: 10px;
} }
.mobile-menu-btn span { .toggle-line {
display: block;
width: 24px; width: 24px;
height: 2px; height: 2px;
background: var(--color-black); background: var(--color-white);
transition: all 0.3s; border-radius: 2px;
transition: all 0.3s var(--ease-out-expo);
} }
@media (max-width: 1024px) { .nav-toggle.active .toggle-line:nth-child(1) {
.nav-links { transform: rotate(45deg) translate(5px, 5px);
display: none; }
position: absolute;
top: 80px; .nav-toggle.active .toggle-line:nth-child(2) {
opacity: 0;
transform: translateX(-10px);
}
.nav-toggle.active .toggle-line:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* ============================================
MOBILE OVERLAY
============================================ */
.nav-mobile-overlay {
position: fixed;
top: 0;
left: 0; left: 0;
right: 0; right: 0;
background: var(--color-white); bottom: 0;
background: var(--color-dark);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.4s var(--ease-out-expo);
z-index: 999;
}
.nav-mobile-overlay.active {
opacity: 1;
visibility: visible;
}
.nav-mobile-content {
display: flex;
flex-direction: column; flex-direction: column;
padding: 20px; align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); gap: 8px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); padding: 40px;
}
.nav-links.active {
display: flex;
}
.nav-cta {
display: none;
}
.mobile-menu-btn {
display: flex;
}
.nav-item {
width: 100%; width: 100%;
} }
.nav-link { .mobile-link {
display: flex; font-family: var(--font-display);
justify-content: space-between; font-size: 28px;
font-weight: 800;
color: var(--color-white);
text-transform: uppercase;
letter-spacing: 2px;
padding: 14px 32px;
transition: all 0.3s ease;
opacity: 0;
transform: translateY(20px);
width: 100%; width: 100%;
text-align: center;
} }
.submenu { .nav-mobile-overlay.active .mobile-link {
position: static; opacity: 1;
box-shadow: none; transform: translateY(0);
padding-left: 20px; }
.nav-mobile-overlay.active .mobile-link:nth-child(1) { transition-delay: 0.1s; }
.nav-mobile-overlay.active .mobile-link:nth-child(2) { transition-delay: 0.15s; }
.nav-mobile-overlay.active .mobile-link:nth-child(3) { transition-delay: 0.2s; }
.nav-mobile-overlay.active .mobile-link:nth-child(4) { transition-delay: 0.25s; }
.nav-mobile-overlay.active .mobile-link:nth-child(5) { transition-delay: 0.3s; }
.nav-mobile-overlay.active .mobile-link:nth-child(6) { transition-delay: 0.35s; }
.mobile-link:hover {
color: var(--color-primary);
transform: translateX(10px);
}
.mobile-cta {
background: var(--color-primary);
color: var(--color-black) !important;
border-radius: var(--radius-lg);
margin-top: 20px;
}
/* ============================================
MOBILE DROPDOWN
============================================ */
.mobile-dropdown {
width: 100%;
text-align: center;
}
.mobile-dropdown-trigger {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 14px 32px;
background: none;
border: none; border: none;
background: transparent; font-family: var(--font-display);
font-size: 28px;
font-weight: 800;
color: var(--color-white);
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
transition: color 0.3s ease;
opacity: 0;
transform: translateY(20px);
}
.mobile-dropdown-trigger svg {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
.mobile-dropdown.open .mobile-dropdown-trigger {
color: var(--color-primary);
}
.mobile-dropdown.open .mobile-dropdown-trigger svg {
transform: rotate(180deg);
}
.mobile-dropdown-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s var(--ease-out-expo);
}
.mobile-dropdown.open .mobile-dropdown-content {
max-height: 300px;
}
.mobile-sublink {
font-size: 20px !important;
padding: 10px 32px !important;
opacity: 0.7;
}
.mobile-sublink:hover {
opacity: 1; opacity: 1;
visibility: visible; }
transform: none;
/* ============================================
SCROLL PROGRESS
============================================ */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-primary), #ffe066);
width: 0;
z-index: 1001;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1024px) {
.nav-desktop {
display: none; display: none;
} }
.has-submenu.active .submenu { .nav-toggle {
display: block; display: flex;
}
} }
.has-submenu:hover .submenu { @media (max-width: 640px) {
opacity: 1; .mobile-link {
visibility: visible; font-size: 24px;
transform: none; padding: 12px 24px;
} }
} }
</style> </style>
<script> <script>
document.addEventListener('DOMContentLoaded', () => { // Navigation scroll effect
const mobileBtn = document.querySelector('.mobile-menu-btn'); const nav = document.getElementById('nav');
const navLinks = document.querySelector('.nav-links'); const toggle = document.getElementById('nav-toggle');
const hasSubmenuItems = document.querySelectorAll('.has-submenu'); const mobileNav = document.getElementById('nav-mobile');
const scrollProgress = document.getElementById('scroll-progress');
mobileBtn?.addEventListener('click', () => { // Scroll effect
navLinks?.classList.toggle('active'); window.addEventListener('scroll', () => {
const scrollY = window.scrollY;
if (scrollY > 80) {
nav?.classList.add('scrolled');
} else {
nav?.classList.remove('scrolled');
}
// Scroll progress
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
const progress = (scrollY / docHeight) * 100;
if (scrollProgress) {
scrollProgress.style.width = `${progress}%`;
}
}); });
hasSubmenuItems.forEach(item => { // Mobile menu toggle
const navLink = item.querySelector('.nav-link'); toggle?.addEventListener('click', () => {
navLink?.addEventListener('click', (e) => { toggle.classList.toggle('active');
e.stopPropagation(); mobileNav?.classList.toggle('active');
item.classList.toggle('active'); document.body.style.overflow = mobileNav?.classList.contains('active') ? 'hidden' : '';
}); });
// Mobile dropdown toggle
document.querySelectorAll('.mobile-dropdown-trigger').forEach(trigger => {
trigger.addEventListener('click', () => {
trigger.parentElement?.classList.toggle('open');
});
});
// Close mobile menu on link click
mobileNav?.querySelectorAll('.mobile-link').forEach(link => {
link.addEventListener('click', () => {
toggle?.classList.remove('active');
mobileNav?.classList.remove('active');
document.body.style.overflow = '';
});
});
// Magnetic effect for nav links
document.querySelectorAll('[data-magnetic]').forEach(el => {
el.addEventListener('mousemove', (e) => {
const rect = el.getBoundingClientRect();
const x = e.clientX - rect.left - rect.width / 2;
const y = e.clientY - rect.top - rect.height / 2;
(el as HTMLElement).style.transform = `translate(${x * 0.15}px, ${y * 0.15}px)`;
});
el.addEventListener('mouseleave', () => {
(el as HTMLElement).style.transform = 'translate(0, 0)';
}); });
}); });
</script> </script>

201
src/components/PageHero.astro Normal file
View File

@@ -0,0 +1,201 @@
---
/**
* MOREMINIMORE - PAGE HERO COMPONENT
* Magazine-style hero with overlapping floating card
*/
interface Props {
badge?: string;
title: string;
subtitle?: string;
}
const {
badge,
title,
subtitle,
} = Astro.props;
---
<section class="page-hero">
<div class="hero-bg">
<div class="bg-dots"></div>
</div>
<div class="hero-content container">
{badge && (
<span class="hero-badge">{badge}</span>
)}
<h1 class="hero-title">{title}</h1>
{subtitle && (
<p class="hero-subtitle">{subtitle}</p>
)}
</div>
<!-- Floating card that overlaps next section (magazine style) -->
<div class="hero-float-card">
<p>Transform your business with digital solutions</p>
<a href="/contact" class="btn-float">Get Started →</a>
</div>
</section>
<style>
/* ============================================
PAGE HERO BASE
============================================ */
.page-hero {
position: relative;
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-dark);
overflow: hidden;
padding-bottom: 80px;
}
/* ============================================
BACKGROUND
============================================ */
.hero-bg {
position: absolute;
inset: 0;
overflow: hidden;
}
.bg-dots {
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(254, 212, 0, 0.06) 1px, transparent 0);
background-size: 40px 40px;
}
/* ============================================
CONTENT
============================================ */
.hero-content {
position: relative;
z-index: 1;
text-align: center;
padding: 80px var(--gutter) 120px;
}
.hero-badge {
display: inline-block;
padding: 8px 20px;
background: rgba(254, 212, 0, 0.15);
border: 1px solid rgba(254, 212, 0, 0.3);
border-radius: var(--radius-full);
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--color-primary);
margin-bottom: 24px;
}
.hero-title {
font-family: var(--font-display);
font-size: clamp(36px, 6vw, 64px);
font-weight: 900;
line-height: 1.1;
text-transform: uppercase;
color: var(--color-white);
margin-bottom: 16px;
}
.hero-subtitle {
font-size: 18px;
color: rgba(255, 255, 255, 0.7);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
/* ============================================
FLOATING CARD - Magazine Overlap
============================================ */
.hero-float-card {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 700px;
background: var(--color-white);
border-radius: 24px;
padding: 32px 48px;
box-shadow: 0 30px 100px rgba(0,0,0,0.15);
z-index: 5;
text-align: center;
}
.hero-float-card p {
font-size: 18px;
color: var(--color-gray-600);
margin-bottom: 16px;
line-height: 1.5;
}
.btn-float {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
background: var(--color-primary);
color: var(--color-black);
border-radius: 30px;
font-weight: 700;
font-size: 15px;
transition: all 0.3s ease;
}
.btn-float:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(254, 212, 0, 0.35);
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 640px) {
.page-hero {
min-height: 45vh;
padding-bottom: 100px;
}
.hero-content {
padding: 60px var(--gutter) 100px;
}
.hero-title {
font-size: 32px;
}
.hero-subtitle {
font-size: 16px;
}
.hero-float-card {
width: 92%;
padding: 24px 28px;
bottom: -25px;
}
.hero-float-card p {
font-size: 15px;
margin-bottom: 12px;
}
.btn-float {
padding: 12px 24px;
font-size: 14px;
}
}
</style>

76
src/components/PortfolioCard.astro Normal file
View File

@@ -0,0 +1,76 @@
---
interface Props {
name: string;
url: string;
category: string;
category_label: string;
thumbnail: string;
description: string;
}
const { name, url, category, category_label, thumbnail, description } = Astro.props;
---
<a href={url} target="_blank" rel="noopener" class="portfolio-card" data-category={category}>
<div class="portfolio-image">
<img src={thumbnail} alt={name} loading="lazy" />
</div>
<div class="portfolio-info">
<span class="portfolio-category">{category_label}</span>
<h3 class="portfolio-name">{name}</h3>
<p class="portfolio-desc">{description}</p>
</div>
</a>
<style>
.portfolio-card {
display: block;
background: rgba(255,255,255,0.03);
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.05);
transition: all 0.4s ease;
}
.portfolio-card:hover {
transform: translateY(-8px);
background: rgba(255,255,255,0.08);
border-color: var(--color-primary);
}
.portfolio-image {
aspect-ratio: 16/10;
overflow: hidden;
}
.portfolio-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.portfolio-card:hover .portfolio-image img { transform: scale(1.05); }
.portfolio-info { padding: 24px; }
.portfolio-category {
display: inline-block;
background: var(--color-primary);
color: var(--color-black);
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
margin-bottom: 12px;
}
.portfolio-name {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
color: var(--color-white);
}
.portfolio-desc {
font-size: 14px;
color: rgba(255,255,255,0.6);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>

50
src/components/SectionHeader.astro Normal file
View File

@@ -0,0 +1,50 @@
---
interface Props {
badge?: string;
title: string;
description?: string;
align?: "left" | "center";
}
const { badge, title, description, align = "center" } = Astro.props;
---
<div class={`section-header section-header-${align}`}>
{badge && <span class="section-badge">{badge}</span>}
<h2 class="section-title" set:html={title}></h2>
{description && <p class="section-desc" set:html={description}></p>}
</div>
<style>
.section-header {
margin-bottom: 60px;
}
.section-header-left { text-align: left; }
.section-header-center { text-align: center; }
.section-badge {
display: inline-block;
background: var(--color-primary);
color: var(--color-black);
padding: 6px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 16px;
}
.section-title {
font-size: clamp(28px, 4vw, 42px);
font-weight: 700;
color: var(--color-black);
line-height: 1.2;
}
.section-header-center .section-title { max-width: 600px; margin: 0 auto 16px; }
.section-desc {
font-size: 18px;
color: var(--color-medium-gray);
line-height: 1.6;
max-width: 600px;
}
.section-header-center .section-desc { margin: 0 auto; }
</style>

188
src/components/ServiceCard.astro Normal file
View File

@@ -0,0 +1,188 @@
---
/**
* MOREMINIMORE - SERVICE CARD COMPONENT
* Clean cards with images
*/
interface Props {
title: string;
subtitle?: string;
image?: string;
link: string;
}
const { title, subtitle, image, link } = Astro.props;
---
<a href={link} class="service-card">
<div class="card-inner">
<!-- Image -->
<div class="card-image">
<img src={image || "/images/services/default.jpg"} alt={title} loading="lazy" />
<div class="card-overlay"></div>
</div>
<!-- Content -->
<div class="card-content">
<h3 class="card-title">{title}</h3>
{subtitle && <p class="card-subtitle">{subtitle}</p>}
</div>
<!-- Arrow -->
<div class="card-arrow">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</div>
</div>
</a>
<style>
/* ============================================
SERVICE CARD
============================================ */
.service-card {
display: block;
}
.card-inner {
position: relative;
background: var(--color-white);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all 0.4s var(--ease-out-expo);
border: 1px solid rgba(0, 0, 0, 0.04);
}
.card-inner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--color-primary);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s var(--ease-out-expo);
z-index: 2;
}
.service-card:hover .card-inner::before {
transform: scaleX(1);
}
.service-card:hover .card-inner {
box-shadow: var(--shadow-lg);
transform: translateY(-8px);
}
.service-card:hover .card-arrow {
transform: translateX(8px);
opacity: 1;
}
/* ============================================
IMAGE
============================================ */
.card-image {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.service-card:hover .card-image img {
transform: scale(1.08);
}
.card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 50%, rgba(26, 26, 46, 0.6) 100%);
opacity: 0.7;
transition: opacity 0.3s ease;
}
.service-card:hover .card-overlay {
opacity: 1;
}
/* ============================================
CONTENT
============================================ */
.card-content {
padding: 28px 24px;
}
.card-title {
font-family: var(--font-display);
font-size: 20px;
font-weight: 800;
color: var(--color-black);
margin-bottom: 8px;
transition: color 0.3s ease;
}
.service-card:hover .card-title {
color: var(--color-dark);
}
.card-subtitle {
font-size: 14px;
line-height: 1.6;
color: var(--color-gray-600);
}
/* ============================================
ARROW
============================================ */
.card-arrow {
position: absolute;
bottom: 24px;
right: 24px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primary);
border-radius: 50%;
opacity: 0;
transform: translateX(-10px);
transition: all 0.3s var(--ease-out-expo);
z-index: 2;
}
.card-arrow svg {
width: 20px;
height: 20px;
stroke: var(--color-black);
transition: stroke 0.3s ease;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 640px) {
.card-content {
padding: 24px 20px;
}
.card-title {
font-size: 18px;
}
}
</style>

26
src/content.config.ts Normal file
View File

@@ -0,0 +1,26 @@
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';
const services = defineCollection({
loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/services' }),
schema: z.object({
title: z.string(),
subtitle: z.string(),
badge: z.string(),
category: z.string(),
objective: z.string(),
}),
});
const blog = defineCollection({
loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
schema: z.object({
title: z.string(),
excerpt: z.string(),
image: z.string(),
date: z.date(),
category: z.string(),
}),
});
export const collections = { services, blog };

27
src/content/blog/5-ways-ai-increase-sales.mdx Normal file
View File

@@ -0,0 +1,27 @@
---
title: "5 วิธีใช้ AI เพิ่มยอดขายให้ธุรกิจของคุณ"
excerpt: "ค้นพบ 5 วิธีที่ AI สามารถช่วยเพิ่มยอดขายให้ธุรกิจ SMEs ไทย พร้อมตัวอย่างและแนวทางการนำไปใช้จริง"
image: "/images/blog/5-ways-ai-increase-sales.jpg"
date: 2026-03-11
category: "AI Business"
---
## วิธีที่ 1: ใช้ AI วิเคราะห์ลูกค้าและแนะนำสินค้าที่ตรงใจ
หนึ่งในความสามารถที่ทรงพลังที่สุดของ AI คือการวิเคราะห์ข้อมูลลูกค้าและค้นหารูปแบบที่มนุษย์อาจมองไม่เห็น AI สามารถวิเคราะห์ว่าลูกค้าแต่ละคนชอบสินค้าประเภทไหน ซื้อในช่วงเวลาไหน และมีพฤติกรรมการซื้ออย่างไร
## วิธีที่ 2: ใช้ Chatbot ดูแลลูกค้าตลอด 24 ชั่วโมง
ลูกค้าจำนวนมากต้องการได้รับคำตอบทันที ไม่ว่าจะกี่โมง แต่การจ้างพนักงานทำงาน 24 ชั่วโมงนั้นมีค่าใช้จ่ายสูง Chatbot ที่ใช้ AI สามารถตอบคำถามลูกค้าได้ตลอดเวลา โดยไม่ต้องเสียค่าล่วงเวลา
## วิธีที่ 3: ใช้ AI ส่งข้อความการตลาดในเวลาที่เหมาะสม
การส่งข้อความการตลาดไม่ใช่แค่การส่งออกไปเท่านั้น แต่ต้องส่งในเวลาที่ลูกค้ามีโอกาสอ่านและตอบสนองมากที่สุด AI สามารถวิเคราะห์ว่าลูกค้าแต่ละคนมีช่วงเวลาไหนที่เปิดอ่านข้อความบ่อยที่สุด และส่งในเวลานั้น
## วิธีที่ 4: ใช้ AI สร้างเนื้อหาการตลาด
เนื้อหาการตลาดที่ดีเป็นหัวใจสำคัญในการดึงดูดลูกค้า แต่การสร้างเนื้อหาที่มีคุณภาพตลอดเวลาต้องใช้เวลาและทรัพยากรมาก AI สามารถช่วยสร้างเนื้อหาได้เร็วขึ้น ไม่ว่าจะเป็นโพสต์เฟซบุ๊ก คำบรรยายสินค้า อีเมลการตลาด หรือบทความบล็อก
## วิธีที่ 5: ใช้ AI ทำนายแนวโน้มและวางแผนสินค้า
การมีสินค้าคงคลงเป็นสิ่งจำเป็นสำหรับธุรกิจค้าปลีก แต่การมีสินค้ามากเกินไปก็เป็นปัญหา AI สามารถวิเคราะห์ข้อมูลยอดขายในอดีต ฤดูกาล และปัจจัยอื่นๆ เพื่อทำนายว่าควรสั่งสินค้าเท่าไหร่ในแต่ละช่วง

22
src/content/blog/ai-content-google-love.mdx Normal file
View File

@@ -0,0 +1,22 @@
---
title: "วิธีสร้าง Content ด้วย AI ที่ Google รัก"
excerpt: "เรียนรู้วิธีการใช้ AI ช่วยสร้างเนื้อหาการตลาดที่มีคุณภาพและได้รับการจัดอันดับดีจาก Google พร้อมเทคนิคและตัวอย่างจริง"
image: "/images/blog/ai-content-google-love.jpg"
date: 2026-03-10
category: "AI Content"
---
## ทำไม AI Content ต้องมีคุณภาพ
Google มีอัลกอริทึมที่ฉลาดมาก สามารถแยกแยะได้ว่าเนื้อหาที่สร้างโดย AI มีคุณภาพหรือไม่ เนื้อหาที่ไม่มีคุณค่า สร้างขึ้นแค่เพื่อใส่คีย์เวิร์ด จะถูกลงโทษและไม่ติดอันดับ
## วิธีใช้ AI สร้างเนื้อหาที่ดี
ใช้ AI เป็นผู้ช่วย ไม่ใช่ผู้เขียนทั้งหมด วิธีที่ดีที่สุดคือใช้ AI ช่วยในบางส่วน เช่น รวบรวมข้อมูล สร้างโครงสร้าง หรือเขียน draft แล้วนำมาปรับแก้ด้วยมนุษย์
## เทคนิคการสร้าง AI Content ที่มีคุณภาพ
1. **กำหนด outline ก่อน** - ให้ AI สร้างโครงสร้างก่อน แล้วค่อยเติมเนื้อหา
2. **เพิ่มมุมมองส่วนตัว** - เพิ่มประสบการณ์และตัวอย่างจริง
3. **ตรวจสอบข้อเท็จจริง** - AI อาจสร้างข้อมูลที่ไม่ถูกต้อง ต้องตรวจสอบเสมอ
4. **เพิ่มคุณค่า** - เพิ่มข้อมูลเชิงลึกและความเห็นส่วนตัว

27
src/content/blog/ai-for-sme-thailand.mdx Normal file
View File

@@ -0,0 +1,27 @@
---
title: "AI สำหรับ SME ไทย: คู่มือฉบับสมบูรณ์"
excerpt: "การใช้ AI สำหรับธุรกิจ SME ไทยเพื่อเพิ่มขีดความสามารถในการแข่งขัน พร้อมแนวทางปฏิบัติจริง"
image: "/images/blog/ai-for-sme-thailand.jpg"
date: 2026-03-08
category: "AI Business"
---
## ทำไม SME ต้องใช้ AI
AI ไม่ใช่เทคโนโลยีสำหรับบริษัทใหญ่เท่านั้น ธุรกิจ SME สามารถเริ่มใช้ประโยชน์จาก AI ได้ง่ายๆ ด้วยเครื่องมือที่เข้าถึงได้
## การเริ่มต้นใช้ AI สำหรับ SME
### 1. เริ่มจากปัญหาที่เจ็บปวดที่สุด
- ถ้าลูกค้าถามคำถามซ้ำๆ ให้ใช้ AI Chatbot
- ถ้าต้องส่งอีเมลหลายร้อย封 ให้ใช้ AI Email Automation
- ถ้าไม่มีเวลาสร้างเนื้อหา ให้ใช้ AI Content Generation
### 2. เลือกเครื่องมือที่เหมาะสม
- งบน้อย: เริ่มจากเครื่องมือฟรีหรือราคาถูก
- งบปานกลาง: ใช้บริการ AI as a Service
- งบมาก: พัฒนา AI เฉพาะทางสำหรับธุรกิจ
### 3. วัดผลและปรับปรุง
- ติดตาม KPI ก่อนและหลังใช้ AI
- ปรับปรุงอย่างต่อเนื่อง

28
src/content/blog/digital-transformation-guide.mdx Normal file
View File

@@ -0,0 +1,28 @@
---
title: "คู่มือ Digital Transformation ฉบับสมบูรณ์"
excerpt: "การ transform ธุรกิจของคุณสู่ดิจิทัลอย่างครบวงจร ตั้งแต่การวางแผนจนถึงการ Implement"
image: "/images/blog/digital-transformation.jpg"
date: 2026-03-05
category: "Business"
---
## Digital Transformation คืออะไร
Digital Transformation คือการนำเทคโนโลยีดิจิทัลมาใช้ในทุกด้านของธุรกิจ เพื่อเพิ่มประสิทธิภาพและสร้างคุณค่าใหม่ให้กับลูกค้า
## ขั้นตอนการ Transform
### ขั้นที่ 1: วิเคราะห์สถานะปัจจุบัน
- ประเมินระดับดิจิทัลของธุรกิจ
- ระบุจุดอ่อนและโอกาส
- กำหนดเป้าหมายที่ชัดเจน
### ขั้นที่ 2: วางแผนกลยุทธ์
- เลือกเทคโนโลยีที่เหมาะสม
- กำหนด timeline และ budget
- วางแผนการเปลี่ยนแปลง
### ขั้นที่ 3: Implement
- เริ่มจากโครงการเล็กๆ
- ทดสอบและเรียนรู้
- ขยายผลอย่างค่อยเป็นค่อยไป

34
src/content/blog/marketing-automation-guide.mdx Normal file
View File

@@ -0,0 +1,34 @@
---
title: "Marketing Automation: คู่มือเริ่มต้น"
excerpt: "เรียนรู้พื้นฐานของ Marketing Automation และวิธีเริ่มต้นใช้งานสำหรับธุรกิจของคุณ"
image: "/images/blog/marketing-automation-guide.jpg"
date: 2026-03-01
category: "Marketing"
---
## Marketing Automation คืออะไร
Marketing Automation คือการใช้ซอฟต์แวร์เพื่อ automate การตลาดซ้ำๆ เช่น การส่งอีเมล การโพสต์โซเชียลมีเดีย และการวิเคราะห์ข้อมูล
## ประโยชน์ของ Marketing Automation
1. **ประหยัดเวลา** - ทำงานอัตโนมัติแทนที่จะทำ manually
2. **เพิ่มประสิทธิภาพ** - ส่งข้อความที่เหมาะสมในเวลาที่เหมาะสม
3. **วัดผลได้** - ติดตามผลและปรับปรุงอย่างต่อเนื่อง
## เริ่มต้นอย่างไร
### 1. เลือกแพลตฟอร์มที่เหมาะสม
- งบน้อย: Mailchimp, HubSpot Free
- งบปานกลาง: ActiveCampaign, Marketo
- งบมาก: Salesforce, Oracle
### 2. กำหนดเป้าหมาย
- เพิ่มยอดขาย
- สร้าง leads
- รักษาลูกค้า
### 3. สร้าง workflow
- เริ่มจาก email autoresponder
- เพิ่ม lead scoring
- ขยายไปยัง multi-channel

26
src/content/services/ai-consult.mdx Normal file
View File

@@ -0,0 +1,26 @@
---
title: "AI Consult"
subtitle: "Consult service for using AI to improve business workflow and knowledge management. ใช้ AI ให้เป็นประโยชน์สำหรับธุรกิจของคุณอย่างเต็มศักยภาพ"
badge: "Technology Consult"
category: "tech-consult"
objective: "ลดต้นทุนและเวลา"
usp_free_server: "ลูกค้าที่ใช้บริการ Consult จะได้รับ Server สำหรับ App และ AI ฟรี (สำหรับการใช้งานปกติ) หากต้องการใช้งานหนักหรือ Resource-intensive จะมีค่าใช้จ่ายเพิ่มเติม"
feature1_icon: "🧠"
feature1_title: "AI Strategy & Roadmap"
feature1_desc: "วางแผนการใช้ AI อย่างเป็นระบบเพื่อให้เห็นผลลัพธ์ที่ชัดเจน"
feature2_icon: "💬"
feature2_title: "AI Chatbot Implementation"
feature2_desc: "พัฒนาและ deploy AI Chatbot ที่เข้าใจภาษาไทยและตอบคำถามลูกค้าได้ 24/7"
feature3_icon: "📝"
feature3_title: "Knowledge Management"
feature3_desc: "สร้างระบบจัดการความรู้ด้วย AI ที่ช่วยให้การค้นหาและใช้งานข้อมูลง่ายขึ้น"
feature4_icon: "🎯"
feature4_title: "AI for Marketing"
feature4_desc: "ใช้ AI วิเคราะห์ลูกค้าและสร้างแคมเปญการตลาดที่มีประสิทธิภาพ"
feature5_icon: "🔍"
feature5_title: "AI Audit"
feature5_desc: "วิเคราะห์ว่าธุรกิจของคุณควรใช้ AI ตัวไหนและอย่างไร"
feature6_icon: "🚀"
feature6_title: "AI Implementation Support"
feature6_desc: "ดูแลและให้คำปรึกษาตลอดการ implement AI ในองค์กร"
---

26
src/content/services/automation.mdx Normal file
View File

@@ -0,0 +1,26 @@
---
title: "Automation Consult"
subtitle: "Implement specific unique app and AI for business to do automation workflow. ลดต้นทุนและเพิ่มประสิทธิภาพด้วยระบบอัตโนมัติที่ออกแบบมาเฉพาะสำหรับธุรกิจของคุณ"
badge: "Technology Consult"
category: "tech-consult"
objective: "ลดต้นทุนและเวลา"
usp_free_server: "ลูกค้าที่ใช้บริการ Consult จะได้รับ Server สำหรับ App และ AI ฟรี (สำหรับการใช้งานปกติ) หากต้องการใช้งานหนักหรือ Resource-intensive จะมีค่าใช้จ่ายเพิ่มเติม"
feature1_icon: "🤖"
feature1_title: "Workflow Automation"
feature1_desc: "ออกแบบและ implement ระบบ automation สำหรับงานที่ทำซ้ำๆ เช่น การประมวลผลออร์เดอร์ การจัดการ inventory"
feature2_icon: "📊"
feature2_title: "Business Process Optimization"
feature2_desc: "วิเคราะห์และปรับปรุงกระบวนการทำงานให้มีประสิทธิภาพมากขึ้นด้วยเทคโนโลยีล่าสุด"
feature3_icon: "🔗"
feature3_title: "System Integration"
feature3_desc: "เชื่อมต่อระบบต่างๆ ให้ทำงานร่วมกันอย่างราบรื่น เช่น CRM, ERP, E-commerce"
feature4_icon: "📱"
feature4_title: "Custom Application"
feature4_desc: "พัฒนา application เฉพาะทางสำหรับธุรกิจของคุณที่ไม่สามารถหาซื้อได้ทั่วไป"
feature5_icon: "🔒"
feature5_title: "Security & Compliance"
feature5_desc: "ตรวจสอบและปรับปรุงความปลอดภัยของระบบให้เป็นไปตามมาตรฐาน"
feature6_icon: "📈"
feature6_title: "Performance Monitoring"
feature6_desc: "ติดตามและวัดผลประสิทธิภาพของระบบแบบ real-time"
---

25
src/content/services/marketing.mdx Normal file
View File

@@ -0,0 +1,25 @@
---
title: "Online Marketing Automation"
subtitle: "Use AI to help generate and manage marketing workflow. เพิ่มยอดขายด้วยระบบอัตโนมัติทางการตลาดที่ขับเคลื่อนด้วย AI"
badge: "Marketing Consult"
category: "marketing-consult"
objective: "เพิ่มยอดขาย"
feature1_icon: "📧"
feature1_title: "Email Marketing Automation"
feature1_desc: "สร้าง email campaign อัตโนมัติด้วย AI ที่ personalize ข้อความตามพฤติกรรมลูกค้า"
feature2_icon: "💬"
feature2_title: "Social Media Automation"
feature2_desc: "กำหนดเวลาโพสต์และตอบสนองอัตโนมัติด้วย AI ที่เข้าใจบริบท"
feature3_icon: "🎯"
feature3_title: "Lead Generation AI"
feature3_desc: "ใช้ AI หาและให้คะแนน leads ที่มีโอกาส conversion สูงสุด"
feature4_icon: "📊"
feature4_title: "Marketing Analytics"
feature4_desc: "วิเคราะห์ข้อมูลการตลาดและให้คำแนะนำด้วย AI เพื่อปรับปรุง ROI"
feature5_icon: "🔄"
feature5_title: "Workflow Automation"
feature5_desc: "สร้าง marketing workflow อัตโนมัติตั้งแต่ lead จนถึง sale"
feature6_icon: "📱"
feature6_title: "Multi-channel Integration"
feature6_desc: "เชื่อมต่อทุกช่องทางการตลาดให้ทำงานร่วมกันอย่างไร้รอยต่อ"
---

26
src/content/services/webdev.mdx Normal file
View File

@@ -0,0 +1,26 @@
---
title: "Website Development"
subtitle: "Implement website for business and integrate the website with marketing workflow. เว็บไซต์ที่ทันสมัย รวดเร็ว และเชื่อมต่อกับระบบการตลาดอย่างไร้รอยต่อ"
badge: "Marketing Consult"
category: "marketing-consult"
objective: "เพิ่มยอดขาย"
usp_content_edit: "ลูกค้าที่ใช้ Server ของเราจะได้รับบริการแก้ไขและเพิ่มเนื้อหาเว็บไซต์ฟรี! จ่ายเฉพาะเมื่อต้องการ Redesign ทั้งหมด หรือ Upgrade ฟีเจอร์ใหญ่ เช่น เพิ่มระบบ E-commerce"
feature1_icon: "⚡"
feature1_title: "Fast & Modern"
feature1_desc: "โหลดเร็ว รองรับการขยายตัวของธุรกิจ และใช้เทคโนโลยีล่าสุด"
feature2_icon: "📱"
feature2_title: "Responsive Design"
feature2_desc: "แสดงผลได้ดีบนทุกอุปกรณ์ ทั้ง mobile tablet และ desktop"
feature3_icon: "🎨"
feature3_title: "SEO Optimized"
feature3_desc: "ออกแบบมาเพื่อให้ Google ชอบ ช่วยให้ติดอันดับได้ง่ายขึ้น"
feature4_icon: "🔗"
feature4_title: "Marketing Integration"
feature4_desc: "เชื่อมต่อกับระบบ CRM, Email Marketing และ Analytics ได้อย่างไร้รอยต่อ"
feature5_icon: "📊"
feature5_title: "Analytics Dashboard"
feature5_desc: "ติดตามผู้เข้าชมและวัดผลได้แบบ real-time"
feature6_icon: "🔒"
feature6_title: "Security"
feature6_desc: "Security ระดับสูง ป้องกันการโจมตีและข้อมูลรั่วไหล"
---

74
src/data/portfolio.ts Normal file
View File

@@ -0,0 +1,74 @@
export const portfolioItems = [
{
name: "Lungfinler",
url: "https://lungfinler.com",
category: "webdev",
category_label: "พัฒนาเว็บไซต์",
thumbnail: "/images/portfolio/lungfinler.png",
description: "Digital Agency - บริการด้านการสร้างแบรนด์ กราฟิกดีไซน์ และถ่ายภาพสินค้าคุณภาพสูง"
},
{
name: "Jet Industries",
url: "https://jetindustries.co.th",
category: "webdev",
category_label: "พัฒนาเว็บไซต์",
thumbnail: "/images/portfolio/jetindustries.png",
description: "ผู้ผลิตพลาสติกฉีดขึ้นรูปอย่างแม่นยำ (Precision Plastic Injection Molding) มีประสบการณ์กว่า 40 ปี"
},
{
name: "สำนักงานกฎหมาย ตถาตา",
url: "https://lawyernoom.com",
category: "webdev",
category_label: "พัฒนาเว็บไซต์",
thumbnail: "/images/portfolio/lawyernoom.png",
description: "สำนักงานกฎหมายโดย ทนายความ คมสัน ศรีวนิชย์ - บริการด้านคดีความ คดีแพ่ง คดีอาญา"
},
{
name: "Underdog Marketing",
url: "https://underdog.run",
category: "webdev",
category_label: "พัฒนาเว็บไซต์",
thumbnail: "/images/portfolio/underdog.png",
description: "บล็อกการตลาดและการขายสไตล์ ลุยไม่ยั้ง โดย บุ้ง ดีดติ่งหู"
},
{
name: "Baofuling Shop",
url: "https://baofulingshop.com",
category: "ecommerce",
category_label: "อีคอมเมิร์ซ",
thumbnail: "/images/portfolio/baofuling.png",
description: "ร้านค้าออนไลน์ครีมบัวหิมะและผลิตภัณฑ์ความงามจีน"
},
{
name: "เทรนเนอร์ซันนี่",
url: "https://trainersunny.com",
category: "webdev",
category_label: "พัฒนาเว็บไซต์",
thumbnail: "/images/portfolio/trainersunny.png",
description: "ผู้เชี่ยวชาญด้านการพัฒนาบุคลากรและ Soft Skill"
},
{
name: "เลือดจระเข้วานิไทย",
url: "https://เลือดจระเข้วานิไทย.com",
category: "ecommerce",
category_label: "อีคอมเมิร์ซ",
thumbnail: "/images/portfolio/luadjob.png",
description: "ตัวแทนจำหน่ายเลือดจระเข้วานิไทยอย่างเป็นทางการ"
},
{
name: "ทวนทอง 99",
url: "https://tuanthong99.com",
category: "ecommerce",
category_label: "อีคอมเมิร์ซ",
thumbnail: "/images/portfolio/tuanthong.png",
description: "ร้านค้าออนไลน์สมุนไพรไทยคุณภาพสูง"
},
{
name: "Odoo Portal",
url: "https://odooportal.com",
category: "marketing",
category_label: "ที่ปรึกษาการตลาด",
thumbnail: "/images/portfolio/odooportal.png",
description: "ตัวแทนจำหน่าย Odoo อย่างเป็นทางการในประเทศไทย"
}
];

14
src/layouts/Base.astro
View File

@@ -1,10 +1,15 @@
--- ---
import "../styles/global.css";
interface Props { interface Props {
title: string; title: string;
description?: string; description?: string;
} }
const { title, description = "MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot" } = Astro.props; const {
title,
description = "MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย | เพิ่มยอดขาย ลดต้นทุน ด้วยเทคโนโลยีล้ำสมัย"
} = Astro.props;
--- ---
<!doctype html> <!doctype html>
@@ -13,14 +18,11 @@ const { title, description = "MoreminiMore - รับทำเว็บไซ
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content={description} /> <meta name="description" content={description} />
<meta name="theme-color" content="#1a1a2e" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>{title}</title> <title>{title}</title>
</head> </head>
<body> <body style="margin: 0; background: #ffffff;">
<slot /> <slot />
</body> </body>
</html> </html>
<style is:global>
@import '../styles/global.css';
</style>

1
src/live.config.ts
View File

@@ -1,6 +1,7 @@
import { defineLiveCollection } from "astro:content"; import { defineLiveCollection } from "astro:content";
import { emdashLoader } from "emdash/runtime"; import { emdashLoader } from "emdash/runtime";
// EmDash CMS Collections
export const collections = { export const collections = {
_emdash: defineLiveCollection({ loader: emdashLoader() }), _emdash: defineLiveCollection({ loader: emdashLoader() }),
}; };

7
src/pages/.omc/state/agent-replay-e5f480d6-2b75-4bfe-b154-b1e53e34e0a3.jsonl Normal file
View File

@@ -0,0 +1,7 @@
{"t":0,"agent":"aa3cbfe","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"af23dcd","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a734a6b","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a27cab4","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"a7cb1f3","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"aa9fb06","agent_type":"unknown","event":"agent_stop","success":true}
{"t":0,"agent":"aa710ef","agent_type":"unknown","event":"agent_stop","success":true}

16
src/pages/.omc/state/checkpoints/checkpoint-2026-05-13T03-22-24-371Z.json Normal file
View File

@@ -0,0 +1,16 @@
{
"created_at": "2026-05-13T03:22:24.370Z",
"trigger": "auto",
"active_modes": {},
"todo_summary": {
"pending": 0,
"in_progress": 0,
"completed": 0
},
"wisdom_exported": false,
"background_jobs": {
"active": [],
"recent": [],
"stats": null
}
}

16
src/pages/.omc/state/checkpoints/checkpoint-2026-05-13T03-38-42-950Z.json Normal file
View File

@@ -0,0 +1,16 @@
{
"created_at": "2026-05-13T03:38:42.949Z",
"trigger": "auto",
"active_modes": {},
"todo_summary": {
"pending": 0,
"in_progress": 0,
"completed": 0
},
"wisdom_exported": false,
"background_jobs": {
"active": [],
"recent": [],
"stats": null
}
}

16
src/pages/.omc/state/checkpoints/checkpoint-2026-05-13T14-16-02-792Z.json Normal file
View File

@@ -0,0 +1,16 @@
{
"created_at": "2026-05-13T14:16:02.791Z",
"trigger": "auto",
"active_modes": {},
"todo_summary": {
"pending": 0,
"in_progress": 0,
"completed": 0
},
"wisdom_exported": false,
"background_jobs": {
"active": [],
"recent": [],
"stats": null
}
}

16
src/pages/.omc/state/checkpoints/checkpoint-2026-05-14T01-41-35-233Z.json Normal file
View File

@@ -0,0 +1,16 @@
{
"created_at": "2026-05-14T01:41:35.232Z",
"trigger": "auto",
"active_modes": {},
"todo_summary": {
"pending": 0,
"in_progress": 0,
"completed": 0
},
"wisdom_exported": false,
"background_jobs": {
"active": [],
"recent": [],
"stats": null
}
}

7
src/pages/.omc/state/last-tool-error.json Normal file
View File

@@ -0,0 +1,7 @@
{
"tool_name": "Bash",
"tool_input_preview": "{\"command\":\"for path in \\\"/\\\" \\\"/portfolio\\\" \\\"/blog\\\" \\\"/services/ai\\\" \\\"/services/marketing\\\"; do echo -n \\\"$path: \\\"; curl -s -o /dev/null -w \\\"%{http_code}\\\\n\\\" \\\"http://localhost:4321${path}\\\"; d...",
"error": "Exit code 127",
"timestamp": "2026-05-14T02:15:35.813Z",
"retry_count": 1
}

6
src/pages/.omc/state/sessions/e5f480d6-2b75-4bfe-b154-b1e53e34e0a3/session-started.json Normal file
View File

@@ -0,0 +1,6 @@
{
"session_id": "e5f480d6-2b75-4bfe-b154-b1e53e34e0a3",
"started_at": "2026-05-14T01:42:56.165Z",
"cwd": "/Users/kunthawatgreethong/Gitea/moreminimore-emdash/moreminimore-site/src/pages",
"pid": 65131
}

7
src/pages/.omc/state/subagent-tracking.json Normal file
View File

@@ -0,0 +1,7 @@
{
"agents": [],
"total_spawned": 0,
"total_completed": 0,
"total_failed": 0,
"last_updated": "2026-05-14T02:36:34.781Z"
}

390
src/pages/about.astro
View File

@@ -1,399 +1,137 @@
--- ---
import Base from '../layouts/Base.astro'; import Base from '../layouts/Base.astro';
import Navigation from '../components/Navigation.astro'; import Navigation from '../components/Navigation.astro';
import Hero from '../components/Hero.astro';
import Footer from '../components/Footer.astro'; import Footer from '../components/Footer.astro';
import PageHero from '../components/PageHero.astro';
const whyChooseUs = [
{ icon: "🎯", title: "ตรงต่อความต้องการ", desc: "เราเข้าใจว่าทุกธุรกิจมีความแตกต่าง เราออกแบบโซลูชันที่เหมาะกับคุณ" },
{ icon: "⚡", title: "ส่งงานรวดเร็ว", desc: "ทำงานอย่างมีประสิทธิภาพ ส่งมอบงานตรงเวลา ไม่ผิดสัญญา" },
{ icon: "🛡️", title: "รับประกันคุณภาพ", desc: "หากไม่พอใจในงาน เราพร้อมแก้ไขจนกว่าจะถูกใจ" },
{ icon: "💬", title: "ดูแลต่อเนื่อง", desc: "ให้บริการดูแลหลังการขาย พร้อม support ตลอด 24 ชม." }
];
--- ---
<Base title="เกี่ยวกับเรา | MoreminiMore"> <Base title="เกี่ยวกับเรา - MoreminiMore">
<Navigation /> <Navigation />
<Hero <PageHero
title="เกี่ยวกับ มอร์มินิมอร์"
subtitle="บริษัท มอร์มินิมอร์ จำกัด<br>รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย"
badge="เกี่ยวกับเรา" badge="เกี่ยวกับเรา"
image="/images/hero/about.jpg" title="MOREMINIMORE"
theme="yellow" subtitle="ดิจิทัลเอเจนซี่ที่ช่วยให้ธุรกิจไทยเติบโตด้วยเทคโนโลยีสมัยใหม่"
showCTA={false}
variant="centered"
size="compact"
/> />
<!-- About Content --> <section class="about-content-section" style="background: #ffffff; margin-top: -2px; padding: 100px 0;">
<section class="section about-section">
<div class="container"> <div class="container">
<div class="about-grid"> <div class="about-grid">
<div class="about-image"> <div class="about-content reveal">
<img src="/images/hero/about-us-hero.jpg" alt="MoreminiMore Team" /> <h2 class="about-title">เราคือทีมที่สร้างสรรค์<br/>โซลูชันดิจิทัล</h2>
</div>
<div class="about-content">
<span class="section-badge">เราคือใคร</span>
<h2 class="section-title">เราคือทีมงานด้านดิจิทัลที่พร้อมเปลี่ยนธุรกิจของคุณ</h2>
<p class="about-text"> <p class="about-text">
MoreminiMore เป็นทีมงานที่มีประสบการณ์ในการพัฒนาเว็บไซต์และระบบอัตโนมัติมากว่า 5 ปี MoreminiMore ก่อตั้งขึ้นด้วยความมุ่งมั่นในการช่วยเหลือธุรกิจไทยให้เติบโตในยุคดิจิทัล
เราเชื่อว่าเทคโนโลยีดิจิทัลสามารถช่วยเพิ่มยอดขายและลดต้นทุนให้ธุรกิจได้อย่างมีประสิทธิภาพ เราเชื่อว่าเทคโนโลยี AI และระบบอัตโนมัติสามารถช่วยเพิ่มประสิทธิภาพและลดต้นทุนได้อย่างมาก
</p> </p>
<p class="about-text"> <p class="about-text">
ทีมงานของเราประกอบด้วยผู้เชี่ยวชาญหลากหลายสาขา ไม่ว่าจะเป็นด้านการพัฒนาเว็บไซต์ ทีมงานของเราประกอบด้วยผู้เชี่ยวชาญด้านการพัฒนาเว็บไซต์ การตลาดดิจิทัล และ AI
การตลาดดิจิทัล AI Automation และการให้คำปรึกษาด้านเทคโนโลยี ที่พร้อมให้คำปรึกษาและออกแบบโซลูชันที่เหมาะสมกับความต้องการของแต่ละธุรกิจ
</p> </p>
<div class="about-stats">
<div class="stat">
<span class="stat-number">50+</span>
<span class="stat-label">โปรเจกต์</span>
</div> </div>
<div class="stat"> <div class="about-values reveal">
<span class="stat-number">40+</span> <div class="value-card">
<span class="stat-label">ลูกค้า</span> <span class="value-number">50+</span>
<span class="value-label">โปรเจกต์สำเร็จ</span>
</div> </div>
<div class="stat"> <div class="value-card">
<span class="stat-number">5+</span> <span class="value-number">40+</span>
<span class="stat-label">ปีประสบการณ์</span> <span class="value-label">ลูกค้าที่ไว้วางใจ</span>
</div> </div>
<div class="value-card">
<span class="value-number">5+</span>
<span class="value-label">ปีประสบการณ์</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Services Overview -->
<section class="section section-light services-section">
<div class="container">
<div class="section-header">
<span class="section-badge">บริการของเรา</span>
<h2 class="section-title">เราให้บริการอะไรบ้าง</h2>
</div>
<div class="services-grid">
<div class="service-item">
<span class="service-icon">🌐</span>
<h3 class="service-title">พัฒนาเว็บไซต์</h3>
<p class="service-desc">สร้างเว็บไซต์ที่ทันสมัย รวดเร็ว และตอบสนองความต้องการของลูกค้าของคุณ</p>
</div>
<div class="service-item">
<span class="service-icon">📈</span>
<h3 class="service-title">Marketing Automation</h3>
<p class="service-desc">Automate การตลาดของคุณเพื่อเพิ่มประสิทธิภาพและลดต้นทุน</p>
</div>
<div class="service-item">
<span class="service-icon">🤖</span>
<h3 class="service-title">AI Automation</h3>
<p class="service-desc">นำ AI มาใช้เพื่อเพิ่มยอดขายและปรับปรุงการให้บริการลูกค้า</p>
</div>
<div class="service-item">
<span class="service-icon">💡</span>
<h3 class="service-title">Tech Consult</h3>
<p class="service-desc">ให้คำปรึกษาด้านเทคโนโลยีเพื่อธุรกิจของคุณ</p>
</div>
</div>
</div>
</section>
<!-- Why Choose Us -->
<section class="section why-section">
<div class="container">
<div class="section-header">
<span class="section-badge">ทำไมต้องเลือกเรา</span>
<h2 class="section-title">เหตุผลที่ลูกค้าไว้วางใจเรา</h2>
</div>
<div class="why-grid">
{whyChooseUs.map((item, i) => (
<div class="why-card card card-accent" style={`animation-delay: ${i * 0.1}s`}>
<span class="why-icon">{item.icon}</span>
<h3 class="why-title">{item.title}</h3>
<p class="why-desc">{item.desc}</p>
</div>
))}
</div>
</div>
</section>
<!-- CTA Section -->
<section class="section section-primary cta-section">
<div class="container">
<div class="cta-content">
<h2 class="cta-title">พร้อมเริ่มทำงานกับเรา?</h2>
<p class="cta-desc">ปรึกษาฟรี! เราพร้อมรับฟังโปรเจกต์ของคุณ</p>
<div class="cta-actions">
<a href="/contact" class="btn btn-secondary btn-lg">ติดต่อเรา</a>
<a href="tel:0809955945" class="btn btn-outline btn-lg">080-995-5945</a>
</div>
</div>
</div>
</section>
<Footer /> <Footer />
</Base> </Base>
<style> <style>
.hero { .about-content-section {
padding: 160px 0 80px; /* Inline styles handle background and padding */
background: var(--color-black);
text-align: center;
}
.hero-badge {
display: inline-block;
background: rgba(254, 212, 0, 0.1);
color: var(--color-primary);
padding: 8px 20px;
border-radius: 30px;
font-size: 14px;
font-weight: 500;
margin-bottom: 24px;
border: 1px solid rgba(254, 212, 0, 0.2);
}
.hero-title {
font-size: clamp(48px, 10vw, 96px);
font-weight: 800;
color: var(--color-white);
margin-bottom: 16px;
text-transform: uppercase;
}
.hero-desc {
font-size: 20px;
color: #999;
max-width: 600px;
margin: 0 auto;
line-height: 1.8;
}
.about-section {
background: var(--color-white);
} }
.about-grid { .about-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1.5fr 1fr;
gap: 80px; gap: 80px;
align-items: center; align-items: center;
} }
.about-image { .about-title {
border-radius: 24px; font-family: var(--font-display);
overflow: hidden; font-size: clamp(32px, 5vw, 48px);
box-shadow: 0 20px 60px rgba(0,0,0,0.1); font-weight: 900;
} line-height: 1.2;
margin-bottom: 32px;
.about-image img { color: var(--color-dark);
width: 100%;
height: auto;
display: block;
}
.section-badge {
display: inline-block;
background: var(--color-primary);
color: var(--color-black);
padding: 6px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
font-family: var(--font-heading);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 16px;
}
.section-title {
font-size: clamp(28px, 4vw, 40px);
font-weight: 700;
margin-bottom: 24px;
} }
.about-text { .about-text {
font-size: 16px; font-size: 18px;
color: var(--color-medium-gray);
line-height: 1.8; line-height: 1.8;
margin-bottom: 20px; color: var(--color-gray-600);
margin-bottom: 24px;
} }
.about-stats { .about-values {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.value-card {
display: flex; display: flex;
gap: 48px; flex-direction: column;
margin-top: 40px; align-items: center;
padding-top: 40px; padding: 32px 20px;
border-top: 1px solid #eee; background: var(--color-gray-100);
} border-radius: var(--radius-xl);
.stat {
text-align: center; text-align: center;
} }
.stat-number { .value-number {
display: block; font-family: var(--font-display);
font-family: var(--font-heading); font-size: 48px;
font-size: 40px; font-weight: 900;
font-weight: 800;
color: var(--color-primary); color: var(--color-primary);
line-height: 1; line-height: 1;
margin-bottom: 8px; margin-bottom: 8px;
} }
.stat-label { .value-label {
font-size: 14px; font-size: 14px;
color: var(--color-medium-gray); color: var(--color-gray-600);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 2px;
}
.services-section {
background: var(--color-light-gray);
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.service-item {
text-align: center;
padding: 40px 24px;
background: var(--color-white);
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.service-icon {
font-size: 48px;
display: block;
margin-bottom: 20px;
}
.service-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
}
.service-desc {
font-size: 14px;
color: var(--color-medium-gray);
line-height: 1.6;
}
.why-section {
background: var(--color-white);
}
.why-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.why-card {
padding: 40px 32px;
text-align: center;
}
.why-icon {
font-size: 48px;
display: block;
margin-bottom: 20px;
}
.why-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
}
.why-desc {
font-size: 14px;
color: var(--color-medium-gray);
line-height: 1.6;
}
.cta-section {
padding: 100px 0;
}
.cta-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.cta-title {
font-size: clamp(32px, 5vw, 48px);
font-weight: 800;
margin-bottom: 16px;
}
.cta-desc {
font-size: 18px;
margin-bottom: 40px;
opacity: 0.8;
}
.cta-actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.btn-lg {
padding: 18px 40px;
font-size: 16px;
}
.btn-outline {
background: transparent;
color: var(--color-black);
border: 2px solid var(--color-black);
}
.btn-outline:hover {
background: var(--color-black);
color: var(--color-white);
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.about-grid { .about-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 40px; gap: 48px;
}
.services-grid,
.why-grid {
grid-template-columns: repeat(2, 1fr);
} }
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.services-grid, .about-values {
.why-grid { grid-template-columns: repeat(3, 1fr);
grid-template-columns: 1fr; gap: 16px;
} }
.about-stats { .value-card {
flex-wrap: wrap; padding: 24px 16px;
gap: 24px;
} }
.cta-actions { .value-number {
flex-direction: column; font-size: 36px;
} }
.btn-lg { .value-label {
width: 100%; font-size: 12px;
justify-content: center;
} }
} }
</style> </style>

382
src/pages/blog/[slug].astro
View File

@@ -1,104 +1,96 @@
--- ---
import Base from '../../layouts/Base.astro'; import Base from '../../layouts/Base.astro';
import Navigation from '../../components/Navigation.astro'; import Navigation from '../../components/Navigation.astro';
import Hero from '../../components/Hero.astro';
import Footer from '../../components/Footer.astro'; import Footer from '../../components/Footer.astro';
import PageHero from '../../components/PageHero.astro';
import { getCollection, render } from 'astro:content';
export function getStaticPaths() { // For SSR mode, use Astro.params directly
const posts = [ const { slug } = Astro.params;
{ slug: "5-ways-ai-increase-sales", title: "5 วิธี AI เพิ่มยอดขาย", image: "/images/blog/5-ways-ai-increase-sales.jpg" },
{ slug: "ai-content-google-love", title: "AI Content ที่ Google รัก", image: "/images/blog/ai-content-google-love.jpg" },
{ slug: "ai-for-sme-thailand", title: "AI สำหรับ SME ไทย", image: "/images/blog/ai-for-sme-thailand.jpg" },
{ slug: "back-office-automation", title: "Back Office Automation", image: "/images/blog/back-office-automation.jpg" },
{ slug: "chatbot-business-case-study", title: "Chatbot Business Case Study", image: "/images/blog/chatbot-business-case-study.jpg" },
{ slug: "data-driven-marketing", title: "Data Driven Marketing", image: "/images/blog/data-driven-marketing.jpg" },
{ slug: "digital-transformation-guide", title: "Digital Transformation Guide", image: "/images/blog/digital-transformation.jpg" },
{ slug: "marketing-automation-guide", title: "Marketing Automation Guide", image: "/images/blog/marketing-automation-guide.jpg" },
{ slug: "seo-2026-business-guide", title: "SEO 2026 สำหรับ Business", image: "/images/blog/seo-2026-business-guide.jpg" },
{ slug: "website-2026-must-have", title: "Website 2026 Must Have", image: "/images/blog/website-2026-must-have.jpg" }
];
return posts.map(post => ({ const allPosts = await getCollection('blog');
params: { slug: post.slug }, // Use id for matching since slug might be undefined
props: { post } const post = allPosts.find(p => p.id === slug);
}));
if (!post) {
return Astro.redirect('/404');
} }
const { post } = Astro.props; const { Content } = await render(post);
const related = allPosts
.filter(p => p.id !== post.id)
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
.slice(0, 3);
const formattedDate = post.data.date.toLocaleDateString('th-TH', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
--- ---
<Base title={`${post.title} | MoreminiMore`}> <Base title={`${post.data.title} | MoreminiMore`}>
<Navigation /> <Navigation />
<Hero <PageHero
title={post.title} badge={post.data.category}
subtitle="อ่านบทความล่าสุดเกี่ยวกับ AI, Marketing และเทคโนโลยีสำหรับธุรกิจ" title={post.data.title}
badge="บทความ" subtitle={formattedDate}
image={post.image}
theme="yellow"
showCTA={false}
/> />
<!-- Article Section --> <!-- Article Image -->
{post.data.image && (
<div class="article-image">
<div class="container">
<img src={post.data.image} alt={post.data.title} />
</div>
</div>
)}
<!-- Article Content -->
<section class="section article-section"> <section class="section article-section">
<div class="container"> <div class="container">
<div class="article-layout"> <div class="article-grid">
<article class="article-content"> <article class="article-content">
<div class="article-hero">
<img src={post.image} alt={post.title} />
</div>
<div class="article-body"> <div class="article-body">
<p class="article-lead"> <Content />
ในยุคที่ AI กลายเป็นเครื่องมือสำคัญในการทำธุรกิจ หลายคนอาจสงสัยว่า AI สามารถช่วยเพิ่มยอดขายได้อย่างไร
</p>
<h2>AI กับการเพิ่มยอดขาย</h2>
<p>
AI สามารถช่วยเพิ่มยอดขายได้หลายวิธี ไม่ว่าจะเป็นการวิเคราะห์พฤติกรรมลูกค้า การทำ Personalization
การ automate การตลาด และการให้บริการลูกค้าตลอด 24 ชั่วโมง
</p>
<h2>วิธีที่ 1: Chatbot ตอบคำถามลูกค้า</h2>
<p>
Chatbot ที่ขับเคลื่อนด้วย AI สามารถตอบคำถามลูกค้าได้ตลอด 24 ชั่วโมง โดยไม่ต้องมีพนักงาน wake อยู่
นอกจากนี้ยังสามารถเก็บข้อมูลลูกค้าและแนะนำสินค้าที่เหมาะสมได้อีกด้วย
</p>
<h2>วิธีที่ 2: วิเคราะห์ข้อมูลลูกค้า</h2>
<p>
AI สามารถวิเคราะห์ข้อมูลลูกค้าเพื่อหา pattern และ insights ที่ซ่อนอยู่ ทำให้ธุรกิจเข้าใจลูกค้าได้ลึกขึ้น
และสามารถนำไปปรับปรุงสินค้าหรือบริการได้ตรงจุด
</p>
<h2>วิธีที่ 3: Personalization</h2>
<p>
AI สามารถสร้างประสบการณ์ที่ personalized ให้กับลูกค้าแต่ละคน ไม่ว่าจะเป็นการแนะนำสินค้าที่สนใจ
การส่ง offer ที่เหมาะสม หรือการปรับ content ให้ตรงกับความต้องการ
</p>
<h2>สรุป</h2>
<p>
AI สามารถช่วยเพิ่มยอดขายได้อย่างมาก สิ่งสำคัญคือการเลือกใช้ AI ให้เหมาะกับธุรกิจของคุณ
และเริ่มต้นจากจุดที่มี impact สูงสุดก่อน
</p>
</div> </div>
</article> </article>
<!-- Sidebar -->
<aside class="article-sidebar"> <aside class="article-sidebar">
<div class="sidebar-widget"> <!-- About -->
<h3>บริการที่เกี่ยวข้อง</h3> <div class="sidebar-card">
<ul class="related-services"> <h3 class="sidebar-title">เกี่ยวกับ MoreminiMore</h3>
<li><a href="/services/ai">AI Automation</a></li> <p class="sidebar-text">
<li><a href="/services/marketing">Marketing Automation</a></li> ดิจิทัลเอเจนซี่ที่ช่วยให้ธุรกิจไทยเติบโตด้วยเทคโนโลยีสมัยใหม่
<li><a href="/services/webdev">พัฒนาเว็บไซต์</a></li> </p>
</ul> <a href="/about" class="btn btn-dark btn-sm">ดูเพิ่มเติม</a>
</div> </div>
<div class="sidebar-widget"> <!-- Contact -->
<h3>ติดต่อปรึกษา</h3> <div class="sidebar-card">
<p>สนใจใช้ AI ในธุรกิจของคุณ?</p> <h3 class="sidebar-title">สนใจบริการ?</h3>
<a href="/contact" class="btn btn-primary">ปรึกษาฟรี</a> <p class="sidebar-text">ติดต่อเราได้เลย ปรึกษาฟรี!</p>
<a href="/contact" class="btn btn-primary btn-sm">ติดต่อเรา</a>
<a href="tel:0809955945" class="btn btn-outline btn-sm" style="margin-top: 8px;">080-995-5945</a>
</div> </div>
<!-- Related Posts -->
{related.length > 0 && (
<div class="sidebar-card">
<h3 class="sidebar-title">บทความที่เกี่ยวข้อง</h3>
<div class="related-list">
{related.map(r => (
<a href={`/blog/${r.id}`} class="related-item">
<img src={r.data.image} alt={r.data.title} />
<span>{r.data.title}</span>
</a>
))}
</div>
</div>
)}
</aside> </aside>
</div> </div>
</div> </div>
@@ -108,134 +100,206 @@ const { post } = Astro.props;
</Base> </Base>
<style> <style>
.hero { .article-image {
padding: 140px 0 60px; padding: 40px 0;
background: var(--color-black); background: var(--color-gray-100);
} }
.article-image img {
.back-link { width: 100%;
display: inline-block; max-height: 500px;
color: var(--color-primary); object-fit: cover;
font-size: 14px; border-radius: 20px;
margin-bottom: 24px;
transition: opacity 0.2s;
}
.back-link:hover {
opacity: 0.8;
}
.hero-title {
font-size: clamp(32px, 5vw, 48px);
font-weight: 800;
color: var(--color-white);
max-width: 800px;
} }
.article-section { .article-section {
background: var(--color-white); padding-top: 60px;
} }
.article-layout { .article-grid {
display: grid; display: grid;
grid-template-columns: 1fr 320px; grid-template-columns: 1fr 360px;
gap: 64px; gap: 60px;
}
.article-hero {
margin-bottom: 48px;
border-radius: 16px;
overflow: hidden;
}
.article-hero img {
width: 100%;
height: auto;
} }
.article-body { .article-body {
max-width: 720px; font-size: 18px;
}
.article-lead {
font-size: 20px;
color: var(--color-medium-gray);
line-height: 1.8; line-height: 1.8;
margin-bottom: 32px; color: var(--color-gray-600);
padding-bottom: 32px;
border-bottom: 1px solid #eee;
} }
.article-body h2 { .article-body :global(h2) {
font-size: 24px; font-size: 28px;
font-weight: 700; font-weight: 700;
margin: 40px 0 16px; color: var(--color-dark);
margin: 40px 0 20px;
} }
.article-body p { .article-body :global(h3) {
font-size: 16px; font-size: 22px;
color: var(--color-medium-gray); font-weight: 700;
line-height: 1.8; color: var(--color-dark);
margin: 32px 0 16px;
}
.article-body :global(p) {
margin-bottom: 20px; margin-bottom: 20px;
} }
.article-body :global(ul), .article-body :global(ol) {
margin: 20px 0;
padding-left: 24px;
}
.article-body :global(li) {
margin-bottom: 12px;
}
.article-body :global(a) {
color: var(--color-primary);
font-weight: 600;
}
.article-body :global(a:hover) {
text-decoration: underline;
}
.article-body :global(blockquote) {
border-left: 4px solid var(--color-primary);
padding-left: 24px;
margin: 32px 0;
font-style: italic;
color: var(--color-gray-600);
}
.article-body :global(img) {
border-radius: 12px;
margin: 24px 0;
}
/* Sidebar */
.article-sidebar { .article-sidebar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 32px; gap: 24px;
} }
.sidebar-widget { .sidebar-card {
background: var(--color-light-gray); background: var(--color-gray-100);
border-radius: 16px; border-radius: 16px;
padding: 28px; padding: 28px;
} }
.sidebar-widget h3 { .sidebar-title {
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: var(--color-dark);
margin-bottom: 16px; margin-bottom: 16px;
} }
.related-services { .sidebar-text {
list-style: none;
padding: 0;
}
.related-services li {
margin-bottom: 12px;
}
.related-services a {
color: var(--color-medium-gray);
font-size: 14px; font-size: 14px;
transition: color 0.2s; color: var(--color-gray-600);
} line-height: 1.6;
.related-services a:hover {
color: var(--color-primary);
}
.sidebar-widget p {
font-size: 14px;
color: var(--color-medium-gray);
margin-bottom: 16px; margin-bottom: 16px;
} }
.btn-sm {
padding: 12px 20px;
font-size: 14px;
border-radius: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-dark {
background: var(--color-dark);
color: var(--color-white);
}
.btn-dark:hover {
background: var(--color-dark-light);
}
.btn-primary {
background: var(--color-primary);
color: var(--color-black);
}
.btn-primary:hover {
background: var(--color-primary-dark);
}
.btn-outline {
background: transparent;
border: 2px solid var(--color-dark);
color: var(--color-dark);
}
.btn-outline:hover {
background: var(--color-dark);
color: var(--color-white);
}
/* Related Posts */
.related-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.related-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--color-white);
border-radius: 12px;
transition: all 0.3s ease;
}
.related-item:hover {
transform: translateX(4px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.related-item img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 8px;
flex-shrink: 0;
}
.related-item span {
font-size: 14px;
font-weight: 600;
color: var(--color-dark);
line-height: 1.3;
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
.article-layout { .article-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.article-sidebar { .article-sidebar {
order: -1; order: -1;
flex-direction: row; display: grid;
flex-wrap: wrap; grid-template-columns: repeat(2, 1fr);
}
} }
.sidebar-widget { @media (max-width: 640px) {
flex: 1; .article-sidebar {
min-width: 280px; grid-template-columns: 1fr;
}
.article-body {
font-size: 16px;
} }
} }
</style> </style>

296
src/pages/blog/index.astro
View File

@@ -1,147 +1,58 @@
--- ---
import Base from '../../layouts/Base.astro'; import Base from '../../layouts/Base.astro';
import Navigation from '../../components/Navigation.astro'; import Navigation from '../../components/Navigation.astro';
import Hero from '../../components/Hero.astro';
import Footer from '../../components/Footer.astro'; import Footer from '../../components/Footer.astro';
import PageHero from '../../components/PageHero.astro';
import BlogCard from '../../components/BlogCard.astro';
import { getCollection } from 'astro:content';
const blogPosts = [ const blogPosts = await getCollection('blog');
{ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
slug: "5-ways-ai-increase-sales",
title: "5 วิธี AI เพิ่มยอดขาย",
excerpt: "เรียนรู้ 5 วิธีที่ AI สามารถช่วยเพิ่มยอดขายของคุณได้อย่างมีประสิทธิภาพ",
image: "/images/blog/5-ways-ai-increase-sales.jpg",
date: "2026-01-15",
category: "AI"
},
{
slug: "ai-content-google-love",
title: "AI Content ที่ Google รัก",
excerpt: "วิธีสร้าง AI Content ที่ท z้ both user-friendly และ SEO-friendly",
image: "/images/blog/ai-content-google-love.jpg",
date: "2026-01-10",
category: "AI"
},
{
slug: "ai-for-sme-thailand",
title: "AI สำหรับ SME ไทย",
excerpt: "คู่มือการใช้ AI สำหรับธุรกิจ SME ไทยเพื่อเพิ่มขีดความสามารถในการแข่งขัน",
image: "/images/blog/ai-for-sme-thailand.jpg",
date: "2026-01-05",
category: "AI"
},
{
slug: "back-office-automation",
title: "Back Office Automation",
excerpt: "ลดต้นทุนและเพิ่มประสิทธิภาพด้วยระบบอัตโนมัติ",
image: "/images/blog/back-office-automation.jpg",
date: "2025-12-28",
category: "Automation"
},
{
slug: "chatbot-business-case-study",
title: "Chatbot Business Case Study",
excerpt: "กรณีศึกษาการใช้ Chatbot เพื่อเพิ่มยอดขายและลดต้นทุนการให้บริการ",
image: "/images/blog/chatbot-business-case-study.jpg",
date: "2025-12-20",
category: "Chatbot"
},
{
slug: "data-driven-marketing",
title: "Data Driven Marketing",
excerpt: "การตลาดที่ขับเคลื่อนด้วยข้อมูลเพื่อผลลัพธ์ที่ดีที่สุด",
image: "/images/blog/data-driven-marketing.jpg",
date: "2025-12-15",
category: "Marketing"
},
{
slug: "digital-transformation-guide",
title: "Digital Transformation Guide",
excerpt: "คู่มือฉบับสมบูรณ์สำหรับการ transform ธุรกิจของคุณสู่ดิจิทัล",
image: "/images/blog/digital-transformation.jpg",
date: "2025-12-10",
category: "Business"
},
{
slug: "marketing-automation-guide",
title: "Marketing Automation Guide",
excerpt: "เรียนรู้พื้นฐานของ Marketing Automation และวิธีเริ่มต้น",
image: "/images/blog/marketing-automation-guide.jpg",
date: "2025-12-05",
category: "Marketing"
},
{
slug: "seo-2026-business-guide",
title: "SEO 2026 Business Guide",
excerpt: "การทำ SEO สำหรับธุรกิจในยุค 2026 ต้องรู้อะไรบ้าง",
image: "/images/blog/seo-2026-business-guide.jpg",
date: "2025-11-28",
category: "SEO"
},
{
slug: "website-2026-must-have",
title: "Website 2026 Must Have",
excerpt: "ฟีเจอร์ที่เว็บไซต์ต้องมีในปี 2026",
image: "/images/blog/website-2026-must-have.jpg",
date: "2025-11-20",
category: "Web Dev"
}
];
const categories = ["ทั้งหมด", "AI", "Marketing", "Automation", "SEO", "Web Dev", "Business", "Chatbot"];
function formatDate(dateStr: string) {
const date = new Date(dateStr);
return date.toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' });
}
--- ---
<Base title="บทความ | MoreminiMore"> <Base title="บทความ | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
<Navigation /> <Navigation />
<!-- Hero Section --> <PageHero
<Hero
title="ความรู้ด้านดิจิทัล"
subtitle="อ่านบทความล่าสุดเกี่ยวกับ AI, Marketing และเทคโนโลยีสำหรับธุรกิจ"
badge="บทความ" badge="บทความ"
image="/images/hero/blog-hero.jpg" title="บทความ"
theme="yellow" subtitle="ความรู้ด้านดิจิทัลและเทคนิคใหม่ๆ สำหรับธุรกิจไทย"
showCTA={false}
variant="centered"
size="compact"
/> />
<!-- Blog Section -->
<section class="section blog-section">
<div class="container">
<!-- Featured Post --> <!-- Featured Post -->
<div class="featured-post"> {sortedPosts.length > 0 && (
<a href={`/blog/${blogPosts[0].slug}`} class="featured-card"> <section class="section featured-section">
<div class="container">
<a href={`/blog/${sortedPosts[0].id}`} class="featured-card">
<div class="featured-image"> <div class="featured-image">
<img src={blogPosts[0].image} alt={blogPosts[0].title} /> {sortedPosts[0].data.image && (
<img src={sortedPosts[0].data.image} alt={sortedPosts[0].data.title} loading="eager" />
)}
</div> </div>
<div class="featured-content"> <div class="featured-content">
<span class="category-badge">{blogPosts[0].category}</span> <span class="category-badge">{sortedPosts[0].data.category}</span>
<h2 class="featured-title">{blogPosts[0].title}</h2> <h2 class="featured-title">{sortedPosts[0].data.title}</h2>
<p class="featured-excerpt">{blogPosts[0].excerpt}</p> <p class="featured-excerpt">{sortedPosts[0].data.excerpt}</p>
<span class="read-more">อ่านต่อ →</span> <span class="read-more">อ่านต่อ →</span>
</div> </div>
</a> </a>
</div> </div>
</section>
)}
<!-- Blog Grid --> <!-- Blog Grid -->
<section class="section blog-section">
<div class="container">
<div class="blog-grid"> <div class="blog-grid">
{blogPosts.slice(1).map((post) => ( {sortedPosts.slice(1).map((post, i) => (
<a href={`/blog/${post.slug}`} class="blog-card card"> <BlogCard
<div class="blog-image"> title={post.data.title}
<img src={post.image} alt={post.title} loading="lazy" /> excerpt={post.data.excerpt}
</div> image={post.data.image}
<div class="blog-content"> date={post.data.date}
<span class="category-badge">{post.category}</span> slug={post.id}
<h3 class="blog-title">{post.title}</h3> category={post.data.category}
<p class="blog-excerpt">{post.excerpt}</p> />
<span class="blog-date">{formatDate(post.date)}</span>
</div>
</a>
))} ))}
</div> </div>
</div> </div>
@@ -162,182 +73,99 @@ function formatDate(dateStr: string) {
</Base> </Base>
<style> <style>
.featured-section {
.blog-section {
background: var(--color-white); background: var(--color-white);
padding-top: 80px;
} }
.featured-post {
margin-bottom: 60px;
}
.featured-card { .featured-card {
display: grid; display: grid;
grid-template-columns: 1.5fr 1fr; grid-template-columns: 1.5fr 1fr;
gap: 48px; gap: 0;
background: var(--color-light-gray); background: var(--color-dark);
border-radius: 24px; border-radius: 24px;
overflow: hidden; overflow: hidden;
transition: transform 0.4s ease;
} }
.featured-card:hover { transform: scale(1.01); }
.featured-image { .featured-image {
aspect-ratio: 16/10; aspect-ratio: 16/10;
overflow: hidden; overflow: hidden;
} }
.featured-image img { .featured-image img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
transition: transform 0.5s; transition: transform 0.5s ease;
} }
.featured-card:hover .featured-image img { transform: scale(1.05); }
.featured-card:hover .featured-image img {
transform: scale(1.05);
}
.featured-content { .featured-content {
padding: 48px; padding: 48px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
} }
.category-badge { .category-badge {
display: inline-block; display: inline-block;
background: var(--color-primary); background: var(--color-primary);
color: var(--color-black); color: var(--color-black);
padding: 6px 16px; padding: 6px 14px;
border-radius: 20px; border-radius: 12px;
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
align-self: flex-start; align-self: flex-start;
margin-bottom: 16px; margin-bottom: 16px;
} }
.featured-title { .featured-title {
font-size: 32px; font-size: clamp(24px, 3vw, 32px);
font-weight: 700; font-weight: 700;
color: var(--color-white);
margin-bottom: 16px; margin-bottom: 16px;
line-height: 1.3; line-height: 1.3;
} }
.featured-excerpt { .featured-excerpt {
font-size: 16px; font-size: 15px;
color: var(--color-medium-gray); color: rgba(255,255,255,0.6);
line-height: 1.7; line-height: 1.7;
margin-bottom: 24px; margin-bottom: 24px;
} }
.read-more { .read-more {
color: var(--color-primary); color: var(--color-primary);
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 14px;
} }
.blog-section { background: var(--color-gray-100); }
.blog-grid { .blog-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 32px; gap: 32px;
} }
.blog-card { .section-primary { background: var(--color-primary); }
display: flex; .cta-content { text-align: center; }
flex-direction: column;
overflow: hidden;
}
.blog-image {
aspect-ratio: 16/10;
overflow: hidden;
}
.blog-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.blog-card:hover .blog-image img {
transform: scale(1.05);
}
.blog-content {
padding: 24px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.blog-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
line-height: 1.4;
}
.blog-excerpt {
font-size: 14px;
color: var(--color-medium-gray);
line-height: 1.6;
margin-bottom: 16px;
flex-grow: 1;
}
.blog-date {
font-size: 12px;
color: #999;
}
.cta-section {
padding: 100px 0;
}
.cta-content {
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.cta-title { .cta-title {
font-size: clamp(28px, 4vw, 40px); font-size: clamp(28px, 4vw, 42px);
font-weight: 800; font-weight: 800;
margin-bottom: 16px; margin-bottom: 16px;
color: var(--color-black);
} }
.cta-desc { .cta-desc {
font-size: 18px; font-size: 18px;
color: rgba(0,0,0,0.7);
margin-bottom: 32px; margin-bottom: 32px;
opacity: 0.8; max-width: 500px;
} margin-left: auto;
margin-right: auto;
.btn-lg {
padding: 18px 40px;
font-size: 16px;
} }
.btn-lg { padding: 16px 36px; font-size: 16px; }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.featured-card { .featured-card { grid-template-columns: 1fr; }
grid-template-columns: 1fr; .featured-image { aspect-ratio: 16/7; }
.blog-grid { grid-template-columns: repeat(2, 1fr); }
} }
.blog-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) { @media (max-width: 640px) {
.blog-grid { .blog-grid { grid-template-columns: 1fr; }
grid-template-columns: 1fr; .featured-content { padding: 32px; }
}
.featured-content {
padding: 32px;
}
.featured-title {
font-size: 24px;
}
} }
</style> </style>

231
src/pages/contact.astro
View File

@@ -1,22 +1,17 @@
--- ---
import Base from '../layouts/Base.astro'; import Base from '../layouts/Base.astro';
import Navigation from '../components/Navigation.astro'; import Navigation from '../components/Navigation.astro';
import Hero from '../components/Hero.astro';
import Footer from '../components/Footer.astro'; import Footer from '../components/Footer.astro';
import PageHero from '../components/PageHero.astro';
--- ---
<Base title="ติดต่อเรา | MoreminiMore"> <Base title="ติดต่อเรา | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
<Navigation /> <Navigation />
<Hero <PageHero
title="พูดคุยกับเรา วันนี้เลย!"
subtitle="พร้อมให้คำปรึกษาและช่วยเหลือคุณ<br>ปรึกษาฟรี ไม่มีค่าใช้จ่าย"
badge="ติดต่อเรา" badge="ติดต่อเรา"
image="/images/hero/contact.jpg" title="ติดต่อเรา"
theme="yellow" subtitle="พร้อมให้คำปรึกษาและช่วยเหลือคุณ ปรึกษาฟรี ไม่มีค่าใช้จ่าย"
showCTA={false}
variant="text-only"
size="compact"
/> />
<!-- Contact Section --> <!-- Contact Section -->
@@ -27,7 +22,11 @@ import Footer from '../components/Footer.astro';
<h2 class="info-title">ข้อมูลติดต่อ</h2> <h2 class="info-title">ข้อมูลติดต่อ</h2>
<div class="contact-item"> <div class="contact-item">
<span class="contact-icon">📞</span> <div class="contact-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
</svg>
</div>
<div class="contact-detail"> <div class="contact-detail">
<h3>โทรศัพท์</h3> <h3>โทรศัพท์</h3>
<a href="tel:0809955945">080-995-5945</a> <a href="tel:0809955945">080-995-5945</a>
@@ -35,7 +34,12 @@ import Footer from '../components/Footer.astro';
</div> </div>
<div class="contact-item"> <div class="contact-item">
<span class="contact-icon">✉️</span> <div class="contact-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
<polyline points="22,6 12,13 2,6"/>
</svg>
</div>
<div class="contact-detail"> <div class="contact-detail">
<h3>อีเมล</h3> <h3>อีเมล</h3>
<a href="mailto:contact@moreminimore.com">contact@moreminimore.com</a> <a href="mailto:contact@moreminimore.com">contact@moreminimore.com</a>
@@ -43,7 +47,11 @@ import Footer from '../components/Footer.astro';
</div> </div>
<div class="contact-item"> <div class="contact-item">
<span class="contact-icon">💬</span> <div class="contact-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
</svg>
</div>
<div class="contact-detail"> <div class="contact-detail">
<h3>LINE</h3> <h3>LINE</h3>
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer">@moreminimore</a> <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer">@moreminimore</a>
@@ -51,7 +59,12 @@ import Footer from '../components/Footer.astro';
</div> </div>
<div class="contact-item"> <div class="contact-item">
<span class="contact-icon">📍</span> <div class="contact-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
<circle cx="12" cy="10" r="3"/>
</svg>
</div>
<div class="contact-detail"> <div class="contact-detail">
<h3>ที่อยู่</h3> <h3>ที่อยู่</h3>
<p>53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120</p> <p>53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120</p>
@@ -59,7 +72,12 @@ import Footer from '../components/Footer.astro';
</div> </div>
<div class="contact-item"> <div class="contact-item">
<span class="contact-icon">⏰</span> <div class="contact-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<polyline points="12 6 12 12 16 14"/>
</svg>
</div>
<div class="contact-detail"> <div class="contact-detail">
<h3>เวลาทำการ</h3> <h3>เวลาทำการ</h3>
<p>จันทร์ - ศุกร์ 09:00 - 18:00 น.</p> <p>จันทร์ - ศุกร์ 09:00 - 18:00 น.</p>
@@ -70,13 +88,13 @@ import Footer from '../components/Footer.astro';
<h3>ติดตามเรา</h3> <h3>ติดตามเรา</h3>
<div class="social-links"> <div class="social-links">
<a href="https://www.facebook.com/moreminimore" class="social-link" aria-label="Facebook" target="_blank" rel="noopener noreferrer"> <a href="https://www.facebook.com/moreminimore" class="social-link" aria-label="Facebook" target="_blank" rel="noopener noreferrer">
<img src="/icons/social/facebook.svg" alt="Facebook" /> <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
</a> </a>
<a href="https://line.me/ti/p/~@539hdlul" class="social-link" aria-label="LINE" target="_blank" rel="noopener noreferrer"> <a href="https://line.me/ti/p/~@539hdlul" class="social-link" aria-label="LINE" target="_blank" rel="noopener noreferrer">
<img src="/icons/social/line.svg" alt="LINE" /> <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-9.491.371-.661.56-1.388.56-2.159"/></svg>
</a> </a>
<a href="https://www.linkedin.com/company/moreminimore" class="social-link" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"> <a href="https://www.linkedin.com/company/moreminimore" class="social-link" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer">
<img src="/icons/social/linkedin.svg" alt="LinkedIn" /> <svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
</a> </a>
</div> </div>
</div> </div>
@@ -84,9 +102,7 @@ import Footer from '../components/Footer.astro';
<div class="contact-form-wrapper"> <div class="contact-form-wrapper">
<form class="contact-form" id="contact-form"> <form class="contact-form" id="contact-form">
<div class="form-header">
<h2 class="form-title">ส่งข้อความ</h2> <h2 class="form-title">ส่งข้อความ</h2>
</div>
<div class="form-group"> <div class="form-group">
<label for="name">ชื่อ-นามสกุล</label> <label for="name">ชื่อ-นามสกุล</label>
@@ -122,8 +138,8 @@ import Footer from '../components/Footer.astro';
<button type="submit" class="btn btn-primary btn-submit"> <button type="submit" class="btn btn-primary btn-submit">
ส่งข้อความ ส่งข้อความ
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path> <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
</svg> </svg>
</button> </button>
</form> </form>
@@ -140,10 +156,8 @@ import Footer from '../components/Footer.astro';
e.preventDefault(); e.preventDefault();
const form = e.target as HTMLFormElement; const form = e.target as HTMLFormElement;
const submitBtn = form.querySelector('.btn-submit') as HTMLButtonElement; const submitBtn = form.querySelector('.btn-submit') as HTMLButtonElement;
submitBtn.textContent = 'กำลังส่ง...'; submitBtn.textContent = 'กำลังส่ง...';
submitBtn.disabled = true; submitBtn.disabled = true;
setTimeout(() => { setTimeout(() => {
alert('ขอบคุณที่ติดต่อเรา! เราจะติดต่อกลับเร็วๆ นี้'); alert('ขอบคุณที่ติดต่อเรา! เราจะติดต่อกลับเร็วๆ นี้');
form.reset(); form.reset();
@@ -154,224 +168,149 @@ import Footer from '../components/Footer.astro';
</script> </script>
<style> <style>
.hero { .contact-section { background: var(--color-white); }
padding: 160px 0 100px;
background: var(--color-black);
text-align: center;
}
.hero-badge {
display: inline-block;
background: rgba(254, 212, 0, 0.1);
color: var(--color-primary);
padding: 8px 20px;
border-radius: 30px;
font-size: 14px;
font-weight: 500;
margin-bottom: 32px;
border: 1px solid rgba(254, 212, 0, 0.2);
}
.hero-title {
font-size: clamp(40px, 8vw, 72px);
font-weight: 800;
color: var(--color-white);
line-height: 1.1;
margin-bottom: 24px;
}
.title-line {
display: block;
}
.title-line.accent {
color: var(--color-primary);
}
.hero-desc {
font-size: 18px;
color: #999;
line-height: 1.8;
}
.contact-grid { .contact-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1.5fr; grid-template-columns: 1fr 1.2fr;
gap: 64px; gap: 80px;
} }
.info-title { .info-title {
font-size: 28px; font-size: 28px;
font-weight: 700; font-weight: 700;
margin-bottom: 32px; margin-bottom: 32px;
color: var(--color-black);
} }
.contact-item { .contact-item {
display: flex; display: flex;
gap: 20px; gap: 20px;
margin-bottom: 28px; margin-bottom: 28px;
align-items: flex-start; align-items: flex-start;
} }
.contact-icon { .contact-icon {
font-size: 28px;
width: 48px; width: 48px;
height: 48px; height: 48px;
background: var(--color-light-gray); background: var(--color-primary);
border-radius: 12px; border-radius: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
} }
.contact-icon svg {
width: 22px;
height: 22px;
color: var(--color-white);
}
.contact-detail h3 { .contact-detail h3 {
font-size: 14px; font-size: 12px;
font-weight: 600; font-weight: 600;
color: var(--color-medium-gray); color: var(--color-medium-gray);
margin-bottom: 4px; margin-bottom: 4px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
} }
.contact-detail a, .contact-detail a,
.contact-detail p { .contact-detail p {
font-size: 18px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: var(--color-black); color: var(--color-black);
} }
.contact-detail a:hover { color: var(--color-primary); }
.contact-detail a:hover {
color: var(--color-primary);
}
.social-section { .social-section {
margin-top: 40px; margin-top: 40px;
padding-top: 40px; padding-top: 40px;
border-top: 1px solid #eee; border-top: 1px solid #eee;
} }
.social-section h3 { .social-section h3 {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
margin-bottom: 16px; margin-bottom: 16px;
color: var(--color-black);
} }
.social-links { display: flex; gap: 12px; }
.social-links {
display: flex;
gap: 16px;
}
.social-link { .social-link {
width: 48px; width: 44px;
height: 48px; height: 44px;
background: var(--color-light-gray); background: var(--color-gray-100);
border-radius: 12px; border-radius: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.3s; transition: all 0.3s;
} }
.social-link:hover { .social-link:hover {
background: var(--color-primary); background: var(--color-primary);
transform: translateY(-4px); transform: translateY(-2px);
}
.social-link img {
width: 24px;
height: 24px;
}
.form-header {
grid-column: span 2;
} }
.social-link svg { width: 20px; height: 20px; color: var(--color-black); }
.social-link:hover svg { color: var(--color-white); }
.contact-form-wrapper { .contact-form-wrapper {
background: var(--color-light-gray); background: var(--color-dark);
border-radius: 24px; border-radius: 24px;
padding: 48px; padding: 48px;
} }
.form-title { .form-title {
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
margin-bottom: 32px; margin-bottom: 32px;
color: var(--color-white);
} }
.contact-form { .contact-form {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 24px; gap: 20px;
} }
.form-group { .form-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.form-group-full { grid-column: span 2; }
.form-group-full {
grid-column: span 2;
}
.form-group label { .form-group label {
font-size: 14px; font-size: 13px;
font-weight: 600; font-weight: 600;
margin-bottom: 8px; margin-bottom: 8px;
color: var(--color-black); color: rgba(255,255,255,0.7);
} }
.form-group input, .form-group input,
.form-group select, .form-group select,
.form-group textarea { .form-group textarea {
padding: 16px 20px; padding: 14px 18px;
border: 2px solid transparent; border: 2px solid rgba(255,255,255,0.1);
border-radius: 12px; border-radius: 12px;
font-size: 16px; font-size: 15px;
font-family: var(--font-body); font-family: var(--font-body);
background: var(--color-white); background: rgba(255,255,255,0.05);
color: var(--color-white);
transition: all 0.3s; transition: all 0.3s;
} }
.form-group input::placeholder,
.form-group textarea::placeholder {
color: rgba(255,255,255,0.3);
}
.form-group input:focus, .form-group input:focus,
.form-group select:focus, .form-group select:focus,
.form-group textarea:focus { .form-group textarea:focus {
outline: none; outline: none;
border-color: var(--color-primary); border-color: var(--color-primary);
box-shadow: 0 0 0 4px rgba(254, 212, 0, 0.1); background: rgba(255,255,255,0.08);
} }
.form-group select option { background: var(--color-dark); color: var(--color-white); }
.form-group textarea { .form-group textarea { resize: vertical; min-height: 120px; }
resize: vertical;
min-height: 120px;
}
.btn-submit { .btn-submit {
grid-column: span 2; grid-column: span 2;
justify-self: start; justify-self: start;
padding: 18px 40px; padding: 16px 32px;
font-size: 16px; font-size: 15px;
} }
.btn-submit svg { width: 18px; height: 18px; }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.contact-grid { .contact-grid { grid-template-columns: 1fr; gap: 48px; }
grid-template-columns: 1fr;
gap: 48px;
} }
}
@media (max-width: 640px) { @media (max-width: 640px) {
.contact-form { .contact-form { grid-template-columns: 1fr; }
grid-template-columns: 1fr; .form-group-full, .btn-submit { grid-column: span 1; }
} .contact-form-wrapper { padding: 32px 24px; }
.form-group-full,
.btn-submit {
grid-column: span 1;
}
.contact-form-wrapper {
padding: 32px 24px;
}
} }
</style> </style>

302
src/pages/faq.astro
View File

@@ -1,107 +1,66 @@
--- ---
import Base from '../layouts/Base.astro'; import Base from '../layouts/Base.astro';
import Navigation from '../components/Navigation.astro'; import Navigation from '../components/Navigation.astro';
import Hero from '../components/Hero.astro';
import Footer from '../components/Footer.astro'; import Footer from '../components/Footer.astro';
import PageHero from '../components/PageHero.astro';
const faqItems = [ const faqData = [
{ {
category: "บริการ", category: "บริการ",
questions: [ icon: "🎯",
{ items: [
q: "MoreminiMore ให้บริการอะไรบ้าง?", { q: "บริการของเรามีอะไรบ้าง?", a: "เราให้บริการ รับทำเว็บไซต์, Marketing Automation, AI Automation และ Technology Consult สำหรับธุรกิจไทย" },
a: "เราให้บริการ 4 ประเภทหลัก: พัฒนาเว็บไซต์, Marketing Automation, AI Automation และ Tech Consult สำหรับธุรกิจไทย" { q: "สามารถปรับแต่งงานตามความต้องการได้ไหม?", a: "ใช่! เราออกแบบโซลูชันที่เหมาะกับความต้องการเฉพาะของแต่ละธุรกิจ" },
},
{
q: "สามารถสั่งทำเว็บไซต์เฉพาะประเภทได้ไหม?",
a: "ได้ เราสามารถพัฒนาเว็บไซต์ได้ทุกประเภท ไม่ว่าจะเป็นเว็บบริษัท เว็บขายของ เว็บ Landing Page หรือระบบ Web Application"
},
{
q: "AI Chatbot สามารถทำอะไรได้บ้าง?",
a: "AI Chatbot ของเราสามารถตอบคำถามลูกค้า รับออร์เดอร์ นัดหมาย และเชื่อมต่อกับระบบ CRM หรือร้านค้าออนไลน์ได้"
}
] ]
}, },
{ {
category: "ราคา", category: "ราคา",
questions: [ icon: "💰",
{ items: [
q: "ราคาเริ่มต้นของการทำเว็บไซต์เท่าไหร่?", { q: "ราคาเริ่มต้นเท่าไหร่?", a: "ราคาขึ้นอยู่กับความต้องการและขอบเขตของโปรเจกต์ ติดต่อเราเพื่อรับใบเสนอราคาฟรี" },
a: "ราคาเริ่มต้นอยู่ที่ 15,000 บาท ขึ้นอยู่กับความซับซ้อนและฟีเจอร์ที่ต้องการ เราจะประเมินและเสนอราคาหลังจากการปรึกษาฟรี" { q: "มี package สำเร็จรูปไหม?", a: "มี เรามี package สำหรับลูกค้าที่ต้องการโซลูชันที่ครบถ้วนและราคาคุ้มค่า" },
},
{
q: "มี包月 หรือรายปีไหม?",
a: "มี เรามีแพ็คเกจรายเดือนสำหรับบริการดูแลเว็บไซต์และ Marketing Automation ที่เริ่มต้นที่ 2,500 บาท/เดือน"
},
{
q: "ชำระเงินแบบไหนได้บ้าง?",
a: "เรารองรับการชำระเงินผ่าน PromptPay และโอนเงินผ่านธนาคาร สำหรับโปรเจกต์ใหญ่สามารถผ่อนชำระได้"
}
] ]
}, },
{ {
category: "ระยะเวลา", category: "ระยะเวลา",
questions: [ icon: "⏱️",
{ items: [
q: "ใช้เวลาสร้างเว็บไซต์นานแค่ไหน?", { q: "ใช้เวลาพัฒนานานแค่ไหน?", a: "ขึ้นอยู่กับความซับซ้อนของโปรเจกต์ เว็บไซต์มาตรฐาน 2-4 สัปดาห์, ระบบซับซ้อนอาจใช้ 1-3 เดือน" },
a: "เว็บไซต์ทั่วไปใช้เวลา 2-4 สัปดาห์ ระบบที่ซับซ้อนอาจใช้เวลา 1-2 เดือน ขึ้นอยู่กับความต้องการและขนาดของโปรเจกต์"
},
{
q: "เริ่มต้นทำงานได้เร็วแค่ไหน?",
a: "หลังจากตกลงรายละเอียดและชำระเงินมัดจำแล้ว เราสามารถเริ่มงานได้ภายใน 3-5 วันทำการ"
}
] ]
}, },
{ {
category: "การสนับสนุน", category: "ทั่วไป",
questions: [ icon: "💬",
{ items: [
q: "หลังสร้างเว็บเสร็จแล้ว มีบริการดูแลไหม?", { q: "มีการรับประกันผลงานไหม?", a: "เรารับประกันคุณภาพ หากไม่พอใจเราพร้อมแก้ไขจนกว่าจะถูกใจ" },
a: "มี เรามีทีมดูแลที่พร้อมช่วยเหลือทั้งการแก้ไขปัญหา อัปเดตเนื้อหา และปรับปรุงระบบตามต้องการ" { q: "หลังส่งมอบงานแล้วมี after service ไหม?", a: "มี เราให้บริการดูแลและ support หลังการขายตลอด 24 ชม." },
},
{
q: "ถ้าเว็บมีปัญหา ติดต่อได้อย่างไร?",
a: "สามารถติดต่อเราผ่าน LINE, โทรศัพท์ 080-995-5945 หรืออีเมล contact@moreminimore.com เรามีทีมพร้อมรับมือกับปัญหาฉุกเฉิน"
},
{
q: "มีการรับประกันผลงานไหม?",
a: "เรารับประกันงาน 30 วันหลังส่งมอบ หากมีปัญหาจากการทำงานของเรา เราจะแก้ไขให้ฟรี"
}
] ]
} },
]; ];
--- ---
<Base title="คำถามที่พบบ่อย | MoreminiMore"> <Base title="คำถามที่พบบ่อย | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
<Navigation /> <Navigation />
<Hero <PageHero
badge="FAQ"
title="คำถามที่พบบ่อย" title="คำถามที่พบบ่อย"
subtitle="หาคำตอบสำหรับคำถามที่พบบ่อยเกี่ยวกับบริการของเรา" subtitle="หาคำตอบสำหรับคำถามที่พบบ่อยเกี่ยวกับบริการของเรา"
badge="FAQ"
image="/images/hero/tech-consult.jpg"
theme="yellow"
showCTA={false}
variant="centered"
size="compact"
/> />
<main class="faq-page"> <!-- FAQ Section -->
<section class="section faq-section">
<div class="container">
<div class="faq-content"> <div class="faq-content">
{faqItems.map((category, catIndex) => ( {faqData.map(cat => (
<section class="faq-category"> <div class="faq-category">
<h2 class="category-title"> <h2 class="category-title">
<span class="category-icon"> <span class="category-icon">{cat.icon}</span>
{category.category === "บริการ" ? "🎯" : {cat.category}
category.category === "ราคา" ? "💰" :
category.category === "ระยะเวลา" ? "⏱️" : "💬"}
</span>
{category.category}
</h2> </h2>
<div class="faq-list"> <div class="faq-list">
{category.questions.map((item, qIndex) => ( {cat.items.map((item, qIndex) => (
<div class="faq-item" data-item={`${catIndex}-${qIndex}`}> <div class="faq-item" data-item={qIndex}>
<button class="faq-question" aria-expanded="false"> <button class="faq-question" aria-expanded="false">
<span class="question-text">{item.q}</span> <span class="question-text">{item.q}</span>
<span class="faq-icon">+</span> <span class="faq-icon">+</span>
@@ -112,20 +71,25 @@ const faqItems = [
</div> </div>
))} ))}
</div> </div>
</section> </div>
))} ))}
</div> </div>
<section class="faq-cta">
<h3>ยังมีคำถามอื่น?</h3>
<p>ติดต่อเราได้โดยตรง เราพร้อมตอบทุกคำถาม</p>
<div class="cta-buttons">
<a href="/contact" class="btn btn-primary">ติดต่อเรา</a>
<a href="tel:0809955945" class="btn btn-secondary">080-995-5945</a>
</div> </div>
</section> </section>
<!-- CTA Section -->
<section class="section section-primary cta-section">
<div class="container">
<div class="cta-content">
<h2 class="cta-title">ยังมีคำถามอื่น?</h2>
<p class="cta-desc">ติดต่อเราได้โดยตรง เราพร้อมตอบทุกคำถาม</p>
<div class="cta-actions">
<a href="/contact" class="btn btn-secondary btn-lg">ติดต่อเรา</a>
<a href="tel:0809955945" class="btn btn-outline-dark btn-lg">080-995-5945</a>
</div> </div>
</main> </div>
</div>
</section>
<Footer /> <Footer />
</Base> </Base>
@@ -133,32 +97,25 @@ const faqItems = [
<script> <script>
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const faqItems = document.querySelectorAll('.faq-item'); const faqItems = document.querySelectorAll('.faq-item');
faqItems.forEach(item => { faqItems.forEach(item => {
const question = item.querySelector('.faq-question'); const question = item.querySelector('.faq-question');
const answer = item.querySelector('.faq-answer'); const answer = item.querySelector('.faq-answer');
const icon = item.querySelector('.faq-icon'); const icon = item.querySelector('.faq-icon');
question?.addEventListener('click', () => { question?.addEventListener('click', () => {
const isOpen = item.classList.contains('open'); const isOpen = item.classList.contains('open');
// Close all
faqItems.forEach(faq => { faqItems.forEach(faq => {
faq.classList.remove('open'); faq.classList.remove('open');
const faqAnswer = faq.querySelector('.faq-answer'); const fa = faq.querySelector('.faq-answer') as HTMLElement;
const faqIcon = faq.querySelector('.faq-icon'); const fi = faq.querySelector('.faq-icon');
if (faqAnswer) faqAnswer.style.maxHeight = '0'; if (fa) fa.style.maxHeight = '0';
if (faqIcon) faqIcon.textContent = '+'; if (fi) fi.textContent = '+';
const faqQuestion = faq.querySelector('.faq-question'); (faq.querySelector('.faq-question') as HTMLElement)?.setAttribute('aria-expanded', 'false');
if (faqQuestion) faqQuestion.setAttribute('aria-expanded', 'false');
}); });
// Open clicked if it was closed
if (!isOpen) { if (!isOpen) {
item.classList.add('open'); item.classList.add('open');
if (answer) answer.style.maxHeight = answer.scrollHeight + 'px'; if (answer) (answer as HTMLElement).style.maxHeight = answer.scrollHeight + 'px';
if (icon) icon.textContent = '−'; if (icon) icon.textContent = '−';
if (question) question.setAttribute('aria-expanded', 'true'); if (question) (question as HTMLElement).setAttribute('aria-expanded', 'true');
} }
}); });
}); });
@@ -166,53 +123,9 @@ const faqItems = [
</script> </script>
<style> <style>
.faq-page { .faq-section { background: var(--color-white); }
padding: 120px 0 80px; .faq-content { max-width: 800px; margin: 0 auto; }
min-height: 100vh; .faq-category { margin-bottom: 60px; }
}
.faq-header {
text-align: center;
margin-bottom: 60px;
}
.section-badge {
display: inline-block;
background: var(--color-primary);
color: var(--color-black);
padding: 6px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
font-family: var(--font-heading);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 16px;
}
.faq-title {
font-size: clamp(36px, 5vw, 56px);
font-weight: 800;
color: var(--color-black);
margin-bottom: 16px;
}
.faq-desc {
font-size: 18px;
color: var(--color-medium-gray);
max-width: 500px;
margin: 0 auto;
}
.faq-content {
max-width: 900px;
margin: 0 auto;
}
.faq-category {
margin-bottom: 60px;
}
.category-title { .category-title {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -224,34 +137,17 @@ const faqItems = [
padding-bottom: 16px; padding-bottom: 16px;
border-bottom: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary);
} }
.category-icon { font-size: 28px; }
.category-icon { .faq-list { display: flex; flex-direction: column; gap: 12px; }
font-size: 28px;
}
.faq-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.faq-item { .faq-item {
background: var(--color-white); background: var(--color-white);
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); border: 1px solid rgba(0,0,0,0.08);
border: 1px solid #eee; transition: all 0.3s;
transition: all 0.3s ease;
} }
.faq-item:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.faq-item:hover { .faq-item.open { border-color: var(--color-primary); }
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.faq-item.open {
border-color: var(--color-primary);
}
.faq-question { .faq-question {
width: 100%; width: 100%;
display: flex; display: flex;
@@ -267,25 +163,14 @@ const faqItems = [
font-weight: 600; font-weight: 600;
color: var(--color-black); color: var(--color-black);
} }
.question-text { flex: 1; padding-right: 16px; }
.question-text {
flex: 1;
padding-right: 16px;
}
.faq-icon { .faq-icon {
font-size: 24px; font-size: 24px;
color: var(--color-primary); color: var(--color-primary);
font-weight: 300; font-weight: 300;
transition: transform 0.3s; transition: transform 0.3s;
} }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-answer p { .faq-answer p {
padding: 0 24px 24px; padding: 0 24px 24px;
font-size: 15px; font-size: 15px;
@@ -293,49 +178,32 @@ const faqItems = [
color: #555; color: #555;
} }
.faq-cta { .section-primary { background: var(--color-primary); }
text-align: center; .cta-content { text-align: center; }
padding: 60px; .cta-title {
background: var(--color-light-gray); font-size: clamp(28px, 4vw, 42px);
border-radius: 20px; font-weight: 800;
margin-top: 60px; margin-bottom: 16px;
color: var(--color-black);
} }
.cta-desc {
.faq-cta h3 { font-size: 18px;
font-size: 28px; color: rgba(0,0,0,0.7);
font-weight: 700; margin-bottom: 32px;
margin-bottom: 12px;
} }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.faq-cta p { .btn-outline-dark {
font-size: 16px; background: transparent;
color: var(--color-medium-gray); color: var(--color-black);
margin-bottom: 24px; border: 2px solid var(--color-black);
}
.cta-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
} }
.btn-outline-dark:hover { background: var(--color-black); color: var(--color-white); }
.btn-lg { padding: 16px 36px; font-size: 16px; }
@media (max-width: 640px) { @media (max-width: 640px) {
.faq-question { .faq-question { padding: 16px 20px; font-size: 15px; }
padding: 16px 20px; .faq-answer p { padding: 0 20px 20px; }
font-size: 15px; .cta-actions { flex-direction: column; }
} .btn-lg { width: 100%; justify-content: center; }
.faq-answer p {
padding: 0 20px 20px;
}
.faq-cta {
padding: 40px 24px;
}
.cta-buttons {
flex-direction: column;
}
} }
</style> </style>

633
src/pages/index.astro
View File

@@ -1,139 +1,157 @@
--- ---
import Base from '../layouts/Base.astro'; import Base from '../layouts/Base.astro';
import Navigation from '../components/Navigation.astro'; import Navigation from '../components/Navigation.astro';
import Hero from '../components/Hero.astro';
import Footer from '../components/Footer.astro'; import Footer from '../components/Footer.astro';
import Hero from '../components/Hero.astro';
import ServiceCard from '../components/ServiceCard.astro';
import { getCollection } from 'astro:content';
import { portfolioItems } from '../data/portfolio';
const stats = [ const blogPosts = await getCollection('blog');
{ number: "50+", label: "โปรเจกต์" }, const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
{ number: "40+", label: "ลูกค้า" },
{ number: "5+", label: "ปีประสบการณ์" }, const services = [
{ number: "100%", label: "ความพึงพอใจ" } { title: "Automation Consult", subtitle: "Implement specific unique app and AI for business to do automation workflow", image: "/images/services/automation.jpg", link: "/services/automation" },
{ title: "AI Consult", subtitle: "Consult service for using AI to improve business workflow and knowledge management", image: "/images/services/ai-consult.jpg", link: "/services/ai-consult" },
{ title: "Marketing Automation", subtitle: "Use AI to help generate and manage marketing workflow", image: "/images/services/marketing.jpg", link: "/services/marketing" },
{ title: "Website Development", subtitle: "Implement website for business and integrate with marketing workflow", image: "/images/services/webdev.jpg", link: "/services/webdev" },
]; ];
--- ---
<Base title="หน้าแรก | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot"> <Base title="MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
<Navigation /> <Navigation />
<Hero <!-- KINETIC HERO -->
title="เปลี่ยนธุรกิจของคุณ ด้วย AI และเทคโนโลยีสมัยใหม่" <Hero />
subtitle="รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย<br>เพิ่มยอดขาย ลดต้นทุน ด้วยเทคโนโลยีล้ำสมัย"
badge="ดิจิทัลเอเจนซี่ในประเทศไทย"
image="/images/hero/hero.jpg"
theme="yellow"
showCTA={true}
size="full"
variant="split"
/>
<!-- Services Section --> <!-- SERVICES SECTION -->
<section class="section services"> <section class="section">
<div class="container"> <div class="container">
<div class="section-header"> <!-- Title with Tilt Effect -->
<span class="section-badge">บริการของเรา</span> <div class="services-title-wrapper" id="services-title">
<h2 class="section-title">เราให้บริการอะไรบ้าง</h2> <div class="services-title-inner">
<p class="section-desc">ครบจบทุก need ด้านดิจิทัลสำหรับธุรกิจของคุณ</p> <span class="badge badge-dark">บริการของเรา</span>
<h2 class="services-title">
ครบทุกโซลูชั่นด้านดิจิตอล
</h2>
<p class="section-desc reveal">
ให้เราดูแลทุกอย่าง ในขณะที่คุณโฟกัสที่ธุรกิจของคุณ
</p>
</div> </div>
</div>
<div class="services-grid"> <div class="services-grid">
{[ {services.map((service, i) => (
{ title: "พัฒนาเว็บไซต์", desc: "สร้างเว็บไซต์ที่ทันสมัย รวดเร็ว และตอบสนองความต้องการ", icon: "🌐", href: "/services/webdev" }, <div class="reveal" style={`animation-delay: ${i * 0.1}s`}>
{ title: "Marketing Automation", desc: "Automate การตลาดเพื่อเพิ่มประสิทธิภาพและลดต้นทุน", icon: "📈", href: "/services/marketing" }, <ServiceCard {...service} />
{ title: "AI Automation", desc: "นำ AI มาใช้เพื่อเพิ่มยอดขายและปรับปรุงการให้บริการ", icon: "🤖", href: "/services/ai" }, </div>
{ title: "Tech Consult", desc: "ให้คำปรึกษาด้านเทคโนโลยีเพื่อธุรกิจของคุณ", icon: "💡", href: "/services/consult" } ))}
].map((s, i) => ( </div>
<a href={s.href} class="service-card card card-accent" style={`animation-delay: ${i * 0.1}s`}>
<div class="service-icon"><span class="icon-emoji">{s.icon}</span></div> <div class="section-cta reveal">
<h3 class="service-title">{s.title}</h3> <a href="/services" class="btn btn-dark btn-lg">
<p class="service-desc">{s.desc}</p> ดูบริการทั้งหมด
<span class="service-arrow">→</span> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a> </a>
))}
</div> </div>
</div> </div>
</section> </section>
<!-- Stats Section --> <!-- PORTFOLIO SECTION -->
<section class="section section-accent stats-section"> <section class="section section-dark section-gradient-top">
<div class="container">
<div class="stats-grid">
{stats.map((stat) => (
<div class="stat-item">
<span class="stat-number">{stat.number}</span>
<span class="stat-label">{stat.label}</span>
</div>
))}
</div>
</div>
</section>
<!-- Portfolio Section -->
<section class="section portfolio-preview">
<div class="container"> <div class="container">
<div class="section-header"> <div class="section-header">
<span class="section-badge">ผลงาน</span> <span class="badge">ผลงานของเรา</span>
<h2 class="section-title">โปรเจกต์ล่าสุด</h2> <h2 class="section-title text-white reveal">
<p class="section-desc">ผลงานที่เราภาคภูมิใจ</p> โปรเจกต์ที่เราภาคภูมิใจ
</h2>
</div> </div>
<div class="portfolio-grid"> <div class="portfolio-grid">
{[ {portfolioItems.slice(0, 6).map((item, i) => (
{ name: "Lungfinler", cat: "เว็บไซต์", img: "/images/portfolio/lungfinler.png", url: "https://lungfinler.com" }, <a href={item.url} target="_blank" rel="noopener" class="portfolio-card reveal" style={`animation-delay: ${i * 0.1}s`}>
{ name: "Jet Industries", cat: "เว็บไซต์", img: "/images/portfolio/jetindustries.png", url: "https://jetindustries.co.th" }, <div class="portfolio-image">
{ name: "Lawyernoom", cat: "เว็บไซต์", img: "/images/portfolio/lawyernoom.png", url: "https://lawyernoom.com" }, <img src={item.thumbnail} alt={item.name} loading="lazy" />
{ name: "Underdog", cat: "เว็บไซต์", img: "/images/portfolio/underdog.png", url: "https://underdog.run" }
].map((p) => (
<a href={p.url} target="_blank" rel="noopener" class="portfolio-card">
<img src={p.img} alt={p.name} />
<div class="portfolio-overlay"> <div class="portfolio-overlay">
<span class="portfolio-category">{p.cat}</span> <span class="portfolio-visit">เยี่ยมชมเว็บไซต์</span>
<h3 class="portfolio-name">{p.name}</h3> </div>
</div>
<div class="portfolio-content">
<span class="portfolio-category">{item.category_label}</span>
<h3 class="portfolio-name">{item.name}</h3>
</div> </div>
</a> </a>
))} ))}
</div> </div>
<div class="section-cta">
<a href="/portfolio" class="btn btn-primary">ดูผลงานทั้งหมด</a> <div class="section-cta reveal">
<a href="/portfolio" class="btn btn-outline-white btn-lg">
ผลงานทั้งหมด
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
</div> </div>
</div> </div>
</section> </section>
<!-- Blog Section --> <!-- BLOG SECTION -->
<section class="section section-light blog-preview"> <section class="section section-gradient-bottom">
<div class="container"> <div class="container">
<div class="section-header"> <div class="section-header">
<span class="section-badge">บทความ</span> <span class="badge badge-dark">บทความ</span>
<h2 class="section-title">ความรู้ด้านดิจิทัล</h2> <h2 class="section-title reveal">
<p class="section-desc">อ่านบทความล่าสุดจากเรา</p> ความรู้ด้านดิจิทัล
</h2>
</div> </div>
<div class="blog-grid"> <div class="blog-grid">
{[ {sortedPosts.slice(0, 3).map((post, i) => (
{ title: "5 วิธี AI เพิ่มยอดขาย", img: "/images/blog/5-ways-ai-increase-sales.jpg", slug: "5-ways-ai-increase-sales" }, <a href={`/blog/${post.slug}`} class="blog-card reveal" style={`animation-delay: ${i * 0.1}s`}>
{ title: "AI Content ที่ Google รัก", img: "/images/blog/ai-content-google-love.jpg", slug: "ai-content-google-love" }, <div class="blog-image">
{ title: "Digital Transformation Guide", img: "/images/blog/digital-transformation.jpg", slug: "digital-transformation-guide" } <img src={post.data.image} alt={post.data.title} loading="lazy" />
].map((post) => ( </div>
<a href={`/blog/${post.slug}`} class="blog-card card">
<div class="blog-image"><img src={post.img} alt={post.title} /></div>
<div class="blog-content"> <div class="blog-content">
<h3 class="blog-title">{post.title}</h3> <span class="blog-category">{post.data.category}</span>
<span class="blog-readmore">อ่านต่อ →</span> <h3 class="blog-title">{post.data.title}</h3>
<p class="blog-excerpt">{post.data.excerpt}</p>
<span class="blog-date">
{new Date(post.data.date).toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' })}
</span>
</div> </div>
</a> </a>
))} ))}
</div> </div>
<div class="section-cta">
<a href="/blog" class="btn btn-secondary">บทความทั้งหมด</a> <div class="section-cta reveal">
<a href="/blog" class="btn btn-dark btn-lg">
บทความทั้งหมด
</a>
</div> </div>
</div> </div>
</section> </section>
<!-- CTA Section --> <!-- CTA SECTION -->
<section class="section section-primary cta-section"> <section class="section section-primary">
<div class="container"> <div class="container">
<div class="cta-content"> <div class="cta-content reveal">
<h2 class="cta-title">พร้อมเริ่มโปรเจกต์ของคุณ?</h2> <h2 class="cta-title">
<p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบเว็บไซต์ที่เหมาะกับธุรกิจของคุณ</p> <span class="title-word">พร้อมเปลี่ยน</span>
<span class="title-word">ธุรกิจของคุณ?</span>
</h2>
<p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบโซลูชันที่เหมาะกับคุณ</p>
<div class="cta-actions"> <div class="cta-actions">
<a href="/contact" class="btn btn-secondary btn-lg">ติดต่อเรา</a> <a href="/contact" class="btn btn-dark btn-lg">
<a href="tel:0809955945" class="btn btn-outline btn-lg">080-995-5945</a> ติดต่อเรา
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
<a href="tel:0809955945" class="btn btn-outline-dark btn-lg">
080-995-5945
</a>
</div> </div>
</div> </div>
</div> </div>
@@ -143,48 +161,397 @@ const stats = [
</Base> </Base>
<style> <style>
.section-header { text-align: center; margin-bottom: 60px; } /* ============================================
.section-badge { display: inline-block; background: var(--color-primary); color: var(--color-black); padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; } SERVICES TITLE WITH TILT EFFECT
.section-title { font-size: clamp(32px, 5vw, 48px); font-weight: 700; margin-bottom: 16px; } ============================================ */
.section-desc { font-size: 18px; color: var(--color-medium-gray); max-width: 600px; margin: 0 auto; }
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .services-title-wrapper {
.service-card { padding: 40px 32px; display: flex; flex-direction: column; cursor: pointer; } perspective: 1000px;
.service-icon { width: 60px; height: 60px; background: var(--color-light-gray); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; } margin-bottom: 60px;
.icon-emoji { font-size: 28px; } text-align: center;
.service-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; } }
.service-desc { font-size: 14px; color: var(--color-medium-gray); line-height: 1.6; flex-grow: 1; }
.service-arrow { font-size: 24px; color: var(--color-primary); margin-top: 20px; transition: transform 0.3s; } .services-title-inner {
.service-card:hover .service-arrow { transform: translateX(8px); } transition: transform 0.1s ease-out;
.section-accent { background: var(--color-accent); color: var(--color-white); } display: inline-block;
.stats-section { padding: 100px 0; } }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; text-align: center; }
.stat-item { display: flex; flex-direction: column; align-items: center; } .services-title {
.stat-number { font-family: var(--font-heading); font-size: 72px; font-weight: 800; color: var(--color-primary); line-height: 1; margin-bottom: 12px; } font-family: var(--font-display);
.stat-label { font-size: 16px; color: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 2px; } font-size: clamp(36px, 6vw, 64px);
.portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 48px; } font-weight: 900;
.portfolio-card { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; } line-height: 1.1;
.portfolio-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } margin: 24px 0;
.portfolio-card:hover img { transform: scale(1.1); } color: var(--color-dark);
.portfolio-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; opacity: 0; transition: opacity 0.3s; } }
.portfolio-card:hover .portfolio-overlay { opacity: 1; }
.portfolio-category { background: var(--color-primary); color: var(--color-black); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; align-self: flex-start; margin-bottom: 8px; } /* ============================================
.portfolio-name { color: var(--color-white); font-size: 18px; font-weight: 600; } SECTION HEADER
.section-cta { text-align: center; } ============================================ */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 48px; }
.blog-card { display: flex; flex-direction: column; } .section-header {
.blog-image { aspect-ratio: 16/10; overflow: hidden; } text-align: center;
.blog-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } margin-bottom: 60px;
.blog-card:hover .blog-image img { transform: scale(1.05); } }
.blog-content { padding: 24px; flex-grow: 1; display: flex; flex-direction: column; }
.blog-title { font-size: 18px; font-weight: 600; margin-bottom: 12px; flex-grow: 1; } .section-title {
.blog-readmore { color: var(--color-accent); font-weight: 500; font-size: 14px; } font-family: var(--font-display);
.cta-content { text-align: center; max-width: 800px; margin: 0 auto; } font-size: clamp(32px, 5vw, 56px);
.cta-title { font-size: clamp(32px, 5vw, 56px); font-weight: 800; margin-bottom: 20px; } font-weight: 900;
.cta-desc { font-size: 18px; margin-bottom: 40px; opacity: 0.8; } line-height: 1.1;
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } margin: 24px 0;
.btn-lg { padding: 18px 40px; font-size: 16px; } color: var(--color-dark);
.btn-outline { background: transparent; color: var(--color-black); border: 2px solid var(--color-black); } }
.btn-outline:hover { background: var(--color-black); color: var(--color-white); }
@media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } .portfolio-grid { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } .stat-number { font-size: 56px; } } .text-white {
@media (max-width: 640px) { .services-grid, .portfolio-grid, .blog-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .hero-actions, .cta-actions { flex-direction: column; } .btn-lg { width: 100%; justify-content: center; } } color: var(--color-white);
}
.section-desc {
font-size: 18px;
color: var(--color-gray-600);
max-width: 500px;
margin: 0 auto;
}
/* ============================================
SERVICES GRID
============================================ */
.services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-bottom: 48px;
}
/* ============================================
PORTFOLIO GRID
============================================ */
.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 48px;
}
.portfolio-card {
display: block;
border-radius: var(--radius-xl);
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
transition: all 0.4s var(--ease-out-expo);
}
.portfolio-card:hover {
transform: translateY(-8px);
background: rgba(255, 255, 255, 0.1);
}
.portfolio-image {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
}
.portfolio-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.portfolio-card:hover .portfolio-image img {
transform: scale(1.08);
}
.portfolio-overlay {
position: absolute;
inset: 0;
background: rgba(26, 26, 46, 0.65);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.portfolio-card:hover .portfolio-overlay {
opacity: 1;
}
.portfolio-visit {
padding: 12px 24px;
background: var(--color-primary);
color: var(--color-black);
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: var(--radius-full);
}
.portfolio-content {
padding: 24px;
}
.portfolio-category {
display: inline-block;
padding: 4px 12px;
background: rgba(254, 212, 0, 0.2);
color: var(--color-primary);
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: var(--radius-full);
margin-bottom: 12px;
}
.portfolio-name {
font-family: var(--font-display);
font-size: 18px;
font-weight: 800;
color: var(--color-white);
}
/* ============================================
BLOG GRID
============================================ */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-bottom: 48px;
}
.blog-card {
display: block;
background: var(--color-white);
border-radius: var(--radius-xl);
border: 1px solid var(--color-gray-200);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all 0.4s var(--ease-out-expo);
}
.blog-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
border-color: var(--color-primary);
}
.blog-image {
aspect-ratio: 16/10;
overflow: hidden;
}
.blog-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.blog-card:hover .blog-image img {
transform: scale(1.08);
}
.blog-content {
padding: 28px;
}
.blog-category {
display: inline-block;
padding: 4px 12px;
background: var(--color-gray-100);
color: var(--color-gray-600);
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: var(--radius-full);
margin-bottom: 12px;
}
.blog-title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 800;
color: var(--color-black);
margin-bottom: 12px;
line-height: 1.3;
}
.blog-excerpt {
font-size: 14px;
color: var(--color-gray-600);
line-height: 1.6;
margin-bottom: 16px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-date {
font-size: 12px;
color: var(--color-gray-400);
}
/* ============================================
CTA SECTION
============================================ */
.cta-content {
text-align: center;
}
.cta-title {
font-family: var(--font-display);
font-size: clamp(36px, 6vw, 64px);
font-weight: 900;
line-height: 1.1;
color: var(--color-black);
margin-bottom: 24px;
}
.title-word {
display: block;
}
.cta-desc {
font-size: 20px;
color: rgba(0, 0, 0, 0.7);
max-width: 500px;
margin: 0 auto 40px;
}
.cta-actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.section-cta {
text-align: center;
}
.btn svg {
width: 20px;
height: 20px;
margin-left: 8px;
transition: transform 0.3s ease;
}
.btn:hover svg {
transform: translateX(4px);
}
/* Button Variations */
.btn-outline-white {
background: transparent;
color: var(--color-white);
border: 2px solid var(--color-white);
}
.btn-outline-white:hover {
background: var(--color-white);
color: var(--color-dark);
}
.btn-outline-dark {
background: transparent;
color: var(--color-black);
border: 2px solid var(--color-black);
}
.btn-outline-dark:hover {
background: var(--color-black);
color: var(--color-white);
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1024px) {
.services-grid,
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
.blog-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.services-grid,
.portfolio-grid,
.blog-grid {
grid-template-columns: 1fr;
}
.cta-actions {
flex-direction: column;
}
.btn {
width: 100%;
}
}
</style> </style>
<script>
// Services Title Tilt Effect
const servicesTitle = document.getElementById('services-title');
const titleInner = servicesTitle?.querySelector('.services-title-inner');
if (titleInner && servicesTitle) {
servicesTitle.addEventListener('mousemove', (e) => {
const rect = servicesTitle.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateX = (y - centerY) / centerY * -8;
const rotateY = (centerX - x) / centerX * 8;
(titleInner as HTMLElement).style.transform =
`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});
servicesTitle.addEventListener('mouseleave', () => {
(titleInner as HTMLElement).style.transform =
'perspective(1000px) rotateX(0) rotateY(0)';
});
}
// Scroll Reveal Animation
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
document.querySelectorAll('.reveal').forEach(el => {
observer.observe(el);
});
</script>

431
src/pages/portfolio.astro
View File

@@ -1,134 +1,28 @@
--- ---
import Base from '../layouts/Base.astro'; import Base from '../layouts/Base.astro';
import Navigation from '../components/Navigation.astro'; import Navigation from '../components/Navigation.astro';
import Hero from '../components/Hero.astro';
import Footer from '../components/Footer.astro'; import Footer from '../components/Footer.astro';
import PageHero from '../components/PageHero.astro';
const portfolioItems = [ import { portfolioItems } from '../data/portfolio';
{
name: "Lungfinler",
url: "https://lungfinler.com",
category: "webdev",
categoryLabel: "พัฒนาเว็บไซต์",
thumbnail: "/images/portfolio/lungfinler.png",
description: "Digital Agency - บริการด้านการสร้างแบรนด์ กราฟิกดีไซน์ และถ่ายภาพสินค้าคุณภาพสูง",
services: ["Website", "Branding", "Graphic Design"]
},
{
name: "Jet Industries",
url: "https://jetindustries.co.th",
category: "webdev",
categoryLabel: "พัฒนาเว็บไซต์",
thumbnail: "/images/portfolio/jetindustries.png",
description: "ผู้ผลิตพลาสติกฉีดขึ้นรูปอย่างแม่นยำ (Precision Plastic Injection Molding) มีประสบการณ์กว่า 40 ปี",
services: ["Website", "Industrial"]
},
{
name: "สำนักงานกฎหมาย ตถาตา",
url: "https://lawyernoom.com",
category: "webdev",
categoryLabel: "พัฒนาเว็บไซต์",
thumbnail: "/images/portfolio/lawyernoom.png",
description: "สำนักงานกฎหมายโดย ทนายความ คมสัน ศรีวนิชย์ - บริการด้านคดีความ คดีแพ่ง คดีอาญา",
services: ["Website", "Legal"]
},
{
name: "Underdog Marketing",
url: "https://underdog.run",
category: "webdev",
categoryLabel: "พัฒนาเว็บไซต์",
thumbnail: "/images/portfolio/underdog.png",
description: "บล็อกการตลาดและการขายสไตล์ ลุยไม่ยั้ง โดย บุ้ง ดีดติ่งหู",
services: ["Website", "Content Marketing"]
},
{
name: "Baofuling Shop",
url: "https://baofulingshop.com",
category: "ecommerce",
categoryLabel: "อีคอมเมิร์ซ",
thumbnail: "/images/portfolio/baofuling.png",
description: "ร้านค้าออนไลน์ครีมบัวหิมะและผลิตภัณฑ์ความงามจีน",
services: ["E-commerce", "Beauty"]
},
{
name: "เทรนเนอร์ซันนี่",
url: "https://trainersunny.com",
category: "webdev",
categoryLabel: "พัฒนาเว็บไซต์",
thumbnail: "/images/portfolio/trainersunny.png",
description: "ผู้เชี่ยวชาญด้านการพัฒนาบุคลากรและ Soft Skill",
services: ["Website", "Training"]
},
{
name: "เลือดจระเข้วานิไทย",
url: "https://เลือดจระเข้วานิไทย.com",
category: "ecommerce",
categoryLabel: "อีคอมเมิร์ซ",
thumbnail: "/images/portfolio/luadjob.png",
description: "ตัวแทนจำหน่ายเลือดจระเข้วานิไทยอย่างเป็นทางการ",
services: ["E-commerce", "Health"]
},
{
name: "ทวนทอง 99",
url: "https://tuanthong99.com",
category: "ecommerce",
categoryLabel: "อีคอมเมิร์ซ",
thumbnail: "/images/portfolio/tuanthong.png",
description: "ร้านค้าออนไลน์สมุนไพรไทยคุณภาพสูง",
services: ["E-commerce", "Thai Herbal"]
},
{
name: "Odoo Portal",
url: "https://odooportal.com",
category: "marketing",
categoryLabel: "ที่ปรึกษาการตลาด",
thumbnail: "/images/portfolio/odooportal.png",
description: "ตัวแทนจำหน่าย Odoo อย่างเป็นทางการในประเทศไทย",
services: ["Odoo ERP", "System Implementation"]
}
];
const categories = [
{ id: 'all', name: 'ทั้งหมด' },
{ id: 'webdev', name: 'พัฒนาเว็บไซต์' },
{ id: 'ecommerce', name: 'อีคอมเมิร์ซ' },
{ id: 'marketing', name: 'ที่ปรึกษาการตลาด' }
];
const stats = [
{ number: "50+", label: "โปรเจกต์" },
{ number: "40+", label: "ลูกค้า" },
{ number: "5+", label: "ปีประสบการณ์" },
{ number: "100%", label: "ความพึงพอใจ" }
];
--- ---
<Base title="ผลงาน | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot"> <Base title="ผลงาน | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
<Navigation /> <Navigation />
<Hero <PageHero
badge="ผลงาน"
title="ผลงานของเรา" title="ผลงานของเรา"
subtitle="รวมผลงานพัฒนาเว็บไซต์และโปรเจกต์ที่เราภาคภูมิใจ" subtitle="รวมผลงานพัฒนาเว็บไซต์และโปรเจกต์ที่เราภาคภูมิใจ"
badge="พอร์ตโฟลิโอ"
image="/images/hero/hero.jpg"
theme="yellow"
showCTA={false}
variant="text-only"
size="compact"
/> />
<!-- Filter Section --> <!-- Filter Section -->
<section class="filter-section"> <section class="filter-section" style="background: #1a1a2e; margin-top: -1px;">
<div class="container"> <div class="container">
<div class="filter-buttons" id="category-filters"> <div class="filter-buttons" id="category-filters">
{categories.map((cat) => ( <button class="filter-btn active" data-category="all">ทั้งหมด</button>
<button <button class="filter-btn" data-category="webdev">พัฒนาเว็บไซต์</button>
class="filter-btn" <button class="filter-btn" data-category="ecommerce">อีคอมเมิร์ซ</button>
data-category={cat.id} <button class="filter-btn" data-category="marketing">ที่ปรึกษาการตลาด</button>
>
{cat.name}
</button>
))}
</div> </div>
</div> </div>
</section> </section>
@@ -141,26 +35,23 @@ const stats = [
<article <article
class="portfolio-card" class="portfolio-card"
data-category={item.category} data-category={item.category}
style={`animation-delay: ${index * 0.05}s`} style={`--delay: ${index * 0.05}s`}
> >
<div class="portfolio-image"> <div class="portfolio-image">
<img src={item.thumbnail} alt={item.name} loading="lazy" /> <img src={item.thumbnail} alt={item.name} loading="lazy" />
<div class="portfolio-overlay"> <div class="portfolio-overlay">
<a href={item.url} target="_blank" rel="noopener noreferrer" class="visit-btn"> <a href={item.url || '#'} target="_blank" rel="noopener noreferrer" class="visit-btn">
เยี่ยมชมเว็บไซต์ เยี่ยมชมเว็บไซต์
<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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
</svg>
</a> </a>
</div> </div>
</div> </div>
<div class="portfolio-content"> <div class="portfolio-content">
<span class="portfolio-category">{item.categoryLabel}</span> <span class="portfolio-category">{item.category_label}</span>
<h3 class="portfolio-name">{item.name}</h3> <h3 class="portfolio-name">{item.name}</h3>
<p class="portfolio-desc">{item.description}</p> <p class="portfolio-desc">{item.description}</p>
<div class="portfolio-tags">
{item.services.slice(0, 3).map((service) => (
<span class="tag">{service}</span>
))}
</div>
</div> </div>
</article> </article>
))} ))}
@@ -168,29 +59,15 @@ const stats = [
</div> </div>
</section> </section>
<!-- Stats Section -->
<section class="section section-dark stats-section">
<div class="container">
<div class="stats-grid">
{stats.map((stat) => (
<div class="stat-item">
<span class="stat-number">{stat.number}</span>
<span class="stat-label">{stat.label}</span>
</div>
))}
</div>
</div>
</section>
<!-- CTA Section --> <!-- CTA Section -->
<section class="section section-primary cta-section"> <section class="section section-primary cta-section">
<div class="container"> <div class="container">
<div class="cta-content"> <div class="cta-content">
<h2 class="cta-title">อยากได้เว็บไซต์แบบนี้บ้าง?</h2> <h2 class="cta-title">อยากได้เว็บไซต์แบบนี้บ้าง?</h2>
<p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบเว็บไซต์ที่เหมาะกับธุรกิจของคุณ</p> <p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบโซลูชันที่เหมาะกับคุณ</p>
<div class="cta-actions"> <div class="cta-actions">
<a href="/contact" class="btn btn-secondary btn-lg">ปรึกษาฟรี</a> <a href="/contact" class="btn btn-secondary btn-lg">ปรึกษาฟรี</a>
<a href="tel:0809955945" class="btn btn-outline btn-lg">080-995-5945</a> <a href="tel:0809955945" class="btn btn-outline-dark btn-lg">080-995-5945</a>
</div> </div>
</div> </div>
</div> </div>
@@ -204,8 +81,6 @@ const stats = [
const filterBtns = document.querySelectorAll('.filter-btn'); const filterBtns = document.querySelectorAll('.filter-btn');
const portfolioCards = document.querySelectorAll('.portfolio-card'); const portfolioCards = document.querySelectorAll('.portfolio-card');
filterBtns[0]?.classList.add('active');
filterBtns.forEach(btn => { filterBtns.forEach(btn => {
btn.addEventListener('click', () => { btn.addEventListener('click', () => {
const category = btn.getAttribute('data-category'); const category = btn.getAttribute('data-category');
@@ -227,310 +102,162 @@ const stats = [
</script> </script>
<style> <style>
.hero {
padding: 160px 0 80px;
background: var(--color-black);
text-align: center;
}
.hero-badge {
display: inline-block;
background: rgba(254, 212, 0, 0.1);
color: var(--color-primary);
padding: 8px 20px;
border-radius: 30px;
font-size: 14px;
font-weight: 500;
margin-bottom: 24px;
border: 1px solid rgba(254, 212, 0, 0.2);
}
.hero-title {
font-size: clamp(48px, 10vw, 96px);
font-weight: 800;
color: var(--color-white);
margin-bottom: 16px;
text-transform: uppercase;
}
.hero-desc {
font-size: 20px;
color: #999;
max-width: 600px;
margin: 0 auto;
}
.filter-section { .filter-section {
background: var(--color-black); background: var(--color-dark);
padding: 24px 0; padding: 20px 0;
position: sticky; position: sticky;
top: 80px; top: 80px;
z-index: 100; z-index: 1;
border-bottom: 1px solid rgba(255,255,255,0.1); margin-top: -1px;
border-bottom: 1px solid rgba(255,255,255,0.05);
} }
.filter-buttons { .filter-buttons {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 12px; gap: 12px;
flex-wrap: wrap; flex-wrap: wrap;
} }
.filter-btn { .filter-btn {
background: rgba(255, 255, 255, 0.1); background: rgba(255,255,255,0.05);
color: #9ca3af; color: rgba(255,255,255,0.6);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255,255,255,0.1);
padding: 10px 24px; padding: 10px 24px;
border-radius: 30px; border-radius: 24px;
font-family: var(--font-heading); font-family: var(--font-heading);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s ease;
} }
.filter-btn:hover { .filter-btn:hover {
background: rgba(255, 255, 255, 0.2); background: rgba(255,255,255,0.1);
color: #fff; color: var(--color-white);
border-color: rgba(255, 255, 255, 0.2); border-color: rgba(255,255,255,0.2);
} }
.filter-btn.active { .filter-btn.active {
background: var(--color-primary); background: var(--color-primary);
color: #000; color: var(--color-black);
border-color: var(--color-primary); border-color: var(--color-primary);
} }
.portfolio-section { .portfolio-section {
background: var(--color-black); background: var(--color-black);
padding-top: 60px; padding-top: 80px;
} }
.portfolio-grid { .portfolio-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 32px; gap: 32px;
} }
.portfolio-card { .portfolio-card {
background: var(--color-dark-gray); background: rgba(255,255,255,0.02);
border-radius: 16px; border-radius: 20px;
overflow: hidden; overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s; border: 1px solid rgba(255,255,255,0.05);
transition: all 0.4s ease;
animation: fadeUp 0.6s ease backwards;
animation-delay: var(--delay);
} }
.portfolio-card:hover { .portfolio-card:hover {
transform: translateY(-8px); transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(254, 212, 0, 0.15); border-color: var(--color-primary);
box-shadow: 0 20px 50px rgba(254, 212, 0, 0.1);
} }
.portfolio-image { .portfolio-image {
position: relative; position: relative;
aspect-ratio: 4/3; aspect-ratio: 16/10;
overflow: hidden; overflow: hidden;
} }
.portfolio-image img { .portfolio-image img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
transition: transform 0.5s; transition: transform 0.5s ease;
} }
.portfolio-card:hover .portfolio-image img { transform: scale(1.08); }
.portfolio-card:hover .portfolio-image img {
transform: scale(1.1);
}
.portfolio-overlay { .portfolio-overlay {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: rgba(254, 212, 0, 0.9); background: rgba(254, 212, 0, 0.95);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
opacity: 0; opacity: 0;
transition: opacity 0.3s; transition: opacity 0.3s ease;
} }
.portfolio-card:hover .portfolio-overlay { opacity: 1; }
.portfolio-card:hover .portfolio-overlay {
opacity: 1;
}
.visit-btn { .visit-btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 10px;
background: var(--color-black); background: var(--color-black);
color: var(--color-primary); color: var(--color-white);
padding: 12px 24px; padding: 14px 28px;
border-radius: 30px; border-radius: 30px;
font-family: var(--font-heading); font-family: var(--font-heading);
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
transition: transform 0.2s; transition: transform 0.2s ease;
} }
.visit-btn:hover { transform: scale(1.05); }
.visit-btn:hover { .visit-btn svg { width: 18px; height: 18px; }
transform: scale(1.05); .portfolio-content { padding: 28px; }
}
.portfolio-content {
padding: 24px;
}
.portfolio-category { .portfolio-category {
display: inline-block; display: inline-block;
background: var(--color-primary); background: var(--color-primary);
color: var(--color-black); color: var(--color-black);
padding: 4px 12px; padding: 4px 12px;
border-radius: 20px; border-radius: 12px;
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
margin-bottom: 12px; margin-bottom: 14px;
} }
.portfolio-name { .portfolio-name {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
color: var(--color-white); color: var(--color-white);
margin-bottom: 8px; margin-bottom: 10px;
} }
.portfolio-desc { .portfolio-desc {
font-size: 14px; font-size: 14px;
color: #999; color: rgba(255,255,255,0.5);
line-height: 1.6; line-height: 1.6;
margin-bottom: 16px;
}
.portfolio-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag {
background: rgba(255, 255, 255, 0.1);
color: #999;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
}
.stats-section {
padding: 100px 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 48px;
text-align: center;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
}
.stat-number {
font-family: var(--font-heading);
font-size: 72px;
font-weight: 800;
color: var(--color-primary);
line-height: 1;
margin-bottom: 12px;
}
.stat-label {
font-size: 16px;
color: #999;
text-transform: uppercase;
letter-spacing: 2px;
}
.cta-section {
padding: 100px 0;
}
.cta-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
} }
.section-primary { background: var(--color-primary); }
.cta-content { text-align: center; }
.cta-title { .cta-title {
font-size: clamp(32px, 5vw, 48px); font-size: clamp(28px, 4vw, 42px);
font-weight: 800; font-weight: 800;
margin-bottom: 16px; margin-bottom: 16px;
color: var(--color-black);
} }
.cta-desc { .cta-desc {
font-size: 18px; font-size: 18px;
margin-bottom: 40px; color: rgba(0,0,0,0.7);
opacity: 0.8; margin-bottom: 32px;
max-width: 550px;
margin-left: auto;
margin-right: auto;
} }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn-outline-dark { background: transparent; color: var(--color-black); border: 2px solid var(--color-black); }
.btn-outline-dark:hover { background: var(--color-black); color: var(--color-white); }
.btn-lg { padding: 16px 36px; font-size: 16px; }
.cta-actions { @keyframes fadeUp {
display: flex; from { opacity: 0; transform: translateY(20px); }
gap: 16px; to { opacity: 1; transform: translateY(0); }
justify-content: center;
flex-wrap: wrap;
}
.btn-lg {
padding: 18px 40px;
font-size: 16px;
}
.btn-outline {
background: transparent;
color: var(--color-black);
border: 2px solid var(--color-black);
}
.btn-outline:hover {
background: var(--color-black);
color: var(--color-white);
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.portfolio-grid { .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
grid-template-columns: repeat(2, 1fr);
} }
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.stat-number {
font-size: 56px;
}
}
@media (max-width: 640px) { @media (max-width: 640px) {
.portfolio-grid { .portfolio-grid { grid-template-columns: 1fr; }
grid-template-columns: 1fr; .filter-buttons { gap: 8px; }
} .filter-btn { padding: 8px 16px; font-size: 13px; }
.cta-actions { flex-direction: column; }
.filter-buttons { .btn-lg { width: 100%; justify-content: center; }
gap: 8px;
}
.filter-btn {
padding: 8px 16px;
font-size: 13px;
}
.cta-actions {
flex-direction: column;
}
.btn-lg {
width: 100%;
justify-content: center;
}
} }
</style> </style>

241
src/pages/privacy.astro
View File

@@ -1,266 +1,93 @@
--- ---
import Base from '../layouts/Base.astro'; import Base from '../layouts/Base.astro';
import Navigation from '../components/Navigation.astro'; import Navigation from '../components/Navigation.astro';
import Hero from '../components/Hero.astro';
import Footer from '../components/Footer.astro'; import Footer from '../components/Footer.astro';
import PageHero from '../components/PageHero.astro';
--- ---
<Base title="นโยบายความเป็นส่วนตัว | MoreminiMore"> <Base title="นโยบายความเป็นส่วนตัว | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
<Navigation /> <Navigation />
<Hero <PageHero
badge="กฎหมาย"
title="นโยบายความเป็นส่วนตัว" title="นโยบายความเป็นส่วนตัว"
subtitle="มีผลบังคับใช้วันที่ 5 พฤษภาคม 2569" subtitle="มีผลบังคับใช้วันที่ 5 พฤษภาคม 2569"
badge="กฎหมาย"
image="/images/hero/ai-automation.jpg"
theme="yellow"
showCTA={false}
variant="text-only"
size="compact"
/> />
<main class="legal-page"> <section class="section legal-section">
<div class="container"> <div class="container">
<header class="legal-header">
<h1 class="legal-title">นโยบายความเป็นส่วนตัว</h1>
<p class="legal-meta">มีผลบังคับใช้วันที่: 5 พฤษภาคม 2569</p>
</header>
<div class="legal-content"> <div class="legal-content">
<p class="legal-intro"> <p class="legal-intro">บริษัท มอร์มินิมอร์ จำกัด ให้ความสำคัญกับการคุ้มครองข้อมูลส่วนบุคคลของท่าน</p>
<strong>บริษัท มอร์มินิมอร์ จำกัด</strong> ("บริษัทฯ") ให้ความสำคัญกับการคุ้มครองข้อมูลส่วนบุคคลของท่าน จึงได้จัดทำนโยบายความเป็นส่วนตัวฉบับนี้ขึ้นเพื่อชี้แจงเกี่ยวกับการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคล รวมถึงสิทธิต่างๆ ของท่านตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562
</p>
<section class="legal-section"> <div class="legal-section">
<h2>1. ข้อมูลส่วนบุคคลที่เราเก็บรวบรวม</h2> <h2>1. ข้อมูลส่วนบุคคลที่เราเก็บรวบรวม</h2>
<p>ข้อมูลส่วนบุคคลที่บริษัทฯ อาจเก็บรวบรวมจากท่าน อาจรวมถึง:</p> <p>ข้อมูลส่วนบุคคลที่บริษัทฯ อาจเก็บรวบรวมจากท่าน อาจรวมถึง:</p>
<ul> <ul>
<li><strong>ข้อมูลส่วนบุคคลทั่วไป:</strong> ชื่อ-นามสกุล ที่อยู่อีเมล หมายเลขโทรศัพท์ ที่อยู่ไปรษณีย์ วันเดือนปีเกิด</li> <li><strong>ข้อมูลส่วนบุคคลทั่วไป:</strong> ชื่อ-นามสกุล ที่อยู่อีเมล หมายเลขโทรศัพท์</li>
<li><strong>ข้อมูลการติดต่อ:</strong> ข้อมูลการติดต่อที่ท่านให้ไว้เมื่อลงทะเบียน กรอกแบบฟอร์ม หรือติดต่อบริษัทฯ</li> <li><strong>ข้อมูลการติดต่อ:</strong> ข้อมูลการติดต่อที่ท่านให้ไว้เมื่อลงทะเบียนหรือกรอกแบบฟอร์ม</li>
<li><strong>ข้อมูลการใช้งาน:</strong> IP address, ข้อมูลการเข้าชมเว็บไซต์, คุกกี้, ข้อมูลกิจกรรมการใช้งาน</li> <li><strong>ข้อมูลการใช้งาน:</strong> IP address, ข้อมูลการเข้าชมเว็บไซต์, คุกกี้</li>
<li><strong>ข้อมูลการเงิน:</strong> ข้อมูลบัตรเครดิต/เดบิต ข้อมูลการชำระเงิน (กรณีใช้บริการที่มีค่าใช้จ่าย)</li>
<li><strong>ข้อมูลอื่นที่ท่านให้ไว้:</strong> ข้อมูลใดๆ ที่ท่านให้ไว้โดยสมัครใจผ่านช่องทางการติดต่อของบริษัทฯ</li>
</ul> </ul>
</section> </div>
<section class="legal-section"> <div class="legal-section">
<h2>2. วัตถุประสงค์ในการเก็บรวบรวมข้อมูล</h2> <h2>2. วัตถุประสงค์ในการเก็บรวบรวมข้อมูล</h2>
<p>บริษัทฯ เก็บรวบรวมข้อมูลส่วนบุคคลเพื่อวัตถุประสงค์ดังต่อไปนี้:</p> <p>เราเก็บรวบรวมข้อมูลส่วนบุคคลเพื่อวัตถุประสงค์ดังต่อไปนี้:</p>
<ul> <ul>
<li>เพื่อให้บริการและดำเนินการตามคำขอของท่าน</li> <li>เพื่อให้บริการและดูแลลูกค้า</li>
<li>เพื่อการสื่อสารและให้ข้อมูลข่าวสารเกี่ยวกับบริการของบริษัทฯ</li> <li>เพื่อติดต่อสื่อสารกับท่าน</li>
<li>เพื่อปรับปรุงคุณภาพบริการและพัฒนาเว็บไซต์</li> <li>เพื่อปรับปรุงการให้บริการ</li>
<li>เพื่อการวิเคราะห์ข้อมูลและสถิติการใช้งาน</li> <li>เพื่อปฏิบัติตามกฎหมาย</li>
<li>เพื่อการตลาดและการโฆษณา (ได้รับความยินยอมจากท่าน)</li>
<li>เพื่อการปฏิบัติตามกฎหมาย คำสั่ง หรือกระบวนการทางกฎหมาย</li>
<li>เพื่อการรักษาความปลอดภัยและป้องกันการทุจริต</li>
</ul> </ul>
</section>
<section class="legal-section">
<h2>3. การใช้และเปิดเผยข้อมูลส่วนบุคคล</h2>
<p>บริษัทฯ จะไม่เปิดเผยข้อมูลส่วนบุคคลของท่านต่อบุคคลที่สาม เว้นแต่:</p>
<ul>
<li>ได้รับความยินยอมจากท่าน</li>
<li>จำเป็นต้องเปิดเผยเพื่อให้บริการตามคำขอของท่าน</li>
<li>จำเป็นต้องเปิดเผยต่อผู้ให้บริการที่บริษัทฯ ว่าจ้างให้ดำเนินการในส่วนที่จำเป็น</li>
<li>กฎหมายกำหนดหรือร้านขอให้เปิดเผย</li>
<li>เพื่อป้องกันหรือระงับอันตรายต่อชีวิต สุขภาพ หรือทรัพย์สิน</li>
<li>จำเป็นเพื่อประโยชน์โดยชอบด้วยกฎหมายของบริษัทฯ</li>
</ul>
</section>
<section class="legal-section">
<h2>4. ระยะเวลาการเก็บรักษาข้อมูล</h2>
<p>บริษัทฯ จะเก็บรักษาข้อมูลส่วนบุคคลของท่านตราบเท่าที่จำเป็นเพื่อบรรลุวัตถุประสงค์ที่ระบุไว้ในนโยบายนี้ เว้นแต่กฎหมายกำหนดให้เก็บรักษาไว้นานกว่านั้น</p>
<p>ท่านสามารถขอให้บริษัทฯ ลบหรือทำลายข้อมูลส่วนบุคคลของท่านได้ตามสิทธิ์ของท่านในข้อ 7</p>
</section>
<section class="legal-section">
<h2>5. การคุ้มครองข้อมูลส่วนบุคคล</h2>
<p>บริษัทฯ มีมาตรการรักษาความปลอดภัยที่เหมาะสมเพื่อป้องกันการสูญหาย เข้าถึง ใช้ เปลี่ยนแปลง แก้ไข หรือเปิดเผยข้อมูลส่วนบุคคลโดยไม่ได้รับอนุญาต รวมถึงมาตรการทางเทคนิคและองค์กรที่จำเป็น</p>
</section>
<section class="legal-section">
<h2>6. การใช้คุกกี้</h2>
<p>เว็บไซต์ของบริษัทฯ อาจใช้คุกกี้และเทคโนโลยีที่คล้ายคลึงกันเพื่อ:</p>
<ul>
<li>จดจำการตั้งค่าของท่าน</li>
<li>วิเคราะห์การใช้งานเว็บไซต์</li>
<li>ปรับปรุงประสบการณ์การใช้งาน</li>
<li>แสดงเนื้อหาและโฆษณาที่ท่านสนใจ</li>
</ul>
<p>ท่านสามารถตั้งค่าเบราว์เซอร์ของท่านเพื่อปฏิเสธคุกกี้บางประเภทหรือทั้งหมดได้ แต่การปฏิเสธคุกกี้อาจส่งผลต่อการทำงานของเว็บไซต์</p>
</section>
<section class="legal-section">
<h2>7. สิทธิของเจ้าของข้อมูล</h2>
<p>ตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล ท่านมีสิทธิดังต่อไปนี้:</p>
<h3>7.1 สิทธิในการเข้าถึง</h3>
<p>ท่านมีสิทธิขอเข้าถึงและขอรับสำเนาข้อมูลส่วนบุคคลของท่านที่บริษัทฯ มีอยู่</p>
<h3>7.2 สิทธิในการแก้ไข</h3>
<p>ท่านมีสิทธิขอให้บริษัทฯ แก้ไขข้อมูลส่วนบุคคลที่ไม่ถูกต้องหรือไม่สมบูรณ์</p>
<h3>7.3 สิทธิในการลบ</h3>
<p>ท่านมีสิทธิขอให้บริษัทฯ ลบข้อมูลส่วนบุคคลของท่าน ในกรณีที่ข้อมูลนั้นไม่จำเป็นต้องเก็บรักษาไว้ต่อไป</p>
<h3>7.4 สิทธิในการระงับการใช้</h3>
<p>ท่านมีสิทธิขอให้บริษัทฯ ระงับการใช้ข้อมูลส่วนบุคคลของท่านในบางกรณี</p>
<h3>7.5 สิทธิในการคัดค้าน</h3>
<p>ท่านมีสิทธิคัดค้านการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคลของท่าน</p>
<h3>7.6 สิทธิในการโอนย้าย</h3>
<p>ท่านมีสิทธิขอรับข้อมูลส่วนบุคคลในรูปแบบที่สามารถอ่านได้ด้วยเครื่องมือหรืออุปกรณ์อัตโนมัติ และขอส่งหรือโอนข้อมูลนั้นไปยังระบบอื่น</p>
<h3>7.7 สิทธิในการถอนความยินยอม</h3>
<p>ท่านมีสิทธิถอนความยินยอมที่ท่านได้ให้ไว้แก่บริษัทฯ ได้ตลอดเวลา</p>
<h3>7.8 สิทธิในการร้องเรียน</h3>
<p>ท่านมีสิทธิร้องเรียนต่อหน่วยงานกำกับดูแล (สำนักงานคณะกรรมการคุ้มครองข้อมูลส่วนบุคคล) หากบริษัทฯ ละเมิดหรือไม่ปฏิบัติตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล</p>
</section>
<section class="legal-section">
<h2>8. การติดต่อบริษัทฯ</h2>
<p>หากท่านมีคำถาม ข้อสงสัย หรือต้องการใช้สิทธิใดๆ ตามนโยบายนี้ กรุณาติดต่อบริษัทฯ:</p>
<div class="contact-box">
<p><strong>บริษัท มอร์มินิมอร์ จำกัด</strong></p>
<p><strong>ที่อยู่:</strong> กรุงเทพมหานคร ประเทศไทย</p>
<p><strong>โทรศัพท์:</strong> 080-995-5945</p>
<p><strong>อีเมล:</strong> contact@moreminimore.com</p>
</div> </div>
</section>
<section class="legal-section"> <div class="legal-section">
<h2>9. การเปลี่ยนแปลงนโยบาย</h2> <h2>3. การคุ้มครองข้อมูล</h2>
<p>บริษัทฯ อาจปรับปรุงหรือเปลี่ยนแปลงนโยบายความเป็นส่วนตัวนี้เป็นครั้งคราว การเปลี่ยนแปลงจะมีผลเมื่อประกาศบนเว็บไซต์ ท่านควรตรวจสอบนโยบายนี้เป็นระยะเพื่อรับทราบการเปลี่ยนแปลง</p> <p>เรามีมาตรการรักษาความปลอดภัยที่เหมาะสมเพื่อป้องกันการสูญหาย เข้าถึง ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยไม่ได้รับอนุญาต</p>
<p><strong>วันที่มีผลบังคับใช้:</strong> 5 พฤษภาคม 2569</p> </div>
</section>
<footer class="legal-footer"> <div class="legal-section">
<p>*นโยบายความเป็นส่วนตัวฉบับนี้จัดทำขึ้นตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562</p> <h2>4. สิทธิของท่าน</h2>
</footer> <p>ท่านมีสิทธิในการเข้าถึง แก้ไข ลบ หรือระงับการใช้ข้อมูลส่วนบุคคลของท่าน กรุณาติดต่อเราผ่านช่องทางที่ระบุในเว็บไซต์</p>
</div> </div>
</div> </div>
</main> </div>
</section>
<Footer /> <Footer />
</Base> </Base>
<style> <style>
.legal-page { .legal-section { background: var(--color-white); }
padding: 120px 0 80px; .legal-content { max-width: 800px; margin: 0 auto; }
min-height: 100vh;
}
.legal-header {
text-align: center;
margin-bottom: 60px;
padding-bottom: 40px;
border-bottom: 2px solid var(--color-primary);
}
.legal-title {
font-size: clamp(36px, 5vw, 56px);
font-weight: 800;
color: var(--color-black);
margin-bottom: 16px;
}
.legal-meta {
font-size: 14px;
color: var(--color-medium-gray);
}
.legal-content {
max-width: 800px;
margin: 0 auto;
}
.legal-intro { .legal-intro {
font-size: 18px; font-size: 18px;
line-height: 1.8; color: var(--color-medium-gray);
margin-bottom: 48px; margin-bottom: 48px;
padding: 24px; line-height: 1.7;
background: var(--color-light-gray);
border-radius: 12px;
border-left: 4px solid var(--color-primary);
} }
.legal-section { .legal-section {
margin-bottom: 48px; margin-bottom: 48px;
} }
.legal-section h2 { .legal-section h2 {
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
color: var(--color-black);
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid #eee;
}
.legal-section h3 {
font-size: 18px;
font-weight: 600;
color: var(--color-black); color: var(--color-black);
margin: 24px 0 12px;
color: var(--color-primary);
} }
.legal-section p { .legal-section p {
font-size: 16px; font-size: 16px;
line-height: 1.8;
color: #444; color: #444;
line-height: 1.8;
margin-bottom: 16px; margin-bottom: 16px;
} }
.legal-section ul { .legal-section ul {
list-style: none; margin-left: 24px;
padding: 0; margin-bottom: 16px;
} }
.legal-section li { .legal-section li {
position: relative;
padding-left: 24px;
margin-bottom: 12px;
font-size: 16px; font-size: 16px;
line-height: 1.7;
color: #444; color: #444;
} line-height: 1.8;
.legal-section li::before {
content: '•';
position: absolute;
left: 0;
color: var(--color-primary);
font-weight: bold;
}
.contact-box {
background: var(--color-light-gray);
padding: 24px;
border-radius: 12px;
margin-top: 16px;
}
.contact-box p {
margin-bottom: 8px; margin-bottom: 8px;
} }
.legal-footer {
margin-top: 60px;
padding-top: 24px;
border-top: 1px solid #eee;
text-align: center;
}
.legal-footer p {
font-size: 14px;
color: var(--color-medium-gray);
font-style: italic;
}
</style> </style>

248
src/pages/services/[slug].astro Normal file
View File

@@ -0,0 +1,248 @@
---
import Base from '../../layouts/Base.astro';
import Navigation from '../../components/Navigation.astro';
import Footer from '../../components/Footer.astro';
import PageHero from '../../components/PageHero.astro';
import { getCollection, render } from 'astro:content';
// For SSR mode, use Astro.params directly
const { slug } = Astro.params;
const services = await getCollection('services');
// Use id for matching since slug might be undefined
const service = services.find(s => s.id === slug);
if (!service) {
return Astro.redirect('/404');
}
const { Content } = await render(service);
const features = [
{ icon: service.data.feature1_icon, title: service.data.feature1_title, desc: service.data.feature1_desc },
{ icon: service.data.feature2_icon, title: service.data.feature2_title, desc: service.data.feature2_desc },
{ icon: service.data.feature3_icon, title: service.data.feature3_title, desc: service.data.feature3_desc },
{ icon: service.data.feature4_icon, title: service.data.feature4_title, desc: service.data.feature4_desc },
{ icon: service.data.feature5_icon, title: service.data.feature5_title, desc: service.data.feature5_desc },
{ icon: service.data.feature6_icon, title: service.data.feature6_title, desc: service.data.feature6_desc },
].filter(f => f.title);
const processSteps = [
{ num: "01", title: "วิเคราะห์", desc: service.data.category === 'tech-consult' ? "วิเคราะห์กระบวนการทำงานปัจจุบันและหาโอกาส" : "วิเคราะห์การตลาดปัจจุบันและหาโอกาส" },
{ num: "02", title: "ออกแบบ", desc: "ออกแบบระบบที่เหมาะกับความต้องการและ budget" },
{ num: "03", title: "พัฒนา", desc: "พัฒนาและ deploy ระบบพร้อมทดสอบก่อนใช้งานจริง" },
{ num: "04", title: service.data.category === 'tech-consult' ? "Support" : "วัดผล", desc: service.data.category === 'tech-consult' ? "ดูแลและปรับปรุงระบบให้ทำงานได้อย่างต่อเนื่อง" : "ติดตามผลและปรับปรุงอย่างต่อเนื่องเพื่อเพิ่ม ROI" },
];
const uspText = service.data.category === 'tech-consult'
? "ลูกค้าที่ใช้บริการ Consult จะได้รับ Server สำหรับ App และ AI ฟรี (สำหรับการใช้งานปกติ) หากต้องการใช้งานหนักหรือ Resource-intensive จะมีค่าใช้จ่ายเพิ่มเติม"
: "ลูกค้าที่ใช้ Server ของเราจะได้รับบริการแก้ไขและเพิ่มเนื้อหาเว็บไซต์ฟรี! จ่ายเฉพาะเมื่อต้องการ Redesign ทั้งหมด หรือ Upgrade ฟีเจอร์ใหญ่ เช่น เพิ่มระบบ E-commerce";
const uspTitle = service.data.category === 'tech-consult'
? "Server ฟรีสำหรับลูกค้า Consult"
: "แก้ไขเนื้อหาฟรี!";
---
<Base title={`${service.data.title} | MoreminiMore`}>
<Navigation />
<PageHero
badge={service.data.badge}
title={service.data.title}
subtitle={service.data.subtitle}
/>
<!-- Objective Badge -->
<section class="section section-dark" style="padding: 40px 0;">
<div class="container">
<div class="hero-objective">
<span class="objective-label">เป้าหมายหลัก:</span>
<span class="objective-value">{service.data.objective}</span>
</div>
</div>
</section>
<!-- USP Section -->
<section class="section section-light usp-section">
<div class="container">
<div class="usp-card">
<div class="usp-icon">🎁</div>
<div class="usp-content">
<h3 class="usp-title">{uspTitle}</h3>
<p class="usp-desc">{uspText}</p>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="section features-section">
<div class="container">
<div class="section-header">
<span class="section-badge">บริการของเรา</span>
<h2 class="section-title">{service.data.title} ที่เราช่วยได้</h2>
</div>
<div class="features-grid">
{features.map((feature, i) => (
<div class="feature-card" style={`--delay: ${i * 0.1}s`}>
<div class="feature-icon">{feature.icon || "⭐"}</div>
<h3 class="feature-title">{feature.title}</h3>
<p class="feature-desc">{feature.desc}</p>
</div>
))}
</div>
</div>
</section>
<!-- Process Section -->
<section class="section section-dark process-section">
<div class="container">
<div class="section-header">
<span class="section-badge">กระบวนการ</span>
<h2 class="section-title-light">วิธีการทำงานของเรา</h2>
</div>
<div class="process-steps">
{processSteps.map((step, i) => (
<div class="step" style={`--delay: ${i * 0.1}s`}>
<span class="step-num">{step.num}</span>
<h3 class="step-title">{step.title}</h3>
<p class="step-desc">{step.desc}</p>
</div>
))}
</div>
</div>
</section>
<!-- CTA Section -->
<section class="section section-primary cta-section">
<div class="container">
<div class="cta-content">
<h2 class="cta-title">ต้องการ{service.data.objective}?</h2>
<p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบโซลูชันที่เหมาะกับคุณ</p>
<div class="cta-actions">
<a href="/contact" class="btn btn-dark btn-lg">ติดต่อเรา</a>
<a href="tel:0809955945" class="btn btn-outline-dark btn-lg">080-995-5945</a>
</div>
</div>
</div>
</section>
<Footer />
</Base>
<style>
.section-dark {
background: var(--color-dark);
color: var(--color-white);
}
.section-light {
background: var(--color-gray-100);
}
.section-primary {
background: var(--color-primary);
}
.hero-objective {
display: inline-flex;
align-items: center;
gap: 12px;
background: rgba(254, 212, 0, 0.15);
padding: 12px 24px;
border-radius: 40px;
border: 1px solid rgba(254, 212, 0, 0.3);
}
.objective-label { color: rgba(255,255,255,0.6); font-size: 14px; }
.objective-value { color: var(--color-primary); font-weight: 700; font-size: 16px; }
.usp-card {
display: flex;
align-items: flex-start;
gap: 24px;
padding: 32px;
background: linear-gradient(135deg, var(--color-primary) 0%, #ffe066 100%);
border-radius: 20px;
}
.usp-icon { font-size: 48px; flex-shrink: 0; }
.usp-title { font-size: 24px; font-weight: 700; color: var(--color-black); margin-bottom: 12px; }
.usp-desc { font-size: 16px; color: rgba(0,0,0,0.8); line-height: 1.6; }
.section-header { text-align: center; margin-bottom: 60px; }
.section-badge {
display: inline-block;
background: var(--color-primary);
color: var(--color-black);
padding: 6px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 16px;
}
.section-title { font-size: clamp(28px, 4vw, 42px); font-weight: 700; color: var(--color-black); }
.section-title-light { font-size: clamp(28px, 4vw, 42px); font-weight: 700; color: var(--color-white); }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card {
background: var(--color-white);
border-radius: 16px;
padding: 40px 28px;
text-align: center;
border: 1px solid rgba(0,0,0,0.05);
transition: all 0.3s ease;
animation: fadeUp 0.6s ease backwards;
animation-delay: var(--delay);
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
border-color: var(--color-primary);
}
.feature-icon { font-size: 48px; margin-bottom: 20px; }
.feature-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; color: var(--color-black); }
.feature-desc { font-size: 14px; color: var(--color-gray-600); line-height: 1.6; }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.step {
text-align: center;
padding: 32px 24px;
background: rgba(255,255,255,0.03);
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.05);
transition: all 0.3s ease;
animation: fadeUp 0.6s ease backwards;
animation-delay: var(--delay);
}
.step:hover { transform: translateY(-4px); border-color: var(--color-primary); }
.step-num { display: block; font-family: var(--font-display); font-size: 48px; font-weight: 800; color: var(--color-primary); margin-bottom: 16px; }
.step-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--color-white); }
.step-desc { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.6; }
.cta-content { text-align: center; }
.cta-title { font-size: clamp(28px, 4vw, 42px); font-weight: 800; margin-bottom: 16px; color: var(--color-black); }
.cta-desc { font-size: 18px; color: rgba(0,0,0,0.7); margin-bottom: 32px; max-width: 500px; margin-left: auto; margin-right: auto; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn-dark { background: var(--color-dark); color: var(--color-white); }
.btn-dark:hover { background: var(--color-dark-light); }
.btn-outline-dark { background: transparent; color: var(--color-black); border: 2px solid var(--color-black); }
.btn-outline-dark:hover { background: var(--color-black); color: var(--color-white); }
.btn-lg { padding: 16px 36px; font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1024px) {
.features-grid { grid-template-columns: repeat(2, 1fr); }
.process-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.features-grid, .process-steps { grid-template-columns: 1fr; }
.usp-card { flex-direction: column; }
.cta-actions { flex-direction: column; }
.btn-lg { width: 100%; }
}
</style>

262
src/pages/services/ai.astro
View File

@@ -1,262 +0,0 @@
---
import Base from '../../layouts/Base.astro';
import Navigation from '../../components/Navigation.astro';
import Hero from '../../components/Hero.astro';
import Footer from '../../components/Footer.astro';
const features = [
{
icon: "🤖",
title: "AI Chatbot",
desc: "Chatbot ที่ใช้ AI ตอบคำถามลูกค้าได้ 24/7 รองรับภาษาไทย"
},
{
icon: "💬",
title: "AI Customer Service",
desc: "ระบบตอบคำถามอัตโนมัติด้วย AI ที่เข้าใจบริบท"
},
{
icon: "📝",
title: "AI Content Generation",
desc: "สร้าง content อัตโนมัติด้วย AI ที่ SEO friendly"
},
{
icon: "📧",
title: "AI Email Marketing",
desc: "ส่ง email ที่ personalized ด้วย AI ที่วิเคราะห์พฤติกรรม"
},
{
icon: "📊",
title: "AI Sales Prediction",
desc: "ทำนายยอดขายและวางแผนการตลาดด้วย AI"
},
{
icon: "🎯",
title: "AI Lead Scoring",
desc: "ให้คะแนน leads อัตโนมัติด้วย AI ที่เรียนรู้จากข้อมูล"
}
];
---
<Base title="AI Automation | MoreminiMore">
<Navigation />
<!-- Hero Section -->
<Hero
title="AI Automation"
subtitle="นำ AI มาใช้เพื่อเพิ่มยอดขายและปรับปรุงการให้บริการลูกค้า เพิ่มประสิทธิภาพ ลดต้นทุน ด้วยเทคโนโลยีล้ำสมัย"
badge="บริการ"
image="/images/hero/ai-automation-hero.jpg"
theme="yellow"
showCTA={false}
variant="centered"
size="compact"
/>
<!-- Features Section -->
<section class="section features-section">
<div class="container">
<div class="section-header">
<span class="section-badge">คุณสมบัติ</span>
<h2 class="section-title">AI ที่เรานำมาใช้</h2>
</div>
<div class="features-grid">
{features.map((feature, i) => (
<div class="feature-card card card-accent" style={`animation-delay: ${i * 0.1}s`}>
<span class="feature-icon">{feature.icon}</span>
<h3 class="feature-title">{feature.title}</h3>
<p class="feature-desc">{feature.desc}</p>
</div>
))}
</div>
</div>
</section>
<!-- Case Study Section -->
<section class="section section-light case-section">
<div class="container">
<div class="section-header">
<span class="section-badge">กรณีศึกษา</span>
<h2 class="section-title">ผลลัพธ์ที่ลูกค้าได้รับ</h2>
</div>
<div class="case-grid">
<div class="case-card">
<span class="case-number">+35%</span>
<span class="case-label">เพิ่มยอดขาย</span>
</div>
<div class="case-card">
<span class="case-number">-60%</span>
<span class="case-label">ลดค่าใช้จ่าย</span>
</div>
<div class="case-card">
<span class="case-number">24/7</span>
<span class="case-label">ให้บริการลูกค้า</span>
</div>
<div class="case-card">
<span class="case-number">3x</span>
<span class="case-label">เร็วขึ้น</span>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="section section-primary cta-section">
<div class="container">
<div class="cta-content">
<h2 class="cta-title">พร้อมนำ AI มาใช้ในธุรกิจ?</h2>
<p class="cta-desc">ปรึกษาฟรี! เราพร้อมวิเคราะห์และออกแบบ AI solution ที่เหมาะกับคุณ</p>
<div class="cta-actions">
<a href="/contact" class="btn btn-secondary btn-lg">ติดต่อเรา</a>
<a href="tel:0809955945" class="btn btn-outline btn-lg">080-995-5945</a>
</div>
</div>
</div>
</section>
<Footer />
</Base>
<style>
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-badge {
display: inline-block;
background: var(--color-primary);
color: var(--color-black);
padding: 6px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
font-family: var(--font-heading);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 16px;
}
.section-title {
font-size: clamp(32px, 5vw, 48px);
font-weight: 700;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.feature-card {
padding: 40px 32px;
text-align: center;
}
.feature-icon {
font-size: 48px;
display: block;
margin-bottom: 20px;
}
.feature-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 12px;
}
.feature-desc {
font-size: 14px;
color: var(--color-medium-gray);
line-height: 1.6;
}
.case-section {
background: var(--color-light-gray);
}
.case-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 48px;
text-align: center;
}
.case-card {
display: flex;
flex-direction: column;
align-items: center;
}
.case-number {
font-family: var(--font-heading);
font-size: 64px;
font-weight: 800;
color: var(--color-primary);
line-height: 1;
margin-bottom: 12px;
}
.case-label {
font-size: 16px;
color: var(--color-medium-gray);
text-transform: uppercase;
letter-spacing: 2px;
}
.cta-section {
padding: 100px 0;
}
.cta-content {
text-align: center;
}
.cta-title {
font-size: clamp(32px, 5vw, 48px);
font-weight: 800;
margin-bottom: 16px;
}
.cta-desc {
font-size: 18px;
margin-bottom: 40px;
opacity: 0.8;
}
.cta-actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 1024px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.case-grid {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
}
@media (max-width: 640px) {
.features-grid,
.case-grid {
grid-template-columns: 1fr;
}
.hero-actions,
.cta-actions {
flex-direction: column;
}
.btn-lg {
width: 100%;
justify-content: center;
}
}
</style>

271
src/pages/services/consult.astro
View File

@@ -1,271 +0,0 @@
---
import Base from '../../layouts/Base.astro';
import Navigation from '../../components/Navigation.astro';
import Hero from '../../components/Hero.astro';
import Footer from '../../components/Footer.astro';
const services = [
{
icon: "🔍",
title: "Digital Audit",
desc: "วิเคราะห์สถานะดิจิทัลปัจจุบันของธุรกิจคุณอย่างละเอียด"
},
{
icon: "📋",
title: "Digital Strategy",
desc: "วางแผน digital transformation ที่เหมาะกับเป้าหมายธุรกิจ"
},
{
icon: "🛠️",
title: "Technology Selection",
desc: "แนะนำเทคโนโลยีที่เหมาะสมกับ budget และความต้องการ"
},
{
icon: "📐",
title: "System Architecture",
desc: "ออกแบบระบบที่ scalable และ maintainable"
},
{
icon: "🔧",
title: "Implementation Support",
desc: "ดูแลและให้คำปรึกษาตลอดการ implement"
},
{
icon: "📈",
title: "Performance Optimization",
desc: "ปรับปรุงประสิทธิภาพระบบให้ดีขึ้นอย่างต่อเนื่อง"
}
];
---
<Base title="Tech Consult | MoreminiMore">
<Navigation />
<!-- Hero Section -->
<Hero
title="Tech Consult"
subtitle="ให้คำปรึกษาด้านเทคโนโลยีเพื่อธุรกิจของคุณ วางแผน ออกแบบ และ implement ระบบที่เหมาะสม"
badge="บริการ"
image="/images/hero/tech-consult-hero.jpg"
theme="yellow"
showCTA={false}
variant="split"
size="compact"
/>
<!-- Features Section -->
<section class="section features-section">
<div class="container">
<div class="section-header">
<span class="section-badge">บริการของเรา</span>
<h2 class="section-title">เราให้คำปรึกษาอะไรบ้าง</h2>
</div>
<div class="features-grid">
{services.map((service, i) => (
<div class="feature-card card card-accent" style={`animation-delay: ${i * 0.1}s`}>
<span class="feature-icon">{service.icon}</span>
<h3 class="feature-title">{service.title}</h3>
<p class="feature-desc">{service.desc}</p>
</div>
))}
</div>
</div>
</section>
<!-- Process Section -->
<section class="section section-light process-section">
<div class="container">
<div class="section-header">
<span class="section-badge">กระบวนการ</span>
<h2 class="section-title">วิธีการทำงานของเรา</h2>
</div>
<div class="process-steps">
<div class="step">
<span class="step-num">01</span>
<h3 class="step-title">วิเคราะห์</h3>
<p class="step-desc">วิเคราะห์สถานะปัจจุบันและเป้าหมายของธุรกิจ</p>
</div>
<div class="step">
<span class="step-num">02</span>
<h3 class="step-title">วางแผน</h3>
<p class="step-desc">ออกแบบ roadmap และ timeline สำหรับ implementation</p>
</div>
<div class="step">
<span class="step-num">03</span>
<h3 class="step-title">ดำเนินการ</h3>
<p class="step-desc">implement ตามแผนที่วางไว้พร้อม support ตลอดเวลา</p>
</div>
<div class="step">
<span class="step-num">04</span>
<h3 class="step-title">ประเมินผล</h3>
<p class="step-desc">วัดผลและปรับปรุงอย่างต่อเนื่อง</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="section section-primary cta-section">
<div class="container">
<div class="cta-content">
<h2 class="cta-title">ต้องการคำปรึกษาด้านเทคโนโลยี?</h2>
<p class="cta-desc">ปรึกษาฟรี! เราพร้อมรับฟังปัญหาและหาทางออกร่วมกัน</p>
<div class="cta-actions">
<a href="/contact" class="btn btn-secondary btn-lg">ติดต่อเรา</a>
<a href="tel:0809955945" class="btn btn-outline btn-lg">080-995-5945</a>
</div>
</div>
</div>
</section>
<Footer />
</Base>
<style>
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-badge {
display: inline-block;
background: var(--color-primary);
color: var(--color-black);
padding: 6px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
font-family: var(--font-heading);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 16px;
}
.section-title {
font-size: clamp(32px, 5vw, 48px);
font-weight: 700;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.feature-card {
padding: 40px 32px;
text-align: center;
}
.feature-icon {
font-size: 48px;
display: block;
margin-bottom: 20px;
}
.feature-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 12px;
}
.feature-desc {
font-size: 14px;
color: var(--color-medium-gray);
line-height: 1.6;
}
.process-section {
background: var(--color-light-gray);
}
.process-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.step {
text-align: center;
padding: 32px;
background: var(--color-white);
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.step-num {
display: block;
font-family: var(--font-heading);
font-size: 48px;
font-weight: 800;
color: var(--color-primary);
margin-bottom: 16px;
}
.step-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.step-desc {
font-size: 14px;
color: var(--color-medium-gray);
line-height: 1.6;
}
.cta-section {
padding: 100px 0;
}
.cta-content {
text-align: center;
}
.cta-title {
font-size: clamp(32px, 5vw, 48px);
font-weight: 800;
margin-bottom: 16px;
}
.cta-desc {
font-size: 18px;
margin-bottom: 40px;
opacity: 0.8;
}
.cta-actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 1024px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.process-steps {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.features-grid,
.process-steps {
grid-template-columns: 1fr;
}
.hero-actions,
.cta-actions {
flex-direction: column;
}
.btn-lg {
width: 100%;
justify-content: center;
}
}
</style>

221
src/pages/services/index.astro Normal file
View File

@@ -0,0 +1,221 @@
---
import Base from '../../layouts/Base.astro';
import Navigation from '../../components/Navigation.astro';
import Footer from '../../components/Footer.astro';
import PageHero from '../../components/PageHero.astro';
import ServiceCard from '../../components/ServiceCard.astro';
import { getCollection } from 'astro:content';
const services = await getCollection('services');
const techServices = services.filter(s => s.data.category === 'tech-consult');
const marketingServices = services.filter(s => s.data.category === 'marketing-consult');
// Map service slugs to images
const serviceImages: Record<string, string> = {
'automation': '/images/services/automation.jpg',
'ai-consult': '/images/services/ai-consult.jpg',
'marketing': '/images/services/marketing.jpg',
'webdev': '/images/services/webdev.jpg',
};
---
<Base title="บริการ | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
<Navigation />
<PageHero
badge="บริการ"
title="บริการของเรา"
subtitle="ครบจบทุกโซลูชันด้านดิจิทัลสำหรับธุรกิจไทย"
/>
<section class="section">
<div class="container">
<!-- Tech Consult Category -->
<div class="category-section">
<div class="category-header">
<div class="category-icon">🔧</div>
<div class="category-info">
<span class="category-badge">Technology Consult</span>
<h2 class="category-title">ลดต้นทุนและเวลา</h2>
<p class="category-desc">บริการให้คำปรึกษาด้านเทคโนโลยีเพื่อเพิ่มประสิทธิภาพการทำงานและลดค่าใช้จ่ายในระยะยาว</p>
</div>
</div>
<div class="services-grid">
{techServices.map(s => (
<ServiceCard
title={s.data.title}
subtitle={s.data.subtitle}
image={serviceImages[s.slug] || '/images/services/default.jpg'}
link={`/services/${s.slug}`}
/>
))}
</div>
<div class="usp-box">
<div class="usp-icon">🎁</div>
<div class="usp-content">
<h4 class="usp-title">สิทธิพิเศษสำหรับลูกค้า Consult</h4>
<p class="usp-desc">ลูกค้าที่ใช้บริการ Technology Consult จะได้รับ Server ฟรีสำหรับ App และ AI (สำหรับการใช้งานปกติ) หากต้องการใช้งานหนักหรือ Resource-intensive จะมีค่าใช้จ่ายเพิ่มเติม</p>
</div>
</div>
</div>
<!-- Marketing Consult Category -->
<div class="category-section">
<div class="category-header">
<div class="category-icon">📈</div>
<div class="category-info">
<span class="category-badge">Marketing Consult</span>
<h2 class="category-title">เพิ่มยอดขาย</h2>
<p class="category-desc">บริการด้านการตลาดที่ช่วยให้ธุรกิจของคุณเข้าถึงลูกค้าได้มากขึ้นและเพิ่มยอดขายอย่างเป็นระบบ</p>
</div>
</div>
<div class="services-grid">
{marketingServices.map(s => (
<ServiceCard
title={s.data.title}
subtitle={s.data.subtitle}
image={serviceImages[s.slug] || '/images/services/default.jpg'}
link={`/services/${s.slug}`}
/>
))}
</div>
<div class="usp-box">
<div class="usp-icon">🎁</div>
<div class="usp-content">
<h4 class="usp-title">สิทธิพิเศษสำหรับลูกค้า Website</h4>
<p class="usp-desc">ลูกค้าที่ใช้ Server ของเราจะได้รับบริการแก้ไขและเพิ่มเนื้อหาเว็บไซต์ฟรี! จ่ายเฉพาะเมื่อต้องการ Redesign ทั้งหมด หรือ Upgrade ฟีเจอร์ใหญ่ เช่น เพิ่มระบบ E-commerce</p>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="section section-primary cta">
<div class="container">
<div class="cta-content">
<h2 class="cta-title">พร้อมเริ่มต้นวันนี้?</h2>
<p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบโซลูชันที่เหมาะกับคุณ</p>
<div class="cta-actions">
<a href="/contact" class="btn btn-dark btn-lg">ติดต่อเรา</a>
<a href="tel:0809955945" class="btn btn-outline-dark btn-lg">080-995-5945</a>
</div>
</div>
</div>
</section>
<Footer />
</Base>
<style>
.category-section {
margin-bottom: 80px;
}
.category-section:last-of-type { margin-bottom: 0; }
.category-header {
display: flex;
align-items: flex-start;
gap: 24px;
margin-bottom: 40px;
padding: 32px;
background: var(--color-gray-100);
border-radius: 20px;
}
.category-icon {
font-size: 48px;
flex-shrink: 0;
}
.category-info { flex: 1; }
.category-badge {
display: inline-block;
background: var(--color-primary);
color: var(--color-black);
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 8px;
}
.category-title {
font-size: 32px;
font-weight: 700;
color: var(--color-dark);
margin-bottom: 8px;
}
.category-desc {
font-size: 16px;
color: var(--color-gray-600);
line-height: 1.6;
}
.services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-bottom: 32px;
}
.usp-box {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 24px;
background: linear-gradient(135deg, var(--color-primary) 0%, #ffe066 100%);
border-radius: 16px;
}
.usp-icon { font-size: 32px; flex-shrink: 0; }
.usp-title {
font-size: 18px;
font-weight: 700;
color: var(--color-black);
margin-bottom: 8px;
}
.usp-desc {
font-size: 14px;
color: rgba(0,0,0,0.8);
line-height: 1.6;
}
.section-primary { background: var(--color-primary); }
.cta-content { text-align: center; }
.cta-title {
font-size: clamp(28px, 4vw, 42px);
font-weight: 800;
margin-bottom: 16px;
color: var(--color-black);
}
.cta-desc {
font-size: 18px;
color: rgba(0,0,0,0.7);
margin-bottom: 32px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn-outline-dark {
background: transparent;
color: var(--color-black);
border: 2px solid var(--color-black);
}
.btn-outline-dark:hover { background: var(--color-black); color: var(--color-white); }
.btn-dark {
background: var(--color-dark);
color: var(--color-white);
}
.btn-dark:hover { background: var(--color-dark-light); }
.btn-lg { padding: 16px 36px; font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
@media (max-width: 1024px) {
.services-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.category-header { flex-direction: column; }
.cta-actions { flex-direction: column; }
.btn-lg { width: 100%; }
}
</style>

262
src/pages/services/marketing.astro
View File

@@ -1,262 +0,0 @@
---
import Base from '../../layouts/Base.astro';
import Navigation from '../../components/Navigation.astro';
import Hero from '../../components/Hero.astro';
import Footer from '../../components/Footer.astro';
const features = [
{
icon: "📧",
title: "Email Automation",
desc: "ส่ง email อัตโนมัติเมื่อ trigger ตรงกับเงื่อนไขที่กำหนด"
},
{
icon: "💬",
title: "Chatbot Integration",
desc: "เชื่อมต่อ chatbot กับระบบ CRM เพื่อเก็บข้อมูลลูกค้า"
},
{
icon: "📱",
title: "SMS/Line Automation",
desc: "ส่ง SMS หรือ LINE message อัตโนมัติตาม timeline"
},
{
icon: "📊",
title: "Analytics Dashboard",
desc: "ติดตามผลแคมเปญและวัด ROI ได้แบบ real-time"
},
{
icon: "🎯",
title: "Lead Scoring",
desc: "ให้คะแนน leads ตามพฤติกรรมเพื่อจัดลำดับความสำคัญ"
},
{
icon: "🔄",
title: "Workflow Automation",
desc: "สร้าง workflow อัตโนมัติสำหรับงานที่ทำซ้ำๆ"
}
];
---
<Base title="Marketing Automation | MoreminiMore">
<Navigation />
<!-- Hero Section -->
<Hero
title="Marketing Automation"
subtitle="เพิ่มประสิทธิภาพการตลาดและลดต้นทุนด้วยระบบอัตโนมัติ ประหยัดเวลา เพิ่ม conversion วัดผลได้"
badge="บริการ"
image="/images/hero/marketing-automation-hero.jpg"
theme="yellow"
showCTA={false}
variant="split"
size="compact"
/>
<!-- Features Section -->
<section class="section features-section">
<div class="container">
<div class="section-header">
<span class="section-badge">คุณสมบัติ</span>
<h2 class="section-title">ระบบที่เราสร้างให้คุณ</h2>
</div>
<div class="features-grid">
{features.map((feature, i) => (
<div class="feature-card card card-accent" style={`animation-delay: ${i * 0.1}s`}>
<span class="feature-icon">{feature.icon}</span>
<h3 class="feature-title">{feature.title}</h3>
<p class="feature-desc">{feature.desc}</p>
</div>
))}
</div>
</div>
</section>
<!-- Benefits Section -->
<section class="section section-light benefits-section">
<div class="container">
<div class="section-header">
<span class="section-badge">ประโยชน์</span>
<h2 class="section-title">ทำไมต้องทำ Marketing Automation</h2>
</div>
<div class="benefits-grid">
<div class="benefit-item">
<span class="benefit-number">50%</span>
<span class="benefit-label">ลดเวลาทำงาน</span>
</div>
<div class="benefit-item">
<span class="benefit-number">3x</span>
<span class="benefit-label">เพิ่ม conversion</span>
</div>
<div class="benefit-item">
<span class="benefit-number">24/7</span>
<span class="benefit-label">ให้บริการลูกค้า</span>
</div>
<div class="benefit-item">
<span class="benefit-number">100%</span>
<span class="benefit-label">วัดผลได้</span>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="section section-primary cta-section">
<div class="container">
<div class="cta-content">
<h2 class="cta-title">พร้อมเพิ่มประสิทธิภาพการตลาด?</h2>
<p class="cta-desc">ปรึกษาฟรี! เราพร้อมวิเคราะห์และออกแบบระบบที่เหมาะกับธุรกิจของคุณ</p>
<div class="cta-actions">
<a href="/contact" class="btn btn-secondary btn-lg">ติดต่อเรา</a>
<a href="tel:0809955945" class="btn btn-outline btn-lg">080-995-5945</a>
</div>
</div>
</div>
</section>
<Footer />
</Base>
<style>
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-badge {
display: inline-block;
background: var(--color-primary);
color: var(--color-black);
padding: 6px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
font-family: var(--font-heading);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 16px;
}
.section-title {
font-size: clamp(32px, 5vw, 48px);
font-weight: 700;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.feature-card {
padding: 40px 32px;
text-align: center;
}
.feature-icon {
font-size: 48px;
display: block;
margin-bottom: 20px;
}
.feature-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 12px;
}
.feature-desc {
font-size: 14px;
color: var(--color-medium-gray);
line-height: 1.6;
}
.benefits-section {
background: var(--color-light-gray);
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 48px;
text-align: center;
}
.benefit-item {
display: flex;
flex-direction: column;
align-items: center;
}
.benefit-number {
font-family: var(--font-heading);
font-size: 64px;
font-weight: 800;
color: var(--color-primary);
line-height: 1;
margin-bottom: 12px;
}
.benefit-label {
font-size: 16px;
color: var(--color-medium-gray);
text-transform: uppercase;
letter-spacing: 2px;
}
.cta-section {
padding: 100px 0;
}
.cta-content {
text-align: center;
}
.cta-title {
font-size: clamp(32px, 5vw, 48px);
font-weight: 800;
margin-bottom: 16px;
}
.cta-desc {
font-size: 18px;
margin-bottom: 40px;
opacity: 0.8;
}
.cta-actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 1024px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.benefits-grid {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
}
@media (max-width: 640px) {
.features-grid,
.benefits-grid {
grid-template-columns: 1fr;
}
.hero-actions,
.cta-actions {
flex-direction: column;
}
.btn-lg {
width: 100%;
justify-content: center;
}
}
</style>

283
src/pages/services/webdev.astro
View File

@@ -1,283 +0,0 @@
---
import Base from '../../layouts/Base.astro';
import Navigation from '../../components/Navigation.astro';
import Hero from '../../components/Hero.astro';
import Footer from '../../components/Footer.astro';
const features = [
{
icon: "⚡",
title: "เร็วสุดใน class",
desc: "โหลดเร็ว เพิ่ม conversion และ SEO ranking"
},
{
icon: "📱",
title: "Responsive ทุก device",
desc: "แสดงผลได้ดีบน mobile tablet และ desktop"
},
{
icon: "🎨",
title: "Design สวยงาม",
desc: "ออกแบบ UI/UX ที่ดึงดูดและใช้งานง่าย"
},
{
icon: "🔒",
title: "ปลอดภัย",
desc: "Security ระดับสูง ป้องกันการโจมตี"
},
{
icon: "SEO",
title: "SEO Optimized",
desc: "ออกแบบมาเพื่อให้ Google ชอบ"
},
{
icon: "📊",
title: "Analytics ในตัว",
desc: "ติดตามผู้เข้าชมและวัดผลได้"
}
];
---
<Base title="พัฒนาเว็บไซต์ | MoreminiMore">
<Navigation />
<!-- Hero Section -->
<Hero
title="พัฒนาเว็บไซต์"
subtitle="สร้างเว็บไซต์ที่ทันสมัย รวดเร็ว และตอบสนองความต้องการของลูกค้าของคุณ ด้วยเทคโนโลยีล่าสุดและ design ที่สวยงาม"
badge="บริการ"
image="/images/hero/web-development-hero.jpg"
theme="yellow"
showCTA={false}
variant="split"
size="compact"
/>
<!-- Features Section -->
<section class="section features-section">
<div class="container">
<div class="section-header">
<span class="section-badge">คุณสมบัติ</span>
<h2 class="section-title">ทำไมต้องเลือกเรา</h2>
</div>
<div class="features-grid">
{features.map((feature, i) => (
<div class="feature-card card card-accent" style={`animation-delay: ${i * 0.1}s`}>
<span class="feature-icon">{feature.icon}</span>
<h3 class="feature-title">{feature.title}</h3>
<p class="feature-desc">{feature.desc}</p>
</div>
))}
</div>
</div>
</section>
<!-- Services List -->
<section class="section section-light services-list-section">
<div class="container">
<div class="section-header">
<span class="section-badge">บริการของเรา</span>
<h2 class="section-title">เราให้บริการอะไรบ้าง</h2>
</div>
<div class="services-list">
<div class="service-item">
<span class="service-num">01</span>
<div class="service-content">
<h3>Landing Page</h3>
<p>สร้าง landing page ที่ออกแบบมาเพื่อ convert ผู้เข้าชมเป็นลูกค้า ด้วย design ที่ดึงดูดและ content ที่ตรงใจ</p>
</div>
</div>
<div class="service-item">
<span class="service-num">02</span>
<div class="service-content">
<h3>เว็บไซต์องค์กร</h3>
<p>พัฒนาเว็บไซต์สำหรับองค์กรที่ต้องการ professional online presence พร้อมระบบจัดการเนื้อหา</p>
</div>
</div>
<div class="service-item">
<span class="service-num">03</span>
<div class="service-content">
<h3>E-commerce</h3>
<p>สร้างร้านค้าออนไลน์ที่สมบูรณ์แบบ รองรับการชำระเงิน จัดส่งสินค้า และ inventory management</p>
</div>
</div>
<div class="service-item">
<span class="service-num">04</span>
<div class="service-content">
<h3>Web Application</h3>
<p>พัฒนา web application ที่ซับซ้อนตามความต้องการของธุรกิจ ไม่ว่าจะเป็นระบบจอง ระบบขาย หรือระบบ management</p>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="section section-primary cta-section">
<div class="container">
<div class="cta-content">
<h2 class="cta-title">พร้อมเริ่มโปรเจกต์เว็บไซต์?</h2>
<p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบเว็บไซต์ที่เหมาะกับธุรกิจของคุณ</p>
<div class="cta-actions">
<a href="/contact" class="btn btn-secondary btn-lg">ติดต่อเรา</a>
<a href="tel:0809955945" class="btn btn-outline btn-lg">080-995-5945</a>
</div>
</div>
</div>
</section>
<Footer />
</Base>
<style>
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-badge {
display: inline-block;
background: var(--color-primary);
color: var(--color-black);
padding: 6px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
font-family: var(--font-heading);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 16px;
}
.section-title {
font-size: clamp(32px, 5vw, 48px);
font-weight: 700;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.feature-card {
padding: 40px 32px;
text-align: center;
}
.feature-icon {
font-size: 48px;
display: block;
margin-bottom: 20px;
}
.feature-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 12px;
}
.feature-desc {
font-size: 14px;
color: var(--color-medium-gray);
line-height: 1.6;
}
.services-list-section {
background: var(--color-light-gray);
}
.services-list {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 24px;
}
.service-item {
display: flex;
gap: 32px;
padding: 32px;
background: var(--color-white);
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
align-items: flex-start;
}
.service-num {
font-family: var(--font-heading);
font-size: 48px;
font-weight: 800;
color: var(--color-primary);
line-height: 1;
flex-shrink: 0;
}
.service-content h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.service-content p {
font-size: 14px;
color: var(--color-medium-gray);
line-height: 1.6;
}
.cta-section {
padding: 100px 0;
}
.cta-content {
text-align: center;
}
.cta-title {
font-size: clamp(32px, 5vw, 48px);
font-weight: 800;
margin-bottom: 16px;
}
.cta-desc {
font-size: 18px;
margin-bottom: 40px;
opacity: 0.8;
}
.cta-actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 1024px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.features-grid {
grid-template-columns: 1fr;
}
.service-item {
flex-direction: column;
gap: 16px;
}
.hero-actions,
.cta-actions {
flex-direction: column;
}
.btn-lg {
width: 100%;
justify-content: center;
}
}
</style>

235
src/pages/terms.astro
View File

@@ -1,232 +1,87 @@
--- ---
import Base from '../layouts/Base.astro'; import Base from '../layouts/Base.astro';
import Navigation from '../components/Navigation.astro'; import Navigation from '../components/Navigation.astro';
import Hero from '../components/Hero.astro';
import Footer from '../components/Footer.astro'; import Footer from '../components/Footer.astro';
import PageHero from '../components/PageHero.astro';
--- ---
<Base title="เงื่อนไขการให้บริการ | MoreminiMore"> <Base title="เงื่อนไขการให้บริการ | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
<Navigation /> <Navigation />
<Hero <PageHero
badge="กฎหมาย"
title="เงื่อนไขการให้บริการ" title="เงื่อนไขการให้บริการ"
subtitle="มีผลบังคับใช้วันที่ 5 พฤษภาคม 2569" subtitle="มีผลบังคับใช้วันที่ 5 พฤษภาคม 2569"
badge="กฎหมาย"
image="/images/hero/marketing-automation.jpg"
theme="yellow"
showCTA={false}
variant="text-only"
size="compact"
/> />
<main class="legal-page"> <section class="section legal-section">
<div class="container"> <div class="container">
<header class="legal-header">
<h1 class="legal-title">เงื่อนไขการให้บริการ</h1>
<p class="legal-meta">มีผลบังคับใช้วันที่: 5 พฤษภาคม 2569 | แก้ไขล่าสุด: 5 พฤษภาคม 2569</p>
</header>
<div class="legal-content"> <div class="legal-content">
<p class="legal-intro"> <p class="legal-intro">ชื่อเว็บไซต์: MoreminiMore | เว็บไซต์: https://www.moreminimore.com | บริษัท: MoreminiMore Co.,Ltd.</p>
<strong>ชื่อเว็บไซต์:</strong> MoreminiMore<br />
<strong>เว็บไซต์:</strong> https://www.moreminimore.com<br />
<strong>บริษัท:</strong> MoreminiMore Co.,Ltd.
</p>
<section class="legal-section"> <div class="legal-section">
<h2>1. การยอมรับเงื่อนไข</h2> <h2>1. การยอมรับเงื่อนไข</h2>
<p>ด้วยการเข้าถึงและใช้งานเว็บไซต์ของบริษัท มอร์มินิมอร์ จำกัด ท่านยอมรับและตกลงที่จะถูกผูกมัดด้วยเงื่อนไขการให้บริการฉบับนี้</p>
<h3>1.1 ข้อตกลง</h3>
<p>ด้วยการเข้าถึงและใช้งานเว็บไซต์ https://www.moreminimore.com ("เว็บไซต์") ของบริษัท MoreminiMore Co.,Ltd. ("เรา", "ของเรา" หรือ "บริษัท") ท่าน ("ผู้ใช้", "ท่าน" หรือ "ของคุณ") ยอมรับและตกลงที่จะถูกผูกมัดด้วยเงื่อนไขการให้บริการฉบับนี้ ("เงื่อนไข")</p>
<h3>1.2 การแก้ไขเงื่อนไข</h3>
<p>เราขอสงวนสิทธิในการแก้ไขเงื่อนไขนี้เมื่อใดก็ได้:</p>
<ul>
<li>การแก้ไขจะมีผลทันทีเมื่อโพสต์บนเว็บไซต์</li>
<li>ท่านควรตรวจสอบเงื่อนไขนี้เป็นประจำ</li>
<li>การใช้งานเว็บไซต์ต่อเนื่องแสดงว่าท่านยอมรับการแก้ไข</li>
</ul>
<h3>1.3 อายุขั้นต่ำ</h3>
<p>ท่านต้องมีอายุไม่ต่ำกว่า 20 ปีบริบูรณ์เพื่อใช้งานเว็บไซต์ หากท่านอายุต่ำกว่า 20 ปี ท่านต้องได้รับความยินยอมจากผู้ปกครอง</p>
</section>
<section class="legal-section">
<h2>2. บริการของเรา</h2>
<h3>2.1 คำอธิบายบริการ</h3>
<p>MoreminiMore ให้บริการ:</p>
<ol>
<li><strong>พัฒนาเว็บไซต์</strong> - รับทำเว็บไซต์ระดับมืออาชีพด้วยเทคโนโลยีล่าสุด</li>
<li><strong>Marketing Automation</strong> - ระบบอัตโนมัติสำหรับการตลาด</li>
<li><strong>AI Automation</strong> - บริการ AI สำหรับธุรกิจ</li>
</ol>
<h3>2.2 การเปลี่ยนแปลงบริการ</h3>
<p>เราขอสงวนสิทธิในการเพิ่ม ลบ หรือแก้ไขฟีเจอร์ของบริการ ระงับหรือยุติบริการชั่วคราวหรือถาวร</p>
<h3>2.3 ความพร้อมของบริการ</h3>
<p>เราพยายามให้บริการอย่างต่อเนื่อง แต่ไม่รับประกันว่าบริการจะปราศจากข้อผิดพลาด</p>
</section>
<section class="legal-section">
<h2>3. บัญชีผู้ใช้</h2>
<p>เพื่อใช้งานบริการบางอย่าง ท่านต้องสร้างบัญชีผู้ใช้โดยให้ข้อมูลที่ถูกต้อง ครบถ้วน และทันสมัย ท่านต้องรักษารหัสผ่านให้เป็นความลับและรับผิดชอบต่อทุกกิจกรรมที่เกิดขึ้นภายใต้บัญชีของท่าน</p>
<p>เราขอสงวนสิทธิในการระงับหรือลบบัญชีของท่านหากละเมิดเงื่อนไขหรือมีกิจกรรมที่น่าสงสัย</p>
</section>
<section class="legal-section">
<h2>4. ความเป็นเจ้าของทรัพย์สินทางปัญญา</h2>
<p>เว็บไซต์และเนื้อหาทั้งหมดเป็นทรัพย์สินของเราหรือผู้ให้ใบอนุญาต รวมถึงเนื้อหา ข้อความ กราฟิก โลโก้ ซอฟต์แวร์ โค้ด และการออกแบบ เครื่องหมายการค้าและโลโก้เป็นเครื่องหมายการค้าของเรา</p>
<p>ท่านยังคงเป็นเจ้าของเนื้อหาที่ท่านส่งมาและให้ใบอนุญาตแก่เราในการใช้เนื้อหานั้น</p>
</section>
<section class="legal-section">
<h2>5. ข้อห้ามในการใช้งาน</h2>
<p>ท่านตกลงที่จะไม่ใช้เว็บไซต์เพื่อกิจกรรมที่ผิดกฎหมาย ละเมิดสิทธิทางปัญญา ละเมิดความเป็นส่วนตัว ส่งเนื้อหาที่ผิดกฎหมาย เผยแพร่ไวรัสหรือมัลแวร์ พยายามเข้าถึงระบบโดยไม่ได้รับอนุญาต หรือส่งสแปม</p>
</section>
<section class="legal-section">
<h2>6. การชำระเงิน</h2>
<ul>
<li>ราคาทั้งหมดแสดงเป็นเงินบาทไทย (THB) และรวม VAT 7% แล้ว</li>
<li>เรายอมรับการชำระเงินผ่าน พีเอ็ม, โอนเงินผ่านธนาคาร</li>
<li>ผู้ใช้สามารถขอคืนเงินได้ภายใน 7 วันนับจากวันที่ชำระเงิน</li>
<li>การคืนเงินจะดำเนินการภายใน 5 วันทำการ</li>
</ul>
</section>
<section class="legal-section">
<h2>7. การปฏิเสธความรับผิดชอบ</h2>
<p>บริการให้บริการ "ตามที่เป็น" และ "ตามที่มี" เราไม่รับประกันว่าบริการจะปราศจากข้อผิดพลาด ความรับผิดรวมของเราจะไม่เกิน 100,000 บาท</p>
</section>
<section class="legal-section">
<h2>8. กฎหมายที่ใช้บังคับ</h2>
<p>เงื่อนไขนี้ถูกควบคุมและตีความตามกฎหมายแห่งราชอาณาจักรไทย ข้อพิพาทใดๆ อยู่ภายใต้เขตอำนาจศาลของศาลแพ่ง/ศาลล้มละลายกลาง กรุงเทพมหานคร</p>
<p>ก่อนดำเนินการทางกฎหมาย พยายามเจรจาเพื่อระงับข้อพิพาทภายใน 30 วัน</p>
</section>
<section class="legal-section">
<h2>9. การติดต่อ</h2>
<div class="contact-box">
<p><strong>อีเมล:</strong> contact@moreminimore.com</p>
<p><strong>โทรศัพท์:</strong> 080-995-5945</p>
<p><strong>ที่อยู่:</strong> กรุงเทพมหานคร ประเทศไทย</p>
</div> </div>
</section>
<footer class="legal-footer"> <div class="legal-section">
<p>*เอกสารนี้เป็นเอกสารทางกฎหมาย หากท่านมีข้อสงสัย กรุณาปรึกษาที่ปรึกษากฎหมาย</p> <h2>2. การแก้ไขเงื่อนไข</h2>
</footer> <p>เราขอสงวนสิทธิในการแก้ไขเงื่อนไขนี้เมื่อใดก็ได้ การแก้ไขจะมีผลทันทีเมื่อโพสต์บนเว็บไซต์ ท่านควรตรวจสอบเงื่อนไขนี้เป็นประจำ</p>
</div>
<div class="legal-section">
<h2>3. บริการของเรา</h2>
<p>เราให้บริการพัฒนาเว็บไซต์ AI Automation และ Marketing Automation สำหรับธุรกิจไทย โดยมีรายละเอียดและขอบเขตงานตามที่ตกลงกันในสัญญา</p>
</div>
<div class="legal-section">
<h2>4. การชำระเงิน</h2>
<p>การชำระเงินจะเป็นไปตามเงื่อนไขที่กำหนดในใบเสนอราคาและสัญญา ลูกค้าตกลงชำระตามกำหนดเวลาที่ระบุ</p>
</div>
<div class="legal-section">
<h2>5. การรับประกัน</h2>
<p>เรารับประกันคุณภาพงานตามที่ระบุในสัญญา หากไม่พอใจในงาน เราพร้อมแก้ไขจนกว่าจะถูกใจตามเงื่อนไขที่กำหนด</p>
</div>
<div class="legal-section">
<h2>6. ข้อจำกัดความรับผิด</h2>
<p>ความรับผิดของบริษัทจะจำกัดอยู่ที่มูลค่าของงานที่ให้บริการตามที่ระบุในสัญญา</p>
</div>
<div class="legal-section">
<h2>7. ติดต่อเรา</h2>
<p>หากมีคำถามเกี่ยวกับเงื่อนไขการให้บริการ กรุณาติดต่อเราที่ contact@moreminimore.com หรือ 080-995-5945</p>
</div> </div>
</div> </div>
</main> </div>
</section>
<Footer /> <Footer />
</Base> </Base>
<style> <style>
.legal-page { .legal-section { background: var(--color-white); }
padding: 120px 0 80px; .legal-content { max-width: 800px; margin: 0 auto; }
min-height: 100vh;
}
.legal-header {
text-align: center;
margin-bottom: 60px;
padding-bottom: 40px;
border-bottom: 2px solid var(--color-primary);
}
.legal-title {
font-size: clamp(36px, 5vw, 56px);
font-weight: 800;
color: var(--color-black);
margin-bottom: 16px;
}
.legal-meta {
font-size: 14px;
color: var(--color-medium-gray);
}
.legal-content {
max-width: 800px;
margin: 0 auto;
}
.legal-intro { .legal-intro {
font-size: 14px; font-size: 18px;
line-height: 2; color: var(--color-medium-gray);
margin-bottom: 48px; margin-bottom: 48px;
padding: 20px 24px; line-height: 1.7;
background: var(--color-light-gray);
border-radius: 12px;
border-left: 4px solid var(--color-primary);
} }
.legal-section { .legal-section {
margin-bottom: 48px; margin-bottom: 48px;
} }
.legal-section h2 { .legal-section h2 {
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
color: var(--color-black);
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 12px; color: var(--color-black);
border-bottom: 1px solid #eee;
} }
.legal-section h3 {
font-size: 18px;
font-weight: 600;
color: var(--color-primary);
margin: 24px 0 12px;
}
.legal-section p { .legal-section p {
font-size: 16px; font-size: 16px;
color: #444;
line-height: 1.8; line-height: 1.8;
color: #444;
margin-bottom: 16px; margin-bottom: 16px;
} }
.legal-section ul,
.legal-section ol {
margin-left: 24px;
margin-bottom: 16px;
}
.legal-section li {
font-size: 16px;
line-height: 1.7;
color: #444;
margin-bottom: 8px;
}
.contact-box {
background: var(--color-light-gray);
padding: 24px;
border-radius: 12px;
margin-top: 16px;
}
.contact-box p {
margin-bottom: 8px;
}
.legal-footer {
margin-top: 60px;
padding-top: 24px;
border-top: 1px solid #eee;
text-align: center;
}
.legal-footer p {
font-size: 14px;
color: var(--color-medium-gray);
font-style: italic;
}
</style> </style>

869
src/styles/global.css
View File

@@ -1,28 +1,76 @@
/* Global CSS Variables and Base Styles */ /* ============================================
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700;800&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap'); MOREMINIMORE - KINETIC TYPOGRAPHY DESIGN SYSTEM
A unique design where typography IS the hero
============================================ */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700;800;900&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap');
/* ============================================
CSS CUSTOM PROPERTIES
============================================ */
:root { :root {
/* Colors */ /* Brand Colors */
--color-primary: #fed400; --color-primary: #fed400;
--color-accent: #1e3a5f; --color-primary-dark: #e6c100;
--color-primary-light: #fff176;
--color-dark: #1a1a2e;
--color-dark-light: #252542;
--color-black: #000000; --color-black: #000000;
--color-white: #ffffff; --color-white: #ffffff;
--color-light-gray: #f5f5f5; --color-gray-100: #f5f5f5;
--color-dark-gray: #1a1a1a; --color-gray-200: #e5e5e5;
--color-medium-gray: #6b7280; --color-gray-400: #9ca3af;
--color-dark-section: #0a0a0a; --color-gray-600: #6b7280;
/* Typography */ /* Typography */
--font-heading: 'Kanit', sans-serif; --font-display: 'Kanit', sans-serif;
--font-body: 'Noto Sans Thai', sans-serif; --font-body: 'Noto Sans Thai', sans-serif;
/* Spacing */ /* Spacing */
--section-padding: 80px; --space-xs: 8px;
--container-max: 1280px; --space-sm: 16px;
--space-md: 24px;
--space-lg: 40px;
--space-xl: 64px;
--space-2xl: 96px;
--space-3xl: 128px;
/* Layout */
--container-max: 1400px;
--gutter: 32px; --gutter: 32px;
--section-padding: 120px;
/* Animation */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-spring: cubic-bezier(0.5, 1.5, 0.5, 1);
--duration-fast: 0.2s;
--duration-normal: 0.4s;
--duration-slow: 0.8s;
--duration-slower: 1.2s;
/* Shadows */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-md: 0 8px 30px rgba(0, 0, 0, 0.12);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.2);
--shadow-glow: 0 0 40px rgba(254, 212, 0, 0.4);
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
} }
* { /* ============================================
RESET & BASE
============================================ */
*, *::before, *::after {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
@@ -30,175 +78,806 @@
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
font-size: 16px;
} }
body { body {
font-family: var(--font-body); font-family: var(--font-body);
font-size: 16px; font-weight: 400;
line-height: 1.7; line-height: 1.7;
color: var(--color-black); color: var(--color-black);
background: var(--color-white); background: var(--color-white);
} overflow-x: hidden;
-webkit-font-smoothing: antialiased;
h1, h2, h3, h4, h5, h6 { -moz-osx-font-smoothing: grayscale;
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.2;
} }
a { a {
text-decoration: none; text-decoration: none !important;
color: inherit; color: inherit;
} }
img { a:hover {
max-width: 100%; text-decoration: none !important;
height: auto;
} }
/* Container */ /* Cursor Trail Container */
.cursor-container {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
overflow: hidden;
}
.particle {
position: absolute;
width: 8px;
height: 8px;
background: var(--color-primary);
border-radius: 50%;
pointer-events: none;
mix-blend-mode: difference;
}
/* ============================================
TYPOGRAPHY - THE CORE OF THE DESIGN
============================================ */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
}
/* Giant Typography - Primary Visual Element */
.text-display-xl {
font-family: var(--font-display);
font-size: clamp(60px, 12vw, 160px);
font-weight: 900;
line-height: 0.9;
letter-spacing: -0.03em;
text-transform: uppercase;
}
.text-display-lg {
font-family: var(--font-display);
font-size: clamp(40px, 8vw, 100px);
font-weight: 900;
line-height: 1;
letter-spacing: -0.02em;
}
.text-display-md {
font-family: var(--font-display);
font-size: clamp(28px, 5vw, 56px);
font-weight: 800;
line-height: 1.1;
}
/* Kinetic Word Animation */
.kinetic-word {
display: inline-block;
overflow: hidden;
}
.kinetic-word-inner {
display: inline-block;
transform: translateY(100%);
opacity: 0;
}
.kinetic-word.revealed .kinetic-word-inner {
animation: wordReveal 0.8s var(--ease-out-expo) forwards;
}
@keyframes wordReveal {
0% {
transform: translateY(100%) skewY(10deg);
opacity: 0;
}
60% {
transform: translateY(-5%) skewY(-2deg);
opacity: 1;
}
100% {
transform: translateY(0) skewY(0);
opacity: 1;
}
}
/* ============================================
LAYOUT
============================================ */
.container { .container {
max-width: var(--container-max); max-width: var(--container-max);
margin: 0 auto; margin: 0 auto;
padding: 0 var(--gutter); padding: 0 var(--gutter);
} }
/* Section Styles */ /* ============================================
SECTION STYLES
============================================ */
.section { .section {
padding: var(--section-padding) 0; padding: var(--section-padding) 0;
position: relative;
} }
.section-dark { .section-dark {
background: var(--color-dark-section); background: var(--color-dark);
color: var(--color-white); color: var(--color-white);
} }
.section-light { .section-light {
background: var(--color-light-gray); background: var(--color-gray-100);
} }
.section-primary { .section-primary {
background: var(--color-primary); background: var(--color-primary);
color: var(--color-black);
} }
.section-accent { /* Seamless Section Transitions */
background: var(--color-accent); .section-gradient-top {
color: var(--color-white); position: relative;
} }
/* Button Styles */ .section-gradient-top::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: linear-gradient(to bottom, var(--color-dark) 0%, transparent 100%);
z-index: 2;
pointer-events: none;
}
.section-gradient-bottom {
position: relative;
}
.section-gradient-bottom::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background: linear-gradient(to top, var(--color-dark) 0%, transparent 100%);
z-index: 2;
pointer-events: none;
}
/* ============================================
MAGAZINE STYLE - OVERLAP UTILITIES
============================================ */
.overlap-top {
margin-top: -60px;
position: relative;
z-index: 10;
}
.overlap-top-sm {
margin-top: -30px;
}
.overlap-top-lg {
margin-top: -100px;
}
.overlap-bottom {
margin-bottom: -60px;
}
.floating-card {
position: relative;
z-index: 10;
margin-top: -40px;
background: var(--color-white);
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}
.container-bleed {
width: 100%;
padding: 0 32px;
}
.break-container {
width: 100vw;
margin-left: calc(50% - 50vw);
}
/* ============================================
ANIMATED ACCENT LINE
============================================ */
.accent-line {
position: relative;
height: 6px;
background: var(--color-primary);
border-radius: 3px;
overflow: hidden;
}
.accent-line::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: shimmer 2s ease-in-out infinite;
}
@keyframes shimmer {
0%, 100% { transform: translateX(-100%); }
50% { transform: translateX(100%); }
}
/* Draw Line Animation */
.draw-line {
position: relative;
height: 4px;
background: var(--color-gray-200);
overflow: hidden;
}
.draw-line::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background: var(--color-primary);
animation: drawLine 1s var(--ease-out-expo) forwards;
}
@keyframes drawLine {
to { width: 100%; }
}
/* ============================================
BUTTONS - MAGNETIC EFFECT
============================================ */
.btn { .btn {
position: relative;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; justify-content: center;
padding: 16px 32px; gap: 12px;
font-family: var(--font-heading); padding: 20px 40px;
font-weight: 600; font-family: var(--font-display);
font-size: 16px; font-size: 16px;
border-radius: 8px; font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
border: none; border: none;
border-radius: var(--radius-md);
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; overflow: hidden;
transition: transform var(--duration-normal) var(--ease-out-expo),
box-shadow var(--duration-normal) var(--ease-out-expo);
} }
.btn-primary { .btn-primary {
background: var(--color-primary); background: var(--color-primary);
color: var(--color-black); color: var(--color-black);
box-shadow: 0 4px 20px rgba(254, 212, 0, 0.3); box-shadow: var(--shadow-glow);
} }
.btn-primary:hover { .btn-primary:hover {
transform: translateY(-2px); box-shadow: 0 0 60px rgba(254, 212, 0, 0.6);
box-shadow: 0 8px 30px rgba(254, 212, 0, 0.4);
} }
.btn-secondary { .btn-dark {
background: var(--color-black); background: var(--color-dark);
color: var(--color-white); color: var(--color-white);
} }
.btn-secondary:hover { .btn-dark:hover {
background: #222; background: var(--color-dark-light);
transform: translateY(-2px);
} }
/* Card Styles */ .btn-outline {
.card { background: transparent;
border: 3px solid currentColor;
}
/* Shine Effect on Buttons */
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.5),
transparent
);
transition: left 0.6s ease;
}
.btn:hover::before {
left: 100%;
}
/* ============================================
CARDS - TILT EFFECT
============================================ */
.tilt-card {
position: relative;
transform-style: preserve-3d;
perspective: 1000px;
}
.tilt-card-inner {
position: relative;
padding: 40px;
background: var(--color-white); background: var(--color-white);
border-radius: 12px; border-radius: var(--radius-xl);
overflow: hidden; box-shadow: var(--shadow-md);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease;
transform-style: preserve-3d;
}
.tilt-card:hover .tilt-card-inner {
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
}
/* Card Entrance Animations */
.card-enter {
opacity: 0;
}
.card-enter-left {
animation: slideInLeft 0.8s var(--ease-out-expo) forwards;
}
.card-enter-right {
animation: slideInRight 0.8s var(--ease-out-expo) forwards;
}
.card-enter-up {
animation: slideInUp 0.8s var(--ease-out-expo) forwards;
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-80px) skewX(5deg);
}
to {
opacity: 1;
transform: translateX(0) skewX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(80px) skewX(-5deg);
}
to {
opacity: 1;
transform: translateX(0) skewX(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(60px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================
SCROLL REVEAL ANIMATIONS
============================================ */
.reveal {
opacity: 0;
transform: translateY(60px);
transition: opacity 0.8s var(--ease-out-expo),
transform 0.8s var(--ease-out-expo);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.reveal-left {
opacity: 0;
transform: translateX(-60px);
transition: opacity 0.8s var(--ease-out-expo),
transform 0.8s var(--ease-out-expo);
}
.reveal-left.visible {
opacity: 1;
transform: translateX(0);
}
.reveal-right {
opacity: 0;
transform: translateX(60px);
transition: opacity 0.8s var(--ease-out-expo),
transform 0.8s var(--ease-out-expo);
}
.reveal-right.visible {
opacity: 1;
transform: translateX(0);
}
.reveal-scale {
opacity: 0;
transform: scale(0.9);
transition: opacity 0.8s var(--ease-out-expo),
transform 0.8s var(--ease-out-expo);
}
.reveal-scale.visible {
opacity: 1;
transform: scale(1);
}
/* ============================================
COUNTER ANIMATION
============================================ */
.counter {
font-family: var(--font-display);
font-size: clamp(60px, 10vw, 120px);
font-weight: 900;
line-height: 1;
color: var(--color-primary);
}
.counter-value {
display: inline-block;
}
/* ============================================
FLOATING ELEMENTS
============================================ */
.float {
animation: floatAnimation 4s ease-in-out infinite;
}
.float-slow {
animation: floatAnimation 8s ease-in-out infinite;
}
.float-fast {
animation: floatAnimation 2s ease-in-out infinite;
}
@keyframes floatAnimation {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.float-rotate {
animation: floatRotate 6s ease-in-out infinite;
}
@keyframes floatRotate {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
33% {
transform: translateY(-30px) rotate(5deg);
}
66% {
transform: translateY(-15px) rotate(-5deg);
}
}
/* ============================================
BADGES & LABELS
============================================ */
.badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
border-radius: var(--radius-full);
background: var(--color-primary);
color: var(--color-black);
}
.badge-dark {
background: var(--color-dark);
color: var(--color-white);
}
/* Pulsing Badge */
.badge-pulse {
animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(254, 212, 0, 0.4);
}
50% {
box-shadow: 0 0 0 15px rgba(254, 212, 0, 0);
}
}
/* ============================================
PARALLAX BACKGROUND TEXT
============================================ */
.parallax-text {
position: absolute;
font-family: var(--font-display);
font-size: clamp(150px, 25vw, 350px);
font-weight: 900;
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
user-select: none;
opacity: 0.03;
color: var(--color-black);
will-change: transform;
}
/* ============================================
NAVIGATION
============================================ */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 24px 0;
transition: all 0.4s var(--ease-out-expo);
}
.nav.scrolled {
padding: 16px 0;
background: rgba(26, 26, 46, 0.9);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.nav-link {
position: relative;
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--color-white);
transition: color 0.3s ease;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 3px;
background: var(--color-primary);
transition: width 0.3s var(--ease-out-expo);
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.nav-cta {
background: var(--color-primary);
color: var(--color-black);
padding: 12px 24px;
border-radius: var(--radius-md);
}
/* ============================================
FORM ELEMENTS
============================================ */
.form-group {
position: relative;
margin-bottom: 24px;
}
.form-label {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: var(--color-gray-600);
pointer-events: none;
transition: all 0.3s var(--ease-out-expo);
}
.form-input {
width: 100%;
padding: 20px;
font-family: var(--font-body);
font-size: 16px;
background: var(--color-gray-100);
border: 2px solid transparent;
border-radius: var(--radius-md);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.card:hover { .form-input:focus {
transform: translateY(-8px); outline: none;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); border-color: var(--color-primary);
background: var(--color-white);
} }
.card-accent { .form-input:focus + .form-label,
border-top: 4px solid var(--color-primary); .form-input:not(:placeholder-shown) + .form-label {
} top: -12px;
left: 16px;
/* Typography Utilities */ font-size: 12px;
.text-display { font-weight: 700;
font-family: var(--font-heading);
font-weight: 800;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px;
background: var(--color-white);
padding: 4px 8px;
color: var(--color-primary);
} }
.text-gradient { /* ============================================
background: linear-gradient(135deg, var(--color-black) 0%, #333 100%); FOOTER
-webkit-background-clip: text; ============================================ */
-webkit-text-fill-color: transparent;
background-clip: text; .footer {
background: var(--color-dark);
color: var(--color-white);
padding: 80px 0 40px;
} }
/* Grid Utilities */ .footer-title {
.grid-2 { font-family: var(--font-display);
display: grid; font-size: 14px;
grid-template-columns: repeat(2, 1fr); font-weight: 700;
gap: var(--gutter); text-transform: uppercase;
letter-spacing: 3px;
color: var(--color-primary);
margin-bottom: 24px;
} }
.grid-3 { .social-link {
display: grid; display: flex;
grid-template-columns: repeat(3, 1fr); align-items: center;
gap: var(--gutter); justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
transition: all 0.3s var(--ease-out-expo);
} }
.grid-4 { .social-link:hover {
display: grid; background: var(--color-primary);
grid-template-columns: repeat(4, 1fr); transform: translateY(-4px);
gap: var(--gutter);
} }
/* Responsive */ .social-link svg {
width: 20px;
height: 20px;
fill: var(--color-white);
transition: fill 0.3s ease;
}
.social-link:hover svg {
fill: var(--color-black);
}
/* ============================================
UTILITIES
============================================ */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.text-primary { color: var(--color-primary); }
.text-dark { color: var(--color-dark); }
.text-muted { color: var(--color-gray-600); }
.bg-primary { background: var(--color-primary); }
.bg-dark { background: var(--color-dark); }
.text-center { text-align: center; }
.text-uppercase { text-transform: uppercase; letter-spacing: 2px; }
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1024px) { @media (max-width: 1024px) {
:root { :root {
--section-padding: 60px; --section-padding: 80px;
--gutter: 24px; --gutter: 24px;
} }
.grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
grid-template-columns: repeat(2, 1fr);
}
} }
@media (max-width: 640px) { @media (max-width: 640px) {
:root { :root {
--section-padding: 48px; --section-padding: 60px;
--gutter: 16px; --gutter: 16px;
} }
.grid-2, .btn {
.grid-3, width: 100%;
.grid-4 { padding: 18px 32px;
grid-template-columns: 1fr;
} }
} }
/* ============================================
LOADING ANIMATION
============================================ */
.loader {
position: fixed;
inset: 0;
background: var(--color-dark);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loader.hidden {
opacity: 0;
visibility: hidden;
}
.loader-text {
font-family: var(--font-display);
font-size: clamp(40px, 8vw, 80px);
font-weight: 900;
color: var(--color-primary);
animation: loaderPulse 1s ease-in-out infinite;
}
@keyframes loaderPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.95); }
}

17
src/utils/site-identity.ts
View File

@@ -1,12 +1,6 @@
import { emdash } from "emdash/astro"; import { getEmDashCollection } from "emdash";
import type { CollectionEntry } from "astro:content"; import type { CollectionEntry } from "astro:content";
export async function getSiteSettings() {
const context = await emdash(Astro);
const settings = context.entries.settings?.[0];
return settings;
}
export function resolveBlogSiteIdentity(entry: CollectionEntry<"blog">) { export function resolveBlogSiteIdentity(entry: CollectionEntry<"blog">) {
return { return {
title: entry.data.title, title: entry.data.title,
@@ -21,3 +15,12 @@ export function getReadingTime(content: string): string {
const minutes = Math.ceil(words / wordsPerMinute); const minutes = Math.ceil(words / wordsPerMinute);
return `${minutes} นาที`; return `${minutes} นาที`;
} }
export async function getBlogPosts() {
const { entries } = await getEmDashCollection("blog");
return entries.sort((a, b) => {
const dateA = new Date(a.data.date || 0).getTime();
const dateB = new Date(b.data.date || 0).getTime();
return dateB - dateA;
});
}