refactor: extract feature cards data and add overflow styles to animations

src/components/ContentDistribution.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { motion, useReducedMotion } from 'framer-motion';
+import clsx from 'clsx';
 
 type Props = {
   className?: string;     // e.g. "w-full h-80"
@@ -135,7 +136,12 @@ export default function ContentDistribution({ className, bg = '#ffffff' }: Props
   const prefersReduced = useReducedMotion();
 
   return (
-    <div className={className} aria-hidden="true" role="img" style={{ background: bg }}>
+        <div
+      className={clsx('relative overflow-hidden', className)}
+      aria-hidden="true"
+      role="img"
+      style={{ background: bg }}
+    >
       <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="100%">
         {/* subtle radial background + rings */}
         <defs>

src/components/Features.tsx

@@ -5,114 +5,92 @@ import ProxyDetection from '@/components/ProxyDetection'
 import ProxyForwarding from '@/components/ProxyForwarding'
 import ContentDistribution from '@/components/ContentDistribution'
 
+const eyebrow = 'Core Components'
+const sectionHeader = 'Network Capabilities'
+const description1 = 'Built for resilience and autonomy, the Mycelium Network dynamically connects nodes through intelligent routing, proxy discovery, and decentralized delivery.'
+const description2 = 'Each component — from message passing to content distribution — works in harmony to create a fully self-healing, self-optimizing data mesh.'
+
+const cards = [
+  {
+    eyebrow: 'Routing',
+    title: 'Automatic pathfinding',
+    description: 'The Mycelium Network automatically discovers the shortest and fastest routes between nodes, ensuring optimal data flow and network efficiency without manual configuration.',
+    component: <Pathfinding />,
+    className: 'lg:col-span-3',
+    roundedClassName: 'max-lg:rounded-t-4xl lg:rounded-tl-4xl',
+    roundedInnerClassName: 'max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]'
+  },
+  {
+    eyebrow: 'Communication',
+    title: 'Distributed message bus',
+    description: 'Acts as a global message layer that lets nodes exchange information seamlessly. Enables resilient, asynchronous communication across the entire decentralized mesh.',
+    component: <MessageBus />,
+    className: 'lg:col-span-3',
+    roundedClassName: 'lg:rounded-tr-4xl',
+    roundedInnerClassName: 'lg:rounded-tr-[calc(2rem+1px)]'
+  },
+  {
+    eyebrow: 'Discovery',
+    title: 'Automatic proxy detection',
+    description: 'The system continuously scans for open SOCKS5 proxies within the network, making it effortless to find available connection points without manual setup.',
+    component: <ProxyDetection className="h-80" />,
+    className: 'lg:col-span-2',
+    roundedClassName: 'lg:rounded-bl-4xl',
+    roundedInnerClassName: 'lg:rounded-bl-[calc(2rem+1px)]'
+  },
+  {
+    eyebrow: 'Connectivity',
+    title: 'Seamless proxy forwarding',
+    description: 'Local SOCKS5 connections can be forwarded through nearby nodes or remote proxies. When browsers use the local proxy, traffic moves securely through the mesh—like a built-in VPN.',
+    component: <ProxyForwarding className="h-80" />,
+    className: 'lg:col-span-2',
+    roundedClassName: '',
+    roundedInnerClassName: ''
+  },
+  {
+    eyebrow: 'Delivery',
+    title: 'Decentralized content distribution',
+    description: 'Mycelium can serve data from distributed 0-DBs, creating a CDN-like layer that delivers content faster and more reliably—without relying on centralized servers.',
+    component: <ContentDistribution className="h-80" />,
+    className: 'lg:col-span-2',
+    roundedClassName: 'max-lg:rounded-b-4xl lg:rounded-br-4xl',
+    roundedInnerClassName: 'max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]'
+  }
+]
+
 export function Features() {
   return (
-    <section id="features" className=" py-24">
+    <section id="features" className="py-24">
       <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
-        <Eyebrow color="accent">Core Components</Eyebrow>
+        <Eyebrow color="accent">{eyebrow}</Eyebrow>
         <SectionHeader color="dark" className="mt-2 max-w-2xl text-pretty">
-          Network Capabilities
+          {sectionHeader}
         </SectionHeader>
-        <P color="secondary" className="mt-4 max-w-4xl">
+        <P color="secondary" className="mt-4 max-w-4xl text-black">
-          Built for resilience and autonomy, the Mycelium Network dynamically
+          {description1}
-          connects nodes through intelligent routing, proxy discovery, and
-          decentralized delivery.
         </P>
         <P color="secondary" className="mt-2 max-w-4xl">
-          Each component — from message passing to content distribution — works in
+          {description2}
-          harmony to create a fully self-healing, self-optimizing data mesh.
+        </P>
-        </P>  
         <div className="mt-10 grid grid-cols-1 gap-x-4 gap-y-8 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
-          <div className="group relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
+          {cards.map((card, index) => (
-            <div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-t-4xl lg:rounded-tl-4xl" />
+            <div key={index} className={`group relative ${card.className} transition-all duration-300 ease-in-out hover:scale-105`}>
-            <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
+              <div className={`absolute inset-0 rounded-lg bg-transparent ${card.roundedClassName}`} />
-              <Pathfinding />
+              <div className={`flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${card.roundedInnerClassName}`}>
-              <div className="p-10 pt-4">
+                {card.component}
-                <CardEyebrow color="accent">Routing</CardEyebrow>
+                <div className="p-10 pt-4">
-                <CardTitle color="dark" className="mt-2">
+                  <CardEyebrow color="accent">{card.eyebrow}</CardEyebrow>
-                  Automatic pathfinding
+                  <CardTitle color="dark" className="mt-2">
-                </CardTitle>
+                    {card.title}
-                <CardDescription color="secondary" className="mt-2 max-w-lg">
+                  </CardTitle>
-                  The Mycelium Network automatically discovers the shortest and
+                  <CardDescription color="secondary" className="mt-2 max-w-lg">
-                  fastest routes between nodes, ensuring optimal data flow and
+                    {card.description}
-                  network efficiency without manual configuration.
+                  </CardDescription>
-                </CardDescription>
+                </div>
               </div>
+              <div className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20 ${card.roundedClassName}`} />
             </div>
-            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl lg:rounded-tl-4xl group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
+          ))}
-          </div>
-          <div className="group relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
-            <div className="absolute inset-0 rounded-lg bg-white lg:rounded-tr-4xl" />
-            <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
-              <MessageBus />
-              <div className="p-10 pt-4">
-                <CardEyebrow color="accent">Communication</CardEyebrow>
-                <CardTitle color="dark" className="mt-2">
-                  Distributed message bus
-                </CardTitle>
-                <CardDescription color="secondary" className="mt-2 max-w-lg">
-                  Acts as a global message layer that lets nodes exchange
-                  information seamlessly. Enables resilient, asynchronous
-                  communication across the entire decentralized mesh.
-                </CardDescription>
-              </div>
-            </div>
-            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-tr-4xl group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
-          </div>
-          <div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
-            <div className="absolute inset-0 rounded-lg bg-white lg:rounded-bl-4xl" />
-            <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
-              <ProxyDetection className="h-80" />
-              <div className="p-10 pt-4">
-                <CardEyebrow color="accent">Discovery</CardEyebrow>
-                <CardTitle color="dark" className="mt-2">
-                  Automatic proxy detection
-                </CardTitle>
-                <CardDescription color="secondary" className="mt-2 max-w-lg">
-                  The system continuously scans for open SOCKS5 proxies within the
-                  network, making it effortless to find available connection points
-                  without manual setup.
-                </CardDescription>
-              </div>
-            </div>
-            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-bl-4xl group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
-          </div>
-          <div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
-            <div className="absolute inset-0 rounded-lg bg-white" />
-            <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
-              <ProxyForwarding className="h-80" />
-              <div className="p-10 pt-4">
-                <CardEyebrow color="accent">Connectivity</CardEyebrow>
-                <CardTitle color="dark" className="mt-2">
-                  Seamless proxy forwarding
-                </CardTitle>
-                <CardDescription color="secondary" className="mt-2 max-w-lg">
-                  Local SOCKS5 connections can be forwarded through nearby nodes or
-                  remote proxies. When browsers use the local proxy, traffic moves
-                  securely through the mesh—like a built-in VPN.
-                </CardDescription>
-              </div>
-            </div>
-            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
-          </div>
-          <div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
-            <div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-b-4xl lg:rounded-br-4xl" />
-            <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
-              <ContentDistribution className="h-80" />
-              <div className="p-10 pt-4">
-                <CardEyebrow color="accent">Delivery</CardEyebrow>
-                <CardTitle color="dark" className="mt-2">
-                  Decentralized content distribution
-                </CardTitle>
-                <CardDescription color="secondary" className="mt-2 max-w-lg">
-                  Mycelium can serve data from distributed 0-DBs, creating a
-                  CDN-like layer that delivers content faster and more
-                  reliably—without relying on centralized servers.
-                </CardDescription>
-              </div>
-            </div>
-            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-br-4xl group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
-          </div>
         </div>
       </div>
     </section>

src/components/MessageBus.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { motion, useReducedMotion } from 'framer-motion';
+import clsx from 'clsx';
 
 type Props = {
   className?: string;      // e.g. "w-full h-72"
@@ -72,7 +73,12 @@ export default function MessageBus({ className, bg = '#ffffff' }: Props) {
   const H = 460;
 
   return (
-    <div className={className} aria-hidden="true" role="img" style={{ background: bg }}>
+        <div
+      className={clsx('relative overflow-hidden', className)}
+      aria-hidden="true"
+      role="img"
+      style={{ background: bg }}
+    >
       <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="100%">
 
         {/* subtle grid */}

src/components/ProxyDetection.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { motion, useReducedMotion } from 'framer-motion';
+import clsx from 'clsx';
 
 type Props = {
   className?: string;   // e.g. "w-full h-64"
@@ -160,8 +161,8 @@ export default function ProxyDetection({ className, bg = '#ffffff' }: Props) {
   const delays = [0.8, 0.6, 0.4, 0.2, 0.0];
 
   return (
-    <div
+        <div
-      className={className}
+      className={clsx('relative overflow-hidden', className)}
       aria-hidden="true"
       role="img"
       style={{ background: bg }}

src/components/ProxyForwarding.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { motion, useReducedMotion } from 'framer-motion';
+import clsx from 'clsx';
 
 type Props = {
   className?: string;   // e.g. "w-full h-72"
@@ -124,7 +125,12 @@ export default function ProxyForwarding({ className, bg = '#ffffff' }: Props) {
   const DEST = { x: 860, y: 210 };
 
   return (
-    <div className={className} aria-hidden="true" role="img" style={{ background: bg }}>
+        <div
+      className={clsx('relative overflow-hidden', className)}
+      aria-hidden="true"
+      role="img"
+      style={{ background: bg }}
+    >
       <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="100%">
         {/* subtle grid bg */}
         <defs>

src/components/Texts.tsx

@@ -44,15 +44,14 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
     return (
       <Tag
         className={cn(defaultClassName, colorVariants[color], className)}
-        {...(props as object)}
+        {...props}
       >
         {children}
       </Tag>
     )
   }
 
-  ;(Text as any).displayName = `Text(${
+  ;(Text as any).displayName = `Text(${typeof defaultElement === 'string' ? defaultElement : 'Component'
-    typeof defaultElement === 'string' ? defaultElement : 'Component'
   })`
   return Text
 }