feat: replace all emojis with professional lucide-style SVG icon library

Build a curated 50-icon lucide library (Icon.astro + icon-paths.ts) and
replace every emoji across the site (~50 occurrences in 9 files):
- index.astro: 3 problem cards (message, trendingDown, globe)
- about.astro: 4 value cards (target, users, clock, shield)
- portfolio.astro: 7 industry filter buttons (factory, package, scale,
  graduationCap, trendingUp, pen, shoppingCart, layers)
- services/[slug].astro: ~25 feature/target/service icons
- services/index.astro: 6 decision-row tags + phone icon in CTA
- faq.astro: 5 category icons, 3 channel cards
- contact.astro: 3 channel picker, 5 info column, form options data-driven,
  checkCircle success
- Footer.astro: 3 contact icons (phone, mail, mapPin)
- Hero.astro: award icon in trust strip

Add icon wrapper styles to global.css (.problem-icon, .value-icon,
.channel-pick-icon, .info-icon, .channel-icon, .category-icon,
.feature-icon, .target-icon, .success-icon, .contact-icon, .btn-icon,
.filter-icon) — yellow square/circle backgrounds, dark text, consistent
sizing.

Build: 18 pages, 0 errors
This commit is contained in:
Macky
2026-06-04 09:20:43 +07:00
parent 6701c462ee
commit 0f79808a43
12 changed files with 770 additions and 109 deletions

View File

@@ -54,7 +54,7 @@ const formattedDate = post.data.date.toLocaleDateString('th-TH', {
<section class="section article-section">
<div class="container">
<div class="article-grid">
<div class="article-grid reveal">
<article class="article-content">
<div class="article-body">
<Content />

View File

@@ -21,7 +21,7 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
{sortedPosts.length > 0 && (
<section class="featured-section section-soft">
<div class="container">
<a href={`/blog/${sortedPosts[0].slug}`} class="featured-card">
<a href={`/blog/${sortedPosts[0].id}`} class="featured-card">
<div class="featured-image">
{sortedPosts[0].data.image && (
<img src={sortedPosts[0].data.image} alt={sortedPosts[0].data.title} loading="eager" />
@@ -53,7 +53,7 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
<div class="blog-grid">
{sortedPosts.slice(1).map((post, i) => (
<a href={`/blog/${post.slug}`} class="blog-card" style={`--delay: ${i * 0.1}s`}>
<a href={`/blog/${post.id}`} class="blog-card" style={`--delay: ${i * 0.1}s`}>
<div class="blog-image">
{post.data.image && (
<img src={post.data.image} alt={post.data.title} loading="lazy" />
@@ -75,7 +75,7 @@ const sortedPosts = blogPosts.sort((a, b) => b.data.date.valueOf() - a.data.date
<section class="section section-yellow cta-section">
<div class="container">
<div class="cta-content">
<div class="cta-content reveal">
<h2 class="cta-title">ต้องการความช่วยเหลือ?</h2>
<p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และให้คำแนะนำ</p>
<div class="cta-actions">