feat: add globe section with member hubs visualization and 3D hero card

next.config.ts

@@ -10,7 +10,6 @@ const nextConfig: NextConfig = {
       { hostname: "*.unsplash.com", protocol: "https" },
       { hostname: "avatars.githubusercontent.com", protocol: "https" },
       { hostname: "cdn.jsdelivr.net", protocol: "https" },
-      { hostname: "avatars.githubusercontent.com", protocol: "https" },
     ],
   },
 };

src/app/(public)/page.tsx

@@ -1,125 +1,59 @@
-"use client";
-
-import { motion, useMotionValue, useSpring } from "framer-motion";
-import { usePostHog } from "@posthog/react";
-import { useEffect, useRef } from "react";
-import Link from "next/link";
-
-import { Avatar, AvatarGroup, AvatarImage } from "@/components/ui/avatar";
-import { Button } from "@/components/ui/button";
-import { AVATARS, METRICS } from "@/constants";
 import { MembersSpotlightSection } from "@/features/members";
-
-const Page = () => {
-  const posthong = usePostHog();
-
-  const ref = useRef<HTMLDivElement>(null);
-  const rotateX = useMotionValue(0);
-  const rotateY = useMotionValue(0);
-  const springX = useSpring(rotateX, { stiffness: 200, damping: 20 });
-  const springY = useSpring(rotateY, { stiffness: 200, damping: 20 });
-
-  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
-    const el = ref.current;
-    if (!el) return;
-    const { left, top, width, height } = el.getBoundingClientRect();
-    const dx = (e.clientX - (left + width / 2)) / (width / 2);
-    const dy = (e.clientY - (top + height / 2)) / (height / 2);
-    rotateY.set(dx * 35);
-    rotateX.set(-dy * 35);
-  };
-
-  const handleMouseLeave = () => {
-    rotateX.set(0);
-    rotateY.set(0);
-  };
-
-  useEffect(() => {
-    posthong.capture("page_view");
-  }, [posthong]);
+import { getHomeData } from "@/features/github/server";
+import {
+  Community,
+  Cta,
+  GlobeSection,
+  Hero,
+  HowItWorks,
+  PageviewTracker,
+  Statement,
+  StatsStrip,
+} from "@/features/home";
+
+export const revalidate = 3600;
+
+export default async function Page() {
+  const data = await getHomeData();
 
   return (
-    <div className="w-screen">
-      <section
-        className="h-screen w-full sm:py-20"
-        onMouseMove={handleMouseMove}
-        onMouseLeave={handleMouseLeave}
-        ref={ref}
-        style={{ perspective: "600px" }}
-      >
-        <div className="mx-auto grid h-full max-w-7xl grid-cols-2 gap-6">
-          <div className="flex flex-col justify-center gap-y-5">
-            <div className="flex w-full items-center gap-x-4">
-              <AvatarGroup>
-                {AVATARS.map((avatar) => (
-                  <Avatar className="size-6" key={avatar.id}>
-                    <AvatarImage src={avatar.image} />
-                  </Avatar>
-                ))}
-              </AvatarGroup>
-              <p className="text-xs text-gray-400">
-                <span className="font-semibold text-black dark:text-white">500+</span> pros already inside — from over
-                50 companies & indie studios
-              </p>
-            </div>
-            <h1 className="text-4xl font-medium sm:text-8xl">Where pros actually hang out.</h1>
-            <p className="text-sm text-gray-400">
-              A members-only community for designers, engineers and builders shipping real things. No gurus, no generic
-              threads — just your people, a portfolio that doesn&apos;t suck, and the events you actually want to go
-              attend.
-            </p>
-            <div className="flex items-center gap-x-4">
-              <Button asChild size="xl">
-                <Link href="/join-community">Join Community</Link>
-              </Button>
-              <Button asChild size="xl" variant="outline">
-                <Link href="/sponsors">Become a Sponsor</Link>
-              </Button>
-            </div>
-          </div>
-          <div className="grid place-items-center" style={{ perspective: "600px" }}>
-            <motion.div
-              className="bg-main flex size-40 flex-col items-center justify-center gap-y-4 py-6"
-              style={{ rotateX: springX, rotateY: springY }}
-            ></motion.div>
-          </div>
+    <div className="w-full overflow-x-clip">
+      <PageviewTracker />
+      <section className="flex min-h-screen w-full items-center pt-40 pb-24 sm:pt-48">
+        <div className="mx-auto w-full max-w-5xl px-4">
+          <Hero faces={data.wall.slice(0, 6)} featured={data.featured} stats={data.stats} />
         </div>
       </section>
-      <section className="w-full py-10 sm:py-20">
-        <div className="mx-auto grid max-w-7xl grid-cols-4">
-          {METRICS.map((metric) => (
-            <div className="gap-y-y4 flex flex-col items-center text-center" key={metric.id}>
-              <h4 className="text-5xl font-medium">{metric.value}+</h4>
-              <p className="font-medium">{metric.label}</p>
-              <p className="text-sm text-gray-400">{metric.description}</p>
-            </div>
-          ))}
+      <section className="w-full py-28 sm:py-40">
+        <div className="mx-auto max-w-6xl px-4">
+          <StatsStrip stats={data.stats} />
         </div>
       </section>
-      <hr />
-      <section className="py-5 sm:py-10">
-        <div className="mx-auto max-w-7xl space-y-4">
-          <MembersSpotlightSection />
-        </div>
+      <section className="bg-panel w-full py-40 sm:py-56">
+        <Statement />
       </section>
-      <section className="py-5 sm:py-10">
-        <div className="mx-auto max-w-7xl space-y-4"></div>
+      <section className="w-full py-28 sm:py-44">
+        <div className="mx-auto max-w-7xl px-4">
+          <GlobeSection hubs={data.hubs} />
+        </div>
       </section>
-      <section className="py-5 sm:py-10">
-        <div className="mx-auto max-w-7xl space-y-4"></div>
+      <section className="w-full py-28 sm:py-44">
+        <div className="mx-auto max-w-7xl px-4">
+          <HowItWorks practiceRepo={data.practiceRepo} />
+        </div>
       </section>
-      <section className="bg-main relative flex min-h-100 items-center justify-center py-10 text-black sm:py-20">
-        <div className="mx-auto flex max-w-7xl flex-col items-center">
-          <h2 className="w-full text-center text-6xl font-medium sm:w-2/3">
-            Stop scrolling. Start <span className="italic">shipping</span> with people.
-          </h2>
+      <section className="w-full py-28 sm:py-44">
+        <div className="mx-auto max-w-7xl px-4">
+          <Community contributors={data.contributors} wall={data.wall} />
         </div>
       </section>
-      <section className="py-5 sm:py-10">
-        <div className="mx-auto flex max-w-7xl flex-col items-center"></div>
+      <section className="w-full py-16 sm:py-24">
+        <div className="mx-auto max-w-7xl px-4">
+          <MembersSpotlightSection />
+        </div>
       </section>
+      <Cta stats={data.stats} />
+      <section className=""></section>
     </div>
   );
-};
-
-export default Page;
+}

src/app/(public)/welcome/page.tsx

@@ -9,7 +9,7 @@ export const metadata: Metadata = {
   description: "Raise a pull request in the practice repo to activate your membership.",
 };
 
-const steps = [
+const STEPS = [
   {
     icon: GitPullRequest,
     title: "Open a pull request",
@@ -38,11 +38,10 @@ export default function Page() {
           you're in.
         </p>
       </div>
-
       <ol className="grid w-full gap-4 sm:grid-cols-3">
-        {steps.map(({ icon: Icon, title, body }, index) => (
+        {STEPS.map(({ icon: Icon, title, body }, index) => (
           <li key={title} className="border-border-default flex flex-col items-center gap-3 rounded-2xl border p-6">
-            <span className="bg-main/10 text-main grid size-10 place-items-center rounded-full">
+            <span className="bg-main/10 text-main grid size-10 place-items-center rounded-md">
               <Icon className="size-5" />
             </span>
             <h2 className="font-semibold">
@@ -52,7 +51,6 @@ export default function Page() {
           </li>
         ))}
       </ol>
-
       <div className="flex flex-col items-center gap-4 sm:flex-row">
         <a
           href={env.practiceRepoUrl}

src/app/globals.css

@@ -15,6 +15,10 @@
   --color-background: #ffffff;
   --color-foreground: #1a1a1a;
   --color-border-default: #e8e5dc;
+  --color-surface: #faf9f5;
+  --color-panel: #0c0c0a;
+  --color-panel-foreground: #fafaf7;
+  --color-muted-foreground: #8a8678;
 
   --radius: 8px;
 }
@@ -24,15 +28,23 @@
   --color-background: #ffffff;
   --color-foreground: #1a1a1a;
   --color-border-default: #e8e5dc;
+  --color-surface: #faf9f5;
+  --color-panel: #0c0c0a;
+  --color-panel-foreground: #fafaf7;
+  --color-muted-foreground: #8a8678;
 
-  --background-image-earth: url("/assets/images/earth.jpg");
+  --background-image-dot: url("/assets/images/dot-background.jpeg");
 }
 
 .dark {
   --color-main: #ffe34d;
   --color-background: #0a0a0a;
   --color-foreground: #fafaf7;
   --color-border-default: #2d2d2a;
+  --color-surface: #101010;
+  --color-panel: #101010;
+  --color-panel-foreground: #fafaf7;
+  --color-muted-foreground: #8f8c81;
 }
 
 @layer base {
@@ -129,6 +141,35 @@
   }
 }
 
+/* infinite avatar marquee */
+@keyframes marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+.marquee-track {
+  animation: marquee 60s linear infinite;
+  width: max-content;
+}
+
+.marquee-track-reverse {
+  animation-direction: reverse;
+}
+
+.marquee-track:hover {
+  animation-play-state: paused;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .marquee-track {
+    animation: none;
+  }
+}
+
 /* link interaction */
 .link {
   width: fit-content;

src/app/layout.tsx

@@ -33,7 +33,7 @@ export default function RootLayout({
             <PostHogProvider>
               <AuthProvider>
                 <AppProvider>
-                  <ThemeProvider attribute="class" defaultTheme="light">
+                  <ThemeProvider attribute="class" defaultTheme="dark">
                     {children}
                     <Toaster />
                   </ThemeProvider>

src/constants/index.ts

@@ -1,5 +1,3 @@
-export * from "./avatars";
 export * from "./library";
 export * from "./loader";
-export * from "./metrics";
 export * from "./sponsors";

src/env.d.ts

@@ -9,6 +9,7 @@ declare global {
       readonly NEXT_PUBLIC_POSTHOG_KEY?: string;
       readonly NEXT_PUBLIC_GITHUB_ORG?: string;
       readonly NEXT_PUBLIC_PRACTICE_REPO?: string;
+      readonly GITHUB_API_TOKEN?: string;
     }
   }
 }