From 180ce1e6805c3af7536d03a985fe5638ccc6f4f2 Mon Sep 17 00:00:00 2001
From: Z <219363113+Z-kie@users.noreply.github.com>
Date: Thu, 26 Mar 2026 16:07:38 -0400
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20apply=20full=20gold=20theme=20to=20?=
 =?UTF-8?q?authichain.com=20=E2=80=94=20remove=20purple,=20add=20gold=20ca?=
 =?UTF-8?q?rds/nav/CTA/footer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/globals.css | 220 +++++++++++++++++++++++++------
 app/page.tsx    | 340 +++++++++++++++++-------------------------------
 2 files changed, 299 insertions(+), 261 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 94787a5..2118c08 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -10,94 +10,234 @@
         --foreground: 0 0% 93%;
         --card: 0 0% 7%;
         --card-foreground: 0 0% 93%;
+        --card-border: 0 0% 14%;
         --popover: 0 0% 7%;
         --popover-foreground: 0 0% 93%;
-        --primary: 43 80% 47%; /* Gold - matches qron.space */
-    --primary-foreground: 0 0% 5%;
+        --popover-border: 0 0% 14%;
+        --primary: 43 74% 47%;
+        --primary-foreground: 0 0% 5%;
+        --primary-border: rgba(201,162,39,0.4);
         --secondary: 0 0% 10%;
         --secondary-foreground: 0 0% 93%;
+        --secondary-border: rgba(255,255,255,0.1);
         --muted: 0 0% 10%;
         --muted-foreground: 0 0% 53%;
-        --accent: 43 80% 47%; /* Gold */
-    --accent-foreground: 0 0% 5%;
+        --muted-border: rgba(255,255,255,0.08);
+        --accent: 43 74% 47%;
+        --accent-foreground: 0 0% 5%;
+        --accent-border: rgba(201,162,39,0.3);
         --destructive: 0 84.2% 60.2%;
         --destructive-foreground: 0 0% 98%;
-        --border: 0 0% 17%;
-        --input: 0 0% 17%;
-        --ring: 43 80% 47%;
-        --gold: 43 80% 47%;
-        --gold-light: 45 90% 60%;
-        --gold-foreground: 0 0% 5%;
+        --destructive-border: rgba(255,68,68,0.4);
+        --border: 0 0% 14%;
+        --input: 0 0% 12%;
+        --ring: 43 74% 47%;
+        --gold: #c9a227;
+        --gold-light: #e8c547;
+        --gold-glow: #ffd700;
+        --gold-dim: #7a6116;
+        --gold-muted: rgba(201,162,39,0.12);
+        --gold-border: rgba(201,162,39,0.28);
+        --steel: #9e9e9e;
+        --steel-light: #c8c8c8;
+        --steel-dark: #3a3a3a;
+        --steel-deeper: #1c1c1c;
+        --surface-1: #111111;
+        --surface-2: #161616;
+        --surface-3: #1e1e1e;
         --radius: 0.5rem;
+        --chart-1: 43 74% 47%;
+        --chart-2: 45 90% 60%;
+        --chart-3: 38 65% 40%;
+        --chart-4: 0 0% 53%;
+        --chart-5: 0 0% 30%;
+        --sidebar: 0 0% 6%;
+        --sidebar-foreground: 0 0% 80%;
+        --sidebar-border: 0 0% 14%;
+        --sidebar-ring: 43 74% 47%;
+        --sidebar-primary: 43 74% 47%;
+        --sidebar-primary-foreground: 0 0% 5%;
+        --sidebar-accent: 0 0% 10%;
+        --sidebar-accent-foreground: 0 0% 80%;
+        --sidebar-primary-border: rgba(201,162,39,0.3);
+        --sidebar-accent-border: rgba(201,162,39,0.15);
     }
     .dark {
         --background: 0 0% 4%;
         --foreground: 0 0% 93%;
         --card: 0 0% 7%;
         --card-foreground: 0 0% 93%;
-        --popover: 0 0% 7%;
-        --popover-foreground: 0 0% 93%;
-        --primary: 43 80% 47%;
+        --primary: 43 74% 47%;
         --primary-foreground: 0 0% 5%;
         --secondary: 0 0% 10%;
         --secondary-foreground: 0 0% 93%;
         --muted: 0 0% 10%;
         --muted-foreground: 0 0% 53%;
-        --accent: 43 80% 47%;
+        --accent: 43 74% 47%;
         --accent-foreground: 0 0% 5%;
         --destructive: 0 62.8% 30.6%;
         --destructive-foreground: 0 0% 98%;
-        --border: 0 0% 17%;
-        --input: 0 0% 17%;
-        --ring: 43 80% 47%;
+        --border: 0 0% 14%;
+        --input: 0 0% 12%;
+        --ring: 43 74% 47%;
     }
 }
 
 @layer base {
-    * {
-        @apply border-border;
-    }
+    * { @apply border-border; }
     body {
         @apply bg-background text-foreground;
         font-family: 'Geist', 'Geist Fallback', Arial, sans-serif;
     }
 }
 
-/* Gold gradient utility - matches qron.space */
-.gradient-gold {
-    background: linear-gradient(135deg, #E8C547 0%, #C9A227 50%, #A07D10 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-
-/* Gradient text — gold to amber, used across all AuthiChain pages */
+.gradient-gold,
 .gradient-text {
-    background: linear-gradient(135deg, #E8C547 0%, #C9A227 50%, #A07D10 100%);
+    background: linear-gradient(135deg, #FFD700 0%, #E8C547 30%, #C9A227 65%, #A07D10 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }
 
-/* Gradient background — used for CTA sections and gradient buttons */
 .gradient-primary {
     background: linear-gradient(135deg, #C9A227 0%, #A07D10 100%);
 }
 
-/* Gold glow */
-.glow-gold {
-    box-shadow: 0 0 20px rgba(201, 162, 39, 0.35);
+.protocol-bg {
+    background:
+        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(201,162,39,0.07) 0%, transparent 60%),
+        radial-gradient(ellipse 50% 40% at 90% 85%, rgba(201,162,39,0.04) 0%, transparent 50%),
+        radial-gradient(ellipse 60% 40% at 0% 60%, rgba(201,162,39,0.03) 0%, transparent 50%),
+        hsl(var(--background));
+}
+
+.protocol-card {
+    background: hsl(var(--card));
+    border: 1px solid var(--gold-border);
+    border-radius: 1rem;
+    backdrop-filter: blur(12px);
+    box-shadow:
+        0 0 0 1px rgba(201,162,39,0.05),
+        0 4px 24px rgba(0,0,0,0.5),
+        inset 0 1px 0 rgba(201,162,39,0.08);
+    transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
+}
+.protocol-card:hover {
+    border-color: rgba(201,162,39,0.5);
+    box-shadow:
+        0 0 0 1px rgba(201,162,39,0.12),
+        0 8px 40px rgba(0,0,0,0.6),
+        0 0 24px rgba(201,162,39,0.07),
+        inset 0 1px 0 rgba(201,162,39,0.14);
+    transform: translateY(-2px);
+}
+
+.gold-card {
+    background: linear-gradient(135deg, rgba(201,162,39,0.07) 0%, rgba(201,162,39,0.02) 100%);
+    border: 1px solid rgba(201,162,39,0.22);
+    border-radius: 0.75rem;
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+.gold-card:hover {
+    border-color: rgba(201,162,39,0.45);
+    box-shadow: 0 0 20px rgba(201,162,39,0.08);
 }
 
-/* Gold button */
 .btn-gold {
-    background: linear-gradient(135deg, #E8C547, #C9A227);
+    background: linear-gradient(135deg, #C9A227 0%, #E8C547 50%, #C9A227 100%);
+    background-size: 200% 200%;
     color: #0a0a0a;
     font-weight: 700;
-    transition: opacity 0.2s, transform 0.1s;
+    border: none;
+    transition: background-position 0.3s, box-shadow 0.3s, transform 0.15s;
+    box-shadow: 0 0 20px rgba(201,162,39,0.3);
 }
-
-.btn-gold:hover {
-    opacity: 0.9;
+.btn-gold:hover:not(:disabled) {
+    background-position: right center;
+    box-shadow: 0 0 36px rgba(255,215,0,0.5);
     transform: translateY(-1px);
 }
+
+.btn-outline-gold {
+    background: transparent;
+    color: #e8c547;
+    border: 1px solid rgba(201,162,39,0.35);
+    font-weight: 600;
+    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.btn-outline-gold:hover {
+    background: rgba(201,162,39,0.08);
+    border-color: #c9a227;
+    box-shadow: 0 0 16px rgba(201,162,39,0.2);
+}
+
+.glow-gold     { box-shadow: 0 0 20px rgba(201,162,39,0.35), 0 0 60px rgba(201,162,39,0.10); }
+.glow-gold-sm  { box-shadow: 0 0 12px rgba(201,162,39,0.28); }
+.glow-gold-lg  { box-shadow: 0 0 40px rgba(201,162,39,0.40), 0 0 80px rgba(201,162,39,0.15); }
+
+.protocol-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.25rem 0.75rem;
+    border-radius: 999px;
+    background: rgba(201,162,39,0.12);
+    border: 1px solid rgba(201,162,39,0.28);
+    color: #e8c547;
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+.gold-divider {
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(201,162,39,0.35), transparent);
+    margin: 2rem 0;
+}
+
+.protocol-input {
+    background: hsl(var(--input));
+    color: hsl(var(--foreground));
+    border: 1px solid hsl(var(--border));
+    border-radius: 0.5rem;
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+.protocol-input:focus {
+    outline: none;
+    border-color: var(--gold-dim);
+    box-shadow: 0 0 0 3px rgba(201,162,39,0.12);
+}
+
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: hsl(var(--background)); }
+::-webkit-scrollbar-thumb { background: rgba(201,162,39,0.3); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(201,162,39,0.5); }
+
+@keyframes gold-pulse {
+    0%, 100% { opacity: 1; }
+    50%       { opacity: 0.55; }
+}
+@keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50%       { transform: translateY(-8px); }
+}
+@keyframes shimmer {
+    0%   { background-position: -200% center; }
+    100% { background-position:  200% center; }
+}
+@keyframes spin-slow {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+}
+
+.animate-gold-pulse { animation: gold-pulse 2.5s ease-in-out infinite; }
+.animate-float      { animation: float 4s ease-in-out infinite; }
+.animate-shimmer {
+    background: linear-gradient(90deg, transparent 0%, rgba(201,162,39,0.25) 50%, transparent 100%);
+    background-size: 200% 100%;
+    animation: shimmer 2s linear infinite;
+}
+.animate-spin-slow  { animation: spin-slow 12s linear infinite; }
+
+::selection { background: rgba(201,162,39,0.25); color: #fff; }
diff --git a/app/page.tsx b/app/page.tsx
index b3e95e2..ed4b154 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,97 +3,80 @@
 import Image from "next/image"
 import Link from "next/link"
 import { Button } from "@/components/ui/button"
-import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Shield, Scan, Lock, TrendingUp, CheckCircle, Sparkles, Globe } from "lucide-react"
+import { Shield, Scan, Lock, TrendingUp, CheckCircle, Sparkles, Globe, Zap, Award, ArrowRight } from "lucide-react"
 import { ThemeToggle } from "@/components/theme-toggle"
 
 export default function Home() {
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen protocol-bg">
       {/* Navigation */}
-      <nav className="border-b">
+      <nav className="border-b border-[rgba(201,162,39,0.15)] sticky top-0 z-50 backdrop-blur-md bg-background/80">
         <div className="container mx-auto px-4 py-4 flex items-center justify-between">
           <div className="flex items-center space-x-2">
-            <Shield className="h-8 w-8 text-primary" />
+            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-[#C9A227] to-[#A07D10] flex items-center justify-center glow-gold-sm">
+              <Shield className="h-4 w-4 text-black" />
+            </div>
             <span className="text-2xl font-bold gradient-text">AuthiChain</span>
           </div>
           <div className="flex items-center space-x-4">
             <ThemeToggle />
-            <Link href="/demos" className="hidden sm:block text-sm text-muted-foreground hover:text-foreground transition">
-              Demos
-            </Link>
-            <Link href="/pricing" className="hidden sm:block text-sm text-muted-foreground hover:text-foreground transition">
-              Pricing
-            </Link>
-            <Link href="/login">
-              <Button variant="ghost">Login</Button>
-            </Link>
-            <Link href="/signup">
-              <Button variant="gradient">Get Started</Button>
-            </Link>
+            <Link href="/demos" className="hidden sm:block text-sm text-muted-foreground hover:text-[#e8c547] transition-colors">Demos</Link>
+            <Link href="/pricing" className="hidden sm:block text-sm text-muted-foreground hover:text-[#e8c547] transition-colors">Pricing</Link>
+            <Link href="/login"><Button variant="ghost" className="hover:text-[#e8c547]">Login</Button></Link>
+            <Link href="/signup"><Button className="btn-gold rounded-lg px-5">Get Started</Button></Link>
           </div>
         </div>
       </nav>
 
-      {/* Hero Section */}
-      <section className="container mx-auto px-4 py-16 md:py-24">
+      {/* Hero */}
+      <section className="container mx-auto px-4 py-16 md:py-28">
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center max-w-6xl mx-auto">
-          {/* Left: Text */}
           <div className="space-y-8">
-            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-amber-100 dark:bg-amber-900/20 text-amber-700 dark:text-amber-400">
-              <Sparkles className="h-4 w-4" />
-              <span className="text-sm font-medium">AI AutoFlow™ — Instant Product Classification</span>
+            <div className="protocol-badge">
+              <Sparkles className="h-3.5 w-3.5" />
+              <span>AI AutoFlow™ — Instant Product Classification</span>
             </div>
             <h1 className="text-5xl md:text-6xl font-bold leading-tight">
               <span className="gradient-text">AI AutoFlow™</span>{" "}
-              Authentication for Any Product
+              <span className="text-foreground">Authentication for Any Product</span>
             </h1>
-            <p className="text-xl text-muted-foreground">
-              Automatically classifies products across 10 industries and generates blockchain-backed authentication workflows in under 3 seconds. From cannabis to luxury goods, electronics to pharmaceuticals—one platform for everything.
+            <p className="text-xl text-muted-foreground leading-relaxed">
+              Automatically classifies products across 10 industries and generates blockchain-backed
+              authentication workflows in under 3 seconds.
             </p>
             <div className="flex flex-col sm:flex-row gap-4">
               <Link href="/onboarding">
-                <Button size="lg" variant="gradient" className="w-full sm:w-auto">
-                  Start Certification
+                <Button size="lg" className="btn-gold w-full sm:w-auto rounded-xl px-8 font-bold">
+                  Start Certification <ArrowRight className="ml-2 h-4 w-4" />
                 </Button>
               </Link>
               <Link href="/demos">
-                <Button size="lg" variant="outline" className="w-full sm:w-auto">
-                  See Use Case Demos
-                </Button>
+                <Button size="lg" className="btn-outline-gold w-full sm:w-auto rounded-xl px-8">See Use Case Demos</Button>
               </Link>
             </div>
-
-            {/* Stats */}
-            <div className="grid grid-cols-4 gap-4 pt-4 border-t">
-              <div>
-                <div className="text-3xl font-bold gradient-text">10</div>
-                <div className="text-xs text-muted-foreground">Industries</div>
-              </div>
-              <div>
-                <div className="text-3xl font-bold gradient-text">$14T+</div>
-                <div className="text-xs text-muted-foreground">Market</div>
-              </div>
-              <div>
-                <div className="text-3xl font-bold gradient-text">98%</div>
-                <div className="text-xs text-muted-foreground">AI Accuracy</div>
-              </div>
-              <div>
-                <div className="text-3xl font-bold gradient-text">&lt;3s</div>
-                <div className="text-xs text-muted-foreground">Time</div>
-              </div>
+            <div className="grid grid-cols-4 gap-3 pt-2">
+              {[
+                { stat: "10",   label: "Industries" },
+                { stat: "$14T+",label: "Market" },
+                { stat: "98%",  label: "AI Accuracy" },
+                { stat: "<3s",  label: "Speed" },
+              ].map(({ stat, label }) => (
+                <div key={label} className="gold-card p-3 text-center">
+                  <div className="text-xl font-bold gradient-text">{stat}</div>
+                  <div className="text-xs text-muted-foreground mt-0.5">{label}</div>
+                </div>
+              ))}
             </div>
           </div>
-
-          {/* Right: Hero Image */}
           <div className="flex justify-center lg:justify-end">
             <div className="relative w-full max-w-lg">
+              <div className="absolute inset-[-20%] rounded-full glow-gold opacity-20 blur-3xl pointer-events-none" />
               <Image
                 src="/images/hero-shield.svg"
                 alt="AuthiChain blockchain authentication shield"
                 width={800}
                 height={600}
-                className="w-full h-auto rounded-2xl"
+                className="w-full h-auto rounded-2xl relative z-10 animate-float"
                 priority
               />
             </div>
@@ -103,215 +86,130 @@ export default function Home() {
 
       {/* Industries Banner */}
       <section className="container mx-auto px-4 pb-16">
-        <div className="max-w-6xl mx-auto overflow-hidden rounded-xl">
+        <div className="max-w-6xl mx-auto overflow-hidden rounded-2xl protocol-card">
           <Image
             src="/images/industries-banner.svg"
-            alt="Industries covered: Cannabis, Luxury, Electronics, Pharma, Fashion, Automotive, Food, Art, Cosmetics"
-            width={1000}
-            height={120}
+            alt="10 Industries served by AuthiChain Protocol"
+            width={1200}
+            height={150}
             className="w-full h-auto"
           />
         </div>
       </section>
 
-      {/* Features Section */}
+      <div className="gold-divider mx-auto max-w-6xl px-4" />
+
+      {/* Features */}
       <section className="container mx-auto px-4 py-20">
-        <div className="text-center mb-16">
-          <h2 className="text-4xl font-bold mb-4">
-            Why Choose <span className="gradient-text">AuthiChain</span>?
-          </h2>
-          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
-            Enterprise-grade blockchain authentication trusted by brands protecting products across 10 industries
-          </p>
+        <div className="text-center mb-14">
+          <div className="protocol-badge mb-4 inline-flex"><Shield className="h-3.5 w-3.5" /> Enterprise Authentication</div>
+          <h2 className="text-4xl font-bold mb-4 mt-4">Why Choose <span className="gradient-text">AuthiChain</span>?</h2>
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">Enterprise-grade blockchain authentication trusted by brands across 10 industries</p>
         </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          <Card className="border-2 border-purple-500/20 hover:border-purple-500 transition-colors bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-purple-950/20 dark:to-indigo-950/20">
-            <CardHeader>
-              <Sparkles className="h-12 w-12 text-purple-500 mb-4" />
-              <CardTitle>AI AutoFlow™ Engine</CardTitle>
-              <CardDescription>
-                Automatically classifies products across 10 industries and generates custom authentication workflows in under 3 seconds
-              </CardDescription>
-            </CardHeader>
-          </Card>
-
-          <Card className="border-2 hover:border-primary transition-colors">
-            <CardHeader>
-              <Globe className="h-12 w-12 text-primary mb-4" />
-              <CardTitle>Universal Platform</CardTitle>
-              <CardDescription>
-                One platform for all industries: Cannabis, Luxury, Electronics, Pharma, Fashion, Automotive, Food, Art, Cosmetics, and Sports
-              </CardDescription>
-            </CardHeader>
-          </Card>
-
-          <Card className="border-2 hover:border-primary transition-colors">
-            <CardHeader>
-              <Lock className="h-12 w-12 text-primary mb-4" />
-              <CardTitle>Blockchain Security</CardTitle>
-              <CardDescription>
-                Immutable records on the blockchain ensure your products can't be
-                counterfeited or tampered with
-              </CardDescription>
-            </CardHeader>
-          </Card>
-
-          <Card className="border-2 hover:border-primary transition-colors">
-            <CardHeader>
-              <Scan className="h-12 w-12 text-primary mb-4" />
-              <CardTitle>TrueMark™ Technology</CardTitle>
-              <CardDescription>
-                Unique microscopic patterns verified through our proprietary
-                scanning technology
-              </CardDescription>
-            </CardHeader>
-          </Card>
-
-          <Card className="border-2 hover:border-secondary transition-colors">
-            <CardHeader>
-              <Shield className="h-12 w-12 text-secondary mb-4" />
-              <CardTitle>Instant Verification</CardTitle>
-              <CardDescription>
-                Anyone can verify product authenticity in seconds using just a
-                TrueMark™ ID
-              </CardDescription>
-            </CardHeader>
-          </Card>
-
-          <Card className="border-2 hover:border-secondary transition-colors">
-            <CardHeader>
-              <TrendingUp className="h-12 w-12 text-secondary mb-4" />
-              <CardTitle>Analytics Dashboard</CardTitle>
-              <CardDescription>
-                Track verification scans, monitor your products, and gain insights
-                into your supply chain
-              </CardDescription>
-            </CardHeader>
-          </Card>
-
-          <Card className="border-2 hover:border-secondary transition-colors">
-            <CardHeader>
-              <CheckCircle className="h-12 w-12 text-secondary mb-4" />
-              <CardTitle>Easy Integration</CardTitle>
-              <CardDescription>
-                Simple API and SDK for seamless integration into your existing
-                systems
-              </CardDescription>
-            </CardHeader>
-          </Card>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
+          {[
+            { icon: <Sparkles className="h-6 w-6 text-black" />, iconClass: "bg-gradient-to-br from-[#C9A227] to-[#A07D10] glow-gold-sm", title: "AI AutoFlow™ Engine", desc: "Automatically classifies products across 10 industries and generates custom authentication workflows in under 3 seconds." },
+            { icon: <Globe className="h-6 w-6 text-[#c9a227]" />, iconClass: "border border-[rgba(201,162,39,0.3)]", title: "Universal Platform", desc: "One platform for all industries: Cannabis, Luxury, Electronics, Pharma, Fashion, Automotive, Food, Art, Cosmetics, and Sports." },
+            { icon: <Lock className="h-6 w-6 text-[#c9a227]" />, iconClass: "border border-[rgba(201,162,39,0.3)]", title: "Blockchain Security", desc: "Immutable records on the blockchain ensure your products can't be counterfeited or tampered with." },
+            { icon: <Scan className="h-6 w-6 text-[#c9a227]" />, iconClass: "border border-[rgba(201,162,39,0.3)]", title: "TrueMark™ Technology", desc: "Unique microscopic patterns verified through our proprietary scanning technology." },
+            { icon: <Zap className="h-6 w-6 text-[#c9a227]" />, iconClass: "border border-[rgba(201,162,39,0.3)]", title: "Instant Verification", desc: "Anyone can verify product authenticity in seconds using just a TrueMark™ ID." },
+            { icon: <TrendingUp className="h-6 w-6 text-[#c9a227]" />, iconClass: "border border-[rgba(201,162,39,0.3)]", title: "Analytics Dashboard", desc: "Track verification scans, monitor your products, and gain insights into your supply chain." },
+          ].map(({ icon, iconClass, title, desc }) => (
+            <div key={title} className="protocol-card p-7 flex flex-col gap-4">
+              <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${iconClass}`}>{icon}</div>
+              <div>
+                <h3 className="text-lg font-bold text-foreground mb-2">{title}</h3>
+                <p className="text-muted-foreground text-sm leading-relaxed">{desc}</p>
+              </div>
+            </div>
+          ))}
         </div>
       </section>
 
       {/* How It Works */}
-      <section className="container mx-auto px-4 py-20 bg-muted/30 rounded-3xl">
+      <section className="container mx-auto px-4 py-16">
         <div className="text-center mb-12">
-          <h2 className="text-4xl font-bold mb-4">How It Works</h2>
-          <p className="text-xl text-muted-foreground">
-            Three simple steps to protect your products
-          </p>
+          <div className="protocol-badge mb-4 inline-flex"><CheckCircle className="h-3.5 w-3.5" /> Simple Process</div>
+          <h2 className="text-4xl font-bold mb-4 mt-4">How It <span className="gradient-text">Works</span></h2>
+          <p className="text-xl text-muted-foreground">Three simple steps to protect your products</p>
         </div>
-
         <div className="max-w-4xl mx-auto">
-          <Image
-            src="/images/how-it-works.svg"
-            alt="How AuthiChain works: Upload Product → Blockchain Register → Verify Anywhere"
-            width={900}
-            height={280}
-            className="w-full h-auto rounded-xl"
-          />
+          <div className="protocol-card p-2">
+            <Image src="/images/how-it-works.svg" alt="How AuthiChain works" width={900} height={280} className="w-full h-auto rounded-xl" />
+          </div>
         </div>
       </section>
 
-      {/* QRON Ecosystem Callout */}
+      <div className="gold-divider mx-auto max-w-6xl px-4" />
+
+      {/* QRON Ecosystem */}
       <section className="container mx-auto px-4 py-16">
-        <div className="max-w-5xl mx-auto rounded-2xl border border-amber-500/30 bg-amber-500/5 p-10 grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
+        <div className="max-w-5xl mx-auto protocol-card p-10 grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
           <div>
-            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-500/10 text-amber-400 text-xs font-semibold uppercase tracking-widest mb-4">
-              AuthiChain Ecosystem
-            </div>
-            <h2 className="text-3xl font-bold mb-3">
-              Create Verified <span className="gradient-text">QRON Art</span>
-            </h2>
-            <p className="text-muted-foreground mb-6">
-              QRON Space generates cryptographically signed QR art via Ed25519 — every scan verifies back to the AuthiChain Protocol. The creative entry point to enterprise authentication.
-            </p>
+            <div className="protocol-badge mb-4">AuthiChain Ecosystem</div>
+            <h2 className="text-3xl font-bold mb-3 mt-4">Create Verified <span className="gradient-text">QRON Art</span></h2>
+            <p className="text-muted-foreground mb-6 leading-relaxed">QRON Space generates cryptographically signed QR art via Ed25519 — every scan verifies back to the AuthiChain Protocol.</p>
             <div className="flex flex-col sm:flex-row gap-3">
               <a href="https://qron.space" target="_blank" rel="noopener noreferrer">
-                <Button variant="gradient" className="w-full sm:w-auto">
-                  Generate a QRON →
-                </Button>
+                <Button className="btn-gold w-full sm:w-auto rounded-xl px-6 font-bold">Generate a QRON →</Button>
               </a>
-              <Link href="/qron">
-                <Button variant="outline" className="w-full sm:w-auto">
-                  View Gallery
-                </Button>
-              </Link>
+              <Link href="/qron"><Button className="btn-outline-gold w-full sm:w-auto rounded-xl px-6">View Gallery</Button></Link>
             </div>
           </div>
           <div className="grid grid-cols-2 gap-3">
-            <div className="rounded-xl bg-card border p-4 text-center">
-              <div className="text-2xl font-bold gradient-text">Ed25519</div>
-              <div className="text-xs text-muted-foreground mt-1">Cryptographic Signing</div>
-            </div>
-            <div className="rounded-xl bg-card border p-4 text-center">
-              <div className="text-2xl font-bold gradient-text">99.7%</div>
-              <div className="text-xs text-muted-foreground mt-1">Verification Accuracy</div>
-            </div>
-            <div className="rounded-xl bg-card border p-4 text-center">
-              <div className="text-2xl font-bold gradient-text">~25%</div>
-              <div className="text-xs text-muted-foreground mt-1">Scan Lift vs Standard QR</div>
-            </div>
-            <div className="rounded-xl bg-card border p-4 text-center">
-              <div className="text-2xl font-bold gradient-text">Live</div>
-              <div className="text-xs text-muted-foreground mt-1">On-Chain Verification</div>
-            </div>
+            {[
+              { stat: "Ed25519", label: "Cryptographic Signing" },
+              { stat: "99.7%",  label: "Verification Accuracy" },
+              { stat: "~25%",   label: "Scan Lift vs Standard QR" },
+              { stat: "Live",   label: "On-Chain Verification" },
+            ].map(({ stat, label }) => (
+              <div key={label} className="gold-card rounded-xl p-4 text-center">
+                <div className="text-2xl font-bold gradient-text">{stat}</div>
+                <div className="text-xs text-muted-foreground mt-1">{label}</div>
+              </div>
+            ))}
           </div>
         </div>
       </section>
 
-      {/* CTA Section */}
+      {/* CTA */}
       <section className="container mx-auto px-4 py-20 text-center">
-        <div className="max-w-3xl mx-auto space-y-8 p-12 rounded-3xl gradient-primary">
-          <h2 className="text-4xl font-bold text-white">
-            Ready to Protect Your Products?
-          </h2>
-          <p className="text-xl text-white/90">
-            Brands in luxury, pharma, cannabis, and electronics rely on AuthiChain for blockchain-grade authentication. Start with a free product registration.
-          </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Link href="/onboarding">
-              <Button size="lg" variant="secondary" className="font-semibold">
-                Start Certification
-              </Button>
-            </Link>
-            <Link href="/signup">
-              <Button size="lg" variant="outline" className="font-semibold border-white/40 text-white hover:bg-white/10">
-                View Plans
-              </Button>
-            </Link>
+        <div className="max-w-3xl mx-auto protocol-card p-12 relative overflow-hidden">
+          <div className="absolute inset-0 rounded-[1rem] pointer-events-none" style={{ background: "radial-gradient(ellipse at 50% 0%, rgba(201,162,39,0.12) 0%, transparent 70%)" }} />
+          <div className="relative z-10 space-y-6">
+            <div className="protocol-badge inline-flex"><Award className="h-3.5 w-3.5" /> Enterprise Ready</div>
+            <h2 className="text-4xl font-bold mt-4">Ready to <span className="gradient-text">Protect Your Products?</span></h2>
+            <p className="text-xl text-muted-foreground leading-relaxed">Brands in luxury, pharma, cannabis, and electronics rely on AuthiChain for blockchain-grade authentication.</p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center pt-2">
+              <Link href="/onboarding"><Button size="lg" className="btn-gold rounded-xl px-8 font-bold">Start Certification <ArrowRight className="ml-2 h-4 w-4" /></Button></Link>
+              <Link href="/signup"><Button size="lg" className="btn-outline-gold rounded-xl px-8">View Plans</Button></Link>
+            </div>
           </div>
         </div>
       </section>
 
       {/* Footer */}
-      <footer className="border-t mt-20">
+      <footer className="border-t border-[rgba(201,162,39,0.12)] mt-8">
         <div className="container mx-auto px-4 py-8">
-          <div className="flex flex-col md:flex-row justify-between items-center">
-            <div className="flex items-center space-x-2 mb-4 md:mb-0">
-              <Shield className="h-6 w-6 text-primary" />
+          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
+            <div className="flex items-center space-x-2">
+              <div className="w-6 h-6 rounded-full bg-gradient-to-br from-[#C9A227] to-[#A07D10] flex items-center justify-center">
+                <Shield className="h-3 w-3 text-black" />
+              </div>
               <span className="text-lg font-bold gradient-text">AuthiChain</span>
             </div>
-            <div className="flex items-center gap-6 text-sm text-muted-foreground">
-              <Link href="/verify" className="hover:text-foreground transition-colors">Verify Product</Link>
-              <Link href="/demo" className="hover:text-foreground transition-colors">Live Demo</Link>
-              <Link href="/pricing" className="hover:text-foreground transition-colors">Pricing</Link>
-              <Link href="/qron" className="hover:text-foreground transition-colors">QRON Gallery</Link>
-              <Link href="/login" className="hover:text-foreground transition-colors">Login</Link>
-            </div>
-            <div className="text-sm text-muted-foreground mt-4 md:mt-0">
-              © 2026 AuthiChain. All rights reserved.
+            <div className="flex items-center gap-6 text-sm text-muted-foreground flex-wrap justify-center">
+              {[
+                { href: "/verify",  label: "Verify Product" },
+                { href: "/demo",    label: "Live Demo" },
+                { href: "/pricing", label: "Pricing" },
+                { href: "/qron",    label: "QRON Gallery" },
+                { href: "/login",   label: "Login" },
+              ].map(({ href, label }) => (
+                <Link key={href} href={href} className="hover:text-[#e8c547] transition-colors">{label}</Link>
+              ))}
             </div>
+            <div className="text-sm text-muted-foreground">© 2026 AuthiChain. All rights reserved.</div>
           </div>
         </div>
       </footer>

From 34031c512e0653aaf0e7c333174b784e28aa79eb Mon Sep 17 00:00:00 2001
From: Z <219363113+Z-kie@users.noreply.github.com>
Date: Sun, 29 Mar 2026 19:07:23 -0400
Subject: [PATCH 2/5] feat: add gold hero shield SVG image

---
 public/images/hero-shield.svg | 240 +++++++++++++++-------------------
 1 file changed, 109 insertions(+), 131 deletions(-)

diff --git a/public/images/hero-shield.svg b/public/images/hero-shield.svg
index 1a22342..7e36b74 100644
--- a/public/images/hero-shield.svg
+++ b/public/images/hero-shield.svg
@@ -1,141 +1,119 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600">
   <defs>
-    <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#0f0f1a;stop-opacity:1"/>
-      <stop offset="100%" style="stop-color:#1a0a2e;stop-opacity:1"/>
-    </linearGradient>
+    <radialGradient id="bgGlow" cx="50%" cy="50%" r="60%">
+      <stop offset="0%" stop-color="#1a1200"/>
+      <stop offset="40%" stop-color="#0d0d0d"/>
+      <stop offset="100%" stop-color="#050505"/>
+    </radialGradient>
+    <radialGradient id="shieldGlow" cx="50%" cy="40%" r="55%">
+      <stop offset="0%" stop-color="#ffd700" stop-opacity="0.25"/>
+      <stop offset="100%" stop-color="#c9a227" stop-opacity="0"/>
+    </radialGradient>
     <linearGradient id="shieldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#9333ea;stop-opacity:1"/>
-      <stop offset="100%" style="stop-color:#16a34a;stop-opacity:1"/>
+      <stop offset="0%" stop-color="#ffd700"/>
+      <stop offset="50%" stop-color="#c9a227"/>
+      <stop offset="100%" stop-color="#a07d10"/>
     </linearGradient>
-    <linearGradient id="glowGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#a855f7;stop-opacity:0.3"/>
-      <stop offset="100%" style="stop-color:#22c55e;stop-opacity:0.3"/>
+    <linearGradient id="shieldFill" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#1a1400" stop-opacity="0.9"/>
+      <stop offset="100%" stop-color="#0a0900" stop-opacity="0.95"/>
     </linearGradient>
-    <radialGradient id="centerGlow" cx="50%" cy="50%" r="50%">
-      <stop offset="0%" style="stop-color:#a855f7;stop-opacity:0.4"/>
-      <stop offset="100%" style="stop-color:#a855f7;stop-opacity:0"/>
-    </radialGradient>
-    <filter id="glow">
-      <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
-      <feMerge>
-        <feMergeNode in="coloredBlur"/>
-        <feMergeNode in="SourceGraphic"/>
-      </feMerge>
+    <linearGradient id="chainGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#e8c547"/>
+      <stop offset="50%" stop-color="#ffd700"/>
+      <stop offset="100%" stop-color="#c9a227"/>
+    </linearGradient>
+    <filter id="goldGlow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
     </filter>
-    <filter id="softGlow">
-      <feGaussianBlur stdDeviation="8" result="coloredBlur"/>
-      <feMerge>
-        <feMergeNode in="coloredBlur"/>
-        <feMergeNode in="SourceGraphic"/>
-      </feMerge>
+    <filter id="softGlow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="8" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
     </filter>
+    <pattern id="hexGrid" x="0" y="0" width="40" height="46" patternUnits="userSpaceOnUse">
+      <polygon points="20,2 38,12 38,34 20,44 2,34 2,12" fill="none" stroke="#c9a227" stroke-width="0.4" stroke-opacity="0.15"/>
+    </pattern>
+    <clipPath id="shieldClip">
+      <path d="M400,80 L560,130 L560,310 Q560,430 400,510 Q240,430 240,310 L240,130 Z"/>
+    </clipPath>
   </defs>
 
   <!-- Background -->
-  <rect width="800" height="600" fill="url(#bgGrad)"/>
-
-  <!-- Grid pattern -->
-  <g opacity="0.08" stroke="#a855f7" stroke-width="0.5">
-    <line x1="0" y1="100" x2="800" y2="100"/>
-    <line x1="0" y1="200" x2="800" y2="200"/>
-    <line x1="0" y1="300" x2="800" y2="300"/>
-    <line x1="0" y1="400" x2="800" y2="400"/>
-    <line x1="0" y1="500" x2="800" y2="500"/>
-    <line x1="100" y1="0" x2="100" y2="600"/>
-    <line x1="200" y1="0" x2="200" y2="600"/>
-    <line x1="300" y1="0" x2="300" y2="600"/>
-    <line x1="400" y1="0" x2="400" y2="600"/>
-    <line x1="500" y1="0" x2="500" y2="600"/>
-    <line x1="600" y1="0" x2="600" y2="600"/>
-    <line x1="700" y1="0" x2="700" y2="600"/>
-  </g>
-
-  <!-- Outer orbit ring -->
-  <ellipse cx="400" cy="300" rx="280" ry="230" stroke="url(#shieldGrad)" stroke-width="1" opacity="0.2" fill="none" stroke-dasharray="8 4"/>
-
-  <!-- Middle orbit ring -->
-  <ellipse cx="400" cy="300" rx="200" ry="165" stroke="url(#shieldGrad)" stroke-width="1" opacity="0.3" fill="none" stroke-dasharray="4 8"/>
-
-  <!-- Center glow -->
-  <circle cx="400" cy="300" r="180" fill="url(#centerGlow)"/>
-
-  <!-- Blockchain nodes - floating dots -->
-  <circle cx="120" cy="120" r="8" fill="#9333ea" opacity="0.7" filter="url(#glow)"/>
-  <circle cx="680" cy="100" r="6" fill="#16a34a" opacity="0.7" filter="url(#glow)"/>
-  <circle cx="700" cy="480" r="9" fill="#9333ea" opacity="0.6" filter="url(#glow)"/>
-  <circle cx="90" cy="450" r="7" fill="#16a34a" opacity="0.6" filter="url(#glow)"/>
-  <circle cx="400" cy="60" r="5" fill="#a855f7" opacity="0.8" filter="url(#glow)"/>
-  <circle cx="400" cy="540" r="5" fill="#22c55e" opacity="0.8" filter="url(#glow)"/>
-
-  <!-- Connection lines between nodes -->
-  <line x1="120" y1="120" x2="400" y2="300" stroke="#9333ea" stroke-width="0.8" opacity="0.2"/>
-  <line x1="680" y1="100" x2="400" y2="300" stroke="#16a34a" stroke-width="0.8" opacity="0.2"/>
-  <line x1="700" y1="480" x2="400" y2="300" stroke="#9333ea" stroke-width="0.8" opacity="0.2"/>
-  <line x1="90" y1="450" x2="400" y2="300" stroke="#16a34a" stroke-width="0.8" opacity="0.2"/>
-
-  <!-- Shield shape -->
-  <path d="M400 120 L520 170 L520 290 Q520 370 400 420 Q280 370 280 290 L280 170 Z"
-    fill="url(#glowGrad)" stroke="url(#shieldGrad)" stroke-width="2.5" filter="url(#softGlow)"/>
-
-  <!-- Shield inner highlight -->
-  <path d="M400 140 L505 184 L505 288 Q505 355 400 400 Q295 355 295 288 L295 184 Z"
-    fill="none" stroke="url(#shieldGrad)" stroke-width="1" opacity="0.4"/>
-
-  <!-- Check mark / lock icon in shield -->
-  <g transform="translate(400, 285)" filter="url(#glow)">
-    <!-- Lock body -->
-    <rect x="-28" y="-10" width="56" height="42" rx="6" fill="url(#shieldGrad)" opacity="0.9"/>
-    <!-- Lock shackle -->
-    <path d="M-14 -10 L-14 -26 Q-14 -48 0 -48 Q14 -48 14 -26 L14 -10"
-      stroke="url(#shieldGrad)" stroke-width="8" fill="none" stroke-linecap="round"/>
-    <!-- Keyhole -->
-    <circle cx="0" cy="12" r="8" fill="#0f0f1a" opacity="0.8"/>
-    <rect x="-3" y="12" width="6" height="12" rx="2" fill="#0f0f1a" opacity="0.8"/>
-  </g>
-
-  <!-- Floating blockchain blocks - left side -->
-  <g transform="translate(155, 240)">
-    <rect width="80" height="40" rx="6" fill="#1e1040" stroke="#9333ea" stroke-width="1.5" opacity="0.8"/>
-    <text x="40" y="25" text-anchor="middle" fill="#a855f7" font-size="10" font-family="monospace" opacity="0.9">0x4f2a...</text>
-  </g>
-  <g transform="translate(160, 295)">
-    <rect width="80" height="40" rx="6" fill="#0a1f0a" stroke="#16a34a" stroke-width="1.5" opacity="0.8"/>
-    <text x="40" y="25" text-anchor="middle" fill="#22c55e" font-size="10" font-family="monospace" opacity="0.9">verified</text>
-  </g>
-  <line x1="195" y1="280" x2="200" y2="295" stroke="#9333ea" stroke-width="1" opacity="0.4"/>
-
-  <!-- Floating blockchain blocks - right side -->
-  <g transform="translate(565, 240)">
-    <rect width="80" height="40" rx="6" fill="#1e1040" stroke="#9333ea" stroke-width="1.5" opacity="0.8"/>
-    <text x="40" y="25" text-anchor="middle" fill="#a855f7" font-size="10" font-family="monospace" opacity="0.9">NFT #2847</text>
-  </g>
-  <g transform="translate(560, 295)">
-    <rect width="80" height="40" rx="6" fill="#0a1f0a" stroke="#16a34a" stroke-width="1.5" opacity="0.8"/>
-    <text x="40" y="25" text-anchor="middle" fill="#22c55e" font-size="10" font-family="monospace" opacity="0.9">authentic</text>
-  </g>
-  <line x1="600" y1="280" x2="595" y2="295" stroke="#16a34a" stroke-width="1" opacity="0.4"/>
-
-  <!-- Top floating elements -->
-  <g transform="translate(280, 68)">
-    <rect width="240" height="36" rx="18" fill="#1e0840" stroke="#9333ea" stroke-width="1" opacity="0.7"/>
-    <text x="120" y="23" text-anchor="middle" fill="#c084fc" font-size="12" font-family="monospace" font-weight="bold">AI AUTOFLOW™ ACTIVE</text>
-  </g>
-
-  <!-- Bottom trust indicators -->
-  <g transform="translate(200, 470)">
-    <rect width="110" height="32" rx="6" fill="#0a1f0a" stroke="#16a34a" stroke-width="1" opacity="0.8"/>
-    <text x="55" y="21" text-anchor="middle" fill="#22c55e" font-size="11" font-family="monospace">✓ AUTHENTIC</text>
-  </g>
-  <g transform="translate(345, 470)">
-    <rect width="110" height="32" rx="6" fill="#1e0840" stroke="#9333ea" stroke-width="1" opacity="0.8"/>
-    <text x="55" y="21" text-anchor="middle" fill="#c084fc" font-size="11" font-family="monospace">BLOCKCHAIN</text>
-  </g>
-  <g transform="translate(490, 470)">
-    <rect width="110" height="32" rx="6" fill="#0a1f0a" stroke="#16a34a" stroke-width="1" opacity="0.8"/>
-    <text x="55" y="21" text-anchor="middle" fill="#22c55e" font-size="11" font-family="monospace">TrueMark™</text>
-  </g>
-
-  <!-- Scan beam animation line -->
-  <line x1="280" y1="300" x2="520" y2="300" stroke="url(#shieldGrad)" stroke-width="1.5" opacity="0.5" stroke-dasharray="4 4"/>
+  <rect width="800" height="600" fill="url(#bgGlow)"/>
+  <rect width="800" height="600" fill="url(#hexGrid)"/>
+
+  <!-- Ambient shield glow -->
+  <ellipse cx="400" cy="300" rx="220" ry="240" fill="url(#shieldGlow)"/>
+
+  <!-- Outer orbit rings -->
+  <ellipse cx="400" cy="300" rx="280" ry="260" fill="none" stroke="#c9a227" stroke-width="0.8" stroke-opacity="0.2" stroke-dasharray="8 6"/>
+  <ellipse cx="400" cy="300" rx="310" ry="290" fill="none" stroke="#c9a227" stroke-width="0.5" stroke-opacity="0.12" stroke-dasharray="4 8"/>
+
+  <!-- Corner hexagons -->
+  <polygon points="60,50 90,50 105,75 90,100 60,100 45,75" fill="none" stroke="#c9a227" stroke-width="1.5" stroke-opacity="0.5"/>
+  <polygon points="740,50 770,50 785,75 770,100 740,100 725,75" fill="none" stroke="#c9a227" stroke-width="1.5" stroke-opacity="0.5"/>
+  <polygon points="60,500 90,500 105,525 90,550 60,550 45,525" fill="none" stroke="#c9a227" stroke-width="1.5" stroke-opacity="0.5"/>
+  <polygon points="740,500 770,500 785,525 770,550 740,550 725,525" fill="none" stroke="#c9a227" stroke-width="1.5" stroke-opacity="0.5"/>
+
+  <!-- Floating data nodes with dashed lines -->
+  <line x1="100" y1="200" x2="240" y2="280" stroke="#c9a227" stroke-width="0.8" stroke-opacity="0.4" stroke-dasharray="5 4"/>
+  <circle cx="100" cy="200" r="8" fill="none" stroke="#c9a227" stroke-width="1.5" stroke-opacity="0.6"/>
+  <circle cx="100" cy="200" r="3" fill="#e8c547" fill-opacity="0.8"/>
+
+  <line x1="700" y1="180" x2="560" y2="260" stroke="#c9a227" stroke-width="0.8" stroke-opacity="0.4" stroke-dasharray="5 4"/>
+  <circle cx="700" cy="180" r="8" fill="none" stroke="#c9a227" stroke-width="1.5" stroke-opacity="0.6"/>
+  <circle cx="700" cy="180" r="3" fill="#e8c547" fill-opacity="0.8"/>
+
+  <line x1="130" y1="420" x2="240" y2="350" stroke="#c9a227" stroke-width="0.8" stroke-opacity="0.4" stroke-dasharray="5 4"/>
+  <circle cx="130" cy="420" r="6" fill="none" stroke="#c9a227" stroke-width="1.5" stroke-opacity="0.5"/>
+  <circle cx="130" cy="420" r="2.5" fill="#e8c547" fill-opacity="0.7"/>
+
+  <line x1="670" y1="400" x2="560" y2="340" stroke="#c9a227" stroke-width="0.8" stroke-opacity="0.4" stroke-dasharray="5 4"/>
+  <circle cx="670" cy="400" r="6" fill="none" stroke="#c9a227" stroke-width="1.5" stroke-opacity="0.5"/>
+  <circle cx="670" cy="400" r="2.5" fill="#e8c547" fill-opacity="0.7"/>
+
+  <!-- Shield body (filled) -->
+  <path d="M400,80 L560,130 L560,310 Q560,430 400,510 Q240,430 240,310 L240,130 Z" fill="url(#shieldFill)" filter="url(#softGlow)"/>
+
+  <!-- Shield border gradient -->
+  <path d="M400,80 L560,130 L560,310 Q560,430 400,510 Q240,430 240,310 L240,130 Z" fill="none" stroke="url(#shieldGrad)" stroke-width="3" filter="url(#goldGlow)"/>
+
+  <!-- Inner shield detail lines -->
+  <path d="M400,105 L538,148 L538,308 Q538,410 400,480 Q262,410 262,308 L262,148 Z" fill="none" stroke="#c9a227" stroke-width="1" stroke-opacity="0.4"/>
+
+  <!-- Shield inner hex pattern (clipped) -->
+  <rect x="240" y="80" width="320" height="430" fill="url(#hexGrid)" clip-path="url(#shieldClip)" opacity="0.4"/>
+
+  <!-- Chain link emblem center -->
+  <!-- Link 1 -->
+  <rect x="340" y="235" width="55" height="30" rx="15" fill="none" stroke="url(#chainGrad)" stroke-width="3.5" filter="url(#goldGlow)"/>
+  <!-- Link 2 -->
+  <rect x="405" y="255" width="55" height="30" rx="15" fill="none" stroke="url(#chainGrad)" stroke-width="3.5" filter="url(#goldGlow)"/>
+  <!-- Link 3 -->
+  <rect x="340" y="275" width="55" height="30" rx="15" fill="none" stroke="url(#chainGrad)" stroke-width="3.5" filter="url(#goldGlow)"/>
+  <!-- Link 4 -->
+  <rect x="405" y="295" width="55" height="30" rx="15" fill="none" stroke="url(#chainGrad)" stroke-width="3.5" filter="url(#goldGlow)"/>
+
+  <!-- Center lock -->
+  <rect x="378" y="310" width="44" height="36" rx="5" fill="#1a1400" stroke="url(#shieldGrad)" stroke-width="2.5"/>
+  <path d="M386,310 L386,298 Q386,278 400,278 Q414,278 414,298 L414,310" fill="none" stroke="url(#shieldGrad)" stroke-width="2.5"/>
+  <circle cx="400" cy="328" r="6" fill="url(#shieldGrad)"/>
+
+  <!-- Crown topper -->
+  <path d="M366,96 L380,112 L400,92 L420,112 L434,96" fill="none" stroke="url(#shieldGrad)" stroke-width="2.5" stroke-linejoin="round" filter="url(#goldGlow)"/>
+  <circle cx="366" cy="96" r="3.5" fill="#ffd700"/>
+  <circle cx="400" cy="92" r="3.5" fill="#ffd700"/>
+  <circle cx="434" cy="96" r="3.5" fill="#ffd700"/>
+
+  <!-- Label -->
+  <text x="400" y="550" text-anchor="middle" font-family="'Inter', 'Helvetica Neue', sans-serif" font-size="11" font-weight="600" letter-spacing="4" fill="#c9a227" fill-opacity="0.8">AUTHICHAIN PROTOCOL</text>
+
+  <!-- Side tick marks -->
+  <line x1="240" y1="220" x2="252" y2="220" stroke="#c9a227" stroke-width="1.5" stroke-opacity="0.6"/>
+  <line x1="240" y1="300" x2="252" y2="300" stroke="#c9a227" stroke-width="1.5" stroke-opacity="0.6"/>
+  <line x1="240" y1="380" x2="252" y2="380" stroke="#c9a227" stroke-width="1.5" stroke-opacity="0.6"/>
+  <line x1="560" y1="220" x2="548" y2="220" stroke="#c9a227" stroke-width="1.5" stroke-opacity="0.6"/>
+  <line x1="560" y1="300" x2="548" y2="300" stroke="#c9a227" stroke-width="1.5" stroke-opacity="0.6"/>
+  <line x1="560" y1="380" x2="548" y2="380" stroke="#c9a227" stroke-width="1.5" stroke-opacity="0.6"/>
 </svg>

From 75387d229f829f73c2b072e398b803b110debd32 Mon Sep 17 00:00:00 2001
From: Z <219363113+Z-kie@users.noreply.github.com>
Date: Sun, 29 Mar 2026 19:07:24 -0400
Subject: [PATCH 3/5] feat: add gold industries banner SVG

---
 public/images/industries-banner.svg | 175 +++++++++++++++++-----------
 1 file changed, 109 insertions(+), 66 deletions(-)

diff --git a/public/images/industries-banner.svg b/public/images/industries-banner.svg
index df269f8..10299d7 100644
--- a/public/images/industries-banner.svg
+++ b/public/images/industries-banner.svg
@@ -1,78 +1,121 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 120" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 160" width="1200" height="160">
   <defs>
-    <linearGradient id="bannerBg" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#130d2a;stop-opacity:1"/>
-      <stop offset="50%" style="stop-color:#0d1a0d;stop-opacity:1"/>
-      <stop offset="100%" style="stop-color:#130d2a;stop-opacity:1"/>
+    <linearGradient id="bannerBg" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#0a0800"/>
+      <stop offset="20%" stop-color="#120f00"/>
+      <stop offset="50%" stop-color="#1a1400"/>
+      <stop offset="80%" stop-color="#120f00"/>
+      <stop offset="100%" stop-color="#0a0800"/>
     </linearGradient>
-    <linearGradient id="pillGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#2d1054"/>
-      <stop offset="100%" style="stop-color:#1a0840"/>
+    <linearGradient id="goldLine" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#c9a227" stop-opacity="0"/>
+      <stop offset="20%" stop-color="#c9a227" stop-opacity="0.8"/>
+      <stop offset="50%" stop-color="#ffd700" stop-opacity="1"/>
+      <stop offset="80%" stop-color="#c9a227" stop-opacity="0.8"/>
+      <stop offset="100%" stop-color="#c9a227" stop-opacity="0"/>
     </linearGradient>
-    <linearGradient id="pillGrad2" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#0a2a0a"/>
-      <stop offset="100%" style="stop-color:#061a06"/>
+    <linearGradient id="iconBg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#2a1f00"/>
+      <stop offset="100%" stop-color="#1a1200"/>
     </linearGradient>
+    <linearGradient id="activeBg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#4a3500"/>
+      <stop offset="100%" stop-color="#2a1f00"/>
+    </linearGradient>
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="2" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
   </defs>
 
-  <rect width="1000" height="120" fill="url(#bannerBg)" rx="12"/>
+  <!-- Background -->
+  <rect width="1200" height="160" fill="url(#bannerBg)"/>
+
+  <!-- Top & bottom gold lines -->
+  <rect x="0" y="0" width="1200" height="1.5" fill="url(#goldLine)"/>
+  <rect x="0" y="158.5" width="1200" height="1.5" fill="url(#goldLine)"/>
+
+  <!-- Industry items: 10 items, each ~120px wide -->
+  <!-- 1. Cannabis -->
+  <g transform="translate(0,0)">
+    <circle cx="60" cy="80" r="32" fill="url(#iconBg)" stroke="#c9a227" stroke-width="1.2" stroke-opacity="0.6"/>
+    <text x="60" y="72" text-anchor="middle" font-size="20" fill="#c9a227" fill-opacity="0.9">🌿</text>
+    <text x="60" y="124" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="9.5" font-weight="500" letter-spacing="0.5" fill="#c9a227" fill-opacity="0.75">Cannabis</text>
+  </g>
+
+  <!-- 2. Luxury -->
+  <g transform="translate(120,0)">
+    <circle cx="60" cy="80" r="32" fill="url(#iconBg)" stroke="#c9a227" stroke-width="1.2" stroke-opacity="0.6"/>
+    <text x="60" y="72" text-anchor="middle" font-size="20" fill="#c9a227" fill-opacity="0.9">💎</text>
+    <text x="60" y="124" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="9.5" font-weight="500" letter-spacing="0.5" fill="#c9a227" fill-opacity="0.75">Luxury</text>
+  </g>
+
+  <!-- 3. Electronics -->
+  <g transform="translate(240,0)">
+    <circle cx="60" cy="80" r="32" fill="url(#iconBg)" stroke="#c9a227" stroke-width="1.2" stroke-opacity="0.6"/>
+    <text x="60" y="72" text-anchor="middle" font-size="20" fill="#c9a227" fill-opacity="0.9">💻</text>
+    <text x="60" y="124" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="9.5" font-weight="500" letter-spacing="0.5" fill="#c9a227" fill-opacity="0.75">Electronics</text>
+  </g>
+
+  <!-- 4. Pharma -->
+  <g transform="translate(360,0)">
+    <circle cx="60" cy="80" r="32" fill="url(#iconBg)" stroke="#c9a227" stroke-width="1.2" stroke-opacity="0.6"/>
+    <text x="60" y="72" text-anchor="middle" font-size="20" fill="#c9a227" fill-opacity="0.9">💊</text>
+    <text x="60" y="124" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="9.5" font-weight="500" letter-spacing="0.5" fill="#c9a227" fill-opacity="0.75">Pharma</text>
+  </g>
 
-  <!-- Fade overlays for scroll effect -->
-  <rect width="80" height="120" fill="url(#bannerBg)" opacity="0.9"/>
-  <rect x="920" width="80" height="120" fill="url(#bannerBg)" opacity="0.9"/>
+  <!-- 5. Fashion (HIGHLIGHTED) -->
+  <g transform="translate(480,0)">
+    <circle cx="60" cy="80" r="36" fill="url(#activeBg)" stroke="#ffd700" stroke-width="2" filter="url(#glow)"/>
+    <text x="60" y="72" text-anchor="middle" font-size="22" fill="#ffd700">👗</text>
+    <text x="60" y="124" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="10" font-weight="700" letter-spacing="0.5" fill="#ffd700">Fashion</text>
+    <!-- Active dot -->
+    <circle cx="60" cy="48" r="3" fill="#ffd700" fill-opacity="0.9"/>
+  </g>
 
-  <!-- Title -->
-  <text x="500" y="28" text-anchor="middle" fill="#6b7280" font-size="11" font-family="sans-serif" font-weight="500" letter-spacing="3">TRUSTED ACROSS INDUSTRIES</text>
+  <!-- 6. Automotive -->
+  <g transform="translate(600,0)">
+    <circle cx="60" cy="80" r="32" fill="url(#iconBg)" stroke="#c9a227" stroke-width="1.2" stroke-opacity="0.6"/>
+    <text x="60" y="72" text-anchor="middle" font-size="20" fill="#c9a227" fill-opacity="0.9">🚗</text>
+    <text x="60" y="124" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="9.5" font-weight="500" letter-spacing="0.5" fill="#c9a227" fill-opacity="0.75">Automotive</text>
+  </g>
+
+  <!-- 7. Food & Wine -->
+  <g transform="translate(720,0)">
+    <circle cx="60" cy="80" r="32" fill="url(#iconBg)" stroke="#c9a227" stroke-width="1.2" stroke-opacity="0.6"/>
+    <text x="60" y="72" text-anchor="middle" font-size="20" fill="#c9a227" fill-opacity="0.9">🍷</text>
+    <text x="60" y="124" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="9.5" font-weight="500" letter-spacing="0.5" fill="#c9a227" fill-opacity="0.75">Food &amp; Wine</text>
+  </g>
+
+  <!-- 8. Art & NFTs -->
+  <g transform="translate(840,0)">
+    <circle cx="60" cy="80" r="32" fill="url(#iconBg)" stroke="#c9a227" stroke-width="1.2" stroke-opacity="0.6"/>
+    <text x="60" y="72" text-anchor="middle" font-size="20" fill="#c9a227" fill-opacity="0.9">🎨</text>
+    <text x="60" y="124" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="9.5" font-weight="500" letter-spacing="0.5" fill="#c9a227" fill-opacity="0.75">Art &amp; NFTs</text>
+  </g>
+
+  <!-- 9. Cosmetics -->
+  <g transform="translate(960,0)">
+    <circle cx="60" cy="80" r="32" fill="url(#iconBg)" stroke="#c9a227" stroke-width="1.2" stroke-opacity="0.6"/>
+    <text x="60" y="72" text-anchor="middle" font-size="20" fill="#c9a227" fill-opacity="0.9">✨</text>
+    <text x="60" y="124" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="9.5" font-weight="500" letter-spacing="0.5" fill="#c9a227" fill-opacity="0.75">Cosmetics</text>
+  </g>
 
-  <!-- Industry pills - row 1 -->
-  <g transform="translate(30, 40)">
-    <!-- Cannabis -->
-    <g transform="translate(0,0)">
-      <rect width="100" height="32" rx="16" fill="url(#pillGrad2)" stroke="#16a34a" stroke-width="1"/>
-      <text x="50" y="21" text-anchor="middle" fill="#4ade80" font-size="13" font-family="sans-serif">🌿 Cannabis</text>
-    </g>
-    <!-- Luxury -->
-    <g transform="translate(114,0)">
-      <rect width="90" height="32" rx="16" fill="url(#pillGrad1)" stroke="#9333ea" stroke-width="1"/>
-      <text x="45" y="21" text-anchor="middle" fill="#c084fc" font-size="13" font-family="sans-serif">💎 Luxury</text>
-    </g>
-    <!-- Electronics -->
-    <g transform="translate(218,0)">
-      <rect width="112" height="32" rx="16" fill="url(#pillGrad1)" stroke="#7c3aed" stroke-width="1"/>
-      <text x="56" y="21" text-anchor="middle" fill="#c084fc" font-size="13" font-family="sans-serif">📱 Electronics</text>
-    </g>
-    <!-- Pharma -->
-    <g transform="translate(344,0)">
-      <rect width="90" height="32" rx="16" fill="url(#pillGrad2)" stroke="#16a34a" stroke-width="1"/>
-      <text x="45" y="21" text-anchor="middle" fill="#4ade80" font-size="13" font-family="sans-serif">💊 Pharma</text>
-    </g>
-    <!-- Fashion -->
-    <g transform="translate(448,0)">
-      <rect width="94" height="32" rx="16" fill="url(#pillGrad1)" stroke="#9333ea" stroke-width="1"/>
-      <text x="47" y="21" text-anchor="middle" fill="#c084fc" font-size="13" font-family="sans-serif">👔 Fashion</text>
-    </g>
-    <!-- Automotive -->
-    <g transform="translate(556,0)">
-      <rect width="114" height="32" rx="16" fill="url(#pillGrad2)" stroke="#15803d" stroke-width="1"/>
-      <text x="57" y="21" text-anchor="middle" fill="#4ade80" font-size="13" font-family="sans-serif">🚗 Automotive</text>
-    </g>
-    <!-- Food -->
-    <g transform="translate(684,0)">
-      <rect width="110" height="32" rx="16" fill="url(#pillGrad1)" stroke="#7c3aed" stroke-width="1"/>
-      <text x="55" y="21" text-anchor="middle" fill="#c084fc" font-size="13" font-family="sans-serif">🍷 Food &amp; Bev</text>
-    </g>
-    <!-- Art -->
-    <g transform="translate(808,0)">
-      <rect width="72" height="32" rx="16" fill="url(#pillGrad2)" stroke="#16a34a" stroke-width="1"/>
-      <text x="36" y="21" text-anchor="middle" fill="#4ade80" font-size="13" font-family="sans-serif">🎨 Art</text>
-    </g>
-    <!-- Cosmetics -->
-    <g transform="translate(894,0)">
-      <rect width="100" height="32" rx="16" fill="url(#pillGrad1)" stroke="#9333ea" stroke-width="1"/>
-      <text x="50" y="21" text-anchor="middle" fill="#c084fc" font-size="13" font-family="sans-serif">💄 Cosmétics</text>
-    </g>
+  <!-- 10. Sports -->
+  <g transform="translate(1080,0)">
+    <circle cx="60" cy="80" r="32" fill="url(#iconBg)" stroke="#c9a227" stroke-width="1.2" stroke-opacity="0.6"/>
+    <text x="60" y="72" text-anchor="middle" font-size="20" fill="#c9a227" fill-opacity="0.9">⚽</text>
+    <text x="60" y="124" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="9.5" font-weight="500" letter-spacing="0.5" fill="#c9a227" fill-opacity="0.75">Sports</text>
   </g>
 
-  <!-- Bottom stat line -->
-  <text x="500" y="105" text-anchor="middle" fill="#374151" font-size="10" font-family="monospace">10 INDUSTRIES  ·  $14T+ MARKET  ·  AI-POWERED CLASSIFICATION  ·  &lt;3s RESPONSE</text>
+  <!-- Vertical separators -->
+  <line x1="120" y1="30" x2="120" y2="130" stroke="#c9a227" stroke-width="0.5" stroke-opacity="0.25"/>
+  <line x1="240" y1="30" x2="240" y2="130" stroke="#c9a227" stroke-width="0.5" stroke-opacity="0.25"/>
+  <line x1="360" y1="30" x2="360" y2="130" stroke="#c9a227" stroke-width="0.5" stroke-opacity="0.25"/>
+  <line x1="480" y1="30" x2="480" y2="130" stroke="#c9a227" stroke-width="0.5" stroke-opacity="0.25"/>
+  <line x1="600" y1="30" x2="600" y2="130" stroke="#c9a227" stroke-width="0.5" stroke-opacity="0.25"/>
+  <line x1="720" y1="30" x2="720" y2="130" stroke="#c9a227" stroke-width="0.5" stroke-opacity="0.25"/>
+  <line x1="840" y1="30" x2="840" y2="130" stroke="#c9a227" stroke-width="0.5" stroke-opacity="0.25"/>
+  <line x1="960" y1="30" x2="960" y2="130" stroke="#c9a227" stroke-width="0.5" stroke-opacity="0.25"/>
+  <line x1="1080" y1="30" x2="1080" y2="130" stroke="#c9a227" stroke-width="0.5" stroke-opacity="0.25"/>
 </svg>

From 50bbfc4b04207a7f274cd523771a1e80ed8474a9 Mon Sep 17 00:00:00 2001
From: Z <219363113+Z-kie@users.noreply.github.com>
Date: Sun, 29 Mar 2026 19:07:24 -0400
Subject: [PATCH 4/5] feat: add how-it-works diagram SVG

---
 public/images/how-it-works.svg | 173 +++++++++++++++++++--------------
 1 file changed, 100 insertions(+), 73 deletions(-)

diff --git a/public/images/how-it-works.svg b/public/images/how-it-works.svg
index 9d8d8fb..61f57cb 100644
--- a/public/images/how-it-works.svg
+++ b/public/images/how-it-works.svg
@@ -1,95 +1,122 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 280" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 300" width="900" height="300">
   <defs>
-    <linearGradient id="purpleGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#9333ea"/>
-      <stop offset="100%" style="stop-color:#7c3aed"/>
+    <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0d0b00"/>
+      <stop offset="100%" stop-color="#080700"/>
     </linearGradient>
-    <linearGradient id="greenGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#16a34a"/>
-      <stop offset="100%" style="stop-color:#15803d"/>
+    <linearGradient id="goldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#ffd700"/>
+      <stop offset="100%" stop-color="#c9a227"/>
     </linearGradient>
-    <linearGradient id="arrowGrad" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#9333ea"/>
-      <stop offset="100%" style="stop-color:#16a34a"/>
+    <linearGradient id="cardGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#1e1600"/>
+      <stop offset="100%" stop-color="#100d00"/>
     </linearGradient>
-    <linearGradient id="bgStep" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#1a0a2e;stop-opacity:1"/>
-      <stop offset="100%" style="stop-color:#0a1a0a;stop-opacity:1"/>
+    <linearGradient id="arrowGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#c9a227" stop-opacity="0.8"/>
+      <stop offset="100%" stop-color="#ffd700" stop-opacity="0.9"/>
     </linearGradient>
-    <filter id="nodeShadow">
-      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#9333ea" flood-opacity="0.3"/>
+    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
     </filter>
+    <filter id="softGlow">
+      <feGaussianBlur stdDeviation="6" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+    <pattern id="dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+      <circle cx="10" cy="10" r="0.8" fill="#c9a227" fill-opacity="0.12"/>
+    </pattern>
   </defs>
 
   <!-- Background -->
-  <rect width="900" height="280" fill="#0f0f1a" rx="16"/>
+  <rect width="900" height="300" fill="url(#bgGrad)"/>
+  <rect width="900" height="300" fill="url(#dots)"/>
+
+  <!-- Section title -->
+  <text x="450" y="36" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="13" font-weight="700" letter-spacing="3" fill="#c9a227" fill-opacity="0.7">HOW IT WORKS</text>
+  <line x1="180" y1="44" x2="720" y2="44" stroke="#c9a227" stroke-width="0.5" stroke-opacity="0.3"/>
 
-  <!-- Step 1 -->
-  <g transform="translate(70, 40)">
+  <!-- ─── STEP 1: Upload Product ─── -->
+  <g transform="translate(60,60)">
     <!-- Card -->
-    <rect width="200" height="200" rx="16" fill="url(#bgStep)" stroke="#9333ea" stroke-width="1.5" filter="url(#nodeShadow)"/>
-    <!-- Step number circle -->
-    <circle cx="100" cy="50" r="30" fill="url(#purpleGrad)"/>
-    <text x="100" y="57" text-anchor="middle" fill="white" font-size="22" font-weight="bold" font-family="sans-serif">1</text>
+    <rect x="0" y="0" width="210" height="200" rx="12" fill="url(#cardGrad)" stroke="#c9a227" stroke-width="1.5" stroke-opacity="0.5"/>
+    <!-- Number badge -->
+    <circle cx="32" cy="32" r="18" fill="url(#goldGrad)" filter="url(#glow)"/>
+    <text x="32" y="38" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="16" font-weight="800" fill="#0d0b00">1</text>
     <!-- Upload icon -->
-    <g transform="translate(75, 90)" opacity="0.9">
-      <rect width="50" height="40" rx="6" fill="#2d1054" stroke="#a855f7" stroke-width="1.5"/>
-      <path d="M25 30 L25 18 M25 18 L19 24 M25 18 L31 24" stroke="#c084fc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-      <line x1="14" y1="34" x2="36" y2="34" stroke="#c084fc" stroke-width="1.5" stroke-linecap="round"/>
-    </g>
-    <!-- Label -->
-    <text x="100" y="155" text-anchor="middle" fill="white" font-size="15" font-weight="bold" font-family="sans-serif">Upload Product</text>
-    <text x="100" y="173" text-anchor="middle" fill="#9ca3af" font-size="11" font-family="sans-serif">Photo · Description</text>
-    <text x="100" y="188" text-anchor="middle" fill="#9ca3af" font-size="11" font-family="sans-serif">Any Industry</text>
+    <rect x="75" y="55" width="60" height="50" rx="8" fill="#1a1400" stroke="#c9a227" stroke-width="1.5" stroke-opacity="0.6"/>
+    <path d="M105,75 L105,90 M98,82 L105,75 L112,82" stroke="#ffd700" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+    <line x1="90" y1="98" x2="120" y2="98" stroke="#c9a227" stroke-width="1.5" stroke-opacity="0.7"/>
+    <!-- Text -->
+    <text x="105" y="130" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="14" font-weight="700" fill="#ffd700">Upload Product</text>
+    <text x="105" y="150" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="10.5" fill="#c9a227" fill-opacity="0.7">Scan or enter</text>
+    <text x="105" y="165" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="10.5" fill="#c9a227" fill-opacity="0.7">product details</text>
+    <text x="105" y="180" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="10.5" fill="#c9a227" fill-opacity="0.7">onto the chain</text>
   </g>
 
-  <!-- Arrow 1 -->
-  <g transform="translate(285, 130)">
-    <path d="M0 10 L80 10" stroke="url(#arrowGrad)" stroke-width="2.5" stroke-linecap="round"/>
-    <polygon points="80,10 68,4 68,16" fill="#7c3aed"/>
-    <!-- AI label -->
-    <rect x="15" y="-18" width="50" height="18" rx="9" fill="#1e0840" stroke="#9333ea" stroke-width="1"/>
-    <text x="40" y="-5" text-anchor="middle" fill="#c084fc" font-size="9" font-family="monospace" font-weight="bold">AI ≪3s</text>
+  <!-- Arrow 1 → 2 -->
+  <g transform="translate(278,145)">
+    <line x1="0" y1="0" x2="80" y2="0" stroke="url(#arrowGrad)" stroke-width="2" stroke-dasharray="6 4"/>
+    <polygon points="80,0 70,-5 70,5" fill="#ffd700"/>
+    <!-- Top label -->
+    <text x="40" y="-10" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="8.5" fill="#c9a227" fill-opacity="0.6" letter-spacing="1">SECURE</text>
   </g>
 
-  <!-- Step 2 -->
-  <g transform="translate(380, 40)">
-    <rect width="200" height="200" rx="16" fill="url(#bgStep)" stroke="#7c3aed" stroke-width="1.5" filter="url(#nodeShadow)"/>
-    <circle cx="100" cy="50" r="30" fill="url(#purpleGrad)"/>
-    <text x="100" y="57" text-anchor="middle" fill="white" font-size="22" font-weight="bold" font-family="sans-serif">2</text>
-    <!-- Blockchain icon -->
-    <g transform="translate(65, 88)" opacity="0.9">
-      <rect x="0" y="10" width="28" height="22" rx="4" fill="#1e0840" stroke="#a855f7" stroke-width="1.5"/>
-      <rect x="32" y="0" width="28" height="22" rx="4" fill="#1e0840" stroke="#a855f7" stroke-width="1.5"/>
-      <rect x="32" y="26" width="28" height="22" rx="4" fill="#1e0840" stroke="#a855f7" stroke-width="1.5"/>
-      <line x1="28" y1="21" x2="32" y2="11" stroke="#c084fc" stroke-width="1.5"/>
-      <line x1="28" y1="21" x2="32" y2="37" stroke="#c084fc" stroke-width="1.5"/>
-    </g>
-    <text x="100" y="155" text-anchor="middle" fill="white" font-size="15" font-weight="bold" font-family="sans-serif">Blockchain Register</text>
-    <text x="100" y="173" text-anchor="middle" fill="#9ca3af" font-size="11" font-family="sans-serif">TrueMark™ ID</text>
-    <text x="100" y="188" text-anchor="middle" fill="#9ca3af" font-size="11" font-family="sans-serif">Immutable Record</text>
+  <!-- ─── STEP 2: AI AutoFlow™ ─── -->
+  <g transform="translate(365,60)">
+    <!-- Card glow effect -->
+    <rect x="-4" y="-4" width="218" height="208" rx="14" fill="#c9a227" fill-opacity="0.06"/>
+    <!-- Card -->
+    <rect x="0" y="0" width="210" height="200" rx="12" fill="url(#cardGrad)" stroke="#ffd700" stroke-width="2"/>
+    <!-- Number badge -->
+    <circle cx="32" cy="32" r="18" fill="url(#goldGrad)" filter="url(#glow)"/>
+    <text x="32" y="38" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="16" font-weight="800" fill="#0d0b00">2</text>
+    <!-- AI icon (circuit brain) -->
+    <rect x="75" y="55" width="60" height="50" rx="8" fill="#1a1400" stroke="#ffd700" stroke-width="1.8"/>
+    <circle cx="105" cy="80" r="12" fill="none" stroke="#ffd700" stroke-width="1.5"/>
+    <line x1="93" y1="80" x2="75" y2="80" stroke="#ffd700" stroke-width="1.2"/>
+    <line x1="117" y1="80" x2="135" y2="80" stroke="#ffd700" stroke-width="1.2"/>
+    <line x1="105" y1="68" x2="105" y2="57" stroke="#ffd700" stroke-width="1.2"/>
+    <line x1="105" y1="92" x2="105" y2="103" stroke="#ffd700" stroke-width="1.2"/>
+    <circle cx="105" cy="80" r="4" fill="#ffd700"/>
+    <!-- Text -->
+    <text x="105" y="130" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="14" font-weight="700" fill="#ffd700">AI AutoFlow™</text>
+    <text x="105" y="150" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="10.5" fill="#c9a227" fill-opacity="0.7">Automated AI mints</text>
+    <text x="105" y="165" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="10.5" fill="#c9a227" fill-opacity="0.7">QRON identity token</text>
+    <text x="105" y="180" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="10.5" fill="#c9a227" fill-opacity="0.7">on-chain instantly</text>
+    <!-- Active badge -->
+    <rect x="62" y="198" width="86" height="16" rx="8" fill="#c9a227" fill-opacity="0.15" stroke="#c9a227" stroke-width="0.8"/>
+    <text x="105" y="210" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="8" font-weight="600" letter-spacing="1" fill="#ffd700">HIGHLIGHTED</text>
   </g>
 
-  <!-- Arrow 2 -->
-  <g transform="translate(595, 130)">
-    <path d="M0 10 L80 10" stroke="url(#arrowGrad)" stroke-width="2.5" stroke-linecap="round"/>
-    <polygon points="80,10 68,4 68,16" fill="#16a34a"/>
-    <rect x="15" y="-18" width="50" height="18" rx="9" fill="#0a1f0a" stroke="#16a34a" stroke-width="1"/>
-    <text x="40" y="-5" text-anchor="middle" fill="#4ade80" font-size="9" font-family="monospace" font-weight="bold">INSTANT</text>
+  <!-- Arrow 2 → 3 -->
+  <g transform="translate(583,145)">
+    <line x1="0" y1="0" x2="80" y2="0" stroke="url(#arrowGrad)" stroke-width="2" stroke-dasharray="6 4"/>
+    <polygon points="80,0 70,-5 70,5" fill="#ffd700"/>
+    <text x="40" y="-10" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="8.5" fill="#c9a227" fill-opacity="0.6" letter-spacing="1">INSTANT</text>
   </g>
 
-  <!-- Step 3 -->
-  <g transform="translate(690, 40)">
-    <rect width="200" height="200" rx="16" fill="url(#bgStep)" stroke="#16a34a" stroke-width="1.5" filter="url(#nodeShadow)"/>
-    <circle cx="100" cy="50" r="30" fill="url(#greenGrad)"/>
-    <text x="100" y="57" text-anchor="middle" fill="white" font-size="22" font-weight="bold" font-family="sans-serif">3</text>
-    <!-- Verify checkmark icon -->
-    <g transform="translate(72, 88)" opacity="0.9">
-      <circle cx="28" cy="22" r="22" fill="#0a2a0a" stroke="#16a34a" stroke-width="2"/>
-      <path d="M16 22 L24 30 L40 14" stroke="#4ade80" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
-    </g>
-    <text x="100" y="155" text-anchor="middle" fill="white" font-size="15" font-weight="bold" font-family="sans-serif">Verify Anywhere</text>
-    <text x="100" y="173" text-anchor="middle" fill="#9ca3af" font-size="11" font-family="sans-serif">Public · Instant</text>
-    <text x="100" y="188" text-anchor="middle" fill="#9ca3af" font-size="11" font-family="sans-serif">No Account Needed</text>
+  <!-- ─── STEP 3: Verify Anywhere ─── -->
+  <g transform="translate(670,60)">
+    <!-- Card -->
+    <rect x="0" y="0" width="210" height="200" rx="12" fill="url(#cardGrad)" stroke="#c9a227" stroke-width="1.5" stroke-opacity="0.5"/>
+    <!-- Number badge -->
+    <circle cx="32" cy="32" r="18" fill="url(#goldGrad)" filter="url(#glow)"/>
+    <text x="32" y="38" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="16" font-weight="800" fill="#0d0b00">3</text>
+    <!-- Verify icon (checkmark shield) -->
+    <rect x="75" y="55" width="60" height="50" rx="8" fill="#1a1400" stroke="#c9a227" stroke-width="1.5" stroke-opacity="0.6"/>
+    <path d="M105,62 L123,68 L123,82 Q123,93 105,98 Q87,93 87,82 L87,68 Z" fill="none" stroke="#c9a227" stroke-width="1.8"/>
+    <path d="M96,80 L102,86 L114,74" stroke="#ffd700" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+    <!-- Text -->
+    <text x="105" y="130" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="14" font-weight="700" fill="#ffd700">Verify Anywhere</text>
+    <text x="105" y="150" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="10.5" fill="#c9a227" fill-opacity="0.7">Scan QRON code</text>
+    <text x="105" y="165" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="10.5" fill="#c9a227" fill-opacity="0.7">to verify product</text>
+    <text x="105" y="180" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="10.5" fill="#c9a227" fill-opacity="0.7">authenticity globally</text>
   </g>
+
+  <!-- Bottom label row -->
+  <text x="165" y="285" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="9" letter-spacing="1.5" fill="#c9a227" fill-opacity="0.45">PRODUCT OWNERS</text>
+  <text x="470" y="285" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="9" letter-spacing="1.5" fill="#c9a227" fill-opacity="0.45">BLOCKCHAIN PROTOCOL</text>
+  <text x="775" y="285" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="9" letter-spacing="1.5" fill="#c9a227" fill-opacity="0.45">CONSUMERS &amp; AUDITORS</text>
 </svg>

From be5069d279413b7b4e9f60e3e2fc977dd8f766bd Mon Sep 17 00:00:00 2001
From: Z <219363113+Z-kie@users.noreply.github.com>
Date: Sun, 29 Mar 2026 19:07:25 -0400
Subject: [PATCH 5/5] feat: add OG social preview image SVG

---
 public/images/og-image.svg | 122 +++++++++++++++++++++++++++++++++++++
 1 file changed, 122 insertions(+)
 create mode 100644 public/images/og-image.svg

diff --git a/public/images/og-image.svg b/public/images/og-image.svg
new file mode 100644
index 0000000..95997fb
--- /dev/null
+++ b/public/images/og-image.svg
@@ -0,0 +1,122 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" width="1200" height="630">
+  <defs>
+    <radialGradient id="bgGlow" cx="30%" cy="50%" r="60%">
+      <stop offset="0%" stop-color="#1e1600"/>
+      <stop offset="50%" stop-color="#0d0b00"/>
+      <stop offset="100%" stop-color="#050400"/>
+    </radialGradient>
+    <radialGradient id="shieldAura" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#ffd700" stop-opacity="0.18"/>
+      <stop offset="100%" stop-color="#c9a227" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="titleGold" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#ffd700"/>
+      <stop offset="50%" stop-color="#e8c547"/>
+      <stop offset="100%" stop-color="#c9a227"/>
+    </linearGradient>
+    <linearGradient id="shieldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#ffd700"/>
+      <stop offset="100%" stop-color="#a07d10"/>
+    </linearGradient>
+    <linearGradient id="barGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#c9a227"/>
+      <stop offset="100%" stop-color="#ffd700"/>
+    </linearGradient>
+    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="4" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+    <pattern id="hex" x="0" y="0" width="44" height="50" patternUnits="userSpaceOnUse">
+      <polygon points="22,2 42,13 42,37 22,48 2,37 2,13" fill="none" stroke="#c9a227" stroke-width="0.4" stroke-opacity="0.1"/>
+    </pattern>
+    <clipPath id="leftHalf">
+      <rect x="0" y="0" width="480" height="630"/>
+    </clipPath>
+  </defs>
+
+  <!-- Background -->
+  <rect width="1200" height="630" fill="url(#bgGlow)"/>
+  <rect width="1200" height="630" fill="url(#hex)"/>
+
+  <!-- Left panel shield illustration -->
+  <ellipse cx="260" cy="315" rx="200" ry="200" fill="url(#shieldAura)"/>
+
+  <!-- Shield shape -->
+  <path d="M260,130 L380,170 L380,330 Q380,430 260,490 Q140,430 140,330 L140,170 Z" fill="#0d0b00" stroke="url(#shieldGrad)" stroke-width="3" filter="url(#glow)"/>
+  <path d="M260,155 L360,190 L360,330 Q360,415 260,465 Q160,415 160,330 L160,190 Z" fill="none" stroke="#c9a227" stroke-width="1" stroke-opacity="0.4"/>
+
+  <!-- Shield chain links -->
+  <rect x="215" y="268" width="44" height="24" rx="12" fill="none" stroke="url(#shieldGrad)" stroke-width="3" filter="url(#glow)"/>
+  <rect x="260" y="284" width="44" height="24" rx="12" fill="none" stroke="url(#shieldGrad)" stroke-width="3" filter="url(#glow)"/>
+  <rect x="215" y="300" width="44" height="24" rx="12" fill="none" stroke="url(#shieldGrad)" stroke-width="3" filter="url(#glow)"/>
+  <rect x="260" y="316" width="44" height="24" rx="12" fill="none" stroke="url(#shieldGrad)" stroke-width="3" filter="url(#glow)"/>
+
+  <!-- Shield lock -->
+  <rect x="243" y="336" width="34" height="28" rx="4" fill="#0d0b00" stroke="url(#shieldGrad)" stroke-width="2"/>
+  <path d="M250,336 L250,326 Q250,312 260,312 Q270,312 270,326 L270,336" fill="none" stroke="url(#shieldGrad)" stroke-width="2"/>
+  <circle cx="260" cy="350" r="5" fill="url(#shieldGrad)"/>
+
+  <!-- Crown on shield -->
+  <path d="M235,162 L247,176 L260,156 L273,176 L285,162" fill="none" stroke="url(#shieldGrad)" stroke-width="2.5" stroke-linejoin="round" filter="url(#glow)"/>
+  <circle cx="235" cy="162" r="3" fill="#ffd700"/>
+  <circle cx="260" cy="156" r="3" fill="#ffd700"/>
+  <circle cx="285" cy="162" r="3" fill="#ffd700"/>
+
+  <!-- Vertical divider -->
+  <line x1="490" y1="50" x2="490" y2="580" stroke="#c9a227" stroke-width="0.8" stroke-opacity="0.3"/>
+
+  <!-- Right panel: Text content -->
+  <!-- Protocol badge -->
+  <rect x="540" y="80" width="160" height="26" rx="13" fill="#1a1400" stroke="#c9a227" stroke-width="1" stroke-opacity="0.7"/>
+  <circle cx="558" cy="93" r="4" fill="#ffd700"/>
+  <text x="590" y="98" font-family="'Inter','Helvetica Neue',sans-serif" font-size="10" font-weight="600" letter-spacing="2" fill="#c9a227">BLOCKCHAIN PROTOCOL</text>
+
+  <!-- Main title -->
+  <text x="540" y="175" font-family="'Inter','Helvetica Neue',sans-serif" font-size="76" font-weight="900" fill="url(#titleGold)" filter="url(#glow)">Authi</text>
+  <text x="540" y="255" font-family="'Inter','Helvetica Neue',sans-serif" font-size="76" font-weight="900" fill="#ffffff" fill-opacity="0.95">Chain</text>
+
+  <!-- Subtitle -->
+  <text x="540" y="300" font-family="'Inter','Helvetica Neue',sans-serif" font-size="18" fill="#c9a227" fill-opacity="0.8">Product Authentication at Scale</text>
+
+  <!-- Gold divider -->
+  <rect x="540" y="318" width="280" height="2" rx="1" fill="url(#barGrad)"/>
+
+  <!-- Stats row -->
+  <g transform="translate(540,345)">
+    <!-- Stat 1 -->
+    <text x="0" y="26" font-family="'Inter','Helvetica Neue',sans-serif" font-size="28" font-weight="800" fill="#ffd700">10</text>
+    <text x="0" y="44" font-family="'Inter','Helvetica Neue',sans-serif" font-size="10" fill="#c9a227" fill-opacity="0.65" letter-spacing="1">INDUSTRIES</text>
+    <!-- Divider -->
+    <line x1="80" y1="10" x2="80" y2="50" stroke="#c9a227" stroke-width="0.8" stroke-opacity="0.35"/>
+    <!-- Stat 2 -->
+    <text x="100" y="26" font-family="'Inter','Helvetica Neue',sans-serif" font-size="28" font-weight="800" fill="#ffd700">$14T+</text>
+    <text x="100" y="44" font-family="'Inter','Helvetica Neue',sans-serif" font-size="10" fill="#c9a227" fill-opacity="0.65" letter-spacing="1">MARKET SIZE</text>
+    <!-- Divider -->
+    <line x1="230" y1="10" x2="230" y2="50" stroke="#c9a227" stroke-width="0.8" stroke-opacity="0.35"/>
+    <!-- Stat 3 -->
+    <text x="250" y="26" font-family="'Inter','Helvetica Neue',sans-serif" font-size="28" font-weight="800" fill="#ffd700">98%</text>
+    <text x="250" y="44" font-family="'Inter','Helvetica Neue',sans-serif" font-size="10" fill="#c9a227" fill-opacity="0.65" letter-spacing="1">ACCURACY</text>
+  </g>
+
+  <!-- Feature bullets -->
+  <g transform="translate(540,430)">
+    <circle cx="8" cy="8" r="3.5" fill="#c9a227"/>
+    <text x="22" y="13" font-family="'Inter','Helvetica Neue',sans-serif" font-size="13" fill="#c9a227" fill-opacity="0.8">AI AutoFlow™ minting technology</text>
+  </g>
+  <g transform="translate(540,460)">
+    <circle cx="8" cy="8" r="3.5" fill="#c9a227"/>
+    <text x="22" y="13" font-family="'Inter','Helvetica Neue',sans-serif" font-size="13" fill="#c9a227" fill-opacity="0.8">QRON QR code on every product</text>
+  </g>
+  <g transform="translate(540,490)">
+    <circle cx="8" cy="8" r="3.5" fill="#c9a227"/>
+    <text x="22" y="13" font-family="'Inter','Helvetica Neue',sans-serif" font-size="13" fill="#c9a227" fill-opacity="0.8">Verify anywhere, instantly</text>
+  </g>
+
+  <!-- URL -->
+  <text x="540" y="548" font-family="'Inter','Helvetica Neue',sans-serif" font-size="13" fill="#c9a227" fill-opacity="0.5" letter-spacing="0.5">authichain.com</text>
+
+  <!-- Bottom protocol bar -->
+  <rect x="0" y="600" width="1200" height="30" fill="#c9a227" fill-opacity="0.08"/>
+  <rect x="0" y="600" width="1200" height="1.5" fill="url(#barGrad)"/>
+  <text x="600" y="620" text-anchor="middle" font-family="'Inter','Helvetica Neue',sans-serif" font-size="10" font-weight="600" letter-spacing="4" fill="#c9a227" fill-opacity="0.5">AUTHICHAIN PROTOCOL · POWERED BY QRON · BLOCKCHAIN VERIFIED</text>
+</svg>