update doormile wings dropdown

Co-authored-by: Cursor <cursoragent@cursor.com>

next.config.ts

@@ -2,6 +2,15 @@ import type { NextConfig } from "next";
 import path from "path";
 
 const nextConfig: NextConfig = {
+  async redirects() {
+    return [
+      {
+        source: "/air-freight",
+        destination: "/doormile-wings",
+        permanent: true,
+      },
+    ];
+  },
   turbopack: {
     root: path.resolve(__dirname),
   },

src/app/air-freight/page.tsx

@@ -0,0 +1,15 @@
+import { permanentRedirect } from "next/navigation";
+
+export const metadata = {
+  alternates: {
+    canonical: "https://doormile.com/doormile-wings",
+  },
+  robots: {
+    index: false,
+    follow: true,
+  },
+};
+
+export default function AirFreightRedirectPage() {
+  permanentRedirect("/doormile-wings");
+}

src/app/doormile-wings/page.tsx

@@ -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: "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.",
+  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.",
+    url: "https://doormile.com/doormile-wings",
+    siteName: "Doormile",
+    type: "website",
+    images: [
+      {
+        url: "https://doormile.com/images/air-freight-slide-1.jpg",
+        width: 1200,
+        height: 630,
+        alt: "Doormile Wings precision cargo solutions",
+      },
+    ],
+  },
+  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"],
+  },
+};
+
+export default function AirFreightPage() {
+  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 />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/express/page.tsx

@@ -0,0 +1,133 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "Express – Doormile",
+  description: "Doormile Express — a fast-lane logistics service for time-critical shipments. Coming soon.",
+  alternates: {
+    canonical: "https://doormile.com/express",
+  },
+  robots: {
+    index: false,
+    follow: true,
+  },
+};
+
+export default function ExpressPage() {
+  return (
+    <div id="express" className="content-wrapper content-wrapper-may-contain-elementor-code content-wrapper-sidebar-position-none">
+      <div className="content">
+        <div className="content-inner">
+          <section className="express-coming-soon">
+            <div className="express-coming-soon-inner">
+              <span className="express-coming-soon-eyebrow">Solutions / Express</span>
+              <h1 className="express-coming-soon-heading">
+                Doormile Express is <span className="express-coming-soon-accent">on its way</span>
+              </h1>
+              <p className="express-coming-soon-text">
+                We&apos;re building a fast-lane logistics service for time-critical shipments.
+                Check back soon, or explore what Doormile already delivers today.
+              </p>
+              <div className="express-coming-soon-actions">
+                <Link href="/doormile-wings" prefetch className="logico-alter-button">
+                  Explore Doormile Wings
+                </Link>
+                <Link href="/contact" className="express-coming-soon-link">
+                  Get notified when we launch →
+                </Link>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+
+      {/* Self-contained placeholder styling, scoped to .express-coming-soon.
+          Re-declares --logico-dark-text-color/--logico-light-text-color/
+          --logico-accent-color locally: the sitewide :root fallback is the
+          light-theme value (dark text on white), which would render near-
+          black text on this dark section without the override. */}
+      <style
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{
+          __html: `
+            .express-coming-soon {
+                --logico-dark-text-color: #ffffff;
+                --logico-light-text-color: #bebebe;
+                --logico-accent-color: #C01227;
+                min-height: calc(100vh - 160px);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: clamp(48px, 8vw, 120px) 24px;
+                background: radial-gradient(120% 120% at 50% 0%, rgba(192, 18, 39, 0.18) 0%, rgba(26, 26, 26, 0.98) 55%, #111111 100%);
+            }
+            .express-coming-soon-inner {
+                max-width: 720px;
+                text-align: center;
+            }
+            .express-coming-soon-eyebrow {
+                display: inline-block;
+                font-size: 13px;
+                font-weight: 700;
+                letter-spacing: 0.14em;
+                text-transform: uppercase;
+                color: var(--logico-accent-color);
+                margin-bottom: 20px;
+            }
+            .express-coming-soon-heading {
+                font-family: 'Manrope', sans-serif;
+                font-size: clamp(32px, 5vw, 56px);
+                line-height: 1.15em;
+                font-weight: 700;
+                color: var(--logico-dark-text-color);
+                margin: 0 0 20px;
+            }
+            .express-coming-soon-accent {
+                color: var(--logico-accent-color);
+            }
+            .express-coming-soon-text {
+                font-size: 16px;
+                line-height: 1.75em;
+                color: var(--logico-light-text-color);
+                margin: 0 auto 36px;
+                max-width: 520px;
+            }
+            .express-coming-soon-actions {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                justify-content: center;
+                gap: 24px;
+            }
+            .express-coming-soon .logico-alter-button {
+                color: #ffffff !important;
+                border-color: rgba(255, 255, 255, 0.45) !important;
+                background: transparent !important;
+            }
+            .express-coming-soon .logico-alter-button:hover {
+                background: #ffffff !important;
+                color: #1a1a1a !important;
+                border-color: #ffffff !important;
+            }
+            .express-coming-soon-link {
+                font-size: 15px;
+                font-weight: 600;
+                color: var(--logico-light-text-color);
+                text-decoration: underline;
+                text-underline-offset: 4px;
+            }
+            .express-coming-soon-link:hover {
+                color: #ffffff;
+            }
+            @media (max-width: 480px) {
+                .express-coming-soon-actions {
+                    flex-direction: column;
+                    gap: 16px;
+                }
+            }
+          `,
+        }}
+      />
+    </div>
+  );
+}

src/app/globals.css

@@ -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%;
+}
+
+/* Doormile Wings 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 Doormile Wings 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% {

src/app/sitemap.ts

@@ -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}/doormile-wings`,
+      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;
+}

src/components/layout/Footer.tsx

@@ -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="/doormile-wings">Doormile Wings</Link>
+                            </li>
                             <li>
                               <Link href="/about-us">About Us</Link>
                             </li>

src/components/layout/Header.tsx

@@ -7,7 +7,7 @@
  * Menu open/close + sidebar state is read from HeaderUIProvider so BodyOverlay (sibling at body level) can react.
  */
 
-import { MouseEvent, useEffect, useState } from "react";
+import { KeyboardEvent, FocusEvent, MouseEvent, useEffect, useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
@@ -19,6 +19,8 @@ const CURRENT_PAGE_MAP: Record<string, string> = {
   "/how-it-works": "how-it-works",
   "/miletruth": "miletruth",
   "/solutions": "solutions",
+  "/doormile-wings": "doormile-wings",
+  "/express": "express",
   "/about-us": "about",
   "/blog": "blogs",
 };
@@ -28,7 +30,9 @@ const CURRENT_PAGE_ALIASES: Record<string, string[]> = {
   home: ["home"],
   "how-it-works": ["how-it-works", "how-its-works"],
   miletruth: ["miletruth"],
-  solutions: ["solutions"],
+  // Solutions is a normal nav page and also owns the Wings/Express dropdown.
+  solutions: ["solutions", "doormile-wings", "express"],
+  "doormile-wings": ["doormile-wings"],
   about: ["about", "about-us", "women"],
   blogs: ["blogs"],
 };
@@ -60,7 +64,7 @@ export default function Header() {
     targetId: string,
     shouldCloseMenu = false,
   ) => {
-    if (shouldCloseMenu) closeAll();
+    if (shouldCloseMenu) closeMobileMenu();
 
     if (pathname !== targetPath) return;
 
@@ -78,6 +82,23 @@ export default function Header() {
   const [visibleScrolled, setVisibleScrolled] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
 
+  // Solutions dropdown (desktop) / accordion (mobile). Local to Header —
+  // unlike isMenuOpen/isSidebarOpen (HeaderUIProvider), no sibling component
+  // needs to read this.
+  const [isDesktopSolutionsOpen, setDesktopSolutionsOpen] = useState(false);
+  const [isMobileSolutionsOpen, setMobileSolutionsOpen] = useState(false);
+
+  // Collapse the accordion whenever the off-canvas menu closes, so it isn't
+  // left expanded the next time the menu opens.
+  const closeMobileMenu = () => {
+    setMobileSolutionsOpen(false);
+    closeAll();
+  };
+  const toggleMobileMenu = () => {
+    setMobileSolutionsOpen(false);
+    toggleMenu();
+  };
+
   useEffect(() => {
     const handle = requestAnimationFrame(() => {
       setVisibleScrolled(true);
@@ -442,8 +463,44 @@ export default function Header() {
                             <li id="menu-item-10510" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10510${dmHeaderActive("miletruth")}`}>
                               <Link href="/miletruth#miletruth" onClick={(event) => handleNavClick(event, "/miletruth", "miletruth")}>MileTruth&trade; AI</Link>
                             </li>
-                            <li id="menu-item-10511" className={`menu-item menu-item-type-custom  menu-item-10511${dmHeaderActive("solutions")}`}>
+                            <li
-                              <Link href="/solutions#solutions" onClick={(event) => handleNavClick(event, "/solutions", "solutions")}>Solutions</Link>
+                              id="menu-item-10511"
+                              className={`menu-item menu-item-type-custom menu-item-has-children menu-item-10511${dmHeaderActive("solutions")}`}
+                              onMouseEnter={() => setDesktopSolutionsOpen(true)}
+                              onMouseLeave={() => setDesktopSolutionsOpen(false)}
+                              onKeyDown={(event: KeyboardEvent<HTMLLIElement>) => {
+                                if (event.key !== "Escape") return;
+                                setDesktopSolutionsOpen(false);
+                                event.currentTarget.querySelector<HTMLAnchorElement>(":scope > a")?.focus();
+                              }}
+                              onBlur={(event: FocusEvent<HTMLLIElement>) => {
+                                if (!event.currentTarget.contains(event.relatedTarget as Node)) {
+                                  setDesktopSolutionsOpen(false);
+                                }
+                              }}
+                            >
+                              <Link
+                                href="/solutions"
+                                prefetch
+                                aria-haspopup="true"
+                                aria-expanded={isDesktopSolutionsOpen}
+                                onFocus={() => setDesktopSolutionsOpen(true)}
+                                onClick={() => setDesktopSolutionsOpen(false)}
+                              >
+                                Solutions
+                              </Link>
+                              <ul className="dm-solutions-dropdown">
+                                <li className={currentPage === "doormile-wings" ? "dm-child-active" : ""}>
+                                  <Link href="/doormile-wings" prefetch onClick={() => setDesktopSolutionsOpen(false)}>
+                                    Doormile Wings
+                                  </Link>
+                                </li>
+                                <li className={currentPage === "express" ? "dm-child-active" : ""}>
+                                  <Link href="/express" prefetch onClick={() => setDesktopSolutionsOpen(false)}>
+                                    Express
+                                  </Link>
+                                </li>
+                              </ul>
                             </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>
@@ -454,7 +511,7 @@ export default function Header() {
                           </ul>
                         </nav>
                       </div>
-                      <div className="menu-trigger" data-id="0b7bf6f" onClick={toggleMenu}>
+                      <div className="menu-trigger" data-id="0b7bf6f" onClick={toggleMobileMenu}>
                         <span className="menu-trigger-icon">
                           <span className="hamburger">
                             <span></span>
@@ -474,7 +531,7 @@ export default function Header() {
                             <div className="header-icon login-logout">
                               <a href="#" title="Login/Register" className="link-login"></a>
                             </div>
-                            <div className="header-icon menu-close" onClick={closeAll}>
+                            <div className="header-icon menu-close" onClick={closeMobileMenu}>
                               <span className="menu-close-icon"></span>
                             </div>
                           </div>
@@ -490,8 +547,32 @@ export default function Header() {
                             <li className={`menu-item menu-item-type-custom menu-item-object-custom  menu-item-10510${dmHeaderActive("miletruth")}`}>
                               <Link href="/miletruth#miletruth" onClick={(event) => handleNavClick(event, "/miletruth", "miletruth", true)}>MileTruth&trade; AI</Link>
                             </li>
-                            <li className={`menu-item menu-item-type-custom menu-item-10511${dmHeaderActive("solutions")}`}>
+                            <li
-                              <Link href="/solutions#solutions" onClick={(event) => handleNavClick(event, "/solutions", "solutions", true)}>Solutions</Link>
+                              className={`menu-item menu-item-type-custom menu-item-10511 dm-mobile-solutions${dmHeaderActive("solutions")}${isMobileSolutionsOpen ? " dm-accordion-open" : ""}`}
+                            >
+                              <div className="dm-mobile-solutions-row">
+                                <Link href="/solutions" prefetch onClick={closeMobileMenu}>
+                                  Solutions
+                                </Link>
+                                <button
+                                  type="button"
+                                  className="dm-mobile-solutions-toggle"
+                                  aria-label={isMobileSolutionsOpen ? "Close Solutions menu" : "Open Solutions menu"}
+                                  aria-haspopup="true"
+                                  aria-expanded={isMobileSolutionsOpen}
+                                  onClick={() => setMobileSolutionsOpen((open) => !open)}
+                                >
+                                  <span className="dm-accordion-chevron" aria-hidden="true"></span>
+                                </button>
+                              </div>
+                              <ul className="dm-mobile-solutions-panel">
+                                <li className={currentPage === "doormile-wings" ? "dm-child-active" : ""}>
+                                  <Link href="/doormile-wings" prefetch onClick={closeMobileMenu}>Doormile Wings</Link>
+                                </li>
+                                <li className={currentPage === "express" ? "dm-child-active" : ""}>
+                                  <Link href="/express" prefetch onClick={closeMobileMenu}>Express</Link>
+                                </li>
+                              </ul>
                             </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>
@@ -758,6 +839,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;
@@ -855,6 +952,282 @@ export default function Header() {
                 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E");
                 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E");
             }
+
+            /* ── Solutions dropdown (desktop) / accordion (mobile) ──
+               Solutions remains linked to /solutions while the nested menu opens
+               independently. It reuses site.css's dead .menu-item-has-children chevron (fontello
+               glyph, already coloured white for this exact header widget) instead
+               of inventing a new arrow, so it matches the site's existing premium
+               nav styling. Desktop opens on hover/focus; mobile is a
+               height-collapsing accordion controlled by the chevron button. */
+            @media (min-width: 1025px) {
+                #masthead .header-menu-container nav {
+                    display: flex;
+                    align-items: center;
+                }
+
+                #masthead .header-menu-container .main-menu {
+                    display: inline-flex !important;
+                    align-items: center;
+                    gap: 16px !important;
+                    margin: 0 !important;
+                    line-height: 1;
+                }
+
+                #masthead .header-menu-container .main-menu > li {
+                    display: flex;
+                    align-items: center;
+                    margin-right: 0 !important;
+                }
+
+                #masthead .header-menu-container .main-menu > li > a {
+                    display: inline-flex !important;
+                    align-items: center;
+                    justify-content: center;
+                    padding-top: 0 !important;
+                    padding-bottom: 0 !important;
+                    min-height: 48px;
+                    line-height: 1.2 !important;
+                }
+
+                #masthead .header-menu-container .main-menu > li.menu-item-has-children {
+                    position: relative;
+                }
+
+                #masthead .header-menu-container .main-menu > li.menu-item-has-children:after {
+                    content: "";
+                    position: absolute;
+                    top: 100%;
+                    left: 50%;
+                    width: 100%;
+                    min-width: 360px;
+                    height: 24px;
+                    transform: translateX(-50%);
+                    pointer-events: auto;
+                }
+
+                #masthead .header-menu-container .main-menu > li.menu-item-has-children .dm-solutions-dropdown {
+                    position: absolute;
+                    top: 100%;
+                    left: 50%;
+                    transform: translate(-50%, 34px);
+                    width: 380px;
+                    min-width: 380px;
+                    margin: 0;
+                    padding: 24px 22px;
+                    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);
+                    backdrop-filter: blur(20px);
+                    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+                    border: 1px solid rgba(255, 255, 255, 0.09);
+                    border-radius: 18px;
+                    opacity: 0;
+                    visibility: hidden;
+                    pointer-events: none;
+                    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
+                    z-index: 20;
+                }
+
+                /* .main-menu li:not(:last-of-type) (site.css) is a descendant
+                   selector that also matches these nested <li>s, pushing every
+                   row but the last 12px to the right. Cancel it here. */
+                #masthead .header-menu-container .main-menu > li.menu-item-has-children .dm-solutions-dropdown li {
+                    margin-right: 0 !important;
+                }
+
+                #masthead .header-menu-container .main-menu > li.menu-item-has-children .dm-solutions-dropdown li + li {
+                    margin-top: 10px;
+                }
+
+                #masthead .header-menu-container .main-menu > li.menu-item-has-children .dm-solutions-dropdown li > a {
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-start;
+                    gap: 12px;
+                    height: 76px;
+                    padding: 0 34px;
+                    border-radius: 12px;
+                    /* 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
+                       falls back to the sitewide light-theme value (#111111),
+                       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-weight: 600;
+                    line-height: 1.25;
+                    letter-spacing: normal;
+                    white-space: nowrap;
+                    text-decoration: none;
+                    transition: background-color 0.25s ease, color 0.25s ease, padding-left 0.25s ease;
+                }
+
+                #masthead .header-menu-container .main-menu > li.menu-item-has-children .dm-solutions-dropdown li > a:before {
+                    content: "";
+                    width: 11px;
+                    height: 11px;
+                    margin-left: -23px;
+                    flex: 0 0 11px;
+                    background-color: #c01227;
+                    opacity: 0;
+                    transform: translateX(-10px);
+                    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12 12 4'/%3E%3Cpath d='M5 4h7v7'/%3E%3C/svg%3E");
+                    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12 12 4'/%3E%3Cpath d='M5 4h7v7'/%3E%3C/svg%3E");
+                    -webkit-mask-repeat: no-repeat;
+                    mask-repeat: no-repeat;
+                    -webkit-mask-position: center;
+                    mask-position: center;
+                    -webkit-mask-size: contain;
+                    mask-size: contain;
+                    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, background-color 0.25s ease-in-out;
+                }
+
+                #masthead .header-menu-container .main-menu > li.menu-item-has-children .dm-solutions-dropdown li > a:hover,
+                #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;
+                }
+
+                #masthead .header-menu-container .main-menu > li.menu-item-has-children .dm-solutions-dropdown li > a:hover:before,
+                #masthead .header-menu-container .main-menu > li.menu-item-has-children .dm-solutions-dropdown li > a:focus-visible:before {
+                    opacity: 1;
+                    transform: translateX(0);
+                    background-color: #c01227;
+                }
+
+                #masthead .header-menu-container .main-menu > li.menu-item-has-children .dm-solutions-dropdown li.dm-child-active > a {
+                    color: #ffffff;
+                    font-weight: 700;
+                }
+
+                #masthead .header-menu-container .main-menu > li.menu-item-has-children:hover .dm-solutions-dropdown,
+                #masthead .header-menu-container .main-menu > li.menu-item-has-children:focus-within .dm-solutions-dropdown,
+                #masthead .header-menu-container .main-menu > li.menu-item-has-children > a[aria-expanded="true"] ~ .dm-solutions-dropdown {
+                    opacity: 1;
+                    visibility: visible;
+                    pointer-events: auto;
+                    transform: translate(-50%, 24px);
+                }
+
+                #masthead .header-menu-container .main-menu > li.menu-item-has-children:hover > a:after,
+                #masthead .header-menu-container .main-menu > li.menu-item-has-children:focus-within > a:after,
+                #masthead .header-menu-container .main-menu > li.menu-item-has-children > a[aria-expanded="true"]:after {
+                    transform: rotate(180deg);
+                }
+
+                /* Outlines are globally suppressed for .main-menu>li>a above;
+                   restore a visible focus ring scoped only to this trigger. */
+                #masthead .header-menu-container .main-menu > li.menu-item-has-children > a:focus-visible {
+                    outline: 2px solid var(--logico-dark-text-color, #ffffff);
+                    outline-offset: 6px;
+                    border-radius: 4px;
+                }
+            }
+
+            #masthead .mobile-header-menu-container .dm-mobile-solutions-row {
+                display: flex !important;
+                align-items: center;
+                justify-content: space-between;
+            }
+
+            #masthead .mobile-header-menu-container .dm-mobile-solutions-row > a {
+                display: block;
+                flex: 1 1 auto;
+                padding: 0.75em 0;
+                color: var(--logico-default-text-color);
+                text-decoration: none;
+            }
+
+            #masthead .mobile-header-menu-container .dm-mobile-solutions-toggle {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                width: 44px;
+                height: 44px;
+                margin: 0;
+                padding: 0;
+                flex: 0 0 44px;
+                border: 0;
+                background: transparent;
+                color: var(--logico-default-text-color);
+                cursor: pointer;
+            }
+
+            #masthead .mobile-header-menu-container .dm-mobile-solutions-toggle:focus-visible {
+                outline: 2px solid currentColor;
+                outline-offset: 2px;
+                border-radius: 4px;
+            }
+
+            #masthead .mobile-header-menu-container .dm-accordion-chevron {
+                display: inline-block;
+                width: 0.7em;
+                height: 0.7em;
+                flex: 0 0 auto;
+                background-color: currentColor;
+                -webkit-mask-repeat: no-repeat;
+                mask-repeat: no-repeat;
+                -webkit-mask-position: center;
+                mask-position: center;
+                -webkit-mask-size: contain;
+                mask-size: contain;
+                -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+                transition: transform 0.3s ease;
+            }
+
+            #masthead .mobile-header-menu-container .dm-mobile-solutions.dm-accordion-open .dm-accordion-chevron {
+                transform: rotate(180deg);
+            }
+
+            #masthead .mobile-header-menu-container .dm-mobile-solutions-panel {
+                max-height: 0;
+                overflow: hidden;
+                list-style: none;
+                margin: 0;
+                padding: 0;
+                padding-left: 18px;
+                transition: max-height 0.3s ease;
+            }
+
+            #masthead .mobile-header-menu-container .dm-mobile-solutions.dm-accordion-open .dm-mobile-solutions-panel {
+                max-height: 160px;
+            }
+
+            #masthead .mobile-header-menu-container .dm-mobile-solutions-panel > li {
+                font-size: 0.9em;
+            }
+
+            /* .mobile-header-menu-container ul.main-menu>li>a (site.css) only
+               matches direct children of .main-menu, so these nested links
+               fall through to the sitewide generic underlined-anchor default.
+               Restore the plain sibling-item look explicitly. */
+            #masthead .mobile-header-menu-container .dm-mobile-solutions-panel > li > a {
+                display: block;
+                padding: 0.35em 0;
+                color: var(--logico-default-text-color);
+                text-decoration: none;
+            }
+
+            /* A vendor li:before rule (checkmark bullet, likely intended for a
+               feature-list style elsewhere) leaks through here since the reset
+               at .mobile-header-menu-container ul.main-menu>li:before only
+               matches direct children of .main-menu, not this nested li.
+               Suppress it on both the <li> and <a> — these child rows aren't
+               top-level nav items and shouldn't carry any bullet/indicator. */
+            #masthead .mobile-header-menu-container .dm-mobile-solutions-panel > li:before,
+            #masthead .mobile-header-menu-container .dm-mobile-solutions-panel > li > a:before {
+                content: none !important;
+                display: none !important;
+            }
+
+            #masthead .mobile-header-menu-container .dm-mobile-solutions-panel > li.dm-child-active > a {
+                color: var(--logico-light-text-color);
+                text-decoration: underline;
+            }
           `,
         }}
       />

src/components/sections/AirFreightAdvantages.tsx

@@ -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 Wings is India&apos;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>
+    </>
+  );
+}

src/components/sections/AirFreightBanner.tsx

@@ -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="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>
+    </>
+  );
+}

src/components/sections/AirFreightBenefits.tsx

@@ -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>
+    </>
+  );
+}

src/components/sections/AirFreightCTA.tsx

@@ -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 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>
+    </>
+  );
+}

src/components/sections/AirFreightCoverage.tsx

@@ -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>
+    </>
+  );
+}

src/components/sections/AirFreightFAQ.tsx

@@ -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 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>
+    </>
+  );
+}

src/components/sections/AirFreightFleet.tsx

@@ -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>
+    </>
+  );
+}

src/components/sections/AirFreightHero.tsx

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

src/components/sections/AirFreightServices.tsx

@@ -0,0 +1,208 @@
+"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 &amp; Services /</div>
+              <h5 className="af3-heading">Products &amp; 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>
+    </>
+  );
+}

src/components/sections/AirFreightWorkflow.tsx

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