249 lines
10 KiB
TypeScript
249 lines
10 KiB
TypeScript
"use client"
|
||
|
||
import Image from "next/image"
|
||
import { Card, CardContent } from "@/components/ui/card"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Camera, Award, MapPin, Calendar, Heart, Lightbulb, Target, Users } from "lucide-react"
|
||
|
||
interface AboutViewProps {
|
||
onContactClick?: () => void
|
||
}
|
||
|
||
export function AboutView({ onContactClick }: AboutViewProps) {
|
||
const achievements = [
|
||
{
|
||
year: "2024",
|
||
title: "国际摄影大赛金奖",
|
||
description: "风光摄影类别获得金奖",
|
||
icon: Award,
|
||
},
|
||
{
|
||
year: "2023",
|
||
title: "个人摄影展",
|
||
description: "在北京798艺术区举办个人摄影展",
|
||
icon: Camera,
|
||
},
|
||
{
|
||
year: "2022",
|
||
title: "摄影师认证",
|
||
description: "获得国际摄影师协会认证",
|
||
icon: Badge,
|
||
},
|
||
{
|
||
year: "2021",
|
||
title: "开始职业摄影",
|
||
description: "正式成为职业摄影师",
|
||
icon: Calendar,
|
||
},
|
||
]
|
||
|
||
const skills = [
|
||
{ name: "风光摄影", level: 95 },
|
||
{ name: "人像摄影", level: 90 },
|
||
{ name: "街头摄影", level: 85 },
|
||
{ name: "建筑摄影", level: 88 },
|
||
{ name: "后期处理", level: 92 },
|
||
{ name: "商业摄影", level: 80 },
|
||
]
|
||
|
||
const equipment = [
|
||
{
|
||
category: "相机机身",
|
||
items: ["Canon EOS R5", "Sony A7R IV", "Nikon D850", "Fujifilm X-T4"],
|
||
},
|
||
{
|
||
category: "镜头",
|
||
items: ["24-70mm f/2.8", "70-200mm f/4", "85mm f/1.4", "16-35mm f/2.8", "90mm f/2.8 Macro"],
|
||
},
|
||
{
|
||
category: "配件",
|
||
items: ["三脚架", "滤镜系统", "闪光灯", "反光板", "无人机"],
|
||
},
|
||
]
|
||
|
||
return (
|
||
<div className="max-w-6xl mx-auto space-y-16">
|
||
{/* Hero Section */}
|
||
<div className="text-center mb-16">
|
||
<h1 className="text-4xl md:text-6xl font-light text-gray-900 mb-4">关于我</h1>
|
||
<p className="text-lg text-gray-600 max-w-2xl mx-auto">分享我的摄影故事，探索光影背后的创作理念与人生感悟</p>
|
||
</div>
|
||
|
||
{/* Personal Introduction */}
|
||
<div className="grid md:grid-cols-2 gap-12 items-center">
|
||
<div className="space-y-6">
|
||
<div>
|
||
<h2 className="text-3xl font-light text-gray-900 mb-4">张明华</h2>
|
||
<p className="text-gray-600 leading-relaxed mb-4">
|
||
我是一名专业摄影师，拥有超过8年的摄影经验。我的作品涵盖风光、人像、街头、建筑等多个领域，致力于通过镜头捕捉世界的美好瞬间。
|
||
</p>
|
||
<p className="text-gray-600 leading-relaxed mb-4">
|
||
摄影对我来说不仅仅是一份职业，更是一种表达情感和观察世界的方式。我相信每一张照片都有其独特的故事，每一次快门的按下都是对时光的珍贵记录。
|
||
</p>
|
||
<p className="text-gray-600 leading-relaxed">
|
||
我的作品曾在多个国际摄影比赛中获奖，并在国内外多个城市举办过个人摄影展。我希望通过我的镜头，让更多人感受到这个世界的美好与温暖。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex flex-wrap gap-4">
|
||
<div className="flex items-center gap-2 text-gray-600">
|
||
<MapPin className="h-4 w-4" />
|
||
<span>北京，中国</span>
|
||
</div>
|
||
<div className="flex items-center gap-2 text-gray-600">
|
||
<Calendar className="h-4 w-4" />
|
||
<span>8年摄影经验</span>
|
||
</div>
|
||
<div className="flex items-center gap-2 text-gray-600">
|
||
<Camera className="h-4 w-4" />
|
||
<span>专业摄影师</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative">
|
||
<div className="aspect-[3/4] relative overflow-hidden rounded-lg">
|
||
<Image src="/placeholder.svg?height=600&width=450" alt="摄影师张明华" fill className="object-cover" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Photography Philosophy */}
|
||
<div className="bg-gray-50 rounded-2xl p-8 md:p-12">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-3xl font-light text-gray-900 mb-4">摄影理念</h2>
|
||
<p className="text-gray-600 max-w-3xl mx-auto">我的摄影理念建立在对光影、情感和故事的深度理解之上</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-3 gap-8">
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<Heart className="h-8 w-8 text-blue-600" />
|
||
</div>
|
||
<h3 className="text-xl font-medium text-gray-900 mb-3">情感共鸣</h3>
|
||
<p className="text-gray-600 leading-relaxed">
|
||
每一张照片都应该能够触动观者的内心，传达真实的情感和故事。我追求的不仅是技术的完美，更是情感的真实表达。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<Lightbulb className="h-8 w-8 text-green-600" />
|
||
</div>
|
||
<h3 className="text-xl font-medium text-gray-900 mb-3">创意视角</h3>
|
||
<p className="text-gray-600 leading-relaxed">
|
||
我相信创意来源于对生活的细致观察和独特思考。通过不同的角度和构图，发现平凡中的不平凡。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<Target className="h-8 w-8 text-purple-600" />
|
||
</div>
|
||
<h3 className="text-xl font-medium text-gray-900 mb-3">精益求精</h3>
|
||
<p className="text-gray-600 leading-relaxed">
|
||
从前期拍摄到后期处理，我对每一个细节都精益求精。技术是表达创意的工具，而完美的技术服务于完美的创意。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Skills */}
|
||
<div>
|
||
<h2 className="text-3xl font-light text-gray-900 mb-8 text-center">专业技能</h2>
|
||
<div className="grid md:grid-cols-2 gap-6">
|
||
{skills.map((skill) => (
|
||
<div key={skill.name} className="space-y-2">
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-gray-900 font-medium">{skill.name}</span>
|
||
<span className="text-gray-600 text-sm">{skill.level}%</span>
|
||
</div>
|
||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||
<div
|
||
className="bg-gray-900 h-2 rounded-full transition-all duration-1000"
|
||
style={{ width: `${skill.level}%` }}
|
||
></div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Achievements Timeline */}
|
||
<div>
|
||
<h2 className="text-3xl font-light text-gray-900 mb-12 text-center">成就历程</h2>
|
||
<div className="relative">
|
||
<div className="absolute left-8 md:left-1/2 top-0 bottom-0 w-0.5 bg-gray-200 transform md:-translate-x-0.5"></div>
|
||
|
||
<div className="space-y-8">
|
||
{achievements.map((achievement, index) => (
|
||
<div
|
||
key={achievement.year}
|
||
className={`relative flex items-center ${index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse"}`}
|
||
>
|
||
<div className="absolute left-8 md:left-1/2 w-4 h-4 bg-gray-900 rounded-full transform -translate-x-1/2 z-10"></div>
|
||
|
||
<div
|
||
className={`w-full md:w-5/12 ml-16 md:ml-0 ${
|
||
index % 2 === 0 ? "md:mr-auto md:pr-8" : "md:ml-auto md:pl-8"
|
||
}`}
|
||
>
|
||
<Card className="border-0 shadow-sm">
|
||
<CardContent className="p-6">
|
||
<div className="flex items-start gap-4">
|
||
<div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0">
|
||
<achievement.icon className="h-6 w-6 text-gray-600" />
|
||
</div>
|
||
<div>
|
||
<div className="text-sm text-gray-500 mb-1">{achievement.year}</div>
|
||
<h3 className="text-lg font-medium text-gray-900 mb-2">{achievement.title}</h3>
|
||
<p className="text-gray-600 text-sm">{achievement.description}</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Equipment */}
|
||
<div>
|
||
<h2 className="text-3xl font-light text-gray-900 mb-8 text-center">摄影设备</h2>
|
||
<div className="grid md:grid-cols-3 gap-8">
|
||
{equipment.map((category) => (
|
||
<Card key={category.category} className="border-0 shadow-sm">
|
||
<CardContent className="p-6">
|
||
<h3 className="text-lg font-medium text-gray-900 mb-4">{category.category}</h3>
|
||
<div className="space-y-2">
|
||
{category.items.map((item) => (
|
||
<div key={item} className="flex items-center gap-2">
|
||
<div className="w-2 h-2 bg-gray-400 rounded-full"></div>
|
||
<span className="text-gray-600 text-sm">{item}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Call to Action */}
|
||
<div className="bg-gray-900 text-white rounded-2xl p-8 md:p-12 text-center">
|
||
<Users className="h-12 w-12 mx-auto mb-6 text-gray-300" />
|
||
<h2 className="text-3xl font-light mb-4">让我们一起创作</h2>
|
||
<p className="text-gray-300 mb-8 max-w-2xl mx-auto">
|
||
如果您对我的作品感兴趣，或者有任何摄影项目需要合作，欢迎随时与我联系。我期待与您一起创造独特而珍贵的视觉记忆。
|
||
</p>
|
||
<Button onClick={onContactClick} className="bg-white text-gray-900 hover:bg-gray-100">
|
||
联系我
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|