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

feat: Update images with Unsplash (hero + illustrations), fix UX/UI, add animations

Browse Source 
- 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)
This commit is contained in:
Kunthawat Greethong
2026-03-30 11:38:48 +07:00
parent d2b52fdfa7
commit ae4a897d11
64 changed files with 4916 additions and 2554 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,6 +13,22 @@ export async function getStaticPaths() {
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',
@@ -27,7 +43,7 @@ const schemaData = {
"@type": "Article",
"headline": post.data.title,
"description": post.data.description,
"image": post.data.image || "/branding/logo-long.png",
"image": featureImage,
"datePublished": post.data.pubDate.toISOString(),
"dateModified": post.data.pubDate.toISOString(),
"author": {
@@ -41,8 +57,38 @@ const schemaData = {
"@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
@@ -51,39 +97,58 @@ const schemaData = {
>
<!-- 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)} />
<!-- Article Header -->
<section class="py-12 bg-gray-light">
<div class="container mx-auto px-4 max-w-4xl">
<nav class="text-sm mb-6">
<a href="/blog" class="text-accent-blue hover:underline">← กลับไปหน้าบล็อก</a>
</nav>
<div class="flex items-center gap-2 mb-4">
<span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">
<!-- 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>
</div>
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 text-secondary leading-tight">
{post.data.title}
</h1>
<div class="flex flex-wrap items-center gap-4 text-gray-600">
<span class="flex items-center gap-2">
<span class="text-xl">✍️</span>
{post.data.author}
</span>
<span class="flex items-center gap-2">
<span class="text-xl">📅</span>
{formatDate(post.data.pubDate)}
</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>
</section>
</div>
<!-- Article Content -->
<section class="py-12 bg-white">
<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 />
@@ -91,9 +156,10 @@ const schemaData = {
<!-- 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-primary hover:text-white transition">
<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>
))}
@@ -103,7 +169,7 @@ const schemaData = {
</section>
<!-- Share Section -->
<section class="py-8 bg-gray-light">
<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">
@@ -113,7 +179,10 @@ const schemaData = {
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"
>
📘 Facebook
<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}`}
@@ -121,7 +190,10 @@ const schemaData = {
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"
>
🐦 Twitter
<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}`}
@@ -129,40 +201,33 @@ const schemaData = {
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"
>
💬 LINE
<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>
<!-- Related Articles -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4 max-w-6xl">
<h2 class="text-2xl font-bold mb-8 text-center">บทความที่เกี่ยวข้อง</h2>
<div class="grid md:grid-cols-3 gap-8">
<!-- Related articles would be dynamically loaded -->
<div class="text-center text-gray-500">
<p>กำลังอัปเดตบทความที่เกี่ยวข้อง...</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 gradient-ai text-white">
<!-- 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">
<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">
<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-white text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition shadow-lg inline-flex items-center justify-center gap-2">
📞 ติดต่อเรา
<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="/ai-strategy-consult" class="bg-transparent border-2 border-white text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-primary transition inline-flex items-center justify-center gap-2">
ปรึกษาผู้เชี่ยวชาญ
<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>
@@ -233,12 +298,12 @@ const schemaData = {
}
.prose blockquote {
border-left: 4px solid #0066cc;
border-left: 4px solid #fed400;
padding-left: 1rem;
margin: 1.5rem 0;
font-style: italic;
color: #666;
background: #f9f9f9;
background: #fffbeb;
padding: 1rem;
border-radius: 0 8px 8px 0;
}