update home,about,solutions
This commit is contained in:
@@ -1,10 +1,197 @@
|
||||
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 (
|
||||
<div 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">
|
||||
<div
|
||||
<>
|
||||
<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-family: 'Manrope', sans-serif;
|
||||
font-size: 16px;
|
||||
|
||||
}
|
||||
|
||||
/* 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.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 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", overflow: "hidden" }}>
|
||||
<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"
|
||||
@@ -65,6 +252,9 @@ export default function WomenSection() {
|
||||
</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">
|
||||
@@ -75,11 +265,13 @@ export default function WomenSection() {
|
||||
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
</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
|
||||
@@ -94,108 +286,32 @@ export default function WomenSection() {
|
||||
</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
|
||||
className="elementor-element elementor-element-1a450c2 elementor-absolute elementor-widget elementor-widget-image"
|
||||
data-id="1a450c2"
|
||||
data-element_type="widget"
|
||||
data-e-type="widget"
|
||||
style={{ position: "absolute" }}
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
<Image
|
||||
src="/images/bg-map.png"
|
||||
alt="World Map"
|
||||
width={965}
|
||||
height={474}
|
||||
style={{ width: "100%", height: "auto" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 1 */}
|
||||
<div className="elementor-element elementor-element-6b51278 elementor-view-stacked elementor-position-inline-start elementor-shape-circle elementor-widget elementor-widget-icon-box" data-id="6b51278" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-icon-box-wrapper">
|
||||
<div className="elementor-icon-box-icon">
|
||||
<span className="elementor-icon">
|
||||
<i aria-hidden="true" className="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
<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>
|
||||
<div className="elementor-icon-box-content">
|
||||
<div className="elementor-icon-box-title">
|
||||
<span>Women Entrepreneurship</span>
|
||||
</div>
|
||||
<p className="elementor-icon-box-description">
|
||||
Empowering women to lead, manage, and grow in modern logistics operations.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</StaggerChildren>
|
||||
|
||||
<div className="elementor-element elementor-element-e34beb2 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="e34beb2" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-divider">
|
||||
<span className="elementor-divider-separator"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 2 */}
|
||||
<div className="elementor-element elementor-element-27ba815 elementor-view-stacked elementor-position-inline-start elementor-shape-circle elementor-widget elementor-widget-icon-box" data-id="27ba815" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-icon-box-wrapper">
|
||||
<div className="elementor-icon-box-icon">
|
||||
<span className="elementor-icon">
|
||||
<i aria-hidden="true" className="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
<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>
|
||||
<div className="elementor-icon-box-content">
|
||||
<div className="elementor-icon-box-title">
|
||||
<span>Leadership in Logistics</span>
|
||||
</div>
|
||||
<p className="elementor-icon-box-description">
|
||||
Creating opportunities for women to drive innovation in last-mile delivery.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</StaggerChildren>
|
||||
</div>
|
||||
|
||||
<div className="elementor-element elementor-element-6895eb5 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="6895eb5" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-divider">
|
||||
<span className="elementor-divider-separator"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 3 */}
|
||||
<div className="elementor-element elementor-element-332c78f elementor-view-stacked elementor-position-inline-start elementor-shape-circle elementor-widget elementor-widget-icon-box" data-id="332c78f" data-element_type="widget" data-e-type="widget" data-widget_type="icon-box.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-icon-box-wrapper">
|
||||
<div className="elementor-icon-box-icon">
|
||||
<span className="elementor-icon">
|
||||
<i aria-hidden="true" className="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div className="elementor-icon-box-content">
|
||||
<div className="elementor-icon-box-title">
|
||||
<span>Stronger Together</span>
|
||||
</div>
|
||||
<p className="elementor-icon-box-description">
|
||||
Building a future where women power smarter, faster, and reliable logistics.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user