update Entrepreneurship
This commit is contained in:
239
src/components/sections/EmpowermentHowItWorks.tsx
Normal file
239
src/components/sections/EmpowermentHowItWorks.tsx
Normal file
@@ -0,0 +1,239 @@
|
||||
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: single column — dividers rotate from vertical to horizontal. */
|
||||
@media (max-width: 640px) {
|
||||
.ehw-sequence {
|
||||
row-gap: 0;
|
||||
}
|
||||
.ehw-step {
|
||||
flex-basis: 100%;
|
||||
padding-left: 0;
|
||||
padding-top: clamp(28px, 8vw, 38px);
|
||||
border-left: none;
|
||||
border-top: 1px solid rgba(17, 17, 17, 0.14);
|
||||
}
|
||||
.ehw-step:first-child {
|
||||
padding-top: 0;
|
||||
border-top: none;
|
||||
}
|
||||
.ehw-step:nth-child(4) {
|
||||
border-top: 1px solid rgba(17, 17, 17, 0.14);
|
||||
}
|
||||
.ehw-step:hover {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
.ehw-step-num {
|
||||
font-size: clamp(44px, 13vw, 56px);
|
||||
}
|
||||
}
|
||||
|
||||
@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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user