feat(contact): add multilingual contact pages and dynamic configurations
- Created `src/pages/contact.astro` and `src/pages/zh/contact.astro` to support multilingual contact functionality. - Introduced `contactIntents` and `contactMethods` dynamic configurations in `src/lib/data/contact.ts` for streamlined content management. - Designed responsive and localized layouts with enhanced UX for both languages.
This commit is contained in:
zguiyang
@@ -1,375 +1,3 @@
|
||||
---
|
||||
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 { Users, Wrench, Lightbulb, Handshake, CircleDollarSign, Clock, Target, Check, Calendar, Mail, Radio, Zap, Globe, Smartphone, ShoppingCart, Layout as LayoutIcon, ClipboardList } from "lucide-react";
|
||||
import type { Lang } from "@/types/i18n";
|
||||
import { defaultLang } from "@/i18n/ui";
|
||||
|
||||
const lang = Astro.currentLocale as Lang || defaultLang;
|
||||
const t = useTranslations(lang);
|
||||
const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
|
||||
return Astro.redirect('/contact', 301);
|
||||
---
|
||||
|
||||
<Layout title={pageTitle}>
|
||||
<GlassHeader lang={lang} client:load transition:persist="header" />
|
||||
<main class="min-h-screen">
|
||||
<!-- Hire Page Hero -->
|
||||
<section class="py-24 relative overflow-hidden">
|
||||
<div class="page-hero-overlay"></div>
|
||||
|
||||
<Container className="relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<span class="inline-block px-4 py-1 bg-primary/20 text-primary dark:text-primary rounded-full text-sm font-medium mb-4">
|
||||
{lang === 'zh' ? '专业合作' : 'Professional Collaboration'}
|
||||
</span>
|
||||
<h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
|
||||
{lang === 'zh' ? '合作' : 'Hire Me'}
|
||||
</h1>
|
||||
<p class="text-lg text-muted-foreground page-content-narrow">
|
||||
{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="page-content-main">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center">
|
||||
<Users className="w-6 h-6 text-primary" />
|
||||
</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="page-surface 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="page-surface 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="page-surface 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="page-surface 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 page-section-soft">
|
||||
<Container>
|
||||
<div class="page-content-main">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
|
||||
<Wrench className="w-6 h-6 text-blue-500" />
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold">
|
||||
{lang === 'zh' ? '我能构建什么' : 'What I Build'}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="page-surface p-8">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-primary to-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<Zap className="w-6 h-6 text-white" />
|
||||
</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="page-surface p-8">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-green-600 to-teal-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<Globe className="w-6 h-6 text-white" />
|
||||
</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="page-surface p-8">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-orange-600 to-red-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<Smartphone className="w-6 h-6 text-white" />
|
||||
</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="page-content-main">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
|
||||
<ClipboardList className="w-6 h-6 text-green-500" />
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold">
|
||||
{lang === 'zh' ? '合作模式' : 'Engagement Models'}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="page-surface p-6 text-center">
|
||||
<div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||
<Handshake className="w-6 h-6 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2">
|
||||
{lang === 'zh' ? '技术合伙人' : 'Technical Co-founder'}
|
||||
</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{lang === 'zh'
|
||||
? '长期合作，股权合作，共同承担创业风险与回报'
|
||||
: 'Long-term partnership, equity-based, sharing startup risks and rewards'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="page-surface p-6 text-center">
|
||||
<div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||
<CircleDollarSign className="w-6 h-6 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2">
|
||||
{lang === 'zh' ? '项目制' : 'Project-based'}
|
||||
</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="page-surface p-6 text-center">
|
||||
<div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center mx-auto mb-4">
|
||||
<Clock className="w-6 h-6 text-primary" />
|
||||
</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 page-section-soft">
|
||||
<Container>
|
||||
<div class="page-content-main">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-12 h-12 bg-yellow-500/20 rounded-xl flex items-center justify-center">
|
||||
<Target className="w-6 h-6 text-yellow-600 dark:text-yellow-400" />
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold">
|
||||
{lang === 'zh' ? '工作方式' : 'Delivery Style'}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="page-surface p-8">
|
||||
<ul class="space-y-4">
|
||||
<li class="flex items-start gap-3">
|
||||
<Check className="w-6 h-6 text-green-500 shrink-0 mt-0.5" />
|
||||
<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">
|
||||
<Check className="w-6 h-6 text-green-500 shrink-0 mt-0.5" />
|
||||
<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">
|
||||
<Check className="w-6 h-6 text-green-500 shrink-0 mt-0.5" />
|
||||
<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">
|
||||
<Check className="w-6 h-6 text-green-500 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<strong class="block mb-1">
|
||||
{lang === 'zh' ? '产品思维' : 'Product Thinking'}
|
||||
</strong>
|
||||
<p class="text-muted-foreground text-sm">
|
||||
{lang === 'zh'
|
||||
? '不只是写代码，还思考产品价值，用户体验 and 业务目标'
|
||||
: 'Not just writing code, but also thinking about product value, user experience, and business goals'}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Availability -->
|
||||
<section class="py-16 relative">
|
||||
<Container>
|
||||
<div class="page-content-main">
|
||||
<div class="flex items-center gap-4 mb-8">
|
||||
<div class="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center">
|
||||
<Calendar className="w-6 h-6 text-red-500" />
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold">
|
||||
{lang === 'zh' ? '当前可用性' : 'Availability'}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="page-surface 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-primary/20 text-primary dark:text-primary rounded-full text-sm">
|
||||
{lang === 'zh' ? '中英双语' : 'Bilingual EN/ZH'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<!-- Contact CTA -->
|
||||
<section class="py-16 relative page-section-soft">
|
||||
<Container>
|
||||
<div class="page-content-main 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 page-content-narrow">
|
||||
{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-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
|
||||
>
|
||||
<Mail className="w-5 h-5" />
|
||||
{lang === 'zh' ? '发送邮件' : 'Send Email'}
|
||||
</a>
|
||||
<a
|
||||
href={lang === 'zh' ? '/zh/now' : '/now'}
|
||||
class="border border-primary text-primary hover:bg-primary hover:text-white px-8 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
|
||||
>
|
||||
<Radio className="w-5 h-5" />
|
||||
{lang === 'zh' ? '了解更多关于我' : 'Learn More About Me'}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
</main>
|
||||
<Footer lang={lang} client:only="react" />
|
||||
</Layout>
|
||||
|
||||
Reference in New Issue
Block a user