refactor(members): PC 멤버 페이지 3열 레이아웃 + 마지막 줄 가운데 정렬
- 5열에서 3열 레이아웃으로 변경 - max-w-4xl로 카드 크기 축소 - flexbox로 마지막 줄 가운데 정렬 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
45da9c6277
commit
d50488d7e3
1 changed files with 4 additions and 4 deletions
|
|
@ -20,7 +20,7 @@ function Members() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="py-16">
|
<div className="py-16">
|
||||||
<div className="max-w-7xl mx-auto px-6">
|
<div className="max-w-4xl mx-auto px-6">
|
||||||
{/* 헤더 */}
|
{/* 헤더 */}
|
||||||
<div className="text-center mb-12">
|
<div className="text-center mb-12">
|
||||||
<motion.h1
|
<motion.h1
|
||||||
|
|
@ -40,8 +40,8 @@ function Members() {
|
||||||
</motion.p>
|
</motion.p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 현재 멤버 그리드 */}
|
{/* 멤버 그리드 - 3열, 마지막 줄 가운데 정렬 */}
|
||||||
<div className="grid grid-cols-5 gap-8">
|
<div className="flex flex-wrap justify-center gap-6">
|
||||||
{members
|
{members
|
||||||
.filter((m) => !m.is_former)
|
.filter((m) => !m.is_former)
|
||||||
.map((member, index) => (
|
.map((member, index) => (
|
||||||
|
|
@ -50,7 +50,7 @@ function Members() {
|
||||||
initial={{ opacity: 0, y: 30 }}
|
initial={{ opacity: 0, y: 30 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ delay: index * 0.1 }}
|
transition={{ delay: index * 0.1 }}
|
||||||
className="group h-full"
|
className="group w-[calc(33.333%-1rem)]"
|
||||||
>
|
>
|
||||||
<div className="relative bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 h-full flex flex-col">
|
<div className="relative bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 h-full flex flex-col">
|
||||||
{/* 이미지 */}
|
{/* 이미지 */}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue