update ev section

next.config.ts

@@ -1,6 +1,10 @@
 import type { NextConfig } from "next";
+import path from "path";
 
 const nextConfig: NextConfig = {
+  turbopack: {
+    root: path.resolve(__dirname),
+  },
   output: "export",
   // Required by the How It Works 3D experience. React StrictMode double-invokes
   // mount/effects in dev, which tears down and re-creates the WebGL context of

src/components/sections/EVLogisticSection.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect, useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import Image from "next/image";
 import gsap from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
@@ -9,43 +9,61 @@ if (typeof window !== "undefined") {
   gsap.registerPlugin(ScrollTrigger);
 }
 
-const ACCORDION_DATA = [
+const CARDS_DATA = [
   {
     index: 1,
-    num: "01",
     title: "Battery-First Planning",
-    desc: "Routes are optimized around battery levels and charging windows, not retrofitted as an afterthought."
+    desc: "Routes are optimized around battery levels and charging windows, not retrofitted as an afterthought.",
+    icon: (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <rect x="2" y="7" width="16" height="10" rx="2" ry="2" />
+        <line x1="22" y1="11" x2="22" y2="13" />
+        <line x1="6" y1="11" x2="10" y2="11" />
+        <line x1="6" y1="13" x2="12" y2="13" />
+      </svg>
+    )
   },
   {
     index: 2,
-    num: "02",
     title: "Energy-Aware Routing",
-    desc: "Our algorithms factor in terrain, traffic, and payload weight to maximize range efficiency."
+    desc: "Our algorithms factor in terrain, traffic, and payload weight to maximize range efficiency.",
+    icon: (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+      </svg>
+    )
   },
   {
     index: 3,
-    num: "03",
     title: "Smart Charging Integration",
-    desc: "Seamless coordination with charging infrastructure to eliminate range anxiety for drivers."
+    desc: "Seamless coordination with charging infrastructure to eliminate range anxiety for drivers.",
+    icon: (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M12 2v10" />
+        <path d="M18 8V6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v2a4 4 0 0 0 4 4h4a4 4 0 0 0 4-4Z" />
+        <path d="M10 22v-6" />
+        <path d="M14 22v-6" />
+      </svg>
+    )
   },
   {
     index: 4,
-    num: "04",
     title: "Carbon Footprint Tracking",
-    desc: "Real-time emissions monitoring and sustainability reports for every delivery."
+    desc: "Real-time emissions monitoring and sustainability reports for every delivery.",
+    icon: (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 3.5 2 5.5a7 7 0 0 1-7 7h-3" />
+        <path d="M12 22V12" />
+      </svg>
+    )
   }
 ];
 
 export default function EVLogisticSection() {
-  const [openIndex, setOpenIndex] = useState<number | null>(4); // Default to item 4 open to match user's screenshot layout
   const containerRef = useRef<HTMLDivElement>(null);
   const imageWrapperRef = useRef<HTMLDivElement>(null);
   const imageRef = useRef<HTMLImageElement>(null);
 
-  const toggleAccordion = (index: number) => {
-    setOpenIndex((prev) => (prev === index ? null : index));
-  };
-
   useEffect(() => {
     const container = containerRef.current;
     const img = imageRef.current;
@@ -85,7 +103,7 @@ export default function EVLogisticSection() {
         stagger: 0.02, // Rapid letter-by-letter wave reveal!
         ease: "power4.out",
       }, "-=0.45")
-      .to(container.querySelectorAll(".ev-logistic-accordion-item"), {
+      .to(container.querySelectorAll(".ev-feature-card"), {
         opacity: 1,
         y: 0,
         duration: 0.6,
@@ -113,14 +131,14 @@ export default function EVLogisticSection() {
   return (
     <>
       <style dangerouslySetInnerHTML={{ __html: `
-        /* Custom CSS Scoped to EV Logistics Section - New Premium Look */
+        /* Custom CSS Scoped to EV Logistics Section */
         .ev-logistic-section {
           display: flex !important;
           flex-direction: column !important;
           width: 100% !important;
-          max-width: 1320px !important;
+          max-width: 1480px !important;
-          margin: 10px auto 120px auto !important; /* Centered horizontally with auto margins */
+          margin: 10px auto 120px auto !important;
-          padding: 80px 60px !important; /* Restored original balanced left/right paddings */
+          padding: 80px 40px !important;
           box-sizing: border-box !important;
           background: #ffffff !important;
           font-family: 'Manrope', sans-serif !important;
@@ -132,7 +150,7 @@ export default function EVLogisticSection() {
           max-width: 100% !important;
           align-self: stretch !important;
           border-bottom: 2px solid rgba(17, 17, 17, 0.09) !important;
-          padding-bottom: 16px !important;
+          padding-bottom: 24px !important;
           margin-bottom: 48px !important;
           display: block !important;
           text-align: left !important;
@@ -144,13 +162,13 @@ export default function EVLogisticSection() {
           align-items: center !important;
           justify-content: space-between !important;
           width: 100% !important;
-          gap: 40px !important;
+          gap: 3% !important;
         }
 
-        /* Balanced Left Column - Image column takes up 58% */
+        /* Left Column - Image column takes up 45% */
         .ev-logistic-image-col {
-          flex: 1 1 58% !important;
+          flex: 0 0 45% !important;
-          max-width: 58% !important; 
+          max-width: 45% !important; 
           display: flex !important;
           align-items: center !important;
           justify-content: flex-start !important; 
@@ -182,23 +200,23 @@ export default function EVLogisticSection() {
           justify-content: flex-start !important;
           overflow: visible !important;
           position: relative !important;
-          transform: scale(1.15) !important; /* Scale up image to make it larger and more dominant */
+          transform: scale(1.15) !important;
           transform-origin: left center !important;
-          margin-left: -80px !important; /* Offset image to the left to anchor it to the container edge */
+          margin-left: -80px !important;
         }
 
         .ev-logistic-image-wrapper img {
           width: 100% !important;
           height: auto !important;
           object-fit: contain !important;
-          filter: none !important; /* Blends solid white JPEG edges seamlessly into pure white background */
+          filter: none !important;
           will-change: transform !important;
         }
 
-        /* Balanced right column - takes up 42% for crisp textual reading */
+        /* Right column - takes up 52% for grid cards */
         .ev-logistic-content-col {
-          flex: 1 1 42% !important;
+          flex: 0 0 52% !important;
-          max-width: 42% !important; 
+          max-width: 52% !important; 
           display: flex !important;
           flex-direction: column !important;
           justify-content: center !important;
@@ -209,10 +227,10 @@ export default function EVLogisticSection() {
           font-size: 14px !important;
           font-weight: 400 !important;
           line-height: 2.1429em !important;
-          letter-spacing: 0px !important; /* Expands to 3px on scroll */
+          letter-spacing: 0px !important;
           text-transform: lowercase !important;
           color: #111111 !important;
-          margin: 0 !important;
+          margin: 0 0 16px 0 !important;
           opacity: 0;
           transform: translateY(-12px);
           will-change: transform, opacity, letter-spacing;
@@ -221,243 +239,132 @@ export default function EVLogisticSection() {
         }
 
         .ev-logistic-title-wrapper {
-          margin-bottom: 48px;
+          margin: 0 !important;
         }
 
         /* Expanded clean headings look from the screenshot */
         .ev-logistic-title {
-          font-size: clamp(45px, 6.2vw, 96px);
+          font-size: clamp(40px, 5.5vw, 80px) !important;
-          font-weight: 500;
+          font-weight: 500 !important;
-          line-height: 0.95;
+          line-height: 0.95 !important;
-          text-transform: uppercase;
+          text-transform: uppercase !important;
-          color: #111111;
+          color: #111111 !important;
-          margin: 0 10px 0 0; /* Clean margin-right to shift title away from borders */
+          margin: 0 10px 0 0 !important;
-          letter-spacing: -1.8px;
+          letter-spacing: -1.8px !important;
         }
 
         /* CSS for robust letter-by-letter animation wrapping */
         .ev-word-inline {
-          display: inline-block;
+          display: inline-block !important;
-          white-space: nowrap; /* Prevents awkward character line breaks */
+          white-space: nowrap !important;
         }
 
         .ev-char-wrapper {
-          display: inline-block;
+          display: inline-block !important;
-          overflow: hidden;
+          overflow: hidden !important;
-          vertical-align: top;
+          vertical-align: top !important;
         }
 
         .ev-char {
-          display: inline-block;
+          display: inline-block !important;
           transform: translateY(110%);
           opacity: 0;
           will-change: transform, opacity;
         }
 
         .ev-char-space {
-          display: inline-block;
+          display: inline-block !important;
         }
 
-        .ev-logistic-accordion {
+        /* Card Grid Layout */
-          display: flex;
+        .ev-feature-grid {
-          flex-direction: column;
+          display: grid !important;
-          width: 100%;
+          grid-template-columns: repeat(2, 1fr) !important;
+          gap: 24px !important;
+          width: 100% !important;
         }
 
-        /* Sleek horizontal grid borders */
+        /* Premium Theme White Card */
-        .ev-logistic-accordion-item {
+        .ev-feature-card {
-          width: 100%;
+          display: flex !important;
-          border-top: 1px solid #e5e7eb;
+          flex-direction: column !important;
+          background: #ffffff !important;
+          border: 1px solid rgba(17, 17, 17, 0.09) !important;
+          border-radius: 20px !important;
+          padding: 30px !important;
+          color: #555555 !important;
+          height: 100% !important;
+          box-sizing: border-box !important;
           opacity: 0;
           transform: translateY(20px);
           will-change: transform, opacity;
-          transition: background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1),
+          transition: border-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
-                      border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1),
+                      box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
-                      border-radius 0.45s cubic-bezier(0.25, 1, 0.5, 1),
+                      transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
-                      box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
+          box-shadow: 0 4px 24px rgba(17, 17, 17, 0.02) !important;
         }
 
-        .ev-logistic-accordion-item:last-child {
+        .ev-feature-card:hover {
-          border-bottom: 1px solid #e5e7eb;
+          border-color: #c01227 !important;
+          box-shadow: 0 20px 40px rgba(192, 18, 39, 0.08), 0 4px 12px rgba(17, 17, 17, 0.03) !important;
+          transform: translateY(-8px) !important;
         }
 
-        /* Soft highlight on row hover */
+        /* Red Icon Wrapper */
-        .ev-logistic-accordion-item:hover {
+        .ev-feature-icon-wrapper {
-          background: rgba(192, 18, 39, 0.015);
+          margin-bottom: 24px !important;
+          display: inline-flex !important;
+          align-items: center !important;
+          justify-content: center !important;
+          width: 54px !important;
+          height: 54px !important;
+          background: rgba(192, 18, 39, 0.06) !important;
+          border: 1px solid rgba(192, 18, 39, 0.18) !important;
+          border-radius: 50% !important;
+          color: #c01227 !important;
+          transition: all 0.3s ease !important;
         }
 
-        /* ---- Active (expanded) item: subtle premium highlight ----
+        .ev-feature-card:hover .ev-feature-icon-wrapper {
-           A soft ~5% red tint, a 16–20px rounded container, a 3px red
+          background: rgba(192, 18, 39, 0.12) !important;
-           accent on the left (drawn as an inset shadow so the row never
+          border-color: #c01227 !important;
-           shifts) and an extremely soft shadow for quiet depth. The grid
+          transform: scale(1.1) !important;
-           dividers directly above and below the active row are hidden so
+          box-shadow: 0 0 12px rgba(192, 18, 39, 0.15) !important;
-           the tinted block reads as one clean, rounded surface — refined
-           and integrated, never a floating "card". overflow:hidden clips
-           the progress bar to the rounded corners (it does not clip the
-           element's own outer shadow). */
-        .ev-logistic-accordion-item.active {
-          background: rgba(192, 18, 39, 0.045);
-          border-top-color: transparent;
-          border-radius: 16px;
-          overflow: hidden;
-          box-shadow:
-            inset 3px 0 0 0 #c01227,
-            0 4px 14px -12px rgba(17, 17, 17, 0.12);
-        }
-        .ev-logistic-accordion-item.active + .ev-logistic-accordion-item {
-          border-top-color: transparent;
-        }
-        .ev-logistic-accordion-item.active:last-child {
-          border-bottom-color: transparent;
-        }
-        /* Comfortable internal padding on the active row so the content
-           feels more structured and clears the left accent. */
-        .ev-logistic-accordion-item.active .ev-logistic-accordion-header {
-          padding-left: 28px;
-          padding-right: 28px;
-        }
-        .ev-logistic-accordion-item.active .ev-logistic-accordion-content-inner {
-          padding-left: 28px;
-          padding-right: 28px;
         }
 
-        /* Spacious row padding for luxurious design - INCREASED font size for headers */
+        .ev-feature-icon-wrapper svg {
-        .ev-logistic-accordion-header {
+          width: 24px !important;
-          width: 100%;
+          height: 24px !important;
-          display: flex;
+          stroke: currentColor !important;
-          justify-content: space-between;
-          align-items: center;
-          padding: 28px 16px;
-          cursor: pointer;
-          background: transparent;
-          border: none;
-          text-align: left;
-          outline: none;
-          font-family: 'Manrope', sans-serif;
-          font-size: clamp(24px, 2.2vw, 30px); /* Increased to clamp up to 30px! */
-          font-weight: 700;
-          color: #111111;
-          transition: color 0.3s ease,
-                      padding 0.45s cubic-bezier(0.25, 1, 0.5, 1);
         }
 
-        .ev-logistic-accordion-header span:first-child {
+        /* Title & Description Inside Cards */
-          transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
+        .ev-feature-card-title {
-          display: inline-block;
+          font-family: 'Manrope', sans-serif !important;
+          font-size: 20px !important;
+          font-weight: 700 !important;
+          line-height: 1.3em !important;
+          color: #c01227 !important;
+          margin: 0 0 12px 0 !important;
+          text-transform: none !important;
         }
 
-        /* Row text horizontal slide nudge */
+        .ev-feature-card-desc {
-        .ev-logistic-accordion-header:hover {
+          font-family: 'Manrope', sans-serif !important;
-          color: #c01227;
+          font-size: 14px !important;
-        }
+          font-weight: 500 !important;
-
+          line-height: 1.6 !important;
-        .ev-logistic-accordion-header:hover span:first-child {
+          color: #555555 !important;
-          transform: translateX(10px);
+          margin: 0 !important;
-        }
-
-        .ev-logistic-accordion-item.active .ev-logistic-accordion-header {
-          color: #111111;
-        }
-
-        .ev-logistic-accordion-arrow-container {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          width: 32px;
-          height: 32px;
-          transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s ease;
-        }
-
-        .ev-logistic-accordion-arrow-container svg {
-          width: 20px;
-          height: 20px;
-          stroke-width: 2.5;
-        }
-
-        /* Inactive arrows: point down-right ↘ */
-        .ev-logistic-accordion-item:not(.active) .ev-logistic-accordion-arrow-container {
-          transform: rotate(90deg);
-          color: #111111;
-        }
-
-        /* Active arrows: point up-right ↗ in brand red */
-        .ev-logistic-accordion-item.active .ev-logistic-accordion-arrow-container {
-          transform: rotate(0deg);
-          color: #c01227;
-        }
-
-        /* Hover: rotate smooth to diagonal up-right */
-        .ev-logistic-accordion-header:hover .ev-logistic-accordion-arrow-container {
-          transform: rotate(0deg);
-          color: #c01227;
-        }
-
-        .ev-logistic-accordion-content {
-          overflow: hidden;
-          max-height: 0;
-          opacity: 0;
-          transition: max-height 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s ease;
-        }
-
-        .ev-logistic-accordion-item.active .ev-logistic-accordion-content {
-          max-height: 160px;
-          opacity: 1;
-        }
-
-        /* Balanced text spacing inside descriptions - INCREASED font size for descriptions */
-        .ev-logistic-accordion-content-inner {
-          padding: 0 16px 28px 16px;
-          font-size: clamp(18px, 1.5vw, 20px); /* Increased to clamp up to 20px! */
-          line-height: 1.6;
-          color: #555555;
-          font-weight: 500;
-          transition: padding 0.45s cubic-bezier(0.25, 1, 0.5, 1);
-        }
-
-        /* Underline track & sweeping active red bar */
-        .ev-logistic-accordion-progress-track {
-          position: relative;
-          width: 100%;
-          height: 1.5px;
-          background: transparent;
-          margin-top: -1.5px;
-          overflow: hidden;
-        }
-
-        .ev-logistic-accordion-progress-bar {
-          position: absolute;
-          left: 0;
-          top: 0;
-          height: 100%;
-          width: 100%;
-          background: #c01227;
-          transform: scaleX(0);
-          transform-origin: left center;
-          transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
-          will-change: transform;
-        }
-
-        .ev-logistic-accordion-item.active .ev-logistic-accordion-progress-bar {
-          transform: scaleX(1);
-        }
-
-        /* The active row now carries its own highlight (tint + left accent),
-           so the bottom sweeping red bar is redundant and clashes with the
-           rounded corners — hide it while the row is expanded. */
-        .ev-logistic-accordion-item.active .ev-logistic-accordion-progress-track {
-          display: none;
         }
 
         /* Responsiveness constraints */
         @media (max-width: 1024px) {
           .ev-logistic-section {
-            padding: 60px 24px;
+            padding: 60px 24px !important;
-            margin-bottom: 60px;
+            margin-bottom: 60px !important;
           }
 
-          /* Base rules above use !important (flex-direction:row, the 58/42%
-             column widths), so these overrides MUST also use !important or the
-             grid never stacks and the image/text stay squished side-by-side. */
           .ev-logistic-body-grid {
             flex-direction: column !important;
             gap: 50px !important;
@@ -467,13 +374,13 @@ export default function EVLogisticSection() {
             flex: 1 1 100% !important;
             max-width: 100% !important;
             min-height: auto !important;
-            justify-content: center !important; /* Center layout on mobile */
+            justify-content: center !important;
           }
 
           .ev-logistic-image-wrapper {
             max-width: 580px !important;
-            transform: none !important; /* Reset scale transform on mobile/tablet */
+            transform: none !important;
-            margin-left: 0 !important; /* Reset left margin offset on mobile/tablet */
+            margin-left: 0 !important;
             justify-content: center !important;
           }
 
@@ -483,41 +390,22 @@ export default function EVLogisticSection() {
           }
 
           .ev-logistic-title {
-            font-size: 38px;
+            font-size: clamp(32px, 5vw, 60px) !important;
           }
         }
 
         @media (max-width: 768px) {
           .ev-logistic-section {
-            padding: 40px 16px;
+            padding: 40px 16px !important;
           }
 
           .ev-logistic-title {
-            font-size: 32px;
+            font-size: 32px !important;
           }
 
-          .ev-logistic-accordion-header {
+          .ev-feature-grid {
-            font-size: 19px;
+            grid-template-columns: 1fr !important;
-            padding: 22px 8px;
+            gap: 20px !important;
-          }
-
-          .ev-logistic-accordion-content-inner {
-            padding: 0;
-            font-size: 15.5px;
-          }
-
-          /* Keep the active row's comfortable padding proportional on phones
-             (smaller bump than desktop so it never crowds the narrow column). */
-          .ev-logistic-accordion-item.active {
-            border-radius: 16px;
-          }
-          .ev-logistic-accordion-item.active .ev-logistic-accordion-header {
-            padding-left: 16px;
-            padding-right: 16px;
-          }
-          .ev-logistic-accordion-item.active .ev-logistic-accordion-content-inner {
-            padding-left: 16px;
-            padding-right: 16px;
           }
         }
       `}} />
@@ -526,9 +414,23 @@ export default function EVLogisticSection() {
         ref={containerRef}
         className="ev-logistic-section"
       >
-        {/* Top Header Row with / features / kicker */}
+        {/* Top Header Row with / features / kicker and Full-Width Title */}
         <div className="ev-logistic-header">
           <div className="ev-logistic-kicker">/ Build Electric Vehicles /</div>
+          <div className="ev-logistic-title-wrapper">
+            <h3 className="ev-logistic-title">
+              {headingWords.map((word, wordIndex) => (
+                <span key={wordIndex} className="ev-word-inline">
+                  {word.split("").map((letter, letterIndex) => (
+                    <span key={letterIndex} className="ev-char-wrapper">
+                      <span className="ev-char">{letter}</span>
+                    </span>
+                  ))}
+                  <span className="ev-char-space">&nbsp;</span>
+                </span>
+              ))}
+            </h3>
+          </div>
         </div>
 
         <div className="ev-logistic-body-grid">
@@ -548,69 +450,19 @@ export default function EVLogisticSection() {
             </div>
           </div>
 
-          {/* Right Column: Refined Accordion list with letter-by-letter animation */}
+          {/* Right Column: 2x2 Grid of Feature Cards */}
           <div className="ev-logistic-content-col">
-            {/* Character-by-character masked entrance wave reveal on scroll */}
+            <div className="ev-feature-grid">
-            <div className="ev-logistic-title-wrapper">
+              {CARDS_DATA.map((item) => (
-              <h3 className="ev-logistic-title">
-                {headingWords.map((word, wordIndex) => (
-                  <span key={wordIndex} className="ev-word-inline">
-                    {word.split("").map((letter, letterIndex) => (
-                      <span key={letterIndex} className="ev-char-wrapper">
-                        <span className="ev-char">{letter}</span>
-                      </span>
-                    ))}
-                    <span className="ev-char-space">&nbsp;</span>
-                  </span>
-                ))}
-              </h3>
-            </div>
-
-            <div className="ev-logistic-accordion">
-              {ACCORDION_DATA.map((item) => (
                 <div 
                   key={item.index} 
-                  className={`ev-logistic-accordion-item ${openIndex === item.index ? "active" : ""}`}
+                  className="ev-feature-card"
                 >
-                  <button
+                  <div className="ev-feature-icon-wrapper">
-                    className="ev-logistic-accordion-header"
+                    {item.icon}
-                    onClick={() => toggleAccordion(item.index)}
-                    aria-expanded={openIndex === item.index}
-                  >
-                    <span>{item.num}. {item.title}</span>
-                    <span className="ev-logistic-accordion-arrow-container">
-                      <svg 
-                        viewBox="0 0 24 24" 
-                        fill="none" 
-                        stroke="currentColor" 
-                        strokeLinecap="round" 
-                        strokeLinejoin="round"
-                      >
-                        <line x1="7" y1="17" x2="17" y2="7"></line>
-                        <polyline points="7 7 17 7 17 17"></polyline>
-                      </svg>
-                    </span>
-                  </button>
-                  
-                  <div className="ev-logistic-accordion-content">
-                    <div className="ev-logistic-accordion-content-inner">
-                      {/* Kinetic slide-up and fade subtitle reveal */}
-                      <p style={{
-                        transform: openIndex === item.index ? "translateY(0)" : "translateY(12px)",
-                        opacity: openIndex === item.index ? 1 : 0,
-                        transition: "transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease",
-                        transitionDelay: "0.08s",
-                        margin: 0
-                      }}>
-                        {item.desc}
-                      </p>
-                    </div>
-                  </div>
-
-                  {/* Underline track & sweep animated red bar */}
-                  <div className="ev-logistic-accordion-progress-track">
-                    <div className="ev-logistic-accordion-progress-bar"></div>
                   </div>
+                  <h4 className="ev-feature-card-title">{item.title}</h4>
+                  <p className="ev-feature-card-desc">{item.desc}</p>
                 </div>
               ))}
             </div>

src/components/sections/WomenSection.tsx

@@ -284,7 +284,7 @@ export default function WomenSection() {
             </div>
             <div className="elementor-element elementor-element-0d307dd elementor-widget elementor-widget-text-editor" data-id="0d307dd" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
               <div className="elementor-widget-container">
-                <p>Doormile empowers women in last-mile delivery.</p>
+                <p>Doormile empowers women to lead the future of logistics.</p>
               </div>
             </div>
           </div>