Before EmDash migration - plain Astro site with 22 pages, unique hero layouts per page, Thai content
This commit is contained in:
Kunthawat Greethong
241
src/pages/blog/[slug].astro
Normal file
241
src/pages/blog/[slug].astro
Normal file
@@ -0,0 +1,241 @@
|
||||
---
|
||||
import Base from '../../layouts/Base.astro';
|
||||
import Navigation from '../../components/Navigation.astro';
|
||||
import Hero from '../../components/Hero.astro';
|
||||
import Footer from '../../components/Footer.astro';
|
||||
|
||||
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" }
|
||||
];
|
||||
|
||||
return posts.map(post => ({
|
||||
params: { slug: post.slug },
|
||||
props: { post }
|
||||
}));
|
||||
}
|
||||
|
||||
const { post } = Astro.props;
|
||||
---
|
||||
|
||||
<Base title={`${post.title} | MoreminiMore`}>
|
||||
<Navigation />
|
||||
|
||||
<Hero
|
||||
title={post.title}
|
||||
subtitle="อ่านบทความล่าสุดเกี่ยวกับ AI, Marketing และเทคโนโลยีสำหรับธุรกิจ"
|
||||
badge="บทความ"
|
||||
image={post.image}
|
||||
theme="yellow"
|
||||
showCTA={false}
|
||||
/>
|
||||
|
||||
<!-- Article Section -->
|
||||
<section class="section article-section">
|
||||
<div class="container">
|
||||
<div class="article-layout">
|
||||
<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>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-widget">
|
||||
<h3>ติดต่อปรึกษา</h3>
|
||||
<p>สนใจใช้ AI ในธุรกิจของคุณ?</p>
|
||||
<a href="/contact" class="btn btn-primary">ปรึกษาฟรี</a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</Base>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
padding: 140px 0 60px;
|
||||
background: var(--color-black);
|
||||
}
|
||||
|
||||
.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-section {
|
||||
background: var(--color-white);
|
||||
}
|
||||
|
||||
.article-layout {
|
||||
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;
|
||||
}
|
||||
|
||||
.article-body {
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.article-lead {
|
||||
font-size: 20px;
|
||||
color: var(--color-medium-gray);
|
||||
line-height: 1.8;
|
||||
margin-bottom: 32px;
|
||||
padding-bottom: 32px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.article-body h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin: 40px 0 16px;
|
||||
}
|
||||
|
||||
.article-body p {
|
||||
font-size: 16px;
|
||||
color: var(--color-medium-gray);
|
||||
line-height: 1.8;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.article-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.sidebar-widget {
|
||||
background: var(--color-light-gray);
|
||||
border-radius: 16px;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.sidebar-widget h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.related-services {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.related-services li {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.related-services a {
|
||||
color: var(--color-medium-gray);
|
||||
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);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.article-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.article-sidebar {
|
||||
order: -1;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sidebar-widget {
|
||||
flex: 1;
|
||||
min-width: 280px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user