animations

components/products/ProductsIllustration.tsx

@@ -0,0 +1,100 @@
+'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>
+  );
+}