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

@@ -3,6 +3,7 @@
* MOREMINIMORE - FOOTER COMPONENT (LIGHT THEME)
* White bg + dark text + black-text logo (matches new light theme)
*/
import Icon from './Icon.astro';
const currentYear = new Date().getFullYear();
@@ -20,6 +21,7 @@ const serviceLinks = [
{ label: 'AI Automation', href: '/services/automation' },
{ label: 'Tech Consult', href: '/services/ai-consult' },
];
---
<footer class="footer">
@@ -85,15 +87,15 @@ const serviceLinks = [
<div class="footer-col footer-contact">
<h4 class="footer-title">ติดต่อเรา</h4>
<div class="contact-item">
<span class="contact-icon">📞</span>
<span class="contact-icon"><Icon name="phone" size={14} /></span>
<a href="tel:0809955945">080-995-5945</a>
</div>
<div class="contact-item">
<span class="contact-icon">✉️</span>
<span class="contact-icon"><Icon name="mail" size={14} /></span>
<a href="mailto:contact@moreminimore.com">contact@moreminimore.com</a>
</div>
<div class="contact-item">
<span class="contact-icon">📍</span>
<span class="contact-icon"><Icon name="mapPin" size={14} /></span>
<span>สมุทรสาคร, ประเทศไทย</span>
</div>