101 lines
3.8 KiB
TypeScript
101 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
|
|
export default function ProductsIllustration() {
|
|
return (
|
|
<div className="absolute inset-0 z-0 overflow-hidden pointer-events-none bg-primary">
|
|
<svg
|
|
viewBox="0 0 1000 500"
|
|
className="w-full h-full"
|
|
preserveAspectRatio="xMidYMid slice"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<defs>
|
|
<linearGradient id="scan-beam" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" stopColor="#82ed20" stopOpacity="0" />
|
|
<stop offset="50%" stopColor="#82ed20" stopOpacity="0.5" />
|
|
<stop offset="100%" stopColor="#82ed20" stopOpacity="0" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
{/* 3D Cable Wireframe Construction */}
|
|
<g transform="translate(100, 250) rotate(-10)">
|
|
|
|
{/* Inner Core Strands (Twisted) */}
|
|
{[...Array(5)].map((_, i) => (
|
|
<path
|
|
key={`strand-${i}`}
|
|
d={`M 0 ${i*10 - 20} Q 400 ${i*10 - 60} 800 ${i*10 - 20}`}
|
|
stroke="white"
|
|
strokeWidth="2"
|
|
strokeOpacity="0.8"
|
|
fill="none"
|
|
>
|
|
<animate attributeName="d"
|
|
values={`M 0 ${i*10 - 20} Q 400 ${i*10 - 60} 800 ${i*10 - 20};
|
|
M 0 ${i*10 - 20} Q 400 ${i*10 + 20} 800 ${i*10 - 20};
|
|
M 0 ${i*10 - 20} Q 400 ${i*10 - 60} 800 ${i*10 - 20}`}
|
|
dur="4s"
|
|
repeatCount="indefinite"
|
|
/>
|
|
</path>
|
|
))}
|
|
|
|
{/* Insulation Layers (Ellipses along the path) */}
|
|
{[...Array(8)].map((_, i) => (
|
|
<ellipse
|
|
key={`ring-${i}`}
|
|
cx={100 + i * 100}
|
|
cy="0"
|
|
rx="40"
|
|
ry="80"
|
|
stroke="white"
|
|
strokeWidth="1"
|
|
strokeOpacity="0.2"
|
|
fill="none"
|
|
/>
|
|
))}
|
|
|
|
{/* Outer Sheath (Top and Bottom Lines) */}
|
|
<path d="M 0 -80 L 800 -80" stroke="white" strokeWidth="1" strokeOpacity="0.3" strokeDasharray="10 5" />
|
|
<path d="M 0 80 L 800 80" stroke="white" strokeWidth="1" strokeOpacity="0.3" strokeDasharray="10 5" />
|
|
|
|
{/* Scanning Ring (Animated) */}
|
|
<g>
|
|
<ellipse cx="0" cy="0" rx="50" ry="90" stroke="#82ed20" strokeWidth="2" strokeOpacity="0.8" fill="none">
|
|
<animate attributeName="cx" from="0" to="800" dur="3s" repeatCount="indefinite" />
|
|
<animate attributeName="rx" values="50;45;50" dur="0.5s" repeatCount="indefinite" />
|
|
</ellipse>
|
|
{/* Scan Beam */}
|
|
<rect x="-50" y="-100" width="100" height="200" fill="url(#scan-beam)" opacity="0.3">
|
|
<animate attributeName="x" from="-50" to="750" dur="3s" repeatCount="indefinite" />
|
|
</rect>
|
|
</g>
|
|
</g>
|
|
|
|
{/* Floating Data/Tech Elements */}
|
|
<g transform="translate(0, 0)">
|
|
{[...Array(20)].map((_, i) => (
|
|
<rect
|
|
key={`bit-${i}`}
|
|
x={Math.random() * 1000}
|
|
y={Math.random() * 500}
|
|
width={Math.random() * 20 + 5}
|
|
height="2"
|
|
fill="white"
|
|
fillOpacity="0.3"
|
|
>
|
|
<animate attributeName="opacity" values="0;0.5;0" dur={`${Math.random() * 2 + 1}s`} repeatCount="indefinite" />
|
|
<animate attributeName="width" values="5;30;5" dur={`${Math.random() * 2 + 1}s`} repeatCount="indefinite" />
|
|
</rect>
|
|
))}
|
|
</g>
|
|
|
|
</svg>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-primary/80 via-transparent to-primary/80" />
|
|
</div>
|
|
);
|
|
}
|