From 24d8ab73f5b5460ebce96fd545a7c4977503ded9 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Tue, 7 Apr 2026 18:34:09 -0400
Subject: [PATCH] style: increase hero SVG geometric opacity for better
 visibility

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/icons/HeroGeometric.tsx | 78 +++++++++++++-------------
 1 file changed, 39 insertions(+), 39 deletions(-)

diff --git a/src/components/icons/HeroGeometric.tsx b/src/components/icons/HeroGeometric.tsx
index d7b753d..4cce6e9 100644
--- a/src/components/icons/HeroGeometric.tsx
+++ b/src/components/icons/HeroGeometric.tsx
@@ -24,15 +24,15 @@ export default function HeroGeometric({ className }: HeroGeometricProps) {
       }}
     >
       {/* ━━━ BACKGROUND: Faint structural grid ━━━ */}
-      <g data-layer="background" opacity="0.5">
+      <g data-layer="background" opacity="0.85">
         {/* Horizontal datum lines */}
-        <line x1="0" y1="200" x2="1000" y2="200" stroke="#1C2B3A" strokeOpacity="0.04" strokeWidth="0.5" strokeDasharray="8 24" />
-        <line x1="0" y1="420" x2="1000" y2="420" stroke="#1C2B3A" strokeOpacity="0.03" strokeWidth="0.5" strokeDasharray="6 20" />
-        <line x1="0" y1="640" x2="1000" y2="640" stroke="#1C2B3A" strokeOpacity="0.04" strokeWidth="0.5" strokeDasharray="8 24" />
+        <line x1="0" y1="200" x2="1000" y2="200" stroke="#1C2B3A" strokeOpacity="0.09" strokeWidth="0.5" strokeDasharray="8 24" />
+        <line x1="0" y1="420" x2="1000" y2="420" stroke="#1C2B3A" strokeOpacity="0.07" strokeWidth="0.5" strokeDasharray="6 20" />
+        <line x1="0" y1="640" x2="1000" y2="640" stroke="#1C2B3A" strokeOpacity="0.09" strokeWidth="0.5" strokeDasharray="8 24" />
 
         {/* Vertical datum lines */}
-        <line x1="500" y1="0" x2="500" y2="800" stroke="#1C2B3A" strokeOpacity="0.03" strokeWidth="0.5" strokeDasharray="6 20" />
-        <line x1="680" y1="0" x2="680" y2="800" stroke="#1C2B3A" strokeOpacity="0.03" strokeWidth="0.5" strokeDasharray="4 18" />
+        <line x1="500" y1="0" x2="500" y2="800" stroke="#1C2B3A" strokeOpacity="0.07" strokeWidth="0.5" strokeDasharray="6 20" />
+        <line x1="680" y1="0" x2="680" y2="800" stroke="#1C2B3A" strokeOpacity="0.07" strokeWidth="0.5" strokeDasharray="4 18" />
       </g>
 
       {/* ━━━ MIDGROUND: The main arc composition ━━━ */}
@@ -42,7 +42,7 @@ export default function HeroGeometric({ className }: HeroGeometricProps) {
           cx={cx} cy={cy} r={R}
           fill="none"
           stroke="#5BA4D9"
-          strokeOpacity="0.09"
+          strokeOpacity="0.2"
           strokeWidth="1"
         />
 
@@ -51,7 +51,7 @@ export default function HeroGeometric({ className }: HeroGeometricProps) {
           cx={cx} cy={cy} r={R * 0.65}
           fill="none"
           stroke="#5BA4D9"
-          strokeOpacity="0.05"
+          strokeOpacity="0.12"
           strokeWidth="0.75"
           strokeDasharray="4 12"
         />
@@ -61,7 +61,7 @@ export default function HeroGeometric({ className }: HeroGeometricProps) {
           cx={cx} cy={cy} r={R * 1.35}
           fill="none"
           stroke="#1C2B3A"
-          strokeOpacity="0.035"
+          strokeOpacity="0.08"
           strokeWidth="0.5"
           strokeDasharray="3 16"
         />
@@ -70,44 +70,44 @@ export default function HeroGeometric({ className }: HeroGeometricProps) {
         {/* Vertical radius */}
         <line
           x1={cx} y1={cy} x2={cx} y2={cy - R}
-          stroke="#5BA4D9" strokeOpacity="0.08" strokeWidth="0.75"
+          stroke="#5BA4D9" strokeOpacity="0.18" strokeWidth="0.75"
         />
         {/* Top tick mark */}
         <line
           x1={cx - 8} y1={cy - R} x2={cx + 8} y2={cy - R}
-          stroke="#5BA4D9" strokeOpacity="0.12" strokeWidth="0.75"
+          stroke="#5BA4D9" strokeOpacity="0.25" strokeWidth="0.75"
         />
 
         {/* Diagonal radius — 45deg upper-right */}
         <line
           x1={cx} y1={cy}
           x2={cx + R * 0.707} y2={cy - R * 0.707}
-          stroke="#1C2B3A" strokeOpacity="0.06" strokeWidth="0.5"
+          stroke="#1C2B3A" strokeOpacity="0.13" strokeWidth="0.5"
           strokeDasharray="4 8"
         />
 
         {/* Horizontal radius — right */}
         <line
           x1={cx} y1={cy} x2={cx + R} y2={cy}
-          stroke="#5BA4D9" strokeOpacity="0.06" strokeWidth="0.5"
+          stroke="#5BA4D9" strokeOpacity="0.14" strokeWidth="0.5"
         />
         {/* Right tick */}
         <line
           x1={cx + R} y1={cy - 8} x2={cx + R} y2={cy + 8}
-          stroke="#5BA4D9" strokeOpacity="0.1" strokeWidth="0.75"
+          stroke="#5BA4D9" strokeOpacity="0.22" strokeWidth="0.75"
         />
 
         {/* ── Center crosshair ── */}
-        <line x1={cx - 12} y1={cy} x2={cx + 12} y2={cy} stroke="#5BA4D9" strokeOpacity="0.15" strokeWidth="0.75" />
-        <line x1={cx} y1={cy - 12} x2={cx} y2={cy + 12} stroke="#5BA4D9" strokeOpacity="0.15" strokeWidth="0.75" />
-        <circle cx={cx} cy={cy} r="2.5" fill="#5BA4D9" fillOpacity="0.12" />
+        <line x1={cx - 12} y1={cy} x2={cx + 12} y2={cy} stroke="#5BA4D9" strokeOpacity="0.3" strokeWidth="0.75" />
+        <line x1={cx} y1={cy - 12} x2={cx} y2={cy + 12} stroke="#5BA4D9" strokeOpacity="0.3" strokeWidth="0.75" />
+        <circle cx={cx} cy={cy} r="2.5" fill="#5BA4D9" fillOpacity="0.25" />
 
         {/* ── Angle arc at center — 90deg sweep ── */}
         <path
           d={`M ${cx} ${cy - 30} A 30 30 0 0 1 ${cx + 30} ${cy}`}
           fill="none"
           stroke="#5BA4D9"
-          strokeOpacity="0.1"
+          strokeOpacity="0.2"
           strokeWidth="0.75"
         />
 
@@ -115,38 +115,38 @@ export default function HeroGeometric({ className }: HeroGeometricProps) {
         <line
           x1={cx - R} y1={cy - R - 30}
           x2={cx + R} y2={cy - R - 30}
-          stroke="#1C2B3A" strokeOpacity="0.07" strokeWidth="0.5"
+          stroke="#1C2B3A" strokeOpacity="0.15" strokeWidth="0.5"
         />
         {/* End ticks */}
-        <line x1={cx - R} y1={cy - R - 38} x2={cx - R} y2={cy - R - 22} stroke="#1C2B3A" strokeOpacity="0.09" strokeWidth="0.75" />
-        <line x1={cx + R} y1={cy - R - 38} x2={cx + R} y2={cy - R - 22} stroke="#1C2B3A" strokeOpacity="0.09" strokeWidth="0.75" />
+        <line x1={cx - R} y1={cy - R - 38} x2={cx - R} y2={cy - R - 22} stroke="#1C2B3A" strokeOpacity="0.18" strokeWidth="0.75" />
+        <line x1={cx + R} y1={cy - R - 38} x2={cx + R} y2={cy - R - 22} stroke="#1C2B3A" strokeOpacity="0.18" strokeWidth="0.75" />
         {/* Label stub */}
-        <rect x={cx - 18} y={cy - R - 37} width="36" height="7" rx="1" fill="#5BA4D9" fillOpacity="0.03" />
+        <rect x={cx - 18} y={cy - R - 37} width="36" height="7" rx="1" fill="#5BA4D9" fillOpacity="0.07" />
 
         {/* ── Vertical dimension — right side ── */}
         <line
           x1={cx + R + 30} y1={cy - R}
           x2={cx + R + 30} y2={cy + R}
-          stroke="#1C2B3A" strokeOpacity="0.06" strokeWidth="0.5"
+          stroke="#1C2B3A" strokeOpacity="0.13" strokeWidth="0.5"
           strokeDasharray="2 8"
         />
-        <line x1={cx + R + 22} y1={cy - R} x2={cx + R + 38} y2={cy - R} stroke="#1C2B3A" strokeOpacity="0.08" strokeWidth="0.75" />
-        <line x1={cx + R + 22} y1={cy + R} x2={cx + R + 38} y2={cy + R} stroke="#1C2B3A" strokeOpacity="0.08" strokeWidth="0.75" />
+        <line x1={cx + R + 22} y1={cy - R} x2={cx + R + 38} y2={cy - R} stroke="#1C2B3A" strokeOpacity="0.16" strokeWidth="0.75" />
+        <line x1={cx + R + 22} y1={cy + R} x2={cx + R + 38} y2={cy + R} stroke="#1C2B3A" strokeOpacity="0.16" strokeWidth="0.75" />
 
         {/* Subtle fill — atmospheric glow behind main circle */}
-        <circle cx={cx} cy={cy} r={R * 0.8} fill="#5BA4D9" fillOpacity="0.015" />
+        <circle cx={cx} cy={cy} r={R * 0.8} fill="#5BA4D9" fillOpacity="0.035" />
       </g>
 
       {/* ━━━ FOREGROUND: Crisp detail elements ━━━ */}
       <g data-layer="foreground">
         {/* ── Corner brackets — architectural framing ── */}
         {/* Top-right */}
-        <path d="M 940 40 L 970 40 L 970 70" fill="none" stroke="#1C2B3A" strokeOpacity="0.12" strokeWidth="1" />
+        <path d="M 940 40 L 970 40 L 970 70" fill="none" stroke="#1C2B3A" strokeOpacity="0.25" strokeWidth="1" />
         {/* Bottom-right */}
-        <path d="M 940 760 L 970 760 L 970 730" fill="none" stroke="#1C2B3A" strokeOpacity="0.08" strokeWidth="0.75" />
+        <path d="M 940 760 L 970 760 L 970 730" fill="none" stroke="#1C2B3A" strokeOpacity="0.18" strokeWidth="0.75" />
         {/* Top inner */}
-        <path d="M 560 80 L 590 80" fill="none" stroke="#1C2B3A" strokeOpacity="0.06" strokeWidth="0.75" />
-        <path d="M 560 80 L 560 110" fill="none" stroke="#1C2B3A" strokeOpacity="0.06" strokeWidth="0.75" />
+        <path d="M 560 80 L 590 80" fill="none" stroke="#1C2B3A" strokeOpacity="0.14" strokeWidth="0.75" />
+        <path d="M 560 80 L 560 110" fill="none" stroke="#1C2B3A" strokeOpacity="0.14" strokeWidth="0.75" />
 
         {/* ── Tick marks around the main circle — spaced at 30deg intervals ── */}
         {[0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330].map((deg) => {
@@ -161,7 +161,7 @@ export default function HeroGeometric({ className }: HeroGeometricProps) {
               x1={x - nx * 6} y1={y - ny * 6}
               x2={x + nx * 6} y2={y + ny * 6}
               stroke="#5BA4D9"
-              strokeOpacity="0.1"
+              strokeOpacity="0.2"
               strokeWidth="0.75"
             />
           )
@@ -172,7 +172,7 @@ export default function HeroGeometric({ className }: HeroGeometricProps) {
           d={`M ${cx + 60} ${cy - R + 40} A 50 50 0 0 1 ${cx + 110} ${cy - R + 40}`}
           fill="none"
           stroke="#5BA4D9"
-          strokeOpacity="0.12"
+          strokeOpacity="0.25"
           strokeWidth="0.75"
         />
 
@@ -185,20 +185,20 @@ export default function HeroGeometric({ className }: HeroGeometricProps) {
               cy={560 + row * 28}
               r="1"
               fill="#1C2B3A"
-              fillOpacity="0.06"
+              fillOpacity="0.13"
             />
           ))
         )}
 
         {/* ── Scattered accent dots ── */}
-        <circle cx={cx + 140} cy={cy - 80} r="2" fill="#5BA4D9" fillOpacity="0.1" />
-        <circle cx={cx - 120} cy={cy + 100} r="1.5" fill="#5BA4D9" fillOpacity="0.07" />
-        <circle cx={cx + 200} cy={cy + 150} r="1.5" fill="#1C2B3A" fillOpacity="0.06" />
+        <circle cx={cx + 140} cy={cy - 80} r="2" fill="#5BA4D9" fillOpacity="0.2" />
+        <circle cx={cx - 120} cy={cy + 100} r="1.5" fill="#5BA4D9" fillOpacity="0.15" />
+        <circle cx={cx + 200} cy={cy + 150} r="1.5" fill="#1C2B3A" fillOpacity="0.13" />
 
         {/* ── Sparse left-side balance elements ── */}
-        <line x1="60" y1="350" x2="180" y2="350" stroke="#1C2B3A" strokeOpacity="0.03" strokeWidth="0.5" strokeDasharray="4 16" />
-        <line x1="100" y1="500" x2="100" y2="530" stroke="#1C2B3A" strokeOpacity="0.04" strokeWidth="0.5" />
-        <line x1="88" y1="515" x2="112" y2="515" stroke="#1C2B3A" strokeOpacity="0.04" strokeWidth="0.5" />
+        <line x1="60" y1="350" x2="180" y2="350" stroke="#1C2B3A" strokeOpacity="0.07" strokeWidth="0.5" strokeDasharray="4 16" />
+        <line x1="100" y1="500" x2="100" y2="530" stroke="#1C2B3A" strokeOpacity="0.09" strokeWidth="0.5" />
+        <line x1="88" y1="515" x2="112" y2="515" stroke="#1C2B3A" strokeOpacity="0.09" strokeWidth="0.5" />
       </g>
     </svg>
   )