update doormile wings page
This commit is contained in:
BIN
public/images/pahse1.png
Normal file
BIN
public/images/pahse1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
BIN
public/images/wings-heroslide2.png
Normal file
BIN
public/images/wings-heroslide2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
BIN
public/images/wings-heroslider3.png
Normal file
BIN
public/images/wings-heroslider3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
@@ -1,59 +1,61 @@
|
||||
import AirFreightHero from "@/components/sections/AirFreightHero";
|
||||
import AirFreightServices from "@/components/sections/AirFreightServices";
|
||||
import AirFreightAdvantages from "@/components/sections/AirFreightAdvantages";
|
||||
import AirFreightCoverage from "@/components/sections/AirFreightCoverage";
|
||||
import AirFreightWorkflow from "@/components/sections/AirFreightWorkflow";
|
||||
import AirFreightFleet from "@/components/sections/AirFreightFleet";
|
||||
import AirFreightBenefits from "@/components/sections/AirFreightBenefits";
|
||||
import AirFreightBanner from "@/components/sections/AirFreightBanner";
|
||||
import AirFreightFAQ from "@/components/sections/AirFreightFAQ";
|
||||
import AirFreightCTA from "@/components/sections/AirFreightCTA";
|
||||
import WingsHero from "@/components/sections/WingsHero";
|
||||
import WingsWhyGrid from "@/components/sections/WingsWhyGrid";
|
||||
import WingsSpeedAdvantage from "@/components/sections/WingsSpeedAdvantage";
|
||||
import WingsFeatureGrid from "@/components/sections/WingsFeatureGrid";
|
||||
import WingsIndustries from "@/components/sections/WingsIndustries";
|
||||
import WingsHowItWorks from "@/components/sections/WingsHowItWorks";
|
||||
import WingsFleetStrategy from "@/components/sections/WingsFleetStrategy";
|
||||
import WingsInfrastructure from "@/components/sections/WingsInfrastructure";
|
||||
import WingsMileTruth from "@/components/sections/WingsMileTruth";
|
||||
import WingsRoadmap from "@/components/sections/WingsRoadmap";
|
||||
import WingsFinalCTA from "@/components/sections/WingsFinalCTA";
|
||||
|
||||
export const metadata = {
|
||||
title: "Doormile Wings – Doormile",
|
||||
description: "Doormile Wings delivers precision cargo solutions — express air cargo, charter capacity, cold chain, and customs clearance — across domestic and international trade lanes.",
|
||||
title: "Doormile Wings – Redefining Domestic Air Logistics Through AI",
|
||||
description: "Doormile Wings links India's major regional capitals with AI-powered, same-day air logistics and zero-emission EV last-mile delivery — where quick commerce meets quick logistics.",
|
||||
alternates: {
|
||||
canonical: "https://doormile.com/doormile-wings",
|
||||
},
|
||||
openGraph: {
|
||||
title: "Doormile Wings – Doormile",
|
||||
description: "Precision air cargo solutions across India and 60+ countries. Guaranteed transit times, real-time tracking, and full customs management from a single partner.",
|
||||
title: "Doormile Wings – Redefining Domestic Air Logistics Through AI",
|
||||
description: "Same-day air logistics linking India's major regional capitals, powered by MileTruth™ AI and zero-emission EV last-mile delivery.",
|
||||
url: "https://doormile.com/doormile-wings",
|
||||
siteName: "Doormile",
|
||||
type: "website",
|
||||
images: [
|
||||
{
|
||||
url: "https://doormile.com/images/air-freight-slide-1.jpg",
|
||||
url: "https://doormile.com/images/wings-logo.png",
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: "Doormile Wings precision cargo solutions",
|
||||
alt: "Doormile Wings",
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "Doormile Wings – Doormile",
|
||||
description: "Precision air cargo solutions across India and 60+ countries. Guaranteed transit times, real-time tracking, full customs management.",
|
||||
images: ["https://doormile.com/images/air-freight-slide-1.jpg"],
|
||||
title: "Doormile Wings – Redefining Domestic Air Logistics Through AI",
|
||||
description: "Same-day air logistics linking India's major regional capitals, powered by MileTruth™ AI and zero-emission EV last-mile delivery.",
|
||||
images: ["https://doormile.com/images/wings-logo.png"],
|
||||
},
|
||||
};
|
||||
|
||||
export default function AirFreightPage() {
|
||||
export default function DoormileWingsPage() {
|
||||
return (
|
||||
<div id="doormile-wings" className="content-wrapper content-wrapper-may-contain-elementor-code content-wrapper-sidebar-position-none">
|
||||
<div className="content">
|
||||
<div className="content-inner">
|
||||
<div data-elementor-type="wp-page" data-elementor-id="95" className="elementor elementor-95 elementor-59">
|
||||
<AirFreightHero />
|
||||
<AirFreightServices />
|
||||
<AirFreightAdvantages />
|
||||
<AirFreightCoverage />
|
||||
<AirFreightWorkflow />
|
||||
<AirFreightFleet />
|
||||
<AirFreightBenefits />
|
||||
<AirFreightBanner />
|
||||
<AirFreightFAQ />
|
||||
<AirFreightCTA />
|
||||
<WingsHero />
|
||||
<WingsWhyGrid />
|
||||
<WingsSpeedAdvantage />
|
||||
<WingsFeatureGrid />
|
||||
<WingsIndustries />
|
||||
<WingsHowItWorks />
|
||||
<WingsFleetStrategy />
|
||||
<WingsInfrastructure />
|
||||
<WingsMileTruth />
|
||||
<WingsRoadmap />
|
||||
<WingsFinalCTA />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -985,6 +985,7 @@ body {
|
||||
to .elementor-61). Scope the same 20px frame to the Doormile Wings hero so
|
||||
the card alignment matches Home and Solutions exactly. */
|
||||
@media (min-width: 1025px) {
|
||||
.wings-hero-page.elementor-element-741f56c,
|
||||
.af-hero-page.elementor-element-741f56c {
|
||||
--padding-top: 20px;
|
||||
--padding-right: 20px;
|
||||
|
||||
@@ -1011,10 +1011,10 @@ export default function Header() {
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 34px);
|
||||
width: 380px;
|
||||
min-width: 380px;
|
||||
width: 240px;
|
||||
min-width: 240px;
|
||||
margin: 0;
|
||||
padding: 24px 22px;
|
||||
padding: 12px;
|
||||
list-style: none;
|
||||
background: linear-gradient(180deg, rgba(31, 31, 31, 0.98) 0%, rgba(18, 18, 18, 0.98) 100%);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
@@ -1044,10 +1044,10 @@ export default function Header() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 12px;
|
||||
height: 76px;
|
||||
padding: 0 34px;
|
||||
border-radius: 12px;
|
||||
gap: 10px;
|
||||
height: 48px;
|
||||
padding: 0 16px;
|
||||
border-radius: 10px;
|
||||
/* Hardcoded rather than var(--logico-dark-text-color): that
|
||||
variable is only overridden to white inside a few unrelated
|
||||
scoped contexts (e.g. #side-panel-2f31137) and otherwise
|
||||
@@ -1055,7 +1055,7 @@ export default function Header() {
|
||||
which would be invisible on this dark glass panel. */
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: 18px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
letter-spacing: normal;
|
||||
@@ -1068,7 +1068,7 @@ export default function Header() {
|
||||
content: "";
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
margin-left: -23px;
|
||||
margin-left: -16px;
|
||||
flex: 0 0 11px;
|
||||
background-color: #c01227;
|
||||
opacity: 0;
|
||||
@@ -1088,7 +1088,7 @@ export default function Header() {
|
||||
#masthead .header-menu-container .main-menu > li.menu-item-has-children .dm-solutions-dropdown li > a:focus-visible {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
color: #ffffff;
|
||||
padding-left: 40px;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
#masthead .header-menu-container .main-menu > li.menu-item-has-children .dm-solutions-dropdown li > a:hover:before,
|
||||
|
||||
@@ -1,180 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import Link from "next/link";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
import { ScrollReveal } from "@/animations/Reveal";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
}
|
||||
|
||||
export default function AirFreightAdvantages() {
|
||||
const counterRef = useRef<HTMLSpanElement>(null);
|
||||
const sectionRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const counter = counterRef.current;
|
||||
const section = sectionRef.current;
|
||||
if (!counter || !section) return;
|
||||
|
||||
const trigger = ScrollTrigger.create({
|
||||
trigger: section,
|
||||
start: "top 75%",
|
||||
once: true,
|
||||
onEnter: () => {
|
||||
const obj = { val: 200000 };
|
||||
gsap.to(obj, {
|
||||
val: 250000,
|
||||
duration: 2.2,
|
||||
ease: "power2.out",
|
||||
onUpdate: () => {
|
||||
if (counter) counter.textContent = Math.round(obj.val).toLocaleString("en-IN");
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return () => { trigger.kill(); };
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
.afa-about-label {
|
||||
text-align: center;
|
||||
padding: 60px 20px 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
.afa-about-label .logico-title {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(17,17,17,0.45);
|
||||
display: inline-block;
|
||||
}
|
||||
.afa-counter-section {
|
||||
background: #ffffff;
|
||||
padding: 60px 20px 80px;
|
||||
}
|
||||
.afa-counter-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
}
|
||||
.afa-counter-number {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: clamp(80px, 12vw, 180px);
|
||||
font-weight: 800;
|
||||
color: #1F1F1F;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.04em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.afa-counter-suffix {
|
||||
color: #c01227;
|
||||
}
|
||||
.afa-counter-label {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(17,17,17,0.45);
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
transform: rotate(180deg);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.afa-feature-section {
|
||||
background: #ffffff;
|
||||
padding: 0 20px 80px;
|
||||
}
|
||||
.afa-feature-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 80px;
|
||||
align-items: start;
|
||||
}
|
||||
.logico-front-end .afa-feature-section h3.afa-feature-heading {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: clamp(28px, 3.5vw, 52px);
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.03em;
|
||||
text-transform: uppercase;
|
||||
color: #1F1F1F;
|
||||
-webkit-text-fill-color: #1F1F1F;
|
||||
margin: 0;
|
||||
}
|
||||
.afa-feature-text {
|
||||
font-size: 15px;
|
||||
line-height: 1.75;
|
||||
color: rgba(17,17,17,0.65);
|
||||
margin: 0 0 28px;
|
||||
}
|
||||
.afa-feature-text strong {
|
||||
color: #1F1F1F;
|
||||
font-weight: 700;
|
||||
}
|
||||
@media (max-width: 1020px) {
|
||||
.afa-feature-inner { grid-template-columns: 1fr; gap: 40px; }
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.afa-counter-number { font-size: clamp(60px, 15vw, 100px); }
|
||||
.afa-counter-inner { gap: 20px; flex-wrap: wrap; }
|
||||
.afa-counter-label { writing-mode: horizontal-tb; transform: none; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.afa-counter-section { padding: 40px 20px 60px; }
|
||||
.afa-feature-section { padding: 0 20px 60px; }
|
||||
}
|
||||
`}} />
|
||||
|
||||
{/* About Us label */}
|
||||
<div className="afa-about-label">
|
||||
<ScrollReveal delay={0.05}>
|
||||
<span className="logico-title">/ about us /</span>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
{/* Big counter */}
|
||||
<section className="afa-counter-section" ref={sectionRef}>
|
||||
<div className="afa-counter-inner dm-section-container">
|
||||
<div className="afa-counter-number">
|
||||
<span ref={counterRef}>200,000</span>
|
||||
<span className="afa-counter-suffix">+</span>
|
||||
</div>
|
||||
<div className="afa-counter-label">Delivered tonnes of cargo</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Feature heading */}
|
||||
<section className="afa-feature-section">
|
||||
<div className="afa-feature-inner dm-section-container">
|
||||
<ScrollReveal delay={0.05} yOffset={40}>
|
||||
<h3 className="afa-feature-heading">
|
||||
Doormile Wings is India's leading air cargo partner
|
||||
</h3>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.15} yOffset={40}>
|
||||
<div>
|
||||
<p className="afa-feature-text">
|
||||
<strong>Our integrated air and ground network delivers cargo from major Indian airports to final destinations — domestic or international — without subcontractor gaps or tracking blind spots.</strong>
|
||||
<br /><br />
|
||||
Every Doormile Wings booking comes with binding SLA commitments, real-time milestone tracking, and in-house customs management — eliminating the need for third-party brokers and reducing total transit risk.
|
||||
</p>
|
||||
<Link href="/about-us" className="logico-alter-button" style={{ textDecoration: "none", display: "inline-block" }}>
|
||||
More About Us
|
||||
</Link>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,127 +0,0 @@
|
||||
import Link from "next/link";
|
||||
import { ScrollReveal } from "@/animations/Reveal";
|
||||
|
||||
export default function AirFreightBanner() {
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
.afb-section {
|
||||
padding: 0 20px;
|
||||
background: transparent;
|
||||
}
|
||||
.afb-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.afb-image {
|
||||
min-height: 600px;
|
||||
border-radius: 25px;
|
||||
background-image: url('/images/air-freight-slide-1.jpg');
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
.afb-card-anchor {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.afb-card {
|
||||
background: #1F1F1F;
|
||||
border-radius: 25px 25px 0 0;
|
||||
padding: 64px 40px 73px 38px;
|
||||
width: 363px;
|
||||
margin-top: -220px;
|
||||
margin-right: 30px;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.afb-card-num {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
color: rgba(255,255,255,0.35);
|
||||
text-transform: uppercase;
|
||||
margin: 0 0 18px;
|
||||
display: block;
|
||||
}
|
||||
.logico-front-end .afb-section h5.afb-card-title {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: clamp(22px, 2vw, 28px);
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.02em;
|
||||
color: #FFFFFF;
|
||||
-webkit-text-fill-color: #FFFFFF;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
.afb-card-desc {
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
color: rgba(255,255,255,0.55);
|
||||
margin: 0 0 32px;
|
||||
}
|
||||
.logico-front-end .afb-section .logico-small-button {
|
||||
color: #FFFFFF !important;
|
||||
border-color: rgba(255,255,255,0.3) !important;
|
||||
}
|
||||
.logico-front-end .afb-section .logico-small-button:hover {
|
||||
color: #c01227 !important;
|
||||
border-color: #c01227 !important;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.afb-image { min-height: 500px; }
|
||||
.afb-card { width: 340px; margin-right: 20px; padding: 48px 32px 56px 32px; }
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.afb-image { min-height: 420px; }
|
||||
.afb-card { width: 300px; margin-top: -160px; }
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.afb-image { min-height: 320px; margin-bottom: 0; }
|
||||
.afb-card-anchor { justify-content: stretch; }
|
||||
.afb-card {
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
border-radius: 0 0 0 0;
|
||||
padding: 40px 30px 48px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.afb-image { min-height: 260px; }
|
||||
.afb-card { padding: 32px 20px 40px; }
|
||||
}
|
||||
`}} />
|
||||
|
||||
<section className="afb-section">
|
||||
<div className="afb-wrap dm-section-container">
|
||||
<div className="afb-image" role="img" aria-label="Doormile Wings cargo terminal" />
|
||||
<div className="afb-card-anchor">
|
||||
<ScrollReveal delay={0.1} yOffset={30}>
|
||||
<div className="afb-card">
|
||||
<span className="afb-card-num">01 / Doormile Wings</span>
|
||||
<h5 className="afb-card-title">Specialized air cargo services for every shipment type</h5>
|
||||
<p className="afb-card-desc">From express next-flight-out bookings to full-aircraft charters — Doormile handles every air cargo requirement under one SLA with full visibility and in-house customs.</p>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="logico-small-button"
|
||||
style={{ textDecoration: "none", display: "inline-flex", alignItems: "center", gap: "8px" }}
|
||||
>
|
||||
Explore More
|
||||
<svg viewBox="0 0 13 20" width="8" height="13" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5" />
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,297 +0,0 @@
|
||||
import Link from "next/link";
|
||||
import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
|
||||
|
||||
const PLANS = [
|
||||
{
|
||||
price: "On Quote",
|
||||
priceNote: "per shipment",
|
||||
name: "Starter Air",
|
||||
features: [
|
||||
{ active: true, text: "Standard air cargo booking" },
|
||||
{ active: true, text: "Real-time milestone tracking" },
|
||||
{ active: false, text: "Priority customs clearance" },
|
||||
{ active: false, text: "Temperature-controlled handling" },
|
||||
{ active: false, text: "Dedicated account manager" },
|
||||
],
|
||||
},
|
||||
{
|
||||
price: "On Quote",
|
||||
priceNote: "per shipment",
|
||||
name: "Express Air",
|
||||
features: [
|
||||
{ active: true, text: "Next-flight-out scheduling" },
|
||||
{ active: true, text: "Real-time milestone tracking" },
|
||||
{ active: true, text: "Priority customs clearance" },
|
||||
{ active: false, text: "Temperature-controlled handling" },
|
||||
{ active: false, text: "Dedicated account manager" },
|
||||
],
|
||||
},
|
||||
{
|
||||
price: "On Quote",
|
||||
priceNote: "per shipment",
|
||||
name: "Cold Chain",
|
||||
features: [
|
||||
{ active: true, text: "Next-flight-out scheduling" },
|
||||
{ active: true, text: "Real-time milestone tracking" },
|
||||
{ active: true, text: "Priority customs clearance" },
|
||||
{ active: true, text: "Temperature-controlled handling" },
|
||||
{ active: false, text: "Dedicated account manager" },
|
||||
],
|
||||
},
|
||||
{
|
||||
price: "Custom",
|
||||
priceNote: "enterprise pricing",
|
||||
name: "Charter & Enterprise",
|
||||
featured: true,
|
||||
features: [
|
||||
{ active: true, text: "Full-aircraft charter allocation" },
|
||||
{ active: true, text: "Real-time milestone tracking" },
|
||||
{ active: true, text: "Priority customs clearance" },
|
||||
{ active: true, text: "Temperature-controlled handling" },
|
||||
{ active: true, text: "Dedicated account manager" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function AirFreightBenefits() {
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
.afpr-section {
|
||||
background: #ffffff;
|
||||
padding: 80px 20px;
|
||||
}
|
||||
.afpr-inner {
|
||||
}
|
||||
.afpr-header {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.afpr-eyebrow {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(17,17,17,0.4);
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
.logico-front-end .afpr-section h3.afpr-heading {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: clamp(28px, 3.5vw, 52px);
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.03em;
|
||||
text-transform: uppercase;
|
||||
color: #1F1F1F;
|
||||
-webkit-text-fill-color: #1F1F1F;
|
||||
margin: 0;
|
||||
max-width: 560px;
|
||||
}
|
||||
.afpr-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
.afpr-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(17,17,17,0.1);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.165,0.84,0.44,1);
|
||||
}
|
||||
.afpr-card:hover {
|
||||
border-color: #c01227;
|
||||
box-shadow: 0 20px 40px rgba(192,18,39,0.08);
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
.afpr-card.afpr-featured {
|
||||
background: #1F1F1F;
|
||||
border-color: #1F1F1F;
|
||||
}
|
||||
.afpr-card.afpr-featured:hover {
|
||||
border-color: #c01227;
|
||||
box-shadow: 0 20px 40px rgba(192,18,39,0.2);
|
||||
}
|
||||
.afpr-card-top {
|
||||
padding: 32px 28px 20px;
|
||||
border-bottom: 1px solid rgba(17,17,17,0.08);
|
||||
}
|
||||
.afpr-card.afpr-featured .afpr-card-top {
|
||||
border-color: rgba(255,255,255,0.1);
|
||||
}
|
||||
.afpr-price {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: clamp(28px, 2.5vw, 42px);
|
||||
font-weight: 800;
|
||||
color: #1F1F1F;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
.afpr-card.afpr-featured .afpr-price {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.afpr-price-note {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: rgba(17,17,17,0.4);
|
||||
margin-top: 4px;
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.afpr-card.afpr-featured .afpr-price-note {
|
||||
color: rgba(255,255,255,0.4);
|
||||
}
|
||||
.afpr-plan-name {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(17,17,17,0.45);
|
||||
margin: 16px 0 0;
|
||||
display: block;
|
||||
}
|
||||
.afpr-card.afpr-featured .afpr-plan-name {
|
||||
color: rgba(255,255,255,0.4);
|
||||
}
|
||||
.afpr-card-body {
|
||||
padding: 24px 28px 28px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.afpr-features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
.afpr-section .afpr-features li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: rgba(17,17,17,0.65);
|
||||
line-height: 1.4;
|
||||
}
|
||||
.afpr-section .afpr-features li::before {
|
||||
content: none;
|
||||
}
|
||||
.afpr-card.afpr-featured .afpr-features li {
|
||||
color: rgba(255,255,255,0.55);
|
||||
}
|
||||
.afpr-feat-active {
|
||||
color: rgba(17,17,17,0.85) !important;
|
||||
}
|
||||
.afpr-card.afpr-featured .afpr-feat-active {
|
||||
color: rgba(255,255,255,0.9) !important;
|
||||
}
|
||||
.afpr-feat-dot {
|
||||
flex: 0 0 auto;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.afpr-feat-dot.on {
|
||||
background: rgba(192,18,39,0.1);
|
||||
border: 1px solid rgba(192,18,39,0.3);
|
||||
color: #c01227;
|
||||
}
|
||||
.afpr-feat-dot.off {
|
||||
background: rgba(17,17,17,0.04);
|
||||
border: 1px solid rgba(17,17,17,0.1);
|
||||
color: rgba(17,17,17,0.2);
|
||||
}
|
||||
.afpr-card.afpr-featured .afpr-feat-dot.off {
|
||||
background: rgba(255,255,255,0.04);
|
||||
border-color: rgba(255,255,255,0.1);
|
||||
color: rgba(255,255,255,0.2);
|
||||
}
|
||||
.afpr-feat-dot svg {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
}
|
||||
.logico-front-end .afpr-section .logico-alter-button {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
}
|
||||
.logico-front-end .afpr-card.afpr-featured .logico-alter-button {
|
||||
color: #FFFFFF !important;
|
||||
border-color: rgba(255,255,255,0.3) !important;
|
||||
}
|
||||
.logico-front-end .afpr-card.afpr-featured .logico-alter-button:hover {
|
||||
background: #FFFFFF !important;
|
||||
color: #1F1F1F !important;
|
||||
border-color: #FFFFFF !important;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.afpr-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.afpr-grid { grid-template-columns: 1fr; }
|
||||
.afpr-section { padding: 60px 20px; }
|
||||
}
|
||||
`}} />
|
||||
|
||||
<section className="afpr-section">
|
||||
<div className="afpr-inner dm-section-container">
|
||||
<ScrollReveal delay={0.05}>
|
||||
<div className="afpr-header">
|
||||
<div className="afpr-eyebrow">/ Pricing Plans /</div>
|
||||
<h3 className="afpr-heading">Transparent pricing for every cargo need</h3>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<StaggerChildren stagger={0.1} duration={0.75} yOffset={40} className="afpr-grid">
|
||||
{PLANS.map((plan) => (
|
||||
<div key={plan.name} className={`afpr-card${plan.featured ? " afpr-featured" : ""}`}>
|
||||
<div className="afpr-card-top">
|
||||
<div className="afpr-price">{plan.price}</div>
|
||||
<span className="afpr-price-note">{plan.priceNote}</span>
|
||||
<span className="afpr-plan-name">{plan.name}</span>
|
||||
</div>
|
||||
<div className="afpr-card-body">
|
||||
<ul className="afpr-features">
|
||||
{plan.features.map((feat) => (
|
||||
<li key={feat.text} className={feat.active ? "afpr-feat-active" : ""}>
|
||||
<span className={`afpr-feat-dot ${feat.active ? "on" : "off"}`} aria-hidden="true">
|
||||
{feat.active ? (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
)}
|
||||
</span>
|
||||
{feat.text}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link href="/contact" className="logico-alter-button">
|
||||
Get started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</StaggerChildren>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function AirFreightCTA() {
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
@media (max-width: 768px) {
|
||||
.afcta-container {
|
||||
margin-top: 40px !important;
|
||||
margin-bottom: 40px !important;
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
.afcta-box {
|
||||
padding: 48px 20px !important;
|
||||
border-radius: 22px !important;
|
||||
}
|
||||
.afcta-title {
|
||||
font-size: clamp(28px, 6vw, 38px) !important;
|
||||
line-height: 1.25 !important;
|
||||
margin-bottom: 16px !important;
|
||||
}
|
||||
.afcta-sub {
|
||||
font-size: 15px !important;
|
||||
line-height: 1.5 !important;
|
||||
margin-bottom: 24px !important;
|
||||
}
|
||||
}
|
||||
`}} />
|
||||
<div className="we-container afcta-container">
|
||||
<div className="we-cta reveal afcta-box">
|
||||
<div className="we-cta-inner">
|
||||
<h2 className="we-cta-title afcta-title">
|
||||
Ready to move your<br />
|
||||
<em>cargo by air?</em>
|
||||
</h2>
|
||||
<p className="we-cta-sub afcta-sub">
|
||||
Get a binding Doormile Wings quote within the hour. Our logistics team<br />
|
||||
is available 24/7 across all major Indian airports and trade lanes.
|
||||
</p>
|
||||
<div className="we-cta-btns">
|
||||
<Link href="/contact" className="btn-we-primary" style={{ textDecoration: "none" }}>
|
||||
Get a Quote
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" />
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,128 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
}
|
||||
|
||||
const STATS = [
|
||||
{ prefix: "", from: 7000, to: 7500, suffix: "", label: "Delivered packages" },
|
||||
{ prefix: "2.", from: 1, to: 6, suffix: " bil", label: "Tonnes of goods" },
|
||||
{ prefix: "", from: 10, to: 100, suffix: "+", label: "Countries covered" },
|
||||
{ prefix: "", from: 100, to: 550, suffix: "+", label: "Warehouses" },
|
||||
];
|
||||
|
||||
export default function AirFreightCoverage() {
|
||||
const sectionRef = useRef<HTMLDivElement>(null);
|
||||
const countersRef = useRef<(HTMLSpanElement | null)[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const section = sectionRef.current;
|
||||
if (!section) return;
|
||||
|
||||
const trigger = ScrollTrigger.create({
|
||||
trigger: section,
|
||||
start: "top 75%",
|
||||
once: true,
|
||||
onEnter: () => {
|
||||
STATS.forEach((stat, i) => {
|
||||
const el = countersRef.current[i];
|
||||
if (!el) return;
|
||||
const obj = { val: stat.from };
|
||||
gsap.to(obj, {
|
||||
val: stat.to,
|
||||
duration: 2,
|
||||
ease: "power2.out",
|
||||
delay: i * 0.12,
|
||||
onUpdate: () => {
|
||||
if (el) {
|
||||
el.textContent = Math.round(obj.val).toLocaleString("en-IN");
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return () => { trigger.kill(); };
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
.afc4-section {
|
||||
background: #1F1F1F;
|
||||
padding: 80px 20px;
|
||||
}
|
||||
.afc4-inner {
|
||||
}
|
||||
.afc4-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 2px;
|
||||
}
|
||||
.afc4-item {
|
||||
padding: 50px 40px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.07);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
transition: background 0.35s ease, border-color 0.35s ease;
|
||||
}
|
||||
.afc4-item:hover {
|
||||
background: rgba(192,18,39,0.05);
|
||||
border-color: rgba(192,18,39,0.25);
|
||||
}
|
||||
.afc4-number {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: clamp(48px, 5vw, 80px);
|
||||
font-weight: 800;
|
||||
color: #FFFFFF;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
.afc4-number-suffix {
|
||||
color: #c01227;
|
||||
}
|
||||
.afc4-label {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgba(255,255,255,0.45);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
margin-top: 4px;
|
||||
}
|
||||
@media (max-width: 1020px) {
|
||||
.afc4-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.afc4-section { padding: 60px 20px; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.afc4-item { padding: 30px 24px; }
|
||||
.afc4-section { padding: 40px 20px; }
|
||||
}
|
||||
`}} />
|
||||
|
||||
<section className="afc4-section" ref={sectionRef}>
|
||||
<div className="afc4-inner dm-section-container">
|
||||
<div className="afc4-grid">
|
||||
{STATS.map((stat, i) => (
|
||||
<div key={stat.label} className="afc4-item">
|
||||
<div className="afc4-number">
|
||||
{stat.prefix && <span>{stat.prefix}</span>}
|
||||
<span ref={(el) => { countersRef.current[i] = el; }}>{stat.from.toLocaleString("en-IN")}</span>
|
||||
{stat.suffix && <span className="afc4-number-suffix">{stat.suffix}</span>}
|
||||
</div>
|
||||
<div className="afc4-label">{stat.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,219 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { ScrollReveal } from "@/animations/Reveal";
|
||||
|
||||
const FAQS = [
|
||||
{
|
||||
q: "How can we work with Doormile Wings?",
|
||||
a: "Getting started with Doormile Wings is straightforward — contact our ops team or use our online quote form. We'll assess your cargo requirements, recommend the right service tier, and handle all documentation, booking, and customs coordination from a single point of contact.",
|
||||
},
|
||||
{
|
||||
q: "What types of cargo can Doormile move by air?",
|
||||
a: "We handle general cargo, express parcels, perishables, pharmaceuticals, dangerous goods (IATA-classified), oversized freight, and high-value shipments. Our IATA-certified team manages special commodity requirements including temperature control, security packaging, and regulatory documentation.",
|
||||
},
|
||||
{
|
||||
q: "Does Doormile handle customs clearance on both ends?",
|
||||
a: "Yes. Doormile provides end-to-end customs management for both import and export lanes. We handle HS code classification, duty calculations, export and import declarations, and liaison with customs authorities at origin and destination. Our in-house compliance team eliminates the need for separate customs brokers.",
|
||||
},
|
||||
{
|
||||
q: "Do you do transportation using air internationally?",
|
||||
a: "Doormile connects India to 60+ countries via our partner airline network. We manage full export documentation, origin customs, air transport, destination customs, and ground delivery at the other end — under one SLA, with end-to-end visibility from our tracking platform.",
|
||||
},
|
||||
{
|
||||
q: "How much cargo can you handle and how quickly?",
|
||||
a: "We handle shipments from a single kilogram to full charter allocations. For express bookings on standard lanes, same-day confirmation is standard. Charter requests are assessed within 2 hours. Our network handles over 500 tonnes of cargo monthly across all service types.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function AirFreightFAQ() {
|
||||
const [openIndex, setOpenIndex] = useState<number | null>(0);
|
||||
|
||||
const toggle = (index: number) => {
|
||||
setOpenIndex((prev) => (prev === index ? null : index));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
.affaq-section {
|
||||
background: #ffffff;
|
||||
padding: 80px 20px;
|
||||
}
|
||||
.affaq-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.6fr;
|
||||
gap: 80px;
|
||||
align-items: start;
|
||||
}
|
||||
.affaq-left {
|
||||
position: sticky;
|
||||
top: 120px;
|
||||
}
|
||||
.affaq-eyebrow {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(17,17,17,0.4);
|
||||
margin: 0 0 18px;
|
||||
display: block;
|
||||
}
|
||||
.logico-front-end .affaq-section h3.affaq-heading {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: clamp(26px, 3vw, 44px);
|
||||
font-weight: 800;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.03em;
|
||||
text-transform: uppercase;
|
||||
color: #1F1F1F;
|
||||
-webkit-text-fill-color: #1F1F1F;
|
||||
margin: 0 0 32px;
|
||||
}
|
||||
.logico-front-end .affaq-section .logico-alter-button {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
.affaq-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.affaq-item {
|
||||
border-bottom: 1px solid rgba(17,17,17,0.1);
|
||||
}
|
||||
.affaq-item:first-child {
|
||||
border-top: 1px solid rgba(17,17,17,0.1);
|
||||
}
|
||||
.affaq-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
padding: 26px 0;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
.affaq-trigger:focus-visible {
|
||||
outline: 2px solid #c01227;
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.logico-front-end .affaq-section .affaq-trigger-text {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #111111;
|
||||
-webkit-text-fill-color: #111111;
|
||||
line-height: 1.4;
|
||||
text-align: left;
|
||||
transition: color 0.3s ease;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.affaq-item.open .affaq-trigger-text {
|
||||
color: #c01227 !important;
|
||||
-webkit-text-fill-color: #c01227 !important;
|
||||
}
|
||||
.affaq-icon {
|
||||
flex: 0 0 28px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid rgba(17,17,17,0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #111111;
|
||||
transition: border-color 0.3s ease, background 0.3s ease, transform 0.4s cubic-bezier(0.165,0.84,0.44,1), color 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.affaq-item.open .affaq-icon {
|
||||
border-color: #c01227;
|
||||
background: #c01227;
|
||||
color: #ffffff;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.affaq-icon svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
stroke: currentColor;
|
||||
}
|
||||
.affaq-answer {
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
transition: max-height 0.45s cubic-bezier(0.165,0.84,0.44,1);
|
||||
}
|
||||
.affaq-item.open .affaq-answer {
|
||||
max-height: 400px;
|
||||
}
|
||||
.affaq-answer-inner {
|
||||
padding: 0 0 28px;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: rgba(17,17,17,0.6);
|
||||
line-height: 1.7;
|
||||
}
|
||||
@media (max-width: 1020px) {
|
||||
.affaq-inner {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 40px;
|
||||
}
|
||||
.affaq-left { position: static; }
|
||||
.affaq-section { padding: 60px 20px; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.affaq-section { padding: 40px 20px; }
|
||||
.logico-front-end .affaq-section .affaq-trigger-text { font-size: 14px; }
|
||||
.affaq-trigger { padding: 20px 0; }
|
||||
}
|
||||
`}} />
|
||||
|
||||
<section className="affaq-section">
|
||||
<div className="affaq-inner dm-section-container">
|
||||
{/* Left column */}
|
||||
<ScrollReveal delay={0.05} yOffset={30}>
|
||||
<div className="affaq-left">
|
||||
<span className="affaq-eyebrow">/ FAQ /</span>
|
||||
<h3 className="affaq-heading">Find answers before working with us</h3>
|
||||
<Link href="/contact" className="logico-alter-button">
|
||||
Explore More
|
||||
</Link>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* Right column — accordion */}
|
||||
<ScrollReveal delay={0.15} yOffset={30}>
|
||||
<div className="affaq-list">
|
||||
{FAQS.map((faq, index) => (
|
||||
<div key={index} className={`affaq-item${openIndex === index ? " open" : ""}`}>
|
||||
<button
|
||||
type="button"
|
||||
className="affaq-trigger"
|
||||
onClick={() => toggle(index)}
|
||||
aria-expanded={openIndex === index}
|
||||
>
|
||||
<span className="affaq-trigger-text">{faq.q}</span>
|
||||
<span className="affaq-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<div className="affaq-answer" aria-hidden={openIndex !== index}>
|
||||
<div className="affaq-answer-inner">{faq.a}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
import { ScrollReveal } from "@/animations/Reveal";
|
||||
|
||||
const CLIENTS = [
|
||||
{ name: "DHL Express", abbr: "DHL" },
|
||||
{ name: "FedEx India", abbr: "FEDEX" },
|
||||
{ name: "Blue Dart", abbr: "BDART" },
|
||||
{ name: "Mahindra Logistics", abbr: "MLG" },
|
||||
{ name: "GATI-KWE", abbr: "GATI" },
|
||||
{ name: "Allcargo Group", abbr: "ACG" },
|
||||
];
|
||||
|
||||
export default function AirFreightFleet() {
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
.afcl-section {
|
||||
background: #ffffff;
|
||||
padding: 60px 20px;
|
||||
border-top: 1px solid rgba(17,17,17,0.06);
|
||||
border-bottom: 1px solid rgba(17,17,17,0.06);
|
||||
}
|
||||
.afcl-inner {
|
||||
}
|
||||
.afcl-label {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(17,17,17,0.35);
|
||||
text-align: center;
|
||||
margin: 0 0 36px;
|
||||
}
|
||||
.afcl-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 2px;
|
||||
}
|
||||
.afcl-logo-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 28px 20px;
|
||||
border: 1px solid rgba(17,17,17,0.07);
|
||||
transition: border-color 0.3s ease, background 0.3s ease;
|
||||
cursor: default;
|
||||
}
|
||||
.afcl-logo-cell:hover {
|
||||
border-color: rgba(192,18,39,0.2);
|
||||
background: rgba(192,18,39,0.02);
|
||||
}
|
||||
.afcl-logo-text {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(17,17,17,0.3);
|
||||
transition: color 0.3s ease;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.afcl-logo-cell:hover .afcl-logo-text {
|
||||
color: rgba(17,17,17,0.7);
|
||||
}
|
||||
.afcl-logo-fullname {
|
||||
font-size: 9px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(17,17,17,0.2);
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.afcl-logo-cell:hover .afcl-logo-fullname {
|
||||
color: rgba(17,17,17,0.4);
|
||||
}
|
||||
@media (max-width: 1020px) {
|
||||
.afcl-grid { grid-template-columns: repeat(3, 1fr); }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.afcl-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.afcl-section { padding: 40px 20px; }
|
||||
}
|
||||
`}} />
|
||||
|
||||
<section className="afcl-section">
|
||||
<div className="afcl-inner dm-section-container">
|
||||
<ScrollReveal delay={0.05}>
|
||||
<div className="afcl-label">Trusted by logistics partners across India</div>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.1} yOffset={20}>
|
||||
<div className="afcl-grid">
|
||||
{CLIENTS.map((client) => (
|
||||
<div key={client.name} className="afcl-logo-cell">
|
||||
<div>
|
||||
<span className="afcl-logo-text">{client.abbr}</span>
|
||||
<span className="afcl-logo-fullname">{client.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,251 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import Link from "next/link";
|
||||
import gsap from "gsap";
|
||||
import { ShimmerText } from "@/animations/Reveal";
|
||||
|
||||
export default function AirFreightHero() {
|
||||
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 btn = activeItem.querySelector(".content-slider-item-buttons");
|
||||
if (heading) {
|
||||
gsap.killTweensOf(heading);
|
||||
gsap.fromTo(heading, { y: 60, opacity: 0 }, { y: 0, opacity: 1, duration: 1.1, ease: "power4.out" });
|
||||
}
|
||||
if (text) {
|
||||
gsap.killTweensOf(text);
|
||||
gsap.fromTo(text, { y: 30, opacity: 0 }, { y: 0, opacity: 1, duration: 0.95, ease: "power3.out", delay: 0.22 });
|
||||
}
|
||||
if (btn) {
|
||||
gsap.killTweensOf(btn);
|
||||
gsap.fromTo(btn, { y: 20, opacity: 0 }, { y: 0, opacity: 1, duration: 0.8, ease: "power3.out", delay: 0.42 });
|
||||
}
|
||||
}, [activeSlide]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<link rel="preload" as="image" href="/images/air-freight-slide-1.jpg" />
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
.af-hero-bg.slide-1 {
|
||||
background-image: linear-gradient(166deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 100%), url('/images/air-freight-slide-1.jpg');
|
||||
background-position: bottom center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.af-hero-bg.slide-2 {
|
||||
background-image: linear-gradient(166deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 100%), url('/images/air-freight-slide-2.jpg');
|
||||
background-position: bottom center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.af-hero-slide .slide-content {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 20px 70px !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.af-hero-slide .slide-content-inner {
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
margin: 58px auto 0 auto;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.af-hero-slide .content-slider-item-heading,
|
||||
.af-hero-slide .content-slider-item-heading .heading-content {
|
||||
font-size: clamp(36px, 5.5vw, 80px) !important;
|
||||
line-height: 1.125em !important;
|
||||
word-spacing: -0.03em;
|
||||
color: #FFFFFF !important;
|
||||
text-align: center !important;
|
||||
width: 100%;
|
||||
}
|
||||
.af-hero-slide .content-slider-item-text {
|
||||
color: #FFFFFF;
|
||||
text-align: center !important;
|
||||
font-size: clamp(18px, 1.5vw, 24px) !important;
|
||||
line-height: 1.65 !important;
|
||||
margin-top: 23px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.af-hero-slide .content-slider-item-text .text-content {
|
||||
max-width: 780px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.af-hero-slide .content-slider-item-buttons {
|
||||
margin-top: 32px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.logico-front-end .af-hero-slide .logico-alter-button {
|
||||
display: inline-block;
|
||||
color: #FFFFFF !important;
|
||||
border-color: rgba(255,255,255,0.45) !important;
|
||||
background: transparent !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.logico-front-end .af-hero-slide .logico-alter-button:hover {
|
||||
background: #FFFFFF !important;
|
||||
color: #1F1F1F !important;
|
||||
border-color: #FFFFFF !important;
|
||||
}
|
||||
.logico-content-slider-widget .owl-stage-outer {
|
||||
height: 800px !important;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.af-hero-slide .slide-content-inner { max-width: 90%; }
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.af-hero-slide .slide-content { padding: 0 30px 50px !important; }
|
||||
.af-hero-slide .slide-content-inner { max-width: 95%; }
|
||||
.logico-content-slider-widget .owl-stage-outer { height: 640px !important; }
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.af-hero-slide .slide-content { padding: 0 20px 40px !important; }
|
||||
.af-hero-slide .slide-content-inner { max-width: 100%; margin: 0 auto; }
|
||||
.logico-content-slider-widget .owl-stage-outer { height: 580px !important; }
|
||||
.af-hero-page .owl-nav { display: none !important; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.af-hero-slide .content-slider-item-heading { font-size: clamp(28px, 8vw, 42px) !important; }
|
||||
.logico-content-slider-widget .owl-stage-outer { height: 520px !important; }
|
||||
}
|
||||
`}} />
|
||||
|
||||
<div className="af-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" }}>
|
||||
<div className="owl-stage" style={{ position: "relative", width: "100%", height: "100%" }}>
|
||||
|
||||
{/* Slide 1 */}
|
||||
<div
|
||||
className={`owl-item af-hero-slide ${activeSlide === 0 ? "active" : ""}`}
|
||||
style={{
|
||||
position: "relative", width: "100%",
|
||||
opacity: activeSlide === 0 ? 1 : 0,
|
||||
visibility: activeSlide === 0 ? "visible" : "hidden",
|
||||
transition: "opacity 0.85s ease-in-out, visibility 0.85s ease-in-out",
|
||||
zIndex: activeSlide === 0 ? 2 : 1,
|
||||
}}
|
||||
>
|
||||
<div className="content-item slider-item slide-style-standard af-hero-bg slide-1">
|
||||
<div className="slide-content">
|
||||
<div className="slide-content-inner">
|
||||
<h1 className="content-slider-item-heading logico-content-wrapper-1">
|
||||
<span className="heading-content block">
|
||||
The Fastest Way<br />
|
||||
<ShimmerText>To Transport Goods</ShimmerText>
|
||||
</span>
|
||||
</h1>
|
||||
<div className="content-slider-item-text logico-content-wrapper-2">
|
||||
<div className="text-content">
|
||||
<p>Doormile Wings delivers precision cargo solutions across domestic and international trade lanes — guaranteed transit times, real-time tracking, full customs management.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Slide 2 */}
|
||||
<div
|
||||
className={`owl-item af-hero-slide ${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.85s ease-in-out, visibility 0.85s ease-in-out",
|
||||
zIndex: activeSlide === 1 ? 2 : 1,
|
||||
}}
|
||||
>
|
||||
<div className="content-item slider-item slide-style-standard af-hero-bg slide-2">
|
||||
<div className="slide-content">
|
||||
<div className="slide-content-inner">
|
||||
<h1 className="content-slider-item-heading logico-content-wrapper-1">
|
||||
<span className="heading-content block">
|
||||
A New Freight<br />
|
||||
<ShimmerText>Shipping Experience</ShimmerText>
|
||||
</span>
|
||||
</h1>
|
||||
<div className="content-slider-item-text logico-content-wrapper-2">
|
||||
<div className="text-content">
|
||||
<p>From runway to doorstep — seamless air-to-ground handoffs powered by our integrated logistics network across India and global destinations.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="owl-nav">
|
||||
<button type="button" className="owl-next" onClick={() => setActiveSlide((prev) => (prev === 0 ? 1 : 0))} aria-label="Next" />
|
||||
<button type="button" className="owl-prev" onClick={() => setActiveSlide((prev) => (prev === 0 ? 1 : 0))} aria-label="Previous" />
|
||||
</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" }}>
|
||||
<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.35s ease",
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="owl-dots" style={{ display: "none" }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,208 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { StaggerChildren } from "@/animations/Reveal";
|
||||
|
||||
const SERVICE_LIST = [
|
||||
"Doormile Wings",
|
||||
"Express Cargo",
|
||||
"Cold Chain Logistics",
|
||||
"Customs Clearance",
|
||||
"Charter Solutions",
|
||||
"Door-to-Door Delivery",
|
||||
];
|
||||
|
||||
export default function AirFreightServices() {
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
.af3-section {
|
||||
background: #1F1F1F;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.af3-inner {
|
||||
max-width: 1480px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.af3-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 0;
|
||||
}
|
||||
.af3-col {
|
||||
padding: 72px 50px 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid rgba(255,255,255,0.08);
|
||||
min-height: 505px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.af3-col:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.af3-label {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: #c01227;
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
.af3-heading {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: clamp(20px, 1.8vw, 26px);
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
color: #ffffff;
|
||||
margin: 0 0 14px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.af3-divider {
|
||||
height: 1px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
margin: 45px 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.af3-desc {
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
color: rgba(255,255,255,0.55);
|
||||
margin: 0;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.af3-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.af3-section .af3-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 0;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: rgba(255,255,255,0.75);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
transition: color 0.3s ease;
|
||||
cursor: default;
|
||||
}
|
||||
.af3-section .af3-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.af3-section .af3-list li:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
.af3-section .af3-list li::before {
|
||||
content: none;
|
||||
}
|
||||
.af3-list-arrow {
|
||||
flex: 0 0 auto;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-right: 2px solid #c01227;
|
||||
border-top: 2px solid #c01227;
|
||||
transform: rotate(45deg);
|
||||
margin-top: 1px;
|
||||
}
|
||||
.af3-stat-wrap {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 14px;
|
||||
margin-top: auto;
|
||||
}
|
||||
.af3-stat-number {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: clamp(42px, 4vw, 64px);
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
.af3-stat-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: rgba(255,255,255,0.5);
|
||||
line-height: 1.4;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.af3-col {
|
||||
padding: 40px 30px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.af3-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.af3-col {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
padding: 40px 20px;
|
||||
min-height: unset;
|
||||
}
|
||||
.af3-col:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.af3-divider {
|
||||
margin: 30px 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.af3-col {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
}
|
||||
`}} />
|
||||
|
||||
<div className="af3-section">
|
||||
<div className="af3-inner">
|
||||
<StaggerChildren className="af3-grid" stagger={0.1} yOffset={30} triggerOnce>
|
||||
|
||||
{/* Column 1 – Products & Services */}
|
||||
<div className="af3-col">
|
||||
<div className="af3-label">/ Products & Services /</div>
|
||||
<h5 className="af3-heading">Products & Services</h5>
|
||||
<p className="af3-desc">Comprehensive air cargo and logistics solutions built for businesses that demand speed, reliability, and complete cargo visibility.</p>
|
||||
<div className="af3-divider" />
|
||||
<ul className="af3-list">
|
||||
{SERVICE_LIST.map((item) => (
|
||||
<li key={item}>
|
||||
<span className="af3-list-arrow" aria-hidden="true" />
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Column 2 – Our Specialty */}
|
||||
<div className="af3-col">
|
||||
<div className="af3-label">/ Our Specialty /</div>
|
||||
<h5 className="af3-heading">Doormile Wings</h5>
|
||||
<p className="af3-desc">Time-critical shipments handled with the highest priority. Guaranteed next-flight-out scheduling, same-day airport handoff, and binding SLA commitments on every air cargo booking.</p>
|
||||
<div className="af3-divider" />
|
||||
<p className="af3-desc">Our IATA-certified team manages special commodity requirements including temperature control, security packaging, and regulatory documentation for every cargo category.</p>
|
||||
</div>
|
||||
|
||||
{/* Column 3 – Our Reach */}
|
||||
<div className="af3-col">
|
||||
<div className="af3-label">/ Our Reach /</div>
|
||||
<h5 className="af3-heading">Global Network</h5>
|
||||
<p className="af3-desc">Doormile operates an integrated air and ground logistics network spanning domestic hubs and international trade lanes — giving your cargo a direct path to any destination.</p>
|
||||
<div className="af3-divider" />
|
||||
<div className="af3-stat-wrap">
|
||||
<div className="af3-stat-number">500+</div>
|
||||
<div className="af3-stat-label">Tonnes<br />monthly</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</StaggerChildren>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,250 +0,0 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { ScrollReveal } from "@/animations/Reveal";
|
||||
|
||||
const ICON_BOXES = [
|
||||
{
|
||||
title: "Doormile Wings Express",
|
||||
desc: "Time-critical shipments handled with next-flight-out scheduling and binding SLA commitments. Priority customs processing at every origin and destination airport.",
|
||||
},
|
||||
{
|
||||
title: "Ground Handoff Network",
|
||||
desc: "Seamless air-to-ground integration ensures your cargo transitions from the airport terminal to last-mile delivery without gaps, delays, or visibility breaks.",
|
||||
},
|
||||
{
|
||||
title: "Temperature Cargo",
|
||||
desc: "End-to-end cold chain management for pharmaceuticals, perishables, and biological cargo — IATA CEIV Pharma compliant with continuous temperature logging.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function AirFreightWorkflow() {
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
.afw-section {
|
||||
background: #1F1F1F;
|
||||
padding: 0 20px;
|
||||
border-radius: 0 0 25px 25px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.afw-inner {
|
||||
padding-top: 120px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.afw-label {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.4);
|
||||
margin: 0;
|
||||
}
|
||||
.afw-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin-top: 60px;
|
||||
}
|
||||
.afw-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.logico-front-end .afw-section h3.afw-heading {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: clamp(24px, 2.8vw, 44px);
|
||||
font-weight: 800;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.03em;
|
||||
text-transform: uppercase;
|
||||
color: #FFFFFF;
|
||||
-webkit-text-fill-color: #FFFFFF;
|
||||
margin: 0;
|
||||
max-width: 420px;
|
||||
}
|
||||
.afw-left-img {
|
||||
margin-top: 67px;
|
||||
border-radius: 25px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
aspect-ratio: 626 / 692;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.afw-right {
|
||||
padding-left: 100px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.afw-map {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
opacity: 0.05;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.afw-boxes {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.afw-icon-box {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
}
|
||||
.afw-icon-wrap {
|
||||
flex-shrink: 0;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
background: #c01227;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.afw-icon-wrap svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
stroke: currentColor;
|
||||
}
|
||||
.afw-icon-content {
|
||||
flex: 1;
|
||||
}
|
||||
.logico-front-end .afw-section h4.afw-box-title {
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
color: #FFFFFF;
|
||||
-webkit-text-fill-color: #FFFFFF;
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
.afw-box-desc {
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
color: rgba(255,255,255,0.6);
|
||||
margin: 0;
|
||||
}
|
||||
.afw-divider {
|
||||
border: none;
|
||||
border-top: 1px solid rgba(255,255,255,0.12);
|
||||
margin: 38px 0;
|
||||
}
|
||||
.afw-cta-wrap {
|
||||
margin-top: 8px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.logico-front-end .afw-section .logico-alter-button {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: #FFFFFF !important;
|
||||
border-color: rgba(255,255,255,0.3) !important;
|
||||
}
|
||||
.logico-front-end .afw-section .logico-alter-button:hover {
|
||||
background: #FFFFFF !important;
|
||||
color: #1F1F1F !important;
|
||||
border-color: #FFFFFF !important;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.afw-right { padding-left: 60px; }
|
||||
}
|
||||
@media (max-width: 1020px) {
|
||||
.afw-grid { grid-template-columns: 1fr; gap: 60px; }
|
||||
.afw-right { padding-left: 0; }
|
||||
.afw-left-img { max-width: 500px; margin-top: 40px; }
|
||||
.afw-inner { padding-top: 80px; padding-bottom: 70px; }
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.afw-inner { padding-top: 60px; padding-bottom: 60px; }
|
||||
.afw-left-img { aspect-ratio: 16 / 9; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.afw-section { padding: 0 20px; border-radius: 0 0 16px 16px; }
|
||||
.afw-inner { padding-top: 40px; padding-bottom: 50px; }
|
||||
.afw-icon-box { gap: 14px; }
|
||||
.logico-front-end .afw-section h4.afw-box-title { font-size: 17px; }
|
||||
}
|
||||
`}} />
|
||||
|
||||
<section className="afw-section">
|
||||
<div className="afw-inner dm-section-container">
|
||||
<ScrollReveal delay={0.05} yOffset={20}>
|
||||
<div className="afw-label">/ Special Things /</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="afw-grid">
|
||||
{/* Left column: heading + image */}
|
||||
<ScrollReveal delay={0.08} yOffset={40}>
|
||||
<div className="afw-left">
|
||||
<h3 className="afw-heading">
|
||||
Special things which we do for our clients
|
||||
</h3>
|
||||
<div className="afw-left-img">
|
||||
<Image
|
||||
src="/images/air-freight-pic-1.jpg"
|
||||
alt="Doormile Wings cargo operations"
|
||||
fill
|
||||
style={{ objectFit: "cover", objectPosition: "center" }}
|
||||
sizes="(max-width: 768px) 100vw, 45vw"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* Right column: world map bg + icon boxes + button */}
|
||||
<ScrollReveal delay={0.18} yOffset={40}>
|
||||
<div className="afw-right">
|
||||
{/* World map background */}
|
||||
<Image
|
||||
src="/images/bg-map.png"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
fill={false}
|
||||
width={965}
|
||||
height={474}
|
||||
className="afw-map"
|
||||
/>
|
||||
|
||||
<div className="afw-boxes">
|
||||
{ICON_BOXES.map((box, i) => (
|
||||
<div key={box.title}>
|
||||
<div className="afw-icon-box">
|
||||
<div className="afw-icon-wrap" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polyline points="5 12 12 5 19 12" />
|
||||
<polyline points="5 19 12 12 19 19" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="afw-icon-content">
|
||||
<h4 className="afw-box-title">{box.title}</h4>
|
||||
<p className="afw-box-desc">{box.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
{i < ICON_BOXES.length - 1 && (
|
||||
<hr className="afw-divider" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="afw-cta-wrap" style={{ marginTop: "48px" }}>
|
||||
<Link href="/contact" className="logico-alter-button">
|
||||
Explore More
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
165
src/components/sections/WingsFeatureGrid.tsx
Normal file
165
src/components/sections/WingsFeatureGrid.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
|
||||
|
||||
const FEATURES = [
|
||||
{
|
||||
title: "AI Decision Engine",
|
||||
desc: "MileTruth™ AI continuously forecasts demand and optimizes routing and load decisions in real time.",
|
||||
icon: (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M12 2a4 4 0 0 1 4 4v1a4 4 0 0 1-1.2 2.86A4 4 0 0 1 16 13v1a4 4 0 0 1-4 4 4 4 0 0 1-4-4v-1a4 4 0 0 1 1.2-3.14A4 4 0 0 1 8 7V6a4 4 0 0 1 4-4Z" />
|
||||
<path d="M9 21h6M12 18v3" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Real-Time Visibility",
|
||||
desc: "Live shipment tracking keeps shippers, ground teams, and customers updated at every stage.",
|
||||
icon: (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Faster Regional Reach",
|
||||
desc: "A dedicated network linking major regional capitals, built for speed rather than passenger schedules.",
|
||||
icon: (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="13 6 19 12 13 18" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Reliable Scheduled Operations",
|
||||
desc: "Dedicated freighter capacity with consistent schedules — not subject to passenger-belly bumping.",
|
||||
icon: (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<rect x="3" y="4" width="18" height="18" rx="3" />
|
||||
<line x1="16" y1="2" x2="16" y2="6" />
|
||||
<line x1="8" y1="2" x2="8" y2="6" />
|
||||
<line x1="3" y1="10" x2="21" y2="10" />
|
||||
<path d="M9 16l2 2 4-4" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export default function WingsFeatureGrid() {
|
||||
return (
|
||||
<>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.wfg-section {
|
||||
background: #ffffff;
|
||||
padding: var(--space-section-lg, 80px) clamp(20px, 5vw, 40px);
|
||||
}
|
||||
|
||||
.wfg-header {
|
||||
margin: 0 auto 48px auto;
|
||||
max-width: 720px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wfg-eyebrow {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(17, 17, 17, 0.45);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.wfg-title {
|
||||
font-size: clamp(28px, 3.2vw, 46px) !important;
|
||||
font-weight: 800 !important;
|
||||
letter-spacing: -0.03em !important;
|
||||
line-height: 1.15 !important;
|
||||
text-transform: none !important;
|
||||
color: #111111 !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wfg-grid {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.wfg-card {
|
||||
min-width: 0;
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(17, 17, 17, 0.1);
|
||||
border-radius: 20px;
|
||||
padding: 30px 26px;
|
||||
transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
}
|
||||
|
||||
.wfg-card:hover {
|
||||
border-color: #c8102e;
|
||||
box-shadow: 0 20px 40px rgba(200, 16, 46, 0.08);
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.wfg-icon {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
background: rgba(200, 16, 46, 0.06);
|
||||
color: #c8102e;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.wfg-card-title {
|
||||
font-size: 16.5px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.3 !important;
|
||||
text-transform: none !important;
|
||||
color: #111111 !important;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.wfg-card-desc {
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
color: rgba(17, 17, 17, 0.6);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.wfg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.wfg-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<section className="wfg-section" id="wings-features">
|
||||
<ScrollReveal delay={0.05} duration={0.75} yOffset={25} className="wfg-header">
|
||||
<div className="wfg-eyebrow">/ Why Businesses Choose Doormile Wings /</div>
|
||||
<h2 className="wfg-title">Built to be depended on</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<StaggerChildren stagger={0.1} duration={0.7} yOffset={30} className="wfg-grid">
|
||||
{FEATURES.map((f) => (
|
||||
<div key={f.title} className="wfg-card">
|
||||
<div className="wfg-icon" aria-hidden="true">{f.icon}</div>
|
||||
<h3 className="wfg-card-title">{f.title}</h3>
|
||||
<p className="wfg-card-desc">{f.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</StaggerChildren>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
96
src/components/sections/WingsFinalCTA.tsx
Normal file
96
src/components/sections/WingsFinalCTA.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export default function WingsFinalCTA() {
|
||||
return (
|
||||
<>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.wfcta-box {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* Placeholder — swap for a sourced photo/illustration with a dark
|
||||
overlay once real Doormile Wings imagery exists. */
|
||||
background: linear-gradient(150deg, #0b0b0d 0%, #1f1f1f 60%, #0b0b0d 100%) !important;
|
||||
padding: clamp(72px, 9vw, 120px) clamp(24px, 5vw, 48px) !important;
|
||||
}
|
||||
|
||||
.wfcta-box::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
background: radial-gradient(60% 80% at 50% 0%, rgba(200,16,46,0.18) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wfcta-box .we-cta-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.wfcta-title {
|
||||
font-size: clamp(32px, 4.5vw, 60px) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.wfcta-title em {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.wfcta-sub {
|
||||
max-width: 640px;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.wfcta-container {
|
||||
margin-top: 40px !important;
|
||||
margin-bottom: 40px !important;
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
.wfcta-box {
|
||||
padding: 48px 20px !important;
|
||||
border-radius: 22px !important;
|
||||
}
|
||||
.wfcta-title {
|
||||
font-size: clamp(28px, 6vw, 38px) !important;
|
||||
line-height: 1.25 !important;
|
||||
margin-bottom: 16px !important;
|
||||
}
|
||||
.wfcta-sub {
|
||||
font-size: 15px !important;
|
||||
line-height: 1.5 !important;
|
||||
margin-bottom: 24px !important;
|
||||
}
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
<div className="we-container wfcta-container" id="wings-final-cta">
|
||||
<div className="we-cta wfcta-box">
|
||||
<div className="we-cta-inner">
|
||||
<h2 className="we-cta-title wfcta-title">
|
||||
Ready to move at<br />
|
||||
<em>the speed of now?</em>
|
||||
</h2>
|
||||
<p className="we-cta-sub wfcta-sub">
|
||||
Partner with Doormile Wings for same-day air logistics across India’s major
|
||||
regional capitals.
|
||||
</p>
|
||||
<div className="we-cta-btns">
|
||||
<Link href="/contact" className="btn-we-primary" style={{ textDecoration: "none" }}>
|
||||
Get Started
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" />
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
92
src/components/sections/WingsFleetStrategy.tsx
Normal file
92
src/components/sections/WingsFleetStrategy.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
import EVSection, { type EVFeature, type EVStat } from "./EVSection";
|
||||
|
||||
// Placeholder banner — plain dark gradient, no photography (no ATR72/Q400
|
||||
// or airport-hub imagery exists in the repo yet). Swap `bannerImage` for a
|
||||
// sourced photo later; this keeps the section shippable in the meantime.
|
||||
// EVSection embeds this value in an UNQUOTED CSS url(...).
|
||||
|
||||
const METRICS: EVStat[] = [
|
||||
{ value: 8.2, decimals: 1, suffix: "t", label: "ATR72 Payload" },
|
||||
{ value: 1600, suffix: "km", label: "ATR72 Range" },
|
||||
{ value: 8.6, decimals: 1, suffix: "t", label: "Q400 Payload" },
|
||||
{ value: 667, suffix: "km/h", label: "Q400 Speed" },
|
||||
];
|
||||
|
||||
const FEATURES: EVFeature[] = [
|
||||
{
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M22 12h-6l-4-9-2 1 3 8H5l-2-3-1.5.6L3 14l1.5 4.4L6 18l-2-3h8l3 8 2-1-3-8h6z" />
|
||||
</svg>
|
||||
),
|
||||
title: "Dedicated Freighter Capacity",
|
||||
desc: "Purpose-built cargo lift, not passenger-belly space competing with baggage.",
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="6" cy="6" r="2.5" />
|
||||
<circle cx="18" cy="6" r="2.5" />
|
||||
<circle cx="12" cy="18" r="2.5" />
|
||||
<path d="M8.2 7.2 10 16M15.8 7.2 14 16M8.5 6h7" />
|
||||
</svg>
|
||||
),
|
||||
title: "Regional Route Design",
|
||||
desc: "Turboprop range and speed matched to India's major regional-capital corridors.",
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M3 3v18h18" />
|
||||
<path d="M7 14l4-4 3 3 6-7" />
|
||||
</svg>
|
||||
),
|
||||
title: "Scaling to 25 Aircraft",
|
||||
desc: "Phase 2 vision: pan-India connectivity hubs and international regional routes.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function WingsFleetStrategy() {
|
||||
return (
|
||||
<div id="wings-fleet">
|
||||
<EVSection
|
||||
bannerImage="/images/pahse1.png"
|
||||
cardNumber="Phase 1"
|
||||
cardTitle="Initial Fleet"
|
||||
cardSubtitle="2x ATR72 + 1x Q400 Freighters"
|
||||
eyebrow="/ Fleet Strategy /"
|
||||
titleLead="Purpose-Built for "
|
||||
titleAccent="Regional Speed"
|
||||
features={FEATURES}
|
||||
metrics={METRICS}
|
||||
cardsHeading="FLEET SPECIFICATIONS"
|
||||
cardsTheme={{ accent: "#c8102e", accent2: "#ff6a3d", glow: "rgba(200,16,46,0.22)" }}
|
||||
badges={[
|
||||
{ value: "3", label: "Phase 1 Aircraft" },
|
||||
{ value: "25", label: "Phase 2 Vision" },
|
||||
]}
|
||||
mediaSlot={
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
minHeight: 420,
|
||||
background: "linear-gradient(150deg, #17171b 0%, #0b0b0d 100%)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
aria-hidden="true"
|
||||
>
|
||||
{/* Placeholder — swap for sourced ATR72/Q400 photography or a
|
||||
designed illustration once available. */}
|
||||
<svg width="88" height="88" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.15)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M22 12h-6l-4-9-2 1 3 8H5l-2-3-1.5.6L3 14l1.5 4.4L6 18l-2-3h8l3 8 2-1-3-8h6z" />
|
||||
</svg>
|
||||
</div>
|
||||
}
|
||||
ariaLabel="Doormile Wings fleet strategy"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
576
src/components/sections/WingsHero.tsx
Normal file
576
src/components/sections/WingsHero.tsx
Normal file
@@ -0,0 +1,576 @@
|
||||
"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;
|
||||
}
|
||||
|
||||
gsap.fromTo(
|
||||
heading,
|
||||
{ y: 55, opacity: 0, scale: 0.95 },
|
||||
{ y: 0, opacity: 1, scale: 1, duration: 1.1, ease: "power4.out" }
|
||||
);
|
||||
|
||||
gsap.fromTo(
|
||||
text,
|
||||
{ y: 30, opacity: 0 },
|
||||
{ y: 0, opacity: 1, duration: 0.95, ease: "power3.out", delay: 0.25 }
|
||||
);
|
||||
|
||||
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-heroslider3.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.62), rgba(0, 0, 0, 0.16)), url('/images/wings-heroslider3.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.62), rgba(0, 0, 0, 0.16)), 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: 1040px !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: 760px !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;
|
||||
}
|
||||
}
|
||||
|
||||
@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: 620px !important;
|
||||
}
|
||||
|
||||
.wings-hero-page .owl-carousel.owl-theme .content-item {
|
||||
width: 100% !important;
|
||||
min-height: 620px !important;
|
||||
height: 620px !important;
|
||||
border-radius: 25px !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.wings-hero-page .slide-content {
|
||||
min-height: 620px !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: 560px !important;
|
||||
}
|
||||
|
||||
.wings-hero-page .owl-carousel.owl-theme .content-item,
|
||||
.wings-hero-page .slide-content {
|
||||
min-height: 560px !important;
|
||||
height: 560px !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(24px, 7.2vw, 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">
|
||||
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
|
||||
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">
|
||||
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>
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
306
src/components/sections/WingsHowItWorks.tsx
Normal file
306
src/components/sections/WingsHowItWorks.tsx
Normal file
@@ -0,0 +1,306 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ScrollReveal } from "@/animations/Reveal";
|
||||
|
||||
const STEPS = [
|
||||
{
|
||||
label: "Local Pickup",
|
||||
desc: "Fast, on-demand first-mile logistics dispatched by electric vehicle.",
|
||||
icon: (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M3 13h13l3 4h2v3H3z" />
|
||||
<circle cx="7" cy="20" r="1.6" />
|
||||
<circle cx="16" cy="20" r="1.6" />
|
||||
<path d="M6 13V8a1 1 0 0 1 1-1h5l3 6" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Airport Clearance",
|
||||
desc: "Automated screening, grouping, and rapid cross-docking at the hub.",
|
||||
icon: (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z" />
|
||||
<path d="m9 12 2 2 4-4" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Air Transit",
|
||||
desc: "Optimized cargo flights bypass surface congestion on our regional fleet.",
|
||||
icon: (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M22 12h-6l-4-9-2 1 3 8H5l-2-3-1.5.6L3 14l1.5 4.4L6 18l-2-3h8l3 8 2-1-3-8h6z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Destination Hub",
|
||||
desc: "Immediate de-consolidation and screening upon arrival.",
|
||||
icon: (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<rect x="4" y="10" width="16" height="11" rx="1" />
|
||||
<path d="M9 21v-6h6v6M4 10 12 3l8 7" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "EV Last-Mile",
|
||||
desc: "Zero-emission electric vehicles complete the final delivery.",
|
||||
icon: (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M3 13h13l3 4h2v3H3z" />
|
||||
<circle cx="7" cy="20" r="1.6" />
|
||||
<circle cx="16" cy="20" r="1.6" />
|
||||
<path d="M6 13V8a1 1 0 0 1 1-1h5l3 6" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export default function WingsHowItWorks() {
|
||||
const [active, setActive] = useState(0);
|
||||
const fillPct = ((active + 1) / STEPS.length) * 100;
|
||||
|
||||
return (
|
||||
<>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.whw-section {
|
||||
background: #09090b;
|
||||
padding: var(--space-section-lg, 80px) clamp(20px, 5vw, 40px);
|
||||
}
|
||||
|
||||
.whw-header {
|
||||
margin: 0 auto 56px auto;
|
||||
max-width: 720px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.whw-eyebrow {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: #c8102e;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.whw-title {
|
||||
font-size: clamp(28px, 3.2vw, 46px) !important;
|
||||
font-weight: 800 !important;
|
||||
letter-spacing: -0.03em !important;
|
||||
line-height: 1.15 !important;
|
||||
text-transform: none !important;
|
||||
color: #ffffff !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.whw-inner {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.whw-track-wrap {
|
||||
position: relative;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 2px;
|
||||
margin: 0 auto 44px auto;
|
||||
}
|
||||
|
||||
.whw-track-fill {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
background: #c8102e;
|
||||
box-shadow: 0 0 10px #c8102e;
|
||||
border-radius: 2px;
|
||||
transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.whw-nodes {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.whw-node {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #18181b;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
|
||||
}
|
||||
|
||||
.whw-node.is-active {
|
||||
background: #c8102e;
|
||||
border-color: #ffffff;
|
||||
box-shadow: 0 0 10px #c8102e;
|
||||
}
|
||||
|
||||
.whw-steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.whw-step {
|
||||
min-width: 0;
|
||||
padding: 22px 18px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.35s ease, background-color 0.35s ease, transform 0.35s ease;
|
||||
}
|
||||
|
||||
.whw-step.is-active {
|
||||
border-color: rgba(200, 16, 46, 0.5);
|
||||
background: rgba(200, 16, 46, 0.06);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.whw-step-num {
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1px;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.whw-step.is-active .whw-step-num {
|
||||
color: #c8102e;
|
||||
}
|
||||
|
||||
.whw-step-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.whw-step.is-active .whw-step-icon {
|
||||
background: rgba(200, 16, 46, 0.15);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.whw-step-label {
|
||||
font-size: 15px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.3 !important;
|
||||
text-transform: none !important;
|
||||
color: #ffffff !important;
|
||||
margin: 0 0 6px 0;
|
||||
}
|
||||
|
||||
.whw-step-desc {
|
||||
font-size: 12.5px;
|
||||
line-height: 1.5;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.whw-track-wrap { display: none; }
|
||||
|
||||
.whw-steps {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.whw-steps::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
width: 2px;
|
||||
border-radius: 2px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.whw-step {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.whw-step::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -27px;
|
||||
top: 24px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #18181b;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.whw-step.is-active::before {
|
||||
background: #c8102e;
|
||||
border-color: #ffffff;
|
||||
box-shadow: 0 0 10px rgba(200, 16, 46, 0.7);
|
||||
}
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<section className="whw-section" id="wings-how-it-works">
|
||||
<ScrollReveal delay={0.05} duration={0.75} yOffset={25} className="whw-header">
|
||||
<div className="whw-eyebrow">/ How It Works /</div>
|
||||
<h2 className="whw-title">Pickup to delivery, one connected flow</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1} duration={0.8} yOffset={30} className="whw-inner">
|
||||
<div className="whw-track-wrap" aria-hidden="true">
|
||||
<div className="whw-track-fill" style={{ width: `${fillPct}%` }} />
|
||||
<div className="whw-nodes">
|
||||
{STEPS.map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`whw-node${i <= active ? " is-active" : ""}`}
|
||||
style={{ left: `${((i + 0.5) / STEPS.length) * 100}%` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="whw-steps">
|
||||
{STEPS.map((step, i) => (
|
||||
<div
|
||||
key={step.label}
|
||||
className={`whw-step${i === active ? " is-active" : ""}`}
|
||||
onMouseEnter={() => setActive(i)}
|
||||
onClick={() => setActive(i)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") setActive(i);
|
||||
}}
|
||||
>
|
||||
<div className="whw-step-num">0{i + 1}</div>
|
||||
<div className="whw-step-icon" aria-hidden="true">{step.icon}</div>
|
||||
<h3 className="whw-step-label">{step.label}</h3>
|
||||
<p className="whw-step-desc">{step.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
212
src/components/sections/WingsIndustries.tsx
Normal file
212
src/components/sections/WingsIndustries.tsx
Normal file
@@ -0,0 +1,212 @@
|
||||
import { ScrollReveal } from "@/animations/Reveal";
|
||||
|
||||
const INDUSTRIES = [
|
||||
{
|
||||
title: "Quick Commerce",
|
||||
challenge: "Sub-3-hour delivery windows for dark stores and micro-warehouses.",
|
||||
solution: "Dedicated same-day air capacity linking metros to fulfillment hubs.",
|
||||
},
|
||||
{
|
||||
title: "Express B2B Cargo",
|
||||
challenge: "Time-critical industrial parts and components stuck on slow trunk routes.",
|
||||
solution: "Rapid airport-to-airport transport between major economic nodes.",
|
||||
},
|
||||
{
|
||||
title: "Healthcare & Pharma",
|
||||
challenge: "Temperature-sensitive, compliance-critical shipments with zero margin for error.",
|
||||
solution: "Active and passive cold-chain packaging with full chain-of-custody tracking.",
|
||||
},
|
||||
{
|
||||
title: "Cold Chain Logistics",
|
||||
challenge: "Perishables and fresh goods that can't survive slow surface transit.",
|
||||
solution: "Precision temperature tracking matched to airline-speed transit.",
|
||||
},
|
||||
{
|
||||
title: "High-Value Cargo",
|
||||
challenge: "Zero tolerance for loss, tampering, or delay on high-value shipments.",
|
||||
solution: "Maximum-security handling with real-time electronic custody tracking.",
|
||||
},
|
||||
{
|
||||
title: "E-Commerce Logistics",
|
||||
challenge: "Next-day and same-day fulfillment expectations across tier-1 and tier-2 cities.",
|
||||
solution: "Direct sorting-hub-to-airport clearance network for faster regional delivery.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function WingsIndustries() {
|
||||
return (
|
||||
<>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.wind-section {
|
||||
background: #fafafa;
|
||||
padding: var(--space-section-lg, 80px) clamp(20px, 5vw, 40px);
|
||||
}
|
||||
|
||||
.wind-header {
|
||||
margin: 0 auto 48px auto;
|
||||
max-width: 720px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wind-eyebrow {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(17, 17, 17, 0.45);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.wind-title {
|
||||
font-size: clamp(28px, 3.2vw, 46px) !important;
|
||||
font-weight: 800 !important;
|
||||
letter-spacing: -0.03em !important;
|
||||
line-height: 1.15 !important;
|
||||
text-transform: none !important;
|
||||
color: #111111 !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wind-grid {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.wind-card {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
aspect-ratio: 4 / 5;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(150deg, #17171b 0%, #0b0b0d 100%);
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.wind-card-wash {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(160deg, rgba(200, 16, 46, 0.35) 0%, rgba(200, 16, 46, 0) 60%);
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.wind-card:hover .wind-card-wash {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.wind-card-default {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.wind-card:hover .wind-card-default {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wind-card .wind-card-default-title {
|
||||
font-size: 20px !important;
|
||||
font-weight: 800 !important;
|
||||
line-height: 1.3 !important;
|
||||
text-transform: none !important;
|
||||
color: #ffffff !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wind-card-hover {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 26px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
gap: 14px;
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
transition: opacity 0.35s ease, transform 0.35s ease;
|
||||
}
|
||||
|
||||
.wind-card:hover .wind-card-hover {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.wind-card .wind-card-hover-title {
|
||||
font-size: 19px !important;
|
||||
font-weight: 800 !important;
|
||||
line-height: 1.3 !important;
|
||||
text-transform: none !important;
|
||||
color: #ffffff !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wind-card-label {
|
||||
font-size: 10.5px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1.2px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.wind-card-text {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.wind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.wind-grid { grid-template-columns: 1fr; }
|
||||
.wind-card { aspect-ratio: 3 / 4; }
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<section className="wind-section" id="wings-industries">
|
||||
<ScrollReveal delay={0.05} duration={0.75} yOffset={25} className="wind-header">
|
||||
<div className="wind-eyebrow">/ Industries We Serve /</div>
|
||||
<h2 className="wind-title">Built for the shipments that can’t wait</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.1} duration={0.8} yOffset={30} className="wind-grid">
|
||||
{INDUSTRIES.map((ind) => (
|
||||
<div key={ind.title} className="wind-card">
|
||||
<div className="wind-card-wash" aria-hidden="true" />
|
||||
|
||||
<div className="wind-card-default">
|
||||
<h3 className="wind-card-default-title">{ind.title}</h3>
|
||||
</div>
|
||||
|
||||
<div className="wind-card-hover">
|
||||
<h3 className="wind-card-hover-title">{ind.title}</h3>
|
||||
<div>
|
||||
<p className="wind-card-label">Challenge</p>
|
||||
<p className="wind-card-text">{ind.challenge}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="wind-card-label">Doormile Wings</p>
|
||||
<p className="wind-card-text">{ind.solution}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</ScrollReveal>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
160
src/components/sections/WingsInfrastructure.tsx
Normal file
160
src/components/sections/WingsInfrastructure.tsx
Normal file
@@ -0,0 +1,160 @@
|
||||
import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
|
||||
|
||||
const CARDS = [
|
||||
{
|
||||
title: "Airport Cargo Hubs",
|
||||
desc: "Near-airport clearance hubs instead of standalone warehouses — closer to the tarmac, faster to the aircraft.",
|
||||
icon: (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Cross-Docking",
|
||||
desc: "Screening, grouping, and consolidation happen in one motion, minimizing dwell time between arrival and departure.",
|
||||
icon: (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M3 7h7l2 3h9M3 7v10h18V10" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Asset-Light Network",
|
||||
desc: "Leased terminal space that flexes with demand, keeping the network nimble as new routes come online.",
|
||||
icon: (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<rect x="3" y="3" width="7" height="7" rx="1" />
|
||||
<rect x="14" y="3" width="7" height="7" rx="1" />
|
||||
<rect x="3" y="14" width="7" height="7" rx="1" />
|
||||
<rect x="14" y="14" width="7" height="7" rx="1" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Scalable Operations",
|
||||
desc: "Modular ground infrastructure built to expand city by city without slowing down day-to-day operations.",
|
||||
icon: (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M3 21V9l6-4 6 4v12M9 21V13h6v8" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export default function WingsInfrastructure() {
|
||||
return (
|
||||
<>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.wia-section {
|
||||
background: #09090b;
|
||||
padding: var(--space-section, 64px) clamp(20px, 5vw, 40px);
|
||||
}
|
||||
|
||||
.wia-header {
|
||||
margin: 0 auto 44px auto;
|
||||
max-width: 720px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wia-eyebrow {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.wia-title {
|
||||
font-size: clamp(26px, 3vw, 40px) !important;
|
||||
font-weight: 800 !important;
|
||||
letter-spacing: -0.03em !important;
|
||||
line-height: 1.2 !important;
|
||||
text-transform: none !important;
|
||||
color: #ffffff !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wia-grid {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.wia-card {
|
||||
min-width: 0;
|
||||
padding: 28px 24px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.07);
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
transition: border-color 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.wia-card:hover {
|
||||
border-color: rgba(255, 255, 255, 0.14);
|
||||
background: rgba(255, 255, 255, 0.035);
|
||||
}
|
||||
|
||||
.wia-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.wia-card-title {
|
||||
font-size: 15.5px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.3 !important;
|
||||
text-transform: none !important;
|
||||
color: #ffffff !important;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.wia-card-desc {
|
||||
font-size: 13.5px;
|
||||
line-height: 1.55;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.wia-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.wia-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<section className="wia-section" id="wings-infrastructure">
|
||||
<ScrollReveal delay={0.05} duration={0.7} yOffset={20} className="wia-header">
|
||||
<div className="wia-eyebrow">/ Infrastructure /</div>
|
||||
<h2 className="wia-title">A network built to move, not to sit idle</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<StaggerChildren stagger={0.08} duration={0.6} yOffset={20} className="wia-grid">
|
||||
{CARDS.map((c) => (
|
||||
<div key={c.title} className="wia-card">
|
||||
<div className="wia-icon" aria-hidden="true">{c.icon}</div>
|
||||
<h3 className="wia-card-title">{c.title}</h3>
|
||||
<p className="wia-card-desc">{c.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</StaggerChildren>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
392
src/components/sections/WingsMileTruth.tsx
Normal file
392
src/components/sections/WingsMileTruth.tsx
Normal file
@@ -0,0 +1,392 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
|
||||
|
||||
const CAPABILITIES = [
|
||||
{
|
||||
title: "Demand Forecasting",
|
||||
desc: "AI-driven forward projection of cargo demand, preemptively positioning aircraft and ground capacity.",
|
||||
icon: (
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M3 3v18h18" />
|
||||
<path d="M7 14l4-4 3 3 6-7" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Dynamic Pricing",
|
||||
desc: "Real-time rate adjustments that track market capacity fluctuations and optimize yield.",
|
||||
icon: (
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M9.5 9.5c0-1.4 1.1-2.3 2.5-2.3s2.5.9 2.5 2c0 1.6-2.2 1.8-2.5 3.3M12 17h.01" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Route Optimization",
|
||||
desc: "Dynamic scheduling for ground EV pickups and flights that bypasses congestion for the fastest path.",
|
||||
icon: (
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="13 6 19 12 13 18" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Load Balancing",
|
||||
desc: "Automated weight-and-balance modeling for optimal, safe aircraft load layout within minutes.",
|
||||
icon: (
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M12 3v18M5 8l7-5 7 5M5 8v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Predictive Maintenance",
|
||||
desc: "Continuous telemetry monitoring triggers preemptive alerts, drastically reducing aircraft downtime.",
|
||||
icon: (
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M22 12h-6l-4 8-4-16-4 8H2" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Real-Time Tracking",
|
||||
desc: "End-to-end sensor monitoring keeps shippers, airline, and EV operators updated on exact shipment state.",
|
||||
icon: (
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export default function WingsMileTruth() {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
|
||||
|
||||
let width = (canvas.width = canvas.offsetWidth);
|
||||
let height = (canvas.height = canvas.offsetHeight);
|
||||
const handleResize = () => {
|
||||
width = canvas.width = canvas.offsetWidth;
|
||||
height = canvas.height = canvas.offsetHeight;
|
||||
};
|
||||
window.addEventListener("resize", handleResize);
|
||||
|
||||
const nodes = [
|
||||
{ x: 0.12, y: 0.5 },
|
||||
{ x: 0.34, y: 0.25 },
|
||||
{ x: 0.56, y: 0.65 },
|
||||
{ x: 0.78, y: 0.3 },
|
||||
{ x: 0.92, y: 0.6 },
|
||||
];
|
||||
const particles = [
|
||||
{ from: 0, to: 1, t: 0, speed: 0.006 },
|
||||
{ from: 1, to: 2, t: 0.4, speed: 0.005 },
|
||||
{ from: 2, to: 3, t: 0.15, speed: 0.007 },
|
||||
{ from: 3, to: 4, t: 0.6, speed: 0.005 },
|
||||
];
|
||||
|
||||
let raf: number;
|
||||
const draw = () => {
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.setLineDash([6, 6]);
|
||||
ctx.strokeStyle = "rgba(200, 16, 46, 0.16)";
|
||||
ctx.beginPath();
|
||||
for (let i = 0; i < nodes.length - 1; i++) {
|
||||
ctx.moveTo(nodes[i].x * width, nodes[i].y * height);
|
||||
ctx.lineTo(nodes[i + 1].x * width, nodes[i + 1].y * height);
|
||||
}
|
||||
ctx.stroke();
|
||||
ctx.setLineDash([]);
|
||||
|
||||
if (!reduced) {
|
||||
particles.forEach((p) => {
|
||||
p.t += p.speed;
|
||||
if (p.t >= 1) p.t = 0;
|
||||
const a = nodes[p.from];
|
||||
const b = nodes[p.to];
|
||||
const x = a.x * width + (b.x * width - a.x * width) * p.t;
|
||||
const y = a.y * height + (b.y * height - a.y * height) * p.t;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, 3.5, 0, Math.PI * 2);
|
||||
ctx.fillStyle = "#c8102e";
|
||||
ctx.shadowColor = "#c8102e";
|
||||
ctx.shadowBlur = 10;
|
||||
ctx.fill();
|
||||
ctx.shadowBlur = 0;
|
||||
});
|
||||
}
|
||||
|
||||
nodes.forEach((n) => {
|
||||
const x = n.x * width;
|
||||
const y = n.y * height;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, 7, 0, Math.PI * 2);
|
||||
ctx.fillStyle = "rgba(200, 16, 46, 0.1)";
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, 3, 0, Math.PI * 2);
|
||||
ctx.fillStyle = "rgba(255, 255, 255, 0.25)";
|
||||
ctx.fill();
|
||||
});
|
||||
|
||||
if (!reduced) raf = requestAnimationFrame(draw);
|
||||
};
|
||||
draw();
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
if (raf) cancelAnimationFrame(raf);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.wmt-section {
|
||||
position: relative;
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 auto;
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
background: #09090b;
|
||||
padding: clamp(64px, 8vw, 100px) clamp(24px, 5vw, 48px);
|
||||
}
|
||||
|
||||
.wmt-canvas {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
opacity: 0.12;
|
||||
}
|
||||
|
||||
.wmt-glow {
|
||||
position: absolute;
|
||||
width: 480px;
|
||||
height: 480px;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
filter: blur(140px);
|
||||
z-index: 0;
|
||||
opacity: 0.06;
|
||||
}
|
||||
|
||||
.wmt-glow.tl { left: -8%; top: -12%; background: radial-gradient(circle, #c8102e 0%, transparent 70%); }
|
||||
.wmt-glow.br { right: -8%; bottom: -12%; background: radial-gradient(circle, #ff3b3b 0%, transparent 70%); }
|
||||
|
||||
.wmt-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.wmt-header {
|
||||
margin: 0 auto 48px auto;
|
||||
max-width: 720px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wmt-eyebrow {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 2.5px;
|
||||
text-transform: uppercase;
|
||||
color: #c8102e;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.wmt-title {
|
||||
font-size: clamp(28px, 3.4vw, 48px) !important;
|
||||
font-weight: 800 !important;
|
||||
letter-spacing: -0.03em !important;
|
||||
line-height: 1.15 !important;
|
||||
text-transform: none !important;
|
||||
color: #ffffff !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wmt-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.wmt-card {
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 0.035);
|
||||
border: 1px solid rgba(255, 255, 255, 0.07);
|
||||
border-radius: 18px;
|
||||
padding: 26px 22px;
|
||||
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.wmt-card:hover {
|
||||
transform: translateY(-6px);
|
||||
border-color: rgba(255, 255, 255, 0.16);
|
||||
background-color: rgba(255, 255, 255, 0.055);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.wmt-card-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
background: rgba(200, 16, 46, 0.12);
|
||||
color: #ffffff;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.wmt-card-title {
|
||||
font-size: 15.5px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.3 !important;
|
||||
text-transform: none !important;
|
||||
color: #ffffff !important;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.wmt-card-desc {
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wmt-callout {
|
||||
position: relative;
|
||||
border-radius: 20px;
|
||||
padding: 34px 32px;
|
||||
background: linear-gradient(135deg, rgba(200, 16, 46, 0.95) 0%, rgba(110, 8, 26, 0.98) 100%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wmt-callout::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -1.5px;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(90deg, #c8102e, #ff3366, #ff0033, #c8102e);
|
||||
background-size: 300% 100%;
|
||||
animation: wmt-sweep 6s linear infinite;
|
||||
z-index: -1;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@keyframes wmt-sweep {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
.wmt-callout-body { max-width: 640px; }
|
||||
|
||||
.wmt-callout-title {
|
||||
font-size: 20px !important;
|
||||
font-weight: 800 !important;
|
||||
line-height: 1.3 !important;
|
||||
text-transform: none !important;
|
||||
color: #ffffff !important;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.wmt-callout-desc {
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wmt-callout-badge {
|
||||
flex-shrink: 0;
|
||||
font-size: 11.5px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
color: #ffffff;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
border-radius: 999px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.wmt-section { width: calc(100% - 24px); border-radius: 22px; }
|
||||
.wmt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.wmt-grid { grid-template-columns: 1fr; }
|
||||
.wmt-callout { flex-direction: column; align-items: flex-start; }
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<section className="wmt-section" id="wings-miletruth">
|
||||
<canvas ref={canvasRef} className="wmt-canvas" aria-hidden="true" />
|
||||
<div className="wmt-glow tl" aria-hidden="true" />
|
||||
<div className="wmt-glow br" aria-hidden="true" />
|
||||
|
||||
<div className="wmt-inner">
|
||||
<ScrollReveal delay={0.05} duration={0.75} yOffset={25} className="wmt-header">
|
||||
<div className="wmt-eyebrow">/ MileTruth™ AI /</div>
|
||||
<h2 className="wmt-title">The intelligence layer behind every delivery</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<StaggerChildren stagger={0.08} duration={0.65} yOffset={25} className="wmt-grid">
|
||||
{CAPABILITIES.map((c) => (
|
||||
<div key={c.title} className="wmt-card">
|
||||
<div className="wmt-card-icon" aria-hidden="true">{c.icon}</div>
|
||||
<h3 className="wmt-card-title">{c.title}</h3>
|
||||
<p className="wmt-card-desc">{c.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</StaggerChildren>
|
||||
|
||||
<ScrollReveal delay={0.15} duration={0.8} yOffset={25}>
|
||||
<div className="wmt-callout">
|
||||
<div className="wmt-callout-body">
|
||||
<h3 className="wmt-callout-title">Digital Twin of the Logistics Network</h3>
|
||||
<p className="wmt-callout-desc">
|
||||
A live virtual model of every ground vehicle, terminal, and flight — simulating
|
||||
what-if scenarios before bottlenecks ever form.
|
||||
</p>
|
||||
</div>
|
||||
<span className="wmt-callout-badge">SaaS Ready</span>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
289
src/components/sections/WingsRoadmap.tsx
Normal file
289
src/components/sections/WingsRoadmap.tsx
Normal file
@@ -0,0 +1,289 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
const ROADMAP_DATA = [
|
||||
{
|
||||
year: "Year 1",
|
||||
trackLeft: "10%",
|
||||
phase: "Launch Phase",
|
||||
phaseClass: "yellow",
|
||||
desc: "Establish localized clearance hubs and launch cargo services connecting 5–6 key commercial cities.",
|
||||
},
|
||||
{
|
||||
year: "Year 2",
|
||||
trackLeft: "30%",
|
||||
phase: "Network Growth",
|
||||
phaseClass: "green",
|
||||
desc: "Expand hub operations and airfield schedules, serving 15 regional and secondary cargo airports.",
|
||||
},
|
||||
{
|
||||
year: "Year 3",
|
||||
trackLeft: "50%",
|
||||
phase: "Cross-Border Nodes",
|
||||
phaseClass: "blue",
|
||||
desc: "Add international regional routes, bridging key freight corridors in South Asia.",
|
||||
},
|
||||
{
|
||||
year: "Year 5",
|
||||
trackLeft: "70%",
|
||||
phase: "Operational Scale",
|
||||
phaseClass: "blue",
|
||||
desc: "Expand to a fleet of 25 leased cargo aircraft, servicing over 50 regional airports nationwide.",
|
||||
},
|
||||
{
|
||||
year: "Year 10",
|
||||
trackLeft: "90%",
|
||||
phase: "Global Duplication",
|
||||
phaseClass: "white-pill",
|
||||
desc: "Replicate our asset-light, AI-powered logistics framework across Asia, Africa, and the Middle East.",
|
||||
glow: true,
|
||||
},
|
||||
];
|
||||
|
||||
export default function WingsRoadmap() {
|
||||
const [active, setActive] = useState(ROADMAP_DATA.length - 1);
|
||||
const fillPct = ((active + 1) / ROADMAP_DATA.length) * 100;
|
||||
|
||||
return (
|
||||
<>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.wrm-section {
|
||||
position: relative;
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 auto;
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
background: #09090b;
|
||||
padding: clamp(64px, 8vw, 100px) clamp(24px, 5vw, 48px);
|
||||
}
|
||||
|
||||
.wrm-header {
|
||||
margin: 0 auto 44px auto;
|
||||
max-width: 720px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wrm-eyebrow {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 2.5px;
|
||||
text-transform: uppercase;
|
||||
color: #c8102e;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.wrm-title {
|
||||
font-size: clamp(28px, 3.4vw, 48px) !important;
|
||||
font-weight: 800 !important;
|
||||
letter-spacing: -0.03em !important;
|
||||
line-height: 1.15 !important;
|
||||
text-transform: none !important;
|
||||
color: #ffffff !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wrm-inner {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.wrm-track-wrap {
|
||||
position: relative;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 2px;
|
||||
margin: 0 auto 44px auto;
|
||||
}
|
||||
|
||||
.wrm-track-fill {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
background: #c8102e;
|
||||
box-shadow: 0 0 10px #c8102e;
|
||||
border-radius: 2px;
|
||||
transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.wrm-nodes { position: absolute; inset: 0; }
|
||||
|
||||
.wrm-node {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #18181b;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
|
||||
}
|
||||
|
||||
.wrm-node.is-active {
|
||||
background: #c8102e;
|
||||
border-color: #ffffff;
|
||||
box-shadow: 0 0 10px #c8102e;
|
||||
}
|
||||
|
||||
.wrm-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.wrm-card {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
padding: 24px 20px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.07);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.4s ease, background-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
|
||||
}
|
||||
|
||||
.wrm-card:hover,
|
||||
.wrm-card.is-active {
|
||||
transform: translateY(-6px);
|
||||
border-color: rgba(200, 16, 46, 0.5);
|
||||
background: rgba(200, 16, 46, 0.06);
|
||||
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.wrm-card-year {
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
color: #ffffff;
|
||||
letter-spacing: -0.5px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.wrm-phase-pill {
|
||||
display: inline-block;
|
||||
font-size: 10.5px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 4px 9px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.wrm-phase-pill.yellow { background: rgba(234,179,8,0.12); color: #eab308; border: 1px solid rgba(234,179,8,0.2); }
|
||||
.wrm-phase-pill.green { background: rgba(34,197,94,0.12); color: #22c55e; border: 1px solid rgba(34,197,94,0.2); }
|
||||
.wrm-phase-pill.blue { background: rgba(59,130,246,0.12); color: #3b82f6; border: 1px solid rgba(59,130,246,0.2); }
|
||||
.wrm-phase-pill.white-pill { background: rgba(255,255,255,0.12); color: #ffffff; border: 1px solid rgba(255,255,255,0.2); }
|
||||
|
||||
.wrm-card-desc {
|
||||
font-size: 12.5px;
|
||||
line-height: 1.5;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wrm-card.wrm-glow {
|
||||
background: linear-gradient(135deg, rgba(200, 16, 46, 0.95) 0%, rgba(110, 8, 26, 0.98) 100%);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.wrm-card.wrm-glow .wrm-card-desc { color: rgba(255, 255, 255, 0.85); }
|
||||
.wrm-card.wrm-glow:hover,
|
||||
.wrm-card.wrm-glow.is-active {
|
||||
box-shadow: 0 20px 40px rgba(200, 16, 46, 0.45);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.wrm-section { width: calc(100% - 24px); border-radius: 22px; }
|
||||
.wrm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.wrm-track-wrap { display: none; }
|
||||
.wrm-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 14px;
|
||||
position: relative;
|
||||
padding-left: 26px;
|
||||
}
|
||||
.wrm-grid::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
width: 2px;
|
||||
border-radius: 2px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
.wrm-card { position: relative; }
|
||||
.wrm-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -25px;
|
||||
top: 22px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #18181b;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.wrm-card.is-active::before,
|
||||
.wrm-card:hover::before {
|
||||
background: #c8102e;
|
||||
border-color: #ffffff;
|
||||
box-shadow: 0 0 10px rgba(200, 16, 46, 0.7);
|
||||
}
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<section className="wrm-section" id="wings-roadmap">
|
||||
<div className="wrm-header">
|
||||
<div className="wrm-eyebrow">/ Future Roadmap /</div>
|
||||
<h2 className="wrm-title">A ten-year path to national scale</h2>
|
||||
</div>
|
||||
|
||||
<div className="wrm-inner">
|
||||
<div className="wrm-track-wrap" aria-hidden="true">
|
||||
<div className="wrm-track-fill" style={{ width: `${fillPct}%` }} />
|
||||
<div className="wrm-nodes">
|
||||
{ROADMAP_DATA.map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`wrm-node${i <= active ? " is-active" : ""}`}
|
||||
style={{ left: `${((i + 0.5) / ROADMAP_DATA.length) * 100}%` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="wrm-grid">
|
||||
{ROADMAP_DATA.map((item, i) => (
|
||||
<div
|
||||
key={item.year}
|
||||
className={`wrm-card${item.glow ? " wrm-glow" : ""}${i === active ? " is-active" : ""}`}
|
||||
onMouseEnter={() => setActive(i)}
|
||||
onClick={() => setActive(i)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") setActive(i);
|
||||
}}
|
||||
>
|
||||
<div className="wrm-card-year">{item.year}</div>
|
||||
<span className={`wrm-phase-pill ${item.phaseClass}`}>{item.phase}</span>
|
||||
<p className="wrm-card-desc">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
198
src/components/sections/WingsSpeedAdvantage.tsx
Normal file
198
src/components/sections/WingsSpeedAdvantage.tsx
Normal file
@@ -0,0 +1,198 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
import { CountUp } from "@/animations/Reveal";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
}
|
||||
|
||||
export default function WingsSpeedAdvantage() {
|
||||
const sectionRef = useRef<HTMLDivElement>(null);
|
||||
const headerRef = useRef<HTMLDivElement>(null);
|
||||
const leftRef = useRef<HTMLDivElement>(null);
|
||||
const rightRef = useRef<HTMLDivElement>(null);
|
||||
const vsRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const section = sectionRef.current;
|
||||
const header = headerRef.current;
|
||||
const left = leftRef.current;
|
||||
const right = rightRef.current;
|
||||
const vs = vsRef.current;
|
||||
if (!section || !header || !left || !right || !vs) return;
|
||||
|
||||
gsap.set([header, left, right], { opacity: 0, y: 40 });
|
||||
gsap.set(vs, { opacity: 0, scale: 0.7 });
|
||||
|
||||
const tl = gsap.timeline({
|
||||
scrollTrigger: { trigger: section, start: "top 78%", toggleActions: "play none none none" },
|
||||
});
|
||||
|
||||
tl.to(header, { opacity: 1, y: 0, duration: 0.85, ease: "power3.out" })
|
||||
.to([left, right], { opacity: 1, y: 0, duration: 0.8, stagger: 0.12, ease: "power3.out" }, "-=0.5")
|
||||
.to(vs, { opacity: 1, scale: 1, duration: 0.5, ease: "back.out(1.7)" }, "-=0.35");
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.wsa-section {
|
||||
background: #fafafa;
|
||||
padding: var(--space-section-lg, 80px) clamp(20px, 5vw, 40px);
|
||||
}
|
||||
|
||||
.wsa-header {
|
||||
max-width: 720px;
|
||||
margin: 0 auto 48px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wsa-eyebrow {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(17, 17, 17, 0.45);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.wsa-title {
|
||||
font-size: clamp(28px, 3.2vw, 46px) !important;
|
||||
font-weight: 800 !important;
|
||||
letter-spacing: -0.03em !important;
|
||||
line-height: 1.15 !important;
|
||||
text-transform: none !important;
|
||||
color: #111111 !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wsa-face-off {
|
||||
position: relative;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.wsa-panel {
|
||||
min-width: 0;
|
||||
border-radius: 22px;
|
||||
padding: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 40px);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wsa-panel-surface {
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(17, 17, 17, 0.08);
|
||||
}
|
||||
|
||||
.wsa-panel-wings {
|
||||
background: #111114;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.wsa-panel-label {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.wsa-panel-surface .wsa-panel-label { color: rgba(17, 17, 17, 0.4); }
|
||||
.wsa-panel-wings .wsa-panel-label { color: #c8102e; }
|
||||
|
||||
.wsa-value {
|
||||
font-size: clamp(40px, 6vw, 76px);
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.wsa-panel-surface .wsa-value { color: #b3b6bf; }
|
||||
.wsa-panel-wings .wsa-value { color: #ffffff; }
|
||||
|
||||
.wsa-unit {
|
||||
margin-top: 10px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.wsa-panel-surface .wsa-unit { color: rgba(17, 17, 17, 0.45); }
|
||||
.wsa-panel-wings .wsa-unit { color: rgba(255, 255, 255, 0.75); }
|
||||
|
||||
.wsa-panel-sub {
|
||||
margin-top: 18px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.wsa-panel-surface .wsa-panel-sub { color: rgba(17, 17, 17, 0.4); }
|
||||
.wsa-panel-wings .wsa-panel-sub { color: rgba(255, 255, 255, 0.55); }
|
||||
|
||||
.wsa-vs {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(17, 17, 17, 0.1);
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1px;
|
||||
color: #c8102e;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.wsa-face-off { grid-template-columns: 1fr; gap: 40px; }
|
||||
.wsa-vs { position: static; transform: none; margin: -20px auto; }
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<section className="wsa-section" ref={sectionRef} id="wings-speed">
|
||||
<div className="wsa-header" ref={headerRef}>
|
||||
<div className="wsa-eyebrow">/ The Speed Advantage /</div>
|
||||
<h2 className="wsa-title">Same-day, not some-day</h2>
|
||||
</div>
|
||||
|
||||
<div className="wsa-face-off">
|
||||
<div className="wsa-panel wsa-panel-surface" ref={leftRef}>
|
||||
<div className="wsa-panel-label">Surface Logistics</div>
|
||||
<div className="wsa-value">
|
||||
48–<CountUp end={96} duration={1.6} triggerOnce />
|
||||
</div>
|
||||
<div className="wsa-unit">Hours</div>
|
||||
<p className="wsa-panel-sub">Delhi–Mumbai standard surface transit time.</p>
|
||||
</div>
|
||||
|
||||
<div className="wsa-vs" ref={vsRef}>VS</div>
|
||||
|
||||
<div className="wsa-panel wsa-panel-wings" ref={rightRef}>
|
||||
<div className="wsa-panel-label">Doormile Wings</div>
|
||||
<div className="wsa-value">
|
||||
Max <CountUp end={3} duration={1.4} triggerOnce />
|
||||
</div>
|
||||
<div className="wsa-unit">Hours, Door-to-Door</div>
|
||||
<p className="wsa-panel-sub">Same-day delivery between major regional capitals.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
167
src/components/sections/WingsWhyGrid.tsx
Normal file
167
src/components/sections/WingsWhyGrid.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
|
||||
|
||||
const FEATURES = [
|
||||
{
|
||||
title: "Same-Day Air Logistics",
|
||||
desc: "Max 3-hour door-to-door delivery between India's major regional capitals.",
|
||||
icon: (
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<polyline points="12 6 12 12 16 14" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "AI-Powered Operations",
|
||||
desc: "MileTruth™ AI continuously forecasts demand and optimizes every route and load.",
|
||||
icon: (
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<rect x="4" y="4" width="16" height="16" rx="3" />
|
||||
<path d="M9 9h6v6H9z" />
|
||||
<path d="M9 1v3M15 1v3M9 20v3M15 20v3M1 9h3M1 15h3M20 9h3M20 15h3" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Regional Connectivity",
|
||||
desc: "Dedicated air capacity linking major economic hubs, not passenger-belly space.",
|
||||
icon: (
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="6" cy="6" r="2.5" />
|
||||
<circle cx="18" cy="6" r="2.5" />
|
||||
<circle cx="12" cy="18" r="2.5" />
|
||||
<path d="M8.2 7.2 10 16M15.8 7.2 14 16M8.5 6h7" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "EV Last Mile",
|
||||
desc: "Zero-emission electric vehicles complete every first- and final-mile delivery.",
|
||||
icon: (
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M3 13h13l3 4h2v3H3z" />
|
||||
<circle cx="7" cy="20" r="1.6" />
|
||||
<circle cx="16" cy="20" r="1.6" />
|
||||
<path d="M6 13V8a1 1 0 0 1 1-1h5l3 6" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export default function WingsWhyGrid() {
|
||||
return (
|
||||
<>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.wwg-section {
|
||||
background: #ffffff;
|
||||
padding: var(--space-section-lg, 80px) clamp(20px, 5vw, 40px);
|
||||
}
|
||||
|
||||
.wwg-header {
|
||||
margin: 0 auto 48px auto;
|
||||
max-width: 720px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wwg-eyebrow {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(17, 17, 17, 0.45);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.wwg-title {
|
||||
font-size: clamp(28px, 3.2vw, 46px) !important;
|
||||
font-weight: 800 !important;
|
||||
letter-spacing: -0.03em !important;
|
||||
line-height: 1.15 !important;
|
||||
text-transform: none !important;
|
||||
color: #111111 !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wwg-grid {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.wwg-card {
|
||||
min-width: 0;
|
||||
padding: 30px 24px;
|
||||
border: 1px solid rgba(17, 17, 17, 0.08);
|
||||
border-radius: 18px;
|
||||
background: #fafafa;
|
||||
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.wwg-card:hover {
|
||||
border-color: rgba(200, 16, 46, 0.35);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.wwg-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 14px;
|
||||
background: rgba(200, 16, 46, 0.06);
|
||||
color: #c8102e;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.wwg-card-title {
|
||||
font-size: 17px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.3 !important;
|
||||
text-transform: none !important;
|
||||
color: #111111 !important;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.wwg-card-desc {
|
||||
font-size: 14.5px;
|
||||
line-height: 1.55;
|
||||
color: rgba(17, 17, 17, 0.6);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.wwg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.wwg-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<section className="wwg-section" id="wings-why">
|
||||
<ScrollReveal delay={0.05} duration={0.75} yOffset={25} className="wwg-header">
|
||||
<div className="wwg-eyebrow">/ Why Doormile Wings /</div>
|
||||
<h2 className="wwg-title">Built for the speed of the Gen-Z economy</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<StaggerChildren stagger={0.1} duration={0.7} yOffset={30} className="wwg-grid">
|
||||
{FEATURES.map((f) => (
|
||||
<div key={f.title} className="wwg-card">
|
||||
<div className="wwg-icon" aria-hidden="true">{f.icon}</div>
|
||||
<h3 className="wwg-card-title">{f.title}</h3>
|
||||
<p className="wwg-card-desc">{f.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</StaggerChildren>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user