Doormile/doormile_react
1
0
Fork 0
Code Issues Pull Requests 1 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

150
src/components/sections/IndexHero.tsx Normal file
View File

@@ -0,0 +1,150 @@
"use client";
import React, { useState, useEffect } from "react";
import Link from "next/link";
export default function IndexHero() {
const [activeSlide, setActiveSlide] = useState(0);
// Auto-slide every 6 seconds
useEffect(() => {
const interval = setInterval(() => {
setActiveSlide((prev) => (prev === 0 ? 1 : 0));
}, 6000);
return () => clearInterval(interval);
}, []);
const handleDotClick = (index: number) => {
setActiveSlide(index);
};
return (
<div className="elementor-element elementor-element-741f56c e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="741f56c" data-element_type="container" data-e-type="container">
<div className="elementor-element elementor-element-6c7cbcb elementor-widget elementor-widget-logico_content_slider" data-id="6c7cbcb" data-element_type="widget" data-e-type="widget" data-widget_type="logico_content_slider.default">
<div className="elementor-widget-container">
<div className="logico-content-slider-widget">
<div className="content-slider-wrapper">
<div className="content-slider-container">
<div className="content-slider owl-carousel owl-theme nav-view-vertical nav-h-position-right nav-v-position-bottom owl-loaded owl-drag">
<div className="owl-stage-outer" style={{ position: "relative", overflow: "hidden", height: "800px" }}>
<div className="owl-stage" style={{ position: "relative", width: "100%", height: "100%" }}>
{/* Slide 1 */}
<div
className={`owl-item ${activeSlide === 0 ? "active" : ""}`}
style={{
position: "relative",
width: "100%",
opacity: activeSlide === 0 ? 1 : 0,
visibility: activeSlide === 0 ? "visible" : "hidden",
transition: "opacity 0.8s ease-in-out, visibility 0.8s ease-in-out",
zIndex: activeSlide === 0 ? 2 : 1
}}
>
<div className="content-item slider-item elementor-repeater-item-3264830 slide-style-standard">
<div className="slide-content">
<div className="slide-content-inner">
<h1 className="content-slider-item-heading logico-content-wrapper-1">
<span className="heading-content">ONE CONNECTED SYSTEM.<br />ONE PROMISE KEPT.</span>
</h1>
<div className="content-slider-item-text logico-content-wrapper-2">
<div className="text-content">
<p>Stop managing three separate logistics services. Doormile unifies first, mid and last mile into a single intelligent delivery system powered by MileTruth™ AI.</p>
</div>
</div>
</div>
</div>
</div>
</div>
{/* Slide 2 */}
<div
className={`owl-item ${activeSlide === 1 ? "active" : ""}`}
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
opacity: activeSlide === 1 ? 1 : 0,
visibility: activeSlide === 1 ? "visible" : "hidden",
transition: "opacity 0.8s ease-in-out, visibility 0.8s ease-in-out",
zIndex: activeSlide === 1 ? 2 : 1
}}
>
<div className="content-item slider-item elementor-repeater-item-6867061 slide-style-standard">
<div className="slide-content">
<div className="slide-content-inner">
<h1 className="content-slider-item-heading logico-content-wrapper-1">
<span className="heading-content">AI-POWERED<br />CONNECTED LOGISTICS</span>
</h1>
<div className="content-slider-item-text logico-content-wrapper-2">
<div className="text-content">
<p>Behind every successful business is a strong supply chain. Logistics turns plans into reality.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/* Navigation controls */}
<div className="owl-nav">
<button
type="button"
className="owl-next"
onClick={() => setActiveSlide((prev) => (prev === 0 ? 1 : 0))}
aria-label="Next"
style={{ cursor: "pointer", border: "none", outline: "none" }}
/>
<button
type="button"
className="owl-prev"
onClick={() => setActiveSlide((prev) => (prev === 0 ? 1 : 0))}
aria-label="Previous"
style={{ cursor: "pointer", border: "none", outline: "none" }}
/>
</div>
{/* Slider Progress Controls */}
<div className="slider-footer slider-footer-position-after slider-footer-width-full slider-footer-view-inside">
<div className="slider-footer-content">
<div className="slider-pagination" style={{ display: "flex", justifyContent: "flex-end", alignItems: "center" }}>
<div className="slider-progress-wrapper" style={{ marginRight: "35px", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
<div style={{ fontSize: "16px", fontWeight: 600, color: "#FFFFFF", marginBottom: "4px" }}>
<span className="slider-progress-current">{activeSlide === 0 ? "01" : "02"}</span>
{" / "}
<span className="slider-progress-all" style={{ opacity: 0.6 }}>02</span>
</div>
{/* Progress Line */}
<div style={{ width: "80px", height: "2px", background: "rgba(255, 255, 255, 0.2)", position: "relative", borderRadius: "1px", overflow: "hidden" }}>
<div style={{
position: "absolute",
left: activeSlide === 0 ? "0" : "50%",
width: "50%",
height: "100%",
background: "#c01227",
transition: "left 0.3s ease"
}} />
</div>
</div>
{/* Dots are hidden to match production */}
<div className="owl-dots owl-dots-6c7cbcb" style={{ display: "none" }}>
<button type="button" className={`owl-dot ${activeSlide === 0 ? "active" : ""}`} onClick={() => handleDotClick(0)}><span></span></button>
<button type="button" className={`owl-dot ${activeSlide === 1 ? "active" : ""}`} onClick={() => handleDotClick(1)}><span></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}