Merge pull request #35 from mobiera/feat/verana-lockups

feat(trust): real Verana lockups on the three bodies' cards, Playground button

Author: mjfelis

app/components/VeranaLockup.tsx

@@ -0,0 +1,47 @@
+/**
+ * The three Verana lockups, reproduced from the sister sites' own Nav
+ * components so the marks, wordmark typefaces and colors match:
+ *  - verana.io: gradient tile with a white bull-horn V, "Verana" in Space
+ *    Grotesk 700 (letter-spacing -0.03em).
+ *  - Verana Foundation: purple V with the green triangle, "Verana" +
+ *    "Foundation" in Inter 600 (-0.02em), "Foundation" in the Foundation's
+ *    purple.
+ *  - Verana Council: the V and both words in the ink color, Inter 600.
+ * The official mark files are kept in public/assets/logos/ for reference.
+ */
+const V_OUTER = "M26.9932 51.6972L5.805 11.0977L2.91263 16.2161L0 10.6048L5.98725 0L26.9932 40.2483L47.9993 0L54 10.6217L51.0773 16.2161L48.1849 11.0977L26.9932 51.6972Z";
+const V_INNER = "M13.696 0L26.9935 25.4637L39.9367 0H13.696Z";
+
+export type LockupVariant = "verana" | "foundation" | "council";
+
+const LABEL: Record<LockupVariant, string> = { verana: "Verana", foundation: "Verana Foundation", council: "Verana Council" };
+
+export default function VeranaLockup({ variant, size = 24 }: { variant: LockupVariant; size?: number }) {
+  return (
+    <span className={`lockup lockup-${variant}`} role="img" aria-label={LABEL[variant]}>
+      {variant === "verana" ? (
+        <svg width={size} height={size} viewBox="0 0 64 64" fill="none" aria-hidden="true">
+          <defs>
+            <linearGradient id="verana-mark-gradient" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
+              <stop offset="0%" stopColor="#763EF0" />
+              <stop offset="100%" stopColor="#9F7AEA" />
+            </linearGradient>
+          </defs>
+          <rect width="64" height="64" rx="12" fill="url(#verana-mark-gradient)" />
+          <g transform="translate(12.3 13.1) scale(0.7407)">
+            <path d={V_OUTER} fill="#fff" />
+            <path d={V_INNER} fill="#fff" />
+          </g>
+        </svg>
+      ) : (
+        <svg width={size} height={Math.round((size * 52) / 54)} viewBox="0 0 54 52" aria-hidden="true">
+          <path d={V_OUTER} fill={variant === "foundation" ? "#763EF0" : "currentColor"} />
+          <path d={V_INNER} fill={variant === "foundation" ? "#1FB57A" : "currentColor"} />
+        </svg>
+      )}
+      {variant === "verana" && <span className="lockup-grotesk" aria-hidden="true">Verana</span>}
+      {variant === "foundation" && <span className="lockup-inter" aria-hidden="true">Verana<span className="dot">Foundation</span></span>}
+      {variant === "council" && <span className="lockup-inter" aria-hidden="true">Verana<span>Council</span></span>}
+    </span>
+  );
+}

app/globals.css

@@ -45,6 +45,7 @@
   --glow: rgba(131, 83, 242, 0.28);
   --mark-fill: rgba(131, 83, 242, 0.06);
   --mark-stroke: rgba(131, 83, 242, 0.35);
+  --verana-purple: #a892ff; /* veranafoundation.org --color-purple, dark */
   --shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.7);
 }
 
@@ -68,6 +69,7 @@
   --glow: rgba(131, 83, 242, 0.16);
   --mark-fill: rgba(131, 83, 242, 0.05);
   --mark-stroke: rgba(131, 83, 242, 0.30);
+  --verana-purple: #763ef0; /* veranafoundation.org --color-purple, light */
   --shadow: 0 20px 50px -30px rgba(12, 18, 60, 0.5);
 }
 
@@ -237,6 +239,16 @@ a { color: inherit; }
 .pot-score i.off { background: var(--rule); }
 .pot-verdict { margin-left: auto; font-family: var(--font-display); font-weight: 600; color: var(--green-ink); }
 
+/* Verana lockups (marks and wordmarks as on the sister sites) ------------ */
+.lockup { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--ink); line-height: 1; }
+.lockup-grotesk { font-family: var(--font-space-grotesk), "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: -0.03em; font-size: 1.3rem; }
+.lockup-inter { font-family: var(--font-inter), "Inter", sans-serif; font-weight: 600; letter-spacing: -0.02em; font-size: 1.3rem; }
+.lockup-inter .dot { color: var(--verana-purple); }
+.btn-lockup { gap: 12px; padding-left: 12px; }
+.btn-lockup .lockup-grotesk { font-size: 1.05rem; }
+.btn-lockup > span:not(.lockup) { border-left: 1px solid var(--rule); padding-left: 12px; }
+.btn-lockup .arrow { border-left: 0; padding-left: 0; }
+
 /* Logos ------------------------------------------------------------------- */
 /* The customer and partner logos are white artwork on transparent grounds
    (carried over from the old site, which showed them on its navy footer).

app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { IBM_Plex_Mono, Manrope, Sora } from "next/font/google";
+import { IBM_Plex_Mono, Inter, Manrope, Sora, Space_Grotesk } from "next/font/google";
 import "@fortawesome/fontawesome-svg-core/styles.css";
 import { config as faConfig } from "@fortawesome/fontawesome-svg-core";
 import "./globals.css";
@@ -14,6 +14,9 @@ import { SITE_DESCRIPTION, SITE_NAME, SITE_TAGLINE, SITE_URL } from "./lib/site"
 const sora = Sora({ subsets: ["latin"], weight: ["500", "600", "700"], variable: "--font-sora", display: "swap" });
 const manrope = Manrope({ subsets: ["latin"], weight: ["400", "500", "600"], variable: "--font-manrope", display: "swap" });
 const plexMono = IBM_Plex_Mono({ subsets: ["latin"], weight: ["400", "500"], variable: "--font-plex-mono", display: "swap" });
+// Wordmark faces of the Verana sites, used only by the VeranaLockup component.
+const inter = Inter({ subsets: ["latin"], weight: ["600"], variable: "--font-inter", display: "swap" });
+const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], weight: ["700"], variable: "--font-space-grotesk", display: "swap" });
 
 export const metadata: Metadata = {
   metadataBase: new URL(SITE_URL),
@@ -38,7 +41,7 @@ const themeInitScript = `
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" data-theme="dark" suppressHydrationWarning className={`${sora.variable} ${manrope.variable} ${plexMono.variable}`}>
+    <html lang="en" data-theme="dark" suppressHydrationWarning className={`${sora.variable} ${manrope.variable} ${plexMono.variable} ${inter.variable} ${spaceGrotesk.variable}`}>
       <head>
         <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
       </head>

app/trust/page.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { faCertificate, faDiagramProject, faHandshake, faHeadset, faMobileScreen, faSitemap } from "@fortawesome/free-solid-svg-icons";
+import VeranaLockup from "@/app/components/VeranaLockup";
 import { ButtonLink, Card, CardTitle, Chips, CtaBand, Feature, MoreLink, PageHero, Section } from "@/app/components/ui";
 import { TRUST_STANDARDS } from "@/app/lib/content";
 import { LINKS } from "@/app/lib/site";
@@ -43,7 +44,11 @@ export default function Page() {
       </Section>
 
       <Section eyebrow="What Verana is, in one paragraph" lead="Verana is the open, public, neutral trust infrastructure for the internet, in three parts: sovereign trust ecosystems that define who is accredited to issue and verify credentials; verifiable identity, where a service, a person or an AI agent proves who is behind it before any connection; and the Trust Graph, which makes services discoverable by the credentials they hold. Open source, owned by no one.">
-        <ButtonLink href={LINKS.verana}>Read more on verana.io</ButtonLink>
+        <a href={LINKS.verana} className="btn btn-lockup" rel="noopener">
+          <VeranaLockup variant="verana" size={22} />
+          <span>Read more on verana.io</span>
+          <span className="arrow" aria-hidden="true">→</span>
+        </a>
       </Section>
 
       <Section eyebrow="Use cases we lead with">

app/trust/services/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { faIdCard, faServer, faSitemap, faWallet } from "@fortawesome/free-solid-svg-icons";
 import { ButtonLink, CtaBand, Feature, PageHero, Section, Steps } from "@/app/components/ui";
+import { LINKS } from "@/app/lib/site";
 
 export const metadata: Metadata = {
   title: "Trust services",
@@ -13,6 +14,7 @@ export default function Page() {
     <>
       <PageHero eyebrow="Trust services" title="From governance framework to production issuer." lead="We design the ecosystem, deploy the verifiable services, integrate the wallets, and run what you do not want to run yourself.">
         <ButtonLink href="/contact?topic=trust" variant="primary">Talk to us</ButtonLink>
+        <ButtonLink href={LINKS.playground}>Playground</ButtonLink>
       </PageHero>
 
       <Section>

app/trust/verana/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
-import { faGavel, faGlobe, faGraduationCap, faLandmark, faTowerCell, faUsers } from "@fortawesome/free-solid-svg-icons";
-import { ButtonLink, Card, CardTitle, CtaBand, Feature, PageHero, Section } from "@/app/components/ui";
+import { faGraduationCap, faTowerCell, faUsers } from "@fortawesome/free-solid-svg-icons";
+import VeranaLockup from "@/app/components/VeranaLockup";
+import { ButtonLink, Card, CtaBand, Feature, PageHero, Section } from "@/app/components/ui";
 import { LINKS } from "@/app/lib/site";
 
 export const metadata: Metadata = {
@@ -21,17 +22,17 @@ export default function Page() {
       <Section eyebrow="Three bodies, three sites" lead="Mobiera's site describes Mobiera's role. For the protocol itself, read those three.">
         <div className="grid-3">
           <Card>
-            <CardTitle icon={faLandmark}>Verana Foundation</CardTitle>
+            <h3 className="card-title"><VeranaLockup variant="foundation" /></h3>
             <p className="text-muted">The steward. Specifications, software, membership, working groups.</p>
             <a className="more" href={LINKS.foundation} rel="noopener">veranafoundation.org ↗</a>
           </Card>
           <Card>
-            <CardTitle icon={faGavel}>Verana Council</CardTitle>
+            <h3 className="card-title"><VeranaLockup variant="council" /></h3>
             <p className="text-muted">The governor. A non-profit Swiss association that governs and secures the live network and its ECS Ecosystem, one member one vote.</p>
             <a className="more" href={LINKS.council} rel="noopener">veranacouncil.org ↗</a>
           </Card>
           <Card>
-            <CardTitle icon={faGlobe}>verana.io</CardTitle>
+            <h3 className="card-title"><VeranaLockup variant="verana" /></h3>
             <p className="text-muted">The network and its software. Documentation, the Playground, the roadmap.</p>
             <a className="more" href={LINKS.verana} rel="noopener">verana.io ↗</a>
           </Card>

public/assets/logos/verana-io.svg

@@ -9,7 +9,7 @@ url: /trust/services
 We design the ecosystem, deploy the verifiable services, integrate the wallets,
 and run what you do not want to run yourself.
 
-> CTA: Talk to us → /contact?topic=trust
+> CTA: Talk to us → /contact?topic=trust · Playground → https://playground.testnet.verana.network/
 
 ## Ecosystem design and governance
 

public/assets/logos/verana-mark.svg

@@ -56,7 +56,7 @@ agent proves who is behind it before any connection; and the Trust Graph, which
 makes services discoverable by the credentials they hold. Open source, owned by
 no one.
 
-> CTA: Read more on verana.io → https://verana.io
+> CTA: Read more on verana.io → https://verana.io (button carries the verana.io lockup: gradient tile, white V, "Verana" in Space Grotesk)
 
 ## Use cases we lead with