diff --git a/public/images/b5b560fe-aab0-4fe6-9f8c-4b187c2f0e99.png b/public/images/b5b560fe-aab0-4fe6-9f8c-4b187c2f0e99.png new file mode 100644 index 0000000..b74d2e9 Binary files /dev/null and b/public/images/b5b560fe-aab0-4fe6-9f8c-4b187c2f0e99.png differ diff --git a/src/components/sections/EVLogisticSection.tsx b/src/components/sections/EVLogisticSection.tsx index 6ba311b..b163991 100644 --- a/src/components/sections/EVLogisticSection.tsx +++ b/src/components/sections/EVLogisticSection.tsx @@ -271,7 +271,10 @@ export default function EVLogisticSection() { opacity: 0; transform: translateY(20px); will-change: transform, opacity; - transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1); + transition: background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), + border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1), + border-radius 0.45s cubic-bezier(0.25, 1, 0.5, 1), + box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1); } .ev-logistic-accordion-item:last-child { @@ -283,6 +286,41 @@ export default function EVLogisticSection() { background: rgba(192, 18, 39, 0.015); } + /* ---- Active (expanded) item: subtle premium highlight ---- + A soft ~5% red tint, a 16–20px rounded container, a 3px red + accent on the left (drawn as an inset shadow so the row never + shifts) and an extremely soft shadow for quiet depth. The grid + dividers directly above and below the active row are hidden so + 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-logistic-accordion-header { width: 100%; @@ -299,7 +337,8 @@ export default function EVLogisticSection() { font-size: clamp(24px, 2.2vw, 30px); /* Increased to clamp up to 30px! */ font-weight: 700; color: #111111; - transition: color 0.3s ease; + transition: color 0.3s ease, + padding 0.45s cubic-bezier(0.25, 1, 0.5, 1); } .ev-logistic-accordion-header span:first-child { @@ -372,6 +411,7 @@ export default function EVLogisticSection() { 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 */ @@ -401,6 +441,13 @@ export default function EVLogisticSection() { 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 { @@ -453,11 +500,25 @@ export default function EVLogisticSection() { font-size: 19px; padding: 22px 8px; } - + .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; + } } `}} /> diff --git a/src/components/sections/EVSection.tsx b/src/components/sections/EVSection.tsx index f0b9995..9f2029b 100644 --- a/src/components/sections/EVSection.tsx +++ b/src/components/sections/EVSection.tsx @@ -532,6 +532,24 @@ export default function EVSection({ .evnd__grid--cards .wf-scene { height: 100%; } .evnd__grid--cards .wf-scene { aspect-ratio: auto; } .evnd__grid--cards .evnd__dash { min-height: 100%; } + /* Static-image media (Workflow 2): cap the image height with a fixed + max-height so it sits at roughly the dashboard's row height instead + of towering hundreds of px below it. width:auto keeps the aspect + ratio (no stretch, no crop) and the frame hugs the image + (fit-content), so it stays centred with no side bands. The cap is + kept below the dashboard height so the image never inflates the row. + Scoped to the non-scene wrapper; desktop only, mobile untouched. */ + .evnd__grid--cards .evnd__imgwrap:not(.evnd__imgwrap--media) { + width: fit-content; + max-width: 100%; + margin-inline: auto; + } + .evnd__grid--cards .evnd__imgwrap:not(.evnd__imgwrap--media) .evnd__img { + width: auto; + height: auto; + max-height: clamp(520px, 46vw, 670px); + max-width: 100%; + } } .evnd__left { @@ -869,6 +887,22 @@ export default function EVSection({ /* Ultra-wide: give the scene even more room (dashboard stays 600px). */ .evnd__inner--cards { max-width: 1720px; } } + /* ---- Static-image workflow (Workflow 2) layout, 1440px+ ---- + The asset is PORTRAIT, so it can't fill the wide scene column without + cropping. To show the WHOLE image (no missing content) it's hugged to + its own width via the ≥992 rules (fit-content frame + height cap) and + centred next to the 600px dashboard (same width as Workflow 1) with the + pair centred in a tightened inner — full image, no crop, no dead space. + It therefore sits a little narrower than the dashboard; filling the + column edge-to-edge would need a landscape source image. */ + @media (min-width: 1440px) { + .evnd__inner--cards.evnd__inner--img { max-width: 1200px; } + .evnd__grid--cards.evnd__grid--img { + grid-template-columns: auto 600px; + justify-content: center; + gap: clamp(40px, 3vw, 56px); + } + } /* ---- Compact feature cards ---- */ .evnd__dash-feats { @@ -1184,7 +1218,9 @@ export default function EVSection({ )}
{eyebrow}

@@ -1194,7 +1230,9 @@ export default function EVSection({ {/* MAIN GRID */}
{/* Left column */}
diff --git a/src/components/sections/Workflow2.tsx b/src/components/sections/Workflow2.tsx index 586caf3..2523f4b 100644 --- a/src/components/sections/Workflow2.tsx +++ b/src/components/sections/Workflow2.tsx @@ -2,7 +2,6 @@ import React from "react"; import EVSection, { EVStat, EVBadge, EVFeature, EVCardsTheme } from "./EVSection"; -import WorkflowScene from "./WorkflowScene"; /* Red / Crimson — matches the Routing Engine (logistics brain) scene. */ const THEME: EVCardsTheme = { @@ -96,12 +95,8 @@ export default function Workflow2() { eyebrow="/ Innovation /" titleLead="MANY STRATEGIES. " titleAccent="ONE BEST PLAN." - mediaSlot={ - - } + image="/images/b5b560fe-aab0-4fe6-9f8c-4b187c2f0e99.png" + imageAlt="AI route-planning engine selecting the best delivery plan" metrics={METRICS} features={FEATURES} cardsHeading="AI Decision Engine"