Doormile/doormile_react
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix mobile view issue

Browse Source
This commit is contained in:
Aravind R
2026-06-15 18:20:48 +05:30
parent 205924e057
commit 0560b86b87
25 changed files with 956 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/strategy/StrategySection.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import React, { useEffect, useRef, useState, useSyncExternalStore } from "react";
import React, { useEffect, useRef, useState } from "react";
import dynamic from "next/dynamic";
import { motion, useMotionValue, useTransform, type MotionValue } from "framer-motion";
import gsap from "gsap";
@@ -83,6 +83,8 @@ export default function StrategySection({ connected = false }: { connected?: boo
const [pinState, setPinState] = useState<"before" | "pinned" | "after">("before");
const [active, setActive] = useState(0);
const [mountScene, setMountScene] = useState(false);
const [sceneReady, setSceneReady] = useState(false);
const [showLoader, setShowLoader] = useState(true);
const [sceneActive, setSceneActive] = useState(false);
const [isMobile, setIsMobile] = useState(false);
const [reduced, setReduced] = useState(false);
@@ -161,8 +163,30 @@ export default function StrategySection({ connected = false }: { connected?: boo
<div className="dm-st-sticky">
<div className="dm-st-card">
{mountScene && (
<div className="dm-st-canvas">
<StrategyCanvas progress={progressRef} reduced={reduced} isMobile={isMobile} active={sceneActive && pinState === "pinned"} stage={active} />
<div className={`dm-st-canvas${sceneReady ? " is-ready" : ""}`} aria-hidden={!sceneReady}>
<StrategyCanvas
progress={progressRef}
reduced={reduced}
isMobile={isMobile}
active={sceneActive && pinState === "pinned"}
stage={active}
ready={sceneReady}
onReady={() => setSceneReady(true)}
/>
</div>
)}
{showLoader && (
<div
className={`dm-st-loader${sceneReady ? " is-hiding" : ""}`}
role="status"
aria-live="polite"
aria-label="Loading MileTruth Strategy Engine"
onTransitionEnd={(e) => {
if (e.propertyName === "opacity" && sceneReady) setShowLoader(false);
}}
>
<span className="dm-st-loader__ring" />
</div>
)}
@@ -170,7 +194,7 @@ export default function StrategySection({ connected = false }: { connected?: boo
can never be seen during the approach ("before"), where the sticky sits
at the top of the tall section near the previous workflow's seam. */}
{pinState !== "before" && (
<div className="dm-st-ui">
<div className={`dm-st-ui${sceneReady ? " is-ready" : ""}`} aria-hidden={!sceneReady}>
{/* Persistent header */}
<motion.div className="dm-st-top" style={{ opacity: headerOpacity }}>
<div className="dm-st-eyebrow"><span className="dm-st-dot" /> MileTruth Strategy Engine</div>
@@ -285,11 +309,28 @@ const styles = `
}
}
.dm-st-canvas { position: absolute; inset: 0; z-index: 1; }
.dm-st-canvas { position: absolute; inset: 0; z-index: 1; opacity: 0; visibility: hidden;
transition: opacity 0.42s cubic-bezier(0.22,1,0.36,1), visibility 0s linear 0.42s; }
.dm-st-canvas.is-ready { opacity: 1; visibility: visible; transition-delay: 0s; }
.dm-st-canvas canvas { display: block; }
.dm-st-ui { position: absolute; inset: 0; z-index: 4; pointer-events: none;
font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif; color: #0f172a; }
font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif; color: #0f172a;
opacity: 0; visibility: hidden;
transition: opacity 0.42s cubic-bezier(0.22,1,0.36,1), visibility 0s linear 0.42s; }
.dm-st-ui.is-ready { opacity: 1; visibility: visible; transition-delay: 0s; }
.dm-st-loader { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center;
background: transparent; opacity: 1; pointer-events: none;
animation: dmStLoaderFadeIn 0.2s ease both;
transition: opacity 0.3s ease; }
.dm-st-loader.is-hiding { opacity: 0; pointer-events: none; }
.dm-st-loader__ring { width: 18px; height: 18px; border-radius: 50%;
border: 2px solid rgba(255,255,255,0.48); border-top-color: #ffffff;
box-shadow: 0 8px 22px rgba(15,23,42,0.14);
animation: dm-hiw-spin 0.8s linear infinite; }
@keyframes dmStLoaderFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dm-hiw-spin { to { transform: rotate(360deg); } }
/* ---- Persistent header: title + 5-stage rail ---- */
.dm-st-top { position: absolute; top: clamp(96px, 13vh, 128px); left: 0; right: 0; z-index: 5;