Phase 1: Homepage seamless design - add gradient transitions
- 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
578
.emdash/seed.json
Normal file
578
.emdash/seed.json
Normal 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 การตลาดซ้ำๆ เช่น การส่งอีเมล การโพสต์โซเชียลมีเดีย และการวิเคราะห์ข้อมูล" }] }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"version": "1.0.0",
|
||||
"lastScanned": 1777964900860,
|
||||
"lastScanned": 1779069605402,
|
||||
"projectRoot": "/Users/kunthawatgreethong/Gitea/moreminimore-emdash/moreminimore-site",
|
||||
"techStack": {
|
||||
"languages": [
|
||||
@@ -26,13 +26,23 @@
|
||||
"name": "astro",
|
||||
"version": "6.2.2",
|
||||
"category": "fullstack"
|
||||
},
|
||||
{
|
||||
"name": "react",
|
||||
"version": "19.2.5",
|
||||
"category": "frontend"
|
||||
},
|
||||
{
|
||||
"name": "react-dom",
|
||||
"version": "19.2.5",
|
||||
"category": "frontend"
|
||||
}
|
||||
],
|
||||
"packageManager": "npm",
|
||||
"runtime": "Node.js 22.12.0"
|
||||
},
|
||||
"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,
|
||||
"lintCommand": null,
|
||||
"devCommand": "npm run dev",
|
||||
@@ -45,7 +55,7 @@
|
||||
},
|
||||
"conventions": {
|
||||
"namingStyle": null,
|
||||
"importStyle": null,
|
||||
"importStyle": "ES modules",
|
||||
"testPattern": null,
|
||||
"fileOrganization": "type-based"
|
||||
},
|
||||
@@ -63,9 +73,10 @@
|
||||
"dist": {
|
||||
"path": "dist",
|
||||
"purpose": "Distribution/build output",
|
||||
"fileCount": 3,
|
||||
"lastAccessed": 1777964900843,
|
||||
"fileCount": 4,
|
||||
"lastAccessed": 1779069605371,
|
||||
"keyFiles": [
|
||||
"config.yml",
|
||||
"favicon.ico",
|
||||
"favicon.svg",
|
||||
"index.html"
|
||||
@@ -74,191 +85,115 @@
|
||||
"public": {
|
||||
"path": "public",
|
||||
"purpose": "Public files",
|
||||
"fileCount": 2,
|
||||
"lastAccessed": 1777964900843,
|
||||
"fileCount": 3,
|
||||
"lastAccessed": 1779069605375,
|
||||
"keyFiles": [
|
||||
"config.yml",
|
||||
"favicon.ico",
|
||||
"favicon.svg"
|
||||
]
|
||||
},
|
||||
"seed": {
|
||||
"path": "seed",
|
||||
"purpose": null,
|
||||
"fileCount": 1,
|
||||
"lastAccessed": 1779069605376,
|
||||
"keyFiles": [
|
||||
"seed.json"
|
||||
]
|
||||
},
|
||||
"src": {
|
||||
"path": "src",
|
||||
"purpose": "Source code",
|
||||
"fileCount": 1,
|
||||
"lastAccessed": 1779069605376,
|
||||
"keyFiles": [
|
||||
"content.config.ts"
|
||||
]
|
||||
},
|
||||
"uploads": {
|
||||
"path": "uploads",
|
||||
"purpose": null,
|
||||
"fileCount": 0,
|
||||
"lastAccessed": 1777964900843,
|
||||
"lastAccessed": 1779069605376,
|
||||
"keyFiles": []
|
||||
},
|
||||
"src/components": {
|
||||
"path": "src/components",
|
||||
"purpose": "UI components",
|
||||
"fileCount": 2,
|
||||
"lastAccessed": 1777964900844,
|
||||
"fileCount": 7,
|
||||
"lastAccessed": 1779069605377,
|
||||
"keyFiles": [
|
||||
"BlogCard.astro",
|
||||
"Footer.astro",
|
||||
"Navigation.astro"
|
||||
"Hero.astro"
|
||||
]
|
||||
},
|
||||
"src/data": {
|
||||
"path": "src/data",
|
||||
"purpose": "Data files",
|
||||
"fileCount": 1,
|
||||
"lastAccessed": 1779069605377,
|
||||
"keyFiles": [
|
||||
"portfolio.ts"
|
||||
]
|
||||
},
|
||||
"src/pages": {
|
||||
"path": "src/pages",
|
||||
"purpose": "Page components",
|
||||
"fileCount": 7,
|
||||
"lastAccessed": 1777964900844,
|
||||
"lastAccessed": 1779069605378,
|
||||
"keyFiles": [
|
||||
"about.astro",
|
||||
"contact.astro",
|
||||
"faq.astro"
|
||||
]
|
||||
},
|
||||
"src/utils": {
|
||||
"path": "src/utils",
|
||||
"purpose": "Utility functions",
|
||||
"fileCount": 1,
|
||||
"lastAccessed": 1779069605378,
|
||||
"keyFiles": [
|
||||
"site-identity.ts"
|
||||
]
|
||||
}
|
||||
},
|
||||
"hotPaths": [
|
||||
{
|
||||
"path": "src/pages/services/webdev.astro",
|
||||
"accessCount": 15,
|
||||
"lastAccessed": 1777995299269,
|
||||
"type": "file"
|
||||
"path": "src/pages",
|
||||
"accessCount": 1,
|
||||
"lastAccessed": 1779069626755,
|
||||
"type": "directory"
|
||||
},
|
||||
{
|
||||
"path": "src/pages/contact.astro",
|
||||
"accessCount": 13,
|
||||
"lastAccessed": 1778035753279,
|
||||
"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,
|
||||
"path": "src/pages/terms.astro",
|
||||
"accessCount": 1,
|
||||
"lastAccessed": 1779069632645,
|
||||
"type": "file"
|
||||
},
|
||||
{
|
||||
"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,
|
||||
"lastAccessed": 1777995189679,
|
||||
"type": "directory"
|
||||
},
|
||||
{
|
||||
"path": "src",
|
||||
"accessCount": 1,
|
||||
"lastAccessed": 1778035760907,
|
||||
"type": "directory"
|
||||
},
|
||||
{
|
||||
"path": "src/live.config.ts",
|
||||
"accessCount": 1,
|
||||
"lastAccessed": 1778036198221,
|
||||
"lastAccessed": 1779069632748,
|
||||
"type": "file"
|
||||
},
|
||||
{
|
||||
"path": "seed/seed.json",
|
||||
"path": "src/pages/faq.astro",
|
||||
"accessCount": 1,
|
||||
"lastAccessed": 1778036244021,
|
||||
"lastAccessed": 1779069632766,
|
||||
"type": "file"
|
||||
},
|
||||
{
|
||||
"path": "src/utils/site-identity.ts",
|
||||
"path": "src/pages/contact.astro",
|
||||
"accessCount": 1,
|
||||
"lastAccessed": 1778036594901,
|
||||
"lastAccessed": 1779069632802,
|
||||
"type": "file"
|
||||
},
|
||||
{
|
||||
"path": "src/pages/portfolio.astro",
|
||||
"accessCount": 1,
|
||||
"lastAccessed": 1779069632820,
|
||||
"type": "file"
|
||||
}
|
||||
],
|
||||
|
||||
8
.omc/sessions/94834f07-4375-45f9-b0d8-3e7a91395e8f.json
Normal file
8
.omc/sessions/94834f07-4375-45f9-b0d8-3e7a91395e8f.json
Normal 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
8
.omc/sessions/e5f480d6-2b75-4bfe-b154-b1e53e34e0a3.json
Normal 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": []
|
||||
}
|
||||
@@ -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}
|
||||
@@ -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}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"tool_name": "Write",
|
||||
"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...",
|
||||
"error": "EACCES: permission denied, mkdir '/Users/kunthawatgleethong'",
|
||||
"timestamp": "2026-05-06T03:03:02.581Z",
|
||||
"tool_name": "Read",
|
||||
"tool_input_preview": "{\"file_path\":\"/Users/kunthawatgreethong/.openclaude/projects/-Users-kunthawat-gith-Gitea-moreminimore-emdash/memory/private/redesign-2026-05-13.md\"}",
|
||||
"error": "File does not exist. Note: your current working directory is /Users/kunthawatgreethong/Gitea/moreminimore-emdash/moreminimore-site.",
|
||||
"timestamp": "2026-05-16T09:37:19.453Z",
|
||||
"retry_count": 1
|
||||
}
|
||||
@@ -1,231 +1,331 @@
|
||||
{
|
||||
"updatedAt": "2026-05-06T02:55:08.166Z",
|
||||
"updatedAt": "2026-05-18T02:00:05.002Z",
|
||||
"missions": [
|
||||
{
|
||||
"id": "session:94834f07-4375-45f9-b0d8-3e7a91395e8f:none",
|
||||
"id": "session:e564571a-2c3e-4064-a3bb-d2ba1fb5c94e:none",
|
||||
"source": "session",
|
||||
"name": "none",
|
||||
"objective": "Session mission",
|
||||
"createdAt": "2026-05-05T06:50:59.238Z",
|
||||
"updatedAt": "2026-05-06T02:55:08.166Z",
|
||||
"createdAt": "2026-05-16T02:09:52.147Z",
|
||||
"updatedAt": "2026-05-18T02:00:05.002Z",
|
||||
"status": "done",
|
||||
"workerCount": 7,
|
||||
"workerCount": 1,
|
||||
"taskCounts": {
|
||||
"total": 7,
|
||||
"total": 1,
|
||||
"pending": 0,
|
||||
"blocked": 0,
|
||||
"inProgress": 0,
|
||||
"completed": 7,
|
||||
"completed": 1,
|
||||
"failed": 0
|
||||
},
|
||||
"agents": [
|
||||
{
|
||||
"name": "fork:ade9261",
|
||||
"role": "fork",
|
||||
"ownership": "ade926181d79f7e22",
|
||||
"name": "verification:a52ff9b",
|
||||
"role": "verification",
|
||||
"ownership": "a52ff9b6cf94795c4",
|
||||
"status": "done",
|
||||
"currentStep": null,
|
||||
"latestUpdate": "completed",
|
||||
"completedSummary": null,
|
||||
"updatedAt": "2026-05-06T02:55:08.166Z"
|
||||
},
|
||||
{
|
||||
"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"
|
||||
"updatedAt": "2026-05-18T02:00:05.002Z"
|
||||
}
|
||||
],
|
||||
"timeline": [
|
||||
{
|
||||
"id": "session-stop:aa7b9c61b8d8fa05e:2026-05-05T12:31:57.422Z",
|
||||
"at": "2026-05-05T12:31:57.422Z",
|
||||
"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",
|
||||
"id": "session-start:a52ff9b6cf94795c4:2026-05-16T02:09:52.147Z",
|
||||
"at": "2026-05-16T02:09:52.147Z",
|
||||
"kind": "update",
|
||||
"agent": "Explore:ae3a10e",
|
||||
"detail": "started Explore:ae3a10e",
|
||||
"sourceKey": "session-start:ae3a10eff79730260"
|
||||
"agent": "verification:a52ff9b",
|
||||
"detail": "started verification:a52ff9b",
|
||||
"sourceKey": "session-start:a52ff9b6cf94795c4"
|
||||
},
|
||||
{
|
||||
"id": "session-stop:a56af702c99ca12f9:2026-05-05T12:32:22.586Z",
|
||||
"at": "2026-05-05T12:32:22.586Z",
|
||||
"id": "session-stop:ab1174d3ce0e6376a:2026-05-16T02:10:26.984Z",
|
||||
"at": "2026-05-16T02:10:26.984Z",
|
||||
"kind": "completion",
|
||||
"agent": "fork:a56af70",
|
||||
"agent": "verification:a52ff9b",
|
||||
"detail": "completed",
|
||||
"sourceKey": "session-stop:a56af702c99ca12f9"
|
||||
"sourceKey": "session-stop:ab1174d3ce0e6376a"
|
||||
},
|
||||
{
|
||||
"id": "session-stop:ae9660bca33bb7788:2026-05-05T12:32:45.962Z",
|
||||
"at": "2026-05-05T12:32:45.962Z",
|
||||
"id": "session-stop:a326c52dfaacc2663:2026-05-16T02:11:05.215Z",
|
||||
"at": "2026-05-16T02:11:05.215Z",
|
||||
"kind": "completion",
|
||||
"agent": "fork:ade9261",
|
||||
"agent": "verification:a52ff9b",
|
||||
"detail": "completed",
|
||||
"sourceKey": "session-stop:ae9660bca33bb7788"
|
||||
"sourceKey": "session-stop:a326c52dfaacc2663"
|
||||
},
|
||||
{
|
||||
"id": "session-stop:ae3a10eff79730260:2026-05-05T12:32:59.412Z",
|
||||
"at": "2026-05-05T12:32:59.412Z",
|
||||
"id": "session-stop:a32446a1150ab0b9a:2026-05-16T02:11:40.694Z",
|
||||
"at": "2026-05-16T02:11:40.694Z",
|
||||
"kind": "completion",
|
||||
"agent": "Explore:ae3a10e",
|
||||
"agent": "verification:a52ff9b",
|
||||
"detail": "completed",
|
||||
"sourceKey": "session-stop:ae3a10eff79730260"
|
||||
"sourceKey": "session-stop:a32446a1150ab0b9a"
|
||||
},
|
||||
{
|
||||
"id": "session-stop:a0702f4cc61206062:2026-05-05T12:33:26.229Z",
|
||||
"at": "2026-05-05T12:33:26.229Z",
|
||||
"id": "session-stop:a52ff9b6cf94795c4:2026-05-16T02:11:44.727Z",
|
||||
"at": "2026-05-16T02:11:44.727Z",
|
||||
"kind": "completion",
|
||||
"agent": "fork:ade9261",
|
||||
"agent": "verification:a52ff9b",
|
||||
"detail": "completed",
|
||||
"sourceKey": "session-stop:a0702f4cc61206062"
|
||||
"sourceKey": "session-stop:a52ff9b6cf94795c4"
|
||||
},
|
||||
{
|
||||
"id": "session-stop:a7b8d11ec5adbf4dd:2026-05-05T12:34:01.769Z",
|
||||
"at": "2026-05-05T12:34:01.769Z",
|
||||
"id": "session-stop:a4424f0af5bcdfbb7:2026-05-16T02:12:32.776Z",
|
||||
"at": "2026-05-16T02:12:32.776Z",
|
||||
"kind": "completion",
|
||||
"agent": "fork:ade9261",
|
||||
"agent": "verification:a52ff9b",
|
||||
"detail": "completed",
|
||||
"sourceKey": "session-stop:a7b8d11ec5adbf4dd"
|
||||
"sourceKey": "session-stop:a4424f0af5bcdfbb7"
|
||||
},
|
||||
{
|
||||
"id": "session-stop:ae38803ce1dae768c:2026-05-05T12:34:57.078Z",
|
||||
"at": "2026-05-05T12:34:57.078Z",
|
||||
"id": "session-stop:a4e64c457512e19a0:2026-05-16T03:44:04.372Z",
|
||||
"at": "2026-05-16T03:44:04.372Z",
|
||||
"kind": "completion",
|
||||
"agent": "fork:ade9261",
|
||||
"agent": "verification:a52ff9b",
|
||||
"detail": "completed",
|
||||
"sourceKey": "session-stop:ae38803ce1dae768c"
|
||||
"sourceKey": "session-stop:a4e64c457512e19a0"
|
||||
},
|
||||
{
|
||||
"id": "session-stop:ac8967a5f624630b2:2026-05-05T13:12:36.634Z",
|
||||
"at": "2026-05-05T13:12:36.634Z",
|
||||
"id": "session-stop:a2c932d87c4d902c4:2026-05-16T03:46:03.749Z",
|
||||
"at": "2026-05-16T03:46:03.749Z",
|
||||
"kind": "completion",
|
||||
"agent": "fork:ade9261",
|
||||
"agent": "verification:a52ff9b",
|
||||
"detail": "completed",
|
||||
"sourceKey": "session-stop:ac8967a5f624630b2"
|
||||
"sourceKey": "session-stop:a2c932d87c4d902c4"
|
||||
},
|
||||
{
|
||||
"id": "session-stop:a74f3816c08a6f716:2026-05-05T13:21:12.812Z",
|
||||
"at": "2026-05-05T13:21:12.812Z",
|
||||
"id": "session-stop:a2e9f825aee21bb1d:2026-05-16T03:50:56.609Z",
|
||||
"at": "2026-05-16T03:50:56.609Z",
|
||||
"kind": "completion",
|
||||
"agent": "fork:ade9261",
|
||||
"agent": "verification:a52ff9b",
|
||||
"detail": "completed",
|
||||
"sourceKey": "session-stop:a74f3816c08a6f716"
|
||||
"sourceKey": "session-stop:a2e9f825aee21bb1d"
|
||||
},
|
||||
{
|
||||
"id": "session-stop:a8c023c9a30c271a0:2026-05-05T14:19:49.676Z",
|
||||
"at": "2026-05-05T14:19:49.676Z",
|
||||
"id": "session-stop:a8fb1c6790f526ace:2026-05-16T04:44:36.486Z",
|
||||
"at": "2026-05-16T04:44:36.486Z",
|
||||
"kind": "completion",
|
||||
"agent": "fork:ade9261",
|
||||
"agent": "verification:a52ff9b",
|
||||
"detail": "completed",
|
||||
"sourceKey": "session-stop:a8c023c9a30c271a0"
|
||||
"sourceKey": "session-stop:a8fb1c6790f526ace"
|
||||
},
|
||||
{
|
||||
"id": "session-stop:a106f58695dd12bb4:2026-05-05T15:37:58.942Z",
|
||||
"at": "2026-05-05T15:37:58.942Z",
|
||||
"id": "session-stop:a8a29cb24b3982a84:2026-05-16T04:48:05.848Z",
|
||||
"at": "2026-05-16T04:48:05.848Z",
|
||||
"kind": "completion",
|
||||
"agent": "fork:ade9261",
|
||||
"agent": "verification:a52ff9b",
|
||||
"detail": "completed",
|
||||
"sourceKey": "session-stop:a106f58695dd12bb4"
|
||||
"sourceKey": "session-stop:a8a29cb24b3982a84"
|
||||
},
|
||||
{
|
||||
"id": "session-stop:ae7178f1d50a672fe:2026-05-06T02:26:35.999Z",
|
||||
"at": "2026-05-06T02:26:35.999Z",
|
||||
"id": "session-stop:a4f35b214ca428a48:2026-05-16T04:52:38.351Z",
|
||||
"at": "2026-05-16T04:52:38.351Z",
|
||||
"kind": "completion",
|
||||
"agent": "fork:ade9261",
|
||||
"agent": "verification:a52ff9b",
|
||||
"detail": "completed",
|
||||
"sourceKey": "session-stop:ae7178f1d50a672fe"
|
||||
"sourceKey": "session-stop:a4f35b214ca428a48"
|
||||
},
|
||||
{
|
||||
"id": "session-stop:aacfce063672189e4:2026-05-06T02:51:18.289Z",
|
||||
"at": "2026-05-06T02:51:18.289Z",
|
||||
"id": "session-stop:a719f1de7ab6a0fb0:2026-05-16T04:57:57.367Z",
|
||||
"at": "2026-05-16T04:57:57.367Z",
|
||||
"kind": "completion",
|
||||
"agent": "fork:ade9261",
|
||||
"agent": "verification:a52ff9b",
|
||||
"detail": "completed",
|
||||
"sourceKey": "session-stop:aacfce063672189e4"
|
||||
"sourceKey": "session-stop:a719f1de7ab6a0fb0"
|
||||
},
|
||||
{
|
||||
"id": "session-stop:a55df33c9fc0b4fd3:2026-05-06T02:53:34.397Z",
|
||||
"at": "2026-05-06T02:53:34.397Z",
|
||||
"id": "session-stop:a13a58ec501ffc2b3:2026-05-16T05:10:32.559Z",
|
||||
"at": "2026-05-16T05:10:32.559Z",
|
||||
"kind": "completion",
|
||||
"agent": "fork:ade9261",
|
||||
"agent": "verification:a52ff9b",
|
||||
"detail": "completed",
|
||||
"sourceKey": "session-stop:a55df33c9fc0b4fd3"
|
||||
"sourceKey": "session-stop:a13a58ec501ffc2b3"
|
||||
},
|
||||
{
|
||||
"id": "session-stop:ad63ce0e956a53a8d:2026-05-06T02:55:08.166Z",
|
||||
"at": "2026-05-06T02:55:08.166Z",
|
||||
"id": "session-stop:ad43c537c8c993dc6:2026-05-16T05:11:56.308Z",
|
||||
"at": "2026-05-16T05:11:56.308Z",
|
||||
"kind": "completion",
|
||||
"agent": "fork:ade9261",
|
||||
"agent": "verification:a52ff9b",
|
||||
"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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
@@ -1,71 +1,17 @@
|
||||
{
|
||||
"agents": [
|
||||
{
|
||||
"agent_id": "ade926181d79f7e22",
|
||||
"agent_type": "fork",
|
||||
"started_at": "2026-05-05T06:50:59.238Z",
|
||||
"agent_id": "a52ff9b6cf94795c4",
|
||||
"agent_type": "verification",
|
||||
"started_at": "2026-05-16T02:09:52.147Z",
|
||||
"parent_mode": "none",
|
||||
"status": "completed",
|
||||
"completed_at": "2026-05-05T07:01:55.583Z",
|
||||
"duration_ms": 656345
|
||||
},
|
||||
{
|
||||
"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
|
||||
"completed_at": "2026-05-16T02:11:44.727Z",
|
||||
"duration_ms": 112580
|
||||
}
|
||||
],
|
||||
"total_spawned": 3,
|
||||
"total_completed": 7,
|
||||
"total_spawned": 1,
|
||||
"total_completed": 1,
|
||||
"total_failed": 0,
|
||||
"last_updated": "2026-05-06T02:55:08.267Z"
|
||||
"last_updated": "2026-05-18T02:00:05.104Z"
|
||||
}
|
||||
@@ -1,20 +1,27 @@
|
||||
// @ts-check
|
||||
import { defineConfig } from 'astro/config';
|
||||
import node from "@astrojs/node";
|
||||
import react from "@astrojs/react";
|
||||
import mdx from "@astrojs/mdx";
|
||||
import node from "@astrojs/node";
|
||||
import emdash, { local } from "emdash/astro";
|
||||
import { sqlite } from "emdash/db";
|
||||
|
||||
export default defineConfig({
|
||||
output: "server",
|
||||
adapter: node({ mode: "standalone" }),
|
||||
image: { layout: "constrained", responsiveStyles: true },
|
||||
adapter: node({
|
||||
mode: 'standalone'
|
||||
}),
|
||||
integrations: [
|
||||
react(),
|
||||
mdx(),
|
||||
emdash({
|
||||
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
19
count-cols.cjs
Normal 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-shm
Normal file
BIN
data.db-shm
Normal file
Binary file not shown.
0
data.db-wal
Normal file
0
data.db-wal
Normal file
91
emdash-env.d.ts
vendored
91
emdash-env.d.ts
vendored
@@ -5,11 +5,15 @@
|
||||
|
||||
import type { ContentBylineCredit, PortableTextBlock } from "emdash";
|
||||
|
||||
export interface Page {
|
||||
export interface Blog {
|
||||
id: string;
|
||||
slug: string | null;
|
||||
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[];
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
@@ -17,14 +21,83 @@ export interface Page {
|
||||
bylines?: ContentBylineCredit[];
|
||||
}
|
||||
|
||||
export interface Post {
|
||||
export interface Faq {
|
||||
id: string;
|
||||
slug: string | null;
|
||||
status: string;
|
||||
title: string;
|
||||
featured_image?: { id: string; src?: string; alt?: string; width?: number; height?: number };
|
||||
category?: string;
|
||||
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[];
|
||||
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;
|
||||
updatedAt: Date;
|
||||
publishedAt: Date | null;
|
||||
@@ -33,7 +106,11 @@ export interface Post {
|
||||
|
||||
declare module "emdash" {
|
||||
interface EmDashCollections {
|
||||
blog: Blog;
|
||||
faq: Faq;
|
||||
pages: Page;
|
||||
posts: Post;
|
||||
portfolio: Portfolio;
|
||||
services: Service;
|
||||
settings: Setting;
|
||||
}
|
||||
}
|
||||
1565
package-lock.json
generated
1565
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -12,10 +12,11 @@
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/node": "^10.0.6",
|
||||
"@astrojs/react": "^5.0.4",
|
||||
"@astrojs/mdx": "^5.0.6",
|
||||
"@astrojs/node": "^10.1.1",
|
||||
"@astrojs/react": "^5.0.5",
|
||||
"astro": "^6.2.2",
|
||||
"emdash": "^0.9.0",
|
||||
"emdash": "^0.12.0",
|
||||
"react": "^19.2.5",
|
||||
"react-dom": "^19.2.5"
|
||||
}
|
||||
|
||||
BIN
public/images/services/ai-consult.jpg
Normal file
BIN
public/images/services/ai-consult.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 241 KiB |
BIN
public/images/services/automation.jpg
Normal file
BIN
public/images/services/automation.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 285 KiB |
BIN
public/images/services/default.jpg
Normal file
BIN
public/images/services/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 285 KiB |
BIN
public/images/services/marketing.jpg
Normal file
BIN
public/images/services/marketing.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 268 KiB |
BIN
public/images/services/webdev.jpg
Normal file
BIN
public/images/services/webdev.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 270 KiB |
52
seed-all.cjs
Normal file
52
seed-all.cjs
Normal 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
14
seed-db.cjs
Normal 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
26
seed-services.cjs
Normal 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');
|
||||
617
seed/seed.json
617
seed/seed.json
@@ -1,85 +1,598 @@
|
||||
{
|
||||
"version": "1",
|
||||
"collections": [
|
||||
{
|
||||
"name": "pages",
|
||||
"slug": "pages",
|
||||
"label": "Pages",
|
||||
"fields": [
|
||||
{ "name": "title", "type": "string", "label": "Title" },
|
||||
{ "name": "subtitle", "type": "string", "label": "Subtitle" },
|
||||
{ "name": "badge", "type": "string", "label": "Badge" },
|
||||
{ "name": "heroImage", "type": "image", "label": "Hero Image" },
|
||||
{ "name": "theme", "type": "select", "label": "Theme", "options": ["yellow", "accent"] },
|
||||
{ "name": "showCTA", "type": "boolean", "label": "Show CTA" },
|
||||
{ "name": "ctaText", "type": "string", "label": "CTA Text" },
|
||||
{ "name": "ctaLink", "type": "string", "label": "CTA Link" },
|
||||
{ "name": "variant", "type": "select", "label": "Hero Variant", "options": ["split", "centered", "text-only", "floating-cards"] },
|
||||
{ "name": "size", "type": "select", "label": "Hero Size", "options": ["full", "compact"] }
|
||||
{ "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"] }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "services",
|
||||
"slug": "services",
|
||||
"label": "Services",
|
||||
"fields": [
|
||||
{ "name": "title", "type": "string", "label": "Title" },
|
||||
{ "name": "subtitle", "type": "string", "label": "Subtitle" },
|
||||
{ "name": "badge", "type": "string", "label": "Badge" },
|
||||
{ "name": "heroImage", "type": "image", "label": "Hero Image" },
|
||||
{ "name": "content", "type": "richtext", "label": "Content" },
|
||||
{ "name": "features", "type": "array", "label": "Features", "fields": [
|
||||
{ "name": "icon", "type": "string", "label": "Icon" },
|
||||
{ "name": "title", "type": "string", "label": "Title" },
|
||||
{ "name": "description", "type": "string", "label": "Description" }
|
||||
]}
|
||||
{ "slug": "title", "type": "string", "label": "Title" },
|
||||
{ "slug": "subtitle", "type": "string", "label": "Subtitle" },
|
||||
{ "slug": "badge", "type": "string", "label": "Badge" },
|
||||
{ "slug": "category", "type": "select", "label": "Category", "options": ["tech-consult", "marketing-consult"] },
|
||||
{ "slug": "objective", "type": "string", "label": "Objective (Headline)" },
|
||||
{ "slug": "hero_image", "type": "image", "label": "Hero Image" },
|
||||
{ "slug": "usp_free_server", "type": "string", "label": "USP: Free Server Description" },
|
||||
{ "slug": "usp_content_edit", "type": "string", "label": "USP: Free Content Edit Description" },
|
||||
{ "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" }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "portfolio",
|
||||
"slug": "portfolio",
|
||||
"label": "Portfolio",
|
||||
"fields": [
|
||||
{ "name": "name", "type": "string", "label": "Name" },
|
||||
{ "name": "url", "type": "string", "label": "URL" },
|
||||
{ "name": "category", "type": "select", "label": "Category", "options": ["webdev", "ecommerce", "marketing"] },
|
||||
{ "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" }
|
||||
]}
|
||||
{ "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" }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "blog",
|
||||
"slug": "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" }
|
||||
{ "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" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "faq",
|
||||
"slug": "faq",
|
||||
"label": "FAQ",
|
||||
"fields": [
|
||||
{ "name": "category", "type": "string", "label": "Category" },
|
||||
{ "name": "question", "type": "string", "label": "Question" },
|
||||
{ "name": "answer", "type": "string", "label": "Answer" }
|
||||
{ "slug": "category", "type": "string", "label": "Category" },
|
||||
{ "slug": "question", "type": "string", "label": "Question" },
|
||||
{ "slug": "answer", "type": "text", "label": "Answer" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "settings",
|
||||
"slug": "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": "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
84
src/components/BlogCard.astro
Normal 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>
|
||||
@@ -1,184 +1,449 @@
|
||||
---
|
||||
/**
|
||||
* MOREMINIMORE - FOOTER COMPONENT
|
||||
* Minimal design with animated elements
|
||||
*/
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
const socialLinks = [
|
||||
{ label: "Facebook", href: "https://www.facebook.com/moreminimore", icon: "facebook" },
|
||||
{ label: "LINE", href: "https://line.me/ti/p/~@539hdlul", icon: "line" },
|
||||
{ label: "LinkedIn", href: "https://www.linkedin.com/company/moreminimore", icon: "linkedin" },
|
||||
const navLinks = [
|
||||
{ label: 'หน้าแรก', href: '/' },
|
||||
{ label: 'บริการ', href: '/services' },
|
||||
{ label: 'ผลงาน', href: '/portfolio' },
|
||||
{ label: 'บทความ', href: '/blog' },
|
||||
{ label: 'ติดต่อ', href: '/contact' },
|
||||
];
|
||||
|
||||
const footerLinks = [
|
||||
{ label: "นโยบายความเป็นส่วนตัว", href: "/privacy" },
|
||||
{ label: "เงื่อนไขการใช้บริการ", href: "/terms" },
|
||||
{ label: "ติดต่อเรา", href: "/contact" },
|
||||
const serviceLinks = [
|
||||
{ label: 'พัฒนาเว็บไซต์', href: '/services/webdev' },
|
||||
{ label: 'Marketing Automation', href: '/services/marketing' },
|
||||
{ label: 'AI Automation', href: '/services/automation' },
|
||||
{ label: 'Tech Consult', href: '/services/ai-consult' },
|
||||
];
|
||||
---
|
||||
|
||||
<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="footer-grid">
|
||||
<!-- Brand Column -->
|
||||
<div class="footer-brand">
|
||||
<img src="/images/logo-long.png" alt="MoreminiMore" class="footer-logo" />
|
||||
<a href="/" class="footer-logo">
|
||||
<div class="logo-banner">
|
||||
<img src="/images/logo-long.png" alt="MoreminiMore" class="logo-img" />
|
||||
</div>
|
||||
</a>
|
||||
<p class="footer-tagline">
|
||||
บริษัท มอร์มินิมอร์ จำกัด<br />
|
||||
ผู้เชี่ยวชาญด้าน IT และ Digital Transformation<br />
|
||||
สำหรับธุรกิจ SMEs ไทย
|
||||
รับทำเว็บไซต์ SEO AI Chatbot<br/>
|
||||
สำหรับธุรกิจไทย
|
||||
</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>
|
||||
))}
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<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>
|
||||
<!-- 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>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-links">
|
||||
<h4>บริการ</h4>
|
||||
<ul>
|
||||
<li><a href="/services/consult">Tech Consult</a></li>
|
||||
<li><a href="/services/ai">AI Automation</a></li>
|
||||
<li><a href="/services/marketing">Marketing Automation</a></li>
|
||||
<li><a href="/services/webdev">พัฒนาเว็บไซต์</a></li>
|
||||
<!-- Services -->
|
||||
<div class="footer-col">
|
||||
<h4 class="footer-title">บริการ</h4>
|
||||
<ul class="footer-links">
|
||||
{serviceLinks.map(link => (
|
||||
<li>
|
||||
<a href={link.href} class="footer-link">
|
||||
<span class="link-arrow">→</span>
|
||||
{link.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-contact">
|
||||
<h4>ติดต่อ</h4>
|
||||
<p><strong>โทร:</strong> 080-995-5945</p>
|
||||
<p><strong>อีเมล:</strong> contact@moreminimore.com</p>
|
||||
<p><strong>ที่อยู่:</strong> 53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120</p>
|
||||
<!-- Contact -->
|
||||
<div class="footer-col footer-contact">
|
||||
<h4 class="footer-title">ติดต่อเรา</h4>
|
||||
<div class="contact-item">
|
||||
<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>
|
||||
|
||||
<!-- Footer Bottom -->
|
||||
<div class="footer-bottom">
|
||||
<p>© {currentYear} บริษัท มอร์มินิมอร์ จำกัด. สงวนลิขสิทธิ์.</p>
|
||||
<div class="legal-links">
|
||||
{footerLinks.map((link) => (
|
||||
<a href={link.href}>{link.label}</a>
|
||||
))}
|
||||
<div class="footer-legal">
|
||||
<p>© {currentYear} MoreminiMore. สงวนลิขสิทธิ์.</p>
|
||||
</div>
|
||||
<div class="footer-links-bottom">
|
||||
<a href="/privacy">นโยบายความเป็นส่วนตัว</a>
|
||||
<a href="/terms">เงื่อนไขการใช้บริการ</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
/* ============================================
|
||||
FOOTER BASE
|
||||
============================================ */
|
||||
|
||||
.footer {
|
||||
background: var(--color-light-gray);
|
||||
color: var(--color-black);
|
||||
padding: 80px 0 40px;
|
||||
position: relative;
|
||||
background: var(--color-dark);
|
||||
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 {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr 1.5fr;
|
||||
gap: 48px;
|
||||
margin-bottom: 60px;
|
||||
grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
|
||||
gap: 60px;
|
||||
padding-bottom: 60px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
BRAND - LOGO BANNER
|
||||
============================================ */
|
||||
|
||||
.footer-logo {
|
||||
height: 40px;
|
||||
margin-bottom: 16px;
|
||||
display: inline-flex;
|
||||
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 {
|
||||
font-size: 14px;
|
||||
color: var(--color-medium-gray);
|
||||
margin-bottom: 24px;
|
||||
line-height: 1.6;
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
/* Social Links */
|
||||
.footer-social {
|
||||
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;
|
||||
height: 24px;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.2s;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.social-link:hover img {
|
||||
opacity: 1;
|
||||
.social-btn:hover {
|
||||
background: var(--color-primary);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 20px rgba(254, 212, 0, 0.3);
|
||||
}
|
||||
|
||||
.footer-links h4,
|
||||
.footer-contact h4 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: var(--color-accent);
|
||||
.social-btn:hover img {
|
||||
/* Keep original icon colors */
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: var(--color-medium-gray);
|
||||
font-size: 14px;
|
||||
transition: color 0.2s;
|
||||
.contact-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--color-accent);
|
||||
.contact-item a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.footer-contact p {
|
||||
font-size: 14px;
|
||||
color: var(--color-medium-gray);
|
||||
margin-bottom: 12px;
|
||||
.footer-cta {
|
||||
margin-top: auto;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.footer-contact strong {
|
||||
color: var(--color-black);
|
||||
.footer-cta svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-cta:hover svg {
|
||||
transform: translateX(6px);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
BOTTOM
|
||||
============================================ */
|
||||
|
||||
.footer-bottom {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding-top: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: var(--color-medium-gray);
|
||||
padding-top: 32px;
|
||||
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;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.legal-links a {
|
||||
color: var(--color-medium-gray);
|
||||
transition: color 0.2s;
|
||||
.footer-links-bottom a {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.legal-links a:hover {
|
||||
color: var(--color-accent);
|
||||
.footer-links-bottom a:hover {
|
||||
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) {
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 48px;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
@@ -187,8 +452,13 @@ const footerLinks = [
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.footer {
|
||||
padding: 60px 0 32px;
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
@@ -201,9 +471,28 @@ const footerLinks = [
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.legal-links {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
.back-to-top {
|
||||
bottom: 20px;
|
||||
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>
|
||||
@@ -1,465 +1,611 @@
|
||||
---
|
||||
/**
|
||||
* MOREMINIMORE - KINETIC HERO COMPONENT
|
||||
* Typography IS the hero - No images, just bold text
|
||||
*/
|
||||
|
||||
interface Props {
|
||||
badge?: string;
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
badge?: string;
|
||||
image?: string;
|
||||
theme?: 'yellow' | 'accent';
|
||||
showCTA?: boolean;
|
||||
ctaText?: string;
|
||||
ctaLink?: string;
|
||||
variant?: 'split' | 'centered' | 'image-bg' | 'text-only' | 'floating-cards';
|
||||
size?: 'full' | 'compact';
|
||||
}
|
||||
|
||||
const {
|
||||
title,
|
||||
subtitle,
|
||||
badge,
|
||||
image = "/images/hero/hero.jpg",
|
||||
theme = 'yellow',
|
||||
badge = "ดิจิทัลเอเจนซี่ในประเทศไทย",
|
||||
title = "เปลี่ยนธุรกิจของคุณ ด้วย AI และเทคโนโลยีสมัยใหม่",
|
||||
subtitle = "รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย | เพิ่มยอดขาย ลดต้นทุน ด้วยเทคโนโลยีล้ำสมัย",
|
||||
showCTA = true,
|
||||
ctaText = "เริ่มต้นวันนี้",
|
||||
ctaLink = "/contact",
|
||||
variant = 'split',
|
||||
size = 'compact'
|
||||
} = Astro.props;
|
||||
|
||||
// Split title into words for kinetic animation
|
||||
const titleWords = title.split(' ');
|
||||
---
|
||||
|
||||
<section class={`hero hero-${theme} hero-variant-${variant} hero-size-${size}`}>
|
||||
{variant === 'image-bg' && (
|
||||
<div class="hero-image-bg">
|
||||
<img src={image} alt="" class="hero-bg-img" />
|
||||
<div class="hero-bg-overlay"></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class="hero-bg-pattern"></div>
|
||||
<section class="kinetic-hero">
|
||||
<!-- Animated Background Pattern -->
|
||||
<div class="hero-bg">
|
||||
<div class="bg-grid"></div>
|
||||
<div class="bg-gradient"></div>
|
||||
</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">
|
||||
{variant === 'split' && (
|
||||
<>
|
||||
<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} />}
|
||||
{showCTA && (
|
||||
<div class="hero-actions">
|
||||
<a href={ctaLink} class="btn btn-dark btn-lg">{ctaText}</a>
|
||||
<a href="/portfolio" class="btn btn-outline-dark btn-lg">ดูผลงาน</a>
|
||||
</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>
|
||||
)}
|
||||
<!-- Badge -->
|
||||
<div class="hero-badge" data-animate="fade-in">
|
||||
<span class="badge-dot"></span>
|
||||
{badge}
|
||||
</div>
|
||||
|
||||
<!-- Main Title - Kinetic Typography -->
|
||||
<h1 class="hero-title">
|
||||
{titleWords.map((word, index) => (
|
||||
<span class="word-wrapper">
|
||||
<span
|
||||
class="word"
|
||||
style={`--delay: ${0.4 + index * 0.12}s`}
|
||||
>
|
||||
{word}
|
||||
</span>
|
||||
</span>
|
||||
))}
|
||||
</h1>
|
||||
|
||||
<!-- 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 && (
|
||||
<div class="hero-actions" data-animate="fade-in-up">
|
||||
<a href={ctaLink} class="btn btn-primary btn-magnetic">
|
||||
<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>
|
||||
)}
|
||||
|
||||
{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' && (
|
||||
<div class="hero-wave">
|
||||
<svg viewBox="0 0 1440 120" 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"/>
|
||||
</svg>
|
||||
<!-- 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">
|
||||
<svg viewBox="0 0 1440 100" fill="none" preserveAspectRatio="none">
|
||||
<path d="M0 50C240 100 480 0 720 50C960 100 1200 0 1440 50V100H0V50Z" fill="#ffffff"/>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
/* ============================================
|
||||
HERO BASE
|
||||
============================================ */
|
||||
|
||||
.kinetic-hero {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--color-dark);
|
||||
overflow: hidden;
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.hero-size-full {
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.hero-size-compact {
|
||||
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 {
|
||||
/* ============================================
|
||||
BACKGROUND
|
||||
============================================ */
|
||||
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
.hero-bg-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.hero-bg-overlay {
|
||||
|
||||
.bg-grid {
|
||||
position: absolute;
|
||||
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%);
|
||||
}
|
||||
.hero-variant-image-bg .hero-container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-image:
|
||||
linear-gradient(rgba(254, 212, 0, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(254, 212, 0, 0.03) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
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 {
|
||||
display: grid;
|
||||
gap: 60px;
|
||||
align-items: center;
|
||||
padding: 40px var(--gutter);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 120px var(--gutter) 100px;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.hero-size-full .hero-container {
|
||||
min-height: 80vh;
|
||||
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; }
|
||||
|
||||
/* ============================================
|
||||
BADGE
|
||||
============================================ */
|
||||
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
background: var(--color-black);
|
||||
color: var(--color-primary);
|
||||
padding: 10px 24px;
|
||||
border-radius: 30px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 24px;
|
||||
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-weight: 700;
|
||||
font-family: var(--font-heading);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 20px;
|
||||
animation: slideIn 0.6s ease forwards;
|
||||
letter-spacing: 3px;
|
||||
color: var(--color-primary);
|
||||
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 {
|
||||
font-size: clamp(28px, 4vw, 56px);
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.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;
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(40px, 8vw, 90px);
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.02em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-white);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.hero-content.centered .hero-subtitle,
|
||||
.hero-content.text-only .hero-subtitle {
|
||||
text-align: center;
|
||||
.word-wrapper {
|
||||
display: inline-block;
|
||||
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;
|
||||
margin-bottom: 48px;
|
||||
opacity: 0;
|
||||
animation: fadeInUp 0.8s var(--ease-out-expo) 0.8s forwards;
|
||||
}
|
||||
|
||||
/* Text Only Variant */
|
||||
.text-only-title {
|
||||
font-size: clamp(32px, 6vw, 72px);
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.hero-size-full .text-only-title {
|
||||
font-size: clamp(40px, 8vw, 96px);
|
||||
}
|
||||
|
||||
.text-only-sub {
|
||||
font-size: 18px;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
/* Actions */
|
||||
/* ============================================
|
||||
CTA BUTTONS
|
||||
============================================ */
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
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); } }
|
||||
@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 {
|
||||
.btn-magnetic {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
animation: fadeIn 1s ease 0.3s forwards;
|
||||
padding: 24px 48px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.hero-image-wrapper { position: relative; width: 100%; max-width: 420px; }
|
||||
.hero-image-border {
|
||||
position: absolute;
|
||||
inset: -15px;
|
||||
border: 4px solid var(--color-black);
|
||||
border-radius: 25px;
|
||||
opacity: 0.2;
|
||||
transform: rotate(3deg);
|
||||
.btn-arrow {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
transition: transform 0.3s var(--ease-out-expo);
|
||||
}
|
||||
.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 */
|
||||
.hero-floating {
|
||||
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;
|
||||
.btn-magnetic:hover .btn-arrow {
|
||||
transform: translateX(8px);
|
||||
}
|
||||
.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); } }
|
||||
|
||||
/* Centered Variant Image */
|
||||
.hero-center-image {
|
||||
margin-top: 32px;
|
||||
max-width: 500px;
|
||||
opacity: 0;
|
||||
animation: fadeIn 1s ease 0.5s forwards;
|
||||
.btn-outline.btn-dark {
|
||||
background: transparent;
|
||||
color: var(--color-white);
|
||||
border: 2px solid var(--color-white);
|
||||
}
|
||||
.hero-center-image img { width: 100%; border-radius: 16px; box-shadow: 0 25px 50px rgba(0,0,0,0.15); }
|
||||
|
||||
/* Floating Cards Visual */
|
||||
.hero-cards-visual {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
.hero-mini-card {
|
||||
.btn-outline.btn-dark:hover {
|
||||
background: var(--color-white);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
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;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
|
||||
transition: transform 0.3s;
|
||||
gap: 12px;
|
||||
opacity: 0;
|
||||
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 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 70px;
|
||||
color: var(--color-white);
|
||||
pointer-events: none;
|
||||
height: 100px;
|
||||
z-index: 2;
|
||||
}
|
||||
.hero-wave svg { width: 100%; height: 100%; }
|
||||
|
||||
/* Responsive */
|
||||
.hero-wave svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
RESPONSIVE
|
||||
============================================ */
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.hero-container { grid-template-columns: 1fr; gap: 32px; text-align: center; }
|
||||
.hero-content.centered, .hero-content.text-only { align-items: center; }
|
||||
.hero-subtitle { margin: 0 auto 24px; }
|
||||
.hero-actions { justify-content: center; }
|
||||
.hero-visual { order: -1; max-width: 350px; margin: 0 auto; }
|
||||
.hero-floating { padding: 10px 16px; }
|
||||
.floating-number { font-size: 20px; }
|
||||
.hero-floating-1 { right: 0; }
|
||||
.hero-floating-2 { left: 0; }
|
||||
.hero-variant-floating-cards .hero-container { grid-template-columns: 1fr; }
|
||||
.hero-cards-visual { max-width: 350px; margin: 0 auto; }
|
||||
.hero-title {
|
||||
font-size: clamp(32px, 7vw, 64px);
|
||||
}
|
||||
|
||||
.hero-container {
|
||||
padding: 100px var(--gutter) 80px;
|
||||
}
|
||||
|
||||
.hero-bg-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scroll-indicator {
|
||||
bottom: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.hero-title { font-size: clamp(24px, 7vw, 40px); }
|
||||
.text-only-title { font-size: clamp(28px, 9vw, 56px); }
|
||||
.hero-actions { flex-direction: column; width: 100%; }
|
||||
.btn-lg { width: 100%; justify-content: center; }
|
||||
.hero-image-wrapper { max-width: 260px; }
|
||||
.hero-image-border { inset: -8px; }
|
||||
.hero-cards-visual { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px; }
|
||||
.hero-mini-card { padding: 16px; }
|
||||
.mini-icon { font-size: 24px; }
|
||||
.hero-title {
|
||||
font-size: clamp(28px, 9vw, 48px);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.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>
|
||||
@@ -1,274 +1,537 @@
|
||||
---
|
||||
const navItems = [
|
||||
{ label: "หน้าแรก", href: "/" },
|
||||
{ label: "เกี่ยวกับเรา", href: "/about" },
|
||||
{
|
||||
label: "บริการ",
|
||||
submenu: [
|
||||
{ label: "Tech Consult", href: "/services/consult" },
|
||||
{ label: "AI Automation", href: "/services/ai" },
|
||||
{ label: "Marketing Automation", href: "/services/marketing" },
|
||||
{ label: "พัฒนาเว็บไซต์", href: "/services/webdev" },
|
||||
]
|
||||
},
|
||||
{ label: "ผลงาน", href: "/portfolio" },
|
||||
{ label: "บทความ", href: "/blog" },
|
||||
{ label: "ติดต่อ", href: "/contact" },
|
||||
/**
|
||||
* MOREMINIMORE - NAVIGATION COMPONENT
|
||||
* Morphing navigation with submenus
|
||||
*/
|
||||
|
||||
const services = [
|
||||
{ label: 'Website Development', href: '/services/webdev' },
|
||||
{ label: 'Marketing Automation', href: '/services/marketing' },
|
||||
{ label: 'AI Automation', href: '/services/automation' },
|
||||
{ label: 'Tech Consult', href: '/services/ai-consult' },
|
||||
];
|
||||
|
||||
const currentPath = Astro.url.pathname;
|
||||
---
|
||||
|
||||
<header class="header">
|
||||
<nav class="nav container">
|
||||
<a href="/" class="logo">
|
||||
<img src="/images/logo-long.png" alt="MoreminiMore" class="logo-img" />
|
||||
<header class="nav" id="nav">
|
||||
<div class="nav-container container">
|
||||
<!-- Logo with Banner Style -->
|
||||
<a href="/" class="nav-logo">
|
||||
<div class="logo-banner">
|
||||
<img src="/images/logo-long.png" alt="MoreminiMore" class="logo-img" />
|
||||
</div>
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
{navItems.map((item) => (
|
||||
<li class:list={["nav-item", { "has-submenu": item.submenu }]}>
|
||||
{item.submenu ? (
|
||||
<>
|
||||
<span class="nav-link nav-dropdown">
|
||||
{item.label}
|
||||
<svg class="dropdown-arrow" width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</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}
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<nav class="nav-desktop">
|
||||
<a href="/" class="nav-link" data-magnetic>หน้าแรก</a>
|
||||
|
||||
<!-- Services with Submenu -->
|
||||
<div class="nav-dropdown">
|
||||
<a href="/services" class="nav-link nav-dropdown-trigger" data-magnetic>
|
||||
บริการ
|
||||
<svg class="dropdown-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M6 9l6 6 6-6"/>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="nav-dropdown-menu">
|
||||
{services.map(service => (
|
||||
<a href={service.href} class="dropdown-item">
|
||||
{service.label}
|
||||
</a>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<a href="/contact" class="btn btn-primary nav-cta">ปรึกษาฟรี</a>
|
||||
<button class="mobile-menu-btn" aria-label="Toggle menu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="/portfolio" class="nav-link" data-magnetic>ผลงาน</a>
|
||||
<a href="/blog" class="nav-link" data-magnetic>บทความ</a>
|
||||
<a href="/about" class="nav-link" data-magnetic>เกี่ยวกับเรา</a>
|
||||
<a href="/contact" class="nav-link nav-cta" data-magnetic>ติดต่อเรา</a>
|
||||
</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>
|
||||
</nav>
|
||||
</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>
|
||||
|
||||
<!-- Scroll Progress Bar -->
|
||||
<div class="scroll-progress" id="scroll-progress"></div>
|
||||
|
||||
<style>
|
||||
.header {
|
||||
/* ============================================
|
||||
NAVIGATION BASE
|
||||
============================================ */
|
||||
|
||||
.nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
padding: 16px 0;
|
||||
transition: all 0.4s var(--ease-out-expo);
|
||||
}
|
||||
|
||||
.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;
|
||||
align-items: center;
|
||||
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 {
|
||||
height: 40px;
|
||||
height: 36px;
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
.nav.scrolled .logo-img {
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
DESKTOP NAVIGATION
|
||||
============================================ */
|
||||
|
||||
.nav-desktop {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
color: var(--color-black);
|
||||
position: relative;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-display);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: var(--color-white);
|
||||
transition: color 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background: var(--color-light-gray);
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.dropdown-arrow {
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.has-submenu:hover .dropdown-arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* Submenu */
|
||||
.submenu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
background: var(--color-white);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
|
||||
padding: 12px 0;
|
||||
min-width: 220px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-10px);
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.has-submenu:hover .submenu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.submenu li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.submenu-link {
|
||||
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;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.nav-cta {
|
||||
padding: 12px 24px;
|
||||
font-size: 14px;
|
||||
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);
|
||||
}
|
||||
|
||||
.mobile-menu-btn {
|
||||
.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 {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-dropdown:hover .dropdown-arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.nav-dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(10px);
|
||||
min-width: 220px;
|
||||
background: var(--color-dark);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 12px 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s var(--ease-out-expo);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(254, 212, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav-dropdown:hover .nav-dropdown-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
display: block;
|
||||
padding: 12px 24px;
|
||||
font-family: var(--font-display);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background: rgba(254, 212, 0, 0.1);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
MOBILE TOGGLE
|
||||
============================================ */
|
||||
|
||||
.nav-toggle {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
z-index: 1001;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.mobile-menu-btn span {
|
||||
display: block;
|
||||
.toggle-line {
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background: var(--color-black);
|
||||
transition: all 0.3s;
|
||||
background: var(--color-white);
|
||||
border-radius: 2px;
|
||||
transition: all 0.3s var(--ease-out-expo);
|
||||
}
|
||||
|
||||
.nav-toggle.active .toggle-line:nth-child(1) {
|
||||
transform: rotate(45deg) translate(5px, 5px);
|
||||
}
|
||||
|
||||
.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;
|
||||
right: 0;
|
||||
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;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mobile-link {
|
||||
font-family: var(--font-display);
|
||||
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%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-mobile-overlay.active .mobile-link {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
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-links {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--color-white);
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav-links.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-cta {
|
||||
.nav-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-menu-btn {
|
||||
.nav-toggle {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.submenu {
|
||||
position: static;
|
||||
box-shadow: none;
|
||||
padding-left: 20px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.has-submenu.active .submenu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.has-submenu:hover .submenu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: none;
|
||||
@media (max-width: 640px) {
|
||||
.mobile-link {
|
||||
font-size: 24px;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const mobileBtn = document.querySelector('.mobile-menu-btn');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
const hasSubmenuItems = document.querySelectorAll('.has-submenu');
|
||||
// Navigation scroll effect
|
||||
const nav = document.getElementById('nav');
|
||||
const toggle = document.getElementById('nav-toggle');
|
||||
const mobileNav = document.getElementById('nav-mobile');
|
||||
const scrollProgress = document.getElementById('scroll-progress');
|
||||
|
||||
mobileBtn?.addEventListener('click', () => {
|
||||
navLinks?.classList.toggle('active');
|
||||
// Scroll effect
|
||||
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}%`;
|
||||
}
|
||||
});
|
||||
|
||||
// Mobile menu toggle
|
||||
toggle?.addEventListener('click', () => {
|
||||
toggle.classList.toggle('active');
|
||||
mobileNav?.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');
|
||||
});
|
||||
});
|
||||
|
||||
hasSubmenuItems.forEach(item => {
|
||||
const navLink = item.querySelector('.nav-link');
|
||||
navLink?.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
item.classList.toggle('active');
|
||||
});
|
||||
// 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>
|
||||
201
src/components/PageHero.astro
Normal file
201
src/components/PageHero.astro
Normal 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
76
src/components/PortfolioCard.astro
Normal 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
50
src/components/SectionHeader.astro
Normal 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
188
src/components/ServiceCard.astro
Normal 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
26
src/content.config.ts
Normal 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
27
src/content/blog/5-ways-ai-increase-sales.mdx
Normal 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
22
src/content/blog/ai-content-google-love.mdx
Normal 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
27
src/content/blog/ai-for-sme-thailand.mdx
Normal 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
28
src/content/blog/digital-transformation-guide.mdx
Normal 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
34
src/content/blog/marketing-automation-guide.mdx
Normal 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
26
src/content/services/ai-consult.mdx
Normal 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
26
src/content/services/automation.mdx
Normal 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
25
src/content/services/marketing.mdx
Normal 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
26
src/content/services/webdev.mdx
Normal 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
74
src/data/portfolio.ts
Normal 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 อย่างเป็นทางการในประเทศไทย"
|
||||
}
|
||||
];
|
||||
@@ -1,10 +1,15 @@
|
||||
---
|
||||
import "../styles/global.css";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
const { title, description = "MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot" } = Astro.props;
|
||||
const {
|
||||
title,
|
||||
description = "MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย | เพิ่มยอดขาย ลดต้นทุน ด้วยเทคโนโลยีล้ำสมัย"
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
@@ -13,14 +18,11 @@ const { title, description = "MoreminiMore - รับทำเว็บไซ
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content={description} />
|
||||
<meta name="theme-color" content="#1a1a2e" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<body style="margin: 0; background: #ffffff;">
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style is:global>
|
||||
@import '../styles/global.css';
|
||||
</style>
|
||||
</html>
|
||||
@@ -1,6 +1,7 @@
|
||||
import { defineLiveCollection } from "astro:content";
|
||||
import { emdashLoader } from "emdash/runtime";
|
||||
|
||||
// EmDash CMS Collections
|
||||
export const collections = {
|
||||
_emdash: defineLiveCollection({ loader: emdashLoader() }),
|
||||
};
|
||||
@@ -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}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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
7
src/pages/.omc/state/last-tool-error.json
Normal 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
|
||||
}
|
||||
@@ -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
7
src/pages/.omc/state/subagent-tracking.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"agents": [],
|
||||
"total_spawned": 0,
|
||||
"total_completed": 0,
|
||||
"total_failed": 0,
|
||||
"last_updated": "2026-05-14T02:36:34.781Z"
|
||||
}
|
||||
@@ -1,128 +1,46 @@
|
||||
---
|
||||
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 whyChooseUs = [
|
||||
{ icon: "🎯", title: "ตรงต่อความต้องการ", desc: "เราเข้าใจว่าทุกธุรกิจมีความแตกต่าง เราออกแบบโซลูชันที่เหมาะกับคุณ" },
|
||||
{ icon: "⚡", title: "ส่งงานรวดเร็ว", desc: "ทำงานอย่างมีประสิทธิภาพ ส่งมอบงานตรงเวลา ไม่ผิดสัญญา" },
|
||||
{ icon: "🛡️", title: "รับประกันคุณภาพ", desc: "หากไม่พอใจในงาน เราพร้อมแก้ไขจนกว่าจะถูกใจ" },
|
||||
{ icon: "💬", title: "ดูแลต่อเนื่อง", desc: "ให้บริการดูแลหลังการขาย พร้อม support ตลอด 24 ชม." }
|
||||
];
|
||||
import PageHero from '../components/PageHero.astro';
|
||||
---
|
||||
|
||||
<Base title="เกี่ยวกับเรา | MoreminiMore">
|
||||
<Base title="เกี่ยวกับเรา - MoreminiMore">
|
||||
<Navigation />
|
||||
|
||||
<Hero
|
||||
title="เกี่ยวกับ มอร์มินิมอร์"
|
||||
subtitle="บริษัท มอร์มินิมอร์ จำกัด<br>รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย"
|
||||
|
||||
<PageHero
|
||||
badge="เกี่ยวกับเรา"
|
||||
image="/images/hero/about.jpg"
|
||||
theme="yellow"
|
||||
showCTA={false}
|
||||
variant="centered"
|
||||
size="compact"
|
||||
title="MOREMINIMORE"
|
||||
subtitle="ดิจิทัลเอเจนซี่ที่ช่วยให้ธุรกิจไทยเติบโตด้วยเทคโนโลยีสมัยใหม่"
|
||||
/>
|
||||
|
||||
<!-- About Content -->
|
||||
<section class="section about-section">
|
||||
<section class="about-content-section" style="background: #ffffff; margin-top: -2px; padding: 100px 0;">
|
||||
<div class="container">
|
||||
<div class="about-grid">
|
||||
<div class="about-image">
|
||||
<img src="/images/hero/about-us-hero.jpg" alt="MoreminiMore Team" />
|
||||
</div>
|
||||
<div class="about-content">
|
||||
<span class="section-badge">เราคือใคร</span>
|
||||
<h2 class="section-title">เราคือทีมงานด้านดิจิทัลที่พร้อมเปลี่ยนธุรกิจของคุณ</h2>
|
||||
<div class="about-content reveal">
|
||||
<h2 class="about-title">เราคือทีมที่สร้างสรรค์<br/>โซลูชันดิจิทัล</h2>
|
||||
<p class="about-text">
|
||||
MoreminiMore เป็นทีมงานที่มีประสบการณ์ในการพัฒนาเว็บไซต์และระบบอัตโนมัติมากว่า 5 ปี
|
||||
เราเชื่อว่าเทคโนโลยีดิจิทัลสามารถช่วยเพิ่มยอดขายและลดต้นทุนให้ธุรกิจได้อย่างมีประสิทธิภาพ
|
||||
MoreminiMore ก่อตั้งขึ้นด้วยความมุ่งมั่นในการช่วยเหลือธุรกิจไทยให้เติบโตในยุคดิจิทัล
|
||||
เราเชื่อว่าเทคโนโลยี AI และระบบอัตโนมัติสามารถช่วยเพิ่มประสิทธิภาพและลดต้นทุนได้อย่างมาก
|
||||
</p>
|
||||
<p class="about-text">
|
||||
ทีมงานของเราประกอบด้วยผู้เชี่ยวชาญหลากหลายสาขา ไม่ว่าจะเป็นด้านการพัฒนาเว็บไซต์
|
||||
การตลาดดิจิทัล AI Automation และการให้คำปรึกษาด้านเทคโนโลยี
|
||||
ทีมงานของเราประกอบด้วยผู้เชี่ยวชาญด้านการพัฒนาเว็บไซต์ การตลาดดิจิทัล และ AI
|
||||
ที่พร้อมให้คำปรึกษาและออกแบบโซลูชันที่เหมาะสมกับความต้องการของแต่ละธุรกิจ
|
||||
</p>
|
||||
<div class="about-stats">
|
||||
<div class="stat">
|
||||
<span class="stat-number">50+</span>
|
||||
<span class="stat-label">โปรเจกต์</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-number">40+</span>
|
||||
<span class="stat-label">ลูกค้า</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-number">5+</span>
|
||||
<span class="stat-label">ปีประสบการณ์</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-values reveal">
|
||||
<div class="value-card">
|
||||
<span class="value-number">50+</span>
|
||||
<span class="value-label">โปรเจกต์สำเร็จ</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 class="value-card">
|
||||
<span class="value-number">40+</span>
|
||||
<span class="value-label">ลูกค้าที่ไว้วางใจ</span>
|
||||
</div>
|
||||
<div class="value-card">
|
||||
<span class="value-number">5+</span>
|
||||
<span class="value-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>
|
||||
@@ -132,268 +50,88 @@ const whyChooseUs = [
|
||||
</Base>
|
||||
|
||||
<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;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.about-section {
|
||||
background: var(--color-white);
|
||||
.about-content-section {
|
||||
/* Inline styles handle background and padding */
|
||||
}
|
||||
|
||||
.about-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-columns: 1.5fr 1fr;
|
||||
gap: 80px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.about-image {
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.about-image img {
|
||||
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-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(32px, 5vw, 48px);
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 32px;
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
.about-text {
|
||||
font-size: 16px;
|
||||
color: var(--color-medium-gray);
|
||||
font-size: 18px;
|
||||
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;
|
||||
gap: 48px;
|
||||
margin-top: 40px;
|
||||
padding-top: 40px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.stat {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 32px 20px;
|
||||
background: var(--color-gray-100);
|
||||
border-radius: var(--radius-xl);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
display: block;
|
||||
font-family: var(--font-heading);
|
||||
font-size: 40px;
|
||||
font-weight: 800;
|
||||
.value-number {
|
||||
font-family: var(--font-display);
|
||||
font-size: 48px;
|
||||
font-weight: 900;
|
||||
color: var(--color-primary);
|
||||
line-height: 1;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
.value-label {
|
||||
font-size: 14px;
|
||||
color: var(--color-medium-gray);
|
||||
color: var(--color-gray-600);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.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);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.about-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.services-grid,
|
||||
.why-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.services-grid,
|
||||
.why-grid {
|
||||
grid-template-columns: 1fr;
|
||||
.about-values {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.about-stats {
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
.value-card {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.cta-actions {
|
||||
flex-direction: column;
|
||||
.value-number {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
.value-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,104 +1,96 @@
|
||||
---
|
||||
import Base from '../../layouts/Base.astro';
|
||||
import Navigation from '../../components/Navigation.astro';
|
||||
import Hero from '../../components/Hero.astro';
|
||||
import Footer from '../../components/Footer.astro';
|
||||
import PageHero from '../../components/PageHero.astro';
|
||||
import { getCollection, render } from 'astro:content';
|
||||
|
||||
export function getStaticPaths() {
|
||||
const posts = [
|
||||
{ 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" }
|
||||
];
|
||||
// For SSR mode, use Astro.params directly
|
||||
const { slug } = Astro.params;
|
||||
|
||||
return posts.map(post => ({
|
||||
params: { slug: post.slug },
|
||||
props: { post }
|
||||
}));
|
||||
const allPosts = await getCollection('blog');
|
||||
// Use id for matching since slug might be undefined
|
||||
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 />
|
||||
|
||||
<Hero
|
||||
title={post.title}
|
||||
subtitle="อ่านบทความล่าสุดเกี่ยวกับ AI, Marketing และเทคโนโลยีสำหรับธุรกิจ"
|
||||
badge="บทความ"
|
||||
image={post.image}
|
||||
theme="yellow"
|
||||
showCTA={false}
|
||||
<PageHero
|
||||
badge={post.data.category}
|
||||
title={post.data.title}
|
||||
subtitle={formattedDate}
|
||||
/>
|
||||
|
||||
<!-- 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">
|
||||
<div class="container">
|
||||
<div class="article-layout">
|
||||
<div class="article-grid">
|
||||
<article class="article-content">
|
||||
<div class="article-hero">
|
||||
<img src={post.image} alt={post.title} />
|
||||
</div>
|
||||
<div class="article-body">
|
||||
<p class="article-lead">
|
||||
ในยุคที่ 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>
|
||||
<Content />
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="article-sidebar">
|
||||
<div class="sidebar-widget">
|
||||
<h3>บริการที่เกี่ยวข้อง</h3>
|
||||
<ul class="related-services">
|
||||
<li><a href="/services/ai">AI Automation</a></li>
|
||||
<li><a href="/services/marketing">Marketing Automation</a></li>
|
||||
<li><a href="/services/webdev">พัฒนาเว็บไซต์</a></li>
|
||||
</ul>
|
||||
<!-- About -->
|
||||
<div class="sidebar-card">
|
||||
<h3 class="sidebar-title">เกี่ยวกับ MoreminiMore</h3>
|
||||
<p class="sidebar-text">
|
||||
ดิจิทัลเอเจนซี่ที่ช่วยให้ธุรกิจไทยเติบโตด้วยเทคโนโลยีสมัยใหม่
|
||||
</p>
|
||||
<a href="/about" class="btn btn-dark btn-sm">ดูเพิ่มเติม</a>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-widget">
|
||||
<h3>ติดต่อปรึกษา</h3>
|
||||
<p>สนใจใช้ AI ในธุรกิจของคุณ?</p>
|
||||
<a href="/contact" class="btn btn-primary">ปรึกษาฟรี</a>
|
||||
<!-- Contact -->
|
||||
<div class="sidebar-card">
|
||||
<h3 class="sidebar-title">สนใจบริการ?</h3>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -108,134 +100,206 @@ const { post } = Astro.props;
|
||||
</Base>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
padding: 140px 0 60px;
|
||||
background: var(--color-black);
|
||||
.article-image {
|
||||
padding: 40px 0;
|
||||
background: var(--color-gray-100);
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
color: var(--color-primary);
|
||||
font-size: 14px;
|
||||
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-image img {
|
||||
width: 100%;
|
||||
max-height: 500px;
|
||||
object-fit: cover;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.article-section {
|
||||
background: var(--color-white);
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.article-layout {
|
||||
.article-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 320px;
|
||||
gap: 64px;
|
||||
}
|
||||
|
||||
.article-hero {
|
||||
margin-bottom: 48px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.article-hero img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
grid-template-columns: 1fr 360px;
|
||||
gap: 60px;
|
||||
}
|
||||
|
||||
.article-body {
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.article-lead {
|
||||
font-size: 20px;
|
||||
color: var(--color-medium-gray);
|
||||
font-size: 18px;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 32px;
|
||||
padding-bottom: 32px;
|
||||
border-bottom: 1px solid #eee;
|
||||
color: var(--color-gray-600);
|
||||
}
|
||||
|
||||
.article-body h2 {
|
||||
font-size: 24px;
|
||||
.article-body :global(h2) {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 40px 0 16px;
|
||||
color: var(--color-dark);
|
||||
margin: 40px 0 20px;
|
||||
}
|
||||
|
||||
.article-body p {
|
||||
font-size: 16px;
|
||||
color: var(--color-medium-gray);
|
||||
line-height: 1.8;
|
||||
.article-body :global(h3) {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--color-dark);
|
||||
margin: 32px 0 16px;
|
||||
}
|
||||
|
||||
.article-body :global(p) {
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.sidebar-widget {
|
||||
background: var(--color-light-gray);
|
||||
.sidebar-card {
|
||||
background: var(--color-gray-100);
|
||||
border-radius: 16px;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.sidebar-widget h3 {
|
||||
.sidebar-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--color-dark);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.related-services {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.related-services li {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.related-services a {
|
||||
color: var(--color-medium-gray);
|
||||
.sidebar-text {
|
||||
font-size: 14px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.related-services a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.sidebar-widget p {
|
||||
font-size: 14px;
|
||||
color: var(--color-medium-gray);
|
||||
color: var(--color-gray-600);
|
||||
line-height: 1.6;
|
||||
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) {
|
||||
.article-layout {
|
||||
.article-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.article-sidebar {
|
||||
order: -1;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.article-sidebar {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sidebar-widget {
|
||||
flex: 1;
|
||||
min-width: 280px;
|
||||
.article-body {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,147 +1,58 @@
|
||||
---
|
||||
import Base from '../../layouts/Base.astro';
|
||||
import Navigation from '../../components/Navigation.astro';
|
||||
import Hero from '../../components/Hero.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 = [
|
||||
{
|
||||
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' });
|
||||
}
|
||||
const blogPosts = await getCollection('blog');
|
||||
const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
|
||||
---
|
||||
|
||||
<Base title="บทความ | MoreminiMore">
|
||||
<Base title="บทความ | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
<Navigation />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<Hero
|
||||
title="ความรู้ด้านดิจิทัล"
|
||||
subtitle="อ่านบทความล่าสุดเกี่ยวกับ AI, Marketing และเทคโนโลยีสำหรับธุรกิจ"
|
||||
<PageHero
|
||||
badge="บทความ"
|
||||
image="/images/hero/blog-hero.jpg"
|
||||
theme="yellow"
|
||||
showCTA={false}
|
||||
variant="centered"
|
||||
size="compact"
|
||||
title="บทความ"
|
||||
subtitle="ความรู้ด้านดิจิทัลและเทคนิคใหม่ๆ สำหรับธุรกิจไทย"
|
||||
/>
|
||||
|
||||
<!-- Blog Section -->
|
||||
<section class="section blog-section">
|
||||
<div class="container">
|
||||
<!-- Featured Post -->
|
||||
<div class="featured-post">
|
||||
<a href={`/blog/${blogPosts[0].slug}`} class="featured-card">
|
||||
<!-- Featured Post -->
|
||||
{sortedPosts.length > 0 && (
|
||||
<section class="section featured-section">
|
||||
<div class="container">
|
||||
<a href={`/blog/${sortedPosts[0].id}`} class="featured-card">
|
||||
<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 class="featured-content">
|
||||
<span class="category-badge">{blogPosts[0].category}</span>
|
||||
<h2 class="featured-title">{blogPosts[0].title}</h2>
|
||||
<p class="featured-excerpt">{blogPosts[0].excerpt}</p>
|
||||
<span class="category-badge">{sortedPosts[0].data.category}</span>
|
||||
<h2 class="featured-title">{sortedPosts[0].data.title}</h2>
|
||||
<p class="featured-excerpt">{sortedPosts[0].data.excerpt}</p>
|
||||
<span class="read-more">อ่านต่อ →</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<!-- Blog Grid -->
|
||||
<!-- Blog Grid -->
|
||||
<section class="section blog-section">
|
||||
<div class="container">
|
||||
<div class="blog-grid">
|
||||
{blogPosts.slice(1).map((post) => (
|
||||
<a href={`/blog/${post.slug}`} class="blog-card card">
|
||||
<div class="blog-image">
|
||||
<img src={post.image} alt={post.title} loading="lazy" />
|
||||
</div>
|
||||
<div class="blog-content">
|
||||
<span class="category-badge">{post.category}</span>
|
||||
<h3 class="blog-title">{post.title}</h3>
|
||||
<p class="blog-excerpt">{post.excerpt}</p>
|
||||
<span class="blog-date">{formatDate(post.date)}</span>
|
||||
</div>
|
||||
</a>
|
||||
{sortedPosts.slice(1).map((post, i) => (
|
||||
<BlogCard
|
||||
title={post.data.title}
|
||||
excerpt={post.data.excerpt}
|
||||
image={post.data.image}
|
||||
date={post.data.date}
|
||||
slug={post.id}
|
||||
category={post.data.category}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
@@ -162,182 +73,99 @@ function formatDate(dateStr: string) {
|
||||
</Base>
|
||||
|
||||
<style>
|
||||
|
||||
.blog-section {
|
||||
.featured-section {
|
||||
background: var(--color-white);
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.featured-post {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.featured-card {
|
||||
display: grid;
|
||||
grid-template-columns: 1.5fr 1fr;
|
||||
gap: 48px;
|
||||
background: var(--color-light-gray);
|
||||
gap: 0;
|
||||
background: var(--color-dark);
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
.featured-card:hover { transform: scale(1.01); }
|
||||
.featured-image {
|
||||
aspect-ratio: 16/10;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.featured-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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 {
|
||||
padding: 48px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.category-badge {
|
||||
display: inline-block;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
padding: 6px 16px;
|
||||
border-radius: 20px;
|
||||
padding: 6px 14px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
align-self: flex-start;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.featured-title {
|
||||
font-size: 32px;
|
||||
font-size: clamp(24px, 3vw, 32px);
|
||||
font-weight: 700;
|
||||
color: var(--color-white);
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.featured-excerpt {
|
||||
font-size: 16px;
|
||||
color: var(--color-medium-gray);
|
||||
font-size: 15px;
|
||||
color: rgba(255,255,255,0.6);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.read-more {
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.blog-section { background: var(--color-gray-100); }
|
||||
.blog-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.blog-card {
|
||||
display: flex;
|
||||
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;
|
||||
}
|
||||
|
||||
.section-primary { background: var(--color-primary); }
|
||||
.cta-content { text-align: center; }
|
||||
.cta-title {
|
||||
font-size: clamp(28px, 4vw, 40px);
|
||||
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;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
padding: 18px 40px;
|
||||
font-size: 16px;
|
||||
max-width: 500px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.btn-lg { padding: 16px 36px; font-size: 16px; }
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.featured-card {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.blog-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.featured-card { grid-template-columns: 1fr; }
|
||||
.featured-image { aspect-ratio: 16/7; }
|
||||
.blog-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.blog-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.featured-content {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.featured-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
.blog-grid { grid-template-columns: 1fr; }
|
||||
.featured-content { padding: 32px; }
|
||||
}
|
||||
</style>
|
||||
@@ -1,22 +1,17 @@
|
||||
---
|
||||
import Base from '../layouts/Base.astro';
|
||||
import Navigation from '../components/Navigation.astro';
|
||||
import Hero from '../components/Hero.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import PageHero from '../components/PageHero.astro';
|
||||
---
|
||||
|
||||
<Base title="ติดต่อเรา | MoreminiMore">
|
||||
<Base title="ติดต่อเรา | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
<Navigation />
|
||||
|
||||
<Hero
|
||||
title="พูดคุยกับเรา วันนี้เลย!"
|
||||
subtitle="พร้อมให้คำปรึกษาและช่วยเหลือคุณ<br>ปรึกษาฟรี ไม่มีค่าใช้จ่าย"
|
||||
<PageHero
|
||||
badge="ติดต่อเรา"
|
||||
image="/images/hero/contact.jpg"
|
||||
theme="yellow"
|
||||
showCTA={false}
|
||||
variant="text-only"
|
||||
size="compact"
|
||||
title="ติดต่อเรา"
|
||||
subtitle="พร้อมให้คำปรึกษาและช่วยเหลือคุณ ปรึกษาฟรี ไม่มีค่าใช้จ่าย"
|
||||
/>
|
||||
|
||||
<!-- Contact Section -->
|
||||
@@ -27,7 +22,11 @@ import Footer from '../components/Footer.astro';
|
||||
<h2 class="info-title">ข้อมูลติดต่อ</h2>
|
||||
|
||||
<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">
|
||||
<h3>โทรศัพท์</h3>
|
||||
<a href="tel:0809955945">080-995-5945</a>
|
||||
@@ -35,7 +34,12 @@ import Footer from '../components/Footer.astro';
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<h3>อีเมล</h3>
|
||||
<a href="mailto:contact@moreminimore.com">contact@moreminimore.com</a>
|
||||
@@ -43,7 +47,11 @@ import Footer from '../components/Footer.astro';
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<h3>LINE</h3>
|
||||
<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 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">
|
||||
<h3>ที่อยู่</h3>
|
||||
<p>53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว สมุทรสาคร 74120</p>
|
||||
@@ -59,7 +72,12 @@ import Footer from '../components/Footer.astro';
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<h3>เวลาทำการ</h3>
|
||||
<p>จันทร์ - ศุกร์ 09:00 - 18:00 น.</p>
|
||||
@@ -70,13 +88,13 @@ import Footer from '../components/Footer.astro';
|
||||
<h3>ติดตามเรา</h3>
|
||||
<div class="social-links">
|
||||
<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 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 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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -84,9 +102,7 @@ import Footer from '../components/Footer.astro';
|
||||
|
||||
<div class="contact-form-wrapper">
|
||||
<form class="contact-form" id="contact-form">
|
||||
<div class="form-header">
|
||||
<h2 class="form-title">ส่งข้อความ</h2>
|
||||
</div>
|
||||
<h2 class="form-title">ส่งข้อความ</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">ชื่อ-นามสกุล</label>
|
||||
@@ -122,8 +138,8 @@ import Footer from '../components/Footer.astro';
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-submit">
|
||||
ส่งข้อความ
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
@@ -140,10 +156,8 @@ import Footer from '../components/Footer.astro';
|
||||
e.preventDefault();
|
||||
const form = e.target as HTMLFormElement;
|
||||
const submitBtn = form.querySelector('.btn-submit') as HTMLButtonElement;
|
||||
|
||||
submitBtn.textContent = 'กำลังส่ง...';
|
||||
submitBtn.disabled = true;
|
||||
|
||||
setTimeout(() => {
|
||||
alert('ขอบคุณที่ติดต่อเรา! เราจะติดต่อกลับเร็วๆ นี้');
|
||||
form.reset();
|
||||
@@ -154,224 +168,149 @@ import Footer from '../components/Footer.astro';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
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-section { background: var(--color-white); }
|
||||
.contact-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
gap: 64px;
|
||||
grid-template-columns: 1fr 1.2fr;
|
||||
gap: 80px;
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 32px;
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 28px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
font-size: 28px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--color-light-gray);
|
||||
background: var(--color-primary);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.contact-icon svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
color: var(--color-white);
|
||||
}
|
||||
.contact-detail h3 {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--color-medium-gray);
|
||||
margin-bottom: 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.contact-detail a,
|
||||
.contact-detail p {
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.contact-detail a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.contact-detail a:hover { color: var(--color-primary); }
|
||||
.social-section {
|
||||
margin-top: 40px;
|
||||
padding-top: 40px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.social-section h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.social-links { display: flex; gap: 12px; }
|
||||
.social-link {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--color-light-gray);
|
||||
border-radius: 12px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: var(--color-gray-100);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
background: var(--color-primary);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.social-link img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
grid-column: span 2;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.social-link svg { width: 20px; height: 20px; color: var(--color-black); }
|
||||
.social-link:hover svg { color: var(--color-white); }
|
||||
|
||||
.contact-form-wrapper {
|
||||
background: var(--color-light-gray);
|
||||
background: var(--color-dark);
|
||||
border-radius: 24px;
|
||||
padding: 48px;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 32px;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-group-full {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.form-group-full { grid-column: span 2; }
|
||||
.form-group label {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: var(--color-black);
|
||||
color: rgba(255,255,255,0.7);
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
padding: 16px 20px;
|
||||
border: 2px solid transparent;
|
||||
padding: 14px 18px;
|
||||
border: 2px solid rgba(255,255,255,0.1);
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
font-family: var(--font-body);
|
||||
background: var(--color-white);
|
||||
background: rgba(255,255,255,0.05);
|
||||
color: var(--color-white);
|
||||
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 select:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
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 textarea {
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.form-group select option { background: var(--color-dark); color: var(--color-white); }
|
||||
.form-group textarea { resize: vertical; min-height: 120px; }
|
||||
.btn-submit {
|
||||
grid-column: span 2;
|
||||
justify-self: start;
|
||||
padding: 18px 40px;
|
||||
font-size: 16px;
|
||||
padding: 16px 32px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.btn-submit svg { width: 18px; height: 18px; }
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.contact-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 48px;
|
||||
}
|
||||
.contact-grid { grid-template-columns: 1fr; gap: 48px; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.contact-form {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.form-group-full,
|
||||
.btn-submit {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
.contact-form-wrapper {
|
||||
padding: 32px 24px;
|
||||
}
|
||||
.contact-form { grid-template-columns: 1fr; }
|
||||
.form-group-full, .btn-submit { grid-column: span 1; }
|
||||
.contact-form-wrapper { padding: 32px 24px; }
|
||||
}
|
||||
</style>
|
||||
@@ -1,107 +1,66 @@
|
||||
---
|
||||
import Base from '../layouts/Base.astro';
|
||||
import Navigation from '../components/Navigation.astro';
|
||||
import Hero from '../components/Hero.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import PageHero from '../components/PageHero.astro';
|
||||
|
||||
const faqItems = [
|
||||
const faqData = [
|
||||
{
|
||||
category: "บริการ",
|
||||
questions: [
|
||||
{
|
||||
q: "MoreminiMore ให้บริการอะไรบ้าง?",
|
||||
a: "เราให้บริการ 4 ประเภทหลัก: พัฒนาเว็บไซต์, Marketing Automation, AI Automation และ Tech Consult สำหรับธุรกิจไทย"
|
||||
},
|
||||
{
|
||||
q: "สามารถสั่งทำเว็บไซต์เฉพาะประเภทได้ไหม?",
|
||||
a: "ได้ เราสามารถพัฒนาเว็บไซต์ได้ทุกประเภท ไม่ว่าจะเป็นเว็บบริษัท เว็บขายของ เว็บ Landing Page หรือระบบ Web Application"
|
||||
},
|
||||
{
|
||||
q: "AI Chatbot สามารถทำอะไรได้บ้าง?",
|
||||
a: "AI Chatbot ของเราสามารถตอบคำถามลูกค้า รับออร์เดอร์ นัดหมาย และเชื่อมต่อกับระบบ CRM หรือร้านค้าออนไลน์ได้"
|
||||
}
|
||||
icon: "🎯",
|
||||
items: [
|
||||
{ q: "บริการของเรามีอะไรบ้าง?", a: "เราให้บริการ รับทำเว็บไซต์, Marketing Automation, AI Automation และ Technology Consult สำหรับธุรกิจไทย" },
|
||||
{ q: "สามารถปรับแต่งงานตามความต้องการได้ไหม?", a: "ใช่! เราออกแบบโซลูชันที่เหมาะกับความต้องการเฉพาะของแต่ละธุรกิจ" },
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "ราคา",
|
||||
questions: [
|
||||
{
|
||||
q: "ราคาเริ่มต้นของการทำเว็บไซต์เท่าไหร่?",
|
||||
a: "ราคาเริ่มต้นอยู่ที่ 15,000 บาท ขึ้นอยู่กับความซับซ้อนและฟีเจอร์ที่ต้องการ เราจะประเมินและเสนอราคาหลังจากการปรึกษาฟรี"
|
||||
},
|
||||
{
|
||||
q: "มี包月 หรือรายปีไหม?",
|
||||
a: "มี เรามีแพ็คเกจรายเดือนสำหรับบริการดูแลเว็บไซต์และ Marketing Automation ที่เริ่มต้นที่ 2,500 บาท/เดือน"
|
||||
},
|
||||
{
|
||||
q: "ชำระเงินแบบไหนได้บ้าง?",
|
||||
a: "เรารองรับการชำระเงินผ่าน PromptPay และโอนเงินผ่านธนาคาร สำหรับโปรเจกต์ใหญ่สามารถผ่อนชำระได้"
|
||||
}
|
||||
icon: "💰",
|
||||
items: [
|
||||
{ q: "ราคาเริ่มต้นเท่าไหร่?", a: "ราคาขึ้นอยู่กับความต้องการและขอบเขตของโปรเจกต์ ติดต่อเราเพื่อรับใบเสนอราคาฟรี" },
|
||||
{ q: "มี package สำเร็จรูปไหม?", a: "มี เรามี package สำหรับลูกค้าที่ต้องการโซลูชันที่ครบถ้วนและราคาคุ้มค่า" },
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "ระยะเวลา",
|
||||
questions: [
|
||||
{
|
||||
q: "ใช้เวลาสร้างเว็บไซต์นานแค่ไหน?",
|
||||
a: "เว็บไซต์ทั่วไปใช้เวลา 2-4 สัปดาห์ ระบบที่ซับซ้อนอาจใช้เวลา 1-2 เดือน ขึ้นอยู่กับความต้องการและขนาดของโปรเจกต์"
|
||||
},
|
||||
{
|
||||
q: "เริ่มต้นทำงานได้เร็วแค่ไหน?",
|
||||
a: "หลังจากตกลงรายละเอียดและชำระเงินมัดจำแล้ว เราสามารถเริ่มงานได้ภายใน 3-5 วันทำการ"
|
||||
}
|
||||
icon: "⏱️",
|
||||
items: [
|
||||
{ q: "ใช้เวลาพัฒนานานแค่ไหน?", a: "ขึ้นอยู่กับความซับซ้อนของโปรเจกต์ เว็บไซต์มาตรฐาน 2-4 สัปดาห์, ระบบซับซ้อนอาจใช้ 1-3 เดือน" },
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "การสนับสนุน",
|
||||
questions: [
|
||||
{
|
||||
q: "หลังสร้างเว็บเสร็จแล้ว มีบริการดูแลไหม?",
|
||||
a: "มี เรามีทีมดูแลที่พร้อมช่วยเหลือทั้งการแก้ไขปัญหา อัปเดตเนื้อหา และปรับปรุงระบบตามต้องการ"
|
||||
},
|
||||
{
|
||||
q: "ถ้าเว็บมีปัญหา ติดต่อได้อย่างไร?",
|
||||
a: "สามารถติดต่อเราผ่าน LINE, โทรศัพท์ 080-995-5945 หรืออีเมล contact@moreminimore.com เรามีทีมพร้อมรับมือกับปัญหาฉุกเฉิน"
|
||||
},
|
||||
{
|
||||
q: "มีการรับประกันผลงานไหม?",
|
||||
a: "เรารับประกันงาน 30 วันหลังส่งมอบ หากมีปัญหาจากการทำงานของเรา เราจะแก้ไขให้ฟรี"
|
||||
}
|
||||
category: "ทั่วไป",
|
||||
icon: "💬",
|
||||
items: [
|
||||
{ q: "มีการรับประกันผลงานไหม?", a: "เรารับประกันคุณภาพ หากไม่พอใจเราพร้อมแก้ไขจนกว่าจะถูกใจ" },
|
||||
{ q: "หลังส่งมอบงานแล้วมี after service ไหม?", a: "มี เราให้บริการดูแลและ support หลังการขายตลอด 24 ชม." },
|
||||
]
|
||||
}
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<Base title="คำถามที่พบบ่อย | MoreminiMore">
|
||||
<Base title="คำถามที่พบบ่อย | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
<Navigation />
|
||||
|
||||
<Hero
|
||||
<PageHero
|
||||
badge="FAQ"
|
||||
title="คำถามที่พบบ่อย"
|
||||
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">
|
||||
{faqItems.map((category, catIndex) => (
|
||||
<section class="faq-category">
|
||||
{faqData.map(cat => (
|
||||
<div class="faq-category">
|
||||
<h2 class="category-title">
|
||||
<span class="category-icon">
|
||||
{category.category === "บริการ" ? "🎯" :
|
||||
category.category === "ราคา" ? "💰" :
|
||||
category.category === "ระยะเวลา" ? "⏱️" : "💬"}
|
||||
</span>
|
||||
{category.category}
|
||||
<span class="category-icon">{cat.icon}</span>
|
||||
{cat.category}
|
||||
</h2>
|
||||
<div class="faq-list">
|
||||
{category.questions.map((item, qIndex) => (
|
||||
<div class="faq-item" data-item={`${catIndex}-${qIndex}`}>
|
||||
{cat.items.map((item, qIndex) => (
|
||||
<div class="faq-item" data-item={qIndex}>
|
||||
<button class="faq-question" aria-expanded="false">
|
||||
<span class="question-text">{item.q}</span>
|
||||
<span class="faq-icon">+</span>
|
||||
@@ -112,20 +71,25 @@ const faqItems = [
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</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>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</Base>
|
||||
@@ -133,32 +97,25 @@ const faqItems = [
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const faqItems = document.querySelectorAll('.faq-item');
|
||||
|
||||
faqItems.forEach(item => {
|
||||
const question = item.querySelector('.faq-question');
|
||||
const answer = item.querySelector('.faq-answer');
|
||||
const icon = item.querySelector('.faq-icon');
|
||||
|
||||
question?.addEventListener('click', () => {
|
||||
const isOpen = item.classList.contains('open');
|
||||
|
||||
// Close all
|
||||
faqItems.forEach(faq => {
|
||||
faq.classList.remove('open');
|
||||
const faqAnswer = faq.querySelector('.faq-answer');
|
||||
const faqIcon = faq.querySelector('.faq-icon');
|
||||
if (faqAnswer) faqAnswer.style.maxHeight = '0';
|
||||
if (faqIcon) faqIcon.textContent = '+';
|
||||
const faqQuestion = faq.querySelector('.faq-question');
|
||||
if (faqQuestion) faqQuestion.setAttribute('aria-expanded', 'false');
|
||||
const fa = faq.querySelector('.faq-answer') as HTMLElement;
|
||||
const fi = faq.querySelector('.faq-icon');
|
||||
if (fa) fa.style.maxHeight = '0';
|
||||
if (fi) fi.textContent = '+';
|
||||
(faq.querySelector('.faq-question') as HTMLElement)?.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
|
||||
// Open clicked if it was closed
|
||||
if (!isOpen) {
|
||||
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 (question) question.setAttribute('aria-expanded', 'true');
|
||||
if (question) (question as HTMLElement).setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -166,53 +123,9 @@ const faqItems = [
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.faq-page {
|
||||
padding: 120px 0 80px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.faq-section { background: var(--color-white); }
|
||||
.faq-content { max-width: 800px; margin: 0 auto; }
|
||||
.faq-category { margin-bottom: 60px; }
|
||||
.category-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -224,34 +137,17 @@ const faqItems = [
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.faq-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.category-icon { font-size: 28px; }
|
||||
.faq-list { display: flex; flex-direction: column; gap: 12px; }
|
||||
.faq-item {
|
||||
background: var(--color-white);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #eee;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.faq-item:hover {
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.faq-item.open {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.faq-item:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
|
||||
.faq-item.open { border-color: var(--color-primary); }
|
||||
.faq-question {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -267,25 +163,14 @@ const faqItems = [
|
||||
font-weight: 600;
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.question-text {
|
||||
flex: 1;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.question-text { flex: 1; padding-right: 16px; }
|
||||
.faq-icon {
|
||||
font-size: 24px;
|
||||
color: var(--color-primary);
|
||||
font-weight: 300;
|
||||
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 {
|
||||
padding: 0 24px 24px;
|
||||
font-size: 15px;
|
||||
@@ -293,49 +178,32 @@ const faqItems = [
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.faq-cta {
|
||||
text-align: center;
|
||||
padding: 60px;
|
||||
background: var(--color-light-gray);
|
||||
border-radius: 20px;
|
||||
margin-top: 60px;
|
||||
.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);
|
||||
}
|
||||
|
||||
.faq-cta h3 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
.cta-desc {
|
||||
font-size: 18px;
|
||||
color: rgba(0,0,0,0.7);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.faq-cta p {
|
||||
font-size: 16px;
|
||||
color: var(--color-medium-gray);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
.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; }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.faq-question {
|
||||
padding: 16px 20px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.faq-answer p {
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
|
||||
.faq-cta {
|
||||
padding: 40px 24px;
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
.faq-question { padding: 16px 20px; font-size: 15px; }
|
||||
.faq-answer p { padding: 0 20px 20px; }
|
||||
.cta-actions { flex-direction: column; }
|
||||
.btn-lg { width: 100%; justify-content: center; }
|
||||
}
|
||||
</style>
|
||||
@@ -1,139 +1,157 @@
|
||||
---
|
||||
import Base from '../layouts/Base.astro';
|
||||
import Navigation from '../components/Navigation.astro';
|
||||
import Hero from '../components/Hero.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 = [
|
||||
{ number: "50+", label: "โปรเจกต์" },
|
||||
{ number: "40+", label: "ลูกค้า" },
|
||||
{ number: "5+", label: "ปีประสบการณ์" },
|
||||
{ number: "100%", label: "ความพึงพอใจ" }
|
||||
const blogPosts = await getCollection('blog');
|
||||
const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
|
||||
|
||||
const services = [
|
||||
{ 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 />
|
||||
|
||||
<Hero
|
||||
title="เปลี่ยนธุรกิจของคุณ ด้วย AI และเทคโนโลยีสมัยใหม่"
|
||||
subtitle="รับทำเว็บไซต์ SEO AI Chatbot สำหรับธุรกิจไทย<br>เพิ่มยอดขาย ลดต้นทุน ด้วยเทคโนโลยีล้ำสมัย"
|
||||
badge="ดิจิทัลเอเจนซี่ในประเทศไทย"
|
||||
image="/images/hero/hero.jpg"
|
||||
theme="yellow"
|
||||
showCTA={true}
|
||||
size="full"
|
||||
variant="split"
|
||||
/>
|
||||
<!-- KINETIC HERO -->
|
||||
<Hero />
|
||||
|
||||
<!-- Services Section -->
|
||||
<section class="section services">
|
||||
<!-- SERVICES SECTION -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">บริการของเรา</span>
|
||||
<h2 class="section-title">เราให้บริการอะไรบ้าง</h2>
|
||||
<p class="section-desc">ครบจบทุก need ด้านดิจิทัลสำหรับธุรกิจของคุณ</p>
|
||||
<!-- Title with Tilt Effect -->
|
||||
<div class="services-title-wrapper" id="services-title">
|
||||
<div class="services-title-inner">
|
||||
<span class="badge badge-dark">บริการของเรา</span>
|
||||
<h2 class="services-title">
|
||||
ครบทุกโซลูชั่นด้านดิจิตอล
|
||||
</h2>
|
||||
<p class="section-desc reveal">
|
||||
ให้เราดูแลทุกอย่าง ในขณะที่คุณโฟกัสที่ธุรกิจของคุณ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="services-grid">
|
||||
{[
|
||||
{ title: "พัฒนาเว็บไซต์", desc: "สร้างเว็บไซต์ที่ทันสมัย รวดเร็ว และตอบสนองความต้องการ", icon: "🌐", href: "/services/webdev" },
|
||||
{ title: "Marketing Automation", desc: "Automate การตลาดเพื่อเพิ่มประสิทธิภาพและลดต้นทุน", icon: "📈", href: "/services/marketing" },
|
||||
{ title: "AI Automation", desc: "นำ AI มาใช้เพื่อเพิ่มยอดขายและปรับปรุงการให้บริการ", icon: "🤖", href: "/services/ai" },
|
||||
{ title: "Tech Consult", desc: "ให้คำปรึกษาด้านเทคโนโลยีเพื่อธุรกิจของคุณ", icon: "💡", href: "/services/consult" }
|
||||
].map((s, i) => (
|
||||
<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>
|
||||
<h3 class="service-title">{s.title}</h3>
|
||||
<p class="service-desc">{s.desc}</p>
|
||||
<span class="service-arrow">→</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stats Section -->
|
||||
<section class="section section-accent 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>
|
||||
{services.map((service, i) => (
|
||||
<div class="reveal" style={`animation-delay: ${i * 0.1}s`}>
|
||||
<ServiceCard {...service} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="section-cta reveal">
|
||||
<a href="/services" class="btn btn-dark 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>
|
||||
</section>
|
||||
|
||||
<!-- Portfolio Section -->
|
||||
<section class="section portfolio-preview">
|
||||
<!-- PORTFOLIO SECTION -->
|
||||
<section class="section section-dark section-gradient-top">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">ผลงาน</span>
|
||||
<h2 class="section-title">โปรเจกต์ล่าสุด</h2>
|
||||
<p class="section-desc">ผลงานที่เราภาคภูมิใจ</p>
|
||||
<span class="badge">ผลงานของเรา</span>
|
||||
<h2 class="section-title text-white reveal">
|
||||
โปรเจกต์ที่เราภาคภูมิใจ
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-grid">
|
||||
{[
|
||||
{ name: "Lungfinler", cat: "เว็บไซต์", img: "/images/portfolio/lungfinler.png", url: "https://lungfinler.com" },
|
||||
{ name: "Jet Industries", cat: "เว็บไซต์", img: "/images/portfolio/jetindustries.png", url: "https://jetindustries.co.th" },
|
||||
{ name: "Lawyernoom", cat: "เว็บไซต์", img: "/images/portfolio/lawyernoom.png", url: "https://lawyernoom.com" },
|
||||
{ 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">
|
||||
<span class="portfolio-category">{p.cat}</span>
|
||||
<h3 class="portfolio-name">{p.name}</h3>
|
||||
{portfolioItems.slice(0, 6).map((item, i) => (
|
||||
<a href={item.url} target="_blank" rel="noopener" class="portfolio-card reveal" style={`animation-delay: ${i * 0.1}s`}>
|
||||
<div class="portfolio-image">
|
||||
<img src={item.thumbnail} alt={item.name} loading="lazy" />
|
||||
<div class="portfolio-overlay">
|
||||
<span class="portfolio-visit">เยี่ยมชมเว็บไซต์</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portfolio-content">
|
||||
<span class="portfolio-category">{item.category_label}</span>
|
||||
<h3 class="portfolio-name">{item.name}</h3>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<!-- Blog Section -->
|
||||
<section class="section section-light blog-preview">
|
||||
<!-- BLOG SECTION -->
|
||||
<section class="section section-gradient-bottom">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">บทความ</span>
|
||||
<h2 class="section-title">ความรู้ด้านดิจิทัล</h2>
|
||||
<p class="section-desc">อ่านบทความล่าสุดจากเรา</p>
|
||||
<span class="badge badge-dark">บทความ</span>
|
||||
<h2 class="section-title reveal">
|
||||
ความรู้ด้านดิจิทัล
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="blog-grid">
|
||||
{[
|
||||
{ title: "5 วิธี AI เพิ่มยอดขาย", img: "/images/blog/5-ways-ai-increase-sales.jpg", slug: "5-ways-ai-increase-sales" },
|
||||
{ title: "AI Content ที่ Google รัก", img: "/images/blog/ai-content-google-love.jpg", slug: "ai-content-google-love" },
|
||||
{ title: "Digital Transformation Guide", img: "/images/blog/digital-transformation.jpg", slug: "digital-transformation-guide" }
|
||||
].map((post) => (
|
||||
<a href={`/blog/${post.slug}`} class="blog-card card">
|
||||
<div class="blog-image"><img src={post.img} alt={post.title} /></div>
|
||||
{sortedPosts.slice(0, 3).map((post, i) => (
|
||||
<a href={`/blog/${post.slug}`} class="blog-card reveal" style={`animation-delay: ${i * 0.1}s`}>
|
||||
<div class="blog-image">
|
||||
<img src={post.data.image} alt={post.data.title} loading="lazy" />
|
||||
</div>
|
||||
<div class="blog-content">
|
||||
<h3 class="blog-title">{post.title}</h3>
|
||||
<span class="blog-readmore">อ่านต่อ →</span>
|
||||
<span class="blog-category">{post.data.category}</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>
|
||||
</a>
|
||||
))}
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="section section-primary cta-section">
|
||||
<!-- CTA SECTION -->
|
||||
<section class="section section-primary">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<h2 class="cta-title">พร้อมเริ่มโปรเจกต์ของคุณ?</h2>
|
||||
<p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบเว็บไซต์ที่เหมาะกับธุรกิจของคุณ</p>
|
||||
<div class="cta-content reveal">
|
||||
<h2 class="cta-title">
|
||||
<span class="title-word">พร้อมเปลี่ยน</span>
|
||||
<span class="title-word">ธุรกิจของคุณ?</span>
|
||||
</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>
|
||||
<a href="/contact" class="btn btn-dark 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>
|
||||
<a href="tel:0809955945" class="btn btn-outline-dark btn-lg">
|
||||
080-995-5945
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -143,48 +161,397 @@ const stats = [
|
||||
</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; 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; }
|
||||
.service-card { padding: 40px 32px; display: flex; flex-direction: column; cursor: pointer; }
|
||||
.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; }
|
||||
.icon-emoji { font-size: 28px; }
|
||||
.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; }
|
||||
.service-card:hover .service-arrow { transform: translateX(8px); }
|
||||
.section-accent { background: var(--color-accent); color: var(--color-white); }
|
||||
.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: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 2px; }
|
||||
.portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 48px; }
|
||||
.portfolio-card { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; }
|
||||
.portfolio-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
|
||||
.portfolio-card:hover img { transform: scale(1.1); }
|
||||
.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-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; }
|
||||
.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: 12px; flex-grow: 1; }
|
||||
.blog-readmore { color: var(--color-accent); font-weight: 500; font-size: 14px; }
|
||||
.cta-content { text-align: center; max-width: 800px; margin: 0 auto; }
|
||||
.cta-title { font-size: clamp(32px, 5vw, 56px); font-weight: 800; margin-bottom: 20px; }
|
||||
.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) { .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; } }
|
||||
@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; } }
|
||||
</style>
|
||||
/* ============================================
|
||||
SERVICES TITLE WITH TILT EFFECT
|
||||
============================================ */
|
||||
|
||||
.services-title-wrapper {
|
||||
perspective: 1000px;
|
||||
margin-bottom: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.services-title-inner {
|
||||
transition: transform 0.1s ease-out;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.services-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(36px, 6vw, 64px);
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
margin: 24px 0;
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
SECTION HEADER
|
||||
============================================ */
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(32px, 5vw, 56px);
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
margin: 24px 0;
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
.text-white {
|
||||
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>
|
||||
|
||||
<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>
|
||||
@@ -1,134 +1,28 @@
|
||||
---
|
||||
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 portfolioItems = [
|
||||
{
|
||||
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: "ความพึงพอใจ" }
|
||||
];
|
||||
import PageHero from '../components/PageHero.astro';
|
||||
import { portfolioItems } from '../data/portfolio';
|
||||
---
|
||||
|
||||
<Base title="ผลงาน | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
<Navigation />
|
||||
|
||||
<Hero
|
||||
<PageHero
|
||||
badge="ผลงาน"
|
||||
title="ผลงานของเรา"
|
||||
subtitle="รวมผลงานพัฒนาเว็บไซต์และโปรเจกต์ที่เราภาคภูมิใจ"
|
||||
badge="พอร์ตโฟลิโอ"
|
||||
image="/images/hero/hero.jpg"
|
||||
theme="yellow"
|
||||
showCTA={false}
|
||||
variant="text-only"
|
||||
size="compact"
|
||||
/>
|
||||
|
||||
<!-- Filter Section -->
|
||||
<section class="filter-section">
|
||||
<section class="filter-section" style="background: #1a1a2e; margin-top: -1px;">
|
||||
<div class="container">
|
||||
<div class="filter-buttons" id="category-filters">
|
||||
{categories.map((cat) => (
|
||||
<button
|
||||
class="filter-btn"
|
||||
data-category={cat.id}
|
||||
>
|
||||
{cat.name}
|
||||
</button>
|
||||
))}
|
||||
<button class="filter-btn active" data-category="all">ทั้งหมด</button>
|
||||
<button class="filter-btn" data-category="webdev">พัฒนาเว็บไซต์</button>
|
||||
<button class="filter-btn" data-category="ecommerce">อีคอมเมิร์ซ</button>
|
||||
<button class="filter-btn" data-category="marketing">ที่ปรึกษาการตลาด</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -141,26 +35,23 @@ const stats = [
|
||||
<article
|
||||
class="portfolio-card"
|
||||
data-category={item.category}
|
||||
style={`animation-delay: ${index * 0.05}s`}
|
||||
style={`--delay: ${index * 0.05}s`}
|
||||
>
|
||||
<div class="portfolio-image">
|
||||
<img src={item.thumbnail} alt={item.name} loading="lazy" />
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
</article>
|
||||
))}
|
||||
@@ -168,29 +59,15 @@ const stats = [
|
||||
</div>
|
||||
</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 -->
|
||||
<section class="section section-primary cta-section">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<h2 class="cta-title">อยากได้เว็บไซต์แบบนี้บ้าง?</h2>
|
||||
<p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบเว็บไซต์ที่เหมาะกับธุรกิจของคุณ</p>
|
||||
<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>
|
||||
<a href="tel:0809955945" class="btn btn-outline-dark btn-lg">080-995-5945</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -204,8 +81,6 @@ const stats = [
|
||||
const filterBtns = document.querySelectorAll('.filter-btn');
|
||||
const portfolioCards = document.querySelectorAll('.portfolio-card');
|
||||
|
||||
filterBtns[0]?.classList.add('active');
|
||||
|
||||
filterBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const category = btn.getAttribute('data-category');
|
||||
@@ -227,310 +102,162 @@ const stats = [
|
||||
</script>
|
||||
|
||||
<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 {
|
||||
background: var(--color-black);
|
||||
padding: 24px 0;
|
||||
background: var(--color-dark);
|
||||
padding: 20px 0;
|
||||
position: sticky;
|
||||
top: 80px;
|
||||
z-index: 100;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
z-index: 1;
|
||||
margin-top: -1px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.filter-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #9ca3af;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255,255,255,0.05);
|
||||
color: rgba(255,255,255,0.6);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
padding: 10px 24px;
|
||||
border-radius: 30px;
|
||||
border-radius: 24px;
|
||||
font-family: var(--font-heading);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: var(--color-white);
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.filter-btn.active {
|
||||
background: var(--color-primary);
|
||||
color: #000;
|
||||
color: var(--color-black);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.portfolio-section {
|
||||
background: var(--color-black);
|
||||
padding-top: 60px;
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.portfolio-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.portfolio-card {
|
||||
background: var(--color-dark-gray);
|
||||
border-radius: 16px;
|
||||
background: rgba(255,255,255,0.02);
|
||||
border-radius: 20px;
|
||||
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 {
|
||||
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 {
|
||||
position: relative;
|
||||
aspect-ratio: 4/3;
|
||||
aspect-ratio: 16/10;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.portfolio-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.portfolio-card:hover .portfolio-image img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.portfolio-card:hover .portfolio-image img { transform: scale(1.08); }
|
||||
.portfolio-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(254, 212, 0, 0.9);
|
||||
background: rgba(254, 212, 0, 0.95);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
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 {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
background: var(--color-black);
|
||||
color: var(--color-primary);
|
||||
padding: 12px 24px;
|
||||
color: var(--color-white);
|
||||
padding: 14px 28px;
|
||||
border-radius: 30px;
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
transition: transform 0.2s;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.visit-btn:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.portfolio-content {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.visit-btn:hover { transform: scale(1.05); }
|
||||
.visit-btn svg { width: 18px; height: 18px; }
|
||||
.portfolio-content { padding: 28px; }
|
||||
.portfolio-category {
|
||||
display: inline-block;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.portfolio-name {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--color-white);
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.portfolio-desc {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
color: rgba(255,255,255,0.5);
|
||||
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 {
|
||||
font-size: clamp(32px, 5vw, 48px);
|
||||
font-size: clamp(28px, 4vw, 42px);
|
||||
font-weight: 800;
|
||||
margin-bottom: 16px;
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.cta-desc {
|
||||
font-size: 18px;
|
||||
margin-bottom: 40px;
|
||||
opacity: 0.8;
|
||||
color: rgba(0,0,0,0.7);
|
||||
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 {
|
||||
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);
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.portfolio-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 56px;
|
||||
}
|
||||
.portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.portfolio-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.filter-buttons {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.cta-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
.portfolio-grid { grid-template-columns: 1fr; }
|
||||
.filter-buttons { gap: 8px; }
|
||||
.filter-btn { padding: 8px 16px; font-size: 13px; }
|
||||
.cta-actions { flex-direction: column; }
|
||||
.btn-lg { width: 100%; justify-content: center; }
|
||||
}
|
||||
</style>
|
||||
@@ -1,266 +1,93 @@
|
||||
---
|
||||
import Base from '../layouts/Base.astro';
|
||||
import Navigation from '../components/Navigation.astro';
|
||||
import Hero from '../components/Hero.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import PageHero from '../components/PageHero.astro';
|
||||
---
|
||||
|
||||
<Base title="นโยบายความเป็นส่วนตัว | MoreminiMore">
|
||||
<Base title="นโยบายความเป็นส่วนตัว | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
<Navigation />
|
||||
|
||||
<Hero
|
||||
<PageHero
|
||||
badge="กฎหมาย"
|
||||
title="นโยบายความเป็นส่วนตัว"
|
||||
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">
|
||||
<header class="legal-header">
|
||||
<h1 class="legal-title">นโยบายความเป็นส่วนตัว</h1>
|
||||
<p class="legal-meta">มีผลบังคับใช้วันที่: 5 พฤษภาคม 2569</p>
|
||||
</header>
|
||||
|
||||
<div class="legal-content">
|
||||
<p class="legal-intro">
|
||||
<strong>บริษัท มอร์มินิมอร์ จำกัด</strong> ("บริษัทฯ") ให้ความสำคัญกับการคุ้มครองข้อมูลส่วนบุคคลของท่าน จึงได้จัดทำนโยบายความเป็นส่วนตัวฉบับนี้ขึ้นเพื่อชี้แจงเกี่ยวกับการเก็บรวบรวม ใช้ หรือเปิดเผยข้อมูลส่วนบุคคล รวมถึงสิทธิต่างๆ ของท่านตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562
|
||||
</p>
|
||||
<p class="legal-intro">บริษัท มอร์มินิมอร์ จำกัด ให้ความสำคัญกับการคุ้มครองข้อมูลส่วนบุคคลของท่าน</p>
|
||||
|
||||
<section class="legal-section">
|
||||
<div class="legal-section">
|
||||
<h2>1. ข้อมูลส่วนบุคคลที่เราเก็บรวบรวม</h2>
|
||||
<p>ข้อมูลส่วนบุคคลที่บริษัทฯ อาจเก็บรวบรวมจากท่าน อาจรวมถึง:</p>
|
||||
<ul>
|
||||
<li><strong>ข้อมูลส่วนบุคคลทั่วไป:</strong> ชื่อ-นามสกุล ที่อยู่อีเมล หมายเลขโทรศัพท์ ที่อยู่ไปรษณีย์ วันเดือนปีเกิด</li>
|
||||
<li><strong>ข้อมูลการติดต่อ:</strong> ข้อมูลการติดต่อที่ท่านให้ไว้เมื่อลงทะเบียน กรอกแบบฟอร์ม หรือติดต่อบริษัทฯ</li>
|
||||
<li><strong>ข้อมูลการใช้งาน:</strong> IP address, ข้อมูลการเข้าชมเว็บไซต์, คุกกี้, ข้อมูลกิจกรรมการใช้งาน</li>
|
||||
<li><strong>ข้อมูลการเงิน:</strong> ข้อมูลบัตรเครดิต/เดบิต ข้อมูลการชำระเงิน (กรณีใช้บริการที่มีค่าใช้จ่าย)</li>
|
||||
<li><strong>ข้อมูลอื่นที่ท่านให้ไว้:</strong> ข้อมูลใดๆ ที่ท่านให้ไว้โดยสมัครใจผ่านช่องทางการติดต่อของบริษัทฯ</li>
|
||||
<li><strong>ข้อมูลส่วนบุคคลทั่วไป:</strong> ชื่อ-นามสกุล ที่อยู่อีเมล หมายเลขโทรศัพท์</li>
|
||||
<li><strong>ข้อมูลการติดต่อ:</strong> ข้อมูลการติดต่อที่ท่านให้ไว้เมื่อลงทะเบียนหรือกรอกแบบฟอร์ม</li>
|
||||
<li><strong>ข้อมูลการใช้งาน:</strong> IP address, ข้อมูลการเข้าชมเว็บไซต์, คุกกี้</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="legal-section">
|
||||
<div class="legal-section">
|
||||
<h2>2. วัตถุประสงค์ในการเก็บรวบรวมข้อมูล</h2>
|
||||
<p>บริษัทฯ เก็บรวบรวมข้อมูลส่วนบุคคลเพื่อวัตถุประสงค์ดังต่อไปนี้:</p>
|
||||
<p>เราเก็บรวบรวมข้อมูลส่วนบุคคลเพื่อวัตถุประสงค์ดังต่อไปนี้:</p>
|
||||
<ul>
|
||||
<li>เพื่อให้บริการและดำเนินการตามคำขอของท่าน</li>
|
||||
<li>เพื่อการสื่อสารและให้ข้อมูลข่าวสารเกี่ยวกับบริการของบริษัทฯ</li>
|
||||
<li>เพื่อปรับปรุงคุณภาพบริการและพัฒนาเว็บไซต์</li>
|
||||
<li>เพื่อการวิเคราะห์ข้อมูลและสถิติการใช้งาน</li>
|
||||
<li>เพื่อการตลาดและการโฆษณา (ได้รับความยินยอมจากท่าน)</li>
|
||||
<li>เพื่อการปฏิบัติตามกฎหมาย คำสั่ง หรือกระบวนการทางกฎหมาย</li>
|
||||
<li>เพื่อการรักษาความปลอดภัยและป้องกันการทุจริต</li>
|
||||
<li>เพื่อให้บริการและดูแลลูกค้า</li>
|
||||
<li>เพื่อติดต่อสื่อสารกับท่าน</li>
|
||||
<li>เพื่อปรับปรุงการให้บริการ</li>
|
||||
<li>เพื่อปฏิบัติตามกฎหมาย</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="legal-section">
|
||||
<h2>3. การใช้และเปิดเผยข้อมูลส่วนบุคคล</h2>
|
||||
<p>บริษัทฯ จะไม่เปิดเผยข้อมูลส่วนบุคคลของท่านต่อบุคคลที่สาม เว้นแต่:</p>
|
||||
<ul>
|
||||
<li>ได้รับความยินยอมจากท่าน</li>
|
||||
<li>จำเป็นต้องเปิดเผยเพื่อให้บริการตามคำขอของท่าน</li>
|
||||
<li>จำเป็นต้องเปิดเผยต่อผู้ให้บริการที่บริษัทฯ ว่าจ้างให้ดำเนินการในส่วนที่จำเป็น</li>
|
||||
<li>กฎหมายกำหนดหรือร้านขอให้เปิดเผย</li>
|
||||
<li>เพื่อป้องกันหรือระงับอันตรายต่อชีวิต สุขภาพ หรือทรัพย์สิน</li>
|
||||
<li>จำเป็นเพื่อประโยชน์โดยชอบด้วยกฎหมายของบริษัทฯ</li>
|
||||
</ul>
|
||||
</section>
|
||||
<div class="legal-section">
|
||||
<h2>3. การคุ้มครองข้อมูล</h2>
|
||||
<p>เรามีมาตรการรักษาความปลอดภัยที่เหมาะสมเพื่อป้องกันการสูญหาย เข้าถึง ใช้ เปลี่ยนแปลง หรือเปิดเผยข้อมูลส่วนบุคคลโดยไม่ได้รับอนุญาต</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<section class="legal-section">
|
||||
<h2>9. การเปลี่ยนแปลงนโยบาย</h2>
|
||||
<p>บริษัทฯ อาจปรับปรุงหรือเปลี่ยนแปลงนโยบายความเป็นส่วนตัวนี้เป็นครั้งคราว การเปลี่ยนแปลงจะมีผลเมื่อประกาศบนเว็บไซต์ ท่านควรตรวจสอบนโยบายนี้เป็นระยะเพื่อรับทราบการเปลี่ยนแปลง</p>
|
||||
<p><strong>วันที่มีผลบังคับใช้:</strong> 5 พฤษภาคม 2569</p>
|
||||
</section>
|
||||
|
||||
<footer class="legal-footer">
|
||||
<p>*นโยบายความเป็นส่วนตัวฉบับนี้จัดทำขึ้นตามพระราชบัญญัติคุ้มครองข้อมูลส่วนบุคคล พ.ศ. 2562</p>
|
||||
</footer>
|
||||
<div class="legal-section">
|
||||
<h2>4. สิทธิของท่าน</h2>
|
||||
<p>ท่านมีสิทธิในการเข้าถึง แก้ไข ลบ หรือระงับการใช้ข้อมูลส่วนบุคคลของท่าน กรุณาติดต่อเราผ่านช่องทางที่ระบุในเว็บไซต์</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</Base>
|
||||
|
||||
<style>
|
||||
.legal-page {
|
||||
padding: 120px 0 80px;
|
||||
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-section { background: var(--color-white); }
|
||||
.legal-content { max-width: 800px; margin: 0 auto; }
|
||||
.legal-intro {
|
||||
font-size: 18px;
|
||||
line-height: 1.8;
|
||||
color: var(--color-medium-gray);
|
||||
margin-bottom: 48px;
|
||||
padding: 24px;
|
||||
background: var(--color-light-gray);
|
||||
border-radius: 12px;
|
||||
border-left: 4px solid var(--color-primary);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.legal-section {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.legal-section h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.legal-section h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--color-black);
|
||||
margin: 24px 0 12px;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.legal-section p {
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
color: #444;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.legal-section ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-left: 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.legal-section li {
|
||||
position: relative;
|
||||
padding-left: 24px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 16px;
|
||||
line-height: 1.7;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.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 {
|
||||
line-height: 1.8;
|
||||
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>
|
||||
248
src/pages/services/[slug].astro
Normal file
248
src/pages/services/[slug].astro
Normal 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>
|
||||
@@ -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>
|
||||
@@ -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
221
src/pages/services/index.astro
Normal 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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -1,232 +1,87 @@
|
||||
---
|
||||
import Base from '../layouts/Base.astro';
|
||||
import Navigation from '../components/Navigation.astro';
|
||||
import Hero from '../components/Hero.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import PageHero from '../components/PageHero.astro';
|
||||
---
|
||||
|
||||
<Base title="เงื่อนไขการให้บริการ | MoreminiMore">
|
||||
<Base title="เงื่อนไขการให้บริการ | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
|
||||
<Navigation />
|
||||
|
||||
<Hero
|
||||
<PageHero
|
||||
badge="กฎหมาย"
|
||||
title="เงื่อนไขการให้บริการ"
|
||||
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">
|
||||
<header class="legal-header">
|
||||
<h1 class="legal-title">เงื่อนไขการให้บริการ</h1>
|
||||
<p class="legal-meta">มีผลบังคับใช้วันที่: 5 พฤษภาคม 2569 | แก้ไขล่าสุด: 5 พฤษภาคม 2569</p>
|
||||
</header>
|
||||
|
||||
<div class="legal-content">
|
||||
<p class="legal-intro">
|
||||
<strong>ชื่อเว็บไซต์:</strong> MoreminiMore<br />
|
||||
<strong>เว็บไซต์:</strong> https://www.moreminimore.com<br />
|
||||
<strong>บริษัท:</strong> MoreminiMore Co.,Ltd.
|
||||
</p>
|
||||
<p class="legal-intro">ชื่อเว็บไซต์: MoreminiMore | เว็บไซต์: https://www.moreminimore.com | บริษัท: MoreminiMore Co.,Ltd.</p>
|
||||
|
||||
<section class="legal-section">
|
||||
<div class="legal-section">
|
||||
<h2>1. การยอมรับเงื่อนไข</h2>
|
||||
<p>ด้วยการเข้าถึงและใช้งานเว็บไซต์ของบริษัท มอร์มินิมอร์ จำกัด ท่านยอมรับและตกลงที่จะถูกผูกมัดด้วยเงื่อนไขการให้บริการฉบับนี้</p>
|
||||
</div>
|
||||
|
||||
<h3>1.1 ข้อตกลง</h3>
|
||||
<p>ด้วยการเข้าถึงและใช้งานเว็บไซต์ https://www.moreminimore.com ("เว็บไซต์") ของบริษัท MoreminiMore Co.,Ltd. ("เรา", "ของเรา" หรือ "บริษัท") ท่าน ("ผู้ใช้", "ท่าน" หรือ "ของคุณ") ยอมรับและตกลงที่จะถูกผูกมัดด้วยเงื่อนไขการให้บริการฉบับนี้ ("เงื่อนไข")</p>
|
||||
<div class="legal-section">
|
||||
<h2>2. การแก้ไขเงื่อนไข</h2>
|
||||
<p>เราขอสงวนสิทธิในการแก้ไขเงื่อนไขนี้เมื่อใดก็ได้ การแก้ไขจะมีผลทันทีเมื่อโพสต์บนเว็บไซต์ ท่านควรตรวจสอบเงื่อนไขนี้เป็นประจำ</p>
|
||||
</div>
|
||||
|
||||
<h3>1.2 การแก้ไขเงื่อนไข</h3>
|
||||
<p>เราขอสงวนสิทธิในการแก้ไขเงื่อนไขนี้เมื่อใดก็ได้:</p>
|
||||
<ul>
|
||||
<li>การแก้ไขจะมีผลทันทีเมื่อโพสต์บนเว็บไซต์</li>
|
||||
<li>ท่านควรตรวจสอบเงื่อนไขนี้เป็นประจำ</li>
|
||||
<li>การใช้งานเว็บไซต์ต่อเนื่องแสดงว่าท่านยอมรับการแก้ไข</li>
|
||||
</ul>
|
||||
<div class="legal-section">
|
||||
<h2>3. บริการของเรา</h2>
|
||||
<p>เราให้บริการพัฒนาเว็บไซต์ AI Automation และ Marketing Automation สำหรับธุรกิจไทย โดยมีรายละเอียดและขอบเขตงานตามที่ตกลงกันในสัญญา</p>
|
||||
</div>
|
||||
|
||||
<h3>1.3 อายุขั้นต่ำ</h3>
|
||||
<p>ท่านต้องมีอายุไม่ต่ำกว่า 20 ปีบริบูรณ์เพื่อใช้งานเว็บไซต์ หากท่านอายุต่ำกว่า 20 ปี ท่านต้องได้รับความยินยอมจากผู้ปกครอง</p>
|
||||
</section>
|
||||
<div class="legal-section">
|
||||
<h2>4. การชำระเงิน</h2>
|
||||
<p>การชำระเงินจะเป็นไปตามเงื่อนไขที่กำหนดในใบเสนอราคาและสัญญา ลูกค้าตกลงชำระตามกำหนดเวลาที่ระบุ</p>
|
||||
</div>
|
||||
|
||||
<section class="legal-section">
|
||||
<h2>2. บริการของเรา</h2>
|
||||
<div class="legal-section">
|
||||
<h2>5. การรับประกัน</h2>
|
||||
<p>เรารับประกันคุณภาพงานตามที่ระบุในสัญญา หากไม่พอใจในงาน เราพร้อมแก้ไขจนกว่าจะถูกใจตามเงื่อนไขที่กำหนด</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div class="legal-section">
|
||||
<h2>6. ข้อจำกัดความรับผิด</h2>
|
||||
<p>ความรับผิดของบริษัทจะจำกัดอยู่ที่มูลค่าของงานที่ให้บริการตามที่ระบุในสัญญา</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<footer class="legal-footer">
|
||||
<p>*เอกสารนี้เป็นเอกสารทางกฎหมาย หากท่านมีข้อสงสัย กรุณาปรึกษาที่ปรึกษากฎหมาย</p>
|
||||
</footer>
|
||||
<div class="legal-section">
|
||||
<h2>7. ติดต่อเรา</h2>
|
||||
<p>หากมีคำถามเกี่ยวกับเงื่อนไขการให้บริการ กรุณาติดต่อเราที่ contact@moreminimore.com หรือ 080-995-5945</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</Base>
|
||||
|
||||
<style>
|
||||
.legal-page {
|
||||
padding: 120px 0 80px;
|
||||
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-section { background: var(--color-white); }
|
||||
.legal-content { max-width: 800px; margin: 0 auto; }
|
||||
.legal-intro {
|
||||
font-size: 14px;
|
||||
line-height: 2;
|
||||
font-size: 18px;
|
||||
color: var(--color-medium-gray);
|
||||
margin-bottom: 48px;
|
||||
padding: 20px 24px;
|
||||
background: var(--color-light-gray);
|
||||
border-radius: 12px;
|
||||
border-left: 4px solid var(--color-primary);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.legal-section {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.legal-section h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--color-black);
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #eee;
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.legal-section h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
margin: 24px 0 12px;
|
||||
}
|
||||
|
||||
.legal-section p {
|
||||
font-size: 16px;
|
||||
color: #444;
|
||||
line-height: 1.8;
|
||||
color: #444;
|
||||
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>
|
||||
@@ -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 {
|
||||
/* Colors */
|
||||
/* Brand Colors */
|
||||
--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-white: #ffffff;
|
||||
--color-light-gray: #f5f5f5;
|
||||
--color-dark-gray: #1a1a1a;
|
||||
--color-medium-gray: #6b7280;
|
||||
--color-dark-section: #0a0a0a;
|
||||
|
||||
--color-gray-100: #f5f5f5;
|
||||
--color-gray-200: #e5e5e5;
|
||||
--color-gray-400: #9ca3af;
|
||||
--color-gray-600: #6b7280;
|
||||
|
||||
/* Typography */
|
||||
--font-heading: 'Kanit', sans-serif;
|
||||
--font-display: 'Kanit', sans-serif;
|
||||
--font-body: 'Noto Sans Thai', sans-serif;
|
||||
|
||||
|
||||
/* Spacing */
|
||||
--section-padding: 80px;
|
||||
--container-max: 1280px;
|
||||
--space-xs: 8px;
|
||||
--space-sm: 16px;
|
||||
--space-md: 24px;
|
||||
--space-lg: 40px;
|
||||
--space-xl: 64px;
|
||||
--space-2xl: 96px;
|
||||
--space-3xl: 128px;
|
||||
|
||||
/* Layout */
|
||||
--container-max: 1400px;
|
||||
--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;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
@@ -30,175 +78,806 @@
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.7;
|
||||
color: var(--color-black);
|
||||
background: var(--color-white);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
overflow-x: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
text-decoration: none !important;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
a:hover {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
max-width: var(--container-max);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--gutter);
|
||||
}
|
||||
|
||||
/* Section Styles */
|
||||
/* ============================================
|
||||
SECTION STYLES
|
||||
============================================ */
|
||||
|
||||
.section {
|
||||
padding: var(--section-padding) 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-dark {
|
||||
background: var(--color-dark-section);
|
||||
background: var(--color-dark);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.section-light {
|
||||
background: var(--color-light-gray);
|
||||
background: var(--color-gray-100);
|
||||
}
|
||||
|
||||
.section-primary {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
.section-accent {
|
||||
background: var(--color-accent);
|
||||
color: var(--color-white);
|
||||
/* Seamless Section Transitions */
|
||||
.section-gradient-top {
|
||||
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 {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 16px 32px;
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 600;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 20px 40px;
|
||||
font-family: var(--font-display);
|
||||
font-size: 16px;
|
||||
border-radius: 8px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
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 {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-black);
|
||||
box-shadow: 0 4px 20px rgba(254, 212, 0, 0.3);
|
||||
box-shadow: var(--shadow-glow);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 30px rgba(254, 212, 0, 0.4);
|
||||
box-shadow: 0 0 60px rgba(254, 212, 0, 0.6);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--color-black);
|
||||
.btn-dark {
|
||||
background: var(--color-dark);
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #222;
|
||||
transform: translateY(-2px);
|
||||
.btn-dark:hover {
|
||||
background: var(--color-dark-light);
|
||||
}
|
||||
|
||||
/* Card Styles */
|
||||
.card {
|
||||
.btn-outline {
|
||||
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);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-md);
|
||||
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;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-white);
|
||||
}
|
||||
|
||||
.card-accent {
|
||||
border-top: 4px solid var(--color-primary);
|
||||
}
|
||||
|
||||
/* Typography Utilities */
|
||||
.text-display {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 800;
|
||||
.form-input:focus + .form-label,
|
||||
.form-input:not(:placeholder-shown) + .form-label {
|
||||
top: -12px;
|
||||
left: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
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%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
/* ============================================
|
||||
FOOTER
|
||||
============================================ */
|
||||
|
||||
.footer {
|
||||
background: var(--color-dark);
|
||||
color: var(--color-white);
|
||||
padding: 80px 0 40px;
|
||||
}
|
||||
|
||||
/* Grid Utilities */
|
||||
.grid-2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--gutter);
|
||||
.footer-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--gutter);
|
||||
.social-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--gutter);
|
||||
.social-link:hover {
|
||||
background: var(--color-primary);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
:root {
|
||||
--section-padding: 60px;
|
||||
--section-padding: 80px;
|
||||
--gutter: 24px;
|
||||
}
|
||||
|
||||
.grid-4 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
:root {
|
||||
--section-padding: 48px;
|
||||
--section-padding: 60px;
|
||||
--gutter: 16px;
|
||||
}
|
||||
|
||||
.grid-2,
|
||||
.grid-3,
|
||||
.grid-4 {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 18px 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
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); }
|
||||
}
|
||||
@@ -1,12 +1,6 @@
|
||||
import { emdash } from "emdash/astro";
|
||||
import { getEmDashCollection } from "emdash";
|
||||
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">) {
|
||||
return {
|
||||
title: entry.data.title,
|
||||
@@ -20,4 +14,13 @@ export function getReadingTime(content: string): string {
|
||||
const words = content.split(/\s+/).length;
|
||||
const minutes = Math.ceil(words / wordsPerMinute);
|
||||
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;
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user