585 lines
22 KiB
TypeScript
585 lines
22 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import Link from "next/link";
|
|
import gsap from "gsap";
|
|
import { ShimmerText } from "@/animations/Reveal";
|
|
|
|
export default function WingsHero() {
|
|
const [activeSlide, setActiveSlide] = useState(0);
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setActiveSlide((prev) => (prev === 0 ? 1 : 0));
|
|
}, 7000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!containerRef.current) return;
|
|
|
|
const activeItem = containerRef.current.querySelector(".owl-item.active");
|
|
if (!activeItem) return;
|
|
|
|
const heading = activeItem.querySelector(".heading-content");
|
|
const text = activeItem.querySelector(".text-content");
|
|
const actions = activeItem.querySelector(".wings-hero-actions");
|
|
|
|
const animatedEls = [heading, text, actions].filter(Boolean);
|
|
if (!animatedEls.length) return;
|
|
|
|
gsap.killTweensOf(animatedEls);
|
|
|
|
if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
|
|
gsap.set(animatedEls, { y: 0, opacity: 1, scale: 1 });
|
|
return;
|
|
}
|
|
|
|
if (heading) {
|
|
gsap.fromTo(
|
|
heading,
|
|
{ y: 55, opacity: 0, scale: 0.95 },
|
|
{ y: 0, opacity: 1, scale: 1, duration: 1.1, ease: "power4.out" }
|
|
);
|
|
}
|
|
|
|
if (text) {
|
|
gsap.fromTo(
|
|
text,
|
|
{ y: 30, opacity: 0 },
|
|
{ y: 0, opacity: 1, duration: 0.95, ease: "power3.out", delay: 0.25 }
|
|
);
|
|
}
|
|
|
|
if (actions) {
|
|
gsap.fromTo(
|
|
actions,
|
|
{ y: 24, opacity: 0 },
|
|
{ y: 0, opacity: 1, duration: 0.85, ease: "power3.out", delay: 0.38 }
|
|
);
|
|
}
|
|
}, [activeSlide]);
|
|
|
|
const handleDotClick = (index: number) => {
|
|
setActiveSlide(index);
|
|
};
|
|
|
|
const toggleSlide = () => {
|
|
setActiveSlide((prev) => (prev === 0 ? 1 : 0));
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<link rel="preload" as="image" href="/images/wings-heroslider4.png" />
|
|
<link rel="preload" as="image" href="/images/wings-heroslide2.png" />
|
|
<style
|
|
dangerouslySetInnerHTML={{
|
|
__html: `
|
|
.wings-hero-bg.elementor-repeater-item-3264830,
|
|
.wings-hero-bg.elementor-repeater-item-6867061 {
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.06)), url('/images/wings-heroslider4.png') !important;
|
|
background-position: center !important;
|
|
background-repeat: no-repeat !important;
|
|
background-size: cover !important;
|
|
}
|
|
|
|
.wings-hero-bg.elementor-repeater-item-6867061 {
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.06)), url('/images/wings-heroslide2.png') !important;
|
|
}
|
|
|
|
#doormile-wings,
|
|
#doormile-wings .content,
|
|
#doormile-wings .content-inner,
|
|
#doormile-wings .elementor {
|
|
max-width: 100vw !important;
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
.wings-hero-page,
|
|
.wings-hero-page .elementor-widget-container,
|
|
.wings-hero-page .logico-content-slider-widget,
|
|
.wings-hero-page .content-slider-wrapper,
|
|
.wings-hero-page .content-slider-container,
|
|
.wings-hero-page .content-slider,
|
|
.wings-hero-page .owl-stage-outer,
|
|
.wings-hero-page .owl-stage,
|
|
.wings-hero-page .owl-item,
|
|
.wings-hero-page .slider-item,
|
|
.wings-hero-page .slide-content,
|
|
.wings-hero-page .slide-content-inner {
|
|
max-width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
.wings-hero-page .slide-content {
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
text-align: center !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
padding: 0 !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
.wings-hero-page .slide-content-inner {
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
justify-content: center !important;
|
|
align-items: center !important;
|
|
text-align: center !important;
|
|
width: 100% !important;
|
|
max-width: 1000px !important;
|
|
margin: 0 auto !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
.wings-hero-page .content-slider-item-heading,
|
|
.wings-hero-page .content-slider-item-heading .heading-content {
|
|
text-align: center !important;
|
|
display: block !important;
|
|
width: 100% !important;
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
padding-left: 15px !important;
|
|
padding-right: 15px !important;
|
|
white-space: normal !important;
|
|
overflow-wrap: break-word !important;
|
|
}
|
|
|
|
.wings-hero-page .content-slider-item-heading {
|
|
font-size: clamp(30px, 5.5vw, 80px) !important;
|
|
line-height: 1.05 !important;
|
|
}
|
|
|
|
.wings-hero-page .content-slider-item-text {
|
|
display: flex !important;
|
|
justify-content: center !important;
|
|
width: 100% !important;
|
|
margin-top: 23px !important;
|
|
}
|
|
|
|
.wings-hero-page .text-content {
|
|
text-align: center !important;
|
|
max-width: 680px !important;
|
|
width: 100% !important;
|
|
margin: 0 auto !important;
|
|
padding-left: 15px !important;
|
|
padding-right: 15px !important;
|
|
box-sizing: border-box !important;
|
|
white-space: normal !important;
|
|
overflow-wrap: break-word !important;
|
|
}
|
|
|
|
.wings-hero-page .content-slider-item-text p {
|
|
font-size: clamp(16px, 1.35vw, 23px) !important;
|
|
line-height: 1.65 !important;
|
|
white-space: normal !important;
|
|
overflow-wrap: break-word !important;
|
|
}
|
|
|
|
.wings-hero-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
margin-top: 30px;
|
|
position: relative;
|
|
z-index: 5;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.wings-hero-actions .logico-alter-button {
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.wings-mobile-break {
|
|
display: none;
|
|
}
|
|
|
|
.wings-hero-page a.wings-hero-primary,
|
|
.wings-hero-page a.wings-hero-secondary {
|
|
--logico-button-text-color: #ffffff;
|
|
--logico-button-border-color: rgba(255, 255, 255, 0.72);
|
|
--logico-button-background-color: rgba(255, 255, 255, 0);
|
|
--logico-button-text-hover: #ffffff;
|
|
--logico-button-border-hover: #c01227;
|
|
--logico-button-background-hover: #c01227;
|
|
--logico-button-icon-hover: #ffffff;
|
|
}
|
|
|
|
.wings-hero-page a.wings-hero-primary {
|
|
--logico-button-border-color: #c01227;
|
|
--logico-button-background-color: #c01227;
|
|
}
|
|
|
|
.wings-hero-page a.wings-hero-primary:hover,
|
|
.wings-hero-page a.wings-hero-secondary:hover {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
@media (min-width: 1025px) {
|
|
.wings-hero-page.elementor-element-741f56c {
|
|
padding: 20px !important;
|
|
}
|
|
|
|
.wings-hero-page .owl-carousel.owl-theme .content-item {
|
|
height: 800px !important;
|
|
min-height: 800px !important;
|
|
border-radius: 24px !important;
|
|
overflow: hidden !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.wings-hero-page.elementor-element-741f56c {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
--padding-top: 0px !important;
|
|
--padding-block-start: 0px !important;
|
|
padding: 0 10px 10px 10px !important;
|
|
overflow: hidden !important;
|
|
border-radius: 25px !important;
|
|
}
|
|
|
|
.wings-hero-page .owl-stage-outer {
|
|
height: 600px !important;
|
|
}
|
|
|
|
.wings-hero-page .owl-carousel.owl-theme .content-item {
|
|
width: 100% !important;
|
|
min-height: 600px !important;
|
|
height: 600px !important;
|
|
border-radius: 25px !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.wings-hero-page .slide-content {
|
|
min-height: 600px !important;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.wings-hero-page.elementor-element-741f56c {
|
|
width: 100vw !important;
|
|
--padding-top: 0px !important;
|
|
--padding-block-start: 0px !important;
|
|
padding: 0 10px 10px 10px !important;
|
|
border-radius: 22px !important;
|
|
}
|
|
|
|
.wings-hero-page .slide-content,
|
|
.wings-hero-page .slide-content-inner {
|
|
width: calc(100vw - 20px) !important;
|
|
max-width: calc(100vw - 20px) !important;
|
|
}
|
|
|
|
.wings-hero-page .slide-content-inner {
|
|
margin-left: 0 !important;
|
|
margin-right: auto !important;
|
|
}
|
|
|
|
.wings-hero-page .owl-stage-outer {
|
|
height: 520px !important;
|
|
}
|
|
|
|
.wings-hero-page .owl-carousel.owl-theme .content-item,
|
|
.wings-hero-page .slide-content {
|
|
min-height: 520px !important;
|
|
height: 520px !important;
|
|
border-radius: 22px !important;
|
|
}
|
|
|
|
.wings-hero-page .slide-content-inner {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
.wings-hero-page .content-slider-item-heading {
|
|
max-width: 100% !important;
|
|
font-size: clamp(20px, 7vw, 32px) !important;
|
|
line-height: 1.12 !important;
|
|
}
|
|
|
|
.wings-hero-page .content-slider-item-text p {
|
|
font-size: 14px !important;
|
|
line-height: 1.58 !important;
|
|
}
|
|
|
|
.wings-hero-page .content-slider-item-text,
|
|
.wings-hero-page .text-content {
|
|
max-width: min(280px, calc(100vw - 70px)) !important;
|
|
width: min(280px, calc(100vw - 70px)) !important;
|
|
}
|
|
|
|
.wings-hero-actions {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.wings-hero-actions .logico-alter-button {
|
|
min-width: 0 !important;
|
|
width: 190px !important;
|
|
padding: 0.78em 3.7em 0.78em 1.35em !important;
|
|
min-height: 42px !important;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
.wings-mobile-break {
|
|
display: block;
|
|
}
|
|
|
|
.wings-hero-page .slider-footer {
|
|
text-align: right !important;
|
|
margin-bottom: 24px !important;
|
|
}
|
|
|
|
.wings-hero-page .slider-footer .slider-pagination {
|
|
justify-content: flex-end !important;
|
|
margin-left: 22px !important;
|
|
margin-right: 22px !important;
|
|
}
|
|
|
|
.wings-hero-page .owl-dots,
|
|
.wings-hero-page .owl-nav {
|
|
display: none !important;
|
|
}
|
|
}
|
|
`,
|
|
}}
|
|
/>
|
|
|
|
<div
|
|
className="wings-hero-page 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"
|
|
ref={containerRef}
|
|
>
|
|
<div
|
|
className="owl-stage-outer"
|
|
style={{ position: "relative", overflow: "hidden", height: "800px" }}
|
|
>
|
|
<div
|
|
className="owl-stage"
|
|
style={{ position: "relative", width: "100%", height: "100%" }}
|
|
>
|
|
<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 wings-hero-bg">
|
|
<div className="slide-content">
|
|
<div className="slide-content-inner">
|
|
<h1 className="content-slider-item-heading logico-content-wrapper-1">
|
|
<span className="heading-content">
|
|
Where Quick Commerce
|
|
<br />
|
|
<ShimmerText className="font-extrabold">
|
|
Meets Quick Logistics
|
|
</ShimmerText>
|
|
</span>
|
|
</h1>
|
|
<div className="content-slider-item-text logico-content-wrapper-2">
|
|
<div className="text-content">
|
|
<p>
|
|
MileTruth™ AI forecasts demand, protects promises,
|
|
and coordinates every handoff from runway to
|
|
doorstep.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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 wings-hero-bg">
|
|
<div className="slide-content">
|
|
<div className="slide-content-inner">
|
|
<h1 className="content-slider-item-heading logico-content-wrapper-1">
|
|
<span className="heading-content">
|
|
Doormile Wings
|
|
<br />
|
|
<ShimmerText className="font-extrabold">
|
|
Same-Day Air
|
|
</ShimmerText>
|
|
<br className="wings-mobile-break" />
|
|
{" "}
|
|
<ShimmerText className="font-extrabold">
|
|
Logistics
|
|
</ShimmerText>
|
|
</span>
|
|
</h1>
|
|
<div className="content-slider-item-text logico-content-wrapper-2">
|
|
<div className="text-content">
|
|
<p>
|
|
Linking India's major regional capitals with
|
|
AI-powered air movement and zero-emission EV
|
|
last-mile delivery.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="owl-nav">
|
|
<button
|
|
type="button"
|
|
className="owl-next"
|
|
onClick={toggleSlide}
|
|
aria-label="Next"
|
|
style={{ cursor: "pointer", border: "none", outline: "none" }}
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="owl-prev"
|
|
onClick={toggleSlide}
|
|
aria-label="Previous"
|
|
style={{ cursor: "pointer", border: "none", outline: "none" }}
|
|
/>
|
|
</div>
|
|
|
|
<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: "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>
|
|
<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>
|
|
<div className="owl-dots owl-dots-6c7cbcb" style={{ display: "none" }}>
|
|
<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>
|
|
</>
|
|
);
|
|
}
|