diff --git a/src/pages/services/[slug].astro b/src/pages/services/[slug].astro index 5bcc370..e083809 100644 --- a/src/pages/services/[slug].astro +++ b/src/pages/services/[slug].astro @@ -32,36 +32,76 @@ const serviceData: Record = { titleAccent: 'เปลี่ยนแปลงเองได้', titleAccent2: 'ด้วย AI', desc: 'เว็บไซต์ที่คุณแก้ไขเองได้ง่าย ไม่ต้องรอเราทุกครั้ง พร้อม AI ช่วยสร้างเนื้อหาใหม่ ๆ ให้ทันที + GEO ติด ChatGPT, Perplexity, AI Search', - features: [ - { icon: 'pen', title: 'แก้ไขเองได้ง่าย', desc: 'ระบบหลังบ้านใช้ง่าย' }, - { icon: 'bot', title: 'AI ช่วยสร้างเนื้อหา', desc: 'สั่ง AI เขียนบทความได้ทันที' }, - { icon: 'search', title: 'GEO ติด AI Search', desc: 'ติด ChatGPT, Perplexity' }, - { icon: 'shield', title: 'Server คุณภาพสูง', desc: 'เว็บโหลดเร็ว ปลอดภัย' }, + whyUs: [ + { num: '01', title: 'ทำเสร็จไว', desc: 'เว็บ Astro 14-30 วัน · WordPress 1-3 เดือน' }, + { num: '02', title: 'แก้เองได้', desc: 'ลูกค้าดูแลเนื้อหาเอง ไม่ต้องพึ่งเราทุกครั้ง' }, + { num: '03', title: 'ติด Google + AI', desc: 'SEO + GEO ติด ChatGPT, Perplexity, Google AI' }, + { num: '04', title: 'Server ฟรีปีแรก', desc: 'พร้อม SSL และ Domain .com ปีแรก' }, ], - included: ['เว็บไซต์พร้อมใช้งาน', 'SSL ฟรี', 'โดเมน', 'Analytics'], - targets: [ - { icon: 'building', title: 'SME / ธุรกิจขนาดเล็ก', desc: 'ธุรกิจท้องถิ่น ร้านค้าปลีก บริการต่าง ๆ ที่ต้องการเว็บไซต์ในราคาที่เข้าถึงได้' }, - { icon: 'shoppingCart', title: 'ร้านค้าออนไลน์', desc: 'ธุรกิจ E-commerce ที่ต้องการขายสินค้าออนไลน์ พร้อมระบบตะกร้าและชำระเงินครบวงจร' }, - { icon: 'briefcase', title: 'บริษัท / องค์กร', desc: 'บริษัทที่ต้องการเว็บไซต์องค์กร เว็บไซต์แนะนำบริษัท หรือเว็บไซต์ในระบบ Intranet' }, + services: [ + { + icon: 'pen', span: 6, surface: 'mint', + title: 'แก้ไขเนื้อหาง่าย ไม่ต้องมีความรู้เทคนิค', + bullets: [ + 'ระบบหลังบ้านใช้ง่าย เปลี่ยนข้อความ รูปภาพ สินค้า ได้เอง', + 'อบรมการใช้งานให้ทีมของคุณ ใช้งานได้ทันที', + 'มีคู่มือ + วิดีโอประกอบ ทบทวนได้ทุกเมื่อ', + ], + }, + { + icon: 'bot', span: 6, surface: 'yellow', + title: 'AI ช่วยสร้างเนื้อหา + แนะนำการปรับปรุง', + bullets: [ + 'สั่ง AI เขียนบทความ SEO + GEO ได้ทันที', + 'AI แนะนำหัวข้อบทความใหม่ที่ตรงกับลูกค้าของคุณ', + 'AI วิเคราะห์เนื้อหาเดิม บอกจุดที่ควรปรับ', + ], + }, + { + icon: 'search', span: 6, surface: 'purple-soft', + title: 'SEO + GEO ติด Google และ AI Search', + bullets: [ + 'ติด ChatGPT, Perplexity, Google AI Overviews', + 'ถูกอ้างอิงเมื่อลูกค้าถาม AI เกี่ยวกับสินค้าของคุณ', + 'โครงสร้างเว็บไซต์ออกแบบมาเพื่อ AI อ่านเข้าใจ', + ], + }, + { + icon: 'shield', span: 6, surface: 'teal-soft', + title: 'Server + SSL + Backup ครบ ดูแลให้', + bullets: [ + 'Server เร็ว โหลดไว ไม่มี downtime บ่อย', + 'SSL ฟรี เว็บปลอดภัย + Google จัดอันดับดี', + 'Backup อัตโนมัติทุกวัน ไม่ต้องกลัวข้อมูลหาย', + ], + }, ], techOptions: [ - { badge: 'A', name: 'Astro', desc: 'เหมาะสำหรับเว็บไซต์ทั่วไป / Corporate เน้น AI และ SEO โหลดเร็ว ประสิทธิภาพสูง บล็อก / เว็บบริษัท', duration: '14-30 วัน' }, - { badge: 'WP', name: 'WordPress', desc: 'เหมาะสำหรับเว็บขายของ (E-commerce) เว็บไซต์ที่ซับซ้อน มีระบบหลังบ้านซับซ้อน ต้องการ Plugin เยอะ', duration: '2-4 เดือน' }, + { badge: 'A', name: 'Astro', surface: 'yellow', desc: 'เหมาะสำหรับเว็บไซต์ทั่วไป / Corporate เน้น AI และ SEO โหลดเร็ว ประสิทธิภาพสูง บล็อก / เว็บบริษัท', duration: '14-30 วัน', best: 'ธุรกิจที่ต้องการเว็บเร็ว ติด Google + AI Search' }, + { badge: 'WP', name: 'WordPress', surface: 'soft', desc: 'เหมาะสำหรับเว็บขายของ (E-commerce) เว็บไซต์ที่ซับซ้อน มีระบบหลังบ้านซับซ้อน ต้องการ Plugin เยอะ', duration: '2-4 เดือน', best: 'ร้านค้าออนไลน์ เว็บที่ต้องการ Plugin หลากหลาย' }, ], pricing: [ - { label: 'เว็บไซต์ Astro (AI Ready)', price: 'เริ่มต้น ฿10,000' }, - { label: 'เว็บไซต์ WordPress', price: 'เริ่มต้น ฿15,000' }, - { label: 'Landing Page', price: 'เริ่มต้น ฿5,000' }, - { label: 'Server Hosting', price: '฿5,000/ปี' }, - { label: 'Domain .com', price: '฿500/ปี' }, + { label: 'เว็บไซต์ Astro (AI Ready)', price: 'เริ่มต้น ฿10,000', surface: 'mint', bestFor: 'เว็บบริษัท เว็บ Landing Page เน้น SEO + AI' }, + { label: 'เว็บไซต์ WordPress', price: 'เริ่มต้น ฿15,000', surface: 'yellow', bestFor: 'ร้านค้าออนไลน์ เว็บ E-commerce ที่ต้องการ Plugin' }, + { label: 'Landing Page', price: 'เริ่มต้น ฿5,000', surface: 'purple-soft', bestFor: 'หน้าเดียวจบ ใช้ยิงแอดหรือทดสอบตลาด' }, + { label: 'Server Hosting', price: '฿5,000/ปี', surface: 'teal-soft', bestFor: 'Server คุณภาพสูง ดูแลให้' }, + { label: 'Domain .com', price: '฿500/ปี', surface: 'soft', bestFor: 'ต่ออายุโดเมน .com / .co.th' }, + ], + realPortfolio: [ + { name: 'Dataroot', url: 'https://erp.dataroot.asia', industry: 'ตัวแทนจำหน่าย Odoo ERP', highlight: 'หน้าแรกโหลดไว + ติด Google ได้ผลดี' }, + { name: 'Baofuling Shop', url: 'https://baofulingshop.com', industry: 'E-commerce สินค้า Skincare', highlight: 'หน้าเดียวจบ สั่งซื้อง่าย ดูแลเองได้' }, + { name: 'Lungfinler', url: 'https://lungfinler.com', industry: 'Digital Agency', highlight: 'แสดงผลงาน + บล็อก ใช้ CMS ได้' }, + { name: 'ทวนทอง 99', url: 'https://tuanthong99.com', industry: 'สมุนไพรไทย', highlight: 'ระบบสั่งซื้อ + จัดการสินค้า ดูแลเองได้' }, ], faqs: [ - { q: 'แก้ไขเว็บเองยากไหม?', a: 'ไม่ยากเลย สำหรับ Astro การแก้ไขเนื้อหาจะเน้นการคุยกับ AI ให้ช่วยสร้างและปรับแต่งเนื้อหา ส่วน WordPress มาพร้อมระบบหลังบ้านที่มีหน้าตาการใช้งานง่าย คุณสามารถเปลี่ยนข้อความ รูปภาพ สินค้า ได้ด้วยตัวเองโดยไม่ต้องมีความรู้ทางเทคนิค' }, - { q: 'มีค่าใช้จ่ายอะไรเพิ่มเติมไหม?', a: 'ค่าบริการ Server และโดเมนจะฟรีในปีแรก และจะมีค่าใช้จ่ายในปีถัดไป ค่าบริการ Server จะขึ้นอยู่กับความซับซ้อนของเว็บไซต์และจำนวนผู้เข้าชม' }, - { q: 'Server ดูแลให้ไหม?', a: 'เราดูแลเรื่อง Server ให้ครบวงจร รวมถึงการปรับจูนระบบให้มีประสิทธิภาพสูงสุด ลูกค้าจะจ่ายค่า Server เพิ่มเฉพาะกรณีที่มีผู้เข้าเว็บใช้งานสูงมาก ระดับ 100,000 คนต่อเดือนขึ้นไป' }, - { q: 'ทำเว็บขายของ (E-commerce) ได้ไหม?', a: 'ทำได้แน่นอน เราใช้ WordPress เป็นพื้นฐานในการพัฒนาเว็บไซต์ E-commerce พร้อมระบบตะกร้าสินค้า ชำระเงิน ติดตามสินค้า และระบบหลังบ้านจัดการสินค้าครบวงจร' }, - { q: 'ต้องมีความรู้ทางเทคนิคไหม?', a: 'ไม่จำเป็นเลย เราดูแลทุกอย่างตั้งแต่ต้นจนจบ ตั้งแต่การออกแบบ พัฒนา ไปจนถึงการติดตั้งและส่งมอบ พร้อมทั้งอบรมการใช้งานให้ทีมของคุณสามารถใช้งานระบบได้อย่างมั่นใจ' }, - { q: 'GEO คืออะไร?', a: 'GEO (Generative Engine Optimization) คือการปรับแต่งเนื้อหาและโครงสร้างเว็บไซต์ให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews ทำให้ธุรกิจของคุณปรากฏในคำตอบของ AI' }, + { q: 'แก้ไขเว็บเองยากไหม?', a: 'ไม่ยากเลย สำหรับ Astro การแก้ไขเนื้อหาจะเน้นการคุยกับ AI ให้ช่วยสร้างและปรับแต่งเนื้อหา คุณพิมพ์สั่ง AI ได้เลยว่าอยากได้เนื้อหาแบบไหน ส่วน WordPress มาพร้อมระบบหลังบ้านที่มีหน้าตาการใช้งานง่าย เหมือนใช้ Word คุณสามารถเปลี่ยนข้อความ รูปภาพ สินค้า ได้ด้วยตัวเองโดยไม่ต้องมีความรู้ทางเทคนิค และทีมเราจะอบรมการใช้งานให้ก่อนส่งมอบ' }, + { q: 'มีค่าใช้จ่ายอะไรเพิ่มเติมไหม?', a: 'ค่าบริการ Server และโดเมนจะฟรีในปีแรก คุณจ่ายเฉพาะค่าทำเว็บไซต์ และจะมีค่าใช้จ่ายในปีถัดไป: ค่า Server ประมาณ 5,000 บาท/ปี + ค่าโดเมน 500 บาท/ปี ค่าบริการ Server จะขึ้นอยู่กับความซับซ้อนของเว็บไซต์และจำนวนผู้เข้าชม ถ้าเว็บมีคนเข้าน้อยกว่า 100,000 คน/เดือน ค่า Server ไม่เพิ่ม' }, + { q: 'Server ดูแลให้ไหม?', a: 'เราดูแลเรื่อง Server ให้ครบวงจร รวมถึงการปรับจูนระบบให้มีประสิทธิภาพสูงสุด อัปเดตความปลอดภัย และแก้ไขปัญหาเบื้องต้น ลูกค้าจะจ่ายค่า Server เพิ่มเฉพาะกรณีที่มีผู้เข้าเว็บใช้งานสูงมาก ระดับ 100,000 คนต่อเดือนขึ้นไป หรือถ้าเว็บมีฟีเจอร์ที่ต้องใช้ทรัพยากร Server สูง เช่น AI Chatbot ที่คุยกับลูกค้าจำนวนมาก' }, + { q: 'ทำเว็บขายของ (E-commerce) ได้ไหม?', a: 'ทำได้แน่นอน เราใช้ WordPress + WooCommerce เป็นพื้นฐานในการพัฒนาเว็บไซต์ E-commerce พร้อมระบบตะกร้าสินค้า ชำระเงิน (PromptPay / โอนผ่านธนาคาร / บัตรเครดิต) ติดตามสินค้า และระบบหลังบ้านจัดการสินค้าครบวงจร คุณสามารถเพิ่มสินค้า ลดราคา จัดโปรโมชั่น ได้ด้วยตัวเอง' }, + { q: 'ต้องมีความรู้ทางเทคนิคไหม?', a: 'ไม่จำเป็นเลย เราดูแลทุกอย่างตั้งแต่ต้นจนจบ ตั้งแต่การออกแบบ พัฒนา ไปจนถึงการติดตั้งและส่งมอบ พร้อมทั้งอบรมการใช้งานให้ทีมของคุณสามารถใช้งานระบบได้อย่างมั่นใจ ถ้าเจอปัญหาการใช้งาน ทีมซัพพอร์ตพร้อมช่วยทันที' }, + { q: 'GEO คืออะไร?', a: 'GEO (Generative Engine Optimization) คือการปรับแต่งเนื้อหาและโครงสร้างเว็บไซต์ให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews ทำให้ธุรกิจของคุณปรากฏในคำตอบของ AI เมื่อมีคนถามเกี่ยวกับสินค้าหรือบริการในกลุ่มของคุณ เป็นอีกช่องทางที่จะดึงลูกค้าเข้ามา' }, + { q: 'เว็บจะติด Google ในกี่เดือน?', a: 'ขึ้นอยู่กับคีย์เวิร์ดและการแข่งขัน สำหรับคีย์เวิร์ดที่มีการแข่งขันปานกลาง ประมาณ 2-3 เดือนจะเริ่มเห็นผล ส่วนคีย์เวิร์ดที่แข่งขันสูงอาจใช้เวลา 6 เดือนขึ้นไป เราจะวิเคราะห์คีย์เวิร์ดที่เหมาะสมก่อนเริ่มทำ SEO' }, + { q: 'ถ้าอยากเพิ่มฟีเจอร์ทีหลัง ทำได้ไหม?', a: 'ได้แน่นอน เว็บไซต์ที่เราทำออกแบบมาให้ขยายได้ คุณสามารถเพิ่มฟีเจอร์ เช่น ระบบจองคิว ระบบสมาชิก ระบบชำระเงินเพิ่ม หรือเชื่อมต่อกับ API ภายนอก ทีมเราจะประเมินราคาเพิ่มเติมตามฟีเจอร์ที่ต้องการ แจ้งราคาก่อนเริ่มงานทุกครั้ง' }, ], }, 'marketing': { @@ -178,132 +218,93 @@ const featureList = data.features || data.services || []; ทัก LINE + -
- ✓ ปรึกษาฟรี - {isWebDev && ✓ Server ฟรีปีแรก} - {isAutomation && ✓ เชื่อมต่อระบบได้ทุกที่} - {isMarketing && ✓ AI วิเคราะห์} - {isTechConsult && ✓ ทีมงานมืออาชีพ} - ✓ ราคาเหมาะสม + +
+
ทำไมต้องเลือกเรา
+
+ {data.whyUs && data.whyUs.map((w: any) => ( +
+
{w.num}
+
+
{w.title}
+
{w.desc}
+
+
+ ))}
- - -
- - -
    - {featureList.slice(0, 4).map((f) => ( -
  • -
    {String(featureList.indexOf(f) + 1).padStart(2, '0')}
    -
    - {f.title} - {f.desc || f.items?.[0]} -
    -
    • - ))} -
- - -
- -
- - -
-
- {isTechConsult ? 'บริการของเรา' : 'ความสามารถ'} -

- {data.title} {data.titleAccent} -

-
- - - {featureList.map((f: any, i: number) => { - // Asymmetric span + surface rotation per the bento design system - const span = i % 3 === 0 ? 8 : 4; - const surfaces = ['yellow', 'purple-soft', 'mint', 'soft', 'teal', 'soft'] as const; - const surface = surfaces[i % surfaces.length]; - return ( - -

{f.desc || f.items?.join(' · ')}

- - ); - })} - -
-
- - - {data.targets && ( -
- - + + {data.services && ( +
+ +
- เหมาะกับใคร? -

ธุรกิจทุกประเภท

+ บริการที่คุณได้รับ +

+ ทุกบริการที่เว็บไซต์ต้องมี +

+

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

- {data.targets.map((t: any, i: number) => { - // First target takes 12 to lead, then 6+6 for remaining pair - const span = i === 0 ? 12 : 6; - const surfaces = ['yellow', 'soft', 'purple-soft'] as const; - const surface = surfaces[i % surfaces.length]; - return ( - -

{t.desc}

- - ); - })} + {data.services.map((s: any) => ( + +
    + {s.bullets.map((b: string) =>
  • {b}
    • )} +
+ + ))}
)} - - {(data.included || data.techOptions) && ( -
+ + {(data.realPortfolio || data.techOptions) && ( +
- +
- {data.included && ( + + {data.techOptions && ( <>
- สิ่งที่ได้รับ -

ทุกเว็บไซต์มาพร้อมให้ครบ

+ เลือกระบบ +

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

+

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

- {data.included.map((item: string, i: number) => ( - -

รวมอยู่ในแพ็คเกจ — ไม่มีค่าใช้จ่ายเพิ่ม

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

{t.desc}

+

{t.duration}

+

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

 ))} - -

เริ่มต้น ฿15,500*

-

*ราคาขึ้นอยู่กับความซับซ้อนของเว็บไซต์

- )} - {data.techOptions && ( + {data.realPortfolio && ( <> -
- เลือกระบบ -

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

+
+ ผลงานจริง +

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

+

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

- {data.techOptions.map((t: any, i: number) => ( - -

{t.desc}

-

{t.duration}

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

{p.industry}

+

{p.highlight}

+ เยี่ยมชมเว็บไซต์ → ))} @@ -313,9 +314,9 @@ const featureList = data.features || data.services || [];
)} - + {data.pricing && ( -
+
@@ -326,106 +327,35 @@ const featureList = data.features || data.services || [];
- {data.pricing.map((p: any, i: number) => { - const surfaces = ['white', 'soft', 'yellow', 'mint', 'purple-soft'] as const; - const surface = surfaces[i % surfaces.length]; - return ( - - - ); - })} + {data.pricing.map((p: any) => ( + +

✓ {p.bestFor}

+ + ))}
)} - - {data.aiFeatures && ( -
- - -
-
- AI Analytics -

AI วิเคราะห์ทุกความเคลื่อนไหว

-
- - - {data.aiFeatures.map((f: string, i: number) => { - // Asymmetric: first item 12, then 6+6 paired - const span = i === 0 ? 12 : 6; - const surfaces = ['yellow', 'soft', 'mint', 'purple-soft'] as const; - const surface = surfaces[i % surfaces.length]; - return ( - - - ); - })} - -
-
- )} - - - {data.whyUs && ( -
- - -
-
- ทำไมต้องเลือกเรา? -

ความเชี่ยวชาญที่คุณไว้วางใจได้

-
- - - {data.whyUs.map((w: any, i: number) => { - const surfaces = ['yellow', 'soft', 'purple-soft'] as const; - const surface = surfaces[i % surfaces.length]; - return ( - -

{w.desc}

- - ); - })} - -
-
- )} - - +
- - -
- - -
- -
- - -
-
- - -
FAQ

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

+

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

{data.faqs.map((faq: any, i: number) => { - // Hero: first question 12-span, then alternating 8+4 for visual tension 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'] as const; + const surfaces = ['yellow', 'soft', 'purple-soft', 'mint', 'teal-soft', 'soft'] as const; const surface = surfaces[i % surfaces.length]; return ( @@ -436,6 +366,16 @@ const featureList = data.features || data.services || []; ); })} + +
+
+ รายละเอียดเพิ่มเติม +

เนื้อหาจากเอกสารบริการ

+
+
+ +
+
@@ -624,6 +564,123 @@ const featureList = data.features || data.services || []; .mdx-content :global(li) { margin-bottom: 4px; } .mdx-content :global(strong) { color: var(--color-black); } + /* MDX card (new) */ + .mdx-content-card { + background: var(--color-white); + border: 1px solid var(--color-gray-200); + border-radius: var(--radius-xl); + padding: 40px; + font-size: 16px; + line-height: 1.7; + color: var(--color-gray-700); + } + .mdx-content-card :global(h2) { font-family: var(--font-display); font-size: 24px; font-weight: 800; margin: 24px 0 12px; color: var(--color-black); } + .mdx-content-card :global(h3) { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 16px 0 8px; color: var(--color-black); } + .mdx-content-card :global(p) { margin-bottom: 12px; } + .mdx-content-card :global(ul) { padding-left: 20px; margin-bottom: 12px; } + .mdx-content-card :global(li) { margin-bottom: 4px; } + .mdx-content-card :global(strong) { color: var(--color-black); } + + /* Hero trust grid (right column) */ + .hero-trust-title { + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 2px; + color: var(--color-gray-600); + margin-bottom: 20px; + } + .hero-trust-grid { + display: grid; + grid-template-columns: 1fr; + gap: 16px; + } + .hero-trust-card { + display: flex; + align-items: flex-start; + gap: 16px; + padding: 20px 24px; + background: var(--color-white); + border: 1px solid var(--color-gray-200); + border-radius: var(--radius-lg); + transition: all 0.3s var(--ease-out-expo); + } + .hero-trust-card:hover { + border-color: var(--color-primary); + transform: translateX(4px); + } + .hero-trust-num { + font-family: var(--font-display); + font-size: 24px; + font-weight: 900; + color: var(--color-primary); + line-height: 1; + flex-shrink: 0; + } + .hero-trust-name { + font-family: var(--font-display); + font-size: 18px; + font-weight: 800; + color: var(--color-black); + margin-bottom: 4px; + } + .hero-trust-desc { + font-size: 14px; + color: var(--color-gray-600); + line-height: 1.5; + } + + /* Service bullets inside bento tiles */ + .service-bullets { + list-style: none; + padding: 0; + margin-top: 8px; + } + .service-bullets li { + position: relative; + padding-left: 20px; + font-size: 15px; + line-height: 1.6; + margin-bottom: 10px; + color: inherit; + } + .service-bullets li::before { + content: '✓'; + position: absolute; + left: 0; + top: 0; + color: currentColor; + font-weight: 800; + opacity: 0.7; + } + + /* Tile CTA link (used in real portfolio tiles) */ + .tile-cta-link { + display: inline-block; + margin-top: 16px; + padding: 8px 16px; + background: var(--color-black); + color: var(--color-white); + border-radius: var(--radius-full); + font-size: 14px; + font-weight: 700; + text-decoration: none; + transition: all 0.2s var(--ease-out-expo); + } + .tile-cta-link:hover { + background: var(--color-primary); + color: var(--color-black); + transform: translateX(4px); + } + + /* Tile body detail (highlighted text in portfolio tile) */ + .tile-body-detail { + font-size: 15px; + line-height: 1.6; + color: var(--color-gray-700); + margin: 8px 0; + } + /* 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; }