ae4a897d11
- Replace MiniMax images with Unsplash (free commercial use) - Hero images: marketing, AI automation, tech consult, web dev, about-us - Illustrations: different from heroes for all 4 service pages - Fix ตัวอย่างการใช้งาน section on marketing-automation - Update about-us with hero image - All images stored locally (not hotlinks)
334 lines
11 KiB
Plaintext
334 lines
11 KiB
Plaintext
---
|
|
import Layout from '../../layouts/Layout.astro';
|
|
import { getCollection } from 'astro:content';
|
|
|
|
export async function getStaticPaths() {
|
|
const posts = await getCollection('blog');
|
|
return posts.map(post => ({
|
|
params: { slug: post.slug },
|
|
props: { post },
|
|
}));
|
|
}
|
|
|
|
const { post } = Astro.props;
|
|
const { Content } = await post.render();
|
|
|
|
// Map blog slugs to feature images
|
|
const featureImages: Record<string, string> = {
|
|
'5-ways-ai-increase-sales': '/images/blog/ai-sales-growth.jpg',
|
|
'ai-content-google-love': '/images/blog/ai-content-seo.jpg',
|
|
'ai-for-sme-thailand': '/images/blog/ai-sme-thailand.jpg',
|
|
'back-office-automation': '/images/blog/office-automation.jpg',
|
|
'chatbot-business-case-study': '/images/blog/chatbot-business.jpg',
|
|
'data-driven-marketing': '/images/blog/data-marketing.jpg',
|
|
'digital-transformation-guide': '/images/blog/digital-transformation.jpg',
|
|
'marketing-automation-guide': '/images/blog/marketing-automation.jpg',
|
|
'seo-2026-business-guide': '/images/blog/seo-guide.jpg',
|
|
'website-2026-must-have': '/images/blog/website-2026.jpg',
|
|
};
|
|
|
|
const featureImage = featureImages[post.slug] || '/images/blog/ai-sales-growth.jpg';
|
|
|
|
const formatDate = (date: Date) => {
|
|
return date.toLocaleDateString('th-TH', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
});
|
|
};
|
|
|
|
// Schema.org Article structured data
|
|
const schemaData = {
|
|
"@context": "https://schema.org",
|
|
"@type": "Article",
|
|
"headline": post.data.title,
|
|
"description": post.data.description,
|
|
"image": featureImage,
|
|
"datePublished": post.data.pubDate.toISOString(),
|
|
"dateModified": post.data.pubDate.toISOString(),
|
|
"author": {
|
|
"@type": "Person",
|
|
"name": post.data.author
|
|
},
|
|
"publisher": {
|
|
"@type": "Organization",
|
|
"name": "MoreMiniMore",
|
|
"logo": {
|
|
"@type": "ImageObject",
|
|
"url": "/branding/logo-long.png"
|
|
}
|
|
},
|
|
"mainEntityOfPage": {
|
|
"@type": "WebPage",
|
|
"@id": `https://www.moreminimore.com/blog/${post.slug}`
|
|
}
|
|
};
|
|
|
|
// BreadcrumbList Schema
|
|
const breadcrumbSchema = {
|
|
"@context": "https://schema.org",
|
|
"@type": "BreadcrumbList",
|
|
"itemListElement": [
|
|
{
|
|
"@type": "ListItem",
|
|
"position": 1,
|
|
"name": "หน้าแรก",
|
|
"item": "https://www.moreminimore.com"
|
|
},
|
|
{
|
|
"@type": "ListItem",
|
|
"position": 2,
|
|
"name": "บล็อก",
|
|
"item": "https://www.moreminimore.com/blog"
|
|
},
|
|
{
|
|
"@type": "ListItem",
|
|
"position": 3,
|
|
"name": post.data.title,
|
|
"item": `https://www.moreminimore.com/blog/${post.slug}`
|
|
}
|
|
]
|
|
};
|
|
---
|
|
|
|
<Layout
|
|
title={`${post.data.title} | MoreMiniMore Blog`}
|
|
description={post.data.description}
|
|
>
|
|
<!-- Schema.org JSON-LD -->
|
|
<script type="application/ld+json" set:html={JSON.stringify(schemaData)} />
|
|
|
|
<!-- BreadcrumbList JSON-LD -->
|
|
<script type="application/ld+json" set:html={JSON.stringify(breadcrumbSchema)} />
|
|
|
|
<!-- Hero Image -->
|
|
<div class="reveal relative h-[50vh] min-h-[400px]">
|
|
<img
|
|
src={featureImage}
|
|
alt={post.data.title}
|
|
class="w-full h-full object-cover"
|
|
/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
|
|
|
|
<!-- Back Button -->
|
|
<div class="absolute top-6 left-6">
|
|
<a href="/blog" class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm text-white px-4 py-2 rounded-full hover:bg-white/30 transition">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
|
</svg>
|
|
กลับไปหน้าบล็อก
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Hero Content -->
|
|
<div class="absolute bottom-0 left-0 right-0 p-8">
|
|
<div class="container mx-auto px-4 max-w-4xl">
|
|
<span class="inline-block bg-yellow-500 text-black px-4 py-1 rounded-full text-sm font-medium mb-4">
|
|
{post.data.category}
|
|
</span>
|
|
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight mb-4">
|
|
{post.data.title}
|
|
</h1>
|
|
<div class="flex flex-wrap items-center gap-4 text-white/90">
|
|
<span class="flex items-center gap-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
|
|
</svg>
|
|
{post.data.author}
|
|
</span>
|
|
<span class="flex items-center gap-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
|
</svg>
|
|
{formatDate(post.data.pubDate)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Article Content -->
|
|
<section class="reveal py-12 bg-white">
|
|
<div class="container mx-auto px-4 max-w-4xl">
|
|
<article class="prose prose-lg max-w-none">
|
|
<Content />
|
|
</article>
|
|
|
|
<!-- Tags -->
|
|
<div class="mt-12 pt-8 border-t">
|
|
<h3 class="text-lg font-bold mb-4">หัวข้อที่เกี่ยวข้อง</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
{post.data.tags.map(tag => (
|
|
<a href={`/blog?tag=${tag}`} class="px-4 py-2 bg-gray-100 rounded-full text-gray-700 hover:bg-yellow-500 hover:text-black transition">
|
|
#{tag}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Share Section -->
|
|
<section class="reveal py-8 bg-gray-50">
|
|
<div class="container mx-auto px-4 max-w-4xl text-center">
|
|
<h3 class="text-xl font-bold mb-4">แชร์บทความนี้</h3>
|
|
<div class="flex justify-center gap-4">
|
|
<a
|
|
href={`https://www.facebook.com/sharer/sharer.php?u=${Astro.url}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="px-6 py-3 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition inline-flex items-center gap-2"
|
|
>
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
|
</svg>
|
|
Facebook
|
|
</a>
|
|
<a
|
|
href={`https://twitter.com/intent/tweet?url=${Astro.url}&text=${post.data.title}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="px-6 py-3 bg-black text-white rounded-full hover:bg-gray-800 transition inline-flex items-center gap-2"
|
|
>
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
|
|
</svg>
|
|
X
|
|
</a>
|
|
<a
|
|
href={`https://line.me/R/msg/text/?${post.data.title}%20${Astro.url}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="px-6 py-3 bg-green-500 text-white rounded-full hover:bg-green-600 transition inline-flex items-center gap-2"
|
|
>
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 17.703c-.29.29-.767.348-1.116.174l-2.115-1.053c-.582.35-1.223.543-1.917.543-.695 0-1.335-.193-1.917-.543l-2.115 1.053c-.349.174-.826.116-1.116-.174-.29-.29-.348-.767-.174-1.116l1.053-2.115c-.35-.582-.543-1.223-.543-1.917 0-.695.193-1.335.543-1.917L5.35 8.51c-.174-.349-.116-.826.174-1.116.29-.29.767-.348 1.116-.174l2.115 1.053c.582-.35 1.223-.543 1.917-.543.695 0 1.335.193 1.917.543l2.115-1.053c.349-.174.826-.116 1.116.174.29.29.348.767.174 1.116l-1.053 2.115c.35.582.543 1.223.543 1.917 0 .695-.193 1.335-.543 1.917l1.053 2.115c.174.349.116.826-.174 1.116z"/>
|
|
</svg>
|
|
LINE
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section - Always Yellow -->
|
|
<section id="cta" class="reveal py-20 bg-primary">
|
|
<div class="container mx-auto px-4 text-center">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-black">
|
|
ต้องการคำปรึกษาเพิ่มเติม?
|
|
</h2>
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto text-gray-800">
|
|
ทีมผู้เชี่ยวชาญของเราพร้อมให้คำปรึกษาฟรี
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="/contact-us" class="bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-900 transition-colors shadow-lg inline-flex items-center justify-center gap-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
|
</svg>
|
|
ติดต่อเรา
|
|
</a>
|
|
<a href="/web-development" class="bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-colors shadow-lg inline-flex items-center justify-center gap-2">
|
|
ดูบริการ
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Layout>
|
|
|
|
<style is:global>
|
|
.prose h1 {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
margin-top: 2rem;
|
|
margin-bottom: 1rem;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.prose h2 {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin-top: 2rem;
|
|
margin-bottom: 1rem;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.prose h3 {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 0.75rem;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.prose p {
|
|
margin-bottom: 1.25rem;
|
|
line-height: 1.8;
|
|
color: #4a4a4a;
|
|
}
|
|
|
|
.prose ul, .prose ol {
|
|
margin-bottom: 1.25rem;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.prose li {
|
|
margin-bottom: 0.5rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.prose ul li {
|
|
list-style-type: disc;
|
|
}
|
|
|
|
.prose ol li {
|
|
list-style-type: decimal;
|
|
}
|
|
|
|
.prose strong {
|
|
font-weight: 600;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.prose a {
|
|
color: #0066cc;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.prose a:hover {
|
|
color: #0052a3;
|
|
}
|
|
|
|
.prose blockquote {
|
|
border-left: 4px solid #fed400;
|
|
padding-left: 1rem;
|
|
margin: 1.5rem 0;
|
|
font-style: italic;
|
|
color: #666;
|
|
background: #fffbeb;
|
|
padding: 1rem;
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
|
|
.prose hr {
|
|
margin: 2rem 0;
|
|
border: none;
|
|
border-top: 1px solid #e5e5e5;
|
|
}
|
|
|
|
.prose table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.prose th, .prose td {
|
|
border: 1px solid #e5e5e5;
|
|
padding: 0.75rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.prose th {
|
|
background: #f5f5f5;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|