308 lines
10 KiB
TypeScript
308 lines
10 KiB
TypeScript
import { ScrollReveal, StaggerChildren } from "@/animations/Reveal";
|
|
|
|
const STEPS = [
|
|
{ step: "01", title: "Apply", desc: "Submit your venture idea and tell us about your entrepreneurial vision." },
|
|
{ step: "02", title: "Discovery", desc: "Identify the right market opportunity and validate your business model." },
|
|
{ step: "03", title: "Build", desc: "Develop your enterprise with ecosystem support, mentorship, and partnerships." },
|
|
{ step: "04", title: "Launch", desc: "Go to market with strategic backing, industry connections, and operational infrastructure." },
|
|
{ step: "05", title: "Scale", desc: "Grow your team, expand operations, and lead your enterprise to sustainable impact." },
|
|
];
|
|
|
|
export default function EmpowermentHowItWorks() {
|
|
return (
|
|
<>
|
|
<style
|
|
dangerouslySetInnerHTML={{
|
|
__html: `
|
|
.ehw-section {
|
|
background: #ffffff;
|
|
padding: var(--space-section-lg, 80px) 0 calc(var(--space-section-lg, 80px) + 32px) 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ehw-inner {
|
|
max-width: 1380px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.ehw-head {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
margin-bottom: clamp(126px, calc(7vw + 60px), 172px);
|
|
}
|
|
|
|
.ehw-head-reveal {
|
|
width: 100%;
|
|
}
|
|
|
|
.ehw-divider {
|
|
width: 100%;
|
|
height: 1px;
|
|
margin: 18px 0 clamp(24px, 3.5vw, 40px) 0;
|
|
border: none;
|
|
background-color: rgba(17, 17, 17, 0.14);
|
|
}
|
|
|
|
.ehw-eyebrow {
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
letter-spacing: 2.4px;
|
|
text-transform: uppercase;
|
|
color: rgba(17, 17, 17, 0.42);
|
|
}
|
|
|
|
.ehw-title {
|
|
max-width: 820px;
|
|
font-size: clamp(32px, 4vw, 54px) !important;
|
|
font-weight: 800 !important;
|
|
letter-spacing: -0.03em !important;
|
|
line-height: 1.08 !important;
|
|
text-transform: none !important;
|
|
color: #111111 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* ----------------------------------------------------------------
|
|
Premium editorial process row: five milestones in a single
|
|
sequence, separated by thin hairline dividers (no cards, no
|
|
shadows, no boxed containers). One flex-wrap sequence with
|
|
responsive flex-basis handles the composition at every size —
|
|
5-across on desktop, 3 + 2 (centered) on tablet, a single
|
|
vertical column on mobile — from one shared markup.
|
|
---------------------------------------------------------------- */
|
|
.ehw-sequence {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
--ehw-gap: clamp(24px, 2.6vw, 48px);
|
|
column-gap: var(--ehw-gap);
|
|
row-gap: clamp(48px, 6vw, 84px);
|
|
}
|
|
|
|
.ehw-step {
|
|
position: relative;
|
|
flex: 0 1 calc((100% - 4 * var(--ehw-gap)) / 5);
|
|
min-width: 168px;
|
|
padding-left: clamp(20px, 2vw, 32px);
|
|
border-left: 1px solid rgba(17, 17, 17, 0.14);
|
|
transition: border-color 0.3s ease;
|
|
}
|
|
|
|
.ehw-step:first-child {
|
|
border-left: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.ehw-step:hover {
|
|
border-left-color: rgba(200, 16, 46, 0.4);
|
|
}
|
|
|
|
.ehw-step-num {
|
|
font-size: clamp(48px, 4.6vw, 78px);
|
|
font-weight: 900;
|
|
line-height: 0.84;
|
|
letter-spacing: -0.03em;
|
|
color: transparent;
|
|
-webkit-text-stroke: 1.5px rgba(17, 17, 17, 0.24);
|
|
margin: 0 0 18px 0;
|
|
transition: -webkit-text-stroke-color 0.3s ease;
|
|
}
|
|
|
|
.ehw-step.is-accent .ehw-step-num {
|
|
-webkit-text-stroke: 1.5px rgba(200, 16, 46, 0.58);
|
|
}
|
|
|
|
.ehw-step-kicker {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.ehw-step-kicker svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
color: rgba(17, 17, 17, 0.36);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ehw-step-kicker span {
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
color: rgba(17, 17, 17, 0.4);
|
|
}
|
|
|
|
.ehw-step.is-accent .ehw-step-kicker svg,
|
|
.ehw-step.is-accent .ehw-step-kicker span {
|
|
color: #c8102e;
|
|
}
|
|
|
|
.ehw-step-title {
|
|
font-size: clamp(18px, 1.4vw, 22px) !important;
|
|
font-weight: 800 !important;
|
|
letter-spacing: -0.02em !important;
|
|
line-height: 1.2 !important;
|
|
text-transform: none !important;
|
|
color: #111111 !important;
|
|
margin: 0 0 22px 0;
|
|
}
|
|
|
|
.ehw-step-desc {
|
|
max-width: 27ch;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
color: rgba(17, 17, 17, 0.55);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Tablet: 3 + 2, centered — sever the divider at the start of each row. */
|
|
@media (max-width: 1100px) {
|
|
.ehw-step {
|
|
flex-basis: calc((100% - 2 * var(--ehw-gap)) / 3);
|
|
}
|
|
.ehw-step:nth-child(4) {
|
|
border-left: none;
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
/* Mobile: compact numbered editorial index — number in a narrow
|
|
left column, title/description/divider sharing one right
|
|
content column, laid out on the existing milestone markup via
|
|
CSS Grid (no duplicated JSX, no new step markup). */
|
|
@media (max-width: 640px) {
|
|
.ehw-head {
|
|
margin-bottom: clamp(40px, 10vw, 56px);
|
|
}
|
|
|
|
.ehw-sequence {
|
|
row-gap: 0;
|
|
}
|
|
|
|
.ehw-step {
|
|
display: grid;
|
|
grid-template-columns: 48px minmax(0, 1fr);
|
|
column-gap: 14px;
|
|
flex-basis: 100%;
|
|
padding-left: 0;
|
|
padding-top: clamp(28px, 8vw, 36px);
|
|
border-left: none;
|
|
border-top: none;
|
|
}
|
|
|
|
.ehw-step:first-child {
|
|
padding-top: 0;
|
|
}
|
|
|
|
/* Compact solid index number — replaces the oversized pale
|
|
outline treatment used on desktop/tablet. */
|
|
.ehw-step-num {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
align-self: start;
|
|
font-size: clamp(32px, 9vw, 40px);
|
|
line-height: 1;
|
|
color: #c8102e;
|
|
-webkit-text-stroke: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Hidden completely — no reserved gap left in its place since a
|
|
display:none grid item takes no track space. */
|
|
.ehw-step-kicker {
|
|
display: none;
|
|
}
|
|
|
|
.ehw-step-title {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
font-size: clamp(22px, 6vw, 26px) !important;
|
|
}
|
|
|
|
.ehw-step-desc {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
max-width: none;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* Divider lives inside the description box (content column
|
|
only), so it never runs underneath the number column. */
|
|
.ehw-step-desc::after {
|
|
content: "";
|
|
display: block;
|
|
margin-top: clamp(24px, 6vw, 28px);
|
|
height: 1px;
|
|
background-color: rgba(17, 17, 17, 0.14);
|
|
}
|
|
|
|
.ehw-step:last-child .ehw-step-desc::after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* ---- Mobile title-to-description gap fix ----
|
|
.ehw-step-title is an <h3>, so it's matched by a global,
|
|
unscoped site.css rule (.logico-front-end h3:not(...) { margin:
|
|
0 0 30px }) that outranks this component's own single-class
|
|
".ehw-step-title { margin: 0 0 22px }" by specificity — bumping
|
|
the real margin-bottom to 30px everywhere, not just here. There
|
|
is no min-height, space-between, or fixed row height anywhere in
|
|
this component; the gap is purely that extra 8px of margin
|
|
reading as oversized once every other element around it (kicker,
|
|
description line-height) is tightly spaced. Overridden with
|
|
!important, matching how every other property on this selector
|
|
already has to defeat the same global rule. Scoped to mobile
|
|
only, per spec — desktop/tablet are left exactly as they were
|
|
(still resolving to the global 30px; out of scope here). */
|
|
@media (max-width: 767px) {
|
|
.ehw-step-title {
|
|
margin-bottom: 16px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.ehw-section { padding-top: 48px; padding-bottom: 68px; }
|
|
}
|
|
`,
|
|
}}
|
|
/>
|
|
|
|
<section className="ehw-section" id="wings-empowerment-how-it-works">
|
|
<div className="dm-section-container">
|
|
<div className="ehw-inner">
|
|
<div className="ehw-head">
|
|
<ScrollReveal delay={0.05} duration={0.75} yOffset={20} className="ehw-head-reveal">
|
|
<div className="ehw-eyebrow">/ The Founder Journey /</div>
|
|
<hr className="ehw-divider" />
|
|
</ScrollReveal>
|
|
<ScrollReveal delay={0.1} duration={0.85} yOffset={24}>
|
|
<h2 className="ehw-title">A clear path, from idea to enterprise</h2>
|
|
</ScrollReveal>
|
|
</div>
|
|
|
|
<StaggerChildren className="ehw-sequence" stagger={0.12} duration={0.7} yOffset={30} triggerOnce>
|
|
{STEPS.map((s, i) => (
|
|
<div className={`ehw-step${i === 2 ? " is-accent" : ""}`} key={s.step}>
|
|
<div className="ehw-step-num">{s.step}</div>
|
|
<div className="ehw-step-kicker" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M7 17 17 7M9 7h8v8" />
|
|
</svg>
|
|
<span>Step</span>
|
|
</div>
|
|
<h3 className="ehw-step-title">{s.title}</h3>
|
|
<p className="ehw-step-desc">{s.desc}</p>
|
|
</div>
|
|
))}
|
|
</StaggerChildren>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|