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

src/components/ProjectCard.astro

@@ -1,6 +1,7 @@
 ---
 import { useTranslations } from "@/i18n/utils";
 import type { Lang } from "@/types/i18n";
+import * as LucideIcons from "lucide-react";
 
 interface Props {
   project: {
@@ -31,6 +32,9 @@ interface Props {
 const { project, lang, showStatus = false } = Astro.props;
 const t = useTranslations(lang);
 
+// 渲染 Lucide 图标的逻辑
+const IconComponent = (LucideIcons as any)[project.icon];
+
 const statusClassMap = {
   building: "bg-amber-500/15 text-amber-700 dark:text-amber-300 border-amber-500/30",
   completed: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 border-emerald-500/30",
@@ -49,7 +53,13 @@ const statusColor = statusClassMap[project.status as keyof typeof statusClassMap
   <div class="relative aspect-[16/10] overflow-hidden">
     <div class={`absolute inset-0 bg-gradient-to-br ${project.image?.bg || 'from-primary/20 to-purple-500/20'} transition-transform duration-700 group-hover:scale-110`}></div>
     <div class="absolute inset-0 flex items-center justify-center">
+      {IconComponent ? (
+        <div class="p-5 rounded-2xl bg-white/10 backdrop-blur-md border border-white/20 shadow-2xl transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3">
+          <IconComponent className="w-16 h-16 text-white" strokeWidth={1.5} />
+        </div>
+      ) : (
         <span class="text-6xl transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3 select-none">{project.icon}</span>
+      )}
     </div>
     <div class="absolute top-4 right-4 flex flex-col items-end gap-2">
       <span class="rounded-full bg-background/80 px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-foreground backdrop-blur-md border border-white/10 shadow-sm">

src/layouts/AboutLayout.astro

@@ -6,6 +6,7 @@ import { defaultLang } from '@/i18n/ui';
 import GlassHeader from '@/components/GlassHeader';
 import Footer from '@/components/Footer';
 import Container from "../components/ui/Container.astro";
+import { Sparkles, FileText } from "lucide-react";
 
 // Use Astro's MarkdownLayoutProps for proper type safety
 export type Props = MarkdownLayoutProps<FrontmatterProps>;
@@ -37,14 +38,17 @@ const lang = Astro.currentLocale as Lang || defaultLang;
           <main class="xl:col-span-3 order-2 xl:order-1">
             <!-- About page header -->
             <header class="mb-10">
-              <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground mb-6 leading-tight tracking-tight">
+              <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground mb-6 leading-tight tracking-tight flex items-center gap-3">
-                ✨ {title}
+                <Sparkles className="w-8 h-8 text-primary shrink-0" /> {title}
               </h1>
               
               {description && (
-                <p class="text-lg sm:text-xl text-muted-foreground mb-8 leading-relaxed page-content-main">
+                <div class="flex items-start gap-3 mb-8">
-                  📝 {description}
+                  <FileText className="w-6 h-6 text-muted-foreground shrink-0 mt-1" />
+                  <p class="text-lg sm:text-xl text-muted-foreground leading-relaxed page-content-main">
+                    {description}
                   </p>
+                </div>
               )}
             </header>
             
@@ -78,7 +82,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;
           </aside>
         </div>
       </div>
-    </div>
+    </Container>
   </div>
   
   <!-- Footer -->

src/lib/data/projects.ts

@@ -9,7 +9,7 @@ export const projects = {
       role: "Founder & Lead Developer",
       impact: "Building an open AI workspace for builders",
       title: "Elynd",
-      icon: "⚡",
+      icon: "Zap",
       color: "purple",
       image: {
         bg: "from-purple-500/20 to-blue-500/20",
@@ -37,7 +37,7 @@ export const projects = {
       impact: "Helped startup launch MVP in 3 months",
       title: "Taskify App",
       tag: "business",
-      icon: "📱",
+      icon: "Smartphone",
       color: "purple",
       image: {
         bg: "from-purple-500/20 to-purple-600/20",
@@ -61,7 +61,7 @@ export const projects = {
       impact: "E-commerce platform handling $100K+ monthly revenue",
       title: "E-Shop Platform",
       tag: "business",
-      icon: "🛒",
+      icon: "ShoppingCart",
       color: "green",
       image: {
         bg: "from-green-500/20 to-green-600/20",
@@ -85,7 +85,7 @@ export const projects = {
       impact: "Personal brand and portfolio showcasing",
       title: "Portfolio Site",
       tag: "portfolio",
-      icon: "🌐",
+      icon: "Globe",
       color: "purple",
       image: {
         bg: "from-purple-500/20 to-purple-600/20",
@@ -111,7 +111,7 @@ export const projects = {
       role: "创始人 & 首席开发者",
       impact: "构建面向构建者的开放 AI 工作空间",
       title: "Elynd",
-      icon: "⚡",
+      icon: "Zap",
       color: "purple",
       image: {
         bg: "from-purple-500/20 to-blue-500/20",
@@ -139,7 +139,7 @@ export const projects = {
       impact: "帮助创业公司在3个月内推出 MVP",
       title: "Taskify 应用",
       tag: "business",
-      icon: "📱",
+      icon: "Smartphone",
       color: "purple",
       image: {
         bg: "from-purple-500/20 to-purple-600/20",
@@ -163,7 +163,7 @@ export const projects = {
       impact: "电商平台月营收超过 10 万美元",
       title: "电商平台",
       tag: "business",
-      icon: "🛒",
+      icon: "ShoppingCart",
       color: "green",
       image: {
         bg: "from-green-500/20 to-green-600/20",
@@ -187,7 +187,7 @@ export const projects = {
       impact: "个人品牌和作品集展示",
       title: "个人作品集网站",
       tag: "portfolio",
-      icon: "🌐",
+      icon: "Globe",
       color: "purple",
       image: {
         bg: "from-purple-500/20 to-purple-600/20",

src/pages/about.mdx

@@ -6,7 +6,7 @@ layout: "../layouts/AboutLayout.astro"
 
 import HighlightBox from '../components/markdown/HighlightBox.astro';
 
-# Joy Zhao 👨‍💻
+# Joy Zhao
 
 <HighlightBox type="info" title="Introduction">
 I'm a TypeScript Full Stack Engineer who loves development, technology, and exploring new possibilities. I enjoy bringing digital projects to life. 🚀

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>

src/pages/now.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 { Hammer, Zap, Telescope, Bot, Target, Rocket, Sparkles, MessageSquare, Handshake, MapPin } from "lucide-react";
 import type { Lang } from "@/types/i18n";
 import { defaultLang } from "@/i18n/ui";
 
@@ -14,187 +15,211 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
 
 <Layout title={pageTitle}>
   <GlassHeader lang={lang} client:only="react" />
-  <main class="min-h-screen">
+  <main class="min-h-screen relative overflow-hidden">
+    <!-- 背景装饰 -->
+    <div class="absolute inset-0 -z-10">
+      <div class="absolute left-1/2 top-0 h-[800px] w-[1000px] -translate-x-1/2 -translate-y-1/2 bg-primary/10 blur-[120px]"></div>
+      <div class="absolute right-0 top-1/3 h-[500px] w-[500px] bg-blue-500/5 blur-[100px]"></div>
+    </div>
+
     <!-- Now Page Hero -->
-    <section class="py-24 relative overflow-hidden">
+    <section class="pt-32 pb-24 relative overflow-hidden">
-      <div class="page-hero-overlay"></div>
+      <div class="page-hero-overlay" aria-hidden="true"></div>
 
       <Container className="relative z-10">
-        <div class="text-center mb-16">
+        <div class="max-w-4xl mx-auto text-center">
-          <span class="inline-block px-4 py-1 bg-primary/20 text-primary dark:text-primary rounded-full text-sm font-medium mb-4">
+          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-wider mb-6 animate-fade-in">
-            {lang === 'zh' ? '关于我现在正在做什么' : "What's happening now"}
+            <span class="relative flex h-2 w-2">
+              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+              <span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
             </span>
-          <h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
+            {lang === 'zh' ? '实时状态' : "Live Status"}
+          </div>
+          <h1 class="page-title-gradient text-6xl md:text-8xl font-bold mb-8 tracking-tight">
             {lang === 'zh' ? '现在' : 'Now'}
           </h1>
-          <p class="text-lg text-muted-foreground page-content-narrow">
+          <p class="text-xl md:text-2xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
             {lang === 'zh'
-              ? '持续更新我的现状、正在构建的内容以及合作机会'
+              ? '关于我现在正在关注的事、正在构建的产品以及我的生活状态。'
-              : 'Continuously updating my current status, what I am building, and collaboration opportunities'}
+              : 'What I am currently focusing on, the products I am building, and my life status.'}
           </p>
         </div>
       </Container>
     </section>
 
-    <!-- Building Section -->
+    <!-- Main Content -->
-    <section class="py-16 relative">
+    <section class="pb-32 relative mt-12 md:mt-24">
       <Container>
-        <div class="page-content-main">
+        <div class="max-w-4xl mx-auto space-y-24">
-          <div class="flex items-center gap-4 mb-8">
+          <!-- Building Section -->
-            <div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center">
+          <div class="space-y-10">
-              <span class="text-2xl">🔨</span>
+            <div class="flex items-center gap-3">
+              <div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center border border-primary/20">
+                <Hammer className="w-6 h-6 text-primary" />
               </div>
-            <h2 class="text-3xl font-bold">
+              <h2 class="text-3xl md:text-4xl font-bold tracking-tight">
                 {lang === 'zh' ? '正在构建' : 'Building'}
               </h2>
             </div>
 
-          <div class="page-surface p-8">
+            <div class="group relative">
-            <div class="flex items-start gap-6">
+              <div class="absolute -inset-1 rounded-[2rem] bg-gradient-to-r from-primary/30 to-blue-600/30 opacity-20 blur-xl transition duration-500 group-hover:opacity-40"></div>
-              <div class="w-16 h-16 bg-gradient-to-br from-primary to-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
+              <div class="page-surface relative p-8 md:p-12 overflow-hidden border-primary/10 rounded-[2rem]">
-                <span class="text-3xl">⚡</span>
+                <div class="flex flex-col md:flex-row gap-10 items-start">
+                  <div class="w-24 h-24 bg-gradient-to-br from-primary to-blue-600 rounded-2xl flex items-center justify-center flex-shrink-0 shadow-lg shadow-primary/20 group-hover:scale-105 transition-transform duration-500">
+                    <Zap className="w-12 h-12 text-white" />
                   </div>
-              <div class="flex-1">
+                  <div class="flex-1 space-y-6">
-                <h3 class="text-xl font-bold mb-2">Elynd</h3>
+                    <div class="flex items-center justify-between">
-                <p class="text-muted-foreground mb-4">
+                      <h3 class="text-3xl font-bold">Elynd</h3>
+                      <span class="px-4 py-1.5 bg-green-500/10 text-green-600 dark:text-green-400 rounded-full text-xs font-bold border border-green-500/20 uppercase tracking-wider">Active</span>
+                    </div>
+                    <p class="text-xl text-muted-foreground leading-relaxed">
                       {lang === 'zh'
                         ? '一个开放的 AI 工作空间，让构建者能够更智能地工作。从 AI 第一性原理出发，打造完全开放、可自托管的协作工具。'
                         : 'An open AI workspace for builders to work smarter. Built from first principles of AI, creating fully open, self-hostable collaboration tools.'}
                     </p>
-                <div class="flex flex-wrap gap-2">
+                    <div class="flex flex-wrap gap-3 pt-2">
-                  <span class="px-3 py-1 bg-primary/20 text-primary dark:text-primary rounded-full text-sm">AI Product</span>
+                      {['AI Product', 'TypeScript', 'Open Source', 'Astro'].map(tag => (
-                  <span class="px-3 py-1 bg-blue-500/20 text-blue-600 dark:text-blue-400 rounded-full text-sm">TypeScript</span>
+                        <span class="px-4 py-2 bg-secondary/50 text-secondary-foreground rounded-lg text-sm font-medium border border-border/50">{tag}</span>
-                  <span class="px-3 py-1 bg-green-500/20 text-green-600 dark:text-green-400 rounded-full text-sm">Open Source</span>
+                      ))}
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-      </Container>
-    </section>
 
           <!-- Exploring Section -->
-    <section class="py-16 relative page-section-soft">
+          <div class="space-y-10">
-      <Container>
+            <div class="flex items-center gap-3">
-        <div class="page-content-main">
+              <div class="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center border border-blue-500/20">
-          <div class="flex items-center gap-4 mb-8">
+                <Telescope className="w-6 h-6 text-blue-500" />
-            <div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
-              <span class="text-2xl">🔭</span>
               </div>
-            <h2 class="text-3xl font-bold">
+              <h2 class="text-3xl md:text-4xl font-bold tracking-tight">
                 {lang === 'zh' ? '正在探索' : 'Exploring'}
               </h2>
             </div>
 
-          <div class="grid gap-6">
+            <div class="grid gap-8 md:grid-cols-2">
-            <div class="page-surface p-6">
+              {[
-              <h3 class="text-lg font-bold mb-3">
+                {
-                {lang === 'zh' ? 'AI Agents 与工作流自动化' : 'AI Agents & Workflow Automation'}
+                  title: lang === 'zh' ? 'AI Agents 与工作流自动化' : 'AI Agents & Workflow Automation',
-              </h3>
+                  desc: lang === 'zh' ? '研究如何构建能够自主完成复杂任务的 AI Agent，以及如何将 AI 能力融入日常工作流。' : 'Researching how to build AI Agents that can autonomously complete complex tasks, and how to integrate AI capabilities into daily workflows.',
-              <p class="text-muted-foreground">
+                  icon: Bot
-                {lang === 'zh'
+                },
-                  ? '研究如何构建能够自主完成复杂任务的 AI Agent，以及如何将 AI 能力融入日常工作流。'
+                {
-                  : 'Researching how to build AI Agents that can autonomously complete complex tasks, and how to integrate AI capabilities into daily workflows.'}
+                  title: lang === 'zh' ? '产品导向的开发实践' : 'Product-Led Development Practices',
-              </p>
+                  desc: lang === 'zh' ? '探索从产品角度思考开发，构建真正解决用户问题的产品，而不仅仅是技术实现。' : 'Exploring product thinking in development, building products that truly solve user problems, not just technical implementations.',
+                  icon: Target
+                }
+              ].map(item => (
+                <div class="page-surface p-8 rounded-3xl hover:translate-y-[-4px] transition-all duration-300 border-border/50 group">
+                  <div class="w-12 h-12 bg-muted rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
+                    <item.icon className="w-6 h-6 text-foreground" />
                   </div>
-
+                  <h3 class="text-2xl font-bold mb-4">{item.title}</h3>
-            <div class="page-surface p-6">
+                  <p class="text-muted-foreground text-base leading-relaxed">{item.desc}</p>
-              <h3 class="text-lg font-bold mb-3">
+                </div>
-                {lang === 'zh' ? '产品导向的开发实践' : 'Product-Led Development Practices'}
+              ))}
-              </h3>
-              <p class="text-muted-foreground">
-                {lang === 'zh'
-                  ? '探索从产品角度思考开发，构建真正解决用户问题的产品，而不仅仅是技术实现。'
-                  : 'Exploring product thinking in development, building products that truly solve user problems, not just technical implementations.'}
-              </p>
             </div>
           </div>
-        </div>
-      </Container>
-    </section>
 
           <!-- Shipping Section -->
-    <section class="py-16 relative">
+          <div class="space-y-10">
-      <Container>
+            <div class="flex items-center gap-3">
-        <div class="page-content-main">
+              <div class="w-12 h-12 bg-green-500/10 rounded-xl flex items-center justify-center border border-green-500/20">
-          <div class="flex items-center gap-4 mb-8">
+                <Rocket className="w-6 h-6 text-green-500" />
-            <div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
-              <span class="text-2xl">🚀</span>
               </div>
-            <h2 class="text-3xl font-bold">
+              <h2 class="text-3xl md:text-4xl font-bold tracking-tight">
                 {lang === 'zh' ? '最近发布' : 'Shipping'}
               </h2>
             </div>
 
-          <div class="space-y-4">
+            <div class="space-y-6">
-            <div class="page-surface rounded-xl p-6 flex items-center gap-4">
+              {[
-              <div class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
+                {
-                <span class="text-xl">✨</span>
+                  title: lang === 'zh' ? '个人网站全新改版' : 'Portfolio Redesign',
+                  desc: lang === 'zh' ? '基于 Astro 5 和 Tailwind 4 的高性能双语站点。' : 'High-performance bilingual site built with Astro 5 & Tailwind 4.',
+                  icon: Sparkles,
+                  color: 'bg-green-500/10',
+                  iconColor: 'text-green-500'
+                },
+                {
+                  title: lang === 'zh' ? 'DeepSeek 满血版接入' : 'DeepSeek Full Access',
+                  desc: lang === 'zh' ? '在本地工作流中深度整合 DeepSeek-V3 提升效率。' : 'Deep integration of DeepSeek-V3 in local workflows for efficiency.',
+                  icon: MessageSquare,
+                  color: 'bg-blue-500/10',
+                  iconColor: 'text-blue-500'
+                }
+              ].map(item => (
+                <div class="group relative flex items-center gap-6 p-4 rounded-2xl hover:bg-muted/50 transition-all duration-300">
+                  <div class={`w-12 h-12 ${item.color} rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform`}>
+                    <item.icon className={`w-6 h-6 ${item.iconColor}`} />
                   </div>
-              <div>
+                  <div class="flex-1 min-w-0">
-                <h3 class="font-bold mb-1">
+                    <h3 class="font-bold text-lg group-hover:text-primary transition-colors truncate">
-                  {lang === 'zh' ? '个人网站全新改版' : 'Portfolio Website Redesign'}
+                      {item.title}
                     </h3>
-                <p class="text-sm text-muted-foreground">
+                    <p class="text-sm text-muted-foreground line-clamp-1">
-                  {lang === 'zh'
+                      {item.desc}
-                    ? '全新设计的个人网站，突出 AI 产品构建者的定位'
-                    : 'Redesigned portfolio with focus on AI product builder positioning'}
                     </p>
                   </div>
+                  <div class="text-muted-foreground/30 group-hover:text-primary/50 transition-colors">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                   </div>
                 </div>
+              ))}
             </div>
-      </Container>
-    </section>
-
-    <!-- Open to Collaborate Section -->
-    <section class="py-16 relative bg-gradient-to-br from-blue-900/10 to-blue-900/10 dark:from-blue-900/20 dark:to-blue-900/20">
-      <Container>
-        <div class="page-content-main text-center">
-          <div class="flex items-center justify-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>
-            </div>
-            <h2 class="text-3xl font-bold">
-              {lang === 'zh' ? '开放合作' : 'Open to Collaborate'}
-            </h2>
           </div>
 
-          <div class="page-surface p-8">
+          <!-- Bottom Grid: Collaboration & Meta -->
-            <p class="text-lg text-muted-foreground mb-8">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-8 pt-8">
+            <!-- Collaboration Card -->
+            <div class="relative group h-full">
+              <div class="absolute -inset-1 rounded-[2.5rem] bg-gradient-to-br from-yellow-500/20 to-orange-500/20 blur opacity-75"></div>
+              <div class="page-surface relative p-10 border-yellow-500/10 bg-gradient-to-br from-card to-yellow-500/5 rounded-[2.5rem] h-full flex flex-col justify-between">
+                <div>
+                  <div class="w-14 h-14 bg-yellow-500/10 rounded-2xl flex items-center justify-center mb-8">
+                    <Handshake className="w-8 h-8 text-yellow-600 dark:text-yellow-400" />
+                  </div>
+                  <h3 class="text-3xl font-bold mb-4">{lang === 'zh' ? '开放合作' : 'Collaborate'}</h3>
+                  <p class="text-lg text-muted-foreground mb-8 leading-relaxed">
                     {lang === 'zh'
-                ? '我始终对新的合作机会持开放态度。无论你是想要构建产品、寻找技术合伙人，还是需要技术咨询，都可以联系我。'
+                      ? '始终对有趣的产品想法和技术咨询持开放态度。'
-                : "I'm always open to new collaboration opportunities. Whether you're looking to build a product, seeking a technical co-founder, or need technical consulting, feel free to reach out."}
+                      : "Always open to interesting product ideas and technical consulting."}
                   </p>
-            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                </div>
-              <a
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                href={lang === 'zh' ? '/zh/hire' : '/hire'}
+                  <a href={lang === 'zh' ? '/zh/hire' : '/hire'} class="flex items-center justify-center py-4 rounded-2xl bg-primary text-primary-foreground font-bold text-base hover:scale-[1.02] transition-transform">
-                class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
+                    {lang === 'zh' ? '合作方式' : 'View Options'}
-              >
-                <span>💼</span>
-                {lang === 'zh' ? '查看合作方式' : 'View Collaboration Options'}
                   </a>
-              <a
+                  <a href="mailto:zhaoguiyang18@gmail.com" class="flex items-center justify-center py-4 rounded-2xl border border-border bg-background/50 text-foreground font-bold text-base hover:bg-muted transition-colors">
-                href="mailto:zhaoguiyang18@gmail.com"
+                    {lang === 'zh' ? '发送邮件' : 'Email Me'}
-                class="border border-primary text-primary hover:bg-primary hover:text-white px-6 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
-              >
-                <span>📧</span>
-                {lang === 'zh' ? '发送邮件' : 'Send Email'}
                   </a>
                 </div>
               </div>
             </div>
-      </Container>
-    </section>
 
-    <!-- Last Updated -->
+            <!-- Meta/Status Card -->
-    <section class="py-12">
+            <div class="page-surface p-10 border-border/50 rounded-[2.5rem] flex flex-col items-center justify-center text-center space-y-6">
-      <Container>
+              <div class="w-20 h-20 bg-muted rounded-full flex items-center justify-center text-3xl">
-        <div class="page-content-main text-center">
+                <MapPin className="w-10 h-10 text-primary" />
-          <p class="text-sm text-muted-foreground">
+              </div>
-            {lang === 'zh' ? '最后更新：' : 'Last updated: '}
+              <div class="space-y-2">
-            <span class="font-medium">2025年3月</span>
+                <h3 class="text-2xl font-bold">{lang === 'zh' ? '当前位置' : 'Location'}</h3>
-          </p>
+                <p class="text-muted-foreground">{lang === 'zh' ? '中国 · 杭州' : 'Hangzhou, China'}</p>
+              </div>
+              <div class="pt-4 w-full">
+                <div class="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-muted/50 border border-border/50 mx-auto">
+                  <span class="text-xs text-muted-foreground uppercase font-bold tracking-widest border-r border-border/50 pr-3">
+                    {lang === 'zh' ? '最后更新' : 'Updated'}
+                  </span>
+                  <span class="text-sm font-semibold">2025.03.14</span>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </Container>
     </section>

src/pages/zh/about.mdx

@@ -6,7 +6,7 @@ layout: "../../layouts/AboutLayout.astro"
 
 import HighlightBox from '../../components/markdown/HighlightBox.astro';
 
-# 关于我 👨‍💻
+# 关于我
 
 <HighlightBox type="info" title="简介">
 我是Joy Zhao, 一名Ts全栈工程师，也是本站的站长。

src/pages/zh/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";
 
@@ -40,7 +41,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">
               我与谁合作
@@ -94,7 +95,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">
               我能构建什么
@@ -105,7 +106,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>
@@ -119,7 +120,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>
@@ -133,7 +134,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>
@@ -154,7 +155,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">
               合作模式
@@ -164,7 +165,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">
                 技术合伙人
@@ -176,7 +177,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">
                 项目制
@@ -188,7 +189,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">
                 咨询/顾问
@@ -208,7 +209,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">
               工作方式
@@ -218,7 +219,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">敏捷迭代</strong>
                   <p class="text-muted-foreground text-sm">
@@ -227,7 +228,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">透明沟通</strong>
                   <p class="text-muted-foreground text-sm">
@@ -236,7 +237,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">代码质量</strong>
                   <p class="text-muted-foreground text-sm">
@@ -245,7 +246,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">产品思维</strong>
                   <p class="text-muted-foreground text-sm">
@@ -265,7 +266,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">
               当前可用性
@@ -313,14 +314,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" />
               发送邮件
             </a>
             <a
               href="/zh/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" />
               了解更多关于我
             </a>
           </div>

src/pages/zh/now.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 { Hammer, Zap, Telescope, Bot, Target, Rocket, Sparkles, MessageSquare, Handshake, MapPin } from "lucide-react";
 import type { Lang } from "@/types/i18n";
 import { defaultLang } from "@/i18n/ui";
 
@@ -14,175 +15,211 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
 
 <Layout title={pageTitle}>
   <GlassHeader lang={lang} client:only="react" />
-  <main class="min-h-screen">
+  <main class="min-h-screen relative overflow-hidden">
+    <!-- 背景装饰 -->
+    <div class="absolute inset-0 -z-10">
+      <div class="absolute left-1/2 top-0 h-[800px] w-[1000px] -translate-x-1/2 -translate-y-1/2 bg-primary/10 blur-[120px]"></div>
+      <div class="absolute right-0 top-1/3 h-[500px] w-[500px] bg-blue-500/5 blur-[100px]"></div>
+    </div>
+
     <!-- Now Page Hero -->
-    <section class="py-24 relative overflow-hidden">
+    <section class="pt-32 pb-24 relative overflow-hidden">
-      <div class="page-hero-overlay"></div>
+      <div class="page-hero-overlay" aria-hidden="true"></div>
 
       <Container className="relative z-10">
-        <div class="text-center mb-16">
+        <div class="max-w-4xl mx-auto text-center">
-          <span class="inline-block px-4 py-1 bg-primary/20 text-primary dark:text-primary rounded-full text-sm font-medium mb-4">
+          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-wider mb-6 animate-fade-in">
-            关于我现在正在做什么
+            <span class="relative flex h-2 w-2">
+              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+              <span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
             </span>
-          <h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
+            {lang === 'zh' ? '实时状态' : "Live Status"}
-            现在
+          </div>
+          <h1 class="page-title-gradient text-6xl md:text-8xl font-bold mb-8 tracking-tight">
+            {lang === 'zh' ? '现在' : 'Now'}
           </h1>
-          <p class="text-lg text-muted-foreground page-content-narrow">
+          <p class="text-xl md:text-2xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
-            持续更新我的现状、正在构建的内容以及合作机会
+            {lang === 'zh'
+              ? '关于我现在正在关注的事、正在构建的产品以及我的生活状态。'
+              : 'What I am currently focusing on, the products I am building, and my life status.'}
           </p>
         </div>
       </Container>
     </section>
 
-    <!-- Building Section -->
+    <!-- Main Content -->
-    <section class="py-16 relative">
+    <section class="pb-32 relative mt-12 md:mt-24">
       <Container>
-        <div class="page-content-main">
+        <div class="max-w-4xl mx-auto space-y-24">
-          <div class="flex items-center gap-4 mb-8">
+          <!-- Building Section -->
-            <div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center">
+          <div class="space-y-10">
-              <span class="text-2xl">🔨</span>
+            <div class="flex items-center gap-3">
+              <div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center border border-primary/20">
+                <Hammer className="w-6 h-6 text-primary" />
               </div>
-            <h2 class="text-3xl font-bold">
+              <h2 class="text-3xl md:text-4xl font-bold tracking-tight">
-              正在构建
+                {lang === 'zh' ? '正在构建' : 'Building'}
               </h2>
             </div>
 
-          <div class="page-surface p-8">
+            <div class="group relative">
-            <div class="flex items-start gap-6">
+              <div class="absolute -inset-1 rounded-[2rem] bg-gradient-to-r from-primary/30 to-blue-600/30 opacity-20 blur-xl transition duration-500 group-hover:opacity-40"></div>
-              <div class="w-16 h-16 bg-gradient-to-br from-primary to-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
+              <div class="page-surface relative p-8 md:p-12 overflow-hidden border-primary/10 rounded-[2rem]">
-                <span class="text-3xl">⚡</span>
+                <div class="flex flex-col md:flex-row gap-10 items-start">
+                  <div class="w-24 h-24 bg-gradient-to-br from-primary to-blue-600 rounded-2xl flex items-center justify-center flex-shrink-0 shadow-lg shadow-primary/20 group-hover:scale-105 transition-transform duration-500">
+                    <Zap className="w-12 h-12 text-white" />
                   </div>
-              <div class="flex-1">
+                  <div class="flex-1 space-y-6">
-                <h3 class="text-xl font-bold mb-2">Elynd</h3>
+                    <div class="flex items-center justify-between">
-                <p class="text-muted-foreground mb-4">
+                      <h3 class="text-3xl font-bold">Elynd</h3>
-                  一个开放的 AI 工作空间，让构建者能够更智能地工作。从 AI 第一性原理出发，打造完全开放、可自托管的协作工具。
+                      <span class="px-4 py-1.5 bg-green-500/10 text-green-600 dark:text-green-400 rounded-full text-xs font-bold border border-green-500/20 uppercase tracking-wider">Active</span>
+                    </div>
+                    <p class="text-xl text-muted-foreground leading-relaxed">
+                      {lang === 'zh'
+                        ? '一个开放的 AI 工作空间，让构建者能够更智能地工作。从 AI 第一性原理出发，打造完全开放、可自托管的协作工具。'
+                        : 'An open AI workspace for builders to work smarter. Built from first principles of AI, creating fully open, self-hostable collaboration tools.'}
                     </p>
-                <div class="flex flex-wrap gap-2">
+                    <div class="flex flex-wrap gap-3 pt-2">
-                  <span class="px-3 py-1 bg-primary/20 text-primary dark:text-primary rounded-full text-sm">AI 产品</span>
+                      {['AI Product', 'TypeScript', 'Open Source', 'Astro'].map(tag => (
-                  <span class="px-3 py-1 bg-blue-500/20 text-blue-600 dark:text-blue-400 rounded-full text-sm">TypeScript</span>
+                        <span class="px-4 py-2 bg-secondary/50 text-secondary-foreground rounded-lg text-sm font-medium border border-border/50">{tag}</span>
-                  <span class="px-3 py-1 bg-green-500/20 text-green-600 dark:text-green-400 rounded-full text-sm">开源</span>
+                      ))}
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-      </Container>
-    </section>
 
           <!-- Exploring Section -->
-    <section class="py-16 relative page-section-soft">
+          <div class="space-y-10">
-      <Container>
+            <div class="flex items-center gap-3">
-        <div class="page-content-main">
+              <div class="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center border border-blue-500/20">
-          <div class="flex items-center gap-4 mb-8">
+                <Telescope className="w-6 h-6 text-blue-500" />
-            <div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
-              <span class="text-2xl">🔭</span>
               </div>
-            <h2 class="text-3xl font-bold">
+              <h2 class="text-3xl md:text-4xl font-bold tracking-tight">
-              正在探索
+                {lang === 'zh' ? '正在探索' : 'Exploring'}
               </h2>
             </div>
 
-          <div class="grid gap-6">
+            <div class="grid gap-8 md:grid-cols-2">
-            <div class="page-surface p-6">
+              {[
-              <h3 class="text-lg font-bold mb-3">
+                {
-                AI Agents 与工作流自动化
+                  title: lang === 'zh' ? 'AI Agents 与工作流自动化' : 'AI Agents & Workflow Automation',
-              </h3>
+                  desc: lang === 'zh' ? '研究如何构建能够自主完成复杂任务的 AI Agent，以及如何将 AI 能力融入日常工作流。' : 'Researching how to build AI Agents that can autonomously complete complex tasks, and how to integrate AI capabilities into daily workflows.',
-              <p class="text-muted-foreground">
+                  icon: Bot
-                研究如何构建能够自主完成复杂任务的 AI Agent，以及如何将 AI 能力融入日常工作流。
+                },
-              </p>
+                {
+                  title: lang === 'zh' ? '产品导向的开发实践' : 'Product-Led Development Practices',
+                  desc: lang === 'zh' ? '探索从产品角度思考开发，构建真正解决用户问题的产品，而不仅仅是技术实现。' : 'Exploring product thinking in development, building products that truly solve user problems, not just technical implementations.',
+                  icon: Target
+                }
+              ].map(item => (
+                <div class="page-surface p-8 rounded-3xl hover:translate-y-[-4px] transition-all duration-300 border-border/50 group">
+                  <div class="w-12 h-12 bg-muted rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
+                    <item.icon className="w-6 h-6 text-foreground" />
                   </div>
-
+                  <h3 class="text-2xl font-bold mb-4">{item.title}</h3>
-            <div class="page-surface p-6">
+                  <p class="text-muted-foreground text-base leading-relaxed">{item.desc}</p>
-              <h3 class="text-lg font-bold mb-3">
+                </div>
-                产品导向的开发实践
+              ))}
-              </h3>
-              <p class="text-muted-foreground">
-                探索从产品角度思考开发，构建真正解决用户问题的产品，而不仅仅是技术实现。
-              </p>
             </div>
           </div>
-        </div>
-      </Container>
-    </section>
 
           <!-- Shipping Section -->
-    <section class="py-16 relative">
+          <div class="space-y-10">
-      <Container>
+            <div class="flex items-center gap-3">
-        <div class="page-content-main">
+              <div class="w-12 h-12 bg-green-500/10 rounded-xl flex items-center justify-center border border-green-500/20">
-          <div class="flex items-center gap-4 mb-8">
+                <Rocket className="w-6 h-6 text-green-500" />
-            <div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
-              <span class="text-2xl">🚀</span>
               </div>
-            <h2 class="text-3xl font-bold">
+              <h2 class="text-3xl md:text-4xl font-bold tracking-tight">
-              最近发布
+                {lang === 'zh' ? '最近发布' : 'Shipping'}
               </h2>
             </div>
 
-          <div class="space-y-4">
+            <div class="space-y-6">
-            <div class="page-surface rounded-xl p-6 flex items-center gap-4">
+              {[
-              <div class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
+                {
-                <span class="text-xl">✨</span>
+                  title: lang === 'zh' ? '个人网站全新改版' : 'Portfolio Redesign',
+                  desc: lang === 'zh' ? '基于 Astro 5 和 Tailwind 4 的高性能双语站点。' : 'High-performance bilingual site built with Astro 5 & Tailwind 4.',
+                  icon: Sparkles,
+                  color: 'bg-green-500/10',
+                  iconColor: 'text-green-500'
+                },
+                {
+                  title: lang === 'zh' ? 'DeepSeek 满血版接入' : 'DeepSeek Full Access',
+                  desc: lang === 'zh' ? '在本地工作流中深度整合 DeepSeek-V3 提升效率。' : 'Deep integration of DeepSeek-V3 in local workflows for efficiency.',
+                  icon: MessageSquare,
+                  color: 'bg-blue-500/10',
+                  iconColor: 'text-blue-500'
+                }
+              ].map(item => (
+                <div class="group relative flex items-center gap-6 p-4 rounded-2xl hover:bg-muted/50 transition-all duration-300">
+                  <div class={`w-12 h-12 ${item.color} rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform`}>
+                    <item.icon className={`w-6 h-6 ${item.iconColor}`} />
                   </div>
-              <div>
+                  <div class="flex-1 min-w-0">
-                <h3 class="font-bold mb-1">
+                    <h3 class="font-bold text-lg group-hover:text-primary transition-colors truncate">
-                  个人网站全新改版
+                      {item.title}
                     </h3>
-                <p class="text-sm text-muted-foreground">
+                    <p class="text-sm text-muted-foreground line-clamp-1">
-                  全新设计的个人网站，突出 AI 产品构建者的定位
+                      {item.desc}
                     </p>
                   </div>
+                  <div class="text-muted-foreground/30 group-hover:text-primary/50 transition-colors">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                   </div>
                 </div>
+              ))}
             </div>
-      </Container>
-    </section>
-
-    <!-- Open to Collaborate Section -->
-    <section class="py-16 relative bg-gradient-to-br from-blue-900/10 to-blue-900/10 dark:from-blue-900/20 dark:to-blue-900/20">
-      <Container>
-        <div class="page-content-main text-center">
-          <div class="flex items-center justify-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>
-            </div>
-            <h2 class="text-3xl font-bold">
-              开放合作
-            </h2>
           </div>
 
-          <div class="page-surface p-8">
+          <!-- Bottom Grid: Collaboration & Meta -->
-            <p class="text-lg text-muted-foreground mb-8">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-8 pt-8">
-              我始终对新的合作机会持开放态度。无论你是想要构建产品、寻找技术合伙人，还是需要技术咨询，都可以联系我。
+            <!-- Collaboration Card -->
+            <div class="relative group h-full">
+              <div class="absolute -inset-1 rounded-[2.5rem] bg-gradient-to-br from-yellow-500/20 to-orange-500/20 blur opacity-75"></div>
+              <div class="page-surface relative p-10 border-yellow-500/10 bg-gradient-to-br from-card to-yellow-500/5 rounded-[2.5rem] h-full flex flex-col justify-between">
+                <div>
+                  <div class="w-14 h-14 bg-yellow-500/10 rounded-2xl flex items-center justify-center mb-8">
+                    <Handshake className="w-8 h-8 text-yellow-600 dark:text-yellow-400" />
+                  </div>
+                  <h3 class="text-3xl font-bold mb-4">{lang === 'zh' ? '开放合作' : 'Collaborate'}</h3>
+                  <p class="text-lg text-muted-foreground mb-8 leading-relaxed">
+                    {lang === 'zh'
+                      ? '始终对有趣的产品想法 and 技术咨询持开放态度。'
+                      : "Always open to interesting product ideas and technical consulting."}
                   </p>
-            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                </div>
-              <a
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                href="/zh/hire"
+                  <a href={lang === 'zh' ? '/zh/hire' : '/hire'} class="flex items-center justify-center py-4 rounded-2xl bg-primary text-primary-foreground font-bold text-base hover:scale-[1.02] transition-transform">
-                class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
+                    {lang === 'zh' ? '合作方式' : 'View Options'}
-              >
-                <span>💼</span>
-                查看合作方式
                   </a>
-              <a
+                  <a href="mailto:zhaoguiyang18@gmail.com" class="flex items-center justify-center py-4 rounded-2xl border border-border bg-background/50 text-foreground font-bold text-base hover:bg-muted transition-colors">
-                href="mailto:zhaoguiyang18@gmail.com"
+                    {lang === 'zh' ? '发送邮件' : 'Email Me'}
-                class="border border-primary text-primary hover:bg-primary hover:text-white px-6 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
-              >
-                <span>📧</span>
-                发送邮件
                   </a>
                 </div>
               </div>
             </div>
-      </Container>
-    </section>
 
-    <!-- Last Updated -->
+            <!-- Meta/Status Card -->
-    <section class="py-12">
+            <div class="page-surface p-10 border-border/50 rounded-[2.5rem] flex flex-col items-center justify-center text-center space-y-6">
-      <Container>
+              <div class="w-20 h-20 bg-muted rounded-full flex items-center justify-center text-3xl">
-        <div class="page-content-main text-center">
+                <MapPin className="w-10 h-10 text-primary" />
-          <p class="text-sm text-muted-foreground">
+              </div>
-            最后更新：
+              <div class="space-y-2">
-            <span class="font-medium">2025年3月</span>
+                <h3 class="text-2xl font-bold">{lang === 'zh' ? '当前位置' : 'Location'}</h3>
-          </p>
+                <p class="text-muted-foreground">{lang === 'zh' ? '中国 · 杭州' : 'Hangzhou, China'}</p>
+              </div>
+              <div class="pt-4 w-full">
+                <div class="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-muted/50 border border-border/50 mx-auto">
+                  <span class="text-xs text-muted-foreground uppercase font-bold tracking-widest border-r border-border/50 pr-3">
+                    {lang === 'zh' ? '最后更新' : 'Updated'}
+                  </span>
+                  <span class="text-sm font-semibold">2025.03.14</span>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </Container>
     </section>