212 lines
9.9 KiB
TypeScript
212 lines
9.9 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
|
|
export default function SolutionsHero() {
|
|
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 (
|
|
<>
|
|
<style dangerouslySetInnerHTML={{ __html: `
|
|
.howits-hero-custom-bg.elementor-repeater-item-3264830,
|
|
.howits-hero-custom-bg.elementor-repeater-item-6867061 {
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('/images/home1-slide-1.png') !important;
|
|
background-position: center !important;
|
|
background-repeat: no-repeat !important;
|
|
background-size: cover !important;
|
|
}
|
|
|
|
.howits-hero-custom-bg.elementor-repeater-item-6867061 {
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)), url('/images/home1-slide-2.png') !important;
|
|
background-position: center !important;
|
|
background-repeat: no-repeat !important;
|
|
background-size: cover !important;
|
|
}
|
|
|
|
@media (min-width: 1025px) {
|
|
.elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
|
|
height: 800px !important;
|
|
min-height: 800px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.elementor-element.elementor-element-741f56c {
|
|
width: calc(100% - 40px) !important;
|
|
max-width: none !important;
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
overflow: hidden !important;
|
|
border-radius: 25px !important;
|
|
}
|
|
|
|
.elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
|
|
width: 100% !important;
|
|
min-height: 620px !important;
|
|
height: 620px !important;
|
|
border-radius: 25px !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.elementor-element.elementor-element-6c7cbcb .slide-content {
|
|
width: 100% !important;
|
|
min-height: 620px !important;
|
|
padding-left: 48px !important;
|
|
padding-right: 48px !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.elementor-element.elementor-element-741f56c {
|
|
width: calc(100% - 24px) !important;
|
|
border-radius: 22px !important;
|
|
}
|
|
|
|
.elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
|
|
min-height: 560px !important;
|
|
height: 560px !important;
|
|
border-radius: 22px !important;
|
|
}
|
|
|
|
.elementor-element.elementor-element-6c7cbcb .slide-content {
|
|
min-height: 560px !important;
|
|
padding-left: 22px !important;
|
|
padding-right: 22px !important;
|
|
}
|
|
|
|
.elementor-element.elementor-element-6c7cbcb .content-slider-item-heading {
|
|
max-width: 100% !important;
|
|
font-size: clamp(38px, 11vw, 48px) !important;
|
|
line-height: 1.05 !important;
|
|
overflow-wrap: break-word !important;
|
|
}
|
|
}
|
|
`}} />
|
|
|
|
<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 howits-hero-custom-bg">
|
|
<div className="slide-content">
|
|
<div className="slide-content-inner">
|
|
<h1 className="content-slider-item-heading logico-content-wrapper-1">
|
|
<span className="heading-content">Solutions for Every Industry</span>
|
|
</h1>
|
|
<div className="content-slider-item-text logico-content-wrapper-2">
|
|
<div className="text-content">
|
|
<p>Discover how Doormile's connected logistics platform serves diverse industries with tailored solutions.</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 howits-hero-custom-bg">
|
|
<div className="slide-content">
|
|
<div className="slide-content-inner">
|
|
<h1 className="content-slider-item-heading logico-content-wrapper-1">
|
|
<span className="heading-content">One Platform. All Verticals.</span>
|
|
</h1>
|
|
<div className="content-slider-item-text logico-content-wrapper-2">
|
|
<div className="text-content">
|
|
<p>Doormile adapts to the unique challenges of your vertical—not the other way around.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* Progress indicators */}
|
|
<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", gap: "10px" }}>
|
|
<div className="slider-progress-wrapper" style={{ marginRight: "15px" }}>
|
|
<span className="slider-progress-current">{activeSlide === 0 ? "01" : "02"}</span>
|
|
/
|
|
<span className="slider-progress-all">02</span>
|
|
</div>
|
|
<div className="owl-dots owl-dots-6c7cbcb" style={{ display: "flex", gap: "8px" }}>
|
|
<button
|
|
type="button"
|
|
role="button"
|
|
className={`owl-dot ${activeSlide === 0 ? "active" : ""}`}
|
|
onClick={() => handleDotClick(0)}
|
|
>
|
|
<span></span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
role="button"
|
|
className={`owl-dot ${activeSlide === 1 ? "active" : ""}`}
|
|
onClick={() => handleDotClick(1)}
|
|
>
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|