From bed68259bc28ec0bf610f6b7d9a8ee15dc079216 Mon Sep 17 00:00:00 2001 From: Melvin Jones Repol Date: Thu, 27 Aug 2026 10:22:59 +0800 Subject: [PATCH 1/3] feat: improve homepage layout and responsiveness --- app/components/landing-page/LosserMembers.tsx | 10 +- .../landing-page/RecentLeaderboard.tsx | 96 ++--------- app/components/landing-page/TopLeaderbord.tsx | 33 ++-- app/components/landing-page/VibeCoders.tsx | 158 ++++++++--------- app/page.tsx | 163 ++++++++---------- 5 files changed, 175 insertions(+), 285 deletions(-) diff --git a/app/components/landing-page/LosserMembers.tsx b/app/components/landing-page/LosserMembers.tsx index ddad6a5..1971a42 100644 --- a/app/components/landing-page/LosserMembers.tsx +++ b/app/components/landing-page/LosserMembers.tsx @@ -23,15 +23,9 @@ export default function LosserMembers({ return ( <> {losser_members && losser_members.length > 0 && ( -
+
-

- Team Insight -

Lower Activity Leaderboard

@@ -80,7 +74,7 @@ export default function LosserMembers({
diff --git a/app/components/landing-page/RecentLeaderboard.tsx b/app/components/landing-page/RecentLeaderboard.tsx index 23c0d75..4fd3d47 100644 --- a/app/components/landing-page/RecentLeaderboard.tsx +++ b/app/components/landing-page/RecentLeaderboard.tsx @@ -18,15 +18,9 @@ export default function RecentLeaderboard({ return ( <> {leaderboards && leaderboards.length > 0 && ( -
+
-

- Board Arena -

Active Leaderboards

@@ -35,20 +29,6 @@ export default function RecentLeaderboard({ coding consistency.

-
- - {leaderboards.length} active boards - - - Create yours - - → - - -
{featuredBoard && ( @@ -56,42 +36,16 @@ export default function RecentLeaderboard({ href={`/leaderboard/${featuredBoard.slug}`} className="block glass-card rounded-3xl border-gray-200 bg-gray-50 p-6 mb-4 group hover:border-blue-500/20 transition-colors" > -
-
- - Featured Arena - -

- {featuredBoard.name} -

-

- Most recently launched board with open competition access. -

-
-
-
-

- Status -

-

- Live -

-
-
-

- Access -

-

Public

-
-
-

- Action -

-

- Enter -

-
-
+
+ + Featured Leaderboard + +

+ {featuredBoard.name} +

+

+ Most recently launched board with open competition access. +

)} @@ -106,19 +60,14 @@ export default function RecentLeaderboard({ key={board.id} href={`/leaderboard/${board.slug}`} className="rounded-2xl glass-card border-gray-200 bg-gray-50 p-4 group hover:bg-white/[0.035] hover:border-blue-500/20 transition-all" - + data-aos-delay={(i * 60).toString()} > -
- - Arena #{i + 2} - - - Open - -
+ + Leaderboard #{i + 2} + -

+

{board.name}

@@ -129,14 +78,9 @@ export default function RecentLeaderboard({ />
-
- - /leaderboard/{board.slug} - - - Enter → - -
+ + /leaderboard/{board.slug} + ), )} @@ -165,8 +109,6 @@ export default function RecentLeaderboard({ Join with invite code
- -
)} diff --git a/app/components/landing-page/TopLeaderbord.tsx b/app/components/landing-page/TopLeaderbord.tsx index efa5986..fee086a 100644 --- a/app/components/landing-page/TopLeaderbord.tsx +++ b/app/components/landing-page/TopLeaderbord.tsx @@ -4,7 +4,7 @@ import { BADGE_LEGEND_HOURS, getBadgeInfoFromHours } from "@/app/utils/badge"; export interface TopMember { email: string; total_seconds: number; - categories: { name: string; total_seconds: number }[] | null; + categories: { name: string; total_seconds: number; percent: number }[] | null; user_id: string | null; } @@ -44,26 +44,15 @@ export default function TopLeaderboard({ return ( <> {top_members && top_members.length > 0 && ( -
-
-
-

- Real Leaderboard -

-

- Top Developers of the Week -

-

- Ranked by weekly coding time with clear podium cutoffs and - progress to the top. -

-
-
- {rankedTopMembers.length} ranked developers -
+
+
+

+ Top Developers of the Week +

+

+ Ranked by weekly coding time with clear podium cutoffs and + progress to the top. +

@@ -93,7 +82,7 @@ export default function TopLeaderboard({
c.name === "AI Coding"); + return aiCategory ? Math.round(aiCategory.percent) : 0; +} + export default function VibeCoders({ vibe_coders, }: { vibe_coders: TopMember[]; }) { + if (!vibe_coders || vibe_coders.length === 0) { + return null; + } + const visibleVibeCoders = vibe_coders.slice(0, 6); return ( - <> - {vibe_coders && vibe_coders.length > 0 && ( -
-
-
-

- AI Category -

-

- Vibe Coders Leaderboard -

-

- Snapshot of developers investing the most time in AI Coding. -

-
- - AI coding signal - -
- {(!vibe_coders || vibe_coders.length === 0) && ( -
- No AI coding activity recorded yet. -
- )} -
-
-

- Category Focus -

-

- Prompt-to-Code Rhythm -

-

- Measure how teams are adopting AI tooling without losing coding - consistency and technical depth. -

-
+
+
+

+ Agentic Coders +

+

+ A snapshot of developers investing the most time in Agentic Coding. +

+
-
- {visibleVibeCoders.map( - ( - member: { email: string; total_seconds: number }, - i: number, - ) => ( -
-
-
- - #{i + 1} - - - {member.email.split("@")[0]} - -
- - {formatDuration(member.total_seconds)} - -
+
+
+

+ Prompt-to-Code Rhythm +

+

+ Measure how teams are adopting AI tooling without losing coding + consistency and technical depth. +

+
-
-
-
+
+ {visibleVibeCoders.map((member, i) => { + const pct = getAiCodingPercent(member); -

- AI coding contribution -

-
- ), - )} -
-
- - Note: Values represent tracked time inside the AI Coding category. - + return ( +
+
+
+ + #{i + 1} + + + {member.email.split("@")[0]} + +
+ + {formatDuration(member.total_seconds)} + +
-
-
- )} - +
+

+ AI coding contribution +

+ + {pct}% + +
+
+
+
+ + ); + })} +
+
+
); } diff --git a/app/page.tsx b/app/page.tsx index 43c256f..5603ec6 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -13,6 +13,7 @@ import VibeCoders from "./components/landing-page/VibeCoders"; import Nav from "./components/layout/Nav"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { + faArrowDown, faBolt, faLock, faStar, @@ -137,13 +138,11 @@ export default async function Home() {