150 lines
8 KiB
React
150 lines
8 KiB
React
|
import { motion } from 'framer-motion';
|
||
|
|
import { Link } from 'react-router-dom';
|
||
|
|
import { Calendar, Users, Disc3, ArrowRight } from 'lucide-react';
|
||
|
|
import { members, schedules, albums } from '../../data/dummy';
|
||
|
|
|
||
|
|
function Home() {
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
{/* 히어로 섹션 */}
|
||
|
|
<section className="relative h-[600px] bg-gradient-to-br from-primary to-primary-dark overflow-hidden">
|
||
|
|
<div className="absolute inset-0 bg-black/20" />
|
||
|
|
<div className="relative max-w-7xl mx-auto px-6 h-full flex items-center">
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 30 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.8 }}
|
||
|
|
className="text-white"
|
||
|
|
>
|
||
|
|
<h1 className="text-6xl font-bold mb-4">fromis_9</h1>
|
||
|
|
<p className="text-2xl font-light mb-2">프로미스나인</p>
|
||
|
|
<p className="text-lg opacity-80 mb-8 leading-relaxed">
|
||
|
|
인사드리겠습니다. 둘, 셋!<br />
|
||
|
|
이제는 약속해 소중히 간직해,<br />
|
||
|
|
당신의 아이돌로 성장하겠습니다!
|
||
|
|
</p>
|
||
|
|
<Link
|
||
|
|
to="/members"
|
||
|
|
className="inline-flex items-center gap-2 bg-white text-primary px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition-colors"
|
||
|
|
>
|
||
|
|
멤버 보기
|
||
|
|
<ArrowRight size={18} />
|
||
|
|
</Link>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 장식 */}
|
||
|
|
<div className="absolute right-0 bottom-0 w-1/2 h-full opacity-10">
|
||
|
|
<div className="absolute right-10 top-20 w-64 h-64 rounded-full bg-white/30" />
|
||
|
|
<div className="absolute right-40 bottom-20 w-48 h-48 rounded-full bg-white/20" />
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* 퀵 링크 섹션 */}
|
||
|
|
<section className="py-16 bg-white">
|
||
|
|
<div className="max-w-7xl mx-auto px-6">
|
||
|
|
<div className="grid grid-cols-3 gap-8">
|
||
|
|
<Link
|
||
|
|
to="/members"
|
||
|
|
className="group p-8 bg-gray-50 rounded-2xl hover:bg-primary hover:text-white transition-all duration-300"
|
||
|
|
>
|
||
|
|
<Users size={40} className="mb-4 text-primary group-hover:text-white" />
|
||
|
|
<h3 className="text-xl font-bold mb-2">멤버</h3>
|
||
|
|
<p className="text-gray-500 group-hover:text-white/80">5명의 멤버를 만나보세요</p>
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
to="/discography"
|
||
|
|
className="group p-8 bg-gray-50 rounded-2xl hover:bg-primary hover:text-white transition-all duration-300"
|
||
|
|
>
|
||
|
|
<Disc3 size={40} className="mb-4 text-primary group-hover:text-white" />
|
||
|
|
<h3 className="text-xl font-bold mb-2">디스코그래피</h3>
|
||
|
|
<p className="text-gray-500 group-hover:text-white/80">앨범과 음악을 확인하세요</p>
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
to="/schedule"
|
||
|
|
className="group p-8 bg-gray-50 rounded-2xl hover:bg-primary hover:text-white transition-all duration-300"
|
||
|
|
>
|
||
|
|
<Calendar size={40} className="mb-4 text-primary group-hover:text-white" />
|
||
|
|
<h3 className="text-xl font-bold mb-2">스케줄</h3>
|
||
|
|
<p className="text-gray-500 group-hover:text-white/80">다가오는 일정을 확인하세요</p>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* 멤버 미리보기 */}
|
||
|
|
<section className="py-16 bg-gray-50">
|
||
|
|
<div className="max-w-7xl mx-auto px-6">
|
||
|
|
<div className="flex justify-between items-center mb-8">
|
||
|
|
<h2 className="text-3xl font-bold">멤버</h2>
|
||
|
|
<Link to="/members" className="text-primary hover:underline flex items-center gap-1">
|
||
|
|
전체보기 <ArrowRight size={16} />
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
<div className="grid grid-cols-5 gap-6">
|
||
|
|
{members.map((member, index) => (
|
||
|
|
<motion.div
|
||
|
|
key={member.id}
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ delay: index * 0.1 }}
|
||
|
|
className="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-lg transition-shadow"
|
||
|
|
>
|
||
|
|
<div className="aspect-square bg-gray-100">
|
||
|
|
<img
|
||
|
|
src={member.imageUrl}
|
||
|
|
alt={member.name}
|
||
|
|
className="w-full h-full object-cover"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="p-4 text-center">
|
||
|
|
<h3 className="font-bold text-lg">{member.name}</h3>
|
||
|
|
<p className="text-sm text-gray-500">{member.position.split(',')[0]}</p>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* 스케줄 미리보기 */}
|
||
|
|
<section className="py-16 bg-white">
|
||
|
|
<div className="max-w-7xl mx-auto px-6">
|
||
|
|
<div className="flex justify-between items-center mb-8">
|
||
|
|
<h2 className="text-3xl font-bold">다가오는 스케줄</h2>
|
||
|
|
<Link to="/schedule" className="text-primary hover:underline flex items-center gap-1">
|
||
|
|
전체보기 <ArrowRight size={16} />
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
<div className="space-y-4">
|
||
|
|
{schedules.slice(0, 3).map((schedule) => (
|
||
|
|
<div
|
||
|
|
key={schedule.id}
|
||
|
|
className="flex items-center gap-6 p-6 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors"
|
||
|
|
>
|
||
|
|
<div className="text-center min-w-[80px]">
|
||
|
|
<p className="text-2xl font-bold text-primary">
|
||
|
|
{schedule.date.split('-')[2]}
|
||
|
|
</p>
|
||
|
|
<p className="text-sm text-gray-500">
|
||
|
|
{schedule.date.split('-')[1]}월
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="flex-1">
|
||
|
|
<h3 className="font-bold text-lg">{schedule.title}</h3>
|
||
|
|
<p className="text-gray-500">{schedule.platform} · {schedule.time}</p>
|
||
|
|
</div>
|
||
|
|
<div className="text-sm text-primary font-medium">
|
||
|
|
{schedule.members.join(', ')}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Home;
|