Skip to content

Commit 4ce4776

Browse files
nicholas-tayagnicholas-tayag
committed
Add scroll skill explainer
1 parent ff4ef23 commit 4ce4776

2 files changed

Lines changed: 225 additions & 6 deletions

File tree

‎src/App.css‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5480,3 +5480,187 @@
54805480
will-change: auto;
54815481
}
54825482
}
5483+
5484+
/* Micro / Meso / Macro scroll explainer. */
5485+
.axis-scroll-story {
5486+
grid-column: 1 / -1;
5487+
display: grid;
5488+
grid-template-columns: minmax(260px, 0.8fr) minmax(360px, 1.2fr);
5489+
gap: clamp(28px, 6vw, 84px);
5490+
width: min(100%, 1120px);
5491+
min-height: 118svh;
5492+
margin: clamp(18px, 5vw, 68px) auto 0;
5493+
padding: clamp(26px, 5vw, 72px) 0 clamp(60px, 8vw, 110px);
5494+
scroll-margin-top: 80px;
5495+
}
5496+
5497+
.axis-story-sticky {
5498+
position: sticky;
5499+
top: 14vh;
5500+
display: grid;
5501+
align-self: start;
5502+
gap: 14px;
5503+
padding-top: clamp(10px, 3vw, 34px);
5504+
text-shadow: 0 1px 24px rgb(255 255 255 / 0.62);
5505+
}
5506+
5507+
.axis-story-sticky span {
5508+
width: fit-content;
5509+
color: rgb(8 17 31 / 0.58);
5510+
font-size: 0.76rem;
5511+
font-weight: 950;
5512+
letter-spacing: 0.04em;
5513+
text-transform: uppercase;
5514+
}
5515+
5516+
.axis-story-sticky h2 {
5517+
max-width: 520px;
5518+
margin: 0;
5519+
color: #07111f;
5520+
font-size: clamp(2.35rem, 4vw, 4.25rem);
5521+
font-weight: 950;
5522+
letter-spacing: 0;
5523+
line-height: 0.9;
5524+
}
5525+
5526+
.axis-story-sticky p {
5527+
max-width: 430px;
5528+
margin: 0;
5529+
color: rgb(8 17 31 / 0.7);
5530+
font-size: 1rem;
5531+
line-height: 1.55;
5532+
}
5533+
5534+
.axis-story-track {
5535+
display: grid;
5536+
gap: clamp(20px, 4vw, 42px);
5537+
padding-top: 8vh;
5538+
}
5539+
5540+
.axis-story-card {
5541+
display: grid;
5542+
grid-template-columns: 116px minmax(0, 1fr);
5543+
gap: 22px;
5544+
min-height: 230px;
5545+
padding: clamp(18px, 3vw, 30px);
5546+
background:
5547+
linear-gradient(145deg, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0.08)),
5548+
rgb(255 255 255 / 0.12);
5549+
border: 1px solid rgb(255 255 255 / 0.2);
5550+
border-radius: 30px;
5551+
backdrop-filter: blur(10px) saturate(1.04);
5552+
}
5553+
5554+
.axis-story-card.micro {
5555+
--axis-story-color: #e8514b;
5556+
}
5557+
5558+
.axis-story-card.meso {
5559+
--axis-story-color: #2cb76f;
5560+
}
5561+
5562+
.axis-story-card.macro {
5563+
--axis-story-color: #3c86f6;
5564+
}
5565+
5566+
.axis-story-marker {
5567+
display: grid;
5568+
align-content: space-between;
5569+
min-height: 170px;
5570+
color: #07111f;
5571+
}
5572+
5573+
.axis-story-marker::before {
5574+
display: block;
5575+
width: 5px;
5576+
height: 74px;
5577+
content: '';
5578+
background: var(--axis-story-color);
5579+
border-radius: 999px;
5580+
box-shadow: 0 0 24px rgb(255 255 255 / 0.34);
5581+
}
5582+
5583+
.axis-story-marker small {
5584+
color: rgb(8 17 31 / 0.48);
5585+
font-size: 0.72rem;
5586+
font-weight: 950;
5587+
}
5588+
5589+
.axis-story-marker strong {
5590+
font-size: 1.38rem;
5591+
font-weight: 950;
5592+
}
5593+
5594+
.axis-story-card h3 {
5595+
max-width: 430px;
5596+
margin: 0 0 10px;
5597+
color: #07111f;
5598+
font-size: clamp(1.35rem, 2.4vw, 2.2rem);
5599+
font-weight: 950;
5600+
line-height: 1.02;
5601+
}
5602+
5603+
.axis-story-card p {
5604+
max-width: 540px;
5605+
margin: 0;
5606+
color: rgb(8 17 31 / 0.68);
5607+
line-height: 1.56;
5608+
}
5609+
5610+
.axis-example-strip {
5611+
display: flex;
5612+
flex-wrap: wrap;
5613+
gap: 8px;
5614+
margin-top: 18px;
5615+
}
5616+
5617+
.axis-example-strip span {
5618+
padding: 7px 10px;
5619+
color: rgb(8 17 31 / 0.68);
5620+
background: rgb(255 255 255 / 0.18);
5621+
border: 1px solid rgb(255 255 255 / 0.22);
5622+
border-radius: 999px;
5623+
font-size: 0.78rem;
5624+
font-weight: 850;
5625+
}
5626+
5627+
@media (max-width: 900px) {
5628+
.axis-scroll-story {
5629+
grid-template-columns: 1fr;
5630+
min-height: auto;
5631+
padding-inline: 16px;
5632+
}
5633+
5634+
.axis-story-sticky {
5635+
position: relative;
5636+
top: auto;
5637+
}
5638+
5639+
.axis-story-sticky h2 {
5640+
max-width: 640px;
5641+
}
5642+
5643+
.axis-story-track {
5644+
padding-top: 0;
5645+
}
5646+
}
5647+
5648+
@media (max-width: 620px) {
5649+
.axis-story-card {
5650+
grid-template-columns: 1fr;
5651+
gap: 14px;
5652+
border-radius: 24px;
5653+
}
5654+
5655+
.axis-story-marker {
5656+
grid-template-columns: auto 1fr;
5657+
gap: 12px;
5658+
min-height: 0;
5659+
align-items: center;
5660+
}
5661+
5662+
.axis-story-marker::before {
5663+
width: 42px;
5664+
height: 5px;
5665+
}
5666+
}

‎src/App.tsx‎

Lines changed: 41 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,6 @@ const scorePath = (scores: AxisScores) => {
150150

151151
const sourceVideoUrl = 'https://www.youtube.com/watch?v=NgHvdCcmQ4o'
152152
const sourceVideoTitle = "Once you see this, You'll see Competitive Games Differently"
153-
const sourceCreator = 'Surnex'
154153

155154
const pageMotion = {
156155
initial: { opacity: 0, y: 18 },
@@ -1108,16 +1107,52 @@ function OnboardingStage({
11081107
</CardContent>
11091108
</Card>
11101109

1111-
<a className="bottom-source-link" href={sourceVideoUrl} target="_blank" rel="noreferrer">
1112-
<PlayIcon />
1113-
Source: {sourceCreator} -- “{sourceVideoTitle}”
1114-
<ExternalLinkIcon />
1115-
</a>
1110+
<AxisScrollStory />
11161111
</section>
11171112
</motion.main>
11181113
)
11191114
}
11201115

1116+
function AxisScrollStory() {
1117+
const axisExamples: Record<Axis, string[]> = {
1118+
micro: ['aim', 'movement', 'timing', 'parries', 'clean inputs'],
1119+
meso: ['positioning', 'adaptation', 'reads', 'risk swaps', 'tempo changes'],
1120+
macro: ['buildcraft', 'routing', 'economy', 'team plans', 'long-term tradeoffs'],
1121+
}
1122+
1123+
return (
1124+
<section className="axis-scroll-story" aria-label="Micro Meso Macro explanation" data-scroll-reveal>
1125+
<div className="axis-story-sticky">
1126+
<span>Skill map</span>
1127+
<h2>Three kinds of challenge, three kinds of fun.</h2>
1128+
<p>
1129+
GameFit treats skill as a fit question. You might love precision, adaptation, planning, or a mix of all three.
1130+
</p>
1131+
</div>
1132+
1133+
<div className="axis-story-track">
1134+
{axes.map((axis, index) => (
1135+
<article className={`axis-story-card ${axis}`} data-scroll-card key={axis}>
1136+
<div className="axis-story-marker">
1137+
<small>0{index + 1}</small>
1138+
<strong>{axisCopy[axis].label}</strong>
1139+
</div>
1140+
<div>
1141+
<h3>{axisCopy[axis].short}</h3>
1142+
<p>{axisCopy[axis].description}</p>
1143+
<div className="axis-example-strip">
1144+
{axisExamples[axis].map((example) => (
1145+
<span key={example}>{example}</span>
1146+
))}
1147+
</div>
1148+
</div>
1149+
</article>
1150+
))}
1151+
</div>
1152+
</section>
1153+
)
1154+
}
1155+
11211156
function GameSeedRow({
11221157
game,
11231158
index,

0 commit comments

Comments
 (0)