291 lines
9.0 KiB
TypeScript
291 lines
9.0 KiB
TypeScript
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>
|
|
</>
|
|
);
|
|
}
|