From af85a6685d9ab4ef71ba6e717738de35caedf2f5 Mon Sep 17 00:00:00 2001
From: Taesu <166604494+bytaesu@users.noreply.github.com>
Date: Wed, 18 Mar 2026 19:36:57 +0900
Subject: [PATCH] docs: polish community page UX (#8673)

---
 landing/app/community/community-client.tsx | 43 ++++++++--------------
 1 file changed, 15 insertions(+), 28 deletions(-)

diff --git a/landing/app/community/community-client.tsx b/landing/app/community/community-client.tsx
index a9847131ef..c2f01b9b2d 100644
--- a/landing/app/community/community-client.tsx
+++ b/landing/app/community/community-client.tsx
@@ -205,7 +205,7 @@ const platforms = [
 function CommunityHero({ stats }: { stats: CommunityStats }) {
 	return (
 		<motion.div
-			initial={{ opacity: 0, y: 12 }}
+			initial={false}
 			animate={{ opacity: 1, y: 0 }}
 			transition={{ duration: 0.5, ease: "easeOut" }}
 			className="relative w-full pt-6 md:pt-10 pb-6 lg:pb-0 flex flex-col justify-center lg:h-full"
@@ -235,7 +235,7 @@ function CommunityHero({ stats }: { stats: CommunityStats }) {
 						<p className="text-sm font-light text-foreground/80 tabular-nums">
 							{formatNumber(stats.npmDownloads)}
 							<span className="text-[9px] text-foreground/50 font-mono">
-								/mo
+								/year
 							</span>
 						</p>
 					</div>
@@ -266,7 +266,7 @@ function CommunityHero({ stats }: { stats: CommunityStats }) {
 					].map((item, i) => (
 						<motion.div
 							key={item.label}
-							initial={{ opacity: 0, x: -8 }}
+							initial={false}
 							animate={{ opacity: 1, x: 0 }}
 							transition={{
 								duration: 0.25,
@@ -284,19 +284,6 @@ function CommunityHero({ stats }: { stats: CommunityStats }) {
 						</motion.div>
 					))}
 				</div>
-
-				{/* CTA */}
-				<div className="flex items-center gap-3 pt-1">
-					<Link
-						href="https://github.com/better-auth/better-auth"
-						target="_blank"
-						rel="noreferrer"
-						className="inline-flex items-center gap-1.5 px-5 py-2 bg-foreground text-background text-sm font-medium hover:opacity-90 transition-colors"
-					>
-						<GitHubIcon className="w-4 h-4" />
-						<span className="ml-1">Star on GitHub</span>
-					</Link>
-				</div>
 			</div>
 		</motion.div>
 	);
@@ -317,7 +304,7 @@ function StatCard({
 }) {
 	return (
 		<motion.div
-			initial={{ opacity: 0, y: 10 }}
+			initial={false}
 			animate={{ opacity: 1, y: 0 }}
 			transition={{ duration: 0.3, delay: 0.1 + index * 0.06, ease: "easeOut" }}
 			className="relative border border-dashed border-foreground/[0.08] hover:border-foreground/[0.14] transition-all duration-300 group"
@@ -329,13 +316,13 @@ function StatCard({
 						{label}
 					</span>
 				</div>
-				<div className="flex items-baseline gap-2">
+				<div>
 					<span className="text-4xl font-light text-foreground tabular-nums">
 						<AnimatedCounter value={value} />
 					</span>
-					<span className="text-[10px] text-foreground/30 font-mono">
+					<p className="text-[10px] text-foreground/40 font-mono mt-1">
 						{subtext}
-					</span>
+					</p>
 				</div>
 			</div>
 		</motion.div>
@@ -353,7 +340,7 @@ function PlatformCard({
 
 	return (
 		<motion.div
-			initial={{ opacity: 0, y: 10 }}
+			initial={false}
 			animate={{ opacity: 1, y: 0 }}
 			transition={{ duration: 0.3, delay: 0.2 + index * 0.06, ease: "easeOut" }}
 			className="relative border border-dashed border-foreground/[0.08] hover:border-foreground/[0.14] transition-all duration-300 group"
@@ -388,7 +375,7 @@ function PlatformCard({
 					rel="noreferrer"
 					className="block"
 				>
-					<div className="w-full py-2.5 text-center border flex items-center justify-center border-dashed border-foreground/[0.12] text-foreground/50 hover:text-foreground/80 hover:border-foreground/25 hover:bg-foreground/[0.02] transition-all cursor-pointer">
+					<div className="w-full py-2.5 text-center border flex items-center justify-center border-dashed border-foreground/20 text-foreground/70 hover:text-foreground/90 hover:border-foreground/30 hover:bg-foreground/5 transition-all cursor-pointer">
 						<span className="font-mono text-[10px] uppercase tracking-widest">
 							{platform.cta}
 						</span>
@@ -423,11 +410,11 @@ export function CommunityPageClient({ stats }: { stats: CommunityStats }) {
 
 							{/* Section: Statistics */}
 							<motion.div
-								initial={{ opacity: 0, y: 6 }}
+								initial={false}
 								animate={{ opacity: 1, y: 0 }}
 								transition={{ duration: 0.3, delay: 0.05 }}
 							>
-								<p className="text-[10px] uppercase tracking-widest text-foreground/30 font-mono mb-5">
+								<p className="text-[10px] uppercase tracking-widest text-foreground/60 font-mono mb-5">
 									# In Numbers
 								</p>
 
@@ -465,11 +452,11 @@ export function CommunityPageClient({ stats }: { stats: CommunityStats }) {
 
 							{/* Section: Platforms */}
 							<motion.div
-								initial={{ opacity: 0 }}
+								initial={false}
 								animate={{ opacity: 1 }}
 								transition={{ duration: 0.4, delay: 0.25 }}
 							>
-								<p className="text-[10px] uppercase tracking-widest text-foreground/30 font-mono mb-5">
+								<p className="text-[10px] uppercase tracking-widest text-foreground/60 font-mono mb-5">
 									# Join Us On
 								</p>
 
@@ -486,7 +473,7 @@ export function CommunityPageClient({ stats }: { stats: CommunityStats }) {
 
 							{/* Merch */}
 							<motion.div
-								initial={{ opacity: 0, y: 6 }}
+								initial={false}
 								animate={{ opacity: 1, y: 0 }}
 								transition={{ duration: 0.3, delay: 0.35 }}
 							>
@@ -494,7 +481,7 @@ export function CommunityPageClient({ stats }: { stats: CommunityStats }) {
 									href="https://better-merch.dev"
 									target="_blank"
 									rel="noreferrer"
-									className="flex items-center justify-between w-full px-5 py-4 border border-dashed border-foreground/[0.08] hover:border-foreground/[0.14] hover:bg-foreground/[0.02] transition-all group"
+									className="flex items-center justify-between w-full px-5 py-4 border border-dashed border-foreground/20 hover:border-foreground/30 hover:bg-foreground/5 transition-all group"
 								>
 									<div className="flex items-center gap-2.5">
 										<svg