feat: refactor pods page with simplified content and improved animations

- Added agent1.png image asset
- Refactored InfiniteMovingCards component with cleaner animation logic and improved duplication handling
- Changed default speed from "fast" to "slow" and simplified animation setup
- Updated AgentBento title from "Augmented Intelligence Fabric" to "Intelligence Fabric"
- Increased Homepod vertical padding on large screens (lg:py-16 to lg:py-24)
- Removed "Feature" label from PodsFeatures use

src/pages/pods/animations/PodsFlow.tsx

@@ -9,22 +9,23 @@ type Props = {
   gridStroke?: string;
 };
 
+// ▸ NEW: Cropped dimensions
 const W = 760;
-const H = 420;
+const H = 300; // was 420
 
 export default function PodsFlow({
   className,
   accent = "#00b8db",
-  gridStroke = "#2b2a2a",
+  gridStroke = "#3a3a3a", // lighter grid stroke
 }: Props) {
   const pods = [
-    { x: 100, y: 180, label: "Pod 1" },
-    { x: 260, y: 180, label: "Pod 2" },
-    { x: 420, y: 180, label: "Pod 3" },
-    { x: 580, y: 180, label: "Pod 4" },
+    { x: 100, y: 120, label: "Pod 1" }, // moved slightly up for new height
+    { x: 260, y: 120, label: "Pod 2" },
+    { x: 420, y: 120, label: "Pod 3" },
+    { x: 580, y: 120, label: "Pod 4" },
   ];
 
-  // Pulse path
+  // Pulse path (unchanged)
   const path = `
     M ${pods[0].x + 80} ${pods[0].y + 40}
     L ${pods[1].x - 10} ${pods[1].y + 40}
@@ -34,7 +35,7 @@ export default function PodsFlow({
     L ${pods[3].x - 10} ${pods[3].y + 40}
   `;
 
-  // Arrow segments
+  // Line segments
   const arrows = [
     {
       d: `M ${pods[0].x + 80} ${pods[0].y + 40} L ${pods[1].x - 6} ${pods[1].y + 40}`,
@@ -54,15 +55,13 @@ export default function PodsFlow({
     <div
       className={clsx("relative overflow-hidden", className)}
       aria-hidden="true"
-      role="img"
-      aria-label="Pod-to-Pod signal transfer animation"
       style={{ background: "transparent" }}
     >
       <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full">
-        {/* GRID BG */}
+        {/* GRID BACKGROUND */}
         <defs>
-          <pattern id="pods-grid" width="28" height="28" patternUnits="userSpaceOnUse">
-            <path d="M 28 0 L 0 0 0 28" fill="none" stroke={gridStroke} strokeWidth="1" opacity="0.6" />
+          <pattern id="pods-grid" width="26" height="26" patternUnits="userSpaceOnUse">
+            <path d="M 26 0 L 0 0 0 26" fill="none" stroke={gridStroke} strokeWidth="1" opacity="0.9" />
           </pattern>
 
           <filter id="pods-glow">
@@ -85,8 +84,8 @@ export default function PodsFlow({
             width={80}
             height={80}
             rx={14}
-            fill="#0d0d0d"
-            stroke="#1a1a1a"
+            fill="#0f0f0f"
+            stroke="#fff"          // brighter stroke
             strokeWidth={2}
             initial={{ opacity: 0 }}
             animate={{ opacity: 0.9 }}
@@ -94,7 +93,7 @@ export default function PodsFlow({
           />
         ))}
 
-        {/* POD LABELS */}
+        {/* POD TEXT */}
         {pods.map((p, i) => (
           <motion.text
             key={i}
@@ -103,26 +102,26 @@ export default function PodsFlow({
             textAnchor="middle"
             fontSize="14"
             fontFamily="Inter, sans-serif"
-            fill="#9ca3af"
+            fill="#fff"   // lighter text
             initial={{ opacity: 0 }}
-            animate={{ opacity: 0.9 }}
-            transition={{ delay: 0.1 + i * 0.1, duration: 0.6 }}
+            animate={{ opacity: 0.95 }}
+            transition={{ delay: 0.1 + i * 0.1 }}
           >
             {p.label}
           </motion.text>
         ))}
 
-        {/* GREY LINES */}
+        {/* GREY LINES (lighter) */}
         {arrows.map((a, i) => (
           <motion.path
             key={`grey-${i}`}
             d={a.d}
-            stroke="#333"
+            stroke="#444"     // lighter grey
             strokeWidth={4}
             strokeLinecap="round"
             fill="none"
             initial={{ pathLength: 0, opacity: 0 }}
-            animate={{ pathLength: 1, opacity: 0.8 }}
+            animate={{ pathLength: 1, opacity: 0.9 }}
             transition={{ delay: 0.2 * i, duration: 0.7 }}
           />
         ))}
@@ -143,7 +142,7 @@ export default function PodsFlow({
           />
         ))}
 
-        {/* NEW: CYAN ENDPOINT PULSES */}
+        {/* ENDPOINT PULSES */}
         {arrows.map((a, i) => (
           <motion.circle
             key={`endpoint-${i}`}
@@ -151,23 +150,21 @@ export default function PodsFlow({
             cy={a.end.y}
             r={10}
             fill={accent}
-            opacity={0.12}
+            opacity={0.16} // slightly stronger
             filter="url(#pods-glow)"
-            initial={{ scale: 0.8, opacity: 0 }}
             animate={{
               scale: [1, 1.2, 1],
-              opacity: [0.05, 0.25, 0.05],
+              opacity: [0.08, 0.28, 0.08],
             }}
             transition={{
-              duration: 1.5,
+              duration: 1.4,
               delay: i * 0.2,
               repeat: Infinity,
-              repeatType: "mirror",
             }}
           />
         ))}
 
-        {/* MAIN MOVING CYAN PULSE */}
+        {/* PULSE DOT */}
         <motion.circle
           r={8}
           fill={accent}
@@ -178,10 +175,10 @@ export default function PodsFlow({
           initial={{ offsetDistance: "0%", opacity: 0.4 }}
           animate={{
             offsetDistance: ["0%", "100%"],
-            opacity: [0.4, 1, 0.4],
+            opacity: [0.5, 1, 0.5],
           }}
           transition={{
-            duration: 2.6,
+            duration: 2.4,
             repeat: Infinity,
             ease: "linear",
           }}