refactor(epoch1000): enhance card layout and improve metadata descriptions

Author: h4rkl

apps/web/src/app/[locale]/epoch1000/card/page.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
-import Link from "next/link";
+import { Link } from "@workspace/i18n/routing";
+import Reveal from "@/components/epoch1000/Reveal";
 import { tierFor } from "@/lib/epoch1000/tiers";
 
 interface Props {
@@ -25,9 +26,10 @@ export async function generateMetadata({
   const sp = await searchParams;
   const survived = first(sp.s) || "0";
   const capped = first(sp.x) === "1";
+  const firstEpoch = first(sp.fe);
   const tier = tierFor(parseInt(survived, 10) || 0);
-  const title = `Epoch 1000 survivor card - ${tier.name}`;
-  const description = `Survived ${survived}${capped ? "+" : ""} Solana epochs. First seen in epoch ${first(sp.fe) || "?"}.`;
+  const title = `Epoch 1000 Survivor Card — ${tier.name}`;
+  const description = `Survived ${survived}${capped ? "+" : ""} of Solana's first 1,000 epochs${firstEpoch ? ` — on chain since epoch ${firstEpoch}` : ""}. ${tier.line}`;
   const image = `/api/epoch1000/og?${ogQuery(sp)}`;
   return {
     title,
@@ -49,34 +51,76 @@ export async function generateMetadata({
 export default async function CardPage({ searchParams }: Props) {
   const sp = await searchParams;
   const query = ogQuery(sp);
-  const survived = parseInt(first(sp.s), 10) || 0;
+  const survived = Math.max(0, parseInt(first(sp.s), 10) || 0);
   const capped = first(sp.x) === "1";
+  const firstEpoch = first(sp.fe);
+  const wallet = first(sp.w);
   const tier = tierFor(survived);
+  const survivedLabel = `${survived}${capped ? "+" : ""}`;
 
   return (
-    <main className="w-full max-w-3xl mx-auto px-5 sm:px-8 py-10 sm:py-16 flex flex-col gap-8 min-h-screen">
-      <h1 className="font-bold tracking-tight text-xl sm:text-2xl">
-        <span style={{ color: tier.color }}>{tier.name}</span> · survived{" "}
-        {survived}
-        {capped ? "+" : ""} epochs
-      </h1>
+    <main className="w-full max-w-3xl mx-auto px-5 sm:px-8 py-12 sm:py-20 flex flex-col items-center text-center gap-8 sm:gap-10 min-h-screen">
+      <header className="flex flex-col items-center gap-4 sm:gap-5">
+        <p className="font-brand-mono text-xs sm:text-sm tracking-[0.2em] text-ep-dust uppercase">
+          Solana mainnet · Epoch 1000
+        </p>
+        <h1
+          className="font-black tracking-tight text-4xl sm:text-6xl leading-none"
+          style={{ color: tier.color }}
+        >
+          {tier.name}
+        </h1>
+        <p className="text-sm sm:text-base text-ep-dim max-w-xl">
+          {wallet ? (
+            <span className="font-mono text-ep-ink">{wallet}</span>
+          ) : (
+            "This wallet"
+          )}{" "}
+          survived{" "}
+          <span className="font-semibold text-ep-ink">{survivedLabel}</span> of
+          Solana&apos;s first 1,000 epochs
+          {firstEpoch ? ` — on chain since epoch ${firstEpoch}` : ""}.
+        </p>
+      </header>
 
-      <img
-        src={`/api/epoch1000/og?${query}`}
-        alt={`Survivor card: ${tier.name}, survived ${survived} epochs on Solana`}
-        className="w-full rounded-lg border border-ep-edge"
-        width={1200}
-        height={630}
-      />
+      <Reveal className="w-full">
+        <img
+          src={`/api/epoch1000/og?${query}`}
+          alt={`Survivor card: ${tier.name}, survived ${survivedLabel} of Solana's first 1,000 epochs`}
+          className="w-full rounded-xl border border-ep-edge"
+          style={{ boxShadow: `0 20px 100px -30px ${tier.color}66` }}
+          width={1200}
+          height={630}
+        />
+      </Reveal>
 
-      <p className="text-sm text-ep-dim">{tier.line}</p>
+      <Reveal className="flex flex-col items-center gap-6 sm:gap-8">
+        <p className="text-sm text-ep-dim max-w-xl">
+          An epoch is roughly two days of uninterrupted Solana blocks — epoch
+          1000 marks over six years of mainnet without missing a beat. Every
+          survivor card shows how much of that history a wallet lived through.
+        </p>
 
-      <Link
-        href="/epoch1000#checker"
-        className="self-start bg-ep-ink text-ep-void font-semibold rounded-full px-7 py-3 text-sm hover:bg-ep-dim transition"
-      >
-        Check your own wallet
-      </Link>
+        <div className="flex flex-col items-center gap-3">
+          <div className="flex flex-wrap justify-center gap-3">
+            <Link
+              href="/epoch1000#checker"
+              className="bg-ep-ink text-ep-void font-semibold rounded-full px-7 py-3 text-sm hover:bg-ep-dim transition-colors duration-200"
+            >
+              Check your wallet
+            </Link>
+            <Link
+              href="/epoch1000"
+              className="border border-ep-edge rounded-full px-7 py-3 text-sm text-ep-dim hover:text-ep-ink transition-colors duration-200"
+            >
+              Explore the celebration
+            </Link>
+          </div>
+          <p className="text-xs text-ep-dust">
+            No connect. No signature. Just paste an address.
+          </p>
+        </div>
+      </Reveal>
     </main>
   );
 }

apps/web/src/app/api/epoch1000/og/route.tsx

@@ -107,7 +107,7 @@ export async function GET(req: Request) {
         flexDirection: "column",
         backgroundColor: "#000000",
         backgroundImage: `radial-gradient(ellipse 900px 500px at 85% -10%, ${tier.glow}55, transparent 70%)`,
-        padding: "56px 64px",
+        padding: "46px 64px",
         fontFamily: "DSemi",
         color: "#FFFFFF",
         boxSizing: "border-box",
@@ -147,7 +147,7 @@ export async function GET(req: Request) {
         style={{
           display: "flex",
           flexDirection: "column",
-          marginTop: 58,
+          marginTop: 34,
         }}
       >
         <div
@@ -190,7 +190,7 @@ export async function GET(req: Request) {
                 color: "#FFFFFF",
               }}
             >
-              EPOCHS
+              EPOCHS SURVIVED
             </span>
             <span
               style={{
@@ -200,7 +200,7 @@ export async function GET(req: Request) {
                 letterSpacing: "0.14em",
               }}
             >
-              SURVIVED
+              OF THE FIRST 1000
             </span>
           </div>
         </div>
@@ -210,12 +210,23 @@ export async function GET(req: Request) {
             fontSize: 26,
             color: "#B0B0B0",
             gap: 10,
-            marginTop: 16,
+            marginTop: 12,
           }}
         >
           <span style={{ color: "#757575" }}>First seen</span>
           <span style={{ fontWeight: 600 }}>{firstSeenLabel}</span>
         </div>
+        <div
+          style={{
+            display: "flex",
+            marginTop: 10,
+            fontSize: 27,
+            fontWeight: 600,
+            color: tier.color,
+          }}
+        >
+          {`"${tier.line}"`}
+        </div>
       </div>
 
       {/* thousand grid - github-contributions strip of square cells */}
@@ -225,7 +236,7 @@ export async function GET(req: Request) {
           justifyContent: "space-between",
           alignItems: "center",
           width: 1046,
-          marginTop: 62,
+          marginTop: 34,
           fontSize: 21,
         }}
       >
@@ -306,8 +317,10 @@ export async function GET(req: Request) {
         >
           {wallet || "Anonymous survivor"}
         </div>
-        <div style={{ display: "flex", color: "#757575" }}>
-          solana.com/epoch1000
+        <div style={{ display: "flex", gap: 10, color: "#757575" }}>
+          <span style={{ color: "#FFFFFF", fontWeight: 600 }}>Check yours</span>
+          <span>·</span>
+          <span>solana.com/epoch1000</span>
         </div>
       </div>
     </div>,