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

Add Doormile Wings air freight page with nav, footer links, and sitemap.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Aravind
2026-07-01 11:04:33 +05:30
parent dd565e349a
commit 2fe7c0df76
18 changed files with 2013 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/air-freight-pic-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
public/images/air-freight-slide-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
public/images/air-freight-slide-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 143 KiB

62
src/app/air-freight/page.tsx Normal file
View File

@@ -0,0 +1,62 @@
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";
export const metadata = {
title: "Air Freight – Doormile",
description: "Doormile Air Freight delivers precision cargo solutions — express air cargo, charter freight, cold chain, and customs clearance — across domestic and international trade lanes.",
alternates: {
canonical: "https://doormile.com/air-freight",
},
openGraph: {
title: "Air Freight – 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.",
url: "https://doormile.com/air-freight",
siteName: "Doormile",
type: "website",
images: [
{
url: "https://doormile.com/images/air-freight-slide-1.jpg",
width: 1200,
height: 630,
alt: "Doormile Air Freight – precision cargo solutions",
},
],
},
twitter: {
card: "summary_large_image",
title: "Air Freight – 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"],
},
};
export default function AirFreightPage() {
return (
<div id="air-freight" 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 />
</div>
</div>
</div>
</div>
);
}

30
src/app/globals.css
View File

@@ -964,6 +964,36 @@ body {
box-sizing: border-box;
}
/* ============================================================
SHARED PAGE CONTENT CONTAINER
Mirrors the site's e-con-boxed > e-con-inner system: 1480px
max-width centred with fluid horizontal padding identical to the
Industry Solutions / OurTeam override above. Apply this class to
any section's inner container div to guarantee that content edges
line up with every other page section (Home, About, Solutions…).
============================================================ */
.dm-section-container {
max-width: 1480px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
width: 100%;
}
/* Air Freight hero frame: the generic vendor CSS assigns 32px padding to
.elementor-element-741f56c on all pages; Home's frame is 20px (scoped
to .elementor-61). Scope the same 20px frame to the Air Freight hero so
the card alignment matches Home and Solutions exactly. */
@media (min-width: 1025px) {
.af-hero-page.elementor-element-741f56c {
--padding-top: 20px;
--padding-right: 20px;
--padding-bottom: 20px;
--padding-left: 20px;
padding: 20px !important;
}
}
/* Custom premium animations keyframes */
@keyframes shimmer-sweep {
0% {

80
src/app/sitemap.ts Normal file
View File

@@ -0,0 +1,80 @@
import type { MetadataRoute } from "next";
export const dynamic = "force-static";
const BASE_URL = "https://doormile.com";
export default function sitemap(): MetadataRoute.Sitemap {
const now = new Date();
const staticRoutes: MetadataRoute.Sitemap = [
{
url: `${BASE_URL}/`,
lastModified: now,
changeFrequency: "weekly",
priority: 1.0,
},
{
url: `${BASE_URL}/how-it-works`,
lastModified: now,
changeFrequency: "monthly",
priority: 0.8,
},
{
url: `${BASE_URL}/miletruth`,
lastModified: now,
changeFrequency: "monthly",
priority: 0.8,
},
{
url: `${BASE_URL}/solutions`,
lastModified: now,
changeFrequency: "monthly",
priority: 0.8,
},
{
url: `${BASE_URL}/air-freight`,
lastModified: now,
changeFrequency: "monthly",
priority: 0.8,
},
{
url: `${BASE_URL}/about-us`,
lastModified: now,
changeFrequency: "monthly",
priority: 0.7,
},
{
url: `${BASE_URL}/blog`,
lastModified: now,
changeFrequency: "weekly",
priority: 0.7,
},
{
url: `${BASE_URL}/contact`,
lastModified: now,
changeFrequency: "yearly",
priority: 0.6,
},
{
url: `${BASE_URL}/privacy-policy`,
lastModified: now,
changeFrequency: "yearly",
priority: 0.3,
},
{
url: `${BASE_URL}/terms-of-service`,
lastModified: now,
changeFrequency: "yearly",
priority: 0.3,
},
{
url: `${BASE_URL}/cookie-policy`,
lastModified: now,
changeFrequency: "yearly",
priority: 0.3,
},
];
return staticRoutes;
}

3
src/components/layout/Footer.tsx
View File

@@ -458,6 +458,9 @@ export default function Footer() {
<div className="elementor-element elementor-element-a219b7d elementor-widget elementor-widget-logico_custom_navigation_menu" data-id="a219b7d" data-element_type="widget" data-e-type="widget" data-widget_type="logico_custom_navigation_menu.default">
<div className="elementor-widget-container">
<ul className="logico-custom-menu-widget">
<li>
<Link href="/air-freight">Doormile Wings</Link>
</li>
<li>
<Link href="/about-us">About Us</Link>
</li>

24
src/components/layout/Header.tsx
View File

@@ -19,6 +19,7 @@ const CURRENT_PAGE_MAP: Record<string, string> = {
"/how-it-works": "how-it-works",
"/miletruth": "miletruth",
"/solutions": "solutions",
"/air-freight": "air-freight",
"/about-us": "about",
"/blog": "blogs",
};
@@ -29,6 +30,7 @@ const CURRENT_PAGE_ALIASES: Record<string, string[]> = {
"how-it-works": ["how-it-works", "how-its-works"],
miletruth: ["miletruth"],
solutions: ["solutions"],
"air-freight": ["air-freight"],
about: ["about", "about-us", "women"],
blogs: ["blogs"],
};
@@ -445,6 +447,9 @@ export default function Header() {
<li id="menu-item-10511" className={`menu-item menu-item-type-custom menu-item-10511${dmHeaderActive("solutions")}`}>
<Link href="/solutions#solutions" onClick={(event) => handleNavClick(event, "/solutions", "solutions")}>Solutions</Link>
</li>
<li id="menu-item-10513" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10513${dmHeaderActive("air-freight")}`}>
<Link href="/air-freight" prefetch>Doormile wings</Link>
</li>
<li id="menu-item-10512" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10512${dmHeaderActive("about")}`}>
<Link href="/about-us#about" onClick={(event) => handleNavClick(event, "/about-us", "about")}>About</Link>
</li>
@@ -493,6 +498,9 @@ export default function Header() {
<li className={`menu-item menu-item-type-custom menu-item-10511${dmHeaderActive("solutions")}`}>
<Link href="/solutions#solutions" onClick={(event) => handleNavClick(event, "/solutions", "solutions", true)}>Solutions</Link>
</li>
<li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10513${dmHeaderActive("air-freight")}`}>
<Link href="/air-freight" prefetch onClick={() => closeAll()}>Air Freight</Link>
</li>
<li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10512${dmHeaderActive("about")}`}>
<Link href="/about-us#about" onClick={(event) => handleNavClick(event, "/about-us", "about", true)}>About</Link>
</li>
@@ -758,6 +766,22 @@ export default function Header() {
}
}
/* Compact nav items at middle desktop widths (8 items fit without overflow).
Slightly tighter letter-spacing keeps the active underline animation intact. */
@media (min-width: 1025px) and (max-width: 1400px) {
#masthead .header-menu-container .main-menu > li > a {
letter-spacing: -0.01em;
}
}
@media (min-width: 1025px) and (max-width: 1200px) {
#masthead .header-menu-container .main-menu {
gap: clamp(4px, 0.8vw, 12px) !important;
}
#masthead .header-menu-container .main-menu > li > a {
font-size: clamp(12px, 0.95vw, 14px);
}
}
#masthead .header-menu-container .main-menu > li.active > a:before {
background-color: #ffffff !important;
opacity: 1 !important;

180
src/components/sections/AirFreightAdvantages.tsx Normal file
View File

@@ -0,0 +1,180 @@
"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 is India&apos;s leading air freight 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 air freight 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>
</>
);
}

127
src/components/sections/AirFreightBanner.tsx Normal file
View File

@@ -0,0 +1,127 @@
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="Air freight cargo terminal" />
<div className="afb-card-anchor">
<ScrollReveal delay={0.1} yOffset={30}>
<div className="afb-card">
<span className="afb-card-num">01 / Air Freight</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>
</>
);
}

297
src/components/sections/AirFreightBenefits.tsx Normal file
View File

@@ -0,0 +1,297 @@
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>
</>
);
}

55
src/components/sections/AirFreightCTA.tsx Normal file
View File

@@ -0,0 +1,55 @@
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 air freight 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>
</>
);
}

128
src/components/sections/AirFreightCoverage.tsx Normal file
View File

@@ -0,0 +1,128 @@
"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>
</>
);
}

219
src/components/sections/AirFreightFAQ.tsx Normal file
View File

@@ -0,0 +1,219 @@
"use client";
import { useState } from "react";
import Link from "next/link";
import { ScrollReveal } from "@/animations/Reveal";
const FAQS = [
{
q: "How can we work with your air freight system?",
a: "Getting started with Doormile Air Freight 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>
</>
);
}

109
src/components/sections/AirFreightFleet.tsx Normal file
View File

@@ -0,0 +1,109 @@
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>
</>
);
}

241
src/components/sections/AirFreightHero.tsx Normal file
View File

@@ -0,0 +1,241 @@
"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: flex-end !important;
justify-content: center !important;
width: 100%;
height: 100%;
padding: 0 60px 70px !important;
box-sizing: border-box;
}
.af-hero-slide .slide-content-inner {
width: 100%;
max-width: 55%;
margin: 58px 0 0 0;
text-align: left;
}
.af-hero-slide .content-slider-item-heading {
font-size: clamp(36px, 5.5vw, 80px) !important;
line-height: 1.125em !important;
word-spacing: -0.03em;
color: #FFFFFF;
text-align: left !important;
}
.af-hero-slide .content-slider-item-text {
color: #FFFFFF;
text-align: left !important;
font-size: 16px;
line-height: 1.875em;
margin-top: 23px;
}
.af-hero-slide .content-slider-item-buttons {
margin-top: 32px;
}
.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: 70%; }
}
@media (max-width: 1024px) {
.af-hero-slide .slide-content { padding: 0 30px 50px !important; }
.af-hero-slide .slide-content-inner { max-width: 85%; }
.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; }
.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 Air Freight delivers precision cargo solutions across domestic and international trade lanes — guaranteed transit times, real-time tracking, full customs management.</p>
</div>
</div>
<div className="content-slider-item-buttons logico-content-wrapper-3">
<Link href="/contact" className="logico-alter-button">Get a Quote</Link>
</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 className="content-slider-item-buttons logico-content-wrapper-3">
<Link href="/about-us" className="logico-alter-button">Explore More</Link>
</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>
</>
);
}

208
src/components/sections/AirFreightServices.tsx Normal file
View File

@@ -0,0 +1,208 @@
"use client";
import { StaggerChildren } from "@/animations/Reveal";
const SERVICE_LIST = [
"Air Freight",
"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 &amp; Services /</div>
<h5 className="af3-heading">Products &amp; Services</h5>
<p className="af3-desc">Comprehensive air freight 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">Air Freight</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>
</>
);
}

250
src/components/sections/AirFreightWorkflow.tsx Normal file
View File

@@ -0,0 +1,250 @@
import Image from "next/image";
import Link from "next/link";
import { ScrollReveal } from "@/animations/Reveal";
const ICON_BOXES = [
{
title: "Express Air Freight",
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="Air freight 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>
</>
);
}