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

Before EmDash migration - plain Astro site with 22 pages, unique hero layouts per page, Thai content

Browse Source
This commit is contained in:
Kunthawat Greethong
2026-05-06 09:55:37 +07:00
commit 0dcaf2f253
85 changed files with 11009 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
src/pages/index.astro Normal file
View File

@@ -0,0 +1,190 @@
---
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 stats = [
{ number: "50+", label: "โปรเจกต์" },
{ number: "40+", label: "ลูกค้า" },
{ number: "5+", label: "ปีประสบการณ์" },
{ number: "100%", label: "ความพึงพอใจ" }
];
---
<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"
/>
<!-- Services Section -->
<section class="section services">
<div class="container">
<div class="section-header">
<span class="section-badge">บริการของเรา</span>
<h2 class="section-title">เราให้บริการอะไรบ้าง</h2>
<p class="section-desc">ครบจบทุก need ด้านดิจิทัลสำหรับธุรกิจของคุณ</p>
</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>
</div>
))}
</div>
</div>
</section>
<!-- Portfolio Section -->
<section class="section portfolio-preview">
<div class="container">
<div class="section-header">
<span class="section-badge">ผลงาน</span>
<h2 class="section-title">โปรเจกต์ล่าสุด</h2>
<p class="section-desc">ผลงานที่เราภาคภูมิใจ</p>
</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>
</div>
</a>
))}
</div>
<div class="section-cta">
<a href="/portfolio" class="btn btn-primary">ดูผลงานทั้งหมด</a>
</div>
</div>
</section>
<!-- Blog Section -->
<section class="section section-light blog-preview">
<div class="container">
<div class="section-header">
<span class="section-badge">บทความ</span>
<h2 class="section-title">ความรู้ด้านดิจิทัล</h2>
<p class="section-desc">อ่านบทความล่าสุดจากเรา</p>
</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>
<div class="blog-content">
<h3 class="blog-title">{post.title}</h3>
<span class="blog-readmore">อ่านต่อ →</span>
</div>
</a>
))}
</div>
<div class="section-cta">
<a href="/blog" class="btn btn-secondary">บทความทั้งหมด</a>
</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; 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>