update Entrepreneurship
This commit is contained in:
BIN
public/images/wings-heroslider4.png
Normal file
BIN
public/images/wings-heroslider4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
BIN
public/images/women-hero-silder-1.png
Normal file
BIN
public/images/women-hero-silder-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
public/images/women-hero-slider-2.png
Normal file
BIN
public/images/women-hero-slider-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
public/images/women-hero-slider-3.png
Normal file
BIN
public/images/women-hero-slider-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
123
src/app/empowerment/page.tsx
Normal file
123
src/app/empowerment/page.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import EmpowermentHero from "@/components/sections/EmpowermentHero";
|
||||
import EmpowermentVision from "@/components/sections/EmpowermentVision";
|
||||
import EmpowermentStory from "@/components/sections/EmpowermentStory";
|
||||
import WomenSection from "@/components/sections/WomenSection";
|
||||
import EmpowermentPrograms from "@/components/sections/EmpowermentPrograms";
|
||||
import EmpowermentImpact from "@/components/sections/EmpowermentImpact";
|
||||
import EmpowermentHowItWorks from "@/components/sections/EmpowermentHowItWorks";
|
||||
import EmpowermentStories from "@/components/sections/EmpowermentStories";
|
||||
import EmpowermentPartners from "@/components/sections/EmpowermentPartners";
|
||||
import EmpowermentCTA from "@/components/sections/EmpowermentCTA";
|
||||
|
||||
const WINGS_WOMEN_STATS = [
|
||||
{ value: "500", plus: "+", label: "Women Founders" },
|
||||
{ value: "35", plus: "+", label: "Cities Active" },
|
||||
{ value: "100", plus: "+", label: "Enterprises Launched" },
|
||||
];
|
||||
|
||||
const WINGS_WOMEN_CARDS = [
|
||||
{
|
||||
title: "Venture Building",
|
||||
desc: "End-to-end support for women launching logistics enterprises — from ideation to market entry.",
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M4 19V5" />
|
||||
<path d="M4 7h12l-2 4 2 4H4" />
|
||||
<path d="M18 19h2" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Entrepreneurship",
|
||||
desc: "Women building, owning, and scaling sustainable businesses within the logistics ecosystem.",
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
|
||||
<rect x="3" y="7" width="18" height="13" rx="2" />
|
||||
<path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h18" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Founder Networks",
|
||||
desc: "Peer communities and strategic connections that accelerate growth and open new markets.",
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="8" cy="8" r="3" />
|
||||
<circle cx="16" cy="8" r="3" />
|
||||
<path d="M2.5 20c.7-3.1 2.8-5 5.5-5s4.8 1.9 5.5 5" />
|
||||
<path d="M10.5 20c.7-3.1 2.8-5 5.5-5s4.8 1.9 5.5 5" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Enterprise Leadership",
|
||||
desc: "Strategic decision-making, operational excellence, and vision-driven leadership for women founders.",
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="12" cy="9" r="5" />
|
||||
<path d="M9 13.5 7.5 21 12 18l4.5 3-1.5-7.5" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export const metadata = {
|
||||
title: "Doormile Wings — Women Entrepreneurship Initiative",
|
||||
description: "Doormile Wings empowers women to build, own, and lead enterprises within the logistics ecosystem through strategic partnerships, founder networks, and entrepreneurial infrastructure.",
|
||||
alternates: {
|
||||
canonical: "https://doormile.com/empowerment",
|
||||
},
|
||||
openGraph: {
|
||||
title: "Doormile Wings — Women Entrepreneurship Initiative",
|
||||
description: "An entrepreneurial ecosystem empowering women to launch, grow, and lead logistics enterprises with strategic partnerships and industry collaboration.",
|
||||
url: "https://doormile.com/empowerment",
|
||||
siteName: "Doormile",
|
||||
type: "website",
|
||||
images: [
|
||||
{
|
||||
url: "https://doormile.com/images/wings-logo.png",
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: "Doormile Wings — Women Entrepreneurship Initiative",
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "Doormile Wings — Women Entrepreneurship Initiative",
|
||||
description: "An entrepreneurial ecosystem empowering women to launch, grow, and lead logistics enterprises with strategic partnerships and industry collaboration.",
|
||||
images: ["https://doormile.com/images/wings-logo.png"],
|
||||
},
|
||||
};
|
||||
|
||||
export default function EmpowermentPage() {
|
||||
return (
|
||||
<div id="empowerment" 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="86" className="elementor elementor-86 elementor-59 elementor-empowerment">
|
||||
<EmpowermentHero />
|
||||
<EmpowermentVision />
|
||||
<EmpowermentStory />
|
||||
<WomenSection
|
||||
eyebrow="/ Doormile Wings /"
|
||||
bannerLabel="Women Entrepreneurship"
|
||||
bannerCopy="An ecosystem where women build, own, and scale enterprises across logistics."
|
||||
ctaLabel="Explore the ecosystem"
|
||||
ctaHref="#wings-empowerment-programs"
|
||||
heading="Women Building The Next Mile"
|
||||
stats={WINGS_WOMEN_STATS}
|
||||
cards={WINGS_WOMEN_CARDS}
|
||||
/>
|
||||
<EmpowermentPrograms />
|
||||
<EmpowermentImpact />
|
||||
<EmpowermentHowItWorks />
|
||||
<EmpowermentStories />
|
||||
<EmpowermentPartners />
|
||||
<EmpowermentCTA />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -10,6 +10,27 @@ html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
SITE-WIDE STICKY FIX
|
||||
The legacy Elementor build sets `.body-container { overflow: hidden }`
|
||||
(public/css/site.css, generated — do not edit there). Any ancestor
|
||||
with non-visible overflow becomes the containing block for
|
||||
`position: sticky` descendants; since `.body-container` itself never
|
||||
actually scrolls (the real scrollbar lives on <body>), that made every
|
||||
`position: sticky` element on the site inert — it just scrolled away
|
||||
in normal flow instead of pinning.
|
||||
Note: setting overflow-x:hidden paired with overflow-y:visible gets
|
||||
silently coerced to overflow-y:auto by the CSS spec (an "auto" value on
|
||||
one axis when the other is non-visible) — which ALSO still counts as a
|
||||
scroll container and breaks sticky the same way. So this must be fully
|
||||
visible on both axes. <body> already has overflow-x: hidden site-wide
|
||||
(from the same legacy stylesheet), so horizontal bleed is still safely
|
||||
clipped there — this rule doesn't need to repeat it.
|
||||
============================================================ */
|
||||
.body-container {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
GLOBAL SPACING SYSTEM
|
||||
A single shared vertical-rhythm scale so every section uses
|
||||
|
||||
@@ -20,6 +20,7 @@ const CURRENT_PAGE_MAP: Record<string, string> = {
|
||||
"/miletruth": "miletruth",
|
||||
"/solutions": "solutions",
|
||||
"/doormile-wings": "doormile-wings",
|
||||
"/empowerment": "entarpreneurship",
|
||||
"/express": "express",
|
||||
"/about-us": "about",
|
||||
"/blog": "blogs",
|
||||
@@ -33,10 +34,10 @@ const CURRENT_PAGE_ALIASES: Record<string, string[]> = {
|
||||
// Solutions is now a plain top-level link — no child pages own its active state.
|
||||
solutions: ["solutions"],
|
||||
"doormile-wings": ["doormile-wings"],
|
||||
about: ["about", "about-us", "women"],
|
||||
entarpreneurship: ["entarpreneurship"],
|
||||
blogs: ["blogs"],
|
||||
// Company is the dropdown parent for Blogs + How It Works — active if either is.
|
||||
company: ["blogs", "how-it-works"],
|
||||
// Company is the dropdown parent for About + Blogs + How It Works — active if any is.
|
||||
company: ["blogs", "how-it-works", "about"],
|
||||
};
|
||||
|
||||
export default function Header() {
|
||||
@@ -468,8 +469,8 @@ export default function Header() {
|
||||
<li id="menu-item-10511" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10511${dmHeaderActive("solutions")}`}>
|
||||
<Link href="/solutions" prefetch>Solutions</Link>
|
||||
</li>
|
||||
<li id="menu-item-10512" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10512${dmHeaderActive("about")}`}>
|
||||
<Link href="/about-us#about" onClick={(event) => handleNavClick(event, "/about-us", "about")}>About</Link>
|
||||
<li id="menu-item-10513" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10513${dmHeaderActive("entarpreneurship")}`}>
|
||||
<Link href="/empowerment" prefetch>Entrepreneurship</Link>
|
||||
</li>
|
||||
<li
|
||||
id="menu-item-10535"
|
||||
@@ -500,6 +501,17 @@ export default function Header() {
|
||||
Company
|
||||
</a>
|
||||
<ul className="dm-solutions-dropdown">
|
||||
<li className={currentPage === "about" ? "dm-child-active" : ""}>
|
||||
<Link
|
||||
href="/about-us#about"
|
||||
onClick={(event) => {
|
||||
setDesktopCompanyOpen(false);
|
||||
handleNavClick(event, "/about-us", "about");
|
||||
}}
|
||||
>
|
||||
About
|
||||
</Link>
|
||||
</li>
|
||||
<li className={currentPage === "blogs" ? "dm-child-active" : ""}>
|
||||
<Link
|
||||
href="/blog#blogs"
|
||||
@@ -566,8 +578,8 @@ export default function Header() {
|
||||
<li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10511${dmHeaderActive("solutions")}`}>
|
||||
<Link href="/solutions" prefetch onClick={closeMobileMenu}>Solutions</Link>
|
||||
</li>
|
||||
<li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10512${dmHeaderActive("about")}`}>
|
||||
<Link href="/about-us#about" onClick={(event) => handleNavClick(event, "/about-us", "about", true)}>About</Link>
|
||||
<li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10513${dmHeaderActive("entarpreneurship")}`}>
|
||||
<Link href="/empowerment" prefetch onClick={closeMobileMenu}>Entrepreneurship</Link>
|
||||
</li>
|
||||
<li
|
||||
className={`menu-item menu-item-type-custom menu-item-10535 dm-mobile-solutions${dmHeaderActive("company")}${isMobileCompanyOpen ? " dm-accordion-open" : ""}`}
|
||||
@@ -594,6 +606,9 @@ export default function Header() {
|
||||
</button>
|
||||
</div>
|
||||
<ul className="dm-mobile-solutions-panel">
|
||||
<li className={currentPage === "about" ? "dm-child-active" : ""}>
|
||||
<Link href="/about-us#about" onClick={(event) => handleNavClick(event, "/about-us", "about", true)}>About</Link>
|
||||
</li>
|
||||
<li className={currentPage === "blogs" ? "dm-child-active" : ""}>
|
||||
<Link href="/blog#blogs" onClick={(event) => handleNavClick(event, "/blog", "blogs", true)}>Blogs</Link>
|
||||
</li>
|
||||
|
||||
162
src/components/sections/EmpowermentCTA.tsx
Normal file
162
src/components/sections/EmpowermentCTA.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
|
||||
export default function EmpowermentCTA() {
|
||||
return (
|
||||
<>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.emp-cta-wrap {
|
||||
width: calc(100% - 40px);
|
||||
margin: clamp(24px, 4vw, 40px) auto clamp(40px, 5vw, 64px);
|
||||
}
|
||||
|
||||
.emp-cta {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 28px;
|
||||
min-height: clamp(480px, 48vw, 680px);
|
||||
background: #09090b;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.emp-cta::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(180deg, rgba(9, 9, 11, 0.18) 0%, rgba(9, 9, 11, 0.52) 48%, rgba(9, 9, 11, 0.96) 100%),
|
||||
linear-gradient(90deg, rgba(9, 9, 11, 0.88) 0%, rgba(9, 9, 11, 0.35) 58%, rgba(9, 9, 11, 0.12) 100%),
|
||||
url("/images/bg-header-women.webp");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.emp-cta-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1380px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: clamp(46px, 7vw, 88px) clamp(24px, 5vw, 64px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.emp-cta-recap {
|
||||
display: flex;
|
||||
gap: clamp(28px, 4vw, 52px);
|
||||
margin-bottom: clamp(28px, 4vw, 44px);
|
||||
padding-bottom: clamp(24px, 3vw, 36px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
.emp-cta-recap-item {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.emp-cta-recap-num {
|
||||
font-size: clamp(22px, 2.4vw, 32px);
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.02em;
|
||||
color: transparent;
|
||||
-webkit-text-stroke: 1.3px rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.emp-cta-recap-label {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.6px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.emp-cta-kicker {
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 2.4px;
|
||||
text-transform: uppercase;
|
||||
color: #ff5470;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.emp-cta-title {
|
||||
max-width: 980px;
|
||||
color: #ffffff !important;
|
||||
font-size: clamp(44px, 7vw, 108px) !important;
|
||||
font-weight: 900 !important;
|
||||
line-height: 0.95 !important;
|
||||
letter-spacing: -0.06em !important;
|
||||
text-transform: uppercase !important;
|
||||
margin: 0 0 clamp(24px, 3vw, 34px);
|
||||
}
|
||||
|
||||
.emp-cta-title em {
|
||||
color: #ff5470;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.emp-cta-bottom {
|
||||
display: block;
|
||||
max-width: 1120px;
|
||||
}
|
||||
|
||||
.emp-cta-sub {
|
||||
max-width: 620px;
|
||||
font-size: 16px;
|
||||
line-height: 1.68;
|
||||
color: rgba(255, 255, 255, 0.68);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.emp-cta-wrap { width: calc(100% - 24px); }
|
||||
.emp-cta { border-radius: 22px; }
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.emp-cta { min-height: 600px; }
|
||||
.emp-cta::before { background-position: 76% center; }
|
||||
.emp-cta-title {
|
||||
font-size: clamp(36px, 11vw, 44px) !important;
|
||||
letter-spacing: -0.05em !important;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.emp-cta-recap { flex-wrap: wrap; row-gap: 14px; }
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
<div className="emp-cta-wrap">
|
||||
<section className="emp-cta" aria-labelledby="empowerment-final-cta">
|
||||
<div className="emp-cta-inner">
|
||||
<div className="emp-cta-recap">
|
||||
<div className="emp-cta-recap-item">
|
||||
<span className="emp-cta-recap-num">500+</span>
|
||||
<span className="emp-cta-recap-label">Women Founders</span>
|
||||
</div>
|
||||
<div className="emp-cta-recap-item">
|
||||
<span className="emp-cta-recap-num">100+</span>
|
||||
<span className="emp-cta-recap-label">Enterprises Launched</span>
|
||||
</div>
|
||||
<div className="emp-cta-recap-item">
|
||||
<span className="emp-cta-recap-num">25+</span>
|
||||
<span className="emp-cta-recap-label">Industry Partners</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="emp-cta-kicker">/ Build the next mile /</div>
|
||||
<h2 className="emp-cta-title" id="empowerment-final-cta">
|
||||
Build what’s <em>next.</em>
|
||||
</h2>
|
||||
<div className="emp-cta-bottom">
|
||||
<p className="emp-cta-sub">
|
||||
Join Doormile Wings in building the entrepreneurial ecosystem where women launch, grow, and lead enterprises that create lasting value across logistics.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
183
src/components/sections/EmpowermentHero.tsx
Normal file
183
src/components/sections/EmpowermentHero.tsx
Normal file
@@ -0,0 +1,183 @@
|
||||
import Link from "next/link";
|
||||
import { ScrollReveal, ShimmerText } from "@/animations/Reveal";
|
||||
|
||||
export default function EmpowermentHero() {
|
||||
return (
|
||||
<>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.eh-outer {
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.eh-section {
|
||||
position: relative;
|
||||
border-radius: 25px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
height: 800px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #07080c;
|
||||
}
|
||||
|
||||
.eh-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url("/images/women-hero-slider-2.png");
|
||||
background-size: cover;
|
||||
background-position: 30% 72%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.eh-scrim {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(7, 8, 12, 0.72) 0%, rgba(7, 8, 12, 0.5) 40%, rgba(7, 8, 12, 0.86) 100%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.eh-inner {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 0 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.eh-eyebrow {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 2.6px;
|
||||
text-transform: uppercase;
|
||||
color: #ff5470;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.eh-title {
|
||||
width: 100%;
|
||||
font-size: clamp(30px, 5.5vw, 80px) !important;
|
||||
font-weight: 800 !important;
|
||||
letter-spacing: -0.03em !important;
|
||||
line-height: 1.08 !important;
|
||||
text-transform: uppercase !important;
|
||||
color: #ffffff !important;
|
||||
margin: 0;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.eh-title .eh-soft {
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
}
|
||||
|
||||
.eh-desc {
|
||||
width: 100%;
|
||||
max-width: 680px;
|
||||
margin: 23px auto 0;
|
||||
font-size: clamp(16px, 1.35vw, 23px);
|
||||
line-height: 1.65;
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
}
|
||||
|
||||
.eh-btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 14px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.eh-btn-primary,
|
||||
.eh-btn-outline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 15px 28px;
|
||||
border-radius: 100px;
|
||||
font-weight: 800;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.eh-btn-primary {
|
||||
background: #c01227;
|
||||
color: #ffffff !important;
|
||||
border: 1.5px solid #c01227;
|
||||
}
|
||||
|
||||
.eh-btn-primary:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 14px 30px rgba(192, 18, 39, 0.4);
|
||||
}
|
||||
|
||||
.eh-btn-outline {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: #ffffff !important;
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.36);
|
||||
}
|
||||
|
||||
.eh-btn-outline:hover {
|
||||
border-color: rgba(255, 255, 255, 0.82);
|
||||
background: rgba(255, 255, 255, 0.09);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
@media (max-width: 1020px) {
|
||||
.eh-outer { padding: 10px; }
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
.eh-section { height: 600px; }
|
||||
}
|
||||
|
||||
@media (max-width: 660px) {
|
||||
.eh-title {
|
||||
font-size: clamp(20px, 7vw, 32px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.eh-section { height: 520px; }
|
||||
.eh-btn-primary, .eh-btn-outline { width: 100%; justify-content: center; padding: 14px 22px; }
|
||||
.eh-btns { width: 100%; }
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="eh-outer">
|
||||
<section className="eh-section" id="wings-empowerment-hero">
|
||||
<div className="eh-bg" aria-hidden="true" />
|
||||
<div className="eh-scrim" aria-hidden="true" />
|
||||
<ScrollReveal delay={0.05} duration={0.85} yOffset={30} className="eh-inner">
|
||||
{/* <div className="eh-eyebrow">Build the Next Mile</div> */}
|
||||
<h1 className="eh-title">
|
||||
Building <span className="eh-soft">Women</span><br />
|
||||
<ShimmerText>Entrepreneurs.</ShimmerText>
|
||||
</h1>
|
||||
<p className="eh-desc">
|
||||
Empowering ambitious women with the network, strategic partnerships, and opportunities to build, grow, and lead successful enterprises that shape the future of logistics.
|
||||
</p>
|
||||
{/* <div className="eh-btns">
|
||||
<Link href="/contact" className="eh-btn-primary">Join Doormile Wings</Link>
|
||||
<Link href="/contact" className="eh-btn-outline">Become a Partner</Link>
|
||||
</div> */}
|
||||
</ScrollReveal>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
239
src/components/sections/EmpowermentHowItWorks.tsx
Normal file
239
src/components/sections/EmpowermentHowItWorks.tsx
Normal file
@@ -0,0 +1,239 @@
|
||||
import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
|
||||
|
||||
const STEPS = [
|
||||
{ step: "01", title: "Apply", desc: "Submit your venture idea and tell us about your entrepreneurial vision." },
|
||||
{ step: "02", title: "Discovery", desc: "Identify the right market opportunity and validate your business model." },
|
||||
{ step: "03", title: "Build", desc: "Develop your enterprise with ecosystem support, mentorship, and partnerships." },
|
||||
{ step: "04", title: "Launch", desc: "Go to market with strategic backing, industry connections, and operational infrastructure." },
|
||||
{ step: "05", title: "Scale", desc: "Grow your team, expand operations, and lead your enterprise to sustainable impact." },
|
||||
];
|
||||
|
||||
export default function EmpowermentHowItWorks() {
|
||||
return (
|
||||
<>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.ehw-section {
|
||||
background: #ffffff;
|
||||
padding: var(--space-section-lg, 80px) 0 calc(var(--space-section-lg, 80px) + 32px) 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ehw-inner {
|
||||
max-width: 1380px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ehw-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-bottom: clamp(126px, calc(7vw + 60px), 172px);
|
||||
}
|
||||
|
||||
.ehw-head-reveal {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ehw-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin: 18px 0 clamp(24px, 3.5vw, 40px) 0;
|
||||
border: none;
|
||||
background-color: rgba(17, 17, 17, 0.14);
|
||||
}
|
||||
|
||||
.ehw-eyebrow {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 2.4px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(17, 17, 17, 0.42);
|
||||
}
|
||||
|
||||
.ehw-title {
|
||||
max-width: 820px;
|
||||
font-size: clamp(32px, 4vw, 54px) !important;
|
||||
font-weight: 800 !important;
|
||||
letter-spacing: -0.03em !important;
|
||||
line-height: 1.08 !important;
|
||||
text-transform: none !important;
|
||||
color: #111111 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
Premium editorial process row: five milestones in a single
|
||||
sequence, separated by thin hairline dividers (no cards, no
|
||||
shadows, no boxed containers). One flex-wrap sequence with
|
||||
responsive flex-basis handles the composition at every size —
|
||||
5-across on desktop, 3 + 2 (centered) on tablet, a single
|
||||
vertical column on mobile — from one shared markup.
|
||||
---------------------------------------------------------------- */
|
||||
.ehw-sequence {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
--ehw-gap: clamp(24px, 2.6vw, 48px);
|
||||
column-gap: var(--ehw-gap);
|
||||
row-gap: clamp(48px, 6vw, 84px);
|
||||
}
|
||||
|
||||
.ehw-step {
|
||||
position: relative;
|
||||
flex: 0 1 calc((100% - 4 * var(--ehw-gap)) / 5);
|
||||
min-width: 168px;
|
||||
padding-left: clamp(20px, 2vw, 32px);
|
||||
border-left: 1px solid rgba(17, 17, 17, 0.14);
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.ehw-step:first-child {
|
||||
border-left: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.ehw-step:hover {
|
||||
border-left-color: rgba(200, 16, 46, 0.4);
|
||||
}
|
||||
|
||||
.ehw-step-num {
|
||||
font-size: clamp(48px, 4.6vw, 78px);
|
||||
font-weight: 900;
|
||||
line-height: 0.84;
|
||||
letter-spacing: -0.03em;
|
||||
color: transparent;
|
||||
-webkit-text-stroke: 1.5px rgba(17, 17, 17, 0.24);
|
||||
margin: 0 0 18px 0;
|
||||
transition: -webkit-text-stroke-color 0.3s ease;
|
||||
}
|
||||
|
||||
.ehw-step.is-accent .ehw-step-num {
|
||||
-webkit-text-stroke: 1.5px rgba(200, 16, 46, 0.58);
|
||||
}
|
||||
|
||||
.ehw-step-kicker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.ehw-step-kicker svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
color: rgba(17, 17, 17, 0.36);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ehw-step-kicker span {
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(17, 17, 17, 0.4);
|
||||
}
|
||||
|
||||
.ehw-step.is-accent .ehw-step-kicker svg,
|
||||
.ehw-step.is-accent .ehw-step-kicker span {
|
||||
color: #c8102e;
|
||||
}
|
||||
|
||||
.ehw-step-title {
|
||||
font-size: clamp(18px, 1.4vw, 22px) !important;
|
||||
font-weight: 800 !important;
|
||||
letter-spacing: -0.02em !important;
|
||||
line-height: 1.2 !important;
|
||||
text-transform: none !important;
|
||||
color: #111111 !important;
|
||||
margin: 0 0 22px 0;
|
||||
}
|
||||
|
||||
.ehw-step-desc {
|
||||
max-width: 27ch;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: rgba(17, 17, 17, 0.55);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Tablet: 3 + 2, centered — sever the divider at the start of each row. */
|
||||
@media (max-width: 1100px) {
|
||||
.ehw-step {
|
||||
flex-basis: calc((100% - 2 * var(--ehw-gap)) / 3);
|
||||
}
|
||||
.ehw-step:nth-child(4) {
|
||||
border-left: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile: single column — dividers rotate from vertical to horizontal. */
|
||||
@media (max-width: 640px) {
|
||||
.ehw-sequence {
|
||||
row-gap: 0;
|
||||
}
|
||||
.ehw-step {
|
||||
flex-basis: 100%;
|
||||
padding-left: 0;
|
||||
padding-top: clamp(28px, 8vw, 38px);
|
||||
border-left: none;
|
||||
border-top: 1px solid rgba(17, 17, 17, 0.14);
|
||||
}
|
||||
.ehw-step:first-child {
|
||||
padding-top: 0;
|
||||
border-top: none;
|
||||
}
|
||||
.ehw-step:nth-child(4) {
|
||||
border-top: 1px solid rgba(17, 17, 17, 0.14);
|
||||
}
|
||||
.ehw-step:hover {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
.ehw-step-num {
|
||||
font-size: clamp(44px, 13vw, 56px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.ehw-section { padding-top: 48px; padding-bottom: 68px; }
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<section className="ehw-section" id="wings-empowerment-how-it-works">
|
||||
<div className="dm-section-container">
|
||||
<div className="ehw-inner">
|
||||
<div className="ehw-head">
|
||||
<ScrollReveal delay={0.05} duration={0.75} yOffset={20} className="ehw-head-reveal">
|
||||
<div className="ehw-eyebrow">/ The Founder Journey /</div>
|
||||
<hr className="ehw-divider" />
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.1} duration={0.85} yOffset={24}>
|
||||
<h2 className="ehw-title">A clear path, from idea to enterprise</h2>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<StaggerChildren className="ehw-sequence" stagger={0.12} duration={0.7} yOffset={30} triggerOnce>
|
||||
{STEPS.map((s, i) => (
|
||||
<div className={`ehw-step${i === 2 ? " is-accent" : ""}`} key={s.step}>
|
||||
<div className="ehw-step-num">{s.step}</div>
|
||||
<div className="ehw-step-kicker" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M7 17 17 7M9 7h8v8" />
|
||||
</svg>
|
||||
<span>Step</span>
|
||||
</div>
|
||||
<h3 className="ehw-step-title">{s.title}</h3>
|
||||
<p className="ehw-step-desc">{s.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</StaggerChildren>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
192
src/components/sections/EmpowermentImpact.tsx
Normal file
192
src/components/sections/EmpowermentImpact.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
import { ScrollReveal, CountUp } from "@/animations/Reveal";
|
||||
|
||||
const SECONDARY_STATS = [
|
||||
{ end: 100, suffix: "+", label: "Enterprises Launched", isCount: true },
|
||||
{ end: 25, suffix: "+", label: "Industry Partners", isCount: true },
|
||||
{ end: 15, suffix: "+", label: "Cities Active", isCount: true },
|
||||
{ value: "Millions", label: "In Economic Value Created", isCount: false },
|
||||
];
|
||||
|
||||
export default function EmpowermentImpact() {
|
||||
return (
|
||||
<>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.eim-section {
|
||||
position: relative;
|
||||
width: calc(100% - 40px);
|
||||
margin: clamp(24px, 4vw, 40px) auto;
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
background: #09090b;
|
||||
padding: clamp(64px, 8vw, 100px) clamp(24px, 5vw, 48px);
|
||||
}
|
||||
|
||||
.eim-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1380px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.eim-eyebrow {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 2.5px;
|
||||
text-transform: uppercase;
|
||||
color: #c8102e;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.eim-title {
|
||||
font-size: clamp(28px, 3.4vw, 46px) !important;
|
||||
font-weight: 800 !important;
|
||||
letter-spacing: -0.03em !important;
|
||||
line-height: 1.15 !important;
|
||||
text-transform: none !important;
|
||||
color: #ffffff !important;
|
||||
margin: 0 0 clamp(32px, 4vw, 48px) 0;
|
||||
}
|
||||
|
||||
.eim-divider {
|
||||
border: none;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
||||
margin: 0 0 clamp(40px, 5vw, 56px) 0;
|
||||
}
|
||||
|
||||
.eim-hero-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: clamp(20px, 3vw, 36px);
|
||||
margin-bottom: clamp(48px, 6vw, 72px);
|
||||
}
|
||||
|
||||
.eim-hero-num {
|
||||
font-size: clamp(90px, 13vw, 190px);
|
||||
font-weight: 800;
|
||||
line-height: 0.85;
|
||||
letter-spacing: -0.03em;
|
||||
color: transparent;
|
||||
-webkit-text-stroke: 2px #c8102e;
|
||||
}
|
||||
|
||||
.eim-hero-label {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
max-width: 90px;
|
||||
line-height: 1.4;
|
||||
padding-bottom: clamp(12px, 1.5vw, 24px);
|
||||
}
|
||||
|
||||
.eim-divider-2 {
|
||||
border: none;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
||||
margin: 0 0 clamp(40px, 5vw, 56px) 0;
|
||||
}
|
||||
|
||||
.eim-secondary-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.eim-secondary-item {
|
||||
padding-right: 24px;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.12);
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.eim-secondary-item:first-child {
|
||||
border-left: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.eim-secondary-num {
|
||||
display: block;
|
||||
font-size: clamp(32px, 3vw, 44px);
|
||||
font-weight: 800;
|
||||
color: #ff5470;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.eim-secondary-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.eim-copy {
|
||||
max-width: 720px;
|
||||
margin-top: clamp(48px, 6vw, 72px);
|
||||
font-size: 15.5px;
|
||||
line-height: 1.7;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.eim-section { width: calc(100% - 24px); border-radius: 22px; }
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.eim-hero-row { align-items: flex-start; flex-direction: column; gap: 12px; }
|
||||
.eim-hero-label { padding-bottom: 0; max-width: none; }
|
||||
.eim-secondary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
|
||||
.eim-secondary-item:nth-child(3) { border-left: none; padding-left: 0; }
|
||||
}
|
||||
|
||||
@media (max-width: 460px) {
|
||||
.eim-section { padding-top: 48px; padding-bottom: 48px; }
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<section className="eim-section" id="wings-empowerment-impact">
|
||||
<div className="eim-inner dm-section-container">
|
||||
<ScrollReveal delay={0.05} duration={0.75} yOffset={20}>
|
||||
<div className="eim-eyebrow">/ Our Impact /</div>
|
||||
<h2 className="eim-title">Growth we can measure</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<hr className="eim-divider" />
|
||||
|
||||
<ScrollReveal delay={0.08} duration={0.8} yOffset={20} className="eim-hero-row">
|
||||
<span className="eim-hero-num">
|
||||
<CountUp end={500} suffix="+" duration={2.2} triggerOnce />
|
||||
</span>
|
||||
<span className="eim-hero-label">Women-Led Enterprises In The Ecosystem</span>
|
||||
</ScrollReveal>
|
||||
|
||||
<hr className="eim-divider-2" />
|
||||
|
||||
<ScrollReveal delay={0.1} duration={0.8} yOffset={20}>
|
||||
<div className="eim-secondary-row">
|
||||
{SECONDARY_STATS.map((s) => (
|
||||
<div className="eim-secondary-item" key={s.label}>
|
||||
<span className="eim-secondary-num">
|
||||
{s.isCount ? <CountUp end={s.end as number} suffix={s.suffix} duration={2} triggerOnce /> : s.value}
|
||||
</span>
|
||||
<span className="eim-secondary-label">{s.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.12} duration={0.75} yOffset={20} className="eim-copy">
|
||||
<p>
|
||||
Every number on this page represents a woman who walked into a room with an idea and
|
||||
walked out with a business. An enterprise launched, a partnership secured, a market entered — each is a
|
||||
marker of real economic impact, not a statistic collected for its own sake.
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
290
src/components/sections/EmpowermentPartners.tsx
Normal file
290
src/components/sections/EmpowermentPartners.tsx
Normal file
@@ -0,0 +1,290 @@
|
||||
import Link from "next/link";
|
||||
import { ScrollReveal } from "@/animations/Reveal";
|
||||
|
||||
const PARTNER_TYPES = [
|
||||
{
|
||||
title: "Industry Partners",
|
||||
desc: "Strategic alliances with logistics operators, supply chain leaders, and distribution networks that open doors for women-led enterprises.",
|
||||
},
|
||||
{
|
||||
title: "Technology Partners",
|
||||
desc: "Platforms, tools, and infrastructure that give founders the operational edge to compete and scale efficiently.",
|
||||
},
|
||||
{
|
||||
title: "Community Networks",
|
||||
desc: "Founder communities, women's business networks, and ecosystem builders who extend reach and amplify impact.",
|
||||
},
|
||||
{
|
||||
title: "Investment Partners",
|
||||
desc: "Funding access, grant programs, angel networks, and capital partners aligned with women-led enterprise growth.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function EmpowermentPartners() {
|
||||
return (
|
||||
<>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.epn-section {
|
||||
position: relative;
|
||||
width: calc(100% - 40px);
|
||||
margin: clamp(24px, 4vw, 40px) auto;
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
background: #09090b;
|
||||
padding: clamp(68px, 8vw, 112px) 0;
|
||||
}
|
||||
|
||||
.epn-section::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(120deg, rgba(9, 9, 11, 0.98) 0%, rgba(9, 9, 11, 0.88) 54%, rgba(192, 18, 39, 0.18) 100%),
|
||||
url("/images/wings-heroslider3.png");
|
||||
background-size: cover;
|
||||
background-position: center 70%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.epn-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1380px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.epn-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-bottom: clamp(50px, 7vw, 84px);
|
||||
}
|
||||
|
||||
.epn-head-reveal {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.epn-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin: 18px 0 clamp(24px, 3.5vw, 40px) 0;
|
||||
border: none;
|
||||
background-color: rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
.epn-eyebrow {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 2.5px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.52);
|
||||
}
|
||||
|
||||
.epn-title {
|
||||
max-width: 930px;
|
||||
font-size: clamp(42px, 6.3vw, 90px) !important;
|
||||
font-weight: 800 !important;
|
||||
letter-spacing: -0.055em !important;
|
||||
line-height: 0.98 !important;
|
||||
text-transform: uppercase !important;
|
||||
color: #ffffff !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.epn-title em {
|
||||
color: #ff5470;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.epn-body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(280px, 0.46fr) minmax(0, 1fr);
|
||||
gap: clamp(32px, 5vw, 72px);
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.epn-manifesto {
|
||||
border-left: 4px solid #c8102e;
|
||||
padding-left: clamp(22px, 3vw, 36px);
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.epn-intro {
|
||||
font-size: clamp(22px, 2.5vw, 36px);
|
||||
font-weight: 800;
|
||||
line-height: 1.12;
|
||||
letter-spacing: -0.035em;
|
||||
color: #ffffff;
|
||||
margin: 0 0 22px;
|
||||
}
|
||||
|
||||
.epn-note {
|
||||
font-size: 15.5px;
|
||||
line-height: 1.68;
|
||||
color: rgba(255, 255, 255, 0.62);
|
||||
margin: 0;
|
||||
max-width: 38ch;
|
||||
}
|
||||
|
||||
.epn-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
.epn-card {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 70px minmax(0, 1fr) 32px;
|
||||
align-items: center;
|
||||
gap: clamp(18px, 3vw, 40px);
|
||||
padding: clamp(22px, 2.6vw, 32px) clamp(4px, 1vw, 16px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
|
||||
border-left: 2px solid transparent;
|
||||
transition: border-color 0.3s ease, padding-left 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.epn-card:hover {
|
||||
border-left-color: #c8102e;
|
||||
background: rgba(200, 16, 46, 0.06);
|
||||
padding-left: clamp(20px, 2.5vw, 32px);
|
||||
}
|
||||
|
||||
.epn-card-index {
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
.epn-card-title {
|
||||
font-size: clamp(22px, 2.2vw, 30px) !important;
|
||||
font-weight: 900 !important;
|
||||
line-height: 1.1 !important;
|
||||
letter-spacing: -0.03em !important;
|
||||
text-transform: none !important;
|
||||
color: #ffffff !important;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.epn-card-desc {
|
||||
max-width: 46ch;
|
||||
font-size: 14.5px;
|
||||
line-height: 1.6;
|
||||
color: rgba(255, 255, 255, 0.58);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.epn-card-arrow {
|
||||
display: flex;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
|
||||
}
|
||||
|
||||
.epn-card:hover .epn-card-arrow {
|
||||
transform: translateX(4px);
|
||||
color: #ff5470;
|
||||
}
|
||||
|
||||
.epn-cta {
|
||||
margin-top: clamp(42px, 5vw, 64px);
|
||||
}
|
||||
|
||||
.epn-cta-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 16px 36px;
|
||||
border-radius: 100px;
|
||||
background: #c01227;
|
||||
color: #ffffff !important;
|
||||
font-weight: 800;
|
||||
font-size: 15px;
|
||||
text-decoration: none !important;
|
||||
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
|
||||
}
|
||||
|
||||
.epn-cta-btn:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 14px 30px rgba(192, 18, 39, 0.35);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.epn-section { width: calc(100% - 24px); border-radius: 22px; }
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.epn-head,
|
||||
.epn-body { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.epn-title {
|
||||
font-size: clamp(34px, 10vw, 40px) !important;
|
||||
letter-spacing: -0.045em !important;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.epn-card {
|
||||
grid-template-columns: 44px minmax(0, 1fr);
|
||||
}
|
||||
.epn-card-arrow { display: none; }
|
||||
}
|
||||
|
||||
@media (max-width: 460px) {
|
||||
.epn-section { padding-top: 54px; padding-bottom: 54px; }
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<section className="epn-section" id="wings-empowerment-partners">
|
||||
<div className="dm-section-container">
|
||||
<div className="epn-inner">
|
||||
<div className="epn-head">
|
||||
<ScrollReveal delay={0.05} duration={0.75} yOffset={20} className="epn-head-reveal">
|
||||
<div className="epn-eyebrow">/ Collaboration /</div>
|
||||
<hr className="epn-divider" />
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.1} duration={0.85} yOffset={24}>
|
||||
<h2 className="epn-title">Partnership is how <em>ecosystems grow.</em></h2>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<div className="epn-body">
|
||||
<ScrollReveal delay={0.08} duration={0.8} yOffset={22} className="epn-manifesto">
|
||||
<p className="epn-intro">The strongest ecosystems are built by many hands.</p>
|
||||
<p className="epn-note">
|
||||
Wings partners bring industry access, strategic infrastructure, capital, and networks. Together, we build the foundation women-led enterprises need to thrive.
|
||||
</p>
|
||||
{/* <div className="epn-cta">
|
||||
<Link href="/contact" className="epn-cta-btn">Become a Partner</Link>
|
||||
</div> */}
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.12} duration={0.8} yOffset={22}>
|
||||
<div className="epn-grid">
|
||||
{PARTNER_TYPES.map((p, i) => (
|
||||
<article className="epn-card" key={p.title}>
|
||||
<span className="epn-card-index">{String(i + 1).padStart(2, "0")}</span>
|
||||
<div>
|
||||
<h3 className="epn-card-title">{p.title}</h3>
|
||||
<p className="epn-card-desc">{p.desc}</p>
|
||||
</div>
|
||||
<span className="epn-card-arrow" aria-hidden="true">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M5 12h14M13 6l6 6-6 6" />
|
||||
</svg>
|
||||
</span>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
405
src/components/sections/EmpowermentPrograms.tsx
Normal file
405
src/components/sections/EmpowermentPrograms.tsx
Normal file
@@ -0,0 +1,405 @@
|
||||
import Link from "next/link";
|
||||
import { ScrollReveal } from "@/animations/Reveal";
|
||||
import IndustryWorldMap from "./IndustryWorldMap";
|
||||
|
||||
const PROGRAMS = [
|
||||
{
|
||||
title: "Venture Launchpad",
|
||||
desc: "Business model validation, market entry strategy, entity formation, and go-to-market execution for women-led logistics enterprises.",
|
||||
type: "Start building",
|
||||
},
|
||||
{
|
||||
title: "Strategic Partnerships",
|
||||
desc: "Direct access to supply chain networks, B2B relationships, industry alliances, and commercial agreements that accelerate growth.",
|
||||
type: "Connect and grow",
|
||||
},
|
||||
{
|
||||
title: "Founder Mentorship",
|
||||
desc: "One-on-one guidance from established entrepreneurs, operators, and investors who understand what it takes to scale.",
|
||||
type: "Learn from builders",
|
||||
},
|
||||
{
|
||||
title: "Growth & Scale",
|
||||
desc: "Operational expansion frameworks, team building, funding readiness, and sustainable unit economics for ventures ready to grow.",
|
||||
type: "Scale with confidence",
|
||||
},
|
||||
{
|
||||
title: "Industry Immersion",
|
||||
desc: "Real exposure to logistics operations, supply chain infrastructure, and distribution networks before founders commit to a vertical.",
|
||||
type: "See the opportunity",
|
||||
},
|
||||
];
|
||||
|
||||
export default function EmpowermentPrograms() {
|
||||
return (
|
||||
<>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.epr-section {
|
||||
background: #ffffff;
|
||||
padding: clamp(78px, 9vw, 132px) 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.epr-inner {
|
||||
max-width: 1380px;
|
||||
min-width: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.epr-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-bottom: clamp(54px, 7vw, 86px);
|
||||
}
|
||||
|
||||
.epr-head-reveal {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.epr-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin: 18px 0 clamp(24px, 3.5vw, 40px) 0;
|
||||
border: none;
|
||||
background-color: rgba(17, 17, 17, 0.14);
|
||||
}
|
||||
|
||||
.epr-eyebrow {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 2.4px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(17, 17, 17, 0.42);
|
||||
}
|
||||
|
||||
.epr-title {
|
||||
max-width: 950px;
|
||||
font-size: clamp(42px, 6.2vw, 88px) !important;
|
||||
font-weight: 800 !important;
|
||||
letter-spacing: -0.055em !important;
|
||||
line-height: 0.98 !important;
|
||||
text-transform: uppercase !important;
|
||||
color: #111111 !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.epr-stage {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(300px, 0.38fr) minmax(0, 0.62fr);
|
||||
gap: clamp(32px, 5vw, 78px);
|
||||
align-items: start;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.epr-stage > * {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.epr-aside {
|
||||
position: sticky;
|
||||
top: 110px;
|
||||
min-width: 0;
|
||||
min-height: clamp(480px, 44vw, 660px);
|
||||
padding: clamp(18px, 3vw, 34px) 0 clamp(24px, 3.5vw, 42px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
.epr-aside-map {
|
||||
position: absolute;
|
||||
inset: 8% -22% 8% -28%;
|
||||
z-index: 0;
|
||||
opacity: 0.22;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.epr-aside-map canvas {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.epr-aside-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
gap: clamp(18px, 2.2vw, 28px);
|
||||
}
|
||||
|
||||
.epr-aside-num {
|
||||
position: relative;
|
||||
font-size: clamp(164px, 17vw, 300px);
|
||||
font-weight: 900;
|
||||
line-height: 0.78;
|
||||
letter-spacing: -0.06em;
|
||||
color: transparent;
|
||||
-webkit-text-stroke: 2px rgba(200, 16, 46, 0.2);
|
||||
}
|
||||
|
||||
.epr-aside-copy {
|
||||
position: relative;
|
||||
max-width: 12ch;
|
||||
font-size: clamp(30px, 3.6vw, 56px);
|
||||
font-weight: 800;
|
||||
line-height: 0.98;
|
||||
letter-spacing: -0.055em;
|
||||
text-transform: uppercase;
|
||||
color: #111111;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.epr-aside-copy em {
|
||||
font-style: normal;
|
||||
color: #c8102e;
|
||||
}
|
||||
|
||||
.epr-aside-desc {
|
||||
position: relative;
|
||||
max-width: 34ch;
|
||||
font-size: 15.5px;
|
||||
line-height: 1.65;
|
||||
color: rgba(17, 17, 17, 0.58);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.epr-list {
|
||||
display: grid;
|
||||
gap: clamp(28px, 4vw, 52px);
|
||||
}
|
||||
|
||||
.epr-row {
|
||||
display: grid;
|
||||
grid-template-columns: 110px minmax(0, 1fr);
|
||||
gap: clamp(22px, 4vw, 58px);
|
||||
padding-bottom: clamp(28px, 4vw, 52px);
|
||||
border-bottom: 1px solid rgba(17, 17, 17, 0.14);
|
||||
}
|
||||
|
||||
.epr-row:nth-child(even) {
|
||||
margin-left: clamp(0px, 7vw, 96px);
|
||||
}
|
||||
|
||||
.epr-row-index {
|
||||
font-size: clamp(38px, 4.2vw, 62px);
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.05em;
|
||||
color: #c8102e;
|
||||
}
|
||||
|
||||
.epr-row-featured {
|
||||
padding: clamp(28px, 4vw, 44px) clamp(24px, 3vw, 40px);
|
||||
background: #09090b;
|
||||
border-radius: 22px;
|
||||
border-bottom: none;
|
||||
margin-bottom: clamp(28px, 4vw, 52px);
|
||||
}
|
||||
|
||||
.epr-row-featured .epr-row-index {
|
||||
color: rgba(255, 255, 255, 0.22);
|
||||
-webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.epr-row-featured .epr-row-title {
|
||||
font-size: clamp(32px, 4vw, 64px) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.epr-row-featured .epr-row-desc {
|
||||
color: rgba(255, 255, 255, 0.62);
|
||||
}
|
||||
|
||||
.epr-row-flag {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1.3px;
|
||||
text-transform: uppercase;
|
||||
color: #ffffff;
|
||||
background: #c8102e;
|
||||
padding: 6px 14px;
|
||||
border-radius: 100px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.epr-row-type {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1.7px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(17, 17, 17, 0.42);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.epr-row-featured .epr-row-type {
|
||||
color: rgba(255, 255, 255, 0.42);
|
||||
}
|
||||
|
||||
.epr-row-title {
|
||||
font-size: clamp(28px, 3.4vw, 52px) !important;
|
||||
font-weight: 800 !important;
|
||||
letter-spacing: -0.045em !important;
|
||||
line-height: 1.02 !important;
|
||||
text-transform: uppercase !important;
|
||||
color: #111111 !important;
|
||||
margin: 0 0 14px 0;
|
||||
}
|
||||
|
||||
.epr-row-desc {
|
||||
max-width: 660px;
|
||||
font-size: 15.5px;
|
||||
line-height: 1.65;
|
||||
color: rgba(17, 17, 17, 0.58);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.epr-cta {
|
||||
margin-top: clamp(48px, 6vw, 72px);
|
||||
}
|
||||
|
||||
.epr-cta-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: #111111 !important;
|
||||
text-decoration: none !important;
|
||||
border-bottom: 1.5px solid rgba(17, 17, 17, 0.2);
|
||||
padding-bottom: 5px;
|
||||
transition: border-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.epr-cta-link:hover {
|
||||
color: #c8102e !important;
|
||||
border-color: #c8102e;
|
||||
}
|
||||
|
||||
/* Laptop: sticky stays enabled, just a narrower gutter. */
|
||||
@media (max-width: 1180px) {
|
||||
.epr-stage { grid-template-columns: minmax(220px, 0.34fr) minmax(0, 0.66fr); gap: clamp(28px, 4vw, 46px); }
|
||||
.epr-aside { min-height: 420px; }
|
||||
.epr-row:nth-child(even) { margin-left: 0; }
|
||||
}
|
||||
|
||||
/* Tablet: sticky disabled — the aside scrolls in normal flow instead
|
||||
of pinning, since there's no longer enough vertical runway next to
|
||||
the (now narrower, shorter) program list for pinning to read well. */
|
||||
@media (max-width: 1023px) {
|
||||
.epr-aside {
|
||||
position: relative;
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.epr-stage { grid-template-columns: 1fr; }
|
||||
.epr-aside {
|
||||
position: relative;
|
||||
top: auto;
|
||||
min-height: 300px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: clamp(24px, 7vw, 38px);
|
||||
}
|
||||
.epr-aside-map {
|
||||
inset: -8% -18% 0 -20%;
|
||||
opacity: 0.18;
|
||||
}
|
||||
.epr-aside-content {
|
||||
gap: 20px;
|
||||
}
|
||||
.epr-aside-num {
|
||||
font-size: clamp(128px, 34vw, 180px);
|
||||
}
|
||||
.epr-aside-copy {
|
||||
max-width: 11ch;
|
||||
font-size: clamp(34px, 10vw, 48px);
|
||||
}
|
||||
.epr-aside-desc {
|
||||
max-width: 32ch;
|
||||
font-size: 14.5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.epr-section { padding-top: 54px; padding-bottom: 54px; }
|
||||
.epr-title {
|
||||
font-size: clamp(34px, 10vw, 40px) !important;
|
||||
letter-spacing: -0.045em !important;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.epr-row-title {
|
||||
font-size: clamp(27px, 8.5vw, 36px) !important;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.epr-row { grid-template-columns: 1fr; gap: 12px; }
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<section className="epr-section" id="wings-empowerment-programs">
|
||||
<div className="dm-section-container">
|
||||
<div className="epr-inner">
|
||||
<div className="epr-head">
|
||||
<ScrollReveal delay={0.05} duration={0.75} yOffset={20} className="epr-head-reveal">
|
||||
<div className="epr-eyebrow">/ Entrepreneurship Pillars /</div>
|
||||
<hr className="epr-divider" />
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.1} duration={0.85} yOffset={24}>
|
||||
<h2 className="epr-title">Every pillar is built around ownership.</h2>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<div className="epr-stage">
|
||||
<aside className="epr-aside">
|
||||
<div className="epr-aside-map" aria-hidden="true">
|
||||
<IndustryWorldMap />
|
||||
</div>
|
||||
<ScrollReveal delay={0.05} duration={0.8} yOffset={24} className="epr-aside-content">
|
||||
<div className="epr-aside-num">05</div>
|
||||
<p className="epr-aside-copy">Building tomorrow’s <em>women entrepreneurs.</em></p>
|
||||
<p className="epr-aside-desc">
|
||||
Every enterprise starts with one decision. Our pillars move women from idea to ownership through mentorship, real industry partnerships, and hands-on venture building across the logistics ecosystem.
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</aside>
|
||||
|
||||
<div>
|
||||
<ScrollReveal delay={0.1} duration={0.8} yOffset={24}>
|
||||
<div className="epr-list">
|
||||
{PROGRAMS.map((p, i) => (
|
||||
<article className={`epr-row${i === 0 ? " epr-row-featured" : ""}`} key={p.title}>
|
||||
<div className="epr-row-index">{String(i + 1).padStart(2, "0")}</div>
|
||||
<div>
|
||||
{i === 0 && <span className="epr-row-flag">Where most founders begin</span>}
|
||||
<span className="epr-row-type">{p.type}</span>
|
||||
<h3 className="epr-row-title">{p.title}</h3>
|
||||
<p className="epr-row-desc">{p.desc}</p>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="epr-cta">
|
||||
<Link href="/contact" className="epr-cta-link">
|
||||
Start your venture
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M5 12h14M13 6l6 6-6 6" />
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
335
src/components/sections/EmpowermentStories.tsx
Normal file
335
src/components/sections/EmpowermentStories.tsx
Normal file
@@ -0,0 +1,335 @@
|
||||
import Image from "next/image";
|
||||
import { ScrollReveal } from "@/animations/Reveal";
|
||||
|
||||
|
||||
|
||||
export default function EmpowermentStories() {
|
||||
return (
|
||||
<>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.est-section {
|
||||
position: relative;
|
||||
background: #ffffff;
|
||||
padding-top: clamp(24px, 3vw, 48px);
|
||||
padding-bottom: clamp(78px, 9vw, 132px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.est-inner {
|
||||
max-width: 1380px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.est-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-bottom: clamp(54px, 7vw, 86px);
|
||||
}
|
||||
|
||||
.est-head-reveal {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.est-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin: 18px 0 clamp(24px, 3.5vw, 40px) 0;
|
||||
border: none;
|
||||
background-color: rgba(17, 17, 17, 0.14);
|
||||
}
|
||||
|
||||
.est-eyebrow {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 2.4px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(17, 17, 17, 0.42);
|
||||
}
|
||||
|
||||
.est-title {
|
||||
max-width: 940px;
|
||||
font-size: clamp(42px, 6.3vw, 90px) !important;
|
||||
font-weight: 800 !important;
|
||||
letter-spacing: -0.055em !important;
|
||||
line-height: 0.98 !important;
|
||||
text-transform: uppercase !important;
|
||||
color: #111111 !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.est-feature {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.94fr) minmax(340px, 0.64fr);
|
||||
gap: clamp(28px, 4vw, 62px);
|
||||
align-items: stretch;
|
||||
margin-bottom: clamp(44px, 6vw, 76px);
|
||||
}
|
||||
|
||||
.est-photo {
|
||||
position: relative;
|
||||
min-height: clamp(460px, 48vw, 680px);
|
||||
border-radius: 26px;
|
||||
overflow: hidden;
|
||||
background: #09090b;
|
||||
}
|
||||
|
||||
.est-photo img {
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.est-photo::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, rgba(9, 9, 11, 0) 34%, rgba(9, 9, 11, 0.72) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.est-photo-caption {
|
||||
position: absolute;
|
||||
left: clamp(24px, 3vw, 42px);
|
||||
right: clamp(24px, 3vw, 42px);
|
||||
bottom: clamp(24px, 3vw, 42px);
|
||||
z-index: 1;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.est-photo-caption span {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1.7px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.est-photo-caption strong {
|
||||
display: block;
|
||||
font-size: clamp(24px, 3vw, 42px);
|
||||
font-weight: 900;
|
||||
line-height: 1.02;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.est-copy {
|
||||
border-radius: 26px;
|
||||
background: #09090b;
|
||||
color: #ffffff;
|
||||
padding: clamp(34px, 5vw, 62px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.est-copy::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
right: -120px;
|
||||
top: -120px;
|
||||
background: radial-gradient(circle, rgba(200, 16, 46, 0.42), transparent 68%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.est-quote-mark {
|
||||
position: relative;
|
||||
font-family: Georgia, serif;
|
||||
font-size: 92px;
|
||||
line-height: 0.8;
|
||||
color: #c8102e;
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.est-quote-text {
|
||||
position: relative;
|
||||
font-size: clamp(25px, 3vw, 44px);
|
||||
font-weight: 800;
|
||||
line-height: 1.12;
|
||||
letter-spacing: -0.04em;
|
||||
color: #ffffff;
|
||||
margin: 0 0 28px 0;
|
||||
}
|
||||
|
||||
.est-narrative {
|
||||
position: relative;
|
||||
font-size: 15.5px;
|
||||
line-height: 1.68;
|
||||
color: rgba(255, 255, 255, 0.66);
|
||||
margin: 0;
|
||||
max-width: 46ch;
|
||||
}
|
||||
|
||||
.est-person {
|
||||
position: relative;
|
||||
padding-top: clamp(38px, 5vw, 64px);
|
||||
}
|
||||
|
||||
.est-person-name {
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.est-person-role {
|
||||
font-size: 13.5px;
|
||||
color: rgba(255, 255, 255, 0.52);
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.est-list-label {
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1.8px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(17, 17, 17, 0.42);
|
||||
padding-top: clamp(24px, 3vw, 38px);
|
||||
border-top: 1px solid rgba(17, 17, 17, 0.14);
|
||||
margin-bottom: clamp(20px, 3vw, 30px);
|
||||
}
|
||||
|
||||
.est-list {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: clamp(6px, 1vw, 10px);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.est-list::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.est-list::-webkit-scrollbar-thumb {
|
||||
background: rgba(17, 17, 17, 0.18);
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.est-row {
|
||||
scroll-snap-align: start;
|
||||
flex: 0 0 clamp(260px, 30vw, 340px);
|
||||
min-height: 220px;
|
||||
padding: clamp(24px, 2.6vw, 32px);
|
||||
border: 1px solid rgba(17, 17, 17, 0.14);
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
transition: border-color 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.est-row:hover {
|
||||
border-color: rgba(200, 16, 46, 0.4);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.est-row-name {
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
.est-row-role {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1.4px;
|
||||
text-transform: uppercase;
|
||||
color: #c8102e;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.est-row-line {
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
color: rgba(17, 17, 17, 0.62);
|
||||
margin: 28px 0 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.est-head,
|
||||
.est-feature { grid-template-columns: 1fr; }
|
||||
.est-row {
|
||||
min-height: 0;
|
||||
flex-basis: 78vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.est-section { padding-top: 54px; padding-bottom: 54px; }
|
||||
.est-title {
|
||||
font-size: clamp(34px, 10vw, 40px) !important;
|
||||
letter-spacing: -0.045em !important;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.est-quote-text {
|
||||
font-size: clamp(25px, 8vw, 34px);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.est-photo,
|
||||
.est-copy { border-radius: 20px; }
|
||||
.est-photo { min-height: 420px; }
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<section className="est-section" id="wings-empowerment-stories">
|
||||
<div className="dm-section-container">
|
||||
<div className="est-inner">
|
||||
<div className="est-head">
|
||||
<ScrollReveal delay={0.05} duration={0.75} yOffset={20} className="est-head-reveal">
|
||||
<div className="est-eyebrow">/ Women in Motion /</div>
|
||||
<hr className="est-divider" />
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.1} duration={0.85} yOffset={24}>
|
||||
<h2 className="est-title">Small steps. Lasting careers.</h2>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<div className="est-feature">
|
||||
<ScrollReveal delay={0.05} duration={0.85} yOffset={24} className="est-photo">
|
||||
<Image
|
||||
src="/images/women-hero-slider-3.png"
|
||||
alt="A Wings program participant on the operations floor at a Doormile logistics hub"
|
||||
fill
|
||||
sizes="(max-width: 1000px) 100vw, 58vw"
|
||||
style={{ objectPosition: "80% 22%" }}
|
||||
/>
|
||||
<div className="est-photo-caption">
|
||||
<span>Wings Participant</span>
|
||||
<strong> building a career, one milestone at a time.</strong>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.12} duration={0.85} yOffset={24} className="est-copy">
|
||||
<div>
|
||||
<span className="est-quote-mark" aria-hidden="true">“</span>
|
||||
<p className="est-quote-text">I came in looking for a way forward. I found the confidence to lead.</p>
|
||||
<p className="est-narrative">
|
||||
She started with limited exposure to logistics. Through structured training, mentorship, and hands-on experience, she built real operational skills — and now supports other women stepping into the industry.
|
||||
</p>
|
||||
</div>
|
||||
{/* <div className="est-person">
|
||||
<div className="est-person-name">Kavya</div>
|
||||
<div className="est-person-role">Logistics Coordinator, Wings Program</div>
|
||||
</div> */}
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
138
src/components/sections/EmpowermentStory.tsx
Normal file
138
src/components/sections/EmpowermentStory.tsx
Normal file
@@ -0,0 +1,138 @@
|
||||
import { ScrollReveal } from "@/animations/Reveal";
|
||||
|
||||
export default function EmpowermentStory() {
|
||||
return (
|
||||
<>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.esy-section {
|
||||
position: relative;
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 auto clamp(24px, 4vw, 40px);
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
min-height: clamp(500px, 50vw, 690px);
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
background: #09090b;
|
||||
}
|
||||
|
||||
.esy-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(100deg, rgba(9, 9, 11, 0.96) 0%, rgba(9, 9, 11, 0.84) 43%, rgba(192, 18, 39, 0.28) 100%),
|
||||
url("/images/wings-heroslider4.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.esy-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1380px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
padding-top: clamp(60px, 7vw, 98px);
|
||||
padding-bottom: clamp(60px, 7vw, 98px);
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.52fr);
|
||||
gap: clamp(36px, 6vw, 96px);
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.esy-eyebrow {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 2.5px;
|
||||
text-transform: uppercase;
|
||||
color: #ff5470;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.esy-statement {
|
||||
max-width: 920px;
|
||||
font-size: clamp(38px, 5.7vw, 86px);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.055em;
|
||||
line-height: 0.98;
|
||||
text-transform: uppercase;
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.esy-statement em {
|
||||
color: #ff5470;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.esy-side {
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.18);
|
||||
padding-left: clamp(24px, 3vw, 42px);
|
||||
}
|
||||
|
||||
.esy-label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1.8px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.esy-pull {
|
||||
font-size: clamp(22px, 2.3vw, 34px);
|
||||
font-weight: 800;
|
||||
line-height: 1.16;
|
||||
letter-spacing: -0.03em;
|
||||
color: #ffffff;
|
||||
margin: 0 0 22px 0;
|
||||
}
|
||||
|
||||
.esy-sub {
|
||||
font-size: 15.5px;
|
||||
line-height: 1.65;
|
||||
color: rgba(255, 255, 255, 0.64);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.esy-section { width: calc(100% - 24px); border-radius: 22px; }
|
||||
.esy-inner { grid-template-columns: 1fr; align-items: start; }
|
||||
.esy-side { max-width: 640px; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.esy-section { min-height: 560px; }
|
||||
.esy-side { border-left: none; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: 24px; }
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<section className="esy-section" id="wings-empowerment-story">
|
||||
<div className="esy-bg" aria-hidden="true" />
|
||||
<div className="esy-inner dm-section-container">
|
||||
<ScrollReveal delay={0.05} duration={0.85} yOffset={25}>
|
||||
<div className="esy-eyebrow">/ Our Approach /</div>
|
||||
<p className="esy-statement">
|
||||
Not a program on a brochure. <em>An ecosystem women can build in.</em>
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.15} duration={0.8} yOffset={25} className="esy-side">
|
||||
<span className="esy-label">Manifesto</span>
|
||||
<p className="esy-pull">A venture that starts with conviction. A network that turns it into momentum.</p>
|
||||
<p className="esy-sub">
|
||||
Wings is designed around the moments that define a founder: the first partnership signed, the first client won, the first team hired, the first enterprise scaled.
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
215
src/components/sections/EmpowermentVision.tsx
Normal file
215
src/components/sections/EmpowermentVision.tsx
Normal file
@@ -0,0 +1,215 @@
|
||||
import { ScrollReveal } from "@/animations/Reveal";
|
||||
import IndustryWorldMap from "./IndustryWorldMap";
|
||||
|
||||
export default function EmpowermentVision() {
|
||||
return (
|
||||
<>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.ev-section {
|
||||
position: relative;
|
||||
background: #ffffff;
|
||||
padding: clamp(96px, 11vw, 150px) 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ev-map {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ev-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1380px;
|
||||
min-width: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ev-eyebrow {
|
||||
margin: 0 0 18px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1.5px;
|
||||
color: rgba(17, 17, 17, 0.6);
|
||||
}
|
||||
|
||||
.ev-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin: 0 0 clamp(64px, 7.8vw, 92px) 0;
|
||||
border: none;
|
||||
background-color: rgba(17, 17, 17, 0.16);
|
||||
}
|
||||
|
||||
.ev-title {
|
||||
margin: 0 0 clamp(92px, 11.5vw, 156px) 0 !important;
|
||||
max-width: 1320px;
|
||||
display: block;
|
||||
font-weight: 800 !important;
|
||||
font-style: normal !important;
|
||||
letter-spacing: -0.018em !important;
|
||||
word-spacing: 0.02em;
|
||||
line-height: 1.04em !important;
|
||||
text-transform: none !important;
|
||||
color: #ffffff !important;
|
||||
-webkit-text-stroke: 2px #c01227;
|
||||
paint-order: stroke fill;
|
||||
font-size: clamp(48px, 8.5vw, 128px) !important;
|
||||
white-space: normal;
|
||||
overflow-wrap: normal;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.ev-title {
|
||||
font-size: 118px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1020px) {
|
||||
.ev-title {
|
||||
font-size: 96px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.ev-title {
|
||||
font-size: 72px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ev-columns {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
|
||||
gap: clamp(60px, 8vw, 122px);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.ev-columns > * {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ev-statement {
|
||||
margin: 0;
|
||||
font-size: clamp(28px, 3vw, 52px);
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.03em;
|
||||
color: #111111;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.ev-support {
|
||||
display: grid;
|
||||
gap: clamp(34px, 3.8vw, 52px);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ev-block {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.ev-block-label {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.4px;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
color: rgba(192, 18, 39, 0.86);
|
||||
}
|
||||
|
||||
.ev-lead,
|
||||
.ev-note {
|
||||
font-size: clamp(17px, 1.3vw, 20px);
|
||||
line-height: 1.6;
|
||||
color: #333333;
|
||||
margin: 0;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.ev-lead {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ev-note {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.ev-columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.ev-section { padding-top: 64px; padding-bottom: 64px; }
|
||||
.ev-title {
|
||||
max-width: calc(100vw - (var(--dm-mobile-gutter, 10px) * 2));
|
||||
font-size: 56px !important;
|
||||
letter-spacing: -0.025em !important;
|
||||
line-height: 1.02em !important;
|
||||
-webkit-text-stroke-width: 1.5px;
|
||||
}
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<section className="ev-section" id="wings-empowerment-vision">
|
||||
<div className="ev-map" aria-hidden="true">
|
||||
<IndustryWorldMap />
|
||||
</div>
|
||||
<div className="dm-section-container">
|
||||
<div className="ev-inner">
|
||||
<ScrollReveal delay={0.05} duration={0.7} yOffset={20}>
|
||||
<p className="ev-eyebrow">/ Our Vision /</p>
|
||||
<hr className="ev-divider" />
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.12} duration={0.85} yOffset={30}>
|
||||
<h2 className="ev-title">Women Own The Future.</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="ev-columns">
|
||||
<ScrollReveal delay={0.18} duration={0.8} yOffset={25}>
|
||||
<p className="ev-statement">
|
||||
A logistics ecosystem where women don’t just participate — they own, build, and lead.
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal delay={0.26} duration={0.8} yOffset={25} className="ev-support">
|
||||
<div className="ev-block">
|
||||
<p className="ev-block-label">The vision</p>
|
||||
<p className="ev-lead">
|
||||
We are building an entrepreneurial ecosystem where women launch enterprises, scale operations, and shape the future of logistics from the inside.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="ev-block">
|
||||
<p className="ev-block-label">Why it matters</p>
|
||||
<p className="ev-note">
|
||||
Industries transform when founders emerge from every corner. Women-led enterprises bring fresh perspective, operational resilience, and long-term economic impact to logistics.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="ev-block">
|
||||
<p className="ev-block-label">How Wings contributes</p>
|
||||
<p className="ev-note">
|
||||
Wings provides the infrastructure — strategic partnerships, funding access, founder networks, and industry connections — that turns ambition into enterprise.
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -20,10 +20,9 @@
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 18px 0;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2.5px;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1.5px;
|
||||
color: rgba(23, 20, 15, 0.6);
|
||||
}
|
||||
|
||||
@@ -44,19 +43,33 @@
|
||||
.heading {
|
||||
margin: 0;
|
||||
max-width: 1220px;
|
||||
font-family: var(--font-syne), "Syne", sans-serif !important;
|
||||
font-weight: 800 !important;
|
||||
font-family: "Manrope Alt", Sans-serif !important;
|
||||
font-weight: 700 !important;
|
||||
font-style: normal !important;
|
||||
letter-spacing: -0.03em !important;
|
||||
line-height: 0.86 !important;
|
||||
line-height: 1em !important;
|
||||
text-transform: none !important;
|
||||
color: transparent !important;
|
||||
-webkit-text-stroke: 2px #c01227;
|
||||
font-size: clamp(72px, 14vw, 240px) !important;
|
||||
-webkit-text-stroke-width: 2px;
|
||||
-webkit-text-stroke-color: #c01227;
|
||||
font-size: 180px !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1020px) {
|
||||
.heading {
|
||||
font-size: 120px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.heading {
|
||||
font-size: 80px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.heading {
|
||||
font-size: 56px !important;
|
||||
-webkit-text-stroke-width: 1.5px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,8 +16,21 @@ export default function TheDoormileWay() {
|
||||
<p className={styles.eyebrow}>/ Doormile Approach /</p>
|
||||
<hr className={styles.divider} />
|
||||
</ScrollReveal>
|
||||
<ScrollReveal delay={0.15} duration={0.85} yOffset={30} className={styles.headingWrap}>
|
||||
<h2 className={styles.heading}>The Doormile Way</h2>
|
||||
<ScrollReveal delay={0.15} duration={0.85} yOffset={30}>
|
||||
<div className="elementor-element elementor-element-1cc335a elementor-widget elementor-widget-logico_heading" data-id="1cc335a" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div
|
||||
className="logico-title"
|
||||
style={{
|
||||
WebkitTextStroke: "4px #c01227",
|
||||
color: "#fff",
|
||||
fontWeight: 800,
|
||||
}}
|
||||
>
|
||||
The Doormile Way
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-4c3e632 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="4c3e632" data-element_type="container" data-e-type="container">
|
||||
|
||||
@@ -65,9 +65,8 @@ export default function WingsFleetStrategy() {
|
||||
/>
|
||||
<EVSection
|
||||
bannerImage="/images/pahse1.png"
|
||||
cardNumber="Phase 1"
|
||||
cardTitle="Initial Fleet"
|
||||
cardSubtitle="2x ATR72 + 1x Q400 Freighters"
|
||||
cardTitle="Quick Logistics"
|
||||
cardSubtitle="Same-Day Air Network"
|
||||
eyebrow="/ Fleet Strategy /"
|
||||
titleLead="Purpose-Built for "
|
||||
titleAccent="Regional Speed"
|
||||
|
||||
@@ -71,14 +71,14 @@ export default function WingsHero() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<link rel="preload" as="image" href="/images/wings-heroslider3.png" />
|
||||
<link rel="preload" as="image" href="/images/wings-heroslider4.png" />
|
||||
<link rel="preload" as="image" href="/images/wings-heroslide2.png" />
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.wings-hero-bg.elementor-repeater-item-3264830,
|
||||
.wings-hero-bg.elementor-repeater-item-6867061 {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.06)), url('/images/wings-heroslider3.png') !important;
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.06)), url('/images/wings-heroslider4.png') !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: cover !important;
|
||||
@@ -409,24 +409,19 @@ export default function WingsHero() {
|
||||
<div className="slide-content-inner">
|
||||
<h1 className="content-slider-item-heading logico-content-wrapper-1">
|
||||
<span className="heading-content">
|
||||
Doormile Wings
|
||||
Where Quick Commerce
|
||||
<br />
|
||||
<ShimmerText className="font-extrabold">
|
||||
Same-Day Air
|
||||
</ShimmerText>
|
||||
<br className="wings-mobile-break" />
|
||||
{" "}
|
||||
<ShimmerText className="font-extrabold">
|
||||
Logistics
|
||||
Meets Quick Logistics
|
||||
</ShimmerText>
|
||||
</span>
|
||||
</h1>
|
||||
<div className="content-slider-item-text logico-content-wrapper-2">
|
||||
<div className="text-content">
|
||||
<p>
|
||||
Linking India's major regional capitals with
|
||||
AI-powered air movement and zero-emission EV
|
||||
last-mile delivery.
|
||||
MileTruth™ AI forecasts demand, protects promises,
|
||||
and coordinates every handoff from runway to
|
||||
doorstep.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -453,19 +448,24 @@ export default function WingsHero() {
|
||||
<div className="slide-content-inner">
|
||||
<h1 className="content-slider-item-heading logico-content-wrapper-1">
|
||||
<span className="heading-content">
|
||||
Where Quick Commerce
|
||||
Doormile Wings
|
||||
<br />
|
||||
<ShimmerText className="font-extrabold">
|
||||
Meets Quick Logistics
|
||||
Same-Day Air
|
||||
</ShimmerText>
|
||||
<br className="wings-mobile-break" />
|
||||
{" "}
|
||||
<ShimmerText className="font-extrabold">
|
||||
Logistics
|
||||
</ShimmerText>
|
||||
</span>
|
||||
</h1>
|
||||
<div className="content-slider-item-text logico-content-wrapper-2">
|
||||
<div className="text-content">
|
||||
<p>
|
||||
MileTruth™ AI forecasts demand, protects promises,
|
||||
and coordinates every handoff from runway to
|
||||
doorstep.
|
||||
Linking India's major regional capitals with
|
||||
AI-powered air movement and zero-emission EV
|
||||
last-mile delivery.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
|
||||
import { CountUp, ScrollReveal, StaggerChildren } from "@/animations/Reveal";
|
||||
import IndustryWorldMap from "./IndustryWorldMap";
|
||||
|
||||
const WS_STATS = [
|
||||
@@ -42,7 +42,7 @@ const WS_CARDS = [
|
||||
},
|
||||
{
|
||||
title: "Community Growth",
|
||||
desc: "Creating local opportunities through training, employment, and empowerment.",
|
||||
desc: "Creating local opportunities through entrepreneurship, collaboration, and community-driven growth.",
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="9" cy="8" r="3" />
|
||||
@@ -52,7 +52,48 @@ const WS_CARDS = [
|
||||
},
|
||||
];
|
||||
|
||||
export default function WomenSection() {
|
||||
interface WomenSectionStat {
|
||||
value: string;
|
||||
plus: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface WomenSectionCard {
|
||||
title: string;
|
||||
desc: string;
|
||||
icon: React.ReactNode;
|
||||
}
|
||||
|
||||
interface WomenSectionProps {
|
||||
eyebrow?: string;
|
||||
bannerLabel?: string;
|
||||
bannerCopy?: string;
|
||||
ctaLabel?: string;
|
||||
ctaHref?: string;
|
||||
heading?: string;
|
||||
stats?: WomenSectionStat[];
|
||||
cards?: WomenSectionCard[];
|
||||
}
|
||||
|
||||
function parseStatValue(value: string) {
|
||||
const match = value.trim().match(/^(\d+(?:\.\d+)?)(.*)$/);
|
||||
if (!match) return null;
|
||||
return {
|
||||
end: Number(match[1]),
|
||||
suffix: match[2],
|
||||
};
|
||||
}
|
||||
|
||||
export default function WomenSection({
|
||||
eyebrow = "/ Women Empowerment /",
|
||||
bannerLabel = "Empowering Women",
|
||||
bannerCopy = "Doormile empowers women to lead the future of logistics.",
|
||||
ctaLabel = "Explore more",
|
||||
ctaHref = "#",
|
||||
heading = "Women Leading the Way",
|
||||
stats = WS_STATS,
|
||||
cards = WS_CARDS,
|
||||
}: WomenSectionProps = {}) {
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
@@ -419,12 +460,12 @@ export default function WomenSection() {
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-239afbb elementor-widget elementor-widget-logico_heading" data-id="239afbb" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<h5 className="logico-title">Empowering Women</h5>
|
||||
<h5 className="logico-title">{bannerLabel}</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-0d307dd elementor-widget elementor-widget-text-editor" data-id="0d307dd" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>Doormile empowers women to lead the future of logistics.</p>
|
||||
<p>{bannerCopy}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -433,8 +474,8 @@ export default function WomenSection() {
|
||||
<div className="elementor-widget-container">
|
||||
<div className="button-widget">
|
||||
<div className="button-container">
|
||||
<a href="#" className="logico-small-button">
|
||||
Explore more
|
||||
<a href={ctaHref} className="logico-small-button">
|
||||
{ctaLabel}
|
||||
<svg viewBox="0 0 13 20">
|
||||
<polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5"></polyline>
|
||||
</svg>
|
||||
@@ -455,7 +496,7 @@ export default function WomenSection() {
|
||||
<div className="elementor-element elementor-element-90cc867 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="90cc867" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-24c0280 elementor-widget__width-inherit elementor-widget elementor-widget-logico_heading" data-id="24c0280" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">/ Women Empowerment /</div>
|
||||
<div className="logico-title">{eyebrow}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -464,7 +505,7 @@ export default function WomenSection() {
|
||||
<ScrollReveal duration={0.8} yOffset={28} triggerOnce>
|
||||
<div className="elementor-element elementor-element-778840d elementor-widget elementor-widget-logico_heading" data-id="778840d" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<h3 className="logico-title">Women Leading the Way</h3>
|
||||
<h3 className="logico-title">{heading}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
@@ -484,16 +525,30 @@ export default function WomenSection() {
|
||||
<div className="elementor-element elementor-element-b2c956f e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="b2c956f" data-element_type="container" data-e-type="container">
|
||||
<div id="ws-stories">
|
||||
<StaggerChildren className="ws__stats" stagger={0.1} duration={0.6} yOffset={20} triggerOnce>
|
||||
{WS_STATS.map((s) => (
|
||||
{stats.map((s) => (
|
||||
<div className="ws__stat" key={s.label}>
|
||||
<div className="ws__stat-num">{s.value}<span>{s.plus}</span></div>
|
||||
<div className="ws__stat-num">
|
||||
{(() => {
|
||||
const parsed = parseStatValue(s.value);
|
||||
if (!parsed) return s.value;
|
||||
return (
|
||||
<CountUp
|
||||
end={parsed.end}
|
||||
suffix={parsed.suffix}
|
||||
duration={1.8}
|
||||
triggerOnce
|
||||
/>
|
||||
);
|
||||
})()}
|
||||
<span>{s.plus}</span>
|
||||
</div>
|
||||
<div className="ws__stat-label">{s.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</StaggerChildren>
|
||||
|
||||
<StaggerChildren className="ws__cards" stagger={0.08} duration={0.6} yOffset={24} triggerOnce>
|
||||
{WS_CARDS.map((c) => (
|
||||
{cards.map((c) => (
|
||||
<div className="ws__card" key={c.title}>
|
||||
<span className="ws__card-icon" aria-hidden="true">{c.icon}</span>
|
||||
<div className="ws__card-title">{c.title}</div>
|
||||
|
||||
@@ -24,6 +24,9 @@ const ROUTE_CLASSES: Record<string, string> = {
|
||||
"/solutions": `${SHARED} page-id-59 elementor-page-59`,
|
||||
// PHP source quirk: about-us.php has `home` class (upstream bug, preserved)
|
||||
"/about-us": `home ${SHARED} page-id-59 elementor-page-59`,
|
||||
// Reuse the About page Elementor/runtime context for the Wings Empowerment
|
||||
// page sections that intentionally share the same migrated Elementor markup.
|
||||
"/empowerment": `home ${SHARED} page-id-59 elementor-page-59`,
|
||||
"/blog": `${SHARED} page-id-59 elementor-page-59`,
|
||||
"/contact": `${SHARED} page-id-59 elementor-page-59`,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user