feat(portfolio): redesign site as opportunity gateway

- add now/hire pages and update IA/navigation

- feature Elynd in projects and homepage messaging

- refresh services/blog/brand copy for AI product positioning

- reduce hydration overhead by using Astro Container

- remove Google Fonts external dependency and use local fallback stack

src/components/Footer.tsx

@@ -4,7 +4,7 @@ import { personalInfo } from "@/lib/data/index";
 import { motion } from "framer-motion";
 import { useState, useEffect } from "react";
 import { defaultLang } from "@/i18n/ui";
-import Container from "./ui/Container";
+import Container from "./ui/Container.tsx";
 import { type FooterProps } from "@/types";
 
 export default function Footer({ lang: propLang }: FooterProps) {
@@ -39,7 +39,7 @@ export default function Footer({ lang: propLang }: FooterProps) {
               className="text-sm text-purple-500 font-medium text-center md:text-left"
               whileHover={{ scale: 1.01 }}
             >
-              {lang === 'zh' ? '如果你正在寻找一名前端/Ts全栈工程师（远程工作），请联系我！' : 'Looking for a Frontend/TS Full-stack Engineer (Remote)? Contact me!'}
+              {lang === 'zh' ? '构建 AI 产品？寻找技术合伙人？联系我！' : 'Building AI Products? Need a Technical Co-founder? Contact me!'}
             </motion.p>
           </motion.div>
           <motion.p

src/components/GlassHeader.tsx

@@ -1,7 +1,7 @@
 import { personalInfo } from "@/lib/data/index";
 import LanguageSwitcher from "./LanguageSwitcher";
 import ThemeToggle from "./ui/theme-toggle";
-import Container from "./ui/Container";
+import Container from "./ui/Container.tsx";
 import { useTranslations, getLocalizedPath } from "@/i18n/utils";
 import type { Lang } from "@/types/i18n";
 import { useState, useEffect } from "react";
@@ -63,11 +63,12 @@ export default function GlassHeader({ lang: propLang }: GlassHeaderProps) {
 
         {/* Desktop Navigation */}
         <nav className="hidden md:flex items-center space-x-6 text-sm font-medium">
-          {[ 
+          {[
             { key: 'nav.home', icon: '🏠 ', href: getLocalizedPath('/', lang) },
-            // { key: 'nav.projects', icon: '🚀 ', href: getLocalizedPath('/projects', lang) },
+            { key: 'nav.projects', icon: '🚀 ', href: getLocalizedPath('/projects', lang) },
             { key: 'nav.blog', icon: '📝 ', href: getLocalizedPath('/blog', lang) },
-            { key: 'nav.services', icon: '🛠️ ', href: getLocalizedPath('/services', lang) },
+            { key: 'nav.now', icon: '⚡ ', href: getLocalizedPath('/now', lang) },
+            { key: 'nav.hire', icon: '💼 ', href: getLocalizedPath('/hire', lang) },
             { key: 'nav.about', icon: '👨‍💻 ', href: getLocalizedPath('/about', lang) },
 
           ].map((item, index) => (
@@ -133,12 +134,13 @@ export default function GlassHeader({ lang: propLang }: GlassHeaderProps) {
             : 'bg-white/85 dark:bg-black/85'
         }`}>
           <nav className="flex flex-col space-y-3 text-sm font-medium">
-            {[ 
+            {[
               { key: 'nav.home', icon: '🏠 ', href: getLocalizedPath('/', lang) },
-              { key: 'nav.about', icon: '👨‍💻 ', href: getLocalizedPath('/about', lang) },
-              { key: 'nav.services', icon: '🛠️ ', href: getLocalizedPath('/services', lang) },
               { key: 'nav.projects', icon: '🚀 ', href: getLocalizedPath('/projects', lang) },
               { key: 'nav.blog', icon: '📝 ', href: getLocalizedPath('/blog', lang) },
+              { key: 'nav.now', icon: '⚡ ', href: getLocalizedPath('/now', lang) },
+              { key: 'nav.hire', icon: '💼 ', href: getLocalizedPath('/hire', lang) },
+              { key: 'nav.about', icon: '👨‍💻 ', href: getLocalizedPath('/about', lang) },
             ].map((item, index) => (
               <motion.a
                 key={item.key}

src/components/ui/Container.astro

@@ -0,0 +1,11 @@
+---
+interface Props {
+  className?: string;
+}
+
+const { className = "" } = Astro.props;
+---
+
+<div class={`container mx-auto px-4 sm:px-6 lg:px-8 max-w-6xl ${className}`.trim()}>
+  <slot />
+</div>

src/i18n/translations.ts

@@ -13,6 +13,8 @@ export const translations = {
       projects: 'Projects',
       blog: 'Blog',
       contact: 'Contact',
+      now: 'Now',
+      hire: 'Hire',
     },
     site: {
       title: 'Joy Zhao - Full Stack Developer',
@@ -20,13 +22,16 @@ export const translations = {
     },
     hero: {
       greeting: "Hello, I'm",
-      viewProjects: 'About Me',
+      viewProjects: 'View Projects',
-      contactMe: 'Contact Me',
+      contactMe: 'Get in Touch',
       lookingForJob: 'Looking for a Frontend/TS Full-stack Engineer (Remote)? Contact me!',
       digitalNomad: 'Exploring the freelance journey, striving to become a digital nomad',
       contactInfo: 'Contact Me',
       githubLink: 'GitHub Profile',
       linkedinLink: 'LinkedIn Profile',
+      tagline: 'Full-stack + AI Product Builder',
+      ctaPrimary: "Let's Build Together",
+      ctaSecondary: 'View My Work',
     },
     footer: {
       rights: 'All rights reserved',
@@ -39,6 +44,18 @@ export const translations = {
         portfolio: 'Portfolio',
         ecommerce: 'E-Commerce',
       },
+      type: {
+        product: 'Product',
+        client: 'Client Project',
+        experiment: 'Experiment',
+      },
+      status: {
+        building: 'Building',
+        completed: 'Completed',
+        archived: 'Archived',
+      },
+      role: 'Role',
+      impact: 'Impact',
       visit: 'Visit',
       demo: 'Live Demo',
     },
@@ -70,6 +87,8 @@ export const translations = {
       projects: '项目',
       blog: '博客',
       contact: '联系',
+      now: '现在',
+      hire: '合作',
     },
     site: {
       title: 'Joy Zhao - 全栈开发者',
@@ -77,13 +96,16 @@ export const translations = {
     },
     hero: {
       greeting: '你好，我是',
-      viewProjects: '关于我',
+      viewProjects: '查看项目',
       contactMe: '联系我',
       lookingForJob: '正在寻找前端/TS 全栈工程师（远程）？联系我！',
       digitalNomad: '探索自由职业道路，努力成为数字游民',
       contactInfo: '联系我',
       githubLink: 'GitHub 主页',
       linkedinLink: 'LinkedIn 主页',
+      tagline: '全栈 + AI 产品构建者',
+      ctaPrimary: '一起构建',
+      ctaSecondary: '查看作品',
     },
     footer: {
       rights: '版权所有',
@@ -96,6 +118,18 @@ export const translations = {
         portfolio: '作品集',
         ecommerce: '电子商务',
       },
+      type: {
+        product: '产品',
+        client: '客户项目',
+        experiment: '实验',
+      },
+      status: {
+        building: '开发中',
+        completed: '已完成',
+        archived: '已归档',
+      },
+      role: '角色',
+      impact: '成果',
       visit: '访问',
       demo: '在线演示',
     },

src/layouts/AboutLayout.astro

@@ -5,7 +5,7 @@ import { type Lang, type FrontmatterProps } from '@/types';
 import { defaultLang } from '@/i18n/ui';
 import GlassHeader from '@/components/GlassHeader';
 import Footer from '@/components/Footer';
-import Container from '../components/ui/Container';
+import Container from "../components/ui/Container.astro";
 
 // Use Astro's MarkdownLayoutProps for proper type safety
 export type Props = MarkdownLayoutProps<FrontmatterProps>;
@@ -30,7 +30,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;
   
   <!-- Main content with proper spacing for fixed header -->
   <div class="pt-16 sm:pt-20">
-    <Container client:load className="py-8 md:py-12">
+    <Container className="py-8 md:py-12">
       <div class="max-w-7xl mx-auto">
         <div class="grid grid-cols-1 xl:grid-cols-4 gap-6 lg:gap-8">
           <!-- Main Content -->
@@ -202,4 +202,4 @@ const lang = Astro.currentLocale as Lang || defaultLang;
   #toc-list a {
     transition: all 0.2s ease;
   }
-</style>
+</style>

src/layouts/BlogPostLayout.astro

@@ -11,7 +11,7 @@ import AuthorCard from '@/components/AuthorCard';
 import TableOfContents from '@/components/layout/TableOfContents.astro';
 import BlogNavigation from '@/components/layout/BlogNavigation.astro';
 import PostMeta from '@/components/blog/PostMeta.astro';
-import Container from '../components/ui/Container';
+import Container from "../components/ui/Container.astro";
 import Comments from '@/components/blog/Comments';
 
 // Use Astro's MarkdownLayoutProps for proper type safety
@@ -47,7 +47,7 @@ const finalReadingTime = readTime ? parseInt(readTime.replace(/\D/g, '')) : unde
   
   <!-- Main content with proper spacing for fixed header -->
   <div class="pt-16 sm:pt-20">
-    <Container client:load className="py-6 sm:py-8">
+    <Container className="py-6 sm:py-8">
       <div class="max-w-7xl mx-auto">
         <div class="grid grid-cols-1 xl:grid-cols-4 gap-6 lg:gap-8">
           <!-- Main Content -->
@@ -277,4 +277,4 @@ const finalReadingTime = readTime ? parseInt(readTime.replace(/\D/g, '')) : unde
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
-</style>
+</style>

src/layouts/Layout.astro

@@ -25,12 +25,6 @@ const t = useTranslations(lang);
     <meta name="generator" content={Astro.generator} />
     <meta name="description" content={description} />
         <title>{title}{t('site.title') ? ` | ${t('site.title')}` : ''}</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
-      rel="stylesheet"
-    />
     {
       import.meta.env.MODE === 'production' && (
       <script defer src="https://cloud.umami.is/script.js" data-website-id="a79f759b-74ae-4165-b738-56d123a1c6be"></script>

src/layouts/TaxonomyPageLayout.astro

@@ -7,7 +7,7 @@ import BlogLayout from './BlogLayout.astro';
 import BlogList from '../components/blog/BlogList.astro';
 import CategoryCard from '../components/blog/CategoryCard.astro';
 import TagCard from '../components/blog/TagCard.astro';
-import Container from '../components/ui/Container';
+import Container from "../components/ui/Container.astro";
 import { type Lang } from '@/types/i18n';
 import { type BlogPost } from '@/types';
 
@@ -53,7 +53,7 @@ const localizedText = getLocalizedText();
 ---
 
 <BlogLayout title={title} description={Astro.props.description}>
-  <Container client:load className="py-8">
+  <Container className="py-8">
     <!-- Header Section - Centered at the top -->
     <div class="text-center mb-10">
       <h1 class="text-4xl font-bold mb-3">
@@ -92,4 +92,4 @@ const localizedText = getLocalizedText();
       </div>
     </div>
   </Container>
-</BlogLayout>
+</BlogLayout>

src/lib/data/personal-info.ts

@@ -9,12 +9,12 @@ export const personalInfo: PersonalInfo = {
   website: "https://zhaoguiyang.com",
   twitter: "https://twitter.com/zhaoguiyang",
   position: {
-    en: "Full Stack Engineer",
+    en: "Full-stack + AI Product Builder",
-    zh: "全栈工程师"
+    zh: "全栈 + AI 产品构建者"
   },
   description: {
-    en: "Crafting elegant solutions to complex problems with clean code and innovative thinking. Welcome to my personal dev workspace where ideas come to life.",
+    en: "Building AI-powered products and turning ambitious ideas into reality. Currently focused on Elynd - an open AI workspace for builders.",
-    zh: "用优雅的代码和创新的思维，为复杂问题打造精致的解决方案。欢迎来到我的个人开发工作空间，这里是想法变为现实的地方。"
+    zh: "构建 AI 驱动产品，将雄心勃勃的想法变为现实。目前专注于 Elynd - 一个面向构建者的开放 AI 工作空间。"
   },
   about: {
     en: [

src/lib/data/projects.ts

@@ -1,10 +1,42 @@
 import type { Project } from '@/types';
 export const projects = {
   en: [
+    {
+      id: "elynd",
+      featured: true,
+      type: "product",
+      status: "building",
+      role: "Founder & Lead Developer",
+      impact: "Building an open AI workspace for builders",
+      title: "Elynd",
+      icon: "⚡",
+      color: "purple",
+      image: {
+        bg: "from-purple-500/20 to-blue-500/20",
+        hover: "from-purple-500/30 to-blue-500/30",
+        text: "text-purple-400",
+      },
+      description: [
+        "An open AI workspace for builders to work smarter.",
+        "Built with AI-first principles, making AI your co-builder.",
+        "Fully open source and self-hostable.",
+        "Currently in active development with early access coming soon.",
+      ],
+      tech: ["TypeScript", "React", "AI/ML", "Open Source"],
+      link: "#",
+      links: {
+        demo: "#",
+        github: "https://github.com",
+      },
+    },
     {
       id: "taskify",
-      tag: "business",
+      type: "client",
+      status: "completed",
+      role: "Lead Developer",
+      impact: "Helped startup launch MVP in 3 months",
       title: "Taskify App",
+      tag: "business",
       icon: "📱",
       color: "purple",
       image: {
@@ -23,8 +55,12 @@ export const projects = {
     },
     {
       id: "eshop",
-      tag: "ecommerce",
+      type: "client",
+      status: "completed",
+      role: "Full-stack Developer",
+      impact: "E-commerce platform handling $100K+ monthly revenue",
       title: "E-Shop Platform",
+      tag: "business",
       icon: "🛒",
       color: "green",
       image: {
@@ -43,8 +79,12 @@ export const projects = {
     },
     {
       id: "portfolio",
-      tag: "portfolio",
+      type: "experiment",
+      status: "completed",
+      role: "Creator",
+      impact: "Personal brand and portfolio showcasing",
       title: "Portfolio Site",
+      tag: "portfolio",
       icon: "🌐",
       color: "purple",
       image: {
@@ -63,10 +103,42 @@ export const projects = {
     },
   ],
   zh: [
+    {
+      id: "elynd",
+      featured: true,
+      type: "product",
+      status: "building",
+      role: "创始人 & 首席开发者",
+      impact: "构建面向构建者的开放 AI 工作空间",
+      title: "Elynd",
+      icon: "⚡",
+      color: "purple",
+      image: {
+        bg: "from-purple-500/20 to-blue-500/20",
+        hover: "from-purple-500/30 to-blue-500/30",
+        text: "text-purple-400",
+      },
+      description: [
+        "一个面向构建者的开放 AI 工作空间。",
+        "从 AI 第一性原理出发，让 AI 成为你的共同构建者。",
+        "完全开源，可自托管。",
+        "目前正在积极开发中，早期访问即将推出。",
+      ],
+      tech: ["TypeScript", "React", "AI/ML", "开源"],
+      link: "#",
+      links: {
+        demo: "#",
+        github: "https://github.com",
+      },
+    },
     {
       id: "taskify",
-      tag: "business",
+      type: "client",
+      status: "completed",
+      role: "首席开发者",
+      impact: "帮助创业公司在3个月内推出 MVP",
       title: "Taskify 应用",
+      tag: "business",
       icon: "📱",
       color: "purple",
       image: {
@@ -85,8 +157,12 @@ export const projects = {
     },
     {
       id: "eshop",
-      tag: "ecommerce",
+      type: "client",
+      status: "completed",
+      role: "全栈开发者",
+      impact: "电商平台月营收超过 10 万美元",
       title: "电商平台",
+      tag: "business",
       icon: "🛒",
       color: "green",
       image: {
@@ -105,8 +181,12 @@ export const projects = {
     },
     {
       id: "portfolio",
-      tag: "portfolio",
+      type: "experiment",
+      status: "completed",
+      role: "创作者",
+      impact: "个人品牌和作品集展示",
       title: "个人作品集网站",
+      tag: "portfolio",
       icon: "🌐",
       color: "purple",
       image: {

src/lib/data/services.ts

@@ -2,66 +2,66 @@ import type { Service } from '@/types';
 export const services = {
   en: [
     {
-      title: "Outsourcing Projects",
+      title: "AI Product Development",
       icon: {
-        svg: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>`,
+        svg: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>`,
-        gradient: "from-blue-500 to-cyan-500",
+        gradient: "from-purple-500 to-blue-500",
       },
       items: [
-        "Provide outsourcing project services for overseas clients",
+        "Build AI-powered products from concept to launch",
-        "Project packaging, can provide services in different packages",
+        "RAG applications, AI agents, and intelligent automation",
-        "Use popular technologies: React, nest.js, next.js, etc.",
+        "Full-stack development with modern tech stack",
-        "Project delivery, provide three months of free maintenance",
+        "Product thinking - focus on solving real problems",
-        "Regardless of project size, can provide services",
+        "Rapid prototyping and iterative development",
       ],
-      color: "blue",
+      color: "purple",
     },
     {
-      title: "Bug Fixes",
+      title: "Technical Consulting",
       icon: {
-        svg: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>`,
+        svg: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>`,
-        gradient: "from-red-500 to-pink-500",
+        gradient: "from-yellow-500 to-orange-500",
       },
       items: [
-        "Quickly locate and fix website issues, able to quickly locate and solve problems",
+        "Technical architecture and stack decisions",
-        "Help you solve any problems encountered in the project, Bug, functional optimization issues",
+        "Code reviews and best practices implementation",
-        "Application of Vue, React, Node and other technologies",
+        "Team mentoring and knowledge transfer",
-        "Frontend automation, deployment, monitoring, automation, etc.",
+        "Performance optimization and scaling strategies",
-        "Only limited to Node.js projects",
+        "Technical due diligence for investments",
       ],
-      color: "red",
+      color: "yellow",
     },
   ],
   zh: [
     {
-      title: "外包项目",
+      title: "AI 产品开发",
       icon: {
-        svg: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>`,
+        svg: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>`,
-        gradient: "from-blue-500 to-cyan-500",
+        gradient: "from-purple-500 to-blue-500",
       },
       items: [
-        "为海外客户提供外包项目服务",
+        "从概念到上线构建 AI 驱动产品",
-        "项目打包，可以提供不同套餐的服务",
+        "RAG 应用、AI Agent 和智能自动化",
-        "使用流行技术：React、nest.js、next.js 等",
+        "使用现代技术栈的全栈开发",
-        "项目交付，提供三个月免费维护",
+        "产品思维 - 专注于解决实际问题",
-        "不论项目大小，都可以提供服务",
+        "快速原型和迭代开发",
       ],
-      color: "blue",
+      color: "purple",
     },
     {
-      title: "Bug 修复",
+      title: "技术咨询",
       icon: {
-        svg: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>`,
+        svg: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>`,
-        gradient: "from-red-500 to-pink-500",
+        gradient: "from-yellow-500 to-orange-500",
       },
       items: [
-        "快速定位和修复网站问题，能够快速定位和解决问题",
+        "技术架构和技术栈决策",
-        "帮助您解决项目中遇到的任何问题，Bug、功能优化问题",
+        "代码审查和最佳实践实施",
-        "Vue、React、Node 等技术的应用",
+        "团队指导和知识转移",
-        "前端自动化、部署、监控、自动化等",
+        "性能优化和扩展策略",
-        "仅限于 Node.js 项目",
+        "投资技术尽职调查",
       ],
-      color: "red",
+      color: "yellow",
     },
   ],
-};
+};

src/pages/blog/index.astro

@@ -3,7 +3,7 @@ import BlogLayout from '../../layouts/BlogLayout.astro';
 import BlogList from '../../components/blog/BlogList.astro';
 import CategoryCard from '../../components/blog/CategoryCard.astro';
 import TagCard from '../../components/blog/TagCard.astro';
-import Container from '../../components/ui/Container';
+import Container from "../../components/ui/Container.astro";
 import { type BlogPost } from '@/types';
 import { useTranslations } from '@/i18n/utils';
 import { type Lang } from '@/types/i18n';
@@ -43,22 +43,22 @@ const sortedBlogPosts = sortPostsByDate(blogPosts);
 
 ---
 
-<BlogLayout title="Blog - Joy Zhao" description="Dive into my thoughts on coding, tech trends, and developer life. Explore my latest posts below.">
+<BlogLayout title="Blog - Joy Zhao" description="Thoughts on AI products, full-stack development, and building in public. Explore my latest posts below.">
   <main class="min-h-screen">
     <!-- Header Section -->
-    <Container client:load className="pt-24 pb-12">
+    <Container className="pt-24 pb-12">
       <div class="text-center mb-16">
         <h1 class="text-5xl md:text-6xl font-bold bg-gradient-to-r from-foreground via-purple-600 to-purple-800 dark:from-foreground dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent mb-6">
-          Our <span class="text-purple-500">Latest</span> Blog
+          <span class="text-purple-500">Blog</span>
         </h1>
         <p class="text-xl text-muted-foreground max-w-3xl mx-auto">
-          {t('blog.slogan')} Dive into my thoughts on coding, tech trends, and developer life. Explore my latest posts below.
+          Thoughts on AI products, full-stack development, and building in public. Exploring the intersection of technology and product building.
         </p>
       </div>
     </Container>
 
     <!-- Main Content -->
-    <Container client:load className="pb-20">
+    <Container className="pb-20">
       <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
         <!-- 侧边栏 -->
         <div class="lg:col-span-1 space-y-8">
@@ -85,4 +85,4 @@ const sortedBlogPosts = sortPostsByDate(blogPosts);
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
-</style>
+</style>

src/pages/hire.astro

@@ -0,0 +1,374 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import GlassHeader from "@/components/GlassHeader";
+import Footer from "@/components/Footer";
+import Container from "@/components/ui/Container.astro";
+import { useTranslations } from "@/i18n/utils";
+import type { Lang } from "@/types/i18n";
+import { defaultLang } from "@/i18n/ui";
+
+const lang = Astro.currentLocale as Lang || defaultLang;
+const t = useTranslations(lang);
+const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
+---
+
+<Layout title={pageTitle}>
+  <GlassHeader lang={lang} client:only="react" />
+  <main class="min-h-screen">
+    <!-- Hire Page Hero -->
+    <section class="py-24 relative overflow-hidden">
+      <div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-blue-900/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-blue-900/30"></div>
+
+      <Container className="relative z-10">
+        <div class="text-center mb-16">
+          <span class="inline-block px-4 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm font-medium mb-4">
+            {lang === 'zh' ? '专业合作' : 'Professional Collaboration'}
+          </span>
+          <h1 class="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-gray-900 via-purple-600 to-purple-800 dark:from-white dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent">
+            {lang === 'zh' ? '合作' : 'Hire Me'}
+          </h1>
+          <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
+            {lang === 'zh'
+              ? '构建优秀产品，从找到合适的技术合伙人开始'
+              : 'Building great products starts with finding the right technical partner'}
+          </p>
+        </div>
+      </Container>
+    </section>
+
+    <!-- Who I Work With -->
+    <section class="py-16 relative">
+      <Container>
+        <div class="max-w-4xl mx-auto">
+          <div class="flex items-center gap-4 mb-8">
+            <div class="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center">
+              <span class="text-2xl">👥</span>
+            </div>
+            <h2 class="text-3xl font-bold">
+              {lang === 'zh' ? '我与谁合作' : 'Who I Work With'}
+            </h2>
+          </div>
+
+          <div class="grid md:grid-cols-2 gap-6">
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/20 p-6">
+              <h3 class="text-lg font-bold mb-3">
+                {lang === 'zh' ? '初创公司' : 'Startups'}
+              </h3>
+              <p class="text-muted-foreground">
+                {lang === 'zh'
+                  ? '从零到一构建产品的早期创业团队，需要快速迭代和灵活响应的技术方案。'
+                  : 'Early-stage startup teams building products from scratch, needing fast iteration and flexible technical solutions.'}
+              </p>
+            </div>
+
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/20 p-6">
+              <h3 class="text-lg font-bold mb-3">
+                {lang === 'zh' ? '独立创始人' : 'Indie Hackers'}
+              </h3>
+              <p class="text-muted-foreground">
+                {lang === 'zh'
+                  ? '独自构建产品的创业者，需要技术合伙人来实现产品愿景。'
+                  : 'Solo founders building products who need a technical partner to realize their product vision.'}
+              </p>
+            </div>
+
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/20 p-6">
+              <h3 class="text-lg font-bold mb-3">
+                {lang === 'zh' ? '传统企业' : 'Traditional Businesses'}
+              </h3>
+              <p class="text-muted-foreground">
+                {lang === 'zh'
+                  ? '希望数字化转型的传统企业，需要现代化的技术解决方案。'
+                  : 'Traditional businesses looking to go digital and need modern technical solutions.'}
+              </p>
+            </div>
+
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/20 p-6">
+              <h3 class="text-lg font-bold mb-3">
+                {lang === 'zh' ? '技术团队' : 'Technical Teams'}
+              </h3>
+              <p class="text-muted-foreground">
+                {lang === 'zh'
+                  ? '需要额外技术资源或特定技能集来推进项目的开发团队。'
+                  : 'Development teams needing additional technical resources or specific skill sets to move projects forward.'}
+              </p>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </section>
+
+    <!-- What I Build -->
+    <section class="py-16 relative bg-white/5 dark:bg-gray-900/50">
+      <Container>
+        <div class="max-w-4xl mx-auto">
+          <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>
+            </div>
+            <h2 class="text-3xl font-bold">
+              {lang === 'zh' ? '我能构建什么' : 'What I Build'}
+            </h2>
+          </div>
+
+          <div class="space-y-6">
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-blue-500/20 p-8">
+              <div class="flex items-start gap-4">
+                <div class="w-12 h-12 bg-gradient-to-br from-purple-600 to-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
+                  <span class="text-2xl">⚡</span>
+                </div>
+                <div>
+                  <h3 class="text-xl font-bold mb-2">AI 产品与应用</h3>
+                  <p class="text-muted-foreground">
+                    {lang === 'zh'
+                      ? '从 AI 助手到 Agent 系统，从 RAG 应用到 AI 驱动的 SaaS 产品。我可以帮助你将 AI 能力产品化。'
+                      : 'From AI assistants to Agent systems, from RAG applications to AI-powered SaaS products. I can help you productize AI capabilities.'}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-blue-500/20 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>
+                </div>
+                <div>
+                  <h3 class="text-xl font-bold mb-2">Web 应用</h3>
+                  <p class="text-muted-foreground">
+                    {lang === 'zh'
+                      ? '现代 Web 应用、SaaS 平台、电商系统、内容管理系统等。使用 React、Next.js、Node.js 等技术栈。'
+                      : 'Modern web applications, SaaS platforms, e-commerce systems, content management systems, etc. Using React, Next.js, Node.js and other tech stacks.'}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-blue-500/20 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>
+                </div>
+                <div>
+                  <h3 class="text-xl font-bold mb-2">全栈产品</h3>
+                  <p class="text-muted-foreground">
+                    {lang === 'zh'
+                      ? '从前端到后端，从数据库到部署，我提供完整的全栈开发能力，一个项目只需一个开发者。'
+                      : 'From frontend to backend, from database to deployment, I provide complete full-stack development capabilities - one developer for the entire project.'}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </section>
+
+    <!-- Engagement Models -->
+    <section class="py-16 relative">
+      <Container>
+        <div class="max-w-4xl mx-auto">
+          <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>
+            </div>
+            <h2 class="text-3xl font-bold">
+              {lang === 'zh' ? '合作模式' : 'Engagement Models'}
+            </h2>
+          </div>
+
+          <div class="grid md:grid-cols-3 gap-6">
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-green-500/20 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>
+              </div>
+              <h3 class="text-lg font-bold mb-2">
+                {lang === 'zh' ? '技术合伙人' : 'Technical Co-founder'}
+              </h3>
+              <p class="text-sm text-muted-foreground">
+                {lang === 'zh'
+                  ? '长期合作，股权合作，共同承担创业风险与回报'
+                  : 'Long-term partnership, equity-based, sharing startup risks and rewards'}
+              </p>
+            </div>
+
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-green-500/20 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>
+              </div>
+              <h3 class="text-lg font-bold mb-2">
+                {lang === 'zh' ? '项目制' : 'Project-based'}
+              </h3>
+              <p class="text-sm text-muted-foreground">
+                {lang === 'zh'
+                  ? '按项目交付，固定价格或按阶段付款，适合明确需求的项目'
+                  : 'Fixed-price or milestone-based, suitable for projects with clear requirements'}
+              </p>
+            </div>
+
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-green-500/20 p-6 text-center">
+              <div class="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">
+                <span class="text-2xl">⏰</span>
+              </div>
+              <h3 class="text-lg font-bold mb-2">
+                {lang === 'zh' ? '咨询/顾问' : 'Consulting'}
+              </h3>
+              <p class="text-sm text-muted-foreground">
+                {lang === 'zh'
+                  ? '按小时咨询，帮助你做出技术决策，审查代码，指导团队'
+                  : 'Hourly consulting, helping you make technical decisions, code reviews, team guidance'}
+              </p>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </section>
+
+    <!-- Delivery Style -->
+    <section class="py-16 relative bg-white/5 dark:bg-gray-900/50">
+      <Container>
+        <div class="max-w-4xl mx-auto">
+          <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>
+            </div>
+            <h2 class="text-3xl font-bold">
+              {lang === 'zh' ? '工作方式' : 'Delivery Style'}
+            </h2>
+          </div>
+
+          <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-yellow-500/20 p-8">
+            <ul class="space-y-4">
+              <li class="flex items-start gap-3">
+                <span class="text-green-500 text-xl">✓</span>
+                <div>
+                  <strong class="block mb-1">
+                    {lang === 'zh' ? '敏捷迭代' : 'Agile Iteration'}
+                  </strong>
+                  <p class="text-muted-foreground text-sm">
+                    {lang === 'zh'
+                      ? '2周一个迭代，快速交付可用功能，持续获取反馈'
+                      : '2-week sprints, rapid delivery of usable features, continuous feedback'}
+                  </p>
+                </div>
+              </li>
+              <li class="flex items-start gap-3">
+                <span class="text-green-500 text-xl">✓</span>
+                <div>
+                  <strong class="block mb-1">
+                    {lang === 'zh' ? '透明沟通' : 'Transparent Communication'}
+                  </strong>
+                  <p class="text-muted-foreground text-sm">
+                    {lang === 'zh'
+                      ? '定期同步进度，及时报告问题，保持信息对称'
+                      : 'Regular progress updates, timely issue reporting, keeping information symmetric'}
+                  </p>
+                </div>
+              </li>
+              <li class="flex items-start gap-3">
+                <span class="text-green-500 text-xl">✓</span>
+                <div>
+                  <strong class="block mb-1">
+                    {lang === 'zh' ? '代码质量' : 'Code Quality'}
+                  </strong>
+                  <p class="text-muted-foreground text-sm">
+                    {lang === 'zh'
+                      ? '完整的测试覆盖，清晰的文档注释，可维护的代码结构'
+                      : 'Complete test coverage, clear documentation, maintainable code structure'}
+                  </p>
+                </div>
+              </li>
+              <li class="flex items-start gap-3">
+                <span class="text-green-500 text-xl">✓</span>
+                <div>
+                  <strong class="block mb-1">
+                    {lang === 'zh' ? '产品思维' : 'Product Thinking'}
+                  </strong>
+                  <p class="text-muted-foreground text-sm">
+                    {lang === 'zh'
+                      ? '不只是写代码，还思考产品价值，用户体验和业务目标'
+                      : 'Not just writing code, but also thinking about product value, user experience, and business goals'}
+                  </p>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </Container>
+    </section>
+
+    <!-- Availability -->
+    <section class="py-16 relative">
+      <Container>
+        <div class="max-w-4xl mx-auto">
+          <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>
+            </div>
+            <h2 class="text-3xl font-bold">
+              {lang === 'zh' ? '当前可用性' : 'Availability'}
+            </h2>
+          </div>
+
+          <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-red-500/20 p-8">
+            <div class="flex items-center gap-4 mb-6">
+              <div class="w-4 h-4 bg-green-500 rounded-full animate-pulse"></div>
+              <span class="text-lg font-semibold">
+                {lang === 'zh' ? '目前可接受新项目' : 'Currently Available for New Projects'}
+              </span>
+            </div>
+            <p class="text-muted-foreground mb-6">
+              {lang === 'zh'
+                ? '我目前可以接受 1-2 个新项目。偏好长期合作模式（技术合伙人或长期项目），但也会考虑短期项目。'
+                : 'I can currently take on 1-2 new projects. Prefer long-term partnership (technical co-founder or long-term projects), but also open to short-term projects.'}
+            </p>
+            <div class="flex flex-wrap gap-2">
+              <span class="px-3 py-1 bg-green-500/20 text-green-600 dark:text-green-400 rounded-full text-sm">
+                {lang === 'zh' ? '可立即开始' : 'Available immediately'}
+              </span>
+              <span class="px-3 py-1 bg-blue-500/20 text-blue-600 dark:text-blue-400 rounded-full text-sm">
+                {lang === 'zh' ? '远程工作' : 'Remote only'}
+              </span>
+              <span class="px-3 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm">
+                {lang === 'zh' ? '中英双语' : 'Bilingual EN/ZH'}
+              </span>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </section>
+
+    <!-- Contact CTA -->
+    <section class="py-16 relative bg-gradient-to-br from-purple-900/20 to-blue-900/20 dark:from-purple-900/30 dark:to-blue-900/30">
+      <Container>
+        <div class="max-w-4xl mx-auto text-center">
+          <h2 class="text-3xl font-bold mb-6">
+            {lang === 'zh' ? '准备好一起构建了吗？' : 'Ready to build together?'}
+          </h2>
+          <p class="text-lg text-muted-foreground mb-8 max-w-xl mx-auto">
+            {lang === 'zh'
+              ? '告诉我你的项目想法，让我们看看能否合作。'
+              : "Tell me about your project idea and let's see if we can work together."}
+          </p>
+          <div class="flex flex-col sm:flex-row gap-4 justify-center">
+            <a
+              href="mailto:zhaoguiyang18@gmail.com"
+              class="bg-purple-500 hover:bg-purple-600 text-white px-8 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
+            >
+              <span>📧</span>
+              {lang === 'zh' ? '发送邮件' : 'Send Email'}
+            </a>
+            <a
+              href={lang === 'zh' ? '/zh/now' : '/now'}
+              class="border border-purple-500 text-purple-500 hover:bg-purple-500 hover:text-white px-8 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
+            >
+              <span>📡</span>
+              {lang === 'zh' ? '了解更多关于我' : 'Learn More About Me'}
+            </a>
+          </div>
+        </div>
+      </Container>
+    </section>
+  </main>
+  <Footer lang={lang} client:only="react" />
+</Layout>

src/pages/index.astro

@@ -4,7 +4,7 @@ import GlassHeader from "@/components/GlassHeader";
 import SkillsMarquee from "@/components/SkillsMarquee";
   import TypewriterEffect from "@/components/TypewriterEffect";
 import Footer from "@/components/Footer";
-import Container from "@/components/ui/Container";
+import Container from "@/components/ui/Container.astro";
 import { useTranslations } from "@/i18n/utils";
 import type { Lang } from "@/types/i18n";
 import { defaultLang } from "@/i18n/ui";
@@ -24,7 +24,7 @@ const pageTitle = t('site.title');
       <!-- Background gradient -->
       <div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-purple-700/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-purple-700/30"></div>
       
-      <Container client:load className="relative z-10">
+      <Container className="relative z-10">
         <div class="text-center mb-16">
           <!-- Greeting -->
           <div class="flex items-center justify-center mb-6">
@@ -79,23 +79,23 @@ const pageTitle = t('site.title');
           <!-- Action buttons -->
           <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16">
             <a
-              href="#about"
+              href={`/${lang === 'zh' ? 'zh/' : ''}hire`}
               class="bg-purple-500 hover:bg-purple-600 text-white px-8 py-3 rounded-lg font-semibold transition-colors flex items-center gap-2"
             >
               <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
               </svg>
-              {t('hero.viewProjects')}
+              {t('hero.ctaPrimary')}
             </a>
-            
+
             <a
-              href={`mailto:${personalInfo.email}`}
+              href={`/${lang === 'zh' ? 'zh/' : ''}projects`}
               class="border border-purple-500 text-purple-500 hover:bg-purple-500 hover:text-white px-8 py-3 rounded-lg font-semibold transition-colors flex items-center gap-2"
             >
               <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
               </svg>
-              {t('hero.contactMe')}
+              {t('hero.ctaSecondary')}
             </a>
           </div>
 
@@ -199,10 +199,81 @@ const pageTitle = t('site.title');
     </section>
 
     <SkillsMarquee lang={lang} client:only="react" />
-    
+
+    <!-- Featured Project: Elynd -->
+    <section class="py-24 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-blue-900/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-blue-900/30">
+      <Container>
+        <div class="text-center mb-12">
+          <span class="inline-block px-4 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm font-medium mb-4">
+            {lang === 'zh' ? 'featured 项目' : 'Featured Project'}
+          </span>
+          <h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-purple-400 via-blue-400 to-purple-400 bg-clip-text text-transparent">
+            Elynd
+          </h2>
+          <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
+            {lang === 'zh'
+              ? '一个开放的 AI 工作空间，让构建者能够更智能地工作'
+              : 'An open AI workspace for builders to work smarter'}
+          </p>
+        </div>
+
+        <div class="max-w-4xl mx-auto">
+          <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/20 overflow-hidden">
+            <div class="h-64 md:h-80 bg-gradient-to-br from-purple-600/20 via-blue-600/20 to-purple-600/20 flex items-center justify-center relative overflow-hidden">
+              <div class="absolute inset-0 bg-grid-purple-500/10 [mask-image:linear-gradient(0deg,white,rgba(255,255,255,0.3))]"></div>
+              <div class="text-center z-10">
+                <div class="text-6xl md:text-8xl mb-4">⚡</div>
+                <div class="text-2xl md:text-3xl font-bold text-purple-400">
+                  {lang === 'zh' ? '让 AI 成为你的共同构建者' : 'Make AI Your Co-Builder'}
+                </div>
+              </div>
+            </div>
+            <div class="p-8">
+              <div class="grid md:grid-cols-3 gap-6 mb-8">
+                <div class="text-center">
+                  <div class="text-3xl font-bold text-purple-400 mb-2">AI-First</div>
+                  <div class="text-sm text-muted-foreground">
+                    {lang === 'zh' ? '从第一天就融入 AI 思维' : 'Built with AI from day one'}
+                  </div>
+                </div>
+                <div class="text-center">
+                  <div class="text-3xl font-bold text-blue-400 mb-2">Open</div>
+                  <div class="text-sm text-muted-foreground">
+                    {lang === 'zh' ? '完全开放，可自托管' : 'Fully open, self-hostable'}
+                  </div>
+                </div>
+                <div class="text-center">
+                  <div class="text-3xl font-bold text-green-400 mb-2">Builder-First</div>
+                  <div class="text-sm text-muted-foreground">
+                    {lang === 'zh' ? '为构建者打造的工作空间' : 'Workspace built for builders'}
+                  </div>
+                </div>
+              </div>
+              <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                <a
+                  href={`/${lang === 'zh' ? 'zh/' : ''}projects`}
+                  class="bg-purple-500 hover:bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
+                >
+                  <span>🚀</span>
+                  {t('hero.ctaSecondary')}
+                </a>
+                <a
+                  href={`/${lang === 'zh' ? 'zh/' : ''}now`}
+                  class="border border-purple-500 text-purple-500 hover:bg-purple-500 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' ? '了解更多' : 'Learn More'}
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </section>
+
     <!-- Services Section - Inlined Content -->
     <section id="services" class="py-20 bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800">
-      <Container client:load>
+      <Container>
         <h2 class="text-4xl font-bold text-center mb-16 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
           {t('services.title')}
         </h2>
@@ -246,7 +317,7 @@ const pageTitle = t('site.title');
       <!-- Background gradient -->
       <div class="absolute inset-0 bg-gradient-to-br from-blue-900/10 via-purple-800/5 to-indigo-700/10 dark:from-blue-900/20 dark:via-purple-800/10 dark:to-indigo-700/20"></div>
       
-      <Container client:load className="relative z-10">
+      <Container className="relative z-10">
         <div class="text-center mb-16">
           <!-- Section Title -->
           <div class="flex items-center justify-center mb-6">
@@ -388,7 +459,7 @@ const pageTitle = t('site.title');
     <!-- <section id="projects" class="py-20 relative">
       <div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent"></div>
       
-      <Container client:load className="relative z-10">
+      <Container className="relative z-10">
         <div class="text-center mb-16">
           <h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent">
             Latest Projects

src/pages/now.astro

@@ -0,0 +1,203 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import GlassHeader from "@/components/GlassHeader";
+import Footer from "@/components/Footer";
+import Container from "@/components/ui/Container.astro";
+import { useTranslations } from "@/i18n/utils";
+import type { Lang } from "@/types/i18n";
+import { defaultLang } from "@/i18n/ui";
+
+const lang = Astro.currentLocale as Lang || defaultLang;
+const t = useTranslations(lang);
+const pageTitle = lang === 'zh' ? '现在' : 'Now';
+---
+
+<Layout title={pageTitle}>
+  <GlassHeader lang={lang} client:only="react" />
+  <main class="min-h-screen">
+    <!-- Now Page Hero -->
+    <section class="py-24 relative overflow-hidden">
+      <div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-blue-900/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-blue-900/30"></div>
+
+      <Container className="relative z-10">
+        <div class="text-center mb-16">
+          <span class="inline-block px-4 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm font-medium mb-4">
+            {lang === 'zh' ? '关于我现在正在做什么' : "What's happening now"}
+          </span>
+          <h1 class="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-gray-900 via-purple-600 to-purple-800 dark:from-white dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent">
+            {lang === 'zh' ? '现在' : 'Now'}
+          </h1>
+          <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
+            {lang === 'zh'
+              ? '持续更新我的现状、正在构建的内容以及合作机会'
+              : 'Continuously updating my current status, what I am building, and collaboration opportunities'}
+          </p>
+        </div>
+      </Container>
+    </section>
+
+    <!-- Building Section -->
+    <section class="py-16 relative">
+      <Container>
+        <div class="max-w-4xl mx-auto">
+          <div class="flex items-center gap-4 mb-8">
+            <div class="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center">
+              <span class="text-2xl">🔨</span>
+            </div>
+            <h2 class="text-3xl font-bold">
+              {lang === 'zh' ? '正在构建' : 'Building'}
+            </h2>
+          </div>
+
+          <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/20 p-8">
+            <div class="flex items-start gap-6">
+              <div class="w-16 h-16 bg-gradient-to-br from-purple-600 to-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
+                <span class="text-3xl">⚡</span>
+              </div>
+              <div class="flex-1">
+                <h3 class="text-xl font-bold mb-2">Elynd</h3>
+                <p class="text-muted-foreground mb-4">
+                  {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">
+                  <span class="px-3 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm">AI Product</span>
+                  <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-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>
+      </Container>
+    </section>
+
+    <!-- Exploring Section -->
+    <section class="py-16 relative bg-white/5 dark:bg-gray-900/50">
+      <Container>
+        <div class="max-w-4xl mx-auto">
+          <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>
+            </div>
+            <h2 class="text-3xl font-bold">
+              {lang === 'zh' ? '正在探索' : 'Exploring'}
+            </h2>
+          </div>
+
+          <div class="grid gap-6">
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-blue-500/20 p-6">
+              <h3 class="text-lg font-bold mb-3">
+                {lang === 'zh' ? 'AI Agents 与工作流自动化' : 'AI Agents & Workflow Automation'}
+              </h3>
+              <p class="text-muted-foreground">
+                {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>
+            </div>
+
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-blue-500/20 p-6">
+              <h3 class="text-lg font-bold mb-3">
+                {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">
+      <Container>
+        <div class="max-w-4xl mx-auto">
+          <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>
+            </div>
+            <h2 class="text-3xl font-bold">
+              {lang === 'zh' ? '最近发布' : 'Shipping'}
+            </h2>
+          </div>
+
+          <div class="space-y-4">
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl border border-green-500/20 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>
+              </div>
+              <div>
+                <h3 class="font-bold mb-1">
+                  {lang === 'zh' ? '个人网站全新改版' : 'Portfolio Website Redesign'}
+                </h3>
+                <p class="text-sm text-muted-foreground">
+                  {lang === 'zh'
+                    ? '全新设计的个人网站，突出 AI 产品构建者的定位'
+                    : 'Redesigned portfolio with focus on AI product builder positioning'}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </section>
+
+    <!-- Open to Collaborate Section -->
+    <section class="py-16 relative bg-gradient-to-br from-purple-900/10 to-blue-900/10 dark:from-purple-900/20 dark:to-blue-900/20">
+      <Container>
+        <div class="max-w-4xl mx-auto 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="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-yellow-500/20 p-8">
+            <p class="text-lg text-muted-foreground mb-8">
+              {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."}
+            </p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+              <a
+                href={lang === 'zh' ? '/zh/hire' : '/hire'}
+                class="bg-purple-500 hover:bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
+              >
+                <span>💼</span>
+                {lang === 'zh' ? '查看合作方式' : 'View Collaboration Options'}
+              </a>
+              <a
+                href="mailto:zhaoguiyang18@gmail.com"
+                class="border border-purple-500 text-purple-500 hover:bg-purple-500 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 -->
+    <section class="py-12">
+      <Container>
+        <div class="max-w-4xl mx-auto text-center">
+          <p class="text-sm text-muted-foreground">
+            {lang === 'zh' ? '最后更新：' : 'Last updated: '}
+            <span class="font-medium">2025年3月</span>
+          </p>
+        </div>
+      </Container>
+    </section>
+  </main>
+  <Footer lang={lang} client:only="react" />
+</Layout>

src/pages/projects.astro

@@ -2,7 +2,7 @@
 import Layout from "@/layouts/Layout.astro";
 import GlassHeader from "@/components/GlassHeader";
 import Footer from "@/components/Footer";
-import Container from "@/components/ui/Container";
+import Container from "@/components/ui/Container.astro";
 import { useTranslations } from "@/i18n/utils";
 import type { Lang } from "@/types/i18n";
 import { defaultLang } from "@/i18n/ui";
@@ -15,6 +15,15 @@ const pageTitle = t('projects.title');
 
 // 根据当前语言获取项目数据
 const currentProjects = projects[lang as keyof typeof projects] || projects.en;
+
+// Separate featured and grouped projects
+const featuredProject = currentProjects.find(p => p.featured);
+const otherProjects = currentProjects.filter(p => !p.featured);
+
+// Group by type
+const productProjects = otherProjects.filter(p => p.type === 'product');
+const clientProjects = otherProjects.filter(p => p.type === 'client');
+const experimentProjects = otherProjects.filter(p => p.type === 'experiment');
 ---
 
 <Layout title={pageTitle}>
@@ -24,8 +33,8 @@ const currentProjects = projects[lang as keyof typeof projects] || projects.en;
     <section class="py-24 relative overflow-hidden">
       <!-- Background gradient -->
       <div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-purple-700/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-purple-700/30"></div>
-      
+
-      <Container client:load className="relative z-10">
+      <Container className="relative z-10">
         <div class="text-center mb-16">
           <!-- Main title -->
           <h1 class="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-gray-900 via-purple-600 to-purple-800 dark:from-white dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent">
@@ -40,69 +49,274 @@ const currentProjects = projects[lang as keyof typeof projects] || projects.en;
       </Container>
     </section>
 
-    <!-- Projects Grid Section -->
+    <!-- Featured Project Section -->
-    <section class="py-12 relative">
+    {featuredProject && (
-      <!-- Background gradient -->
+      <section class="py-12 bg-gradient-to-br from-purple-900/10 to-blue-900/10 dark:from-purple-900/20 dark:to-blue-900/20">
-      <div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent"></div>
+        <Container>
-      
+          <div class="max-w-5xl mx-auto">
-      <Container client:load className="relative z-10">
+            <div class="flex items-center gap-4 mb-8">
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-stretch">
+              <span class="inline-block px-4 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm font-medium">
-          {currentProjects.map((project) => (
+                Featured
-            <div class={`group overflow-hidden border border-${project.color}-500/20 hover:border-${project.color}-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative`}>              
+              </span>
-              <!-- Project tag - positioned at top right -->
+            </div>
-              <div class="absolute top-4 right-4 z-10">
+
-                <span class={`px-3 py-1 bg-${project.color}-100 dark:bg-${project.color}-800 text-${project.color}-800 dark:text-${project.color}-200 text-xs rounded-full font-medium border border-${project.color}-200 dark:border-${project.color}-700`}>{t(`project.tag.${project.tag}`)}</span>
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/30 overflow-hidden">
-              </div>
+              <div class="grid lg:grid-cols-2">
-              
+                <div class="h-64 lg:h-auto bg-gradient-to-br from-purple-600/20 via-blue-600/20 to-purple-600/20 flex items-center justify-center relative overflow-hidden">
-              <!-- Project image placeholder -->
+                  <div class="text-8xl">{featuredProject.icon}</div>
-              <div class={`h-48 bg-gradient-to-br ${project.image.bg} relative overflow-hidden`}>
+                </div>
-                <div class={`absolute inset-0 bg-gradient-to-br ${project.image.bg} group-hover:${project.image.hover} transition-all duration-500`}></div>
+                <div class="p-8">
-                <div class="absolute bottom-4 left-4 right-4">
+                  <div class="flex items-center gap-3 mb-4">
-                  <div class={`bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono ${project.image.text}`}>
+                    <span class="px-3 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm">
-                    {project.title}
+                      {t(`project.status.${featuredProject.status}`)}
+                    </span>
+                    <span class="px-3 py-1 bg-blue-500/20 text-blue-600 dark:text-blue-400 rounded-full text-sm">
+                      {t(`project.type.${featuredProject.type}`)}
+                    </span>
+                  </div>
+
+                  <h2 class="text-3xl font-bold mb-4">{featuredProject.title}</h2>
+
+                  <div class="space-y-4 mb-6">
+                    <div>
+                      <span class="text-sm text-muted-foreground">{t('project.role')}:</span>
+                      <p class="font-medium">{featuredProject.role}</p>
+                    </div>
+                    <div>
+                      <span class="text-sm text-muted-foreground">{t('project.impact')}:</span>
+                      <p class="font-medium">{featuredProject.impact}</p>
+                    </div>
+                  </div>
+
+                  <div class="space-y-2 mb-6">
+                    {featuredProject.description.map((desc) => (
+                      <p class="text-muted-foreground text-sm">{desc}</p>
+                    ))}
+                  </div>
+
+                  <div class="flex flex-wrap gap-2 mb-6">
+                    {featuredProject.tech.map((tech) => (
+                      <span class="px-3 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-sm rounded-md border border-gray-500/20 dark:border-gray-400/30">{tech}</span>
+                    ))}
+                  </div>
+
+                  <div class="flex gap-4">
+                    <a href={featuredProject.link} class="bg-purple-500 hover:bg-purple-600 text-white px-6 py-2 rounded-lg font-medium transition-colors inline-flex items-center gap-2">
+                      {t('project.visit')}
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
+                      </svg>
+                    </a>
+                    {featuredProject.links?.github && (
+                      <a href={featuredProject.links.github} target="_blank" rel="noopener noreferrer" class="border border-gray-500 text-gray-600 dark:text-gray-300 hover:bg-gray-500/10 px-6 py-2 rounded-lg font-medium transition-colors inline-flex items-center gap-2">
+                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                          <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                        </svg>
+                        GitHub
+                      </a>
+                    )}
                   </div>
                 </div>
               </div>
-              
-              <div class="p-6 pb-4">
-                <h3 class={`text-xl group-hover:text-${project.color}-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4`}>
-                  <span class={`text-${project.color}-500`}>{project.icon}</span>
-                  {project.title}
-                </h3>
-              </div>
-              
-              <div class="px-6 flex-grow">
-                <div class="space-y-3">
-                  {project.description.map((desc) => (
-                    <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
-                      <span class={`text-${project.color}-500 mt-1`}>•</span>
-                      <span>{desc}</span>
-                    </div>
-                  ))}
-                </div>
-                
-                <!-- Tech stack indicators with unified gray styling -->
-                <div class="mt-6 mb-4 flex flex-wrap gap-2">
-                  {project.tech.map((tech) => (
-                    <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">{tech}</span>
-                  ))}
-                </div>
-              </div>
-              
-              <!-- Visit project link -->
-              <div class="p-6 pt-2">
-                <a href={project.link} class={`inline-flex items-center text-sm font-medium text-${project.color}-500 hover:text-${project.color}-600 dark:hover:text-${project.color}-400 transition-colors duration-300`}>
-                  {t('project.visit')} 
-                  <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
-                  </svg>
-                </a>
-              </div>
             </div>
-          ))}
+          </div>
-        </div>
+        </Container>
-      </div>
+      </section>
+    )}
+
+    <!-- Projects by Type -->
+    <section class="py-12 relative">
+      <Container>
+        <!-- Product Projects -->
+        {productProjects.length > 0 && (
+          <>
+            <div class="flex items-center gap-4 mb-8">
+              <div class="w-10 h-10 bg-purple-500/20 rounded-lg flex items-center justify-center">
+                <span class="text-xl">🛍️</span>
+              </div>
+              <h2 class="text-2xl font-bold">{t('project.type.product')}</h2>
+            </div>
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
+              {productProjects.map((project) => (
+                <div class={`group overflow-hidden border border-${project.color}-500/20 hover:border-${project.color}-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative`}>
+                  <div class="absolute top-4 right-4 z-10 flex gap-2">
+                    <span class={`px-3 py-1 bg-${project.color}-100 dark:bg-${project.color}-800 text-${project.color}-800 dark:text-${project.color}-200 text-xs rounded-full font-medium border border-${project.color}-200 dark:border-${project.color}-700`}>{t(`project.status.${project.status}`)}</span>
+                  </div>
+
+                  <div class={`h-48 bg-gradient-to-br ${project.image.bg} relative overflow-hidden`}>
+                    <div class={`absolute inset-0 bg-gradient-to-br ${project.image.bg} group-hover:${project.image.hover} transition-all duration-500`}></div>
+                    <div class="absolute bottom-4 left-4 right-4">
+                      <div class={`bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono ${project.image.text}`}>
+                        {project.title}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="p-6 pb-4">
+                    <h3 class={`text-xl group-hover:text-${project.color}-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4`}>
+                      <span class={`text-${project.color}-500`}>{project.icon}</span>
+                      {project.title}
+                    </h3>
+                  </div>
+
+                  <div class="px-6 flex-grow">
+                    <div class="space-y-3">
+                      {project.description.slice(0, 2).map((desc) => (
+                        <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                          <span class={`text-${project.color}-500 mt-1`}>•</span>
+                          <span>{desc}</span>
+                        </div>
+                      ))}
+                    </div>
+
+                    <div class="mt-6 mb-4 flex flex-wrap gap-2">
+                      {project.tech.slice(0, 4).map((tech) => (
+                        <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">{tech}</span>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div class="p-6 pt-2">
+                    <a href={project.link} class={`inline-flex items-center text-sm font-medium text-${project.color}-500 hover:text-${project.color}-600 dark:hover:text-${project.color}-400 transition-colors duration-300`}>
+                      {t('project.visit')}
+                      <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
+                      </svg>
+                    </a>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+
+        <!-- Client Projects -->
+        {clientProjects.length > 0 && (
+          <>
+            <div class="flex items-center gap-4 mb-8">
+              <div class="w-10 h-10 bg-blue-500/20 rounded-lg flex items-center justify-center">
+                <span class="text-xl">💼</span>
+              </div>
+              <h2 class="text-2xl font-bold">{t('project.type.client')}</h2>
+            </div>
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
+              {clientProjects.map((project) => (
+                <div class={`group overflow-hidden border border-${project.color}-500/20 hover:border-${project.color}-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative`}>
+                  <div class="absolute top-4 right-4 z-10 flex gap-2">
+                    <span class={`px-3 py-1 bg-${project.color}-100 dark:bg-${project.color}-800 text-${project.color}-800 dark:text-${project.color}-200 text-xs rounded-full font-medium border border-${project.color}-200 dark:border-${project.color}-700`}>{t(`project.status.${project.status}`)}</span>
+                  </div>
+
+                  <div class={`h-48 bg-gradient-to-br ${project.image.bg} relative overflow-hidden`}>
+                    <div class={`absolute inset-0 bg-gradient-to-br ${project.image.bg} group-hover:${project.image.hover} transition-all duration-500`}></div>
+                    <div class="absolute bottom-4 left-4 right-4">
+                      <div class={`bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono ${project.image.text}`}>
+                        {project.title}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="p-6 pb-4">
+                    <h3 class={`text-xl group-hover:text-${project.color}-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4`}>
+                      <span class={`text-${project.color}-500`}>{project.icon}</span>
+                      {project.title}
+                    </h3>
+                  </div>
+
+                  <div class="px-6 flex-grow">
+                    <div class="space-y-3">
+                      {project.description.slice(0, 2).map((desc) => (
+                        <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                          <span class={`text-${project.color}-500 mt-1`}>•</span>
+                          <span>{desc}</span>
+                        </div>
+                      ))}
+                    </div>
+
+                    <div class="mt-6 mb-4 flex flex-wrap gap-2">
+                      {project.tech.slice(0, 4).map((tech) => (
+                        <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">{tech}</span>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div class="p-6 pt-2">
+                    <a href={project.link} class={`inline-flex items-center text-sm font-medium text-${project.color}-500 hover:text-${project.color}-600 dark:hover:text-${project.color}-400 transition-colors duration-300`}>
+                      {t('project.visit')}
+                      <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
+                      </svg>
+                    </a>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+
+        <!-- Experiment Projects -->
+        {experimentProjects.length > 0 && (
+          <>
+            <div class="flex items-center gap-4 mb-8">
+              <div class="w-10 h-10 bg-green-500/20 rounded-lg flex items-center justify-center">
+                <span class="text-xl">🧪</span>
+              </div>
+              <h2 class="text-2xl font-bold">{t('project.type.experiment')}</h2>
+            </div>
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+              {experimentProjects.map((project) => (
+                <div class={`group overflow-hidden border border-${project.color}-500/20 hover:border-${project.color}-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative`}>
+                  <div class="absolute top-4 right-4 z-10 flex gap-2">
+                    <span class={`px-3 py-1 bg-${project.color}-100 dark:bg-${project.color}-800 text-${project.color}-800 dark:text-${project.color}-200 text-xs rounded-full font-medium border border-${project.color}-200 dark:border-${project.color}-700`}>{t(`project.status.${project.status}`)}</span>
+                  </div>
+
+                  <div class={`h-48 bg-gradient-to-br ${project.image.bg} relative overflow-hidden`}>
+                    <div class={`absolute inset-0 bg-gradient-to-br ${project.image.bg} group-hover:${project.image.hover} transition-all duration-500`}></div>
+                    <div class="absolute bottom-4 left-4 right-4">
+                      <div class={`bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono ${project.image.text}`}>
+                        {project.title}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="p-6 pb-4">
+                    <h3 class={`text-xl group-hover:text-${project.color}-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4`}>
+                      <span class={`text-${project.color}-500`}>{project.icon}</span>
+                      {project.title}
+                    </h3>
+                  </div>
+
+                  <div class="px-6 flex-grow">
+                    <div class="space-y-3">
+                      {project.description.slice(0, 2).map((desc) => (
+                        <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                          <span class={`text-${project.color}-500 mt-1`}>•</span>
+                          <span>{desc}</span>
+                        </div>
+                      ))}
+                    </div>
+
+                    <div class="mt-6 mb-4 flex flex-wrap gap-2">
+                      {project.tech.slice(0, 4).map((tech) => (
+                        <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">{tech}</span>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div class="p-6 pt-2">
+                    <a href={project.link} class={`inline-flex items-center text-sm font-medium text-${project.color}-500 hover:text-${project.color}-600 dark:hover:text-${project.color}-400 transition-colors duration-300`}>
+                      {t('project.visit')}
+                      <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
+                      </svg>
+                    </a>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+      </Container>
     </section>
   </main>
   <Footer lang={lang} client:load />
-</Layout>
+</Layout>

src/pages/services.md

@@ -1,119 +0,0 @@
----
-title: "My Services"
-description: "Explore the professional services I offer to help bring your digital projects to life"
-layout: "../layouts/AboutLayout.astro"
----
-
-import HighlightBox from '../components/ui/HighlightBox.astro';
-
-# Services I Provide 🛠️
-
-<HighlightBox type="tip">
-用优雅的代码和创新的思维，为复杂问题打造精致的解决方案。
-</HighlightBox>
-
-## Web Development 🌐
-
-<HighlightBox type="info" title="Web Development Services">
-
-- Building responsive and modern websites using the latest technologies
-- Creating custom web applications tailored to your specific needs
-- Implementing frontend interfaces with React, Vue.js, or Angular
-- Developing backend systems with Node.js, Express, Django, or Flask
-- Optimizing website performance and user experience
-
-</HighlightBox>
-
-## App Development 📱
-
-<HighlightBox type="success" title="Mobile App Solutions">
-
-- Developing cross-platform mobile applications using React Native or Flutter
-- Creating native iOS and Android applications
-- Building progressive web apps (PWAs) for mobile-like experiences on the web
-- Implementing offline functionality and push notifications
-- Integrating with device features like camera, GPS, and sensors
-
-</HighlightBox>
-
-## WeChat Mini Program Development 💬
-
-<HighlightBox type="tip" title="WeChat Mini Program Expertise">
-
-- Designing and developing WeChat Mini Programs for businesses
-- Creating interactive and engaging user interfaces
-- Implementing WeChat Pay and other WeChat APIs
-- Optimizing for WeChat's ecosystem and requirements
-- Building custom features and functionalities specific to your business needs
-
-</HighlightBox>
-
-## UI Design 🎨
-
-<HighlightBox type="note" title="UI Design Services">
-
-- Creating modern, clean, and intuitive user interfaces
-- Designing responsive layouts that work across all devices
-- Developing brand identity and visual language
-- Creating wireframes, prototypes, and high-fidelity mockups
-- Implementing design systems for consistent user experiences
-
-</HighlightBox>
-
-## Bug Fixing 🐛
-
-<HighlightBox type="error" title="Bug Fixing & Code Optimization">
-
-- Identifying and resolving issues in existing applications
-- Debugging complex problems in frontend and backend systems
-- Optimizing code for better performance and reliability
-- Refactoring legacy code to modern standards
-- Implementing automated testing to prevent future bugs
-
-</HighlightBox>
-
-## Important Notes 📝
-
-<HighlightBox type="warning" title="Before Contacting Me">
-To avoid unnecessary misunderstandings, please read the following notes before contacting me:
-
-1. Please provide detailed project requirements, including wireframes or design specifications (if you don't understand these, I can help guide you).
-2. Please specify project completion time and development period.
-3. In general, I only accept commercial projects, and other forms of cooperation need to be discussed separately.
-4. I currently cannot provide invoicing services.
-5. Projects can be maintained free of charge for 3 months after completion.
-</HighlightBox>
-
-## Collaboration Process 🤝
-
-<HighlightBox type="info" title="How We'll Work Together">
-1. Confirm the project
-2. Determine the collaboration method
-3. Confirm project functional requirements
-4. Confirm development period and delivery time
-5. Confirm project design or wireframes
-6. Make payment
-7. Project development
-8. Project testing
-9. Project launch
-10. Project maintenance
-</HighlightBox>
-
-## Payment Methods 💰
-
-<HighlightBox type="note" title="Payment Options">
-
-- WeChat Pay
-- Alipay
-- Bank Transfer
-
-**Note: All projects use the 442 payment method**
-</HighlightBox>
-
-## Contact Information 📞
-
-<HighlightBox type="success" title="Get in Touch">
-- QQ: **2770723534**
-- WeChat: **JoyCodeing**
-- Email: **zhaoguiyang18@gmail.com**
-</HighlightBox>

src/pages/services.mdx

@@ -1,71 +1,42 @@
 ---
-title: "My Services"
+title: "What I Do"
-description: "Explore the professional services I offer to help bring your digital projects to life"
+description: "Professional services focused on building AI products and technical excellence"
 layout: "../layouts/AboutLayout.astro"
 ---
 
 import HighlightBox from '../components/markdown/HighlightBox.astro';
 
-# Services I Provide 🛠️
+# What I Do 🚀
 
 <HighlightBox type="tip">
-用优雅的代码和创新的思维，为复杂问题打造精致的解决方案。
+Building AI-powered products and turning ambitious ideas into reality.
 </HighlightBox>
 
-## Web Development 🌐
+## AI Product Development 🤖
 
-- Building responsive and modern websites using the latest technologies
+- Building AI-powered products from concept to launch
-- Creating custom web applications tailored to your specific needs
+- RAG applications, AI agents, and intelligent automation
-- Implementing frontend interfaces with React, Vue.js, or Angular
+- Full-stack development with modern tech stack (React, Next.js, Node.js)
-- Developing backend systems with Node.js, Express, Django, or Flask
+- Product thinking - focus on solving real problems
-- Optimizing website performance and user experience
+- Rapid prototyping and iterative development
 
-## Bug Fixing 🐛
+## Technical Consulting 📊
 
-<HighlightBox type="error" title="Bug Fixing & Code Optimization">
+<HighlightBox type="info" title="How I Can Help">
 
-- Identifying and resolving issues in existing applications
+- Technical architecture and stack decisions
-- Debugging complex problems in frontend and backend systems
+- Code reviews and best practices implementation
-- Optimizing code for better performance and reliability
+- Team mentoring and knowledge transfer
-- Refactoring legacy code to modern standards
+- Performance optimization and scaling strategies
-- Implementing automated testing to prevent future bugs
+- Technical due diligence for investments
 
 </HighlightBox>
 
-# Services I Provide 🛠️
+# Let's Build Together 💼
-## Important Notes 📝
-
-<HighlightBox type="warning" title="Before Contacting Me">
-To avoid unnecessary misunderstandings, please read the following notes before contacting me:
-
-1. Please provide detailed project requirements, including wireframes or design specifications (if you don't understand these, I can help guide you).
-2. Please specify project completion time and development period.
-3. In general, I only accept commercial projects, and other forms of cooperation need to be discussed separately.
-4. I currently cannot provide invoicing services.
-5. Projects can be maintained free of charge for 3 months after completion.
-</HighlightBox>
-
-# Services I Provide 🛠️
-## Collaboration Process 🤝
-
-<HighlightBox type="info" title="How We'll Work Together">
-1. Confirm the project
-2. Determine the collaboration method
-3. Confirm project functional requirements
-4. Confirm development period and delivery time
-5. Confirm project design or wireframes
-6. Make payment
-7. Project development
-8. Project testing
-9. Project launch
-10. Project maintenance
-</HighlightBox>
-
-# Services I Provide 🛠️
-## Contact Information 📞
 
 <HighlightBox type="success" title="Get in Touch">
-- QQ: **2770723534**
+I'm always open to discussing new projects and opportunities. Whether you're looking for a technical co-founder, need help building an AI product, or want technical consulting - let's talk.
-- WeChat: **JoyCodeing**
+
 - Email: **zhaoguiyang18@gmail.com**
-</HighlightBox>
+- Check out my [Hire Me](/hire) page for collaboration options
+</HighlightBox>

src/pages/zh/blog/index.astro

@@ -3,7 +3,7 @@ import BlogLayout from '../../../layouts/BlogLayout.astro';
 import BlogList from '../../../components/blog/BlogList.astro';
 import CategoryCard from '../../../components/blog/CategoryCard.astro';
 import TagCard from '../../../components/blog/TagCard.astro';
-import Container from '../../../components/ui/Container';
+import Container from "../../../components/ui/Container.astro";
 import { type BlogPost } from '@/types';
 import { useTranslations } from '@/i18n/utils';
 import { type Lang } from '@/types/i18n';
@@ -55,22 +55,22 @@ const tags = extractTags(allPostsArray);
 
 ---
 
-<BlogLayout title="博客 - Joy Zhao" description="深入我对编程、技术趋势和开发者生活的思考。探索我的最新文章。">
+<BlogLayout title="博客 - Joy Zhao" description="关于 AI 产品、全栈开发和公开构建的思考。探索技术与产品构建的交汇点。">
   <main class="min-h-screen">
     <!-- 头部区域 -->
-    <Container client:load className="pt-24 pb-12">
+    <Container className="pt-24 pb-12">
       <div class="text-center mb-16">
         <h1 class="text-5xl md:text-6xl font-bold bg-gradient-to-r from-foreground via-purple-600 to-purple-800 dark:from-foreground dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent mb-6">
-          我的<span class="text-purple-500">博客</span>
+          <span class="text-purple-500">博客</span>
         </h1>
         <p class="text-xl text-muted-foreground max-w-3xl mx-auto">
-          {t('blog.slogan')} 探索我对网络开发、设计和技术的想法、教程和见解。
+          关于 AI 产品、全栈开发和公开构建的思考。探索技术与产品构建的交汇点。
         </p>
       </div>
     </Container>
 
     <!-- 主要内容 -->
-    <Container client:load className="pb-20">
+    <Container className="pb-20">
       <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
         <!-- 侧边栏 -->
         <div class="lg:col-span-1 space-y-8">
@@ -98,4 +98,4 @@ const tags = extractTags(allPostsArray);
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
-</style>
+</style>

src/pages/zh/hire.astro

@@ -0,0 +1,332 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import GlassHeader from "@/components/GlassHeader";
+import Footer from "@/components/Footer";
+import Container from "@/components/ui/Container.astro";
+import { useTranslations } from "@/i18n/utils";
+import type { Lang } from "@/types/i18n";
+import { defaultLang } from "@/i18n/ui";
+
+const lang = Astro.currentLocale as Lang || defaultLang;
+const t = useTranslations(lang);
+const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
+---
+
+<Layout title={pageTitle}>
+  <GlassHeader lang={lang} client:only="react" />
+  <main class="min-h-screen">
+    <!-- Hire Page Hero -->
+    <section class="py-24 relative overflow-hidden">
+      <div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-blue-900/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-blue-900/30"></div>
+
+      <Container className="relative z-10">
+        <div class="text-center mb-16">
+          <span class="inline-block px-4 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm font-medium mb-4">
+            专业合作
+          </span>
+          <h1 class="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-gray-900 via-purple-600 to-purple-800 dark:from-white dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent">
+            合作
+          </h1>
+          <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
+            构建优秀产品，从找到合适的技术合伙人开始
+          </p>
+        </div>
+      </Container>
+    </section>
+
+    <!-- Who I Work With -->
+    <section class="py-16 relative">
+      <Container>
+        <div class="max-w-4xl mx-auto">
+          <div class="flex items-center gap-4 mb-8">
+            <div class="w-12 h-12 bg-purple-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="grid md:grid-cols-2 gap-6">
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/20 p-6">
+              <h3 class="text-lg font-bold mb-3">
+                初创公司
+              </h3>
+              <p class="text-muted-foreground">
+                从零到一构建产品的早期创业团队，需要快速迭代和灵活响应的技术方案。
+              </p>
+            </div>
+
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/20 p-6">
+              <h3 class="text-lg font-bold mb-3">
+                独立创始人
+              </h3>
+              <p class="text-muted-foreground">
+                独自构建产品的创业者，需要技术合伙人来实现产品愿景。
+              </p>
+            </div>
+
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/20 p-6">
+              <h3 class="text-lg font-bold mb-3">
+                传统企业
+              </h3>
+              <p class="text-muted-foreground">
+                希望数字化转型的传统企业，需要现代化的技术解决方案。
+              </p>
+            </div>
+
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/20 p-6">
+              <h3 class="text-lg font-bold mb-3">
+                技术团队
+              </h3>
+              <p class="text-muted-foreground">
+                需要额外技术资源或特定技能集来推进项目的开发团队。
+              </p>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </section>
+
+    <!-- What I Build -->
+    <section class="py-16 relative bg-white/5 dark:bg-gray-900/50">
+      <Container>
+        <div class="max-w-4xl mx-auto">
+          <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>
+            </div>
+            <h2 class="text-3xl font-bold">
+              我能构建什么
+            </h2>
+          </div>
+
+          <div class="space-y-6">
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-blue-500/20 p-8">
+              <div class="flex items-start gap-4">
+                <div class="w-12 h-12 bg-gradient-to-br from-purple-600 to-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
+                  <span class="text-2xl">⚡</span>
+                </div>
+                <div>
+                  <h3 class="text-xl font-bold mb-2">AI 产品与应用</h3>
+                  <p class="text-muted-foreground">
+                    从 AI 助手到 Agent 系统，从 RAG 应用到 AI 驱动的 SaaS 产品。我可以帮助你将 AI 能力产品化。
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-blue-500/20 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>
+                </div>
+                <div>
+                  <h3 class="text-xl font-bold mb-2">Web 应用</h3>
+                  <p class="text-muted-foreground">
+                    现代 Web 应用、SaaS 平台、电商系统、内容管理系统等。使用 React、Next.js、Node.js 等技术栈。
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-blue-500/20 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>
+                </div>
+                <div>
+                  <h3 class="text-xl font-bold mb-2">全栈产品</h3>
+                  <p class="text-muted-foreground">
+                    从前端到后端，从数据库到部署，我提供完整的全栈开发能力，一个项目只需一个开发者。
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </section>
+
+    <!-- Engagement Models -->
+    <section class="py-16 relative">
+      <Container>
+        <div class="max-w-4xl mx-auto">
+          <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>
+            </div>
+            <h2 class="text-3xl font-bold">
+              合作模式
+            </h2>
+          </div>
+
+          <div class="grid md:grid-cols-3 gap-6">
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-green-500/20 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>
+              </div>
+              <h3 class="text-lg font-bold mb-2">
+                技术合伙人
+              </h3>
+              <p class="text-sm text-muted-foreground">
+                长期合作，股权合作，共同承担创业风险与回报
+              </p>
+            </div>
+
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-green-500/20 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>
+              </div>
+              <h3 class="text-lg font-bold mb-2">
+                项目制
+              </h3>
+              <p class="text-sm text-muted-foreground">
+                按项目交付，固定价格或按阶段付款，适合明确需求的项目
+              </p>
+            </div>
+
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-green-500/20 p-6 text-center">
+              <div class="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">
+                <span class="text-2xl">⏰</span>
+              </div>
+              <h3 class="text-lg font-bold mb-2">
+                咨询/顾问
+              </h3>
+              <p class="text-sm text-muted-foreground">
+                按小时咨询，帮助你做出技术决策，审查代码，指导团队
+              </p>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </section>
+
+    <!-- Delivery Style -->
+    <section class="py-16 relative bg-white/5 dark:bg-gray-900/50">
+      <Container>
+        <div class="max-w-4xl mx-auto">
+          <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>
+            </div>
+            <h2 class="text-3xl font-bold">
+              工作方式
+            </h2>
+          </div>
+
+          <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-yellow-500/20 p-8">
+            <ul class="space-y-4">
+              <li class="flex items-start gap-3">
+                <span class="text-green-500 text-xl">✓</span>
+                <div>
+                  <strong class="block mb-1">敏捷迭代</strong>
+                  <p class="text-muted-foreground text-sm">
+                    2周一个迭代，快速交付可用功能，持续获取反馈
+                  </p>
+                </div>
+              </li>
+              <li class="flex items-start gap-3">
+                <span class="text-green-500 text-xl">✓</span>
+                <div>
+                  <strong class="block mb-1">透明沟通</strong>
+                  <p class="text-muted-foreground text-sm">
+                    定期同步进度，及时报告问题，保持信息对称
+                  </p>
+                </div>
+              </li>
+              <li class="flex items-start gap-3">
+                <span class="text-green-500 text-xl">✓</span>
+                <div>
+                  <strong class="block mb-1">代码质量</strong>
+                  <p class="text-muted-foreground text-sm">
+                    完整的测试覆盖，清晰的文档注释，可维护的代码结构
+                  </p>
+                </div>
+              </li>
+              <li class="flex items-start gap-3">
+                <span class="text-green-500 text-xl">✓</span>
+                <div>
+                  <strong class="block mb-1">产品思维</strong>
+                  <p class="text-muted-foreground text-sm">
+                    不只是写代码，还思考产品价值，用户体验和业务目标
+                  </p>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </Container>
+    </section>
+
+    <!-- Availability -->
+    <section class="py-16 relative">
+      <Container>
+        <div class="max-w-4xl mx-auto">
+          <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>
+            </div>
+            <h2 class="text-3xl font-bold">
+              当前可用性
+            </h2>
+          </div>
+
+          <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-red-500/20 p-8">
+            <div class="flex items-center gap-4 mb-6">
+              <div class="w-4 h-4 bg-green-500 rounded-full animate-pulse"></div>
+              <span class="text-lg font-semibold">
+                目前可接受新项目
+              </span>
+            </div>
+            <p class="text-muted-foreground mb-6">
+              我目前可以接受 1-2 个新项目。偏好长期合作模式（技术合伙人或长期项目），但也会考虑短期项目。
+            </p>
+            <div class="flex flex-wrap gap-2">
+              <span class="px-3 py-1 bg-green-500/20 text-green-600 dark:text-green-400 rounded-full text-sm">
+                可立即开始
+              </span>
+              <span class="px-3 py-1 bg-blue-500/20 text-blue-600 dark:text-blue-400 rounded-full text-sm">
+                远程工作
+              </span>
+              <span class="px-3 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm">
+                中英双语
+              </span>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </section>
+
+    <!-- Contact CTA -->
+    <section class="py-16 relative bg-gradient-to-br from-purple-900/20 to-blue-900/20 dark:from-purple-900/30 dark:to-blue-900/30">
+      <Container>
+        <div class="max-w-4xl mx-auto text-center">
+          <h2 class="text-3xl font-bold mb-6">
+            准备好一起构建了吗？
+          </h2>
+          <p class="text-lg text-muted-foreground mb-8 max-w-xl mx-auto">
+            告诉我你的项目想法，让我们看看能否合作。
+          </p>
+          <div class="flex flex-col sm:flex-row gap-4 justify-center">
+            <a
+              href="mailto:zhaoguiyang18@gmail.com"
+              class="bg-purple-500 hover:bg-purple-600 text-white px-8 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
+            >
+              <span>📧</span>
+              发送邮件
+            </a>
+            <a
+              href="/zh/now"
+              class="border border-purple-500 text-purple-500 hover:bg-purple-500 hover:text-white px-8 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
+            >
+              <span>📡</span>
+              了解更多关于我
+            </a>
+          </div>
+        </div>
+      </Container>
+    </section>
+  </main>
+  <Footer lang={lang} client:only="react" />
+</Layout>

src/pages/zh/index.astro

@@ -4,7 +4,7 @@ import GlassHeader from "@/components/GlassHeader";
 import SkillsMarquee from "@/components/SkillsMarquee";
 import TypewriterEffect from "@/components/TypewriterEffect";
 import Footer from "@/components/Footer";
-import Container from "@/components/ui/Container";
+import Container from "@/components/ui/Container.astro";
 import { useTranslations } from "@/i18n/utils";
 import type { Lang } from "@/types/i18n";
 import { defaultLang } from "@/i18n/ui";
@@ -24,7 +24,7 @@ const pageTitle = t('site.title');
       <!-- Background gradient -->
       <div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-purple-700/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-purple-700/30"></div>
       
-      <Container client:load className="relative z-10">
+      <Container className="relative z-10">
         <div class="text-center mb-16">
           <!-- Greeting -->
           <div class="flex items-center justify-center mb-6">
@@ -79,23 +79,23 @@ const pageTitle = t('site.title');
           <!-- Action buttons -->
           <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16">
             <a
-              href="#about"
+              href="/zh/hire"
               class="bg-purple-500 hover:bg-purple-600 text-white px-8 py-3 rounded-lg font-semibold transition-colors flex items-center gap-2"
             >
               <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
               </svg>
-              {t('hero.viewProjects')}
+              {t('hero.ctaPrimary')}
             </a>
-            
+
             <a
-              href={`mailto:${personalInfo.email}`}
+              href="/zh/projects"
               class="border border-purple-500 text-purple-500 hover:bg-purple-500 hover:text-white px-8 py-3 rounded-lg font-semibold transition-colors flex items-center gap-2"
             >
               <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
               </svg>
-              {t('hero.contactMe')}
+              {t('hero.ctaSecondary')}
             </a>
           </div>
 
@@ -199,10 +199,79 @@ const pageTitle = t('site.title');
     </section>
 
     <SkillsMarquee lang={lang} client:only="react" />
-    
+
+    <!-- Featured Project: Elynd -->
+    <section class="py-24 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-blue-900/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-blue-900/30">
+      <Container>
+        <div class="text-center mb-12">
+          <span class="inline-block px-4 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm font-medium mb-4">
+            Featured 项目
+          </span>
+          <h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-purple-400 via-blue-400 to-purple-400 bg-clip-text text-transparent">
+            Elynd
+          </h2>
+          <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
+            一个开放的 AI 工作空间，让构建者能够更智能地工作
+          </p>
+        </div>
+
+        <div class="max-w-4xl mx-auto">
+          <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/20 overflow-hidden">
+            <div class="h-64 md:h-80 bg-gradient-to-br from-purple-600/20 via-blue-600/20 to-purple-600/20 flex items-center justify-center relative overflow-hidden">
+              <div class="absolute inset-0 bg-grid-purple-500/10 [mask-image:linear-gradient(0deg,white,rgba(255,255,255,0.3))]"></div>
+              <div class="text-center z-10">
+                <div class="text-6xl md:text-8xl mb-4">⚡</div>
+                <div class="text-2xl md:text-3xl font-bold text-purple-400">
+                  让 AI 成为你的共同构建者
+                </div>
+              </div>
+            </div>
+            <div class="p-8">
+              <div class="grid md:grid-cols-3 gap-6 mb-8">
+                <div class="text-center">
+                  <div class="text-3xl font-bold text-purple-400 mb-2">AI-First</div>
+                  <div class="text-sm text-muted-foreground">
+                    从第一天就融入 AI 思维
+                  </div>
+                </div>
+                <div class="text-center">
+                  <div class="text-3xl font-bold text-blue-400 mb-2">Open</div>
+                  <div class="text-sm text-muted-foreground">
+                    完全开放，可自托管
+                  </div>
+                </div>
+                <div class="text-center">
+                  <div class="text-3xl font-bold text-green-400 mb-2">Builder-First</div>
+                  <div class="text-sm text-muted-foreground">
+                    为构建者打造的工作空间
+                  </div>
+                </div>
+              </div>
+              <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                <a
+                  href="/zh/projects"
+                  class="bg-purple-500 hover:bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
+                >
+                  <span>🚀</span>
+                  {t('hero.ctaSecondary')}
+                </a>
+                <a
+                  href="/zh/now"
+                  class="border border-purple-500 text-purple-500 hover:bg-purple-500 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>
+        </div>
+      </Container>
+    </section>
+
     <!-- Services Section - Inlined Content -->
     <section id="services" class="py-20 px-4 bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800">
-      <Container client:load>
+      <Container>
         <h2 class="text-4xl font-bold text-center mb-16 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
           {t('services.title')}
         </h2>
@@ -246,7 +315,7 @@ const pageTitle = t('site.title');
       <!-- Background gradient -->
       <div class="absolute inset-0 bg-gradient-to-br from-blue-900/10 via-purple-800/5 to-indigo-700/10 dark:from-blue-900/20 dark:via-purple-800/10 dark:to-indigo-700/20"></div>
       
-      <Container client:load className="relative z-10">
+      <Container className="relative z-10">
         <div class="text-center mb-16">
           <!-- Section Title -->
           <div class="flex items-center justify-center mb-6">
@@ -389,7 +458,7 @@ const pageTitle = t('site.title');
     <!-- <section id="projects" class="py-20 relative">
       <div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent"></div>
       
-      <Container client:load className="relative z-10">
+      <Container className="relative z-10">
         <div class="text-center mb-16">
           <h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent">
             我的项目

src/pages/zh/now.astro

@@ -0,0 +1,191 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import GlassHeader from "@/components/GlassHeader";
+import Footer from "@/components/Footer";
+import Container from "@/components/ui/Container.astro";
+import { useTranslations } from "@/i18n/utils";
+import type { Lang } from "@/types/i18n";
+import { defaultLang } from "@/i18n/ui";
+
+const lang = Astro.currentLocale as Lang || defaultLang;
+const t = useTranslations(lang);
+const pageTitle = lang === 'zh' ? '现在' : 'Now';
+---
+
+<Layout title={pageTitle}>
+  <GlassHeader lang={lang} client:only="react" />
+  <main class="min-h-screen">
+    <!-- Now Page Hero -->
+    <section class="py-24 relative overflow-hidden">
+      <div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-blue-900/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-blue-900/30"></div>
+
+      <Container className="relative z-10">
+        <div class="text-center mb-16">
+          <span class="inline-block px-4 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm font-medium mb-4">
+            关于我现在正在做什么
+          </span>
+          <h1 class="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-gray-900 via-purple-600 to-purple-800 dark:from-white dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent">
+            现在
+          </h1>
+          <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
+            持续更新我的现状、正在构建的内容以及合作机会
+          </p>
+        </div>
+      </Container>
+    </section>
+
+    <!-- Building Section -->
+    <section class="py-16 relative">
+      <Container>
+        <div class="max-w-4xl mx-auto">
+          <div class="flex items-center gap-4 mb-8">
+            <div class="w-12 h-12 bg-purple-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="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/20 p-8">
+            <div class="flex items-start gap-6">
+              <div class="w-16 h-16 bg-gradient-to-br from-purple-600 to-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
+                <span class="text-3xl">⚡</span>
+              </div>
+              <div class="flex-1">
+                <h3 class="text-xl font-bold mb-2">Elynd</h3>
+                <p class="text-muted-foreground mb-4">
+                  一个开放的 AI 工作空间，让构建者能够更智能地工作。从 AI 第一性原理出发，打造完全开放、可自托管的协作工具。
+                </p>
+                <div class="flex flex-wrap gap-2">
+                  <span class="px-3 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm">AI 产品</span>
+                  <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-3 py-1 bg-green-500/20 text-green-600 dark:text-green-400 rounded-full text-sm">开源</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </section>
+
+    <!-- Exploring Section -->
+    <section class="py-16 relative bg-white/5 dark:bg-gray-900/50">
+      <Container>
+        <div class="max-w-4xl mx-auto">
+          <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>
+            </div>
+            <h2 class="text-3xl font-bold">
+              正在探索
+            </h2>
+          </div>
+
+          <div class="grid gap-6">
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-blue-500/20 p-6">
+              <h3 class="text-lg font-bold mb-3">
+                AI Agents 与工作流自动化
+              </h3>
+              <p class="text-muted-foreground">
+                研究如何构建能够自主完成复杂任务的 AI Agent，以及如何将 AI 能力融入日常工作流。
+              </p>
+            </div>
+
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-blue-500/20 p-6">
+              <h3 class="text-lg font-bold mb-3">
+                产品导向的开发实践
+              </h3>
+              <p class="text-muted-foreground">
+                探索从产品角度思考开发，构建真正解决用户问题的产品，而不仅仅是技术实现。
+              </p>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </section>
+
+    <!-- Shipping Section -->
+    <section class="py-16 relative">
+      <Container>
+        <div class="max-w-4xl mx-auto">
+          <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>
+            </div>
+            <h2 class="text-3xl font-bold">
+              最近发布
+            </h2>
+          </div>
+
+          <div class="space-y-4">
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl border border-green-500/20 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>
+              </div>
+              <div>
+                <h3 class="font-bold mb-1">
+                  个人网站全新改版
+                </h3>
+                <p class="text-sm text-muted-foreground">
+                  全新设计的个人网站，突出 AI 产品构建者的定位
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </section>
+
+    <!-- Open to Collaborate Section -->
+    <section class="py-16 relative bg-gradient-to-br from-purple-900/10 to-blue-900/10 dark:from-purple-900/20 dark:to-blue-900/20">
+      <Container>
+        <div class="max-w-4xl mx-auto 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="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-yellow-500/20 p-8">
+            <p class="text-lg text-muted-foreground mb-8">
+              我始终对新的合作机会持开放态度。无论你是想要构建产品、寻找技术合伙人，还是需要技术咨询，都可以联系我。
+            </p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+              <a
+                href="/zh/hire"
+                class="bg-purple-500 hover:bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
+              >
+                <span>💼</span>
+                查看合作方式
+              </a>
+              <a
+                href="mailto:zhaoguiyang18@gmail.com"
+                class="border border-purple-500 text-purple-500 hover:bg-purple-500 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 -->
+    <section class="py-12">
+      <Container>
+        <div class="max-w-4xl mx-auto text-center">
+          <p class="text-sm text-muted-foreground">
+            最后更新：
+            <span class="font-medium">2025年3月</span>
+          </p>
+        </div>
+      </Container>
+    </section>
+  </main>
+  <Footer lang={lang} client:only="react" />
+</Layout>

src/pages/zh/projects.astro

@@ -2,7 +2,7 @@
 import Layout from "@/layouts/Layout.astro";
 import GlassHeader from "@/components/GlassHeader";
 import Footer from "@/components/Footer";
-import Container from "@/components/ui/Container";
+import Container from "@/components/ui/Container.astro";
 import { useTranslations } from "@/i18n/utils";
 import type { Lang } from "@/types/i18n";
 import { defaultLang } from "@/i18n/ui";
@@ -15,6 +15,15 @@ const pageTitle = t('projects.title');
 
 // 根据当前语言获取项目数据
 const currentProjects = projects[lang as keyof typeof projects] || projects.en;
+
+// Separate featured and grouped projects
+const featuredProject = currentProjects.find(p => p.featured);
+const otherProjects = currentProjects.filter(p => !p.featured);
+
+// Group by type
+const productProjects = otherProjects.filter(p => p.type === 'product');
+const clientProjects = otherProjects.filter(p => p.type === 'client');
+const experimentProjects = otherProjects.filter(p => p.type === 'experiment');
 ---
 
 <Layout title={pageTitle}>
@@ -24,8 +33,8 @@ const currentProjects = projects[lang as keyof typeof projects] || projects.en;
     <section class="py-24 relative overflow-hidden">
       <!-- Background gradient -->
       <div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-purple-700/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-purple-700/30"></div>
-      
+
-      <Container client:load className="relative z-10">
+      <Container className="relative z-10">
         <div class="text-center mb-16">
           <!-- Main title -->
           <h1 class="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-gray-900 via-purple-600 to-purple-800 dark:from-white dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent">
@@ -40,69 +49,274 @@ const currentProjects = projects[lang as keyof typeof projects] || projects.en;
       </Container>
     </section>
 
-    <!-- Projects Grid Section -->
+    <!-- Featured Project Section -->
-    <section class="py-12 relative">
+    {featuredProject && (
-      <!-- Background gradient -->
+      <section class="py-12 bg-gradient-to-br from-purple-900/10 to-blue-900/10 dark:from-purple-900/20 dark:to-blue-900/20">
-      <div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent"></div>
+        <Container>
-      
+          <div class="max-w-5xl mx-auto">
-      <Container client:load className="relative z-10">
+            <div class="flex items-center gap-4 mb-8">
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-stretch">
+              <span class="inline-block px-4 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm font-medium">
-          {currentProjects.map((project) => (
+                Featured 项目
-            <div class={`group overflow-hidden border border-${project.color}-500/20 hover:border-${project.color}-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative`}>              
+              </span>
-              <!-- Project tag - positioned at top right -->
+            </div>
-              <div class="absolute top-4 right-4 z-10">
+
-                <span class={`px-3 py-1 bg-${project.color}-100 dark:bg-${project.color}-800 text-${project.color}-800 dark:text-${project.color}-200 text-xs rounded-full font-medium border border-${project.color}-200 dark:border-${project.color}-700`}>{t(`project.tag.${project.tag}`)}</span>
+            <div class="bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-purple-500/30 overflow-hidden">
-              </div>
+              <div class="grid lg:grid-cols-2">
-              
+                <div class="h-64 lg:h-auto bg-gradient-to-br from-purple-600/20 via-blue-600/20 to-purple-600/20 flex items-center justify-center relative overflow-hidden">
-              <!-- Project image placeholder -->
+                  <div class="text-8xl">{featuredProject.icon}</div>
-              <div class={`h-48 bg-gradient-to-br ${project.image.bg} relative overflow-hidden`}>
+                </div>
-                <div class={`absolute inset-0 bg-gradient-to-br ${project.image.bg} group-hover:${project.image.hover} transition-all duration-500`}></div>
+                <div class="p-8">
-                <div class="absolute bottom-4 left-4 right-4">
+                  <div class="flex items-center gap-3 mb-4">
-                  <div class={`bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono ${project.image.text}`}>
+                    <span class="px-3 py-1 bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full text-sm">
-                    {project.title}
+                      {t(`project.status.${featuredProject.status}`)}
+                    </span>
+                    <span class="px-3 py-1 bg-blue-500/20 text-blue-600 dark:text-blue-400 rounded-full text-sm">
+                      {t(`project.type.${featuredProject.type}`)}
+                    </span>
+                  </div>
+
+                  <h2 class="text-3xl font-bold mb-4">{featuredProject.title}</h2>
+
+                  <div class="space-y-4 mb-6">
+                    <div>
+                      <span class="text-sm text-muted-foreground">{t('project.role')}:</span>
+                      <p class="font-medium">{featuredProject.role}</p>
+                    </div>
+                    <div>
+                      <span class="text-sm text-muted-foreground">{t('project.impact')}:</span>
+                      <p class="font-medium">{featuredProject.impact}</p>
+                    </div>
+                  </div>
+
+                  <div class="space-y-2 mb-6">
+                    {featuredProject.description.map((desc) => (
+                      <p class="text-muted-foreground text-sm">{desc}</p>
+                    ))}
+                  </div>
+
+                  <div class="flex flex-wrap gap-2 mb-6">
+                    {featuredProject.tech.map((tech) => (
+                      <span class="px-3 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-sm rounded-md border border-gray-500/20 dark:border-gray-400/30">{tech}</span>
+                    ))}
+                  </div>
+
+                  <div class="flex gap-4">
+                    <a href={featuredProject.link} class="bg-purple-500 hover:bg-purple-600 text-white px-6 py-2 rounded-lg font-medium transition-colors inline-flex items-center gap-2">
+                      {t('project.visit')}
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
+                      </svg>
+                    </a>
+                    {featuredProject.links?.github && (
+                      <a href={featuredProject.links.github} target="_blank" rel="noopener noreferrer" class="border border-gray-500 text-gray-600 dark:text-gray-300 hover:bg-gray-500/10 px-6 py-2 rounded-lg font-medium transition-colors inline-flex items-center gap-2">
+                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                          <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                        </svg>
+                        GitHub
+                      </a>
+                    )}
                   </div>
                 </div>
               </div>
-              
-              <div class="p-6 pb-4">
-                <h3 class={`text-xl group-hover:text-${project.color}-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4`}>
-                  <span class={`text-${project.color}-500`}>{project.icon}</span>
-                  {project.title}
-                </h3>
-              </div>
-              
-              <div class="px-6 flex-grow">
-                <div class="space-y-3">
-                  {project.description.map((desc) => (
-                    <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
-                      <span class={`text-${project.color}-500 mt-1`}>•</span>
-                      <span>{desc}</span>
-                    </div>
-                  ))}
-                </div>
-                
-                <!-- Tech stack indicators with unified gray styling -->
-                <div class="mt-6 mb-4 flex flex-wrap gap-2">
-                  {project.tech.map((tech) => (
-                    <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">{tech}</span>
-                  ))}
-                </div>
-              </div>
-              
-              <!-- Visit project link -->
-              <div class="p-6 pt-2">
-                <a href={project.link} class={`inline-flex items-center text-sm font-medium text-${project.color}-500 hover:text-${project.color}-600 dark:hover:text-${project.color}-400 transition-colors duration-300`}>
-                  {t('project.visit')} 
-                  <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
-                  </svg>
-                </a>
-              </div>
             </div>
-          ))}
+          </div>
-        </div>
+        </Container>
-      </div>
+      </section>
+    )}
+
+    <!-- Projects by Type -->
+    <section class="py-12 relative">
+      <Container>
+        <!-- Product Projects -->
+        {productProjects.length > 0 && (
+          <>
+            <div class="flex items-center gap-4 mb-8">
+              <div class="w-10 h-10 bg-purple-500/20 rounded-lg flex items-center justify-center">
+                <span class="text-xl">🛍️</span>
+              </div>
+              <h2 class="text-2xl font-bold">{t('project.type.product')}</h2>
+            </div>
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
+              {productProjects.map((project) => (
+                <div class={`group overflow-hidden border border-${project.color}-500/20 hover:border-${project.color}-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative`}>
+                  <div class="absolute top-4 right-4 z-10 flex gap-2">
+                    <span class={`px-3 py-1 bg-${project.color}-100 dark:bg-${project.color}-800 text-${project.color}-800 dark:text-${project.color}-200 text-xs rounded-full font-medium border border-${project.color}-200 dark:border-${project.color}-700`}>{t(`project.status.${project.status}`)}</span>
+                  </div>
+
+                  <div class={`h-48 bg-gradient-to-br ${project.image.bg} relative overflow-hidden`}>
+                    <div class={`absolute inset-0 bg-gradient-to-br ${project.image.bg} group-hover:${project.image.hover} transition-all duration-500`}></div>
+                    <div class="absolute bottom-4 left-4 right-4">
+                      <div class={`bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono ${project.image.text}`}>
+                        {project.title}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="p-6 pb-4">
+                    <h3 class={`text-xl group-hover:text-${project.color}-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4`}>
+                      <span class={`text-${project.color}-500`}>{project.icon}</span>
+                      {project.title}
+                    </h3>
+                  </div>
+
+                  <div class="px-6 flex-grow">
+                    <div class="space-y-3">
+                      {project.description.slice(0, 2).map((desc) => (
+                        <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                          <span class={`text-${project.color}-500 mt-1`}>•</span>
+                          <span>{desc}</span>
+                        </div>
+                      ))}
+                    </div>
+
+                    <div class="mt-6 mb-4 flex flex-wrap gap-2">
+                      {project.tech.slice(0, 4).map((tech) => (
+                        <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">{tech}</span>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div class="p-6 pt-2">
+                    <a href={project.link} class={`inline-flex items-center text-sm font-medium text-${project.color}-500 hover:text-${project.color}-600 dark:hover:text-${project.color}-400 transition-colors duration-300`}>
+                      {t('project.visit')}
+                      <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
+                      </svg>
+                    </a>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+
+        <!-- Client Projects -->
+        {clientProjects.length > 0 && (
+          <>
+            <div class="flex items-center gap-4 mb-8">
+              <div class="w-10 h-10 bg-blue-500/20 rounded-lg flex items-center justify-center">
+                <span class="text-xl">💼</span>
+              </div>
+              <h2 class="text-2xl font-bold">{t('project.type.client')}</h2>
+            </div>
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
+              {clientProjects.map((project) => (
+                <div class={`group overflow-hidden border border-${project.color}-500/20 hover:border-${project.color}-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative`}>
+                  <div class="absolute top-4 right-4 z-10 flex gap-2">
+                    <span class={`px-3 py-1 bg-${project.color}-100 dark:bg-${project.color}-800 text-${project.color}-800 dark:text-${project.color}-200 text-xs rounded-full font-medium border border-${project.color}-200 dark:border-${project.color}-700`}>{t(`project.status.${project.status}`)}</span>
+                  </div>
+
+                  <div class={`h-48 bg-gradient-to-br ${project.image.bg} relative overflow-hidden`}>
+                    <div class={`absolute inset-0 bg-gradient-to-br ${project.image.bg} group-hover:${project.image.hover} transition-all duration-500`}></div>
+                    <div class="absolute bottom-4 left-4 right-4">
+                      <div class={`bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono ${project.image.text}`}>
+                        {project.title}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="p-6 pb-4">
+                    <h3 class={`text-xl group-hover:text-${project.color}-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4`}>
+                      <span class={`text-${project.color}-500`}>{project.icon}</span>
+                      {project.title}
+                    </h3>
+                  </div>
+
+                  <div class="px-6 flex-grow">
+                    <div class="space-y-3">
+                      {project.description.slice(0, 2).map((desc) => (
+                        <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                          <span class={`text-${project.color}-500 mt-1`}>•</span>
+                          <span>{desc}</span>
+                        </div>
+                      ))}
+                    </div>
+
+                    <div class="mt-6 mb-4 flex flex-wrap gap-2">
+                      {project.tech.slice(0, 4).map((tech) => (
+                        <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">{tech}</span>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div class="p-6 pt-2">
+                    <a href={project.link} class={`inline-flex items-center text-sm font-medium text-${project.color}-500 hover:text-${project.color}-600 dark:hover:text-${project.color}-400 transition-colors duration-300`}>
+                      {t('project.visit')}
+                      <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
+                      </svg>
+                    </a>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+
+        <!-- Experiment Projects -->
+        {experimentProjects.length > 0 && (
+          <>
+            <div class="flex items-center gap-4 mb-8">
+              <div class="w-10 h-10 bg-green-500/20 rounded-lg flex items-center justify-center">
+                <span class="text-xl">🧪</span>
+              </div>
+              <h2 class="text-2xl font-bold">{t('project.type.experiment')}</h2>
+            </div>
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+              {experimentProjects.map((project) => (
+                <div class={`group overflow-hidden border border-${project.color}-500/20 hover:border-${project.color}-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative`}>
+                  <div class="absolute top-4 right-4 z-10 flex gap-2">
+                    <span class={`px-3 py-1 bg-${project.color}-100 dark:bg-${project.color}-800 text-${project.color}-800 dark:text-${project.color}-200 text-xs rounded-full font-medium border border-${project.color}-200 dark:border-${project.color}-700`}>{t(`project.status.${project.status}`)}</span>
+                  </div>
+
+                  <div class={`h-48 bg-gradient-to-br ${project.image.bg} relative overflow-hidden`}>
+                    <div class={`absolute inset-0 bg-gradient-to-br ${project.image.bg} group-hover:${project.image.hover} transition-all duration-500`}></div>
+                    <div class="absolute bottom-4 left-4 right-4">
+                      <div class={`bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono ${project.image.text}`}>
+                        {project.title}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="p-6 pb-4">
+                    <h3 class={`text-xl group-hover:text-${project.color}-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4`}>
+                      <span class={`text-${project.color}-500`}>{project.icon}</span>
+                      {project.title}
+                    </h3>
+                  </div>
+
+                  <div class="px-6 flex-grow">
+                    <div class="space-y-3">
+                      {project.description.slice(0, 2).map((desc) => (
+                        <div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
+                          <span class={`text-${project.color}-500 mt-1`}>•</span>
+                          <span>{desc}</span>
+                        </div>
+                      ))}
+                    </div>
+
+                    <div class="mt-6 mb-4 flex flex-wrap gap-2">
+                      {project.tech.slice(0, 4).map((tech) => (
+                        <span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">{tech}</span>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div class="p-6 pt-2">
+                    <a href={project.link} class={`inline-flex items-center text-sm font-medium text-${project.color}-500 hover:text-${project.color}-600 dark:hover:text-${project.color}-400 transition-colors duration-300`}>
+                      {t('project.visit')}
+                      <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
+                      </svg>
+                    </a>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+      </Container>
     </section>
   </main>
   <Footer lang={lang} client:load />
-</Layout>
+</Layout>

src/pages/zh/services.mdx

@@ -1,108 +1,42 @@
 ---
-title: "我的服务"
+title: "我能做什么"
-description: "探索我提供的专业服务，帮助您实现数字项目"
+description: "专注于构建 AI 产品和技术卓越的专业服务"
 layout: "../../layouts/AboutLayout.astro"
 ---
 
 import HighlightBox from '../../components/markdown/HighlightBox.astro';
 
-# 提供服务 🛠️
+# 我能做什么 🚀
 
-<HighlightBox type="tip" title="服务理念">
+<HighlightBox type="tip">
-用优雅的代码和创新的思维，为复杂问题打造精致的解决方案。
+构建 AI 驱动产品，将雄心勃勃的想法变为现实。
 </HighlightBox>
 
-## 网站开发 🌐
+## AI 产品开发 🤖
 
-- 使用最新技术构建响应式现代网站
+- 从概念到上线构建 AI 驱动产品
-- 创建根据您特定需求定制的网络应用程序
+- RAG 应用、AI Agent 和智能自动化
-- 使用 React、Vue.js 或 Angular 实现前端界面
+- 使用现代技术栈的全栈开发（React、Next.js、Node.js）
-- 使用 Node.js、Express、Django 或 Flask 开发后端系统
+- 产品思维 - 专注于解决实际问题
-- 优化网站性能和用户体验
+- 快速原型和迭代开发
 
-## APP 开发 📱
+## 技术咨询 📊
 
-- 使用 React Native 或 Flutter 开发跨平台移动应用
+<HighlightBox type="info" title="我可以如何帮助">
-- 创建原生 iOS 和 Android 应用
-- 构建渐进式网络应用（PWAs），提供类似移动应用的网页体验
-- 实现离线功能和推送通知
-- 集成设备功能，如摄像头、GPS 和传感器
 
-## 微信小程序开发 💬
+- 技术架构和技术栈决策
-
+- 代码审查和最佳实践实施
-- 为企业设计和开发微信小程序
+- 团队指导和知识转移
-- 创建交互性强且引人入胜的用户界面
+- 性能优化和扩展策略
-- 实现微信支付和其他微信 API
+- 投资技术尽职调查
-- 针对微信生态系统和要求进行优化
-- 构建特定于您业务需求的自定义功能
-
-## UI设计 🎨
-
-- 创建现代、简洁、直观的用户界面
-- 设计适用于所有设备的响应式布局
-- 开发品牌标识和视觉语言
-- 创建线框图、原型和高保真模型
-- 实现设计系统，确保一致的用户体验
-
-## BUg 修复 🐛
-
-<HighlightBox type="error" title="Bug修复与代码优化">
-
-- 识别和解决现有应用程序中的问题
-- 调试前端和后端系统中的复杂问题
-- 优化代码以提高性能和可靠性
-- 将旧代码重构为现代标准
-- 实施自动化测试以防止未来出现错误
 
 </HighlightBox>
 
-## 注意事项 📝
+# 一起构建 💼
 
-<HighlightBox type="warning" title="合作前须知">
+<HighlightBox type="success" title="联系我">
-为了减少不必要的麻烦，请在沟通之前仔细阅读以下注意事项：
+我始终对讨论新项目和机会持开放态度。无论你是正在寻找技术合伙人、需要帮助构建 AI 产品，还是想要技术咨询 - 让我们聊聊。
 
-1. 请提供详细的需求说明，有原型图或设计稿更佳（如果你不了解这些也没关系，我这边可以帮你整理）。
-2. 请提供项目完成时间，开发周期。
-3. 一般情况下只接商单，其他形式的合作需要另行协商。
-4. 暂时无法提供开票服务。
-5. 项目完成后可免费维护3个月。
-</HighlightBox>
-
-## 合作步骤 🤝
-
-<HighlightBox type="info" title="合作流程">
-
-1. 确定合作项目
-2. 确定合作方式
-3. 确定项目功能需求
-4. 确定开发周期以及交付时间
-5. 确定项目设计图或原型图
-6. 支付费用
-7. 项目开发
-8. 项目测试
-9. 项目上线
-10. 项目维护
-
-</HighlightBox>
-
-## 付款方式 💰
-
-<HighlightBox type="success" title="支付方式">
-
-- 微信支付
-- 支付宝支付
-- 银行转账
-
-**注：所有项目费用均为442付款制**
-
-</HighlightBox>
-
-## 联系方式 📞
-
-<HighlightBox type="info" title="联系我">
-
-- QQ: **2770723534**
-- 微信：**JoyCodeing**
 - 邮箱：**zhaoguiyang18@gmail.com**
-
+- 查看我的[合作](/zh/hire)页面了解合作方式
-</HighlightBox>
+</HighlightBox>

src/styles/global.css

@@ -172,6 +172,7 @@
   }
   body {
     @apply bg-background text-foreground;
+    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     font-feature-settings: "ss01", "ss02", "cv01", "cv02";
   }
   h1, h2, h3, h4, h5, h6 {