324 lines
16 KiB
TypeScript
324 lines
16 KiB
TypeScript
import React from "react";
|
|
import Image from "next/image";
|
|
import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
|
|
import IndustryWorldMap from "./IndustryWorldMap";
|
|
|
|
const WS_STATS = [
|
|
{ value: "500", plus: "+", label: "Women Partners" },
|
|
{ value: "35", plus: "+", label: "Cities" },
|
|
{ value: "10K", plus: "+", label: "Deliveries" },
|
|
];
|
|
|
|
const WS_CARDS = [
|
|
{
|
|
title: "Women Leadership",
|
|
desc: "Women driving decisions across operations, routing, and last-mile delivery every day.",
|
|
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>
|
|
),
|
|
},
|
|
{
|
|
title: "Entrepreneurship",
|
|
desc: "Enabling women to build, own, and scale their own delivery businesses.",
|
|
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: "Innovation",
|
|
desc: "Fresh thinking that reshapes how first and last-mile logistics actually work.",
|
|
icon: (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M9 18h6M10 21h4" />
|
|
<path d="M12 3a6 6 0 0 0-3.8 10.6c.5.5.8 1.2.8 1.9v.5h6v-.5c0-.7.3-1.4.8-1.9A6 6 0 0 0 12 3Z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
title: "Community Growth",
|
|
desc: "Local hiring and training that lifts entire neighbourhoods, not just routes.",
|
|
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" />
|
|
<path d="M3.5 20c0-3 2.5-5 5.5-5s5.5 2 5.5 5M16 5.5a3 3 0 0 1 0 5.8M20.5 20c0-2.3-1.4-3.9-3.3-4.6" />
|
|
</svg>
|
|
),
|
|
},
|
|
];
|
|
|
|
export default function WomenSection() {
|
|
return (
|
|
<>
|
|
<style dangerouslySetInnerHTML={{ __html: `
|
|
/* ============================================================
|
|
Success Stories — redesigned right column (stats + 2x2 cards)
|
|
Dark section · red accent #dc2626 / #ef4444 · Manrope
|
|
============================================================ */
|
|
/* Neutralise the right column's asymmetric 140px left padding so the
|
|
box group can be centered instead of pushed to one side. */
|
|
.elementor-element.elementor-element-b2c956f { padding: 0 !important; }
|
|
|
|
/* Vertically center the two columns so the right content lines up with
|
|
the image instead of needing a big top gap; tighten row gap. */
|
|
.elementor-element.elementor-element-2ed47f3 { align-items: center !important; }
|
|
|
|
/* Animated map background behind the Success Stories content */
|
|
.elementor-element.elementor-element-b6e14bd { position: relative; overflow: hidden; }
|
|
.elementor-element.elementor-element-b6e14bd > .e-con-inner { position: relative; z-index: 1; }
|
|
.ws-map { position: absolute; inset: 0; z-index: 0; opacity: 0.5; pointer-events: none; }
|
|
.ws-map canvas { display: block; }
|
|
|
|
#ws-stories {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
width: 100%;
|
|
max-width: 620px;
|
|
margin: 0 auto; /* center the 7 boxes as a group — no negative margins */
|
|
}
|
|
|
|
#ws-stories .ws__stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 12px;
|
|
}
|
|
#ws-stories .ws__stat {
|
|
background: rgba(255,255,255,0.04);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: 14px;
|
|
padding: 20px 16px;
|
|
transition: border-color 0.3s ease, background-color 0.3s ease;
|
|
}
|
|
#ws-stories .ws__stat:hover { border-color: rgba(220,38,38,0.28); background: rgba(220,38,38,0.05); }
|
|
#ws-stories .ws__stat-num {
|
|
color: #fff !important;
|
|
font-weight: 900;
|
|
font-size: clamp(28px, 3vw, 38px);
|
|
line-height: 1;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
#ws-stories .ws__stat-num span { color: #dc2626 !important; }
|
|
#ws-stories .ws__stat-label {
|
|
margin-top: 9px;
|
|
color: rgba(255,255,255,0.7) !important;
|
|
font-size: 14px !important;
|
|
font-weight: 700;
|
|
letter-spacing: 0.03em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
#ws-stories .ws__cards {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 14px;
|
|
}
|
|
#ws-stories .ws__card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: rgba(255,255,255,0.035);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: 16px;
|
|
padding: 22px 20px;
|
|
transition: transform 0.35s cubic-bezier(.25,1,.5,1), border-color 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
|
|
}
|
|
#ws-stories .ws__card::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -45%; left: -25%;
|
|
width: 150px; height: 150px;
|
|
background: radial-gradient(circle, rgba(220,38,38,0.2), transparent 70%);
|
|
opacity: 0;
|
|
transition: opacity 0.35s ease;
|
|
pointer-events: none;
|
|
}
|
|
#ws-stories .ws__card:hover {
|
|
transform: translateY(-4px);
|
|
border-color: rgba(220,38,38,0.3);
|
|
background: rgba(220,38,38,0.05);
|
|
box-shadow: 0 18px 44px -20px rgba(0,0,0,0.7);
|
|
}
|
|
#ws-stories .ws__card:hover::after { opacity: 1; }
|
|
#ws-stories .ws__card-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 44px; height: 44px;
|
|
border-radius: 12px;
|
|
background: rgba(220,38,38,0.12);
|
|
border: 1px solid rgba(220,38,38,0.25);
|
|
color: #ef4444;
|
|
margin-bottom: 14px;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
#ws-stories .ws__card:hover .ws__card-icon { background: #dc2626; color: #fff; }
|
|
#ws-stories .ws__card-icon svg { width: 22px; height: 22px; }
|
|
#ws-stories .ws__card-title {
|
|
color: #fff !important;
|
|
font-weight: 900;
|
|
font-size: 17px;
|
|
letter-spacing: -0.01em;
|
|
margin-bottom: 8px;
|
|
}
|
|
#ws-stories .ws__card-desc {
|
|
color: rgba(255,255,255,0.6) !important;
|
|
font-size: 13.5px;
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
font-weight: 900;
|
|
font-size: 16px;
|
|
|
|
}
|
|
|
|
.elementor-element-778840d .logico-title {
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
/* Stack the two columns below the desktop breakpoint so the box group
|
|
always gets full width and stays centered — never clipped. */
|
|
@media (max-width: 1024px) {
|
|
.elementor-element-778840d .logico-title {
|
|
white-space: normal !important;
|
|
}
|
|
.elementor-element.elementor-element-2ed47f3 { grid-template-columns: 1fr !important; }
|
|
#ws-stories { max-width: 640px; margin: 0 auto; }
|
|
}
|
|
@media (max-width: 600px) {
|
|
#ws-stories .ws__stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
|
|
#ws-stories .ws__stat { padding: 14px 10px; }
|
|
#ws-stories .ws__stat-label { font-size: 11px !important; letter-spacing: 0.02em; }
|
|
#ws-stories .ws__cards { grid-template-columns: 1fr; }
|
|
}
|
|
`}} />
|
|
|
|
<div id="women-entrepreneurship" className="elementor-element elementor-element-bbc6760 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="bbc6760" data-element_type="container" data-e-type="container" style={{ backgroundColor: "#1f1f1f", width: "calc(100% - 40px)", marginLeft: "20px", marginRight: "20px", borderRadius: "25px" }}>
|
|
<div
|
|
className="elementor-element elementor-element-13a7637 elementor-widget__width-auto elementor-absolute elementor-widget elementor-widget-logico_decorative_block"
|
|
data-id="13a7637"
|
|
data-element_type="widget"
|
|
data-e-type="widget"
|
|
style={{ position: "absolute" }}
|
|
>
|
|
<div className="elementor-widget-container">
|
|
<div className="block-decoration animation-enable block-decoration-style-1">
|
|
<div className="block-decoration-item"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
style={{ backgroundImage: "url(/images/bg-header-women.png)" }}
|
|
className="elementor-element elementor-element-7da6646 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
|
|
data-id="7da6646"
|
|
data-element_type="container"
|
|
data-e-type="container"
|
|
/>
|
|
|
|
<div className="elementor-element elementor-element-8b5d6e6 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="8b5d6e6" data-element_type="container" data-e-type="container">
|
|
<div className="elementor-element elementor-element-1f766ea e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="1f766ea" data-element_type="container" data-e-type="container">
|
|
<div className="elementor-element elementor-element-3b61435 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="3b61435" data-element_type="container" data-e-type="container" data-settings='{"background_background":"classic"}'>
|
|
<div className="elementor-element elementor-element-c364d1c elementor-widget elementor-widget-text-editor" data-id="c364d1c" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
|
<div className="elementor-widget-container">
|
|
<p>01</p>
|
|
</div>
|
|
</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>
|
|
</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 in last-mile delivery.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="elementor-element elementor-element-5aea22e e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5aea22e" data-element_type="container" data-e-type="container" data-settings='{"background_background":"classic"}'>
|
|
<div className="elementor-element elementor-element-46b9ffa elementor-widget elementor-widget-logico_button" data-id="46b9ffa" data-element_type="widget" data-e-type="widget" data-widget_type="logico_button.default">
|
|
<div className="elementor-widget-container">
|
|
<div className="button-widget">
|
|
<div className="button-container">
|
|
<a href="#" className="logico-small-button">
|
|
Explore more
|
|
<svg viewBox="0 0 13 20">
|
|
<polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5"></polyline>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="elementor-element elementor-element-b6e14bd e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="b6e14bd" data-element_type="container" data-e-type="container" data-settings='{"background_background":"classic"}'>
|
|
<div className="ws-map" aria-hidden="true">
|
|
<IndustryWorldMap />
|
|
</div>
|
|
<div className="e-con-inner">
|
|
<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>
|
|
</div>
|
|
|
|
<div className="elementor-element elementor-element-2ed47f3 e-con-full e-grid cut-corner-no sticky-container-off e-con e-child" data-id="2ed47f3" data-element_type="container" data-e-type="container">
|
|
<div className="elementor-element elementor-element-36efec7 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="36efec7" data-element_type="container" data-e-type="container">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
<div className="elementor-element elementor-element-bbfb67f elementor-widget elementor-widget-image" data-id="bbfb67f" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
|
|
<div className="elementor-widget-container">
|
|
<Image
|
|
src="/images/bg-map-women.png"
|
|
alt="Women Map"
|
|
width={626}
|
|
height={692}
|
|
style={{ maxWidth: "100%", height: "auto" }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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) => (
|
|
<div className="ws__stat" key={s.label}>
|
|
<div className="ws__stat-num">{s.value}<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) => (
|
|
<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>
|
|
<p className="ws__card-desc">{c.desc}</p>
|
|
</div>
|
|
))}
|
|
</StaggerChildren>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|