refactor(hire): replace emoji icons with Lucide React components for improved scalability and consistency

src/pages/hire.astro

@@ -4,6 +4,7 @@ import GlassHeader from "@/components/GlassHeader";
 import Footer from "@/components/Footer";
 import Container from "@/components/ui/Container.astro";
 import { useTranslations } from "@/i18n/utils";
+import { Users, Wrench, Lightbulb, Handshake, CircleDollarSign, Clock, Target, Check, Calendar, Mail, Radio, Zap, Globe, Smartphone, ShoppingCart, Layout as LayoutIcon, ClipboardList } from "lucide-react";
 import type { Lang } from "@/types/i18n";
 import { defaultLang } from "@/i18n/ui";
 
@@ -42,7 +43,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
         <div class="page-content-main">
           <div class="flex items-center gap-4 mb-8">
             <div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center">
-              <span class="text-2xl">👥</span>
+              <Users className="w-6 h-6 text-primary" />
             </div>
             <h2 class="text-3xl font-bold">
               {lang === 'zh' ? '我与谁合作' : 'Who I Work With'}
@@ -104,7 +105,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
         <div class="page-content-main">
           <div class="flex items-center gap-4 mb-8">
             <div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
-              <span class="text-2xl">🛠️</span>
+              <Wrench className="w-6 h-6 text-blue-500" />
             </div>
             <h2 class="text-3xl font-bold">
               {lang === 'zh' ? '我能构建什么' : 'What I Build'}
@@ -115,7 +116,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
             <div class="page-surface p-8">
               <div class="flex items-start gap-4">
                 <div class="w-12 h-12 bg-gradient-to-br from-primary to-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
-                  <span class="text-2xl">⚡</span>
+                  <Zap className="w-6 h-6 text-white" />
                 </div>
                 <div>
                   <h3 class="text-xl font-bold mb-2">AI 产品与应用</h3>
@@ -131,7 +132,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
             <div class="page-surface p-8">
               <div class="flex items-start gap-4">
                 <div class="w-12 h-12 bg-gradient-to-br from-green-600 to-teal-600 rounded-xl flex items-center justify-center flex-shrink-0">
-                  <span class="text-2xl">🌐</span>
+                  <Globe className="w-6 h-6 text-white" />
                 </div>
                 <div>
                   <h3 class="text-xl font-bold mb-2">Web 应用</h3>
@@ -147,7 +148,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
             <div class="page-surface p-8">
               <div class="flex items-start gap-4">
                 <div class="w-12 h-12 bg-gradient-to-br from-orange-600 to-red-600 rounded-xl flex items-center justify-center flex-shrink-0">
-                  <span class="text-2xl">📱</span>
+                  <Smartphone className="w-6 h-6 text-white" />
                 </div>
                 <div>
                   <h3 class="text-xl font-bold mb-2">全栈产品</h3>
@@ -170,7 +171,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
         <div class="page-content-main">
           <div class="flex items-center gap-4 mb-8">
             <div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
-              <span class="text-2xl">📋</span>
+              <ClipboardList className="w-6 h-6 text-green-500" />
             </div>
             <h2 class="text-3xl font-bold">
               {lang === 'zh' ? '合作模式' : 'Engagement Models'}
@@ -180,7 +181,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
           <div class="grid md:grid-cols-3 gap-6">
             <div class="page-surface p-6 text-center">
               <div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">
-                <span class="text-2xl">🤝</span>
+                <Handshake className="w-6 h-6 text-green-600 dark:text-green-400" />
               </div>
               <h3 class="text-lg font-bold mb-2">
                 {lang === 'zh' ? '技术合伙人' : 'Technical Co-founder'}
@@ -194,7 +195,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
 
             <div class="page-surface p-6 text-center">
               <div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">
-                <span class="text-2xl">💰</span>
+                <CircleDollarSign className="w-6 h-6 text-blue-600 dark:text-blue-400" />
               </div>
               <h3 class="text-lg font-bold mb-2">
                 {lang === 'zh' ? '项目制' : 'Project-based'}
@@ -208,7 +209,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
 
             <div class="page-surface p-6 text-center">
               <div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center mx-auto mb-4">
-                <span class="text-2xl">⏰</span>
+                <Clock className="w-6 h-6 text-primary" />
               </div>
               <h3 class="text-lg font-bold mb-2">
                 {lang === 'zh' ? '咨询/顾问' : 'Consulting'}
@@ -230,7 +231,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
         <div class="page-content-main">
           <div class="flex items-center gap-4 mb-8">
             <div class="w-12 h-12 bg-yellow-500/20 rounded-xl flex items-center justify-center">
-              <span class="text-2xl">🎯</span>
+              <Target className="w-6 h-6 text-yellow-600 dark:text-yellow-400" />
             </div>
             <h2 class="text-3xl font-bold">
               {lang === 'zh' ? '工作方式' : 'Delivery Style'}
@@ -240,7 +241,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
           <div class="page-surface p-8">
             <ul class="space-y-4">
               <li class="flex items-start gap-3">
-                <span class="text-green-500 text-xl">✓</span>
+                <Check className="w-6 h-6 text-green-500 shrink-0 mt-0.5" />
                 <div>
                   <strong class="block mb-1">
                     {lang === 'zh' ? '敏捷迭代' : 'Agile Iteration'}
@@ -253,7 +254,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
                 </div>
               </li>
               <li class="flex items-start gap-3">
-                <span class="text-green-500 text-xl">✓</span>
+                <Check className="w-6 h-6 text-green-500 shrink-0 mt-0.5" />
                 <div>
                   <strong class="block mb-1">
                     {lang === 'zh' ? '透明沟通' : 'Transparent Communication'}
@@ -266,7 +267,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
                 </div>
               </li>
               <li class="flex items-start gap-3">
-                <span class="text-green-500 text-xl">✓</span>
+                <Check className="w-6 h-6 text-green-500 shrink-0 mt-0.5" />
                 <div>
                   <strong class="block mb-1">
                     {lang === 'zh' ? '代码质量' : 'Code Quality'}
@@ -279,14 +280,14 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
                 </div>
               </li>
               <li class="flex items-start gap-3">
-                <span class="text-green-500 text-xl">✓</span>
+                <Check className="w-6 h-6 text-green-500 shrink-0 mt-0.5" />
                 <div>
                   <strong class="block mb-1">
                     {lang === 'zh' ? '产品思维' : 'Product Thinking'}
                   </strong>
                   <p class="text-muted-foreground text-sm">
                     {lang === 'zh'
-                      ? '不只是写代码，还思考产品价值，用户体验和业务目标'
+                      ? '不只是写代码，还思考产品价值，用户体验 and 业务目标'
                       : 'Not just writing code, but also thinking about product value, user experience, and business goals'}
                   </p>
                 </div>
@@ -303,7 +304,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
         <div class="page-content-main">
           <div class="flex items-center gap-4 mb-8">
             <div class="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center">
-              <span class="text-2xl">📅</span>
+              <Calendar className="w-6 h-6 text-red-500" />
             </div>
             <h2 class="text-3xl font-bold">
               {lang === 'zh' ? '当前可用性' : 'Availability'}
@@ -355,14 +356,14 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
               href="mailto:zhaoguiyang18@gmail.com"
               class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
             >
-              <span>📧</span>
+              <Mail className="w-5 h-5" />
               {lang === 'zh' ? '发送邮件' : 'Send Email'}
             </a>
             <a
               href={lang === 'zh' ? '/zh/now' : '/now'}
               class="border border-primary text-primary hover:bg-primary hover:text-white px-8 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
             >
-              <span>📡</span>
+              <Radio className="w-5 h-5" />
               {lang === 'zh' ? '了解更多关于我' : 'Learn More About Me'}
             </a>
           </div>