Mayne0213
f78454c2a1
- Initial setup and all features from develop branch - Includes: auth, deploy, docker, style fixes - K3S deployment configuration
104 lines
4.4 KiB
TypeScript
104 lines
4.4 KiB
TypeScript
import { Metadata } from 'next';
|
|
import Image from 'next/image';
|
|
import leader1 from '@/public/subpages/about/leaders/1.webp';
|
|
|
|
export const metadata: Metadata = {
|
|
title: '교역자 및 직분자',
|
|
description: '제자들교회의 교역자와 직분자를 소개합니다. 담임목사, 부목사, 전도사, 장로들이 함께 섬기고 있습니다.',
|
|
openGraph: {
|
|
title: '교역자 및 직분자 | 제자들교회',
|
|
description: '제자들교회의 교역자와 직분자 소개',
|
|
},
|
|
};
|
|
import leader2 from '@/public/subpages/about/leaders/2.webp';
|
|
import leader3 from '@/public/subpages/about/leaders/3.webp';
|
|
import leader4 from '@/public/subpages/about/leaders/4.webp';
|
|
import leader5 from '@/public/subpages/about/leaders/5.webp';
|
|
import leader6 from '@/public/subpages/about/leaders/6.webp';
|
|
import leader7 from '@/public/subpages/about/leaders/7.webp';
|
|
import leader8 from '@/public/subpages/about/leaders/8.webp';
|
|
import leader9 from '@/public/subpages/about/leaders/9.webp';
|
|
|
|
const LEADER_CATEGORIES = [
|
|
{
|
|
title: '교역자',
|
|
color: '#6d96c5',
|
|
members: [
|
|
{ name: '김경한', title: '담임목사', image: leader1 },
|
|
{ name: '김종범', title: '부목사', image: leader2 },
|
|
{ name: '최하영', title: '부목사', image: leader3 },
|
|
{ name: '김윤영', title: '전도사', image: leader4 },
|
|
{ name: '설희보', title: '전도사', image: leader5 },
|
|
{ name: '서영리', title: '협력전도사', image: leader6 },
|
|
],
|
|
},
|
|
{
|
|
title: '장로',
|
|
color: '#94b7d6',
|
|
members: [
|
|
{ name: '김정태', title: '명예 장로', image: leader7 },
|
|
{ name: '안종웅', title: '장로', image: leader8 },
|
|
{ name: '김현종', title: '장로', image: leader9 },
|
|
],
|
|
},
|
|
];
|
|
|
|
export default function LeadersPage() {
|
|
return (
|
|
<div className="bg-white w-full">
|
|
<div className="py-8 smalltablet:py-12 pc:py-16 px-4 smalltablet:px-6 pc:px-8">
|
|
<div className="max-w-5xl mx-auto">
|
|
{LEADER_CATEGORIES.map((category, categoryIndex) => (
|
|
<div key={categoryIndex} className="mb-12 smalltablet:mb-16 pc:mb-20">
|
|
{/* 섹션 헤더 */}
|
|
<div className="text-center mb-8 smalltablet:mb-10 pc:mb-12">
|
|
<div
|
|
className={`w-12 smalltablet:w-14 pc:w-16 h-1 mx-auto mb-3 smalltablet:mb-4 bg-[${category.color}]`}
|
|
/>
|
|
<h2 className="text-2xl smalltablet:text-3xl pc:text-4xl font-bold text-gray-900">
|
|
{category.title}
|
|
</h2>
|
|
</div>
|
|
|
|
{/* 멤버 그리드 */}
|
|
<div className="grid grid-cols-2 smalltablet:grid-cols-3 gap-4 smalltablet:gap-6 pc:gap-8">
|
|
{category.members.map((member, memberIndex) => (
|
|
<div
|
|
key={memberIndex}
|
|
className="group bg-white rounded-xl smalltablet:rounded-2xl overflow-hidden border border-gray-300 hover:shadow-xl transition-all duration-300 hover:-translate-y-1"
|
|
>
|
|
{/* 프로필 이미지 */}
|
|
<div className="relative aspect-3/4 bg-gray-100 overflow-hidden">
|
|
<Image
|
|
src={member.image}
|
|
alt={member.name}
|
|
fill
|
|
className="object-cover group-hover:scale-105 transition-transform duration-500"
|
|
/>
|
|
{/* 그라데이션 오버레이 */}
|
|
<div className="absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
|
</div>
|
|
|
|
{/* 정보 */}
|
|
<div className="p-3 smalltablet:p-4 pc:p-5 text-center">
|
|
<h3 className="text-lg smalltablet:text-xl pc:text-2xl font-bold text-gray-900 mb-1">
|
|
{member.name}
|
|
</h3>
|
|
<p
|
|
className="text-sm smalltablet:text-base pc:text-lg font-medium"
|
|
style={{ color: category.color }}
|
|
>
|
|
{member.title}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|