From 3a16bf926764889823ee80179eac6240cd88be90 Mon Sep 17 00:00:00 2001 From: Aravind R Date: Thu, 4 Jun 2026 20:06:39 +0530 Subject: [PATCH] fix the mobile responsive --- src/components/layout/Header.tsx | 22 ++++++ .../logisticsbrain/LogisticsBrainSection.tsx | 36 +++------ .../sections/ConnectedLogistics.tsx | 72 ++++++++++++++++++ src/components/sections/IndexHero.tsx | 73 ++++++++++++++++++- src/components/sections/Miles3.tsx | 8 +- src/components/strategy/StrategySection.tsx | 33 +++------ 6 files changed, 192 insertions(+), 52 deletions(-) diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index 0a3cba2..012c97d 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -527,6 +527,28 @@ export default function Header() { opacity: 1 !important; } + /* Responsive logo adjustment on mobile/tablet */ + @media (max-width: 1024px) { + #masthead .elementor-element.elementor-element-846e53d .hfe-site-logo .hfe-site-logo-container img { + width: 150px !important; + height: auto !important; + margin-left: 20px !important; + } + #masthead .header-menu-container { + display: none !important; + } + #masthead .menu-trigger { + display: block !important; + } + } + + @media (max-width: 480px) { + #masthead .elementor-element.elementor-element-846e53d .hfe-site-logo .hfe-site-logo-container img { + width: 130px !important; + margin-left: 10px !important; + } + } + /* The theme reveals the mobile slide-in menu via Elementor's body[data-elementor-device-mode="mobile"] rules, which are set by Elementor's frontend JS — that JS isn't shipped in this Next port, diff --git a/src/components/logisticsbrain/LogisticsBrainSection.tsx b/src/components/logisticsbrain/LogisticsBrainSection.tsx index 806538e..fe2f129 100644 --- a/src/components/logisticsbrain/LogisticsBrainSection.tsx +++ b/src/components/logisticsbrain/LogisticsBrainSection.tsx @@ -24,23 +24,7 @@ function Counter({ mv }: { mv: MotionValue }) { return {Math.round(mv.get())}; } -/** True only while a card's own opacity window is open (with a tiny buffer). - * Lets us keep future/past story cards out of the DOM — and off the compositor - * (each has `will-change`) — until their beat is actually on screen, so no - * workflow state is rendered before activation. Visually identical, since a - * card outside its window is opacity:0 anyway. */ -function useInWindow(mv: MotionValue, threshold = 0.01): boolean { - // `mv` is an external mutable store (a MotionValue). useTransform `.set()`s its - // output synchronously while the PARENT renders, so a plain `.on("change") -> setState` - // updates this component during the parent's render (React warns). useSyncExternalStore - // is built for exactly this: it reads a snapshot and reconciles store-changes-during- - // render safely. The snapshot is a primitive boolean, so it never re-renders needlessly. - return useSyncExternalStore( - (onStoreChange) => mv.on("change", onStoreChange), - () => mv.get() > threshold, - () => mv.get() > threshold, - ); -} + /** Active step index from scroll progress (−1 before the engine starts). */ function stepFromProgress(p: number): number { @@ -71,6 +55,8 @@ function StepRail({ active }: { active: number }) { /** One cross-fading workflow card pinned to the lower-left. */ function StoryCard({ + step, + index, opacity, y, num, @@ -78,6 +64,8 @@ function StoryCard({ title, children, }: { + step: number; + index: number; opacity: MotionValue; y: MotionValue; num: string; @@ -85,8 +73,8 @@ function StoryCard({ title: string; children?: React.ReactNode; }) { - // Don't mount this beat's card until its cross-fade window opens. - if (!useInWindow(opacity)) return null; + // Don't mount this beat's card until its step is active. + if (step !== index) return null; return (
@@ -230,7 +218,7 @@ export default function LogisticsBrainSection({ connected = false }: { connected {/* STEP 01 — Generate Routes */} - +
{STRATEGIES.map((s) => ( {s} @@ -240,7 +228,7 @@ export default function LogisticsBrainSection({ connected = false }: { connected {/* STEP 02 — Check Constraints (the EV paradox) */} - +
    {CONSTRAINT_LIST.map((c) => (
  • @@ -254,7 +242,7 @@ export default function LogisticsBrainSection({ connected = false }: { connected {/* STEP 03 — Score & Compare (the leaderboard) */} - +
      {STRATEGY_SCORES.map((s) => (
    • @@ -267,7 +255,7 @@ export default function LogisticsBrainSection({ connected = false }: { connected {/* STEP 04 — Guarantee On-Time */} - +
      ⏱️ On-time only ✕ Late plan → dropped @@ -276,7 +264,7 @@ export default function LogisticsBrainSection({ connected = false }: { connected {/* STEP 05 — Pick & Dispatch */} - +
      ✓ Multi-Trip selected — lowest cost, zero delays
      EV Bikes diff --git a/src/components/sections/ConnectedLogistics.tsx b/src/components/sections/ConnectedLogistics.tsx index 7011bfc..bd6022f 100644 --- a/src/components/sections/ConnectedLogistics.tsx +++ b/src/components/sections/ConnectedLogistics.tsx @@ -8,6 +8,78 @@ import { ScrollReveal, Magnetic } from "@/animations/Reveal"; export default function ConnectedLogistics() { return (
      +