From dcd1d73f561eaaa65e2384e8e76bd91d2d19a45f Mon Sep 17 00:00:00 2001 From: Kunthawat Greethong Date: Wed, 10 Jun 2026 19:36:43 +0700 Subject: [PATCH] refactor(services/webdev): 5 different layout patterns (no more BentoGrid) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Before: all 5 sections used BentoGrid + BentoTile — repetitive look After: 5 distinct layouts: 1. Hero: 2-column grid (text + 4 why-us cards stacked) 2. Services: vertical card stack (4 items, icon+num+bullets) 3. Tech options: 2-column comparison table (Astro vs WordPress) 3b. Portfolio: 2x2 card grid (4 real client sites, hover effect) 4. Pricing: 3-tier card layout (Landing/Astro/WP) + extras list 5. FAQ: accordion (native details/summary) + MDX content card New CSS classes added: - .service-stack-item, .service-stack-num, .service-stack-bullets - .tech-comparison, .tech-col, .tech-col-header - .portfolio-grid-2x2, .portfolio-card-grid - .pricing-tiers, .pricing-tier, .pricing-tier-recommended - .faq-accordion, .faq-item, .faq-summary, .faq-icon Imports fixed: added Icon from Icon.astro (was missing → Astro error) --- src/pages/services/[slug].astro | 697 +++++++++++++++++++++++++++++--- 1 file changed, 645 insertions(+), 52 deletions(-) diff --git a/src/pages/services/[slug].astro b/src/pages/services/[slug].astro index e083809..1cbcbca 100644 --- a/src/pages/services/[slug].astro +++ b/src/pages/services/[slug].astro @@ -5,6 +5,7 @@ import Footer from '../../components/Footer.astro'; import BentoGrid from '../../components/BentoGrid.astro'; import BentoTile from '../../components/BentoTile.astro'; import DecoOrb from '../../components/DecoOrb.astro'; +import Icon from '../../components/Icon.astro'; import { getCollection, render } from 'astro:content'; export async function getStaticPaths() { @@ -239,7 +240,7 @@ const featureList = data.features || data.services || []; - + {data.services && (
@@ -253,20 +254,27 @@ const featureList = data.features || data.services || [];

ครบทุกฟีเจอร์ที่เว็บสมัยใหม่ต้องมี — ไม่ต้องจ้างเพิ่มทีหลัง

- - {data.services.map((s: any) => ( - -
    - {s.bullets.map((b: string) =>
  • {b}
    • )} -
- +
+ {data.services.map((s: any, idx: number) => ( +
+
0{idx + 1}
+
+ +
+
+

{s.title}

+
    + {s.bullets.map((b: string) =>
  • {b}
    • )} +
+
+
))} - +
)} - + {(data.realPortfolio || data.techOptions) && (
@@ -280,15 +288,25 @@ const featureList = data.features || data.services || [];

เลือกระบบที่เหมาะกับคุณ

แนะนำให้เลือกตามลักษณะธุรกิจ ไม่ใช่เลือกของแพง

- + +
{data.techOptions.map((t: any) => ( - -

{t.desc}

-

{t.duration}

-

✓ เหมาะกับ: {t.best}

- +
+
+ {t.badge} +

{t.name}

+

{t.duration}

+
+
+

{t.desc}

+
+ ✓ เหมาะกับ: + {t.best} +
+
+
))} - +
)} @@ -299,22 +317,27 @@ const featureList = data.features || data.services || [];

เว็บไซต์ที่ใช้งานจริง

เว็บที่เราทำ ยังใช้งานอยู่ทุกวัน — คลิกเข้าไปดูได้เลย

- + +
{data.realPortfolio.map((p: any) => ( - -

{p.industry}

-

{p.highlight}

- เยี่ยมชมเว็บไซต์ → - + +
+ ✓ ใช้งานจริง + → +
+

{p.name}

+

{p.industry}

+

{p.highlight}

+ ))} - +
)}
)} - + {data.pricing && (
@@ -323,16 +346,92 @@ const featureList = data.features || data.services || [];
ราคา

ราคาค่าบริการ

-

ชัดเจน ไม่มีค่าใช้จ่ายซ่อนเร้น

+

เลือกแพ็คเกจที่ตรงกับความต้องการ — จ่ายเท่าที่ใช้

- - {data.pricing.map((p: any) => ( - -

✓ {p.bestFor}

- - ))} - +
+
+
+ เริ่มต้น +

Landing Page

+

หน้าเดียวจบ เหมาะทดสอบตลาด

+
+
+ ฿ + 5,000 + / เริ่มต้น +
+
    +
  • ✓ เว็บ 1 หน้า
    • +
  • ✓ Responsive ทุกหน้าจอ
    • +
  • ✓ SSL + Domain .com 1 ปี
    • +
  • ✓ แก้ไขเองได้
    • +
  • ✗ ระบบหลังบ้าน
    • +
+ เริ่มต้น +
+ +
+
⭐ แนะนำ
+
+ มาตรฐาน +

Website Astro

+

เว็บบริษัท เน้น SEO + AI

+
+
+ ฿ + 10,000 + / เริ่มต้น +
+
    +
  • ✓ เว็บ 5-15 หน้า
    • +
  • ✓ SEO + GEO (ติด ChatGPT)
    • +
  • ✓ AI ช่วยสร้างเนื้อหา
    • +
  • ✓ Server + SSL + Domain 1 ปี
    • +
  • ✓ แก้ไขเองได้ + AI ช่วย
    • +
+ เลือกแพ็คเกจนี้ +
+ +
+
+ ขั้นสูง +

Website WordPress

+

E-commerce + Plugin ครบ

+
+
+ ฿ + 15,000 + / เริ่มต้น +
+
    +
  • ✓ เว็บไม่จำกัดหน้า
    • +
  • ✓ E-commerce + ตะกร้า + ชำระเงิน
    • +
  • ✓ Plugin ตามต้องการ
    • +
  • ✓ Server + SSL + Domain 1 ปี
    • +
  • ✓ แก้ไขเองได้ + อบรม
    • +
+ เริ่มต้น +
+
+ +
+

ค่าใช้จ่ายเพิ่มเติม (รายปี)

+
+
+ Server Hosting + ฿5,000 / ปี +
+
+ Domain .com / .co.th + ฿500 / ปี +
+
+ Maintenance (optional) + ฿1,500 / เดือน +
+
+
)} @@ -345,27 +444,23 @@ const featureList = data.features || data.services || [];
FAQ

คำถามที่พบบ่อย

-

รวมคำถามที่ลูกค้าถามบ่อยที่สุด

+

รวมคำถามที่ลูกค้าถามบ่อยที่สุด — คลิกเพื่อดูคำตอบ

- - {data.faqs.map((faq: any, i: number) => { - let span: 12 | 8 | 4 = 6; - if (i === 0) span = 12; - else if (i % 3 === 1) span = 8; - else if (i % 3 === 2) span = 4; - else span = 6; - const surfaces = ['yellow', 'soft', 'purple-soft', 'mint', 'teal-soft', 'soft'] as const; - const surface = surfaces[i % surfaces.length]; - return ( - -
-

{faq.a}

-
- - ); - })} - +
+ {data.faqs.map((faq: any, i: number) => ( +
+ + Q{i + 1} + {faq.q} + + + +
+

{faq.a}

+
+
+ ))} +
@@ -681,6 +776,504 @@ const featureList = data.features || data.services || []; margin: 8px 0; } + /* ============================================ + SERVICE STACK (vertical card list) + ============================================ */ + .service-stack { + display: flex; + flex-direction: column; + gap: 16px; + max-width: 900px; + margin: 0 auto; + } + .service-stack-item { + display: grid; + grid-template-columns: 60px 60px 1fr; + gap: 24px; + align-items: flex-start; + padding: 32px; + background: var(--color-white); + border: 1px solid var(--color-gray-200); + border-radius: var(--radius-xl); + transition: all 0.3s var(--ease-out-expo); + } + .service-stack-item:hover { + border-color: var(--color-primary); + transform: translateX(4px); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06); + } + .service-stack-num { + font-family: var(--font-display); + font-size: 36px; + font-weight: 900; + color: var(--color-primary); + line-height: 1; + } + .service-stack-icon { + width: 60px; + height: 60px; + background: var(--color-bg-soft); + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + color: var(--color-black); + } + .service-stack-title { + font-family: var(--font-display); + font-size: clamp(20px, 2.5vw, 24px); + font-weight: 800; + color: var(--color-black); + margin-bottom: 12px; + } + .service-stack-bullets { + list-style: none; + padding: 0; + } + .service-stack-bullets li { + position: relative; + padding-left: 24px; + font-size: 15px; + line-height: 1.6; + margin-bottom: 6px; + color: var(--color-gray-700); + } + .service-stack-bullets li::before { + content: '✓'; + position: absolute; + left: 0; + top: 0; + color: var(--color-primary); + font-weight: 800; + } + + /* ============================================ + TECH COMPARISON (2-column table) + ============================================ */ + .tech-comparison { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0; + max-width: 1000px; + margin: 0 auto; + background: var(--color-white); + border: 1px solid var(--color-gray-200); + border-radius: var(--radius-xl); + overflow: hidden; + } + .tech-col { + padding: 40px; + border-right: 1px solid var(--color-gray-200); + } + .tech-col:last-child { + border-right: none; + } + .tech-col-a { + background: var(--color-primary); + background: rgba(254, 212, 0, 0.08); + } + .tech-col-wp { + background: var(--color-bg-soft); + } + .tech-col-header { + padding-bottom: 24px; + margin-bottom: 24px; + border-bottom: 1px solid var(--color-gray-200); + } + .tech-col-badge { + display: inline-block; + padding: 4px 10px; + background: var(--color-black); + color: var(--color-white); + font-size: 11px; + font-weight: 800; + border-radius: var(--radius-sm); + margin-bottom: 12px; + } + .tech-col-name { + font-family: var(--font-display); + font-size: 28px; + font-weight: 900; + color: var(--color-black); + margin-bottom: 8px; + } + .tech-col-duration { + font-size: 14px; + color: var(--color-gray-600); + font-weight: 600; + } + .tech-col-desc { + font-size: 15px; + line-height: 1.6; + color: var(--color-gray-700); + margin-bottom: 20px; + } + .tech-col-best { + display: flex; + align-items: flex-start; + gap: 8px; + padding: 12px 16px; + background: var(--color-primary); + background: rgba(254, 212, 0, 0.15); + border-radius: var(--radius-md); + } + .tech-col-wp .tech-col-best { + background: rgba(13, 148, 136, 0.1); + } + .tech-col-label { + font-weight: 700; + font-size: 14px; + color: var(--color-black); + flex-shrink: 0; + } + .tech-col-value { + font-size: 14px; + color: var(--color-gray-700); + line-height: 1.5; + } + + /* ============================================ + PORTFOLIO GRID 2x2 + ============================================ */ + .portfolio-grid-2x2 { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + } + .portfolio-card-grid { + display: block; + background: var(--color-white); + border: 1px solid var(--color-gray-200); + border-radius: var(--radius-xl); + padding: 32px; + text-decoration: none; + color: inherit; + transition: all 0.3s var(--ease-out-expo); + min-height: 200px; + } + .portfolio-card-grid:hover { + border-color: var(--color-primary); + transform: translateY(-4px); + box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08); + } + .portfolio-card-top { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; + } + .portfolio-card-badge { + display: inline-block; + padding: 4px 10px; + background: var(--color-primary); + color: var(--color-black); + font-size: 11px; + font-weight: 800; + border-radius: var(--radius-sm); + text-transform: uppercase; + letter-spacing: 1px; + } + .portfolio-card-arrow { + font-size: 24px; + color: var(--color-black); + transition: transform 0.2s; + } + .portfolio-card-grid:hover .portfolio-card-arrow { + transform: translateX(4px); + } + .portfolio-card-name { + font-family: var(--font-display); + font-size: 24px; + font-weight: 800; + color: var(--color-black); + margin-bottom: 4px; + } + .portfolio-card-industry { + font-size: 13px; + color: var(--color-gray-600); + margin-bottom: 12px; + } + .portfolio-card-highlight { + font-size: 15px; + line-height: 1.5; + color: var(--color-gray-700); + } + + /* ============================================ + PRICING 3-TIER + ============================================ */ + .pricing-tiers { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 20px; + max-width: 1100px; + margin: 0 auto; + } + .pricing-tier { + position: relative; + background: var(--color-white); + border: 1px solid var(--color-gray-200); + border-radius: var(--radius-xl); + padding: 40px 32px; + transition: all 0.3s var(--ease-out-expo); + } + .pricing-tier:hover { + transform: translateY(-4px); + box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08); + } + .pricing-tier-standard { + border-color: var(--color-primary); + border-width: 2px; + transform: scale(1.04); + } + .pricing-tier-standard:hover { + transform: scale(1.04) translateY(-4px); + } + .pricing-tier-recommended { + position: absolute; + top: -14px; + left: 50%; + transform: translateX(-50%); + background: var(--color-black); + color: var(--color-white); + padding: 4px 16px; + border-radius: var(--radius-full); + font-size: 12px; + font-weight: 800; + letter-spacing: 1px; + } + .pricing-tier-header { + text-align: center; + margin-bottom: 24px; + } + .pricing-tier-badge { + display: inline-block; + padding: 4px 12px; + background: var(--color-bg-soft); + color: var(--color-gray-600); + font-size: 11px; + font-weight: 800; + border-radius: var(--radius-full); + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 16px; + } + .pricing-tier-standard .pricing-tier-badge { + background: var(--color-primary); + color: var(--color-black); + } + .pricing-tier-name { + font-family: var(--font-display); + font-size: 24px; + font-weight: 900; + color: var(--color-black); + margin-bottom: 4px; + } + .pricing-tier-desc { + font-size: 14px; + color: var(--color-gray-600); + } + .pricing-tier-price { + display: flex; + align-items: baseline; + justify-content: center; + gap: 4px; + padding: 24px 0; + border-top: 1px solid var(--color-gray-200); + border-bottom: 1px solid var(--color-gray-200); + margin-bottom: 24px; + } + .pricing-tier-currency { + font-family: var(--font-display); + font-size: 24px; + font-weight: 700; + color: var(--color-black); + } + .pricing-tier-amount { + font-family: var(--font-display); + font-size: 48px; + font-weight: 900; + color: var(--color-black); + line-height: 1; + } + .pricing-tier-period { + font-size: 14px; + color: var(--color-gray-600); + } + .pricing-tier-features { + list-style: none; + padding: 0; + margin-bottom: 24px; + } + .pricing-tier-features li { + padding: 8px 0; + font-size: 15px; + color: var(--color-gray-700); + border-bottom: 1px solid var(--color-gray-100); + } + .pricing-tier-features li:last-child { + border-bottom: none; + } + .pricing-tier-cta { + display: block; + text-align: center; + padding: 12px 24px; + background: var(--color-white); + color: var(--color-black); + border: 1.5px solid var(--color-black); + border-radius: var(--radius-full); + font-weight: 700; + text-decoration: none; + transition: all 0.2s; + } + .pricing-tier-cta:hover { + background: var(--color-black); + color: var(--color-white); + } + .pricing-tier-cta-primary { + background: var(--color-primary); + color: var(--color-black); + border-color: var(--color-primary); + } + .pricing-tier-cta-primary:hover { + background: var(--color-black); + color: var(--color-primary); + border-color: var(--color-black); + } + + /* Pricing extras (small list) */ + .pricing-extras { + max-width: 700px; + margin: 60px auto 0; + padding: 32px; + background: var(--color-white); + border: 1px solid var(--color-gray-200); + border-radius: var(--radius-xl); + } + .pricing-extras-title { + font-family: var(--font-display); + font-size: 18px; + font-weight: 800; + color: var(--color-black); + margin-bottom: 16px; + text-align: center; + } + .pricing-extras-list { + display: flex; + flex-direction: column; + gap: 12px; + } + .pricing-extra { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 0; + border-bottom: 1px solid var(--color-gray-100); + } + .pricing-extra:last-child { + border-bottom: none; + } + .pricing-extra-name { + font-size: 15px; + color: var(--color-gray-700); + } + .pricing-extra-price { + font-family: var(--font-display); + font-size: 16px; + font-weight: 800; + color: var(--color-black); + } + + /* ============================================ + FAQ ACCORDION + ============================================ */ + .faq-accordion { + max-width: 900px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 12px; + } + .faq-item { + background: var(--color-white); + border: 1px solid var(--color-gray-200); + border-radius: var(--radius-lg); + transition: all 0.2s; + } + .faq-item[open] { + border-color: var(--color-primary); + box-shadow: 0 4px 16px rgba(254, 212, 0, 0.15); + } + .faq-summary { + display: flex; + align-items: center; + gap: 16px; + padding: 20px 24px; + cursor: pointer; + list-style: none; + user-select: none; + } + .faq-summary::-webkit-details-marker { + display: none; + } + .faq-q-num { + font-family: var(--font-display); + font-size: 14px; + font-weight: 800; + color: var(--color-primary); + background: var(--color-black); + padding: 4px 10px; + border-radius: var(--radius-sm); + flex-shrink: 0; + } + .faq-q-text { + flex: 1; + font-family: var(--font-display); + font-size: 18px; + font-weight: 700; + color: var(--color-black); + } + .faq-icon { + font-size: 28px; + font-weight: 300; + color: var(--color-gray-600); + flex-shrink: 0; + transition: transform 0.2s; + line-height: 1; + } + .faq-item[open] .faq-icon { + transform: rotate(45deg); + color: var(--color-primary); + } + .faq-answer { + padding: 0 24px 24px 56px; + } + .faq-answer p { + font-size: 15px; + line-height: 1.7; + color: var(--color-gray-700); + } + + @media (max-width: 1024px) { + .hero-grid { grid-template-columns: 1fr; gap: 40px; } + .tech-comparison { grid-template-columns: 1fr; } + .tech-col { border-right: none; border-bottom: 1px solid var(--color-gray-200); } + .tech-col:last-child { border-bottom: none; } + .portfolio-grid-2x2 { grid-template-columns: 1fr; } + .pricing-tiers { grid-template-columns: 1fr; max-width: 480px; } + .pricing-tier-standard { transform: none; } + .pricing-tier-standard:hover { transform: translateY(-4px); } + } + @media (max-width: 640px) { + .service-stack-item { grid-template-columns: 1fr; gap: 16px; } + .service-stack-num { font-size: 28px; } + .hero-actions, .cta-actions { flex-direction: column; } + .hero-actions .btn, .cta-actions .btn { width: 100%; justify-content: center; } + .faq-summary { padding: 16px; gap: 12px; } + .faq-q-text { font-size: 16px; } + .faq-answer { padding: 0 16px 16px 16px; } + } + /* CTA */ .cta-content { text-align: center; max-width: 700px; margin: 0 auto; } .cta-title { font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px); font-weight: 900; color: var(--color-black); margin-bottom: 16px; }