update logos and image strucutre

apps/web/public/images/animations/anim1_pulse.svg

@@ -0,0 +1,127 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  <defs>
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="1.5" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <filter id="pulseGlow">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <!-- The Z-trace path as reusable definition -->
+    <path id="trace" d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 52"/>
+  </defs>
+
+  <!-- Background -->
+  <rect width="200" height="200" rx="26" fill="#0a0a0a"/>
+
+  <!-- Base trace (dim) -->
+  <use href="#trace" fill="none" stroke="#45c99e" stroke-width="2" opacity="0.2"
+       stroke-linecap="round" stroke-linejoin="round"/>
+
+  <!-- Pulse 1: bright traveling dash -->
+  <use href="#trace" fill="none" stroke="#45c99e" stroke-width="3" opacity="0.9"
+       stroke-linecap="round" stroke-linejoin="round" filter="url(#pulseGlow)"
+       stroke-dasharray="30 568">
+    <animate attributeName="stroke-dashoffset" from="0" to="-598" dur="3s" repeatCount="indefinite"/>
+  </use>
+
+  <!-- Pulse 2: offset by half -->
+  <use href="#trace" fill="none" stroke="#7ddfbe" stroke-width="2" opacity="0.6"
+       stroke-linecap="round" stroke-linejoin="round" filter="url(#pulseGlow)"
+       stroke-dasharray="20 578">
+    <animate attributeName="stroke-dashoffset" from="-299" to="-897" dur="3s" repeatCount="indefinite"/>
+  </use>
+
+  <!-- Pulse 3: smaller, faster accent -->
+  <use href="#trace" fill="none" stroke="#ffffff" stroke-width="1.5" opacity="0.4"
+       stroke-linecap="round" stroke-linejoin="round"
+       stroke-dasharray="8 590">
+    <animate attributeName="stroke-dashoffset" from="-100" to="-698" dur="3s" repeatCount="indefinite"/>
+  </use>
+
+  <!-- Nodes that pulse as signal passes -->
+  <g filter="url(#pulseGlow)">
+    <!-- Entry node -->
+    <circle cx="20" cy="28" r="2.5" fill="#45c99e">
+      <animate attributeName="r" values="2.5;4.5;2.5" dur="3s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.5;1;0.5" dur="3s" repeatCount="indefinite"/>
+    </circle>
+    <!-- Top chevron -->
+    <circle cx="92" cy="34" r="2" fill="#45c99e">
+      <animate attributeName="r" values="2;3.5;2" dur="3s" begin="0.28s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.4;1;0.4" dur="3s" begin="0.28s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="108" cy="34" r="2" fill="#45c99e">
+      <animate attributeName="r" values="2;3.5;2" dur="3s" begin="0.33s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.4;1;0.4" dur="3s" begin="0.33s" repeatCount="indefinite"/>
+    </circle>
+    <!-- Top-right corner -->
+    <circle cx="178" cy="34" r="2.5" fill="#45c99e">
+      <animate attributeName="r" values="2.5;4.5;2.5" dur="3s" begin="0.55s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.5;1;0.5" dur="3s" begin="0.55s" repeatCount="indefinite"/>
+    </circle>
+    <!-- Right bend -->
+    <circle cx="172" cy="100" r="2.5" fill="#45c99e">
+      <animate attributeName="r" values="2.5;4.5;2.5" dur="3s" begin="0.9s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.5;1;0.5" dur="3s" begin="0.9s" repeatCount="indefinite"/>
+    </circle>
+    <!-- Center -->
+    <circle cx="100" cy="100" r="2.5" fill="#45c99e">
+      <animate attributeName="r" values="2.5;5;2.5" dur="3s" begin="1.25s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.4;1;0.4" dur="3s" begin="1.25s" repeatCount="indefinite"/>
+    </circle>
+    <!-- Left bend -->
+    <circle cx="28" cy="100" r="2.5" fill="#45c99e">
+      <animate attributeName="r" values="2.5;4.5;2.5" dur="3s" begin="1.55s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.5;1;0.5" dur="3s" begin="1.55s" repeatCount="indefinite"/>
+    </circle>
+    <!-- Bottom-left corner -->
+    <circle cx="22" cy="166" r="2.5" fill="#45c99e">
+      <animate attributeName="r" values="2.5;4.5;2.5" dur="3s" begin="1.9s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.5;1;0.5" dur="3s" begin="1.9s" repeatCount="indefinite"/>
+    </circle>
+    <!-- Bottom chevron -->
+    <circle cx="92" cy="166" r="2" fill="#45c99e">
+      <animate attributeName="r" values="2;3.5;2" dur="3s" begin="2.2s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.4;1;0.4" dur="3s" begin="2.2s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="108" cy="166" r="2" fill="#45c99e">
+      <animate attributeName="r" values="2;3.5;2" dur="3s" begin="2.25s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.4;1;0.4" dur="3s" begin="2.25s" repeatCount="indefinite"/>
+    </circle>
+    <!-- Exit node -->
+    <circle cx="166" cy="172" r="2.5" fill="#45c99e">
+      <animate attributeName="r" values="2.5;4.5;2.5" dur="3s" begin="2.5s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.5;1;0.5" dur="3s" begin="2.5s" repeatCount="indefinite"/>
+    </circle>
+  </g>
+
+  <!-- Border -->
+  <rect x="14" y="14" width="172" height="172" rx="16" fill="none"
+        stroke="#45c99e" stroke-width="3.5" filter="url(#glow)" opacity="0.7"/>
+
+  <!-- S -->
+  <path d="M 78,36 H 36 V 58 H 78 V 82 H 36"
+        fill="none" stroke="#35925c" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- U -->
+  <path d="m 118,36 v 34 c 0,12.15 9.85,14 22,14 12.15,0 22,-1.85 22,-14 V 36"
+        fill="none" stroke="#e8689e" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- C -->
+  <path d="M 78,118 H 36 V 164 H 78"
+        fill="none" stroke="#4aade0" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- H -->
+  <path d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162"
+        fill="none" stroke="#45c99e" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

apps/web/public/images/animations/anim1_pulse_light.svg

@@ -0,0 +1,127 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  <defs>
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="1.5" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <filter id="pulseGlow">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <!-- The Z-trace path as reusable definition -->
+    <path id="trace" d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 52"/>
+  </defs>
+
+  <!-- Background -->
+  <rect width="200" height="200" rx="26" fill="#f5f5f5"/>
+
+  <!-- Base trace (dim) -->
+  <use href="#trace" fill="none" stroke="#1a7a5a" stroke-width="2" opacity="0.2"
+       stroke-linecap="round" stroke-linejoin="round"/>
+
+  <!-- Pulse 1: bright traveling dash -->
+  <use href="#trace" fill="none" stroke="#1a7a5a" stroke-width="3" opacity="0.7"
+       stroke-linecap="round" stroke-linejoin="round" filter="url(#pulseGlow)"
+       stroke-dasharray="30 568">
+    <animate attributeName="stroke-dashoffset" from="0" to="-598" dur="3s" repeatCount="indefinite"/>
+  </use>
+
+  <!-- Pulse 2: offset by half -->
+  <use href="#trace" fill="none" stroke="#2a9a6a" stroke-width="2" opacity="0.5"
+       stroke-linecap="round" stroke-linejoin="round" filter="url(#pulseGlow)"
+       stroke-dasharray="20 578">
+    <animate attributeName="stroke-dashoffset" from="-299" to="-897" dur="3s" repeatCount="indefinite"/>
+  </use>
+
+  <!-- Pulse 3: smaller, faster accent -->
+  <use href="#trace" fill="none" stroke="#333333" stroke-width="1.5" opacity="0.3"
+       stroke-linecap="round" stroke-linejoin="round"
+       stroke-dasharray="8 590">
+    <animate attributeName="stroke-dashoffset" from="-100" to="-698" dur="3s" repeatCount="indefinite"/>
+  </use>
+
+  <!-- Nodes that pulse as signal passes -->
+  <g filter="url(#pulseGlow)">
+    <!-- Entry node -->
+    <circle cx="20" cy="28" r="2.5" fill="#1a7a5a">
+      <animate attributeName="r" values="2.5;4.5;2.5" dur="3s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.5;1;0.5" dur="3s" repeatCount="indefinite"/>
+    </circle>
+    <!-- Top chevron -->
+    <circle cx="92" cy="34" r="2" fill="#1a7a5a">
+      <animate attributeName="r" values="2;3.5;2" dur="3s" begin="0.28s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.4;1;0.4" dur="3s" begin="0.28s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="108" cy="34" r="2" fill="#1a7a5a">
+      <animate attributeName="r" values="2;3.5;2" dur="3s" begin="0.33s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.4;1;0.4" dur="3s" begin="0.33s" repeatCount="indefinite"/>
+    </circle>
+    <!-- Top-right corner -->
+    <circle cx="178" cy="34" r="2.5" fill="#1a7a5a">
+      <animate attributeName="r" values="2.5;4.5;2.5" dur="3s" begin="0.55s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.5;1;0.5" dur="3s" begin="0.55s" repeatCount="indefinite"/>
+    </circle>
+    <!-- Right bend -->
+    <circle cx="172" cy="100" r="2.5" fill="#1a7a5a">
+      <animate attributeName="r" values="2.5;4.5;2.5" dur="3s" begin="0.9s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.5;1;0.5" dur="3s" begin="0.9s" repeatCount="indefinite"/>
+    </circle>
+    <!-- Center -->
+    <circle cx="100" cy="100" r="2.5" fill="#1a7a5a">
+      <animate attributeName="r" values="2.5;5;2.5" dur="3s" begin="1.25s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.4;1;0.4" dur="3s" begin="1.25s" repeatCount="indefinite"/>
+    </circle>
+    <!-- Left bend -->
+    <circle cx="28" cy="100" r="2.5" fill="#1a7a5a">
+      <animate attributeName="r" values="2.5;4.5;2.5" dur="3s" begin="1.55s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.5;1;0.5" dur="3s" begin="1.55s" repeatCount="indefinite"/>
+    </circle>
+    <!-- Bottom-left corner -->
+    <circle cx="22" cy="166" r="2.5" fill="#1a7a5a">
+      <animate attributeName="r" values="2.5;4.5;2.5" dur="3s" begin="1.9s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.5;1;0.5" dur="3s" begin="1.9s" repeatCount="indefinite"/>
+    </circle>
+    <!-- Bottom chevron -->
+    <circle cx="92" cy="166" r="2" fill="#1a7a5a">
+      <animate attributeName="r" values="2;3.5;2" dur="3s" begin="2.2s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.4;1;0.4" dur="3s" begin="2.2s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="108" cy="166" r="2" fill="#1a7a5a">
+      <animate attributeName="r" values="2;3.5;2" dur="3s" begin="2.25s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.4;1;0.4" dur="3s" begin="2.25s" repeatCount="indefinite"/>
+    </circle>
+    <!-- Exit node -->
+    <circle cx="166" cy="172" r="2.5" fill="#1a7a5a">
+      <animate attributeName="r" values="2.5;4.5;2.5" dur="3s" begin="2.5s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.5;1;0.5" dur="3s" begin="2.5s" repeatCount="indefinite"/>
+    </circle>
+  </g>
+
+  <!-- Border -->
+  <rect x="14" y="14" width="172" height="172" rx="16" fill="none"
+        stroke="#1a7a5a" stroke-width="3.5" filter="url(#glow)" opacity="0.5"/>
+
+  <!-- S -->
+  <path d="M 78,36 H 36 V 58 H 78 V 82 H 36"
+        fill="none" stroke="#1e6e45" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- U -->
+  <path d="m 118,36 v 34 c 0,12.15 9.85,14 22,14 12.15,0 22,-1.85 22,-14 V 36"
+        fill="none" stroke="#c44e7a" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- C -->
+  <path d="M 78,118 H 36 V 164 H 78"
+        fill="none" stroke="#2e85b8" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- H -->
+  <path d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162"
+        fill="none" stroke="#1a7a5a" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

apps/web/public/images/animations/anim3_matrix.svg

@@ -0,0 +1,205 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  <defs>
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="1.5" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <filter id="megaGlow">
+      <feGaussianBlur stdDeviation="5" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <filter id="warpGlow">
+      <feGaussianBlur stdDeviation="8" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <path id="trace" d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 52"/>
+
+    <!-- Animated gradient for border -->
+    <linearGradient id="shiftGrad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%">
+        <animate attributeName="stop-color" values="#35925c;#e8689e;#4aade0;#45c99e;#35925c" dur="4s" repeatCount="indefinite"/>
+      </stop>
+      <stop offset="50%">
+        <animate attributeName="stop-color" values="#4aade0;#45c99e;#e8689e;#35925c;#4aade0" dur="4s" repeatCount="indefinite"/>
+      </stop>
+      <stop offset="100%">
+        <animate attributeName="stop-color" values="#e8689e;#4aade0;#35925c;#e8689e;#e8689e" dur="4s" repeatCount="indefinite"/>
+      </stop>
+    </linearGradient>
+
+    <!-- Radial pulse for shockwaves -->
+    <radialGradient id="shockS" cx="57" cy="59" r="50" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#35925c" stop-opacity="0.6"/>
+      <stop offset="100%" stop-color="#35925c" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="shockU" cx="140" cy="55" r="50" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#e8689e" stop-opacity="0.6"/>
+      <stop offset="100%" stop-color="#e8689e" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="shockC" cx="57" cy="141" r="50" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#4aade0" stop-opacity="0.6"/>
+      <stop offset="100%" stop-color="#4aade0" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="shockH" cx="140" cy="141" r="50" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#45c99e" stop-opacity="0.6"/>
+      <stop offset="100%" stop-color="#45c99e" stop-opacity="0"/>
+    </radialGradient>
+
+    <clipPath id="roundClip">
+      <rect width="200" height="200" rx="26"/>
+    </clipPath>
+  </defs>
+
+  <!-- Background -->
+  <rect width="200" height="200" rx="26" fill="#050508"/>
+
+  <!-- Matrix rain columns (clipped to rounded rect) -->
+  <g clip-path="url(#roundClip)" opacity="0.12" font-family="'SF Mono','Fira Code',monospace" font-size="10" fill="#45c99e">
+    <text x="10" y="0"><animate attributeName="y" from="-20" to="220" dur="2.1s" repeatCount="indefinite"/>01</text>
+    <text x="25" y="0"><animate attributeName="y" from="-60" to="220" dur="1.8s" repeatCount="indefinite"/>{ }</text>
+    <text x="42" y="0"><animate attributeName="y" from="-40" to="220" dur="2.5s" repeatCount="indefinite"/>S</text>
+    <text x="58" y="0"><animate attributeName="y" from="-80" to="220" dur="1.6s" repeatCount="indefinite"/>10</text>
+    <text x="74" y="0"><animate attributeName="y" from="-10" to="220" dur="2.8s" repeatCount="indefinite"/>U</text>
+    <text x="90" y="0"><animate attributeName="y" from="-50" to="220" dur="2.0s" repeatCount="indefinite"/>0x</text>
+    <text x="106" y="0"><animate attributeName="y" from="-90" to="220" dur="1.7s" repeatCount="indefinite"/>C</text>
+    <text x="122" y="0"><animate attributeName="y" from="-30" to="220" dur="2.3s" repeatCount="indefinite"/>fn</text>
+    <text x="138" y="0"><animate attributeName="y" from="-70" to="220" dur="1.9s" repeatCount="indefinite"/>H</text>
+    <text x="154" y="0"><animate attributeName="y" from="-15" to="220" dur="2.6s" repeatCount="indefinite"/>;</text>
+    <text x="170" y="0"><animate attributeName="y" from="-55" to="220" dur="2.2s" repeatCount="indefinite"/>=></text>
+    <text x="185" y="0"><animate attributeName="y" from="-35" to="220" dur="1.5s" repeatCount="indefinite"/>[]</text>
+  </g>
+
+  <!-- Shockwave rings when letters appear -->
+  <circle cx="57" cy="59" r="0" fill="url(#shockS)" opacity="0">
+    <animate attributeName="r" values="0;0;0;60;0;0" keyTimes="0;0.14;0.15;0.25;0.26;1" dur="6s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;0.5;0;0;0" keyTimes="0;0.14;0.15;0.25;0.26;1" dur="6s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="140" cy="55" r="0" fill="url(#shockU)" opacity="0">
+    <animate attributeName="r" values="0;0;0;60;0;0" keyTimes="0;0.29;0.3;0.4;0.41;1" dur="6s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;0.5;0;0;0" keyTimes="0;0.29;0.3;0.4;0.41;1" dur="6s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="57" cy="141" r="0" fill="url(#shockC)" opacity="0">
+    <animate attributeName="r" values="0;0;0;60;0;0" keyTimes="0;0.44;0.45;0.55;0.56;1" dur="6s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;0.5;0;0;0" keyTimes="0;0.44;0.45;0.55;0.56;1" dur="6s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="140" cy="141" r="0" fill="url(#shockH)" opacity="0">
+    <animate attributeName="r" values="0;0;0;60;0;0" keyTimes="0;0.59;0.6;0.7;0.71;1" dur="6s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;0.5;0;0;0" keyTimes="0;0.59;0.6;0.7;0.71;1" dur="6s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Electrified circuit trace: multiple overlapping animated strokes -->
+  <use href="#trace" fill="none" stroke="#45c99e" stroke-width="2" opacity="0.25"
+       stroke-linecap="round" stroke-linejoin="round"/>
+
+  <!-- Fast pulse 1 -->
+  <use href="#trace" fill="none" stroke="#7ddfbe" stroke-width="3" opacity="0.8"
+       stroke-linecap="round" filter="url(#megaGlow)"
+       stroke-dasharray="15 583">
+    <animate attributeName="stroke-dashoffset" from="0" to="-598" dur="1.5s" repeatCount="indefinite"/>
+  </use>
+  <!-- Fast pulse 2 (opposite direction feel - offset) -->
+  <use href="#trace" fill="none" stroke="#ffffff" stroke-width="1.5" opacity="0.5"
+       stroke-linecap="round"
+       stroke-dasharray="5 593">
+    <animate attributeName="stroke-dashoffset" from="-200" to="-798" dur="1.5s" repeatCount="indefinite"/>
+  </use>
+  <!-- Crackle: erratic short dashes -->
+  <use href="#trace" fill="none" stroke="#45c99e" stroke-width="4" opacity="0.3"
+       stroke-linecap="round" filter="url(#glow)"
+       stroke-dasharray="3 40 8 60 2 80 5 400">
+    <animate attributeName="stroke-dashoffset" from="0" to="-598" dur="2.3s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0.3;0.6;0.1;0.5;0.2;0.3" dur="0.7s" repeatCount="indefinite"/>
+  </use>
+
+  <!-- Nodes: pulsing orbs with halos -->
+  <g filter="url(#megaGlow)">
+    <circle cx="20" cy="28" r="2.5" fill="#45c99e">
+      <animate attributeName="r" values="2;5;2" dur="1.5s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.6;1;0.6" dur="1.5s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="100" cy="100" r="3" fill="#ffffff">
+      <animate attributeName="r" values="3;7;3" dur="2s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.3;0.8;0.3" dur="2s" repeatCount="indefinite"/>
+      <animate attributeName="fill" values="#45c99e;#e8689e;#4aade0;#45c99e" dur="4s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="166" cy="172" r="2.5" fill="#45c99e">
+      <animate attributeName="r" values="2;5;2" dur="1.5s" begin="0.75s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.6;1;0.6" dur="1.5s" begin="0.75s" repeatCount="indefinite"/>
+    </circle>
+    <!-- Corner nodes -->
+    <circle cx="178" cy="34" r="2" fill="#e8689e">
+      <animate attributeName="r" values="2;4;2" dur="1.8s" begin="0.3s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="172" cy="100" r="2" fill="#4aade0">
+      <animate attributeName="r" values="2;4;2" dur="1.8s" begin="0.6s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="28" cy="100" r="2" fill="#e8689e">
+      <animate attributeName="r" values="2;4;2" dur="1.8s" begin="0.9s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="22" cy="166" r="2" fill="#4aade0">
+      <animate attributeName="r" values="2;4;2" dur="1.8s" begin="1.2s" repeatCount="indefinite"/>
+    </circle>
+  </g>
+
+  <!-- Color-shifting animated border -->
+  <rect x="14" y="14" width="172" height="172" rx="16" fill="none"
+        stroke="url(#shiftGrad)" stroke-width="3.5" filter="url(#glow)">
+    <animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite"/>
+  </rect>
+
+  <!-- S slams in with scale -->
+  <g transform-origin="57 59">
+    <animateTransform attributeName="transform" type="scale"
+                      values="0;0;1.15;1;1;1;0" keyTimes="0;0.14;0.17;0.2;0.85;0.95;1"
+                      dur="6s" repeatCount="indefinite"/>
+    <path d="M 78,36 H 36 V 58 H 78 V 82 H 36"
+          fill="none" stroke="#35925c" stroke-width="14"
+          stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"/>
+  </g>
+
+  <!-- U slams in -->
+  <g transform-origin="140 55">
+    <animateTransform attributeName="transform" type="scale"
+                      values="0;0;1.15;1;1;1;0" keyTimes="0;0.29;0.32;0.35;0.85;0.95;1"
+                      dur="6s" repeatCount="indefinite"/>
+    <path d="m 118,36 v 34 c 0,12.15 9.85,14 22,14 12.15,0 22,-1.85 22,-14 V 36"
+          fill="none" stroke="#e8689e" stroke-width="14"
+          stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"/>
+  </g>
+
+  <!-- C slams in -->
+  <g transform-origin="57 141">
+    <animateTransform attributeName="transform" type="scale"
+                      values="0;0;1.15;1;1;1;0" keyTimes="0;0.44;0.47;0.5;0.85;0.95;1"
+                      dur="6s" repeatCount="indefinite"/>
+    <path d="M 78,118 H 36 V 164 H 78"
+          fill="none" stroke="#4aade0" stroke-width="14"
+          stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"/>
+  </g>
+
+  <!-- H slams in -->
+  <g transform-origin="140 141">
+    <animateTransform attributeName="transform" type="scale"
+                      values="0;0;1.15;1;1;1;0" keyTimes="0;0.59;0.62;0.65;0.85;0.95;1"
+                      dur="6s" repeatCount="indefinite"/>
+    <path d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162"
+          fill="none" stroke="#45c99e" stroke-width="14"
+          stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"/>
+  </g>
+
+  <!-- Final flash on complete -->
+  <rect width="200" height="200" rx="26" fill="#ffffff" opacity="0">
+    <animate attributeName="opacity" values="0;0;0.15;0;0;0" keyTimes="0;0.64;0.66;0.72;0.95;1" dur="6s" repeatCount="indefinite"/>
+  </rect>
+</svg>

apps/web/public/images/animations/anim3_matrix_light.svg

@@ -0,0 +1,205 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  <defs>
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="1.5" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <filter id="megaGlow">
+      <feGaussianBlur stdDeviation="5" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <filter id="warpGlow">
+      <feGaussianBlur stdDeviation="8" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <path id="trace" d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 52"/>
+
+    <!-- Animated gradient for border -->
+    <linearGradient id="shiftGrad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%">
+        <animate attributeName="stop-color" values="#1e6e45;#c44e7a;#2e85b8;#1a7a5a;#1e6e45" dur="4s" repeatCount="indefinite"/>
+      </stop>
+      <stop offset="50%">
+        <animate attributeName="stop-color" values="#2e85b8;#1a7a5a;#c44e7a;#1e6e45;#2e85b8" dur="4s" repeatCount="indefinite"/>
+      </stop>
+      <stop offset="100%">
+        <animate attributeName="stop-color" values="#c44e7a;#2e85b8;#1e6e45;#c44e7a;#c44e7a" dur="4s" repeatCount="indefinite"/>
+      </stop>
+    </linearGradient>
+
+    <!-- Radial pulse for shockwaves -->
+    <radialGradient id="shockS" cx="57" cy="59" r="50" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#1e6e45" stop-opacity="0.4"/>
+      <stop offset="100%" stop-color="#1e6e45" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="shockU" cx="140" cy="55" r="50" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#c44e7a" stop-opacity="0.4"/>
+      <stop offset="100%" stop-color="#c44e7a" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="shockC" cx="57" cy="141" r="50" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#2e85b8" stop-opacity="0.4"/>
+      <stop offset="100%" stop-color="#2e85b8" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="shockH" cx="140" cy="141" r="50" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#1a7a5a" stop-opacity="0.4"/>
+      <stop offset="100%" stop-color="#1a7a5a" stop-opacity="0"/>
+    </radialGradient>
+
+    <clipPath id="roundClip">
+      <rect width="200" height="200" rx="26"/>
+    </clipPath>
+  </defs>
+
+  <!-- Background -->
+  <rect width="200" height="200" rx="26" fill="#f5f5f5"/>
+
+  <!-- Matrix rain columns (clipped to rounded rect) -->
+  <g clip-path="url(#roundClip)" opacity="0.1" font-family="'SF Mono','Fira Code',monospace" font-size="10" fill="#1a7a5a">
+    <text x="10" y="0"><animate attributeName="y" from="-20" to="220" dur="2.1s" repeatCount="indefinite"/>01</text>
+    <text x="25" y="0"><animate attributeName="y" from="-60" to="220" dur="1.8s" repeatCount="indefinite"/>{ }</text>
+    <text x="42" y="0"><animate attributeName="y" from="-40" to="220" dur="2.5s" repeatCount="indefinite"/>S</text>
+    <text x="58" y="0"><animate attributeName="y" from="-80" to="220" dur="1.6s" repeatCount="indefinite"/>10</text>
+    <text x="74" y="0"><animate attributeName="y" from="-10" to="220" dur="2.8s" repeatCount="indefinite"/>U</text>
+    <text x="90" y="0"><animate attributeName="y" from="-50" to="220" dur="2.0s" repeatCount="indefinite"/>0x</text>
+    <text x="106" y="0"><animate attributeName="y" from="-90" to="220" dur="1.7s" repeatCount="indefinite"/>C</text>
+    <text x="122" y="0"><animate attributeName="y" from="-30" to="220" dur="2.3s" repeatCount="indefinite"/>fn</text>
+    <text x="138" y="0"><animate attributeName="y" from="-70" to="220" dur="1.9s" repeatCount="indefinite"/>H</text>
+    <text x="154" y="0"><animate attributeName="y" from="-15" to="220" dur="2.6s" repeatCount="indefinite"/>;</text>
+    <text x="170" y="0"><animate attributeName="y" from="-55" to="220" dur="2.2s" repeatCount="indefinite"/>=></text>
+    <text x="185" y="0"><animate attributeName="y" from="-35" to="220" dur="1.5s" repeatCount="indefinite"/>[]</text>
+  </g>
+
+  <!-- Shockwave rings when letters appear -->
+  <circle cx="57" cy="59" r="0" fill="url(#shockS)" opacity="0">
+    <animate attributeName="r" values="0;0;0;60;0;0" keyTimes="0;0.14;0.15;0.25;0.26;1" dur="6s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;0.4;0;0;0" keyTimes="0;0.14;0.15;0.25;0.26;1" dur="6s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="140" cy="55" r="0" fill="url(#shockU)" opacity="0">
+    <animate attributeName="r" values="0;0;0;60;0;0" keyTimes="0;0.29;0.3;0.4;0.41;1" dur="6s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;0.4;0;0;0" keyTimes="0;0.29;0.3;0.4;0.41;1" dur="6s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="57" cy="141" r="0" fill="url(#shockC)" opacity="0">
+    <animate attributeName="r" values="0;0;0;60;0;0" keyTimes="0;0.44;0.45;0.55;0.56;1" dur="6s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;0.4;0;0;0" keyTimes="0;0.44;0.45;0.55;0.56;1" dur="6s" repeatCount="indefinite"/>
+  </circle>
+  <circle cx="140" cy="141" r="0" fill="url(#shockH)" opacity="0">
+    <animate attributeName="r" values="0;0;0;60;0;0" keyTimes="0;0.59;0.6;0.7;0.71;1" dur="6s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0;0;0.4;0;0;0" keyTimes="0;0.59;0.6;0.7;0.71;1" dur="6s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- Electrified circuit trace -->
+  <use href="#trace" fill="none" stroke="#1a7a5a" stroke-width="2" opacity="0.2"
+       stroke-linecap="round" stroke-linejoin="round"/>
+
+  <!-- Fast pulse 1 -->
+  <use href="#trace" fill="none" stroke="#2a9a6a" stroke-width="3" opacity="0.6"
+       stroke-linecap="round" filter="url(#megaGlow)"
+       stroke-dasharray="15 583">
+    <animate attributeName="stroke-dashoffset" from="0" to="-598" dur="1.5s" repeatCount="indefinite"/>
+  </use>
+  <!-- Fast pulse 2 -->
+  <use href="#trace" fill="none" stroke="#333333" stroke-width="1.5" opacity="0.35"
+       stroke-linecap="round"
+       stroke-dasharray="5 593">
+    <animate attributeName="stroke-dashoffset" from="-200" to="-798" dur="1.5s" repeatCount="indefinite"/>
+  </use>
+  <!-- Crackle -->
+  <use href="#trace" fill="none" stroke="#1a7a5a" stroke-width="4" opacity="0.2"
+       stroke-linecap="round" filter="url(#glow)"
+       stroke-dasharray="3 40 8 60 2 80 5 400">
+    <animate attributeName="stroke-dashoffset" from="0" to="-598" dur="2.3s" repeatCount="indefinite"/>
+    <animate attributeName="opacity" values="0.2;0.4;0.08;0.35;0.15;0.2" dur="0.7s" repeatCount="indefinite"/>
+  </use>
+
+  <!-- Nodes: pulsing orbs -->
+  <g filter="url(#megaGlow)">
+    <circle cx="20" cy="28" r="2.5" fill="#1a7a5a">
+      <animate attributeName="r" values="2;5;2" dur="1.5s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.6;1;0.6" dur="1.5s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="100" cy="100" r="3" fill="#666666">
+      <animate attributeName="r" values="3;7;3" dur="2s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.2;0.6;0.2" dur="2s" repeatCount="indefinite"/>
+      <animate attributeName="fill" values="#1a7a5a;#c44e7a;#2e85b8;#1a7a5a" dur="4s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="166" cy="172" r="2.5" fill="#1a7a5a">
+      <animate attributeName="r" values="2;5;2" dur="1.5s" begin="0.75s" repeatCount="indefinite"/>
+      <animate attributeName="opacity" values="0.6;1;0.6" dur="1.5s" begin="0.75s" repeatCount="indefinite"/>
+    </circle>
+    <!-- Corner nodes -->
+    <circle cx="178" cy="34" r="2" fill="#c44e7a">
+      <animate attributeName="r" values="2;4;2" dur="1.8s" begin="0.3s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="172" cy="100" r="2" fill="#2e85b8">
+      <animate attributeName="r" values="2;4;2" dur="1.8s" begin="0.6s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="28" cy="100" r="2" fill="#c44e7a">
+      <animate attributeName="r" values="2;4;2" dur="1.8s" begin="0.9s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="22" cy="166" r="2" fill="#2e85b8">
+      <animate attributeName="r" values="2;4;2" dur="1.8s" begin="1.2s" repeatCount="indefinite"/>
+    </circle>
+  </g>
+
+  <!-- Color-shifting animated border -->
+  <rect x="14" y="14" width="172" height="172" rx="16" fill="none"
+        stroke="url(#shiftGrad)" stroke-width="3.5" filter="url(#glow)">
+    <animate attributeName="opacity" values="0.5;0.8;0.5" dur="2s" repeatCount="indefinite"/>
+  </rect>
+
+  <!-- S slams in with scale -->
+  <g transform-origin="57 59">
+    <animateTransform attributeName="transform" type="scale"
+                      values="0;0;1.15;1;1;1;0" keyTimes="0;0.14;0.17;0.2;0.85;0.95;1"
+                      dur="6s" repeatCount="indefinite"/>
+    <path d="M 78,36 H 36 V 58 H 78 V 82 H 36"
+          fill="none" stroke="#1e6e45" stroke-width="14"
+          stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"/>
+  </g>
+
+  <!-- U slams in -->
+  <g transform-origin="140 55">
+    <animateTransform attributeName="transform" type="scale"
+                      values="0;0;1.15;1;1;1;0" keyTimes="0;0.29;0.32;0.35;0.85;0.95;1"
+                      dur="6s" repeatCount="indefinite"/>
+    <path d="m 118,36 v 34 c 0,12.15 9.85,14 22,14 12.15,0 22,-1.85 22,-14 V 36"
+          fill="none" stroke="#c44e7a" stroke-width="14"
+          stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"/>
+  </g>
+
+  <!-- C slams in -->
+  <g transform-origin="57 141">
+    <animateTransform attributeName="transform" type="scale"
+                      values="0;0;1.15;1;1;1;0" keyTimes="0;0.44;0.47;0.5;0.85;0.95;1"
+                      dur="6s" repeatCount="indefinite"/>
+    <path d="M 78,118 H 36 V 164 H 78"
+          fill="none" stroke="#2e85b8" stroke-width="14"
+          stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"/>
+  </g>
+
+  <!-- H slams in -->
+  <g transform-origin="140 141">
+    <animateTransform attributeName="transform" type="scale"
+                      values="0;0;1.15;1;1;1;0" keyTimes="0;0.59;0.62;0.65;0.85;0.95;1"
+                      dur="6s" repeatCount="indefinite"/>
+    <path d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162"
+          fill="none" stroke="#1a7a5a" stroke-width="14"
+          stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"/>
+  </g>
+
+  <!-- Final flash on complete -->
+  <rect width="200" height="200" rx="26" fill="#1a7a5a" opacity="0">
+    <animate attributeName="opacity" values="0;0;0.08;0;0;0" keyTimes="0;0.64;0.66;0.72;0.95;1" dur="6s" repeatCount="indefinite"/>
+  </rect>
+</svg>

apps/web/public/images/animations/anim_type_v4.svg

@@ -0,0 +1,125 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  <defs>
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="1.2" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <filter id="bigGlow">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <pattern id="scan" patternUnits="userSpaceOnUse" width="200" height="4">
+      <rect width="200" height="1.5" fill="#ffffff" opacity="0.012"/>
+    </pattern>
+    <clipPath id="roundClip"><rect width="200" height="200" rx="26"/></clipPath>
+  </defs>
+
+  <!-- Background -->
+  <rect width="200" height="200" rx="26" fill="#08090c"/>
+  <rect width="200" height="200" rx="26" fill="url(#scan)"/>
+
+  <!-- Border -->
+  <rect x="14" y="14" width="172" height="172" rx="16" fill="none"
+        stroke="#45c99e" stroke-width="3" filter="url(#glow)" opacity="0.6"/>
+
+  <!-- Command prompt text: "> such_" typed out -->
+  <g clip-path="url(#roundClip)">
+    <!-- Prompt caret ">" always visible during typing phase -->
+    <text x="30" y="110" font-family="'SF Mono','Fira Code','Courier New',monospace" 
+          font-size="26" font-weight="bold" fill="#45c99e" opacity="0">
+      <animate attributeName="opacity" values="0;0;0.5;0.5;0;0" 
+               keyTimes="0;0.04;0.05;0.35;0.38;1" dur="6s" repeatCount="indefinite"/>
+      >
+    </text>
+    <!-- "s" -->
+    <text x="52" y="110" font-family="'SF Mono','Fira Code','Courier New',monospace" 
+          font-size="26" font-weight="bold" fill="#35925c" opacity="0">
+      <animate attributeName="opacity" values="0;0;0.8;0.8;0;0" 
+               keyTimes="0;0.07;0.08;0.35;0.38;1" dur="6s" repeatCount="indefinite"/>
+      s
+    </text>
+    <!-- "u" -->
+    <text x="68" y="110" font-family="'SF Mono','Fira Code','Courier New',monospace" 
+          font-size="26" font-weight="bold" fill="#e8689e" opacity="0">
+      <animate attributeName="opacity" values="0;0;0.8;0.8;0;0" 
+               keyTimes="0;0.12;0.13;0.35;0.38;1" dur="6s" repeatCount="indefinite"/>
+      u
+    </text>
+    <!-- "c" -->
+    <text x="84" y="110" font-family="'SF Mono','Fira Code','Courier New',monospace" 
+          font-size="26" font-weight="bold" fill="#4aade0" opacity="0">
+      <animate attributeName="opacity" values="0;0;0.8;0.8;0;0" 
+               keyTimes="0;0.17;0.18;0.35;0.38;1" dur="6s" repeatCount="indefinite"/>
+      c
+    </text>
+    <!-- "h" -->
+    <text x="100" y="110" font-family="'SF Mono','Fira Code','Courier New',monospace" 
+          font-size="26" font-weight="bold" fill="#45c99e" opacity="0">
+      <animate attributeName="opacity" values="0;0;0.8;0.8;0;0" 
+               keyTimes="0;0.22;0.23;0.35;0.38;1" dur="6s" repeatCount="indefinite"/>
+      h
+    </text>
+
+    <!-- Blinking cursor for the command line -->
+    <rect x="116" y="90" width="13" height="22" rx="2" fill="#e8689e">
+      <animate attributeName="opacity" values="0;0;0.8;0;0.8;0;0.8;0;0.8;0;0" 
+               keyTimes="0;0.06;0.07;0.1;0.11;0.15;0.16;0.2;0.21;0.35;0.38"
+               dur="6s" repeatCount="indefinite"/>
+      <!-- Cursor follows text as it types -->
+      <animate attributeName="x" 
+               values="52;52;68;68;84;84;100;100;116;116" 
+               keyTimes="0;0.07;0.08;0.12;0.13;0.17;0.18;0.22;0.23;1"
+               dur="6s" repeatCount="indefinite"/>
+    </rect>
+  </g>
+
+  <!-- After typing, text fades and letters EXPAND into position -->
+  
+  <!-- S materializes -->
+  <path d="M 78,36 H 36 V 58 H 78 V 82 H 36"
+        fill="none" stroke="#35925c" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"
+        opacity="0">
+    <animate attributeName="opacity" values="0;0;1;1;0" 
+             keyTimes="0;0.38;0.45;0.88;0.96" dur="6s" repeatCount="indefinite"/>
+  </path>
+
+  <!-- U materializes -->
+  <path d="m 118,36 v 34 c 0,12.15 9.85,14 22,14 12.15,0 22,-1.85 22,-14 V 36"
+        fill="none" stroke="#e8689e" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"
+        opacity="0">
+    <animate attributeName="opacity" values="0;0;1;1;0" 
+             keyTimes="0;0.42;0.49;0.88;0.96" dur="6s" repeatCount="indefinite"/>
+  </path>
+
+  <!-- C materializes -->
+  <path d="M 78,118 H 36 V 164 H 78"
+        fill="none" stroke="#4aade0" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"
+        opacity="0">
+    <animate attributeName="opacity" values="0;0;1;1;0" 
+             keyTimes="0;0.46;0.53;0.88;0.96" dur="6s" repeatCount="indefinite"/>
+  </path>
+
+  <!-- H materializes -->
+  <path d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162"
+        fill="none" stroke="#45c99e" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"
+        opacity="0">
+    <animate attributeName="opacity" values="0;0;1;1;0" 
+             keyTimes="0;0.5;0.57;0.88;0.96" dur="6s" repeatCount="indefinite"/>
+  </path>
+
+  <!-- Flash when letters appear -->
+  <rect width="200" height="200" rx="26" fill="#45c99e" opacity="0">
+    <animate attributeName="opacity" values="0;0;0.08;0;0" 
+             keyTimes="0;0.37;0.39;0.44;1" dur="6s" repeatCount="indefinite"/>
+  </rect>
+</svg>

apps/web/public/images/animations/anim_type_v4_light.svg

@@ -0,0 +1,125 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  <defs>
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="1.2" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <filter id="bigGlow">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <pattern id="scan" patternUnits="userSpaceOnUse" width="200" height="4">
+      <rect width="200" height="1.5" fill="#000000" opacity="0.015"/>
+    </pattern>
+    <clipPath id="roundClip"><rect width="200" height="200" rx="26"/></clipPath>
+  </defs>
+
+  <!-- Background -->
+  <rect width="200" height="200" rx="26" fill="#f5f5f5"/>
+  <rect width="200" height="200" rx="26" fill="url(#scan)"/>
+
+  <!-- Border -->
+  <rect x="14" y="14" width="172" height="172" rx="16" fill="none"
+        stroke="#1a7a5a" stroke-width="3" filter="url(#glow)" opacity="0.4"/>
+
+  <!-- Command prompt text: "> such_" typed out -->
+  <g clip-path="url(#roundClip)">
+    <!-- Prompt caret ">" always visible during typing phase -->
+    <text x="30" y="110" font-family="'SF Mono','Fira Code','Courier New',monospace"
+          font-size="26" font-weight="bold" fill="#1a7a5a" opacity="0">
+      <animate attributeName="opacity" values="0;0;0.5;0.5;0;0"
+               keyTimes="0;0.04;0.05;0.35;0.38;1" dur="6s" repeatCount="indefinite"/>
+      >
+    </text>
+    <!-- "s" -->
+    <text x="52" y="110" font-family="'SF Mono','Fira Code','Courier New',monospace"
+          font-size="26" font-weight="bold" fill="#1e6e45" opacity="0">
+      <animate attributeName="opacity" values="0;0;0.8;0.8;0;0"
+               keyTimes="0;0.07;0.08;0.35;0.38;1" dur="6s" repeatCount="indefinite"/>
+      s
+    </text>
+    <!-- "u" -->
+    <text x="68" y="110" font-family="'SF Mono','Fira Code','Courier New',monospace"
+          font-size="26" font-weight="bold" fill="#c44e7a" opacity="0">
+      <animate attributeName="opacity" values="0;0;0.8;0.8;0;0"
+               keyTimes="0;0.12;0.13;0.35;0.38;1" dur="6s" repeatCount="indefinite"/>
+      u
+    </text>
+    <!-- "c" -->
+    <text x="84" y="110" font-family="'SF Mono','Fira Code','Courier New',monospace"
+          font-size="26" font-weight="bold" fill="#2e85b8" opacity="0">
+      <animate attributeName="opacity" values="0;0;0.8;0.8;0;0"
+               keyTimes="0;0.17;0.18;0.35;0.38;1" dur="6s" repeatCount="indefinite"/>
+      c
+    </text>
+    <!-- "h" -->
+    <text x="100" y="110" font-family="'SF Mono','Fira Code','Courier New',monospace"
+          font-size="26" font-weight="bold" fill="#1a7a5a" opacity="0">
+      <animate attributeName="opacity" values="0;0;0.8;0.8;0;0"
+               keyTimes="0;0.22;0.23;0.35;0.38;1" dur="6s" repeatCount="indefinite"/>
+      h
+    </text>
+
+    <!-- Blinking cursor for the command line -->
+    <rect x="116" y="90" width="13" height="22" rx="2" fill="#c44e7a">
+      <animate attributeName="opacity" values="0;0;0.8;0;0.8;0;0.8;0;0.8;0;0"
+               keyTimes="0;0.06;0.07;0.1;0.11;0.15;0.16;0.2;0.21;0.35;0.38"
+               dur="6s" repeatCount="indefinite"/>
+      <!-- Cursor follows text as it types -->
+      <animate attributeName="x"
+               values="52;52;68;68;84;84;100;100;116;116"
+               keyTimes="0;0.07;0.08;0.12;0.13;0.17;0.18;0.22;0.23;1"
+               dur="6s" repeatCount="indefinite"/>
+    </rect>
+  </g>
+
+  <!-- After typing, text fades and letters EXPAND into position -->
+
+  <!-- S materializes -->
+  <path d="M 78,36 H 36 V 58 H 78 V 82 H 36"
+        fill="none" stroke="#1e6e45" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"
+        opacity="0">
+    <animate attributeName="opacity" values="0;0;1;1;0"
+             keyTimes="0;0.38;0.45;0.88;0.96" dur="6s" repeatCount="indefinite"/>
+  </path>
+
+  <!-- U materializes -->
+  <path d="m 118,36 v 34 c 0,12.15 9.85,14 22,14 12.15,0 22,-1.85 22,-14 V 36"
+        fill="none" stroke="#c44e7a" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"
+        opacity="0">
+    <animate attributeName="opacity" values="0;0;1;1;0"
+             keyTimes="0;0.42;0.49;0.88;0.96" dur="6s" repeatCount="indefinite"/>
+  </path>
+
+  <!-- C materializes -->
+  <path d="M 78,118 H 36 V 164 H 78"
+        fill="none" stroke="#2e85b8" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"
+        opacity="0">
+    <animate attributeName="opacity" values="0;0;1;1;0"
+             keyTimes="0;0.46;0.53;0.88;0.96" dur="6s" repeatCount="indefinite"/>
+  </path>
+
+  <!-- H materializes -->
+  <path d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162"
+        fill="none" stroke="#1a7a5a" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round" filter="url(#glow)"
+        opacity="0">
+    <animate attributeName="opacity" values="0;0;1;1;0"
+             keyTimes="0;0.5;0.57;0.88;0.96" dur="6s" repeatCount="indefinite"/>
+  </path>
+
+  <!-- Flash when letters appear -->
+  <rect width="200" height="200" rx="26" fill="#1a7a5a" opacity="0">
+    <animate attributeName="opacity" values="0;0;0.05;0;0"
+             keyTimes="0;0.37;0.39;0.44;1" dur="6s" repeatCount="indefinite"/>
+  </rect>
+</svg>

apps/web/public/images/branding/circuit_light_w_colortext.svg

@@ -0,0 +1,220 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 632.87714 200"
+   version="1.1"
+   id="svg266"
+   sodipodi:docname="circuit_light_w_colortext.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   width="632.87714"
+   height="200"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs270">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient10868">
+      <stop
+         style="stop-color:#1a5c38;stop-opacity:1;"
+         offset="0"
+         id="stop10864" />
+      <stop
+         style="stop-color:#b83670;stop-opacity:1;"
+         offset="0.33980843"
+         id="stop11424" />
+      <stop
+         style="stop-color:#1a749e;stop-opacity:1;"
+         offset="0.65709108"
+         id="stop11426" />
+      <stop
+         style="stop-color:#278063;stop-opacity:1;"
+         offset="1"
+         id="stop10866" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient10868"
+       id="linearGradient10870"
+       x1="209.93192"
+       y1="98.885666"
+       x2="619.01202"
+       y2="98.885666"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <sodipodi:namedview
+     id="namedview268"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.90774833"
+     inkscape:cx="125.03466"
+     inkscape:cy="311.20961"
+     inkscape:window-width="1452"
+     inkscape:window-height="1233"
+     inkscape:window-x="3989"
+     inkscape:window-y="445"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg266" />
+  <!-- Background -->
+  <rect
+     width="632.87714"
+     height="200"
+     fill="#0a0a0a"
+     id="rect2"
+     x="0"
+     y="0"
+     style="fill:#ffffff;stroke-width:1.77887"
+     ry="22.926825" />
+  <text
+     xml:space="preserve"
+     style="font-weight:bold;font-size:84px;line-height:81.6378px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black,  Bold';fill:url(#linearGradient10870);fill-opacity:1;stroke:#ffffff;stroke-width:15"
+     x="206.31992"
+     y="88.012764"
+     id="text1510"><tspan
+       sodipodi:role="line"
+       id="tspan1508"
+       x="206.31992"
+       y="88.012764"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:84px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black, ';fill:url(#linearGradient10870);fill-opacity:1;stroke:none">Such</tspan><tspan
+       sodipodi:role="line"
+       x="206.31992"
+       y="169.65056"
+       id="tspan1512"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:84px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black, ';fill:url(#linearGradient10870);fill-opacity:1;stroke:none">Software</tspan></text>
+  <rect
+     width="200"
+     height="200"
+     rx="26"
+     fill="#f7f8fa"
+     id="rect228"
+     x="0"
+     y="0" />
+  <!-- Single unbroken Z-trace -->
+  <path
+     d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 58"
+     fill="none"
+     stroke="#1a5c38"
+     stroke-width="2"
+     opacity="0.18"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path230"
+     sodipodi:nodetypes="cccccccccccccccccc" />
+  <!-- Nodes on trace vertices -->
+  <g
+     fill="#1a5c38"
+     opacity="0.22"
+     id="g254">
+    <circle
+       cx="20"
+       cy="28"
+       r="2.5"
+       id="circle232" />
+    <circle
+       cx="92"
+       cy="34"
+       r="2"
+       id="circle234" />
+    <circle
+       cx="108"
+       cy="34"
+       r="2"
+       id="circle236" />
+    <circle
+       cx="178"
+       cy="34"
+       r="2.5"
+       id="circle238" />
+    <circle
+       cx="172"
+       cy="100"
+       r="2.5"
+       id="circle240" />
+    <circle
+       cx="100"
+       cy="100"
+       r="2"
+       id="circle242" />
+    <circle
+       cx="28"
+       cy="100"
+       r="2.5"
+       id="circle244" />
+    <circle
+       cx="22"
+       cy="166"
+       r="2.5"
+       id="circle246" />
+    <circle
+       cx="92"
+       cy="166"
+       r="2"
+       id="circle248" />
+    <circle
+       cx="108"
+       cy="166"
+       r="2"
+       id="circle250" />
+    <circle
+       cx="172"
+       cy="172"
+       r="2.5"
+       id="circle252" />
+  </g>
+  <!-- Border -->
+  <rect
+     x="14"
+     y="14"
+     width="172"
+     height="172"
+     rx="16"
+     fill="none"
+     stroke="#1a5c38"
+     stroke-width="3.5"
+     opacity="0.45"
+     id="rect256" />
+  <!-- S - deep forest (7.5:1) -->
+  <path
+     d="M 78,36 H 36 V 58 H 78 V 82 H 36"
+     fill="none"
+     stroke="#1a5c38"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path258" />
+  <!-- U - deep rose (5.2:1) -->
+  <path
+     d="m 118,36 v 34 c 0,12.15 9.85,16 22,16 12.15,0 22,-3.85 22,-16 V 36"
+     fill="none"
+     stroke="#b83670"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path260" />
+  <!-- C - deep blue (4.9:1) -->
+  <path
+     d="M 78,118 H 36 v 46 h 42"
+     fill="none"
+     stroke="#1a749e"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path262" />
+  <!-- H - deep teal (4.5:1) -->
+  <path
+     d="m 118,118 v 46 m 44,-46 v 46 m -44,-23 h 44"
+     fill="none"
+     stroke="#278063"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path264" />
+</svg>

apps/web/public/images/branding/circuit_light_w_text.svg

@@ -0,0 +1,189 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 632.87714 200"
+   version="1.1"
+   id="svg266"
+   sodipodi:docname="circuit_light_w_text.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   width="632.87714"
+   height="200"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs270" />
+  <sodipodi:namedview
+     id="namedview268"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.90774833"
+     inkscape:cx="36.904502"
+     inkscape:cy="311.20961"
+     inkscape:window-width="1452"
+     inkscape:window-height="1233"
+     inkscape:window-x="3989"
+     inkscape:window-y="445"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg266" />
+  <!-- Background -->
+  <rect
+     width="632.87714"
+     height="200"
+     fill="#0a0a0a"
+     id="rect2"
+     x="0"
+     y="0"
+     style="fill:#ffffff;stroke-width:1.77887"
+     ry="22.926825" />
+  <text
+     xml:space="preserve"
+     style="font-weight:bold;font-size:84px;line-height:81.6378px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black,  Bold';fill:#000000;stroke:#ffffff;stroke-width:15"
+     x="206.31992"
+     y="88.012764"
+     id="text1510"><tspan
+       sodipodi:role="line"
+       id="tspan1508"
+       x="206.31992"
+       y="88.012764"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:84px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black, ';fill:#000000;fill-opacity:1;stroke:none">Such</tspan><tspan
+       sodipodi:role="line"
+       x="206.31992"
+       y="169.65056"
+       id="tspan1512"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:84px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black, ';fill:#000000;fill-opacity:1;stroke:none">Software</tspan></text>
+  <rect
+     width="200"
+     height="200"
+     rx="26"
+     fill="#f7f8fa"
+     id="rect228"
+     x="0"
+     y="0" />
+  <!-- Single unbroken Z-trace -->
+  <path
+     d="m 20,28 h 66 l 6,6 h 16 l 6,-6 h 58 l 6,6 v 60 l -6,6 H 28 l -6,6 v 60 l 6,6 h 58 l 6,-6 h 16 l 6,6 h 58"
+     fill="none"
+     stroke="#1a5c38"
+     stroke-width="2"
+     opacity="0.18"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path230"
+     sodipodi:nodetypes="cccccccccccccccccc" />
+  <!-- Nodes on trace vertices -->
+  <g
+     fill="#1a5c38"
+     opacity="0.22"
+     id="g254">
+    <circle
+       cx="20"
+       cy="28"
+       r="2.5"
+       id="circle232" />
+    <circle
+       cx="92"
+       cy="34"
+       r="2"
+       id="circle234" />
+    <circle
+       cx="108"
+       cy="34"
+       r="2"
+       id="circle236" />
+    <circle
+       cx="178"
+       cy="34"
+       r="2.5"
+       id="circle238" />
+    <circle
+       cx="172"
+       cy="100"
+       r="2.5"
+       id="circle240" />
+    <circle
+       cx="100"
+       cy="100"
+       r="2"
+       id="circle242" />
+    <circle
+       cx="28"
+       cy="100"
+       r="2.5"
+       id="circle244" />
+    <circle
+       cx="22"
+       cy="166"
+       r="2.5"
+       id="circle246" />
+    <circle
+       cx="92"
+       cy="166"
+       r="2"
+       id="circle248" />
+    <circle
+       cx="108"
+       cy="166"
+       r="2"
+       id="circle250" />
+    <circle
+       cx="172"
+       cy="172"
+       r="2.5"
+       id="circle252" />
+  </g>
+  <!-- Border -->
+  <rect
+     x="14"
+     y="14"
+     width="172"
+     height="172"
+     rx="16"
+     fill="none"
+     stroke="#1a5c38"
+     stroke-width="3.5"
+     opacity="0.45"
+     id="rect256" />
+  <!-- S - deep forest (7.5:1) -->
+  <path
+     d="M 78,36 H 36 V 58 H 78 V 82 H 36"
+     fill="none"
+     stroke="#1a5c38"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path258" />
+  <!-- U - deep rose (5.2:1) -->
+  <path
+     d="m 118,36 v 34 c 0,12.15 9.85,16 22,16 12.15,0 22,-3.85 22,-16 V 36"
+     fill="none"
+     stroke="#b83670"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path260" />
+  <!-- C - deep blue (4.9:1) -->
+  <path
+     d="M 78,118 H 36 v 46 h 42"
+     fill="none"
+     stroke="#1a749e"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path262" />
+  <!-- H - deep teal (4.5:1) -->
+  <path
+     d="m 118,118 v 46 m 44,-46 v 46 m -44,-23 h 44"
+     fill="none"
+     stroke="#278063"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path264" />
+</svg>

apps/web/public/images/branding/clean_dark.svg

@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  <defs>
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="1.2" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+
+  <!-- Background -->
+  <rect width="200" height="200" rx="26" fill="#0a0a0a"/>
+
+  <!-- Border -->
+  <rect x="14" y="14" width="172" height="172" rx="16" fill="none"
+        stroke="#45c99e" stroke-width="3.5" filter="url(#glow)" opacity="0.7"/>
+
+  <!-- S - green (5.1:1) -->
+  <path d="M 78,36 H 36 V 58 H 78 V 82 H 36"
+        fill="none" stroke="#35925c" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round"/>
+
+  <!-- U - rose (6.5:1) -->
+  <path d="m 118,36 v 34 c 0,12.15 9.85,14 22,14 12.15,0 22,-1.85 22,-14 V 36"
+        fill="none" stroke="#e8689e" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round"/>
+
+  <!-- C - blue (7.9:1) -->
+  <path d="M 78,118 H 36 V 164 H 78"
+        fill="none" stroke="#4aade0" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round"/>
+
+  <!-- H - teal (9.5:1) -->
+  <path d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162"
+        fill="none" stroke="#45c99e" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

apps/web/public/images/branding/clean_dark_w_text.svg

@@ -0,0 +1,131 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 632.87714 200"
+   version="1.1"
+   id="svg642"
+   sodipodi:docname="clean_dark_w_text.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   width="632.87714"
+   height="200"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview644"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.641875"
+     inkscape:cx="222.00584"
+     inkscape:cy="239.14314"
+     inkscape:window-width="1452"
+     inkscape:window-height="1233"
+     inkscape:window-x="4173"
+     inkscape:window-y="670"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg642" />
+  <defs
+     id="defs628">
+    <filter
+       id="glow"
+       x="-0.026918605"
+       y="-0.026918605"
+       width="1.0538372"
+       height="1.0538372">
+      <feGaussianBlur
+         stdDeviation="1.2"
+         result="blur"
+         id="feGaussianBlur619" />
+      <feMerge
+         id="feMerge625">
+        <feMergeNode
+           in="blur"
+           id="feMergeNode621" />
+        <feMergeNode
+           in="SourceGraphic"
+           id="feMergeNode623" />
+      </feMerge>
+    </filter>
+  </defs>
+  <!-- Background -->
+  <!-- Border -->
+  <rect
+     width="632.87714"
+     height="200"
+     fill="#0a0a0a"
+     id="rect2"
+     x="0"
+     y="0"
+     style="stroke-width:1.77887"
+     ry="22.926825" />
+  <text
+     xml:space="preserve"
+     style="font-weight:bold;font-size:84px;line-height:81.6378px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black,  Bold';fill:#ffffff;stroke:#ffffff;stroke-width:15"
+     x="206.31992"
+     y="88.012764"
+     id="text1510"><tspan
+       sodipodi:role="line"
+       id="tspan1508"
+       x="206.31992"
+       y="88.012764"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:84px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black, ';fill:#ffffff;fill-opacity:1;stroke:none">Such</tspan><tspan
+       sodipodi:role="line"
+       x="206.31992"
+       y="169.65056"
+       id="tspan1512"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:84px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black, ';fill:#ffffff;fill-opacity:1;stroke:none">Software</tspan></text>
+  <rect
+     x="14"
+     y="14"
+     width="172"
+     height="172"
+     rx="16"
+     fill="none"
+     stroke="#45c99e"
+     stroke-width="3.5"
+     filter="url(#glow)"
+     opacity="0.7"
+     id="rect632" />
+  <!-- S - green (5.1:1) -->
+  <path
+     d="M 78,36 H 36 V 58 H 78 V 82 H 36"
+     fill="none"
+     stroke="#35925c"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path634" />
+  <!-- U - rose (6.5:1) -->
+  <path
+     d="m 118,36 v 34 c 0,12.15 9.85,14 22,14 12.15,0 22,-1.85 22,-14 V 36"
+     fill="none"
+     stroke="#e8689e"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path636" />
+  <!-- C - blue (7.9:1) -->
+  <path
+     d="M 78,118 H 36 v 46 h 42"
+     fill="none"
+     stroke="#4aade0"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path638" />
+  <!-- H - teal (9.5:1) -->
+  <path
+     d="m 118,118 v 46 m 44,-46 v 46 m -44,-23 h 44"
+     fill="none"
+     stroke="#45c99e"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path640" />
+</svg>

apps/web/public/images/branding/clean_greyscale_on_black.svg

@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 200 200"
+   version="1.1"
+   id="svg14"
+   sodipodi:docname="clean_greyscale_on_black.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs18" />
+  <sodipodi:namedview
+     id="namedview16"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="2.5675"
+     inkscape:cx="113.92405"
+     inkscape:cy="156.3778"
+     inkscape:window-width="1452"
+     inkscape:window-height="1233"
+     inkscape:window-x="5530"
+     inkscape:window-y="448"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg14" />
+  <!-- Background -->
+  <rect
+     width="200"
+     height="200"
+     rx="26"
+     fill="#0a0a0a"
+     id="rect2" />
+  <!-- Border -->
+  <rect
+     x="14"
+     y="14"
+     width="172"
+     height="172"
+     rx="16"
+     fill="none"
+     stroke="#e8e8e8"
+     stroke-width="3.5"
+     opacity="0.35"
+     id="rect4" />
+  <!-- S -->
+  <path
+     d="M 78,36 H 36 V 58 H 78 V 82 H 36"
+     fill="none"
+     stroke="#e8e8e8"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path6" />
+  <!-- U -->
+  <path
+     d="m 118,36 v 34 c 0,12.15 9.85,14 22,14 12.15,0 22,-1.85 22,-14 V 36"
+     fill="none"
+     stroke="#e8e8e8"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path8" />
+  <!-- C -->
+  <path
+     d="M 78,118 H 36 V 164 H 78"
+     fill="none"
+     stroke="#e8e8e8"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path10" />
+  <!-- H -->
+  <path
+     d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162"
+     fill="none"
+     stroke="#e8e8e8"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path12" />
+</svg>

apps/web/public/images/branding/clean_greyscale_on_white.svg

@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 200 200"
+   version="1.1"
+   id="svg205"
+   sodipodi:docname="clean_greyscale_on_white.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs209" />
+  <sodipodi:namedview
+     id="namedview207"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="2.5675"
+     inkscape:cx="96.397274"
+     inkscape:cy="132.61928"
+     inkscape:window-width="1452"
+     inkscape:window-height="1233"
+     inkscape:window-x="3922"
+     inkscape:window-y="481"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg205" />
+  <!-- Background -->
+  <rect
+     width="200"
+     height="200"
+     rx="26"
+     fill="#ffffff"
+     id="rect193" />
+  <!-- Border -->
+  <rect
+     x="14"
+     y="14"
+     width="172"
+     height="172"
+     rx="16"
+     fill="none"
+     stroke="#1a1a1a"
+     stroke-width="3.5"
+     opacity="0.35"
+     id="rect195" />
+  <!-- S -->
+  <path
+     d="M 78,36 H 36 V 58 H 78 V 82 H 36"
+     fill="none"
+     stroke="#1a1a1a"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path197" />
+  <!-- U -->
+  <path
+     d="m 118,36 v 34 c 0,12.15 9.85,16 22,16 12.15,0 22,-3.85 22,-16 V 36"
+     fill="none"
+     stroke="#1a1a1a"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path199" />
+  <!-- C -->
+  <path
+     d="M 78,118 H 36 V 164 H 78"
+     fill="none"
+     stroke="#1a1a1a"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path201" />
+  <!-- H -->
+  <path
+     d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162"
+     fill="none"
+     stroke="#1a1a1a"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path203" />
+</svg>

apps/web/public/images/branding/clean_light.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+  <!-- Background -->
+  <rect width="200" height="200" rx="26" fill="#f7f8fa"/>
+
+  <!-- Border -->
+  <rect x="14" y="14" width="172" height="172" rx="16" fill="none"
+        stroke="#1a5c38" stroke-width="3.5" opacity="0.45"/>
+
+  <!-- S - deep forest (7.5:1) -->
+  <path d="M 78,36 H 36 V 58 H 78 V 82 H 36"
+        fill="none" stroke="#1a5c38" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round"/>
+
+  <!-- U - deep rose (5.2:1) -->
+  <path d="m 118,36 v 34 c 0,12.15 9.85,16 22,16 12.15,0 22,-3.85 22,-16 V 36"
+        fill="none" stroke="#b83670" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round"/>
+
+  <!-- C - deep blue (4.9:1) -->
+  <path d="M 78,118 H 36 V 164 H 78"
+        fill="none" stroke="#1a749e" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round"/>
+
+  <!-- H - deep teal (4.5:1) -->
+  <path d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162"
+        fill="none" stroke="#278063" stroke-width="14"
+        stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

apps/web/public/images/branding/clean_light_w_text.svg

@@ -0,0 +1,117 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 632.87714 200"
+   version="1.1"
+   id="svg1027"
+   sodipodi:docname="clean_light_w_text.svg"
+   width="632.87714"
+   height="200"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1031" />
+  <sodipodi:namedview
+     id="namedview1029"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="1.28375"
+     inkscape:cx="172.54138"
+     inkscape:cy="199.80526"
+     inkscape:window-width="1452"
+     inkscape:window-height="1233"
+     inkscape:window-x="3840"
+     inkscape:window-y="840"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg1027" />
+  <!-- Background -->
+  <rect
+     width="632.87714"
+     height="200"
+     fill="#0a0a0a"
+     id="rect2"
+     x="0"
+     y="0"
+     style="fill:#ffffff;stroke-width:1.77887"
+     ry="22.926825" />
+  <text
+     xml:space="preserve"
+     style="font-weight:bold;font-size:84px;line-height:81.6378px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black,  Bold';fill:#000000;stroke:#ffffff;stroke-width:15"
+     x="206.31992"
+     y="88.012756"
+     id="text1510"><tspan
+       sodipodi:role="line"
+       id="tspan1508"
+       x="206.31992"
+       y="88.012756"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:84px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black, ';fill:#000000;fill-opacity:1;stroke:none">Such</tspan><tspan
+       sodipodi:role="line"
+       x="206.31992"
+       y="169.65056"
+       id="tspan1512"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:84px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black, ';fill:#000000;fill-opacity:1;stroke:none">Software</tspan></text>
+  <rect
+     width="200"
+     height="200"
+     rx="26"
+     fill="#f7f8fa"
+     id="rect1015"
+     x="0"
+     y="0" />
+  <!-- Border -->
+  <rect
+     x="14"
+     y="14"
+     width="172"
+     height="172"
+     rx="16"
+     fill="none"
+     stroke="#1a5c38"
+     stroke-width="3.5"
+     opacity="0.45"
+     id="rect1017" />
+  <!-- S - deep forest (7.5:1) -->
+  <path
+     d="M 78,36 H 36 V 58 H 78 V 82 H 36"
+     fill="none"
+     stroke="#1a5c38"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path1019" />
+  <!-- U - deep rose (5.2:1) -->
+  <path
+     d="m 118,36 v 34 c 0,12.15 9.85,16 22,16 12.15,0 22,-3.85 22,-16 V 36"
+     fill="none"
+     stroke="#b83670"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path1021" />
+  <!-- C - deep blue (4.9:1) -->
+  <path
+     d="M 78,118 H 36 v 46 h 42"
+     fill="none"
+     stroke="#1a749e"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path1023" />
+  <!-- H - deep teal (4.5:1) -->
+  <path
+     d="m 118,118 v 46 m 44,-46 v 46 m -44,-23 h 44"
+     fill="none"
+     stroke="#278063"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path1025" />
+</svg>

apps/web/public/images/branding/clean_mono_on_black.svg

@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 200 200"
+   version="1.1"
+   id="svg14"
+   sodipodi:docname="clean_mono_on_black.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs18" />
+  <sodipodi:namedview
+     id="namedview16"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="3.6309933"
+     inkscape:cx="77.526995"
+     inkscape:cy="127.37561"
+     inkscape:window-width="1452"
+     inkscape:window-height="1233"
+     inkscape:window-x="5530"
+     inkscape:window-y="448"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg14" />
+  <!-- Background -->
+  <rect
+     width="200"
+     height="200"
+     rx="26"
+     fill="#0a0a0a"
+     id="rect2" />
+  <!-- Border -->
+  <rect
+     x="14"
+     y="14"
+     width="172"
+     height="172"
+     rx="16"
+     fill="none"
+     stroke="#e8e8e8"
+     stroke-width="3.5"
+     opacity="0.35"
+     id="rect4"
+     style="stroke:#ffffff;stroke-opacity:1;opacity:1" />
+  <!-- S -->
+  <path
+     d="M 78,36 H 36 V 58 H 78 V 82 H 36"
+     fill="none"
+     stroke="#e8e8e8"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path6" />
+  <!-- U -->
+  <path
+     d="m 118,36 v 34 c 0,12.15 9.85,14 22,14 12.15,0 22,-1.85 22,-14 V 36"
+     fill="none"
+     stroke="#e8e8e8"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path8" />
+  <!-- C -->
+  <path
+     d="M 78,118 H 36 V 164 H 78"
+     fill="none"
+     stroke="#e8e8e8"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path10" />
+  <!-- H -->
+  <path
+     d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162"
+     fill="none"
+     stroke="#e8e8e8"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path12" />
+</svg>

apps/web/public/images/branding/clean_mono_on_black_w_text.svg

@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 632.87714 200"
+   version="1.1"
+   id="svg14"
+   sodipodi:docname="clean_mono_on_black_w_text.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   width="632.87714"
+   height="200"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs18" />
+  <sodipodi:namedview
+     id="namedview16"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="1.28375"
+     inkscape:cx="256.28043"
+     inkscape:cy="87.633886"
+     inkscape:window-width="2445"
+     inkscape:window-height="1233"
+     inkscape:window-x="5070"
+     inkscape:window-y="185"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg14" />
+  <!-- Background -->
+  <rect
+     width="632.87714"
+     height="200"
+     fill="#0a0a0a"
+     id="rect2"
+     x="0"
+     y="0"
+     style="stroke-width:1.77887"
+     ry="22.926825" />
+  <!-- Border -->
+  <rect
+     x="14"
+     y="14"
+     width="172"
+     height="172"
+     rx="16"
+     fill="none"
+     stroke="#e8e8e8"
+     stroke-width="3.5"
+     opacity="0.35"
+     id="rect4"
+     style="opacity:1;stroke:#ffffff;stroke-opacity:1" />
+  <!-- S -->
+  <path
+     d="M 78,36 H 36 V 58 H 78 V 82 H 36"
+     fill="none"
+     stroke="#e8e8e8"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path6"
+     style="stroke:#ffffff;stroke-opacity:1" />
+  <!-- U -->
+  <path
+     d="m 118,36 v 34 c 0,12.15 9.85,14 22,14 12.15,0 22,-1.85 22,-14 V 36"
+     fill="none"
+     stroke="#e8e8e8"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path8"
+     style="stroke:#ffffff;stroke-opacity:1" />
+  <!-- C -->
+  <path
+     d="M 78,118 H 36 v 46 h 42"
+     fill="none"
+     stroke="#e8e8e8"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path10"
+     style="stroke:#ffffff;stroke-opacity:1" />
+  <!-- H -->
+  <path
+     d="m 118,118 v 46 m 44,-46 v 46 m -44,-23 h 44"
+     fill="none"
+     stroke="#e8e8e8"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path12"
+     style="stroke:#ffffff;stroke-opacity:1" />
+  <text
+     xml:space="preserve"
+     style="font-weight:bold;font-size:84px;line-height:81.6378px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black,  Bold';fill:#ffffff;stroke:#ffffff;stroke-width:15"
+     x="206.31992"
+     y="88.012764"
+     id="text1510"><tspan
+       sodipodi:role="line"
+       id="tspan1508"
+       x="206.31992"
+       y="88.012764"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:84px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black, ';fill:#ffffff;fill-opacity:1;stroke:none">Such</tspan><tspan
+       sodipodi:role="line"
+       x="206.31992"
+       y="169.65056"
+       id="tspan1512"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:84px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black, ';fill:#ffffff;fill-opacity:1;stroke:none">Software</tspan></text>
+</svg>

apps/web/public/images/branding/clean_mono_on_white.svg

@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 200 200"
+   version="1.1"
+   id="svg205"
+   sodipodi:docname="clean_mono_on_white.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs209" />
+  <sodipodi:namedview
+     id="namedview207"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="2.5675"
+     inkscape:cx="96.397274"
+     inkscape:cy="132.61928"
+     inkscape:window-width="1452"
+     inkscape:window-height="1233"
+     inkscape:window-x="3922"
+     inkscape:window-y="481"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg205" />
+  <!-- Background -->
+  <rect
+     width="200"
+     height="200"
+     rx="26"
+     fill="#ffffff"
+     id="rect193" />
+  <!-- Border -->
+  <rect
+     x="14"
+     y="14"
+     width="172"
+     height="172"
+     rx="16"
+     fill="none"
+     stroke="#1a1a1a"
+     stroke-width="3.5"
+     opacity="0.35"
+     id="rect195"
+     style="opacity:1" />
+  <!-- S -->
+  <path
+     d="M 78,36 H 36 V 58 H 78 V 82 H 36"
+     fill="none"
+     stroke="#1a1a1a"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path197" />
+  <!-- U -->
+  <path
+     d="m 118,36 v 34 c 0,12.15 9.85,16 22,16 12.15,0 22,-3.85 22,-16 V 36"
+     fill="none"
+     stroke="#1a1a1a"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path199" />
+  <!-- C -->
+  <path
+     d="M 78,118 H 36 V 164 H 78"
+     fill="none"
+     stroke="#1a1a1a"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path201" />
+  <!-- H -->
+  <path
+     d="M 118,118 V 164 M 162,118 V 164 M 118,141 H 162"
+     fill="none"
+     stroke="#1a1a1a"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path203" />
+</svg>

apps/web/public/images/branding/clean_mono_on_white_w_text.svg

@@ -0,0 +1,118 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 632.87714 200"
+   version="1.1"
+   id="svg205"
+   sodipodi:docname="clean_mono_on_white_w_text.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   width="632.87714"
+   height="200"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs209" />
+  <sodipodi:namedview
+     id="namedview207"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.90774833"
+     inkscape:cx="179.01437"
+     inkscape:cy="333.24214"
+     inkscape:window-width="1452"
+     inkscape:window-height="1233"
+     inkscape:window-x="3922"
+     inkscape:window-y="481"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg205" />
+  <!-- Background -->
+  <rect
+     width="632.87714"
+     height="200"
+     fill="#0a0a0a"
+     id="rect2"
+     x="0"
+     y="0"
+     style="fill:#ffffff;stroke-width:1.77887"
+     ry="22.926825" />
+  <text
+     xml:space="preserve"
+     style="font-weight:bold;font-size:84px;line-height:81.6378px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black,  Bold';fill:#000000;stroke:#ffffff;stroke-width:15"
+     x="206.31992"
+     y="88.012764"
+     id="text1510"><tspan
+       sodipodi:role="line"
+       id="tspan1508"
+       x="206.31992"
+       y="88.012764"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:84px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black, ';fill:#000000;fill-opacity:1;stroke:none">Such</tspan><tspan
+       sodipodi:role="line"
+       x="206.31992"
+       y="169.65056"
+       id="tspan1512"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:84px;font-family:'Archivo Black';-inkscape-font-specification:'Archivo Black, ';fill:#000000;fill-opacity:1;stroke:none">Software</tspan></text>
+  <rect
+     width="200"
+     height="200"
+     rx="26"
+     fill="#ffffff"
+     id="rect193"
+     x="0"
+     y="0" />
+  <!-- Border -->
+  <rect
+     x="14"
+     y="14"
+     width="172"
+     height="172"
+     rx="16"
+     fill="none"
+     stroke="#1a1a1a"
+     stroke-width="3.5"
+     opacity="0.35"
+     id="rect195"
+     style="opacity:1" />
+  <!-- S -->
+  <path
+     d="M 78,36 H 36 V 58 H 78 V 82 H 36"
+     fill="none"
+     stroke="#1a1a1a"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path197" />
+  <!-- U -->
+  <path
+     d="m 118,36 v 34 c 0,12.15 9.85,16 22,16 12.15,0 22,-3.85 22,-16 V 36"
+     fill="none"
+     stroke="#1a1a1a"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path199" />
+  <!-- C -->
+  <path
+     d="M 78,118 H 36 v 46 h 42"
+     fill="none"
+     stroke="#1a1a1a"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path201" />
+  <!-- H -->
+  <path
+     d="m 118,118 v 46 m 44,-46 v 46 m -44,-23 h 44"
+     fill="none"
+     stroke="#1a1a1a"
+     stroke-width="14"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path203" />
+</svg>

apps/web/public/images/branding/favicon_dark.svg

@@ -0,0 +1,106 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 200 200"
+   version="1.1"
+   id="svg25"
+   sodipodi:docname="favicon_dark.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview27"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="5.135"
+     inkscape:cx="71.178189"
+     inkscape:cy="100"
+     inkscape:window-width="3840"
+     inkscape:window-height="2091"
+     inkscape:window-x="3840"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg25" />
+  <defs
+     id="defs11">
+    <filter
+       id="glow"
+       x="-0.026918605"
+       y="-0.026918605"
+       width="1.0538372"
+       height="1.0538372">
+      <feGaussianBlur
+         stdDeviation="1.2"
+         result="blur"
+         id="feGaussianBlur2" />
+      <feMerge
+         id="feMerge8">
+        <feMergeNode
+           in="blur"
+           id="feMergeNode4" />
+        <feMergeNode
+           in="SourceGraphic"
+           id="feMergeNode6" />
+      </feMerge>
+    </filter>
+  </defs>
+  <!-- Background -->
+  <rect
+     width="200"
+     height="200"
+     rx="26"
+     fill="#0a0a0a"
+     id="rect13" />
+  <!-- Border -->
+  <rect
+     x="14"
+     y="14"
+     width="172"
+     height="172"
+     rx="16"
+     fill="none"
+     stroke="#45c99e"
+     stroke-width="3.5"
+     filter="url(#glow)"
+     opacity="0.7"
+     id="rect15" />
+  <!-- S - green (5.1:1) -->
+  <!-- U - rose (6.5:1) -->
+  <!-- C - blue (7.9:1) -->
+  <!-- H - teal (9.5:1) -->
+  <ellipse
+     style="fill:#35925c;stroke-width:14.0117;fill-opacity:1"
+     id="path1890"
+     cx="57"
+     cy="59"
+     rx="30.173216"
+     ry="29.420959" />
+  <ellipse
+     style="fill:#e8689e;stroke-width:14.0117;fill-opacity:1"
+     id="path1890-5"
+     cx="140"
+     cy="59"
+     rx="30.173216"
+     ry="29.420959" />
+  <ellipse
+     style="fill:#4aade0;stroke-width:14.0117;fill-opacity:1"
+     id="path1890-3"
+     cx="57"
+     cy="141"
+     rx="30.173216"
+     ry="29.420959" />
+  <ellipse
+     style="fill:#45c99e;stroke-width:14.0117;fill-opacity:1"
+     id="path1890-56"
+     cx="140"
+     cy="141"
+     rx="30.173216"
+     ry="29.420959" />
+</svg>

apps/web/public/images/branding/favicon_light.svg

@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 200 200"
+   version="1.1"
+   id="svg214"
+   sodipodi:docname="favicon_light.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs218" />
+  <sodipodi:namedview
+     id="namedview216"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="5.135"
+     inkscape:cx="71.178189"
+     inkscape:cy="100"
+     inkscape:window-width="3840"
+     inkscape:window-height="2091"
+     inkscape:window-x="3840"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg214" />
+  <!-- Background -->
+  <rect
+     width="200"
+     height="200"
+     rx="26"
+     fill="#f7f8fa"
+     id="rect202" />
+  <!-- Border -->
+  <rect
+     x="14"
+     y="14"
+     width="172"
+     height="172"
+     rx="16"
+     fill="none"
+     stroke="#1a5c38"
+     stroke-width="3.5"
+     opacity="0.45"
+     id="rect204" />
+  <!-- S - deep forest (7.5:1) -->
+  <!-- U - deep rose (5.2:1) -->
+  <!-- C - deep blue (4.9:1) -->
+  <!-- H - deep teal (4.5:1) -->
+  <circle
+     style="fill:#1a5c38;stroke-width:15;fill-opacity:1"
+     id="path497"
+     cx="57"
+     cy="59"
+     r="28.221895" />
+  <circle
+     style="fill:#b83670;stroke-width:15;fill-opacity:1"
+     id="path497-3"
+     cx="140"
+     cy="59"
+     r="28.221895" />
+  <circle
+     style="fill:#1a749e;stroke-width:15;fill-opacity:1"
+     id="path497-6"
+     cx="57"
+     cy="141"
+     r="28.221895" />
+  <circle
+     style="fill:#278063;stroke-width:15;fill-opacity:1"
+     id="path497-7"
+     cx="140"
+     cy="141"
+     r="28.221895" />
+</svg>

apps/web/public/manifest.json

@@ -8,12 +8,12 @@
   "theme_color": "#000000",
   "icons": [
     {
-      "src": "/images/favicon.svg",
+      "src": "/images/branding/favicon_dark.svg",
       "type": "image/svg+xml",
       "purpose": "any"
     },
     {
-      "src": "/images/favicon_192.png",
+      "src": "/images/branding/favicon_dark.png",
       "sizes": "192x192",
       "type": "image/png"
     }

apps/web/src/app/about/page.tsx

@@ -26,8 +26,8 @@ export default function AboutPage() {
       <div id="main-content" className="z-10 w-full max-w-6xl mx-auto py-20 px-4 pb-24 md:pb-20">
         <h1 className="text-4xl md:text-5xl font-bold mb-10 text-center">About Us</h1>
 
-        <div className="section-container">
+        <div className="section-container relative">
-          
+
           <div className="prose dark:prose-invert max-w-none mb-12">
             <p className="text-xl leading-relaxed">
               Founded in 2021 by John Winter Murphy in Chester County, PA, and operating in Kennett Square since July 2025, 
@@ -94,6 +94,18 @@ export default function AboutPage() {
             <FounderSignature />
           </div>
 
+          <img
+            src="/images/animations/anim3_matrix_light.svg"
+            alt=""
+            aria-hidden="true"
+            className="absolute bottom-4 right-4 w-16 h-16 opacity-50 block dark:hidden motion-reduce:hidden"
+          />
+          <img
+            src="/images/animations/anim3_matrix.svg"
+            alt=""
+            aria-hidden="true"
+            className="absolute bottom-4 right-4 w-16 h-16 opacity-50 hidden dark:block motion-reduce:hidden"
+          />
         </div>
       </div>
       <MobileNav />

apps/web/src/app/blog/page.tsx

@@ -43,10 +43,26 @@ export default function BlogPage() {
       <Header />
       <div id="main-content" className="z-10 w-full max-w-4xl mx-auto py-20 px-4 pb-24 md:pb-20">
         <h1 className="text-4xl md:text-5xl font-bold mb-6">Blog</h1>
-        <p className="text-xl text-muted-foreground mb-12">
+        <p className="text-xl text-muted-foreground mb-8">
           News, launches, and technical notes.
         </p>
 
+        {/* Animated accent */}
+        <div className="flex justify-center mb-12 motion-reduce:hidden">
+          <img
+            src="/images/animations/anim_type_v4_light.svg"
+            alt=""
+            aria-hidden="true"
+            className="w-24 h-24 opacity-60 block dark:hidden"
+          />
+          <img
+            src="/images/animations/anim_type_v4.svg"
+            alt=""
+            aria-hidden="true"
+            className="w-24 h-24 opacity-60 hidden dark:block"
+          />
+        </div>
+
         {publishedPosts.length === 0 ? (
           <p className="text-muted-foreground">No posts yet. Check back soon.</p>
         ) : (

apps/web/src/app/blog/smirk-wallet-release/page.tsx

@@ -76,7 +76,7 @@ export default function SmirkWalletReleasePost() {
 
           <h2>Open Source</h2>
           <p>
-            Everything is open source. The extension, backend, and WASM libraries are all on GitHub:
+            The extension and WASM libraries are open source on GitHub:
           </p>
           <ul>
             <li>

apps/web/src/app/layout.tsx

@@ -15,12 +15,15 @@ export const metadata: Metadata = {
   },
   icons: {
     icon: [
-      { url: "/images/favicon.svg", type: "image/svg+xml" },
+      { url: "/images/branding/favicon_dark.svg", type: "image/svg+xml", media: "(prefers-color-scheme: dark)" },
-      { url: "/images/favicon_192.png", sizes: "192x192", type: "image/png" },
+      { url: "/images/branding/favicon_light.svg", type: "image/svg+xml", media: "(prefers-color-scheme: light)" },
+      { url: "/images/branding/favicon_dark.png", sizes: "192x192", type: "image/png", media: "(prefers-color-scheme: dark)" },
+      { url: "/images/branding/favicon_light.png", sizes: "192x192", type: "image/png", media: "(prefers-color-scheme: light)" },
     ],
-    shortcut: "/images/favicon.svg",
+    shortcut: "/images/branding/favicon_dark.svg",
     apple: [
-      { url: "/images/favicon_192.png", sizes: "192x192", type: "image/png" },
+      { url: "/images/branding/favicon_dark.png", sizes: "192x192", type: "image/png", media: "(prefers-color-scheme: dark)" },
+      { url: "/images/branding/favicon_light.png", sizes: "192x192", type: "image/png", media: "(prefers-color-scheme: light)" },
     ],
   },
   manifest: "/manifest.json",
@@ -31,7 +34,7 @@ const structuredData = {
   "@type": "Organization",
   name: "Such Software LLC",
   url: "https://such.software",
-  logo: "https://such.software/images/logo_dark.svg",
+  logo: "https://such.software/images/branding/clean_dark_w_text.svg",
   description: "Next-generation web applications engineered for scale, compliance, and performance.",
   address: {
     "@type": "PostalAddress",

apps/web/src/app/products/page.tsx

@@ -84,6 +84,21 @@ export default function ProductsPage() {
             </Link>
           ))}
         </div>
+
+        <div className="flex justify-center mt-16 motion-reduce:hidden">
+          <img
+            src="/images/animations/anim3_matrix_light.svg"
+            alt=""
+            aria-hidden="true"
+            className="w-20 h-20 opacity-40 block dark:hidden"
+          />
+          <img
+            src="/images/animations/anim3_matrix.svg"
+            alt=""
+            aria-hidden="true"
+            className="w-20 h-20 opacity-50 hidden dark:block"
+          />
+        </div>
       </div>
       <MobileNav />
     </main>

apps/web/src/app/services/page.tsx

@@ -139,6 +139,13 @@ export default function ServicesPage() {
 
         <div className="mt-20 p-16 rounded-[2.5rem] bg-gradient-to-br from-slate-900 via-slate-800 to-indigo-950 text-white text-center shadow-2xl relative overflow-hidden group border-2 border-white/5">
             <div className="absolute inset-0 bg-blue-500/10 opacity-0 group-hover:opacity-100 transition-opacity" />
+            {/* Animated pulse accent */}
+            <img
+              src="/images/animations/anim1_pulse.svg"
+              alt=""
+              aria-hidden="true"
+              className="absolute top-4 right-4 w-20 h-20 opacity-20 group-hover:opacity-40 transition-opacity motion-reduce:hidden"
+            />
             <h2 className="text-4xl font-bold mb-6 relative z-10 tracking-tight">Start building the future</h2>
             <p className="mb-10 text-slate-300 text-lg max-w-2xl mx-auto relative z-10 leading-relaxed font-medium">
                 We are currently accepting a limited number of partners for performance-based development. 

apps/web/src/components/about/founder-signature.tsx

@@ -9,14 +9,14 @@ export const FounderSignature = () => {
         <div className="flex items-center gap-6 relative z-10">
            <div className="relative w-16 h-16 flex items-center justify-center">
               <Image
-                src="/images/logo_dark.svg"
+                src="/images/branding/clean_dark.svg"
                 alt="Such Software Icon"
                 width={56}
                 height={56}
                 className="hidden dark:block object-contain"
               />
               <Image
-                src="/images/logo_light.svg"
+                src="/images/branding/clean_light.svg"
                 alt="Such Software Icon"
                 width={56}
                 height={56}

apps/web/src/components/layout/site-logo.tsx

@@ -9,7 +9,7 @@ export function SiteLogo() {
       <div className="relative w-40 h-11 lg:w-48 lg:h-12">
         {/* Dark mode logo (white text) */}
         <Image
-          src="/images/logo_dark_w_name.svg"
+          src="/images/branding/clean_dark_w_text.svg"
           alt="Such Software"
           fill
           className="object-contain hidden dark:block"
@@ -17,7 +17,7 @@ export function SiteLogo() {
         />
         {/* Light mode logo (black text) */}
         <Image
-          src="/images/logo_light_w_name.svg"
+          src="/images/branding/clean_light_w_text.svg"
           alt="Such Software"
           fill
           className="object-contain block dark:hidden"

apps/web/src/components/portfolio/bento-grid.tsx

@@ -16,7 +16,7 @@ export const PortfolioGrid = () => {
           </div>
           <div className="absolute inset-6 bottom-24 rounded-2xl overflow-hidden z-10 bg-slate-800/30">
               <Image
-                src="/images/r-cryptocurrency.png"
+                src="/images/products/r-cryptocurrency.png"
                 alt="Screenshot of r/CryptoCurrency subreddit homepage showing over 10 million subscribers, community links, and a cartoon moon mascot"
                 fill
                 className="object-contain p-4 opacity-80 transition-transform duration-1000 group-hover:scale-105"
@@ -35,7 +35,7 @@ export const PortfolioGrid = () => {
           </div>
            <div className="absolute inset-x-4 bottom-4 top-24 rounded-lg overflow-hidden z-10 bg-black/5 dark:bg-white/5 border border-indigo-500/10 shadow-inner">
                <Image
-                src="/images/moonplace.png"
+                src="/images/products/moonplace.png"
                 alt="Screenshot of MoonPlace collaborative pixel art canvas showing colorful community-created artwork"
                 fill
                 className="object-contain p-2 opacity-50 transition-transform duration-1000 group-hover:scale-110"
@@ -54,7 +54,7 @@ export const PortfolioGrid = () => {
           </div>
            <div className="absolute inset-x-4 bottom-4 top-28 rounded-lg overflow-hidden z-10 bg-black/5 dark:bg-white/5 border border-amber-500/10 shadow-inner flex items-center justify-center">
                <Image
-                src="/images/smirk-wallet.png"
+                src="/images/products/smirk-wallet.png"
                 alt="Screenshot of Smirk Wallet browser extension showing multi-currency support for BTC, LTC, XMR, WOW, and GRIN"
                 fill
                 className="object-contain p-4 opacity-60 transition-transform duration-1000 group-hover:scale-110"
@@ -76,7 +76,7 @@ export const PortfolioGrid = () => {
           </div>
            <div className="absolute inset-x-4 bottom-4 top-24 rounded-lg overflow-hidden z-10 bg-black/5 dark:bg-white/5 border border-orange-500/10 shadow-inner">
               <Image
-                src="/images/privacy-labs.png"
+                src="/images/products/privacy-labs.png"
                 alt="Screenshots of Monerogue roguelike game and Wowne.ro WebAssembly wallet interface"
                 fill
                 className="object-contain p-2 opacity-50 transition-transform duration-1000 group-hover:scale-110"
@@ -95,7 +95,7 @@ export const PortfolioGrid = () => {
           </div>
           <div className="absolute inset-4 rounded-xl overflow-hidden z-10 bg-zinc-200/50 dark:bg-zinc-800/50">
                <Image
-                src="/images/occupy-wallets.png"
+                src="/images/products/occupy-wallets.png"
                 alt="Screenshot of Occupy Wallets gallery displaying illustrated artwork with political and economic commentary"
                 fill
                 className="object-contain p-4 opacity-60 transition-transform duration-1000 group-hover:scale-105"