feat(cripto): Community Org build page — blueprint header and honest client-work copy

Blueprint header (deep blue, technical-drawing grid) for the built-from-
scratch story. Copy rewritten from the real repo: the stack is Vite/React/
TS/SCSS/Tailwind (was wrongly listed as Next.js), the project is
commissioned client work delivered end to end, with the redesign-via-
refactor arc, conversion flows (WhatsApp/Calendly), learned section and
evidence slots for before/after screenshots. Meta becomes CLIENT WORK.

Author: louzoshi

app/cripto/_data.ts

@@ -50,7 +50,7 @@ export type BuildPr = {
 // Optional per-build detail treatment. Only skatehive uses it today; the other
 // builds render the plain (paper) header. Keeps the shared component generic.
 export type BuildFlavor = {
-  header?: "matrix" | "noggles"; // special header treatment (else plain paper)
+  header?: "matrix" | "noggles" | "blueprint"; // special header treatment (else plain paper)
   titleParts?: [string, string]; // two-font split, e.g. ["Skate", "Hive"]
   poweredBy?: "hive" | "nouns"; // subtle "Built on X / Powered by X" glyph line
   evidenceSlots?: number; // number of empty media slots when `media` is empty
@@ -154,12 +154,17 @@ export const contributions: Contribution[] = [
     index: "02",
     slug: "community-org",
     title: "Community Org",
-    meta: "PLATFORM · 2025",
+    meta: "CLIENT WORK · 2025",
     role: "dev",
     href: "https://community-org-beta.vercel.app/",
     accent: "--c-blue",
     font: "mono",
-    stack: ["Next.js", "TypeScript", "Vercel"],
+    stack: ["Vite", "React", "TypeScript", "SCSS", "Tailwind", "Vercel"],
+    flavor: {
+      header: "blueprint",
+      titleParts: ["Community ", "Org"],
+      evidenceSlots: 3, // before / after screenshots of the redesign
+    },
   },
   {
     index: "03",

app/cripto/_i18n.ts

@@ -78,10 +78,17 @@ const en = {
       },
       "community-org": {
         overview:
-          "Website for Community Org, a tech company connecting communities and organizations through digital solutions.",
+          "Commissioned website for Community Org, a tech company connecting communities and organizations. Built solo, end to end, and delivered to the client — this deploy is the live demo.",
         points: [
-          "Built the site with Next.js and TypeScript",
-          "Responsive UI and deploy on Vercel",
+          "Built the entire site from scratch (0→1) with Vite, React and TypeScript",
+          "Implemented a full redesign through a structured refactor — new visual system, same product",
+          "Conversion flows: plan modals with WhatsApp contact and Calendly scheduling",
+          "Dark mode, scroll-triggered animations and mobile-first UX",
+        ],
+        learned: [
+          "Owning a product end to end — architecture, UI, deploy and months of iteration",
+          "Turning a redesign into code: refactoring a working codebase without breaking it",
+          "Conversion-focused UI — scheduling and chat entry points that turn visits into contacts",
         ],
       },
       gnars: {
@@ -210,10 +217,17 @@ const pt: CriptoDictionary = {
       },
       "community-org": {
         overview:
-          "Site da Community Org, empresa de tecnologia que conecta comunidades e organizações por meio de soluções digitais.",
+          "Site sob encomenda para a Community Org, empresa de tecnologia que conecta comunidades e organizações. Construído solo, de ponta a ponta, e entregue ao cliente — este deploy é a demo ao vivo.",
         points: [
-          "Desenvolvi o site com Next.js e TypeScript",
-          "UI responsiva e deploy na Vercel",
+          "Construí o site inteiro do zero (0→1) com Vite, React e TypeScript",
+          "Implementei um redesign completo via refatoração estruturada — novo sistema visual, mesmo produto",
+          "Fluxos de conversão: modais de planos com contato via WhatsApp e agendamento Calendly",
+          "Dark mode, animações on-scroll e UX mobile-first",
+        ],
+        learned: [
+          "Ser dono de um produto de ponta a ponta — arquitetura, UI, deploy e meses de iteração",
+          "Transformar um redesign em código: refatorar uma base funcionando sem quebrá-la",
+          "UI focada em conversão — agendamento e canais de contato que transformam visita em lead",
         ],
       },
       gnars: {

app/cripto/builds/[slug]/BuildDetail.tsx

@@ -189,6 +189,46 @@ export default function BuildDetail({ slug }: { slug: BuildSlug }) {
                 {b.dragHint}
               </span>
             </div>
+          ) : flavor?.header === "blueprint" ? (
+            /* deep-blue "blueprint" header — Community Org flavor (built from scratch) */
+            <div className="relative isolate overflow-hidden p-6 md:p-10 min-h-[240px] md:min-h-[300px] flex flex-col justify-end bg-[#16255e]">
+              {/* technical drawing grid: fine cells + stronger guide lines */}
+              <div
+                aria-hidden
+                className="absolute inset-0 -z-10"
+                style={{
+                  backgroundImage: [
+                    "linear-gradient(rgba(245,242,233,0.07) 1px, transparent 1px)",
+                    "linear-gradient(90deg, rgba(245,242,233,0.07) 1px, transparent 1px)",
+                    "linear-gradient(rgba(245,242,233,0.13) 1px, transparent 1px)",
+                    "linear-gradient(90deg, rgba(245,242,233,0.13) 1px, transparent 1px)",
+                  ].join(","),
+                  backgroundSize: "24px 24px, 24px 24px, 120px 120px, 120px 120px",
+                }}
+              />
+              {/* bottom fade so the title reads cleanly */}
+              <div className="absolute inset-0 -z-10 bg-gradient-to-t from-[#16255e] via-transparent to-transparent" />
+
+              <div className="flex items-center gap-4">
+                <span className="c-mono text-[13px] text-[var(--c-white)]/50">
+                  {build.index}
+                </span>
+                <span className="c-mono text-[10px] tracking-[0.14em] uppercase text-[var(--c-white)]/50">
+                  {metaLine}
+                </span>
+              </div>
+
+              <h1
+                className={`mt-4 text-[clamp(36px,8vw,80px)] leading-[0.95] ${fontClass[build.font]}`}
+              >
+                <span className="text-[var(--c-white)]">
+                  {flavor.titleParts?.[0] ?? build.title}
+                </span>
+                {flavor.titleParts?.[1] && (
+                  <span className="text-[#8fa5ff]">{flavor.titleParts[1]}</span>
+                )}
+              </h1>
+            </div>
           ) : (
             /* default paper header */
             <div className="p-6 md:p-10 bg-[var(--c-paper)]">