Skip to content

Commit 885b6e8

Browse files
mvriu5mvriu5
committed
feat: improve contactpage spacing & teammembercard
1 parent 122d5cc commit 885b6e8

2 files changed

Lines changed: 15 additions & 24 deletions

File tree

‎src/components/ContactPageContent.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,13 +79,13 @@ export function ContactPageContent({ locale, contactBlock }: ContactPageContentP
7979
}, [])
8080

8181
return (
82-
<div className="grid gap-8 lg:grid-cols-5">
83-
<section className="min-w-0 lg:col-span-3">
82+
<div className="grid gap-8 lg:grid-cols-2">
83+
<section className="min-w-0">
8484
<h1 className="text-4xl font-semibold text-white">{pageHeading}</h1>
8585
<p className="mt-4 text-white/75">{pageDescription}</p>
8686
</section>
8787

88-
<section ref={desktopWrapperRef} className="relative min-w-0 lg:col-span-2">
88+
<section ref={desktopWrapperRef} className="relative min-w-0">
8989
<div
9090
ref={desktopContainerRef}
9191
className={cn(

‎src/components/cards/TeamMemberCard.tsx‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -53,13 +53,7 @@ export function TeamMemberCard({ member, locale }: TeamMemberCardProps) {
5353
aria-label={`${member.name} details`}
5454
whileTap={{ scale: 0.98 }}
5555
>
56-
<Card
57-
variant="filled"
58-
className="glass-card-shell group h-full cursor-pointer p-5!"
59-
>
60-
<div aria-hidden="true" className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.12),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.04),transparent_34%),linear-gradient(135deg,rgba(114,201,248,0.1),transparent_42%)]" />
61-
<div aria-hidden="true" className="pointer-events-none absolute -left-8 -top-8 h-24 w-24 rounded-full bg-aqua/14 blur-2xl transition-transform duration-700 group-hover:scale-115" />
62-
<div aria-hidden="true" className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_bottom_right,rgba(8,10,20,0),rgba(8,10,20,0.52)_54%,rgba(8,10,20,0.88))]" />
56+
<Card className="glass-card-shell bg-primary/50! group h-full cursor-pointer p-4!">
6357
<div aria-hidden="true" className="glass-card-topline" />
6458

6559
<div className="relative z-10">
@@ -73,17 +67,17 @@ export function TeamMemberCard({ member, locale }: TeamMemberCardProps) {
7367
className="h-14 w-14 rounded-full object-cover"
7468
/>
7569
) : (
76-
<div className="h-14 w-14 rounded-full bg-white/15 flex items-center justify-center text-sm font-semibold text-white/80">
70+
<div className="h-14 w-14 rounded-full bg-white/10 flex items-center justify-center text-sm font-semibold text-white/80">
7771
{getInitials(member.name)}
7872
</div>
7973
)}
8074
<div>
81-
<h3 className="text-xl font-semibold tracking-tight text-white/92">{member.name}</h3>
82-
{member.role ? <p className="text-sm text-white/50">{member.role}</p> : null}
75+
<h3 className="text-xl font-semibold text-white">{member.name}</h3>
76+
{member.role ? <p className="text-sm text-white/75">{member.role}</p> : null}
8377
</div>
8478
</div>
8579

86-
{member.shortDescription ? <p className="text-white/80 leading-6 mb-3">{member.shortDescription}</p> : null}
80+
{member.shortDescription ? <p className="text-white/75 leading-6 mb-3">{member.shortDescription}</p> : null}
8781
{joinedAtLabel ? <p className="text-xs text-white/50 mt-4">{joinedLabel}: {joinedAtLabel}</p> : null}
8882
</div>
8983
</Card>
@@ -92,7 +86,7 @@ export function TeamMemberCard({ member, locale }: TeamMemberCardProps) {
9286
<AnimatePresence>
9387
{isOpen ? (
9488
<motion.div
95-
className="fixed inset-0 z-50 bg-black/65 backdrop-blur-sm p-4 md:p-8 flex items-center justify-center"
89+
className="fixed inset-0 z-50 bg-primary/50 backdrop-blur-sm p-4 md:p-8 flex items-center justify-center"
9690
initial={{ opacity: 0 }}
9791
animate={{ opacity: 1 }}
9892
exit={{ opacity: 0 }}
@@ -105,11 +99,8 @@ export function TeamMemberCard({ member, locale }: TeamMemberCardProps) {
10599
>
106100
<Card
107101
variant="filled"
108-
className="glass-card-shell group h-full max-h-[80vh] overflow-y-auto p-6!"
102+
className="glass-card-shell bg-primary! group h-full max-h-[80vh] overflow-y-auto p-4!"
109103
>
110-
<div aria-hidden="true" className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.12),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.04),transparent_34%),linear-gradient(135deg,rgba(114,201,248,0.1),transparent_42%)]" />
111-
<div aria-hidden="true" className="pointer-events-none absolute -left-10 -top-10 h-28 w-28 rounded-full bg-aqua/14 blur-2xl" />
112-
<div aria-hidden="true" className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_bottom_right,rgba(8,10,20,0),rgba(8,10,20,0.52)_54%,rgba(8,10,20,0.88))]" />
113104
<div aria-hidden="true" className="glass-card-topline" />
114105

115106
<div className="relative z-10">
@@ -124,26 +115,26 @@ export function TeamMemberCard({ member, locale }: TeamMemberCardProps) {
124115
className="h-16 w-16 rounded-full object-cover"
125116
/>
126117
) : (
127-
<div className="h-16 w-16 rounded-full bg-white/15 flex items-center justify-center text-base font-semibold text-white/80">
118+
<div className="h-16 w-16 rounded-full bg-white/10 flex items-center justify-center text-base font-semibold text-white">
128119
{getInitials(member.name)}
129120
</div>
130121
)}
131122
<div>
132-
<h3 className="text-2xl font-semibold tracking-tight text-white/92">{member.name}</h3>
133-
{member.role ? <p className="text-sm text-white/60">{member.role}</p> : null}
123+
<h3 className="text-2xl font-semibold text-white">{member.name}</h3>
124+
{member.role ? <p className="text-sm text-white/75">{member.role}</p> : null}
134125
</div>
135126
</div>
136127
<button
137128
type="button"
138129
onClick={() => setIsOpen(false)}
139-
className="rounded-lg p-1 text-sm text-white/60 hover:text-white hover:bg-white/10 transition-colors"
130+
className="rounded-lg p-1 text-sm text-white/75 hover:text-white hover:bg-white/10 transition-colors"
140131
aria-label={locale === "de" ? "Dialog schliessen" : "Close dialog"}
141132
>
142133
<IconX size={20}/>
143134
</button>
144135
</div>
145136

146-
{member.about ? <p className="text-white/80 leading-relaxed text-base">{member.about}</p> : null}
137+
{member.about ? <p className="text-white/75 text-base">{member.about}</p> : null}
147138
{joinedAtLabel ? <p className="text-xs text-white/50 mt-6">{joinedLabel}: {joinedAtLabel}</p> : null}
148139
</div>
149140
</Card>

0 commit comments

Comments
 (0)