update doormilewings card image update

src/components/sections/WingsInfrastructure.tsx

@@ -1,4 +1,5 @@
 import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
+import styles from "./WingsInfrastructure.module.css";
 
 const CARDS = [
   {
@@ -44,117 +45,23 @@ const CARDS = [
 
 export default function WingsInfrastructure() {
   return (
-    <>
-      <style
-        dangerouslySetInnerHTML={{
-          __html: `
-        .wia-section {
-          background: #09090b;
-          padding: var(--space-section, 64px) clamp(20px, 5vw, 40px);
-        }
-
-        .wia-header {
-          margin: 0 auto 44px auto;
-          max-width: 720px;
-          text-align: center;
-        }
-
-        .wia-eyebrow {
-          font-size: 13px;
-          font-weight: 700;
-          letter-spacing: 2px;
-          text-transform: uppercase;
-          color: rgba(255, 255, 255, 0.4);
-          margin-bottom: 16px;
-        }
-
-        .wia-title {
-          font-size: clamp(26px, 3vw, 40px) !important;
-          font-weight: 800 !important;
-          letter-spacing: -0.03em !important;
-          line-height: 1.2 !important;
-          text-transform: none !important;
-          color: #ffffff !important;
-          margin: 0;
-        }
-
-        .wia-grid {
-          max-width: 1280px;
-          margin: 0 auto;
-          display: grid;
-          grid-template-columns: repeat(4, minmax(0, 1fr));
-          gap: 20px;
-        }
-
-        .wia-card {
-          min-width: 0;
-          padding: 28px 24px;
-          border: 1px solid rgba(255, 255, 255, 0.07);
-          border-radius: 18px;
-          background: rgba(255, 255, 255, 0.02);
-          transition: border-color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .wia-card:hover {
-          border-color: rgba(255, 255, 255, 0.14);
-          background: rgba(255, 255, 255, 0.035);
-        }
-
-        .wia-icon {
-          width: 44px;
-          height: 44px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: 12px;
-          background: rgba(255, 255, 255, 0.05);
-          color: rgba(255, 255, 255, 0.7);
-          margin-bottom: 18px;
-        }
-
-        .wia-card-title {
-          font-size: 15.5px !important;
-          font-weight: 700 !important;
-          line-height: 1.3 !important;
-          text-transform: none !important;
-          color: #ffffff !important;
-          margin: 0 0 8px 0;
-        }
-
-        .wia-card-desc {
-          font-size: 13.5px;
-          line-height: 1.55;
-          color: rgba(255, 255, 255, 0.5);
-          margin: 0;
-        }
-
-        @media (max-width: 1024px) {
-          .wia-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-        }
-
-        @media (max-width: 600px) {
-          .wia-grid { grid-template-columns: 1fr; }
-        }
-      `,
-        }}
-      />
-
-      <section className="wia-section" id="wings-infrastructure">
-        <ScrollReveal delay={0.05} duration={0.7} yOffset={20} className="wia-header">
-          <div className="wia-eyebrow">/ Infrastructure /</div>
-          <h2 className="wia-title">A network built to move, not to sit idle</h2>
+    <section className={styles.section} id="wings-infrastructure">
+      <div className={styles.sectionShell}>
+        <ScrollReveal delay={0.05} duration={0.7} yOffset={20} className={styles.header}>
+          <div className={styles.eyebrow}>/ Infrastructure /</div>
+          <h2 className={styles.title}>A network built to move, not to sit idle</h2>
         </ScrollReveal>
 
-        <StaggerChildren stagger={0.08} duration={0.6} yOffset={20} className="wia-grid">
+        <StaggerChildren stagger={0.08} duration={0.6} yOffset={20} className={styles.grid}>
           {CARDS.map((c) => (
-            <div key={c.title} className="wia-card">
-              <div className="wia-icon" aria-hidden="true">{c.icon}</div>
-              <h3 className="wia-card-title">{c.title}</h3>
-              <p className="wia-card-desc">{c.desc}</p>
+            <div key={c.title} className={styles.card}>
+              <div className={styles.icon} aria-hidden="true">{c.icon}</div>
+              <h3 className={styles.cardTitle}>{c.title}</h3>
+              <p className={styles.cardDesc}>{c.desc}</p>
             </div>
           ))}
         </StaggerChildren>
-      </section>
-    </>
+      </div>
+    </section>
   );
 }