Doormile/doormile_react
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

update doormilewings card image update

Browse Source
This commit is contained in:
Aravind
2026-07-07 21:43:02 +05:30
parent fc190343eb
commit f7bab1fe70
24 changed files with 902 additions and 541 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/sections/WingsRoadmap.tsx
View File

@@ -53,7 +53,7 @@ export default function WingsRoadmap() {
.wrm-section {
position: relative;
width: calc(100% - 40px);
margin: 0 auto;
margin: clamp(56px, 7vw, 96px) auto clamp(24px, 4vw, 40px);
border-radius: 28px;
overflow: hidden;
box-sizing: border-box;
@@ -87,7 +87,7 @@ export default function WingsRoadmap() {
}
.wrm-inner {
max-width: 1200px;
max-width: 1380px;
margin: 0 auto;
}
@@ -244,43 +244,45 @@ export default function WingsRoadmap() {
/>
<section className="wrm-section" id="wings-roadmap">
<div className="wrm-header">
<div className="wrm-eyebrow">/ Future Roadmap /</div>
<h2 className="wrm-title">A ten-year path to national scale</h2>
</div>
<div className="wrm-inner">
<div className="wrm-track-wrap" aria-hidden="true">
<div className="wrm-track-fill" style={{ width: `${fillPct}%` }} />
<div className="wrm-nodes">
{ROADMAP_DATA.map((_, i) => (
<div
key={i}
className={`wrm-node${i <= active ? " is-active" : ""}`}
style={{ left: `${((i + 0.5) / ROADMAP_DATA.length) * 100}%` }}
/>
))}
</div>
<div className="dm-section-container">
<div className="wrm-header">
<div className="wrm-eyebrow">/ Future Roadmap /</div>
<h2 className="wrm-title">A ten-year path to national scale</h2>
</div>
<div className="wrm-grid">
{ROADMAP_DATA.map((item, i) => (
<div
key={item.year}
className={`wrm-card${item.glow ? " wrm-glow" : ""}${i === active ? " is-active" : ""}`}
onMouseEnter={() => setActive(i)}
onClick={() => setActive(i)}
role="button"
tabIndex={0}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") setActive(i);
}}
>
<div className="wrm-card-year">{item.year}</div>
<span className={`wrm-phase-pill ${item.phaseClass}`}>{item.phase}</span>
<p className="wrm-card-desc">{item.desc}</p>
<div className="wrm-inner">
<div className="wrm-track-wrap" aria-hidden="true">
<div className="wrm-track-fill" style={{ width: `${fillPct}%` }} />
<div className="wrm-nodes">
{ROADMAP_DATA.map((_, i) => (
<div
key={i}
className={`wrm-node${i <= active ? " is-active" : ""}`}
style={{ left: `${((i + 0.5) / ROADMAP_DATA.length) * 100}%` }}
/>
))}
</div>
))}
</div>
<div className="wrm-grid">
{ROADMAP_DATA.map((item, i) => (
<div
key={item.year}
className={`wrm-card${item.glow ? " wrm-glow" : ""}${i === active ? " is-active" : ""}`}
onMouseEnter={() => setActive(i)}
onClick={() => setActive(i)}
role="button"
tabIndex={0}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") setActive(i);
}}
>
<div className="wrm-card-year">{item.year}</div>
<span className={`wrm-phase-pill ${item.phaseClass}`}>{item.phase}</span>
<p className="wrm-card-desc">{item.desc}</p>
</div>
))}
</div>
</div>
</div>
</section>