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:
@@ -3,16 +3,19 @@ import Base from '../layouts/Base.astro';
|
||||
import Navigation from '../components/Navigation.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import PageHero from '../components/PageHero.astro';
|
||||
import Icon from '../components/Icon.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
|
||||
const faqItems = await getCollection('faq');
|
||||
const categories = ['บริการ', 'ราคา', 'ระยะเวลา', 'AI & เทคนิค', 'หลังการขาย'];
|
||||
|
||||
// Map categories to lucide icon names (semantic match, not visual emoji)
|
||||
const categoryIcons: Record<string, string> = {
|
||||
'บริการ': '💼',
|
||||
'ราคา': '💰',
|
||||
'ระยะเวลา': '⏱️',
|
||||
'AI & เทคนิค': '🤖',
|
||||
'หลังการขาย': '🛠️',
|
||||
'บริการ': 'briefcase',
|
||||
'ราคา': 'dollarSign',
|
||||
'ระยะเวลา': 'clock',
|
||||
'AI & เทคนิค': 'bot',
|
||||
'หลังการขาย': 'wrench',
|
||||
};
|
||||
---
|
||||
|
||||
@@ -31,9 +34,11 @@ const categoryIcons: Record<string, string> = {
|
||||
const items = faqItems.filter(f => f.data.category === cat);
|
||||
if (items.length === 0) return null;
|
||||
return (
|
||||
<div class="faq-category">
|
||||
<div class="faq-category reveal">
|
||||
<h2 class="category-title">
|
||||
<span class="category-icon">{categoryIcons[cat]}</span>
|
||||
<span class="category-icon">
|
||||
<Icon name={categoryIcons[cat] as any} size={18} />
|
||||
</span>
|
||||
{cat}
|
||||
</h2>
|
||||
<div class="faq-list">
|
||||
@@ -56,7 +61,9 @@ const categoryIcons: Record<string, string> = {
|
||||
<!-- Other Topics -->
|
||||
<div class="faq-category">
|
||||
<h2 class="category-title">
|
||||
<span class="category-icon">📚</span>
|
||||
<span class="category-icon">
|
||||
<Icon name="book" size={18} />
|
||||
</span>
|
||||
เรื่องอื่น ๆ ที่ลูกค้าถามบ่อย
|
||||
</h2>
|
||||
<div class="tag-cloud">
|
||||
@@ -78,23 +85,29 @@ const categoryIcons: Record<string, string> = {
|
||||
</div>
|
||||
|
||||
<!-- Quick Channels -->
|
||||
<div class="channels-section">
|
||||
<div class="channels-section reveal">
|
||||
<h2 class="channels-title">ไม่เจอคำตอบ? ถามตรง ๆ เลย</h2>
|
||||
<div class="channels-grid">
|
||||
<div class="channels-grid stagger-children">
|
||||
<a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="channel-card">
|
||||
<div class="channel-icon">💬</div>
|
||||
<div class="channel-icon">
|
||||
<Icon name="message" size={28} />
|
||||
</div>
|
||||
<h3 class="channel-name">LINE</h3>
|
||||
<p class="channel-handle">@moreminimore</p>
|
||||
<p class="channel-time">ตอบใน 30 นาที (เวลาทำการ)</p>
|
||||
</a>
|
||||
<a href="tel:0809955945" class="channel-card">
|
||||
<div class="channel-icon">📞</div>
|
||||
<div class="channel-icon">
|
||||
<Icon name="phone" size={28} />
|
||||
</div>
|
||||
<h3 class="channel-name">โทร</h3>
|
||||
<p class="channel-handle">080-995-5945</p>
|
||||
<p class="channel-time">จ-ศ 09:00-18:00</p>
|
||||
</a>
|
||||
<a href="mailto:contact@moreminimore.com" class="channel-card">
|
||||
<div class="channel-icon">📧</div>
|
||||
<div class="channel-icon">
|
||||
<Icon name="mail" size={28} />
|
||||
</div>
|
||||
<h3 class="channel-name">Email</h3>
|
||||
<p class="channel-handle">contact@moreminimore.com</p>
|
||||
<p class="channel-time">ตอบภายใน 1 วัน</p>
|
||||
|
||||
Reference in New Issue
Block a user