From 702d2500bef29a2efdeae20336587ddf28d63ec1 Mon Sep 17 00:00:00 2001
From: Taesu <166604494+bytaesu@users.noreply.github.com>
Date: Mon, 9 Mar 2026 13:53:14 +0900
Subject: [PATCH] docs: improve careers position cards (#8509)

---
 landing/app/careers/careers-client.tsx | 88 ++++++++++++++------------
 1 file changed, 48 insertions(+), 40 deletions(-)

diff --git a/landing/app/careers/careers-client.tsx b/landing/app/careers/careers-client.tsx
index db6143054a..feb6cee4c5 100644
--- a/landing/app/careers/careers-client.tsx
+++ b/landing/app/careers/careers-client.tsx
@@ -54,7 +54,7 @@ function ApplyDialog({
 			onClick={onClose}
 		>
 			{/* Backdrop */}
-			<div className="absolute inset-0 bg-background/80 backdrop-blur-sm" />
+			<div className="absolute inset-0 bg-black/40 backdrop-blur-md dark:bg-black/72" />
 
 			{/* Dialog */}
 			<motion.div
@@ -63,19 +63,19 @@ function ApplyDialog({
 				exit={{ opacity: 0, y: 10, scale: 0.98 }}
 				transition={{ duration: 0.2, ease: "easeOut" }}
 				onClick={(e) => e.stopPropagation()}
-				className="relative w-full max-w-md border border-dashed border-foreground/[0.08] bg-background overflow-hidden"
+				className="relative w-full max-w-md overflow-hidden border border-foreground/[0.14] bg-background/95 shadow-2xl shadow-black/12 ring-1 ring-black/5 backdrop-blur dark:border-white/[0.08] dark:bg-[#050505]/95 dark:shadow-black/65 dark:ring-white/[0.04]"
 			>
 				{/* Corner marks */}
-				<span className="absolute top-2 left-2 text-[9px] font-mono text-foreground/15 select-none leading-none">
+				<span className="absolute top-2 left-2 text-[9px] font-mono text-foreground/25 dark:text-foreground/18 select-none leading-none">
 					+
 				</span>
-				<span className="absolute top-2 right-2 text-[9px] font-mono text-foreground/15 select-none leading-none">
+				<span className="absolute top-2 right-2 text-[9px] font-mono text-foreground/25 dark:text-foreground/18 select-none leading-none">
 					+
 				</span>
-				<span className="absolute bottom-2 left-2 text-[9px] font-mono text-foreground/15 select-none leading-none">
+				<span className="absolute bottom-2 left-2 text-[9px] font-mono text-foreground/25 dark:text-foreground/18 select-none leading-none">
 					+
 				</span>
-				<span className="absolute bottom-2 right-2 text-[9px] font-mono text-foreground/15 select-none leading-none">
+				<span className="absolute bottom-2 right-2 text-[9px] font-mono text-foreground/25 dark:text-foreground/18 select-none leading-none">
 					+
 				</span>
 
@@ -84,13 +84,15 @@ function ApplyDialog({
 					<button
 						type="button"
 						onClick={onClose}
-						className="absolute top-4 right-4 text-foreground/30 hover:text-foreground/60 transition-colors"
+						aria-label="Close dialog"
+						className="absolute top-4 right-4 text-foreground/50 hover:text-foreground/80 transition-colors"
 					>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
 							width="14"
 							height="14"
 							viewBox="0 0 24 24"
+							aria-hidden="true"
 						>
 							<path
 								fill="currentColor"
@@ -106,15 +108,17 @@ function ApplyDialog({
 							transition={{ duration: 0.3 }}
 							className="text-center py-6 space-y-3"
 						>
-							<p className="text-sm text-foreground/80">Application sent</p>
-							<p className="text-[11px] text-foreground/40 leading-relaxed max-w-xs mx-auto">
+							<p className="text-sm text-foreground/92 dark:text-foreground/88">
+								Application sent
+							</p>
+							<p className="text-[11px] text-foreground/60 dark:text-foreground/52 leading-relaxed max-w-xs mx-auto">
 								Thanks for applying for {role.title}. We&apos;ll review your
 								application and get back to you soon.
 							</p>
 							<button
 								type="button"
 								onClick={onClose}
-								className="mt-4 inline-flex items-center px-4 py-2 border border-foreground/[0.12] text-foreground/40 hover:text-foreground/70 hover:border-foreground/25 transition-all font-mono text-[10px] uppercase tracking-widest"
+								className="mt-4 inline-flex items-center px-4 py-2 border border-foreground/[0.18] bg-foreground/[0.03] text-foreground/72 hover:text-foreground/90 hover:border-foreground/28 hover:bg-foreground/[0.06] transition-all font-mono text-[10px] uppercase tracking-widest dark:border-white/[0.1] dark:bg-white/[0.03] dark:text-foreground/68 dark:hover:text-foreground/84 dark:hover:bg-white/[0.05]"
 							>
 								Close
 							</button>
@@ -122,15 +126,17 @@ function ApplyDialog({
 					) : (
 						<>
 							<div className="mb-6 space-y-1">
-								<p className="text-[10px] uppercase tracking-widest text-foreground/30 font-mono">
+								<p className="text-[10px] uppercase tracking-widest text-foreground/55 dark:text-foreground/50 font-mono">
 									# Apply
 								</p>
-								<h3 className="text-sm text-foreground/80">{role.title}</h3>
+								<h3 className="text-sm text-foreground/92 dark:text-foreground/86">
+									{role.title}
+								</h3>
 								<div className="flex items-center gap-2 pt-1">
-									<span className="text-[8px] font-mono uppercase tracking-widest text-foreground/40 border border-dashed border-foreground/[0.1] px-1.5 py-0.5 leading-none">
+									<span className="text-[8px] font-mono uppercase tracking-widest text-foreground/60 dark:text-foreground/50 border border-foreground/[0.15] bg-foreground/[0.03] px-1.5 py-0.5 leading-none dark:border-white/[0.08] dark:bg-white/[0.03]">
 										{role.type}
 									</span>
-									<span className="text-[8px] font-mono uppercase tracking-widest text-foreground/40 border border-dashed border-foreground/[0.1] px-1.5 py-0.5 leading-none">
+									<span className="text-[8px] font-mono uppercase tracking-widest text-foreground/60 dark:text-foreground/50 border border-foreground/[0.15] bg-foreground/[0.03] px-1.5 py-0.5 leading-none dark:border-white/[0.08] dark:bg-white/[0.03]">
 										{role.location}
 									</span>
 								</div>
@@ -146,7 +152,7 @@ function ApplyDialog({
 								<div className="space-y-1.5">
 									<label
 										htmlFor="careers-name"
-										className="text-[9px] text-foreground/30 uppercase tracking-widest font-mono"
+										className="text-[9px] text-foreground/58 dark:text-foreground/48 uppercase tracking-widest font-mono"
 									>
 										Name
 									</label>
@@ -154,7 +160,7 @@ function ApplyDialog({
 										id="careers-name"
 										type="text"
 										required
-										className="w-full bg-transparent border border-dashed border-foreground/[0.1] px-3 py-2 text-[12px] text-foreground/70 placeholder:text-foreground/20 focus:outline-none focus:border-foreground/25 transition-colors"
+										className="w-full border border-foreground/[0.15] bg-foreground/[0.025] px-3 py-2 text-[12px] text-foreground/88 placeholder:text-foreground/38 focus:outline-none focus:border-foreground/38 dark:border-white/[0.1] dark:bg-white/[0.03] dark:text-foreground/78 dark:placeholder:text-foreground/28 dark:focus:border-white/[0.2] transition-colors"
 										placeholder="Your full name"
 									/>
 								</div>
@@ -162,7 +168,7 @@ function ApplyDialog({
 								<div className="space-y-1.5">
 									<label
 										htmlFor="careers-email"
-										className="text-[9px] text-foreground/30 uppercase tracking-widest font-mono"
+										className="text-[9px] text-foreground/58 dark:text-foreground/48 uppercase tracking-widest font-mono"
 									>
 										Email
 									</label>
@@ -170,7 +176,7 @@ function ApplyDialog({
 										id="careers-email"
 										type="email"
 										required
-										className="w-full bg-transparent border border-dashed border-foreground/[0.1] px-3 py-2 text-[12px] text-foreground/70 placeholder:text-foreground/20 focus:outline-none focus:border-foreground/25 transition-colors"
+										className="w-full border border-foreground/[0.15] bg-foreground/[0.025] px-3 py-2 text-[12px] text-foreground/88 placeholder:text-foreground/38 focus:outline-none focus:border-foreground/38 dark:border-white/[0.1] dark:bg-white/[0.03] dark:text-foreground/78 dark:placeholder:text-foreground/28 dark:focus:border-white/[0.2] transition-colors"
 										placeholder="you@example.com"
 									/>
 								</div>
@@ -178,7 +184,7 @@ function ApplyDialog({
 								<div className="space-y-1.5">
 									<label
 										htmlFor="careers-portfolio"
-										className="text-[9px] text-foreground/30 uppercase tracking-widest font-mono"
+										className="text-[9px] text-foreground/58 dark:text-foreground/48 uppercase tracking-widest font-mono"
 									>
 										Portfolio / GitHub
 									</label>
@@ -186,7 +192,7 @@ function ApplyDialog({
 										id="careers-portfolio"
 										type="url"
 										required
-										className="w-full bg-transparent border border-dashed border-foreground/[0.1] px-3 py-2 text-[12px] text-foreground/70 placeholder:text-foreground/20 focus:outline-none focus:border-foreground/25 transition-colors"
+										className="w-full border border-foreground/[0.15] bg-foreground/[0.025] px-3 py-2 text-[12px] text-foreground/88 placeholder:text-foreground/38 focus:outline-none focus:border-foreground/38 dark:border-white/[0.1] dark:bg-white/[0.03] dark:text-foreground/78 dark:placeholder:text-foreground/28 dark:focus:border-white/[0.2] transition-colors"
 										placeholder="https://"
 									/>
 								</div>
@@ -194,7 +200,7 @@ function ApplyDialog({
 								<div className="space-y-1.5">
 									<label
 										htmlFor="careers-why"
-										className="text-[9px] text-foreground/30 uppercase tracking-widest font-mono"
+										className="text-[9px] text-foreground/58 dark:text-foreground/48 uppercase tracking-widest font-mono"
 									>
 										Why Better Auth?
 									</label>
@@ -202,7 +208,7 @@ function ApplyDialog({
 										id="careers-why"
 										required
 										rows={3}
-										className="w-full bg-transparent border border-dashed border-foreground/[0.1] px-3 py-2 text-[12px] text-foreground/70 placeholder:text-foreground/20 focus:outline-none focus:border-foreground/25 transition-colors resize-none"
+										className="w-full border border-foreground/[0.15] bg-foreground/[0.025] px-3 py-2 text-[12px] text-foreground/88 placeholder:text-foreground/38 focus:outline-none focus:border-foreground/38 dark:border-white/[0.1] dark:bg-white/[0.03] dark:text-foreground/78 dark:placeholder:text-foreground/28 dark:focus:border-white/[0.2] transition-colors resize-none"
 										placeholder="Tell us why you want to join..."
 									/>
 								</div>
@@ -210,13 +216,13 @@ function ApplyDialog({
 								<div className="pt-2">
 									<button
 										type="submit"
-										className="inline-flex items-center gap-1.5 px-4 py-2 border border-foreground/[0.12] text-foreground/40 hover:text-foreground/70 hover:border-foreground/25 hover:bg-foreground/[0.02] transition-all"
+										className="inline-flex items-center gap-1.5 px-4 py-2 bg-foreground text-background hover:opacity-90 transition-all"
 									>
 										<span className="font-mono text-[10px] uppercase tracking-widest">
 											Submit Application
 										</span>
 										<svg
-											className="h-2.5 w-2.5 opacity-50"
+											className="h-2.5 w-2.5 opacity-80"
 											viewBox="0 0 10 10"
 											fill="none"
 										>
@@ -326,58 +332,60 @@ function RoleCard({
 				delay: 0.2 + index * 0.08,
 				ease: "easeOut",
 			}}
-			className="relative border border-dashed border-foreground/[0.08] hover:border-foreground/[0.14] transition-all duration-300 group"
+			className="group relative overflow-hidden border border-foreground/[0.1] bg-foreground/[0.018] shadow-sm shadow-black/[0.03] transition-all duration-300 hover:z-10 hover:-translate-y-px hover:border-foreground/[0.18] hover:bg-foreground/[0.03] hover:shadow-lg hover:shadow-black/[0.06] dark:border-white/[0.07] dark:bg-white/[0.015] dark:shadow-black/[0.2] dark:hover:border-white/[0.12] dark:hover:bg-white/[0.03] dark:hover:shadow-black/[0.35]"
 		>
+			<div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-foreground/18 to-transparent dark:via-white/[0.14]" />
+
 			{/* Corner marks */}
-			<span className="absolute top-2 left-2 text-[9px] font-mono text-foreground/15 select-none leading-none">
+			<span className="absolute top-2 left-2 text-[9px] font-mono text-foreground/22 dark:text-foreground/16 select-none leading-none">
 				+
 			</span>
-			<span className="absolute top-2 right-2 text-[9px] font-mono text-foreground/15 select-none leading-none">
+			<span className="absolute top-2 right-2 text-[9px] font-mono text-foreground/22 dark:text-foreground/16 select-none leading-none">
 				+
 			</span>
-			<span className="absolute bottom-2 left-2 text-[9px] font-mono text-foreground/15 select-none leading-none">
+			<span className="absolute bottom-2 left-2 text-[9px] font-mono text-foreground/22 dark:text-foreground/16 select-none leading-none">
 				+
 			</span>
-			<span className="absolute bottom-2 right-2 text-[9px] font-mono text-foreground/15 select-none leading-none">
+			<span className="absolute bottom-2 right-2 text-[9px] font-mono text-foreground/22 dark:text-foreground/16 select-none leading-none">
 				+
 			</span>
 
 			<div className="p-5 sm:p-6 space-y-4">
 				{/* Header */}
 				<div className="space-y-3">
-					<h3 className="text-sm sm:text-base text-foreground/90 tracking-tight">
+					<h3 className="text-sm sm:text-base text-foreground/92 dark:text-foreground/86 tracking-tight">
 						{role.title}
 					</h3>
 					<div className="flex items-center gap-2">
-						<span className="text-[8px] font-mono uppercase tracking-widest text-foreground/40 border border-dashed border-foreground/[0.1] px-1.5 py-0.5 leading-none">
+						<span className="border border-foreground/[0.14] bg-foreground/[0.03] px-1.5 py-0.5 text-[8px] font-mono uppercase tracking-widest text-foreground/58 dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-foreground/48 leading-none">
 							{role.type}
 						</span>
-						<span className="text-[8px] font-mono uppercase tracking-widest text-foreground/40 border border-dashed border-foreground/[0.1] px-1.5 py-0.5 leading-none">
+						<span className="border border-foreground/[0.14] bg-foreground/[0.03] px-1.5 py-0.5 text-[8px] font-mono uppercase tracking-widest text-foreground/58 dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-foreground/48 leading-none">
 							{role.location}
 						</span>
 					</div>
 				</div>
 
 				{/* Description */}
-				<p className="text-[11px] text-foreground/50 leading-relaxed max-w-lg">
+				<p className="max-w-lg text-[12px] leading-relaxed text-foreground/66 dark:text-foreground/56">
 					{role.description}
 				</p>
 
 				{/* Divider */}
-				<div className="border-t border-dashed border-foreground/[0.06]" />
+				<div className="border-t border-foreground/[0.08] dark:border-white/[0.06]" />
 
 				{/* Requirements */}
 				<div>
-					<p className="text-[9px] text-foreground/30 uppercase tracking-widest font-mono mb-3">
+					<p className="mb-3 text-[9px] font-mono uppercase tracking-[0.18em] text-foreground/52 dark:text-foreground/44">
 						Requirements
 					</p>
 					<ul className="space-y-2">
 						{role.requirements.map((req) => (
 							<li
 								key={req}
-								className="flex items-start gap-2 text-[11px] text-foreground/45 group-hover:text-foreground/55 transition-colors duration-300"
+								className="flex items-start gap-2 text-[11px] leading-relaxed text-foreground/56 transition-colors duration-300 group-hover:text-foreground/68 dark:text-foreground/48 dark:group-hover:text-foreground/60"
 							>
-								<span className="text-foreground/50 mt-px font-mono text-[9px] leading-none select-none shrink-0">
+								<span className="mt-px shrink-0 select-none font-mono text-[9px] leading-none text-foreground/60 dark:text-foreground/46">
 									+
 								</span>
 								<span>{req}</span>
@@ -391,13 +399,13 @@ function RoleCard({
 					<button
 						type="button"
 						onClick={onApply}
-						className="inline-flex items-center gap-1.5 px-3 py-1.5 border border-foreground/[0.12] text-foreground/40 hover:text-foreground/70 hover:border-foreground/25 hover:bg-foreground/[0.02] transition-all cursor-pointer"
+						className="inline-flex items-center gap-1.5 bg-foreground px-3.5 py-2 text-background transition-all hover:opacity-90 cursor-pointer"
 					>
 						<span className="font-mono text-[10px] uppercase tracking-widest">
 							Apply
 						</span>
 						<svg
-							className="h-2.5 w-2.5 opacity-50"
+							className="h-2.5 w-2.5 opacity-80"
 							viewBox="0 0 10 10"
 							fill="none"
 						>
@@ -503,7 +511,7 @@ export function CareersPageClient() {
 									# Open positions
 								</p>
 
-								<div className="space-y-0">
+								<div className="space-y-4">
 									{roles.map((role, i) => (
 										<RoleCard
 											key={role.title}