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

update screen fix

Browse Source
This commit is contained in:
Aravind R
2026-06-05 17:40:56 +05:30
parent 2f23f16634
commit 91841ba3f4
12 changed files with 438 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/sections/WhyChooseDoormile.tsx
View File

@@ -195,28 +195,37 @@ export default function WhyChooseDoormile() {
flex-direction: column;
gap: 16px;
}
.wcd-card-points li {
position: relative;
padding-left: 30px;
.wcd-section .wcd-card-points li {
/* Flex row so the check icon and its label always sit on the same line.
Scoped with .wcd-section to outrank the global ".logico-front-end ul li"
theme rule, which adds 1.7em padding + a fontello bullet icon. */
display: flex;
align-items: flex-start;
gap: 12px;
padding-left: 0;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
color: #FFFFFF;
}
.wcd-card-points li::before {
content: "";
position: absolute;
left: 0;
top: 0.18em;
width: 14px;
height: 9px;
border-left: 2px solid #c01227;
border-bottom: 2px solid #c01227;
transform: rotate(-45deg) scale(1);
/* Suppress the theme's default fontello list bullet
(.logico-front-end ul li:before) so only our circle-check SVG renders. */
.wcd-section .wcd-card-points li::before {
content: none;
display: none;
}
/* Clean circle-check feature icon (inline SVG, see markup below) — replaces
the old border-based chevron. Brand red with thin, rounded strokes. */
.wcd-card-points .wcd-check {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin-top: 0.12em;
color: #c01227;
transition: transform 0.3s ease;
}
.wcd-card:hover .wcd-card-points li::before {
transform: rotate(-45deg) scale(1.1);
.wcd-card:hover .wcd-card-points .wcd-check {
transform: scale(1.1);
}
@media (max-width: 1020px) {
@@ -266,7 +275,22 @@ export default function WhyChooseDoormile() {
<p className="wcd-card-desc">{stage.desc}</p>
<ul className="wcd-card-points">
{stage.points.map((point) => (
<li key={point}>{point}</li>
<li key={point}>
<svg
className="wcd-check"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
>
<circle cx="12" cy="12" r="10" />
<path d="m9 12 2 2 4-4" />
</svg>
<span>{point}</span>
</li>
))}
</ul>
</div>

35
src/components/sections/Workflow1.tsx
View File

@@ -1,12 +1,14 @@
"use client";
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";
import OptimizationSection from "../optimization/OptimizationSection";
export default function Workflow1() {
const [activeSlide, setActiveSlide] = useState(0);
const [paused, setPaused] = useState(false);
const [inView, setInView] = useState(false);
const cardRef = useRef<HTMLDivElement>(null);
const slides = [
{
@@ -23,21 +25,36 @@ export default function Workflow1() {
}
];
// Always begin the storytelling sequence from slide 1 (01/03) on mount — never
// preserve a previous slide index across remounts / route changes back to MileTruth.
// Always begin on slide 1 (01/03) on mount. Scrolling away and back does NOT reset
// (the component stays mounted) — only a fresh page load / route change back to
// MileTruth re-mounts and restarts at slide 1.
useEffect(() => {
setActiveSlide(0);
}, []);
// Auto-advance the carousel every 4s, infinite loop. Keyed on activeSlide so any
// manual selection resets the timer; pauses while the user hovers the card.
// Autoplay is gated on visibility: it starts only once the slider card scrolls into
// view (not on page load) and stops when it leaves — without touching activeSlide,
// so returning to the section resumes from wherever it was, never snapping to slide 1.
useEffect(() => {
if (paused) return;
const el = cardRef.current;
if (!el) return;
const io = new IntersectionObserver(
([entry]) => setInView(entry.isIntersecting),
{ threshold: 0.35 }
);
io.observe(el);
return () => io.disconnect();
}, []);
// Auto-advance every 10s, looping — but only while the card is in view and the user
// isn't hovering it. Keyed on activeSlide so a manual jump restarts the 10s dwell.
useEffect(() => {
if (!inView || paused) return;
const id = setTimeout(() => {
setActiveSlide((prev) => (prev + 1) % slides.length);
}, 4000);
}, 10000);
return () => clearTimeout(id);
}, [activeSlide, paused, slides.length]);
}, [activeSlide, inView, paused, slides.length]);
return (
<section className="dm-wf1" aria-label="Workflow 1 — Impact of Optimisation & Performance">
@@ -47,7 +64,7 @@ export default function Workflow1() {
{/* ── Bottom sub-section: Performance content, flush + colour-matched to the
optimisation section above so the whole workflow reads as one container ── */}
<div className="dm-wf1-card" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
<div className="dm-wf1-card" ref={cardRef} onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
{/* Left Column: Overlapping Chevron Graphic */}
<div className="dm-workflow-left">
<svg viewBox="0 0 320 280" fill="none" xmlns="http://www.w3.org/2000/svg" className="dm-workflow-svg">

35
src/components/sections/Workflow2.tsx
View File

@@ -1,12 +1,14 @@
"use client";
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";
import LogisticsBrainSection from "../logisticsbrain/LogisticsBrainSection";
export default function Workflow2() {
const [activeSlide, setActiveSlide] = useState(0);
const [paused, setPaused] = useState(false);
const [inView, setInView] = useState(false);
const cardRef = useRef<HTMLDivElement>(null);
const slides = [
{
@@ -23,21 +25,36 @@ export default function Workflow2() {
}
];
// Always begin the storytelling sequence from slide 1 (01/03) on mount — never
// preserve a previous slide index across remounts / route changes back to MileTruth.
// Always begin on slide 1 (01/03) on mount. Scrolling away and back does NOT reset
// (the component stays mounted) — only a fresh page load / route change back to
// MileTruth re-mounts and restarts at slide 1.
useEffect(() => {
setActiveSlide(0);
}, []);
// Auto-advance the carousel every 4s, infinite loop. Keyed on activeSlide so any
// manual selection resets the timer; pauses while the user hovers the card.
// Autoplay is gated on visibility: it starts only once the slider card scrolls into
// view (not on page load) and stops when it leaves — without touching activeSlide,
// so returning to the section resumes from wherever it was, never snapping to slide 1.
useEffect(() => {
if (paused) return;
const el = cardRef.current;
if (!el) return;
const io = new IntersectionObserver(
([entry]) => setInView(entry.isIntersecting),
{ threshold: 0.35 }
);
io.observe(el);
return () => io.disconnect();
}, []);
// Auto-advance every 10s, looping — but only while the card is in view and the user
// isn't hovering it. Keyed on activeSlide so a manual jump restarts the 10s dwell.
useEffect(() => {
if (!inView || paused) return;
const id = setTimeout(() => {
setActiveSlide((prev) => (prev + 1) % slides.length);
}, 4000);
}, 10000);
return () => clearTimeout(id);
}, [activeSlide, paused, slides.length]);
}, [activeSlide, inView, paused, slides.length]);
return (
<section className="dm-wf2" aria-label="Workflow 2 — How Our Logistics Brain Works & Innovation">
@@ -47,7 +64,7 @@ export default function Workflow2() {
{/* ── Bottom sub-section: Innovation content, flush + colour-matched to the
logistics-brain card above so the whole workflow reads as one container ── */}
<div className="dm-wf2-card" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
<div className="dm-wf2-card" ref={cardRef} onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
{/* Left Column: Overlapping Chevron Graphic */}
<div className="dm-workflow-left">
<svg viewBox="0 0 320 280" fill="none" xmlns="http://www.w3.org/2000/svg" className="dm-workflow-svg">

35
src/components/sections/Workflow3.tsx
View File

@@ -1,12 +1,14 @@
"use client";
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";
import StrategySection from "../strategy/StrategySection";
export default function Workflow3() {
const [activeSlide, setActiveSlide] = useState(0);
const [paused, setPaused] = useState(false);
const [inView, setInView] = useState(false);
const cardRef = useRef<HTMLDivElement>(null);
const slides = [
{
@@ -23,21 +25,36 @@ export default function Workflow3() {
}
];
// Always begin the storytelling sequence from slide 1 (01/03) on mount — never
// preserve a previous slide index across remounts / route changes back to MileTruth.
// Always begin on slide 1 (01/03) on mount. Scrolling away and back does NOT reset
// (the component stays mounted) — only a fresh page load / route change back to
// MileTruth re-mounts and restarts at slide 1.
useEffect(() => {
setActiveSlide(0);
}, []);
// Auto-advance the carousel every 4s, infinite loop. Keyed on activeSlide so any
// manual selection resets the timer; pauses while the user hovers the card.
// Autoplay is gated on visibility: it starts only once the slider card scrolls into
// view (not on page load) and stops when it leaves — without touching activeSlide,
// so returning to the section resumes from wherever it was, never snapping to slide 1.
useEffect(() => {
if (paused) return;
const el = cardRef.current;
if (!el) return;
const io = new IntersectionObserver(
([entry]) => setInView(entry.isIntersecting),
{ threshold: 0.35 }
);
io.observe(el);
return () => io.disconnect();
}, []);
// Auto-advance every 10s, looping — but only while the card is in view and the user
// isn't hovering it. Keyed on activeSlide so a manual jump restarts the 10s dwell.
useEffect(() => {
if (!inView || paused) return;
const id = setTimeout(() => {
setActiveSlide((prev) => (prev + 1) % slides.length);
}, 4000);
}, 10000);
return () => clearTimeout(id);
}, [activeSlide, paused, slides.length]);
}, [activeSlide, inView, paused, slides.length]);
return (
<section className="dm-wf3" aria-label="Workflow 3 — Happier Riders. Higher Fulfillment. & Strategy">
@@ -49,7 +66,7 @@ export default function Workflow3() {
{/* ── Bottom sub-section: Strategy content, flush + pulled up to butt against
the 3D card's flat bottom so the whole workflow reads as one container —
the same connected structure used in Workflow 1 & 2 ── */}
<div className="dm-wf3-card" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
<div className="dm-wf3-card" ref={cardRef} onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
{/* Left Column: Overlapping Chevron Graphic */}
<div className="dm-workflow-left">
<svg viewBox="0 0 320 280" fill="none" xmlns="http://www.w3.org/2000/svg" className="dm-workflow-svg">