109 lines
5.1 KiB
React
109 lines
5.1 KiB
React
|
import { motion } from 'framer-motion';
|
||
|
|
import { Instagram, Calendar } from 'lucide-react';
|
||
|
|
import { members } from '../../data/dummy';
|
||
|
|
|
||
|
|
function Members() {
|
||
|
|
return (
|
||
|
|
<div className="py-16">
|
||
|
|
<div className="max-w-7xl mx-auto px-6">
|
||
|
|
{/* 헤더 */}
|
||
|
|
<div className="text-center mb-12">
|
||
|
|
<motion.h1
|
||
|
|
initial={{ opacity: 0, y: -20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
className="text-4xl font-bold mb-4"
|
||
|
|
>
|
||
|
|
멤버
|
||
|
|
</motion.h1>
|
||
|
|
<motion.p
|
||
|
|
initial={{ opacity: 0 }}
|
||
|
|
animate={{ opacity: 1 }}
|
||
|
|
transition={{ delay: 0.2 }}
|
||
|
|
className="text-gray-500"
|
||
|
|
>
|
||
|
|
프로미스나인의 5명의 멤버를 소개합니다
|
||
|
|
</motion.p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 멤버 그리드 */}
|
||
|
|
<div className="grid grid-cols-5 gap-8">
|
||
|
|
{members.map((member, index) => (
|
||
|
|
<motion.div
|
||
|
|
key={member.id}
|
||
|
|
initial={{ opacity: 0, y: 30 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ delay: index * 0.1 }}
|
||
|
|
className="group"
|
||
|
|
>
|
||
|
|
<div className="relative bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300">
|
||
|
|
{/* 이미지 */}
|
||
|
|
<div className="aspect-[3/4] bg-gray-100 overflow-hidden">
|
||
|
|
<img
|
||
|
|
src={member.imageUrl}
|
||
|
|
alt={member.name}
|
||
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 정보 */}
|
||
|
|
<div className="p-6">
|
||
|
|
<h3 className="text-xl font-bold mb-1">{member.name}</h3>
|
||
|
|
<p className="text-primary text-sm font-medium mb-3">{member.position}</p>
|
||
|
|
|
||
|
|
<div className="flex items-center gap-2 text-sm text-gray-500 mb-4">
|
||
|
|
<Calendar size={14} />
|
||
|
|
<span>{member.birthDate}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 인스타그램 링크 */}
|
||
|
|
<a
|
||
|
|
href={member.instagram}
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
className="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-pink-500 transition-colors"
|
||
|
|
>
|
||
|
|
<Instagram size={16} />
|
||
|
|
<span>Instagram</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 호버 효과 - 컬러 바 */}
|
||
|
|
<div className="absolute bottom-0 left-0 right-0 h-1 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300" />
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 그룹 정보 */}
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 30 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ delay: 0.6 }}
|
||
|
|
className="mt-16 bg-gradient-to-r from-primary to-primary-dark rounded-3xl p-10 text-white"
|
||
|
|
>
|
||
|
|
<div className="grid grid-cols-4 gap-8 text-center">
|
||
|
|
<div>
|
||
|
|
<p className="text-4xl font-bold mb-2">2018</p>
|
||
|
|
<p className="text-white/70">데뷔 연도</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p className="text-4xl font-bold mb-2">5</p>
|
||
|
|
<p className="text-white/70">멤버 수</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p className="text-4xl font-bold mb-2">7+</p>
|
||
|
|
<p className="text-white/70">앨범 수</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p className="text-4xl font-bold mb-2">flover</p>
|
||
|
|
<p className="text-white/70">팬덤명</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Members;
|