feat: convert network use cases to horizontal carousel with icons

- Replaced static grid layout with scrollable carousel supporting touch/mouse navigation
- Added hero icons to each use case card for visual hierarchy
- Introduced intro card with navigation controls and updated styling for better mobile experience

src/pages/network/SecondaryFeatures.tsx

@@ -187,12 +187,14 @@ function DeviceChartIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
 
 export function SecondaryFeatures() {
   return (
-    <section
-      id="comingsoon"
-      aria-label="Features for building a portfolio"
-      className="py-20 sm:py-32"
-    >
-      <Container>
+    <section className="w-full max-w-8xl mx-auto bg-transparent">
+
+      {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+      <div className="w-full border-t border-l border-r border-gray-100" />
+      
+      
+      <Container className="py-12 border border-t-0 border-b-0 border-gray-100">
         <div className="mx-auto max-w-4xl sm:text-center">
           <h2 className="text-base/7 font-semibold text-cyan-500">IN ACTIVE EVOLUTION</h2>
           <p className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
@@ -204,7 +206,7 @@ export function SecondaryFeatures() {
         </div>
         <ul
           role="list"
-          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 text-sm sm:mt-20 sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-3"
+          className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6 text-sm  sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-3"
         >
           {features.map((feature) => (
             <li
@@ -220,6 +222,9 @@ export function SecondaryFeatures() {
           ))}
         </ul>
       </Container>
+       {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border-b  border-gray-100" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
     </section>
   )
 }