letsbe/LetsBeBiz-Site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: increase hero SVG geometric opacity for better visibility
All checks were successful
Build & Push / build-and-push (push) Successful in 1m41s
Details

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt
2026-04-07 18:34:09 -04:00
parent 2d5e588b2e
commit 24d8ab73f5
1 changed files with 39 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/icons/HeroGeometric.tsx
View File

@@ -24,15 +24,15 @@ export default function HeroGeometric({ className }: HeroGeometricProps) {
}} }}
> >
{/* ━━━ BACKGROUND: Faint structural grid ━━━ */} {/* ━━━ BACKGROUND: Faint structural grid ━━━ */}
<g data-layer="background" opacity="0.5"> <g data-layer="background" opacity="0.85">
{/* Horizontal datum lines */} {/* 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="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.03" strokeWidth="0.5" strokeDasharray="6 20" /> <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.04" strokeWidth="0.5" strokeDasharray="8 24" /> <line x1="0" y1="640" x2="1000" y2="640" stroke="#1C2B3A" strokeOpacity="0.09" strokeWidth="0.5" strokeDasharray="8 24" />
{/* Vertical datum lines */} {/* 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="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.03" strokeWidth="0.5" strokeDasharray="4 18" /> <line x1="680" y1="0" x2="680" y2="800" stroke="#1C2B3A" strokeOpacity="0.07" strokeWidth="0.5" strokeDasharray="4 18" />
</g> </g>
{/* ━━━ MIDGROUND: The main arc composition ━━━ */} {/* ━━━ MIDGROUND: The main arc composition ━━━ */}
@@ -42,7 +42,7 @@ export default function HeroGeometric({ className }: HeroGeometricProps) {
cx={cx} cy={cy} r={R} cx={cx} cy={cy} r={R}
fill="none" fill="none"
stroke="#5BA4D9" stroke="#5BA4D9"
strokeOpacity="0.09" strokeOpacity="0.2"
strokeWidth="1" strokeWidth="1"
/> />
@@ -51,7 +51,7 @@ export default function HeroGeometric({ className }: HeroGeometricProps) {
cx={cx} cy={cy} r={R * 0.65} cx={cx} cy={cy} r={R * 0.65}
fill="none" fill="none"
stroke="#5BA4D9" stroke="#5BA4D9"
strokeOpacity="0.05" strokeOpacity="0.12"
strokeWidth="0.75" strokeWidth="0.75"
strokeDasharray="4 12" strokeDasharray="4 12"
/> />
@@ -61,7 +61,7 @@ export default function HeroGeometric({ className }: HeroGeometricProps) {
cx={cx} cy={cy} r={R * 1.35} cx={cx} cy={cy} r={R * 1.35}
fill="none" fill="none"
stroke="#1C2B3A" stroke="#1C2B3A"
strokeOpacity="0.035" strokeOpacity="0.08"
strokeWidth="0.5" strokeWidth="0.5"
strokeDasharray="3 16" strokeDasharray="3 16"
/> />
@@ -70,44 +70,44 @@ export default function HeroGeometric({ className }: HeroGeometricProps) {
{/* Vertical radius */} {/* Vertical radius */}
<line <line
x1={cx} y1={cy} x2={cx} y2={cy - R} 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 */} {/* Top tick mark */}
<line <line
x1={cx - 8} y1={cy - R} x2={cx + 8} y2={cy - R} 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 */} {/* Diagonal radius — 45deg upper-right */}
<line <line
x1={cx} y1={cy} x1={cx} y1={cy}
x2={cx + R * 0.707} y2={cy - R * 0.707} 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" strokeDasharray="4 8"
/> />
{/* Horizontal radius — right */} {/* Horizontal radius — right */}
<line <line
x1={cx} y1={cy} x2={cx + R} y2={cy} 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 */} {/* Right tick */}
<line <line
x1={cx + R} y1={cy - 8} x2={cx + R} y2={cy + 8} 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 ── */} {/* ── Center crosshair ── */}
<line x1={cx - 12} y1={cy} x2={cx + 12} y2={cy} stroke="#5BA4D9" strokeOpacity="0.15" strokeWidth="0.75" /> <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.15" 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.12" /> <circle cx={cx} cy={cy} r="2.5" fill="#5BA4D9" fillOpacity="0.25" />
{/* ── Angle arc at center — 90deg sweep ── */} {/* ── Angle arc at center — 90deg sweep ── */}
<path <path
d={`M ${cx} ${cy - 30} A 30 30 0 0 1 ${cx + 30} ${cy}`} d={`M ${cx} ${cy - 30} A 30 30 0 0 1 ${cx + 30} ${cy}`}
fill="none" fill="none"
stroke="#5BA4D9" stroke="#5BA4D9"
strokeOpacity="0.1" strokeOpacity="0.2"
strokeWidth="0.75" strokeWidth="0.75"
/> />
@@ -115,38 +115,38 @@ export default function HeroGeometric({ className }: HeroGeometricProps) {
<line <line
x1={cx - R} y1={cy - R - 30} x1={cx - R} y1={cy - R - 30}
x2={cx + R} y2={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 */} {/* 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.18" 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" />
{/* Label stub */} {/* 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 ── */} {/* ── Vertical dimension — right side ── */}
<line <line
x1={cx + R + 30} y1={cy - R} x1={cx + R + 30} y1={cy - R}
x2={cx + R + 30} y2={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" 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.16" 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" />
{/* Subtle fill — atmospheric glow behind main circle */} {/* 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> </g>
{/* ━━━ FOREGROUND: Crisp detail elements ━━━ */} {/* ━━━ FOREGROUND: Crisp detail elements ━━━ */}
<g data-layer="foreground"> <g data-layer="foreground">
{/* ── Corner brackets — architectural framing ── */} {/* ── Corner brackets — architectural framing ── */}
{/* Top-right */} {/* 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 */} {/* 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 */} {/* 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 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.06" 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 ── */} {/* ── Tick marks around the main circle — spaced at 30deg intervals ── */}
{[0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330].map((deg) => { {[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} x1={x - nx * 6} y1={y - ny * 6}
x2={x + nx * 6} y2={y + ny * 6} x2={x + nx * 6} y2={y + ny * 6}
stroke="#5BA4D9" stroke="#5BA4D9"
strokeOpacity="0.1" strokeOpacity="0.2"
strokeWidth="0.75" 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}`} d={`M ${cx + 60} ${cy - R + 40} A 50 50 0 0 1 ${cx + 110} ${cy - R + 40}`}
fill="none" fill="none"
stroke="#5BA4D9" stroke="#5BA4D9"
strokeOpacity="0.12" strokeOpacity="0.25"
strokeWidth="0.75" strokeWidth="0.75"
/> />
@@ -185,20 +185,20 @@ export default function HeroGeometric({ className }: HeroGeometricProps) {
cy={560 + row * 28} cy={560 + row * 28}
r="1" r="1"
fill="#1C2B3A" fill="#1C2B3A"
fillOpacity="0.06" fillOpacity="0.13"
/> />
)) ))
)} )}
{/* ── Scattered accent dots ── */} {/* ── Scattered accent dots ── */}
<circle cx={cx + 140} cy={cy - 80} r="2" fill="#5BA4D9" fillOpacity="0.1" /> <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.07" /> <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.06" /> <circle cx={cx + 200} cy={cy + 150} r="1.5" fill="#1C2B3A" fillOpacity="0.13" />
{/* ── Sparse left-side balance elements ── */} {/* ── 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="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.04" strokeWidth="0.5" /> <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.04" strokeWidth="0.5" /> <line x1="88" y1="515" x2="112" y2="515" stroke="#1C2B3A" strokeOpacity="0.09" strokeWidth="0.5" />
</g> </g>
</svg> </svg>
) )