343 lines
10 KiB
TypeScript
343 lines
10 KiB
TypeScript
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: 6px; }
|
|
/* .est-feature's margin-bottom (clamp(44px, 6vw, 76px)) was sized
|
|
to precede an .est-list testimonial row block that no longer
|
|
exists in this component's JSX. Since .est-feature is now the
|
|
section's last child, that margin was pure dead space stacking
|
|
on top of .est-section's own padding-bottom above — the real
|
|
source of the oversized mobile gap before the next section. */
|
|
.est-feature { margin-bottom: 0; }
|
|
.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>
|
|
</>
|
|
);
|
|
}
|