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

first commit

Browse Source
This commit is contained in:
Aravind R
2026-05-28 16:17:56 +05:30
parent 319e6f32d3
commit 43dd4cef12
256 changed files with 182186 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
src/components/sections/MileTruthHero.tsx Normal file
View File

@@ -0,0 +1,203 @@
"use client";
import React, { useState, useEffect } from "react";
interface CounterProps {
from: number;
to: number;
duration?: number;
decimals?: number;
suffix?: string;
}
function Counter({ from, to, duration = 2000, decimals = 0, suffix = "" }: CounterProps) {
const [value, setValue] = useState(from);
useEffect(() => {
let startTimestamp: number | null = null;
const step = (timestamp: number) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
const currentValue = progress * (to - from) + from;
setValue(currentValue);
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}, [from, to, duration]);
return (
<>
{value.toFixed(decimals)}
{suffix}
</>
);
}
export default function MileTruthHero() {
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
return (
<>
<style dangerouslySetInnerHTML={{ __html: `
.miletruth-hero-container {
position: relative;
min-height: 680px;
display: flex;
align-items: center;
overflow: hidden;
}
.miletruth-video-bg {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
z-index: 0;
}
.miletruth-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.55);
z-index: 1;
}
.miletruth-content {
position: relative;
z-index: 2;
width: 100%;
}
@media (max-width: 767px) {
.miletruth-hero-container {
min-height: 520px;
}
.miletruth-hero-container .content-slider-item-heading {
font-size: clamp(32px, 9vw, 42px) !important;
line-height: 1.1 !important;
}
}
`}} />
<div className="elementor-63 miletruth-hero">
<div className="elementor-element elementor-element-86f3204 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="86f3204" data-element_type="container" data-e-type="container">
<div className="elementor-element elementor-element-0b7a484 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child miletruth-hero-container" data-id="0b7a484" data-element_type="container" data-e-type="container">
{/* Background Video — falls back to static poster (no local mp4 yet) */}
<video
autoPlay
loop
muted
playsInline
poster="/images/home3-slide-1.jpg"
className="miletruth-video-bg"
/>
{/* Dark tint overlay to maintain text legibility */}
<div className="miletruth-overlay"></div>
<div className="e-con-inner miletruth-content">
<div className="logico-content-slider-widget">
<div className="content-slider-wrapper">
<div className="content-slider-container">
<div className="content-slider owl-carousel owl-theme">
<div className="content-item slider-item elementor-repeater-item-6867061 slide-style-standard">
<div className="slide-content" style={{ paddingLeft: 0, paddingRight: 0 }}>
<div className="slide-content-inner">
<h1 className="content-slider-item-heading logico-content-wrapper-1">
<span className="heading-content">The Only AI Built<br />Exclusively for Logistics</span>
</h1>
<div className="content-slider-item-text logico-content-wrapper-2">
<div className="text-content">
<p>Optimizes every stage of the delivery journey for maximum efficiency.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/* Metric Stats Bar */}
<div className="elementor-element elementor-element-8e5c81e e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="8e5c81e" data-element_type="container" data-e-type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
<div className="e-con-inner">
<div className="elementor-element elementor-element-628123a e-con-full e-grid cut-corner-no sticky-container-off e-con e-child" data-id="628123a" data-element_type="container" data-e-type="container">
{/* SLA Compliance */}
<div className="elementor-element elementor-element-1da88b5 elementor-widget elementor-widget-counter" data-id="1da88b5" data-element_type="widget" data-e-type="widget" data-widget_type="counter.default">
<div className="elementor-widget-container">
<div className="elementor-counter">
<div className="elementor-counter-title">SLA Compliance</div>
<div className="elementor-counter-number-wrapper">
<span className="elementor-counter-number">
{mounted ? <Counter from={1} to={99.9} decimals={1} suffix=" %" /> : "1 %"}
</span>
</div>
</div>
</div>
</div>
{/* Distance Saved */}
<div className="elementor-element elementor-element-1da88b5 elementor-widget elementor-widget-counter" data-id="1da88b5" data-element_type="widget" data-e-type="widget" data-widget_type="counter.default">
<div className="elementor-widget-container">
<div className="elementor-counter">
<div className="elementor-counter-title">Distance Saved</div>
<div className="elementor-counter-number-wrapper">
<span className="elementor-counter-number">
{mounted ? <Counter from={1} to={42} decimals={0} suffix=" %" /> : "1 %"}
</span>
</div>
</div>
</div>
</div>
{/* Fewer Vehicles */}
<div className="elementor-element elementor-element-1da88b5 elementor-widget elementor-widget-counter" data-id="1da88b5" data-element_type="widget" data-e-type="widget" data-widget_type="counter.default">
<div className="elementor-widget-container">
<div className="elementor-counter">
<div className="elementor-counter-title">Fewer Vehicles</div>
<div className="elementor-counter-number-wrapper">
<span className="elementor-counter-number">
{mounted ? <Counter from={1} to={37} decimals={0} suffix=" %" /> : "1 %"}
</span>
</div>
</div>
</div>
</div>
{/* Dispatch Latency */}
<div className="elementor-element elementor-element-a1cf3d4 elementor-widget elementor-widget-counter" data-id="a1cf3d4" data-element_type="widget" data-e-type="widget" data-widget_type="counter.default">
<div className="elementor-widget-container">
<div className="elementor-counter">
<div className="elementor-counter-title">Dispatch Latency</div>
<div className="elementor-counter-number-wrapper">
<span className="elementor-counter-number">
{mounted ? <Counter from={1} to={45} decimals={0} suffix=" ms" /> : "1 ms"}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
}