514 lines
24 KiB
TypeScript
514 lines
24 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 shaping strategy and driving excellence across logistics operations.",
|
|
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: "Women building 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: "Innovation",
|
|
desc: "Women advancing logistics through practical ideas and operational insight.",
|
|
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: "Creating local opportunities through training, employment, and empowerment.",
|
|
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;
|
|
align-items: stretch;
|
|
}
|
|
#ws-stories .ws__card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 168px;
|
|
background: rgba(255,255,255,0.035);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
border-radius: 14px;
|
|
padding: 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: 40px; height: 40px;
|
|
border-radius: 11px;
|
|
background: rgba(220,38,38,0.12);
|
|
border: 1px solid rgba(220,38,38,0.25);
|
|
color: #ef4444;
|
|
margin-bottom: 16px;
|
|
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: 21px; height: 21px; }
|
|
#ws-stories .ws__card-title {
|
|
color: #fff !important;
|
|
font-weight: 800;
|
|
font-size: 19px;
|
|
line-height: 1.2;
|
|
letter-spacing: 0;
|
|
margin-bottom: 9px;
|
|
}
|
|
#ws-stories .ws__card-desc {
|
|
max-width: 28ch;
|
|
color: rgba(255,255,255,0.66) !important;
|
|
font-size: 15px;
|
|
line-height: 1.52;
|
|
margin: 0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ---- Floating card sizing: content-driven, not container-driven ----
|
|
Matches the EV Logistics card height proportions exactly by trimming
|
|
red content padding and white footer min-height. */
|
|
.elementor-element.elementor-element-3b61435 {
|
|
--padding-top: 46px;
|
|
--padding-bottom: 38px;
|
|
}
|
|
.elementor-element.elementor-element-5aea22e {
|
|
--min-height: 38px;
|
|
--padding-top: 14px;
|
|
--padding-bottom: 14px;
|
|
}
|
|
@media (max-width: 1020px) {
|
|
.elementor-element.elementor-element-3b61435 {
|
|
--padding-top: 34px;
|
|
--padding-bottom: 28px;
|
|
}
|
|
.elementor-element.elementor-element-5aea22e {
|
|
--min-height: 32px;
|
|
--padding-top: 12px;
|
|
--padding-bottom: 12px;
|
|
}
|
|
}
|
|
@media (max-width: 660px) {
|
|
.elementor-element.elementor-element-3b61435 {
|
|
--padding-top: 26px;
|
|
--padding-bottom: 22px;
|
|
}
|
|
.elementor-element.elementor-element-5aea22e {
|
|
--min-height: 24px;
|
|
--padding-top: 10px;
|
|
--padding-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.elementor-element-778840d .logico-title {
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
/* The banner image (bg-header-women.png) is very wide (≈2.48:1) and the
|
|
woman — the subject of this section — sits on the right. On narrow
|
|
screens "cover" center-crops her out, so shift the focal point right
|
|
to keep her face in frame. */
|
|
@media (max-width: 1024px) {
|
|
.elementor-element.elementor-element-7da6646:not(.elementor-motion-effects-element-type-background) {
|
|
background-position: 78% center !important;
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.elementor-element.elementor-element-7da6646:not(.elementor-motion-effects-element-type-background) {
|
|
background-position: 82% 25% !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; }
|
|
/* Align the heading, image and stats/cards to one shared left/right
|
|
edge — the heading + image widgets carried extra inset that left
|
|
them staggered (80px / 70px / 60px) against the stats column. */
|
|
#women-entrepreneurship .elementor-element-36efec7,
|
|
#women-entrepreneurship .elementor-element-b2c956f {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
#women-entrepreneurship .elementor-element-778840d,
|
|
#women-entrepreneurship .elementor-element-bbfb67f,
|
|
#women-entrepreneurship .elementor-element-778840d > .elementor-widget-container,
|
|
#women-entrepreneurship .elementor-element-bbfb67f > .elementor-widget-container {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
#women-entrepreneurship {
|
|
width: calc(100% - 20px) !important;
|
|
margin-left: 10px !important;
|
|
margin-right: 10px !important;
|
|
border-radius: 22px !important;
|
|
padding-left: 0px !important;
|
|
padding-right: 0px !important;
|
|
}
|
|
#women-entrepreneurship .e-con-boxed > .e-con-inner {
|
|
padding-top: 32px !important;
|
|
padding-bottom: 32px !important;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
#women-entrepreneurship .elementor-element-8b5d6e6,
|
|
#women-entrepreneurship .elementor-element-b6e14bd,
|
|
#women-entrepreneurship .elementor-element-90cc867,
|
|
#women-entrepreneurship .elementor-element-36efec7,
|
|
#women-entrepreneurship .elementor-element-b2c956f {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
#women-entrepreneurship .elementor-element-1f766ea {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
#women-entrepreneurship .elementor-element.elementor-element-2ed47f3 {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
margin-top: 0 !important;
|
|
padding-top: 0 !important;
|
|
gap: 24px !important;
|
|
}
|
|
#women-entrepreneurship .elementor-element-36efec7 {
|
|
margin-top: 0px !important;
|
|
padding-top: 0px !important;
|
|
gap: 0px !important;
|
|
}
|
|
#women-entrepreneurship .elementor-element-24c0280 {
|
|
margin-bottom: 0px !important;
|
|
padding-left: 14px !important;
|
|
padding-right: 14px !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
#women-entrepreneurship .elementor-element-778840d {
|
|
margin-top: 14px !important;
|
|
margin-bottom: 14px !important;
|
|
padding-top: 0px !important;
|
|
padding-bottom: 0px !important;
|
|
padding-left: 14px !important;
|
|
padding-right: 14px !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
#women-entrepreneurship .elementor-element-778840d h3.logico-title,
|
|
#women-entrepreneurship .elementor-element-778840d > .elementor-widget-container {
|
|
margin: 0px !important;
|
|
padding: 0px !important;
|
|
}
|
|
#women-entrepreneurship .elementor-element-7da6646 {
|
|
width: calc(100% - 28px) !important;
|
|
margin-left: 14px !important;
|
|
margin-right: 14px !important;
|
|
border-radius: 18px !important;
|
|
min-height: 240px !important;
|
|
margin-top: 15px !important;
|
|
margin-bottom: -50px !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
#women-entrepreneurship .elementor-element-8b5d6e6 {
|
|
padding-left: 14px !important;
|
|
padding-right: 14px !important;
|
|
margin-left: 0px !important;
|
|
margin-right: 0px !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
#women-entrepreneurship .elementor-element-bbfb67f img {
|
|
width: 100% !important;
|
|
}
|
|
#women-entrepreneurship .elementor-element-bbfb67f {
|
|
margin-top: 0px !important;
|
|
margin-bottom: 16px !important;
|
|
padding-left: 14px !important;
|
|
padding-right: 14px !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
#ws-stories {
|
|
padding-left: 14px !important;
|
|
padding-right: 14px !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
/* KPI stat cards stack one-per-row on mobile. Inside each card the big
|
|
number sits on the left and the label on the right, vertically
|
|
centered, so every stat reads as a clean full-width row instead of
|
|
three cramped columns. */
|
|
#ws-stories .ws__stats { grid-template-columns: 1fr; gap: 12px; }
|
|
#ws-stories .ws__stat {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 16px 20px;
|
|
min-width: 0;
|
|
}
|
|
#ws-stories .ws__stat-num { font-size: clamp(30px, 9vw, 40px); }
|
|
#ws-stories .ws__stat-label {
|
|
margin-top: 0;
|
|
font-size: 13px !important;
|
|
letter-spacing: 0.02em;
|
|
text-align: right;
|
|
min-height: 0;
|
|
}
|
|
#ws-stories .ws__cards { grid-template-columns: 1fr; gap: 12px; }
|
|
}
|
|
`}} />
|
|
|
|
<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.webp)" }}
|
|
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 to lead the future of logistics.</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.webp"
|
|
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>
|
|
</>
|
|
);
|
|
}
|