Skip to content

Commit eb25726

Browse files
mvriu5mvriu5
committed
feat: improve swipecard section styling
1 parent 36d9e64 commit eb25726

2 files changed

Lines changed: 44 additions & 40 deletions

File tree

‎src/components/cards/EditionUseCaseCard.tsx‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -30,20 +30,17 @@ export function EditionUseCaseCard({
3030
return (
3131
<div
3232
className={cn(
33-
"glass-card-shell group relative h-full rounded-[1.6rem] shadow-[0_14px_42px_rgba(0,0,0,0.3)] transition-all duration-500 ease-out before:pointer-events-none before:absolute before:inset-1px before:rounded-[calc(1.6rem-1px)] before:border before:border-white/6 before:content-['']",
34-
isFocused
35-
? "scale-100 opacity-100 z-10"
36-
: "scale-90 opacity-40 blur-[2px]",
37-
className,
33+
"glass-card-shell group relative flex h-full min-h-0 flex-col rounded-3xl transition-all duration-500 ease-out before:pointer-events-none before:absolute before:inset-1px before:rounded-[calc(1.6rem-1px)] before:border before:border-white/6 before:content-['']",
34+
className
3835
)}
3936
>
4037
<div aria-hidden="true" className="glass-card-topline"/>
4138
<div
42-
className="relative z-10 flex h-full flex-col items-stretch justify-start overflow-hidden rounded-[1.6rem]">
43-
{imageUrl ? (
44-
<div className={"p-2"}>
39+
className="relative flex h-full flex-col items-stretch justify-start overflow-hidden rounded-[1.6rem]">
40+
<div className={"p-2"}>
41+
{imageUrl ? (
4542
<div
46-
className="relative overflow-hidden aspect-video w-full rounded-[1.2rem] border border-white/8 bg-primary/40">
43+
className="relative overflow-hidden aspect-video w-full rounded-2xl border border-white/8 bg-primary/40">
4744
<Image
4845
src={imageUrl}
4946
alt={title}
@@ -52,21 +49,22 @@ export function EditionUseCaseCard({
5249
className="object-cover"
5350
/>
5451
</div>
55-
</div>
56-
) : (
57-
<div className="relative h-48 w-full bg-white/5"/>
58-
)}
52+
) : (
53+
<div className="relative w-full aspect-video bg-white/5 rounded-2xl"/>
54+
)}
55+
</div>
56+
5957

60-
<div className="flex flex-1 flex-col gap-2 p-4">
61-
<h3 className="text-xl font-semibold text-white">
58+
<div className="flex min-h-0 flex-1 flex-col gap-2 p-4">
59+
<h3 className="line-clamp-2 text-xl font-semibold text-white">
6260
{title}
6361
</h3>
6462
<p className="mb-2 text-sm text-white/70 leading-relaxed">
6563
{description}
6664
</p>
6765

6866
{link?.url && link?.label && (
69-
<LinkButton href={link.url}>
67+
<LinkButton href={link.url} className="mt-auto pt-2">
7068
{link.label}
7169
</LinkButton>
7270
)}

‎src/components/sections/SwipeCardSection.tsx‎

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -99,26 +99,21 @@ export function SwipeCardSection({ content }: SwipeCardSectionProps) {
9999
</p>
100100
</motion.div>
101101

102-
<motion.div className="relative w-full" variants={carouselVariants}>
103-
<div className="relative flex items-center justify-center gap-4 px-2 md:gap-8 md:px-16">
104-
<Button
105-
onClick={handlePrevious}
106-
variant="filled"
107-
className="absolute left-0 z-20 shrink-0 size-12! rounded-full! p-0!"
108-
aria-label="Previous card"
109-
>
110-
<IconChevronLeft className="size-6 mr-0.5" />
111-
</Button>
102+
<motion.div className="relative w-full overflow-hidden" variants={carouselVariants}>
103+
<div aria-hidden="true" className="pointer-events-none absolute -inset-y-6 left-0 z-30 w-0 bg-linear-to-r from-primary via-primary/80 to-transparent lg:w-40" />
104+
<div aria-hidden="true" className="pointer-events-none absolute -inset-y-6 right-0 z-30 w-0 bg-linear-to-l from-primary via-primary/80 to-transparent lg:w-40" />
105+
106+
<div className="relative flex items-center justify-center gap-4 px-2 md:gap-8">
112107

113108
<motion.div
114-
className="relative flex w-full items-center justify-center px-0 md:px-2 touch-pan-y"
109+
className="relative flex w-full items-center justify-center px-0 touch-pan-y"
115110
drag="x"
116111
dragConstraints={{ left: 0, right: 0 }}
117112
dragElastic={0.08}
118113
onDragEnd={handleDragEnd}
119114
>
120115
<div className="relative flex w-full items-stretch justify-center">
121-
<div className="w-full max-w-full md:max-w-md opacity-0 pointer-events-none">
116+
<div className="h-full w-[64vw] max-w-4xl opacity-0 pointer-events-none">
122117
<EditionUseCaseCard
123118
title={cards[focusedIndex]?.title ?? ""}
124119
description={cards[focusedIndex]?.description ?? ""}
@@ -136,13 +131,13 @@ export function SwipeCardSection({ content }: SwipeCardSectionProps) {
136131
<div
137132
key={card.id || index}
138133
className={cn(
139-
"absolute top-0 w-full transition-all duration-500 ease-out",
140-
"max-w-full md:max-w-md",
134+
"absolute inset-y-0 h-full w-full transition-all duration-500 ease-out",
135+
"left-1/2 w-[64vw] max-w-4xl",
141136
!isVisibleMobile && "lg:opacity-100 lg:pointer-events-auto opacity-0 pointer-events-none",
142137
!isVisibleDesktop && "lg:opacity-0 lg:pointer-events-none",
143138
)}
144139
style={{
145-
transform: `translateX(${offset * 110}%)`,
140+
transform: `translateX(calc(-50% + ${offset * 104}%))`,
146141
}}
147142
>
148143
<EditionUseCaseCard
@@ -157,17 +152,28 @@ export function SwipeCardSection({ content }: SwipeCardSectionProps) {
157152
})}
158153
</div>
159154
</motion.div>
160-
161-
<Button
162-
onClick={handleNext}
163-
variant="filled"
164-
className="absolute right-0 z-20 shrink-0 size-12! rounded-full! p-0!"
165-
aria-label="Next card"
166-
>
167-
<IconChevronRight className="size-6 ml-0.5" />
168-
</Button>
169155
</div>
170156
</motion.div>
157+
158+
<motion.div className="z-30 flex items-center justify-center gap-4" variants={staggerItem}>
159+
<Button
160+
onClick={handlePrevious}
161+
variant="filled"
162+
className="shrink-0 size-12! rounded-full! p-0!"
163+
aria-label="Previous card"
164+
>
165+
<IconChevronLeft className="size-6 mr-0.5" />
166+
</Button>
167+
168+
<Button
169+
onClick={handleNext}
170+
variant="filled"
171+
className="shrink-0 size-12! rounded-full! p-0!"
172+
aria-label="Next card"
173+
>
174+
<IconChevronRight className="size-6 ml-0.5" />
175+
</Button>
176+
</motion.div>
171177
</motion.div>
172178
</Section>
173179
)

0 commit comments

Comments
 (0)