Skip to content

Commit 4c9ec11

Browse files
geraldarthurdavisgeraldarthurdavis
committed
V48 (impl-only): Shorten pillar CTAs and tighten card header spacing
Use Sell Source / Buy Packs / View Exchange on one line, equal-height pillar columns, BTC · BTD · On-Chain subtitle, and less gap between header and body.
1 parent b11025c commit 4c9ec11

4 files changed

Lines changed: 39 additions & 38 deletions

File tree

‎uapi/components/bitcode/layout/BitcodePublicCopy/bitcode-public-copy.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@ export const BITCODE_PUBLIC_COPY = {
1414
],
1515
primaryCta: {
1616
href: '/reads',
17-
label: 'Buy AssetPacks',
17+
label: 'Buy Packs',
1818
},
1919
secondaryCta: {
2020
href: '/deposits',
21-
label: 'Sell AssetPacks',
21+
label: 'Sell Source',
2222
},
2323
tertiaryCta: {
2424
href: '/packs',
25-
label: 'View AssetPacks',
25+
label: 'View Exchange',
2626
},
2727
guide: {
2828
posts: [

‎uapi/components/marketing/MarketingLandingHero/MarketingLandingHero.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -132,20 +132,22 @@ export const MarketingLandingHero = memo(function MarketingLandingHero() {
132132
))}
133133
</div>
134134

135-
{/* Pillar + CTA share one column so each button sits under its card. */}
136-
<div className="mt-4 grid grid-cols-1 gap-x-2 gap-y-3 phone:mt-5 phone:grid-cols-2 phone:gap-x-3 desktop:grid-cols-3">
135+
{/* Pillar + CTA share one column so each button sits under its card; cards stretch equal height. */}
136+
<div className="mt-4 grid grid-cols-1 items-stretch gap-x-2 gap-y-3 phone:mt-5 phone:grid-cols-2 phone:gap-x-3 desktop:grid-cols-3">
137137
{productPillars.map((pillar, index) => {
138138
const cta = pillarCtas.find((entry) => entry.pillarTitle === pillar.title) ?? pillarCtas[index];
139139

140140
return (
141-
<div key={pillar.title} className="flex min-w-0 flex-col gap-3">
142-
<MarketingLandingPillarCard {...pillar} index={index} />
141+
<div key={pillar.title} className="flex min-h-0 min-w-0 flex-col gap-3">
142+
<div className="min-h-0 flex-1">
143+
<MarketingLandingPillarCard {...pillar} index={index} />
144+
</div>
143145
<Link
144146
href={cta.href}
145-
className={`inline-flex w-full items-center justify-center gap-2 rounded-none border px-4 py-2.5 text-[11px] font-semibold uppercase tracking-[0.18em] transition-colors ${cta.className}`}
147+
className={`inline-flex w-full shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-none border px-3 py-2.5 text-[11px] font-semibold uppercase tracking-[0.16em] transition-colors ${cta.className}`}
146148
>
147149
{cta.label}
148-
<ArrowRightIcon className="h-4 w-4" />
150+
<ArrowRightIcon className="h-4 w-4 shrink-0" />
149151
</Link>
150152
</div>
151153
);

‎uapi/components/marketing/MarketingLandingPillarCard/MarketingLandingPillarCard.tsx‎

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export function MarketingLandingPillarCard({
3737
delay: 0.1 + index * 0.08,
3838
ease: entranceEase,
3939
}}
40-
className={`relative overflow-hidden rounded-none border p-3 backdrop-blur-xl phone:p-4 ${
40+
className={`relative flex h-full min-h-0 flex-col overflow-hidden rounded-none border p-3 backdrop-blur-xl phone:p-4 ${
4141
title.includes('$BTD')
4242
? 'border-orange-300/20 bg-black/30 shadow-[0_18px_50px_rgba(79,30,0,0.34)]'
4343
: 'border-white/10 bg-white/5 shadow-[0_16px_50px_rgba(2,8,17,0.32)]'
@@ -64,8 +64,8 @@ export function MarketingLandingPillarCard({
6464
backgroundSize: '18px 18px',
6565
}}
6666
/>
67-
<div className="relative">
68-
<div className="relative min-h-[58px] pr-16 text-violet-100 phone:min-h-[68px] phone:pr-20">
67+
<div className="relative flex min-h-0 flex-1 flex-col">
68+
<div className="relative pr-16 text-violet-100 phone:pr-20">
6969
<span className="absolute right-0 top-0 inline-flex min-w-[64px] items-center justify-center rounded-none border border-white/12 bg-white/8 px-2.5 py-1 text-center text-[8px] uppercase tracking-[0.16em] text-violet-100/70 phone:min-w-[72px]">
7070
deposit
7171
</span>
@@ -82,10 +82,10 @@ export function MarketingLandingPillarCard({
8282
</div>
8383
</div>
8484
</div>
85-
<p className="mt-3 min-h-[4.5rem] text-[11px] leading-4 text-violet-50/88 phone:min-h-[5rem] phone:text-[13px] phone:leading-5">
85+
<p className="mt-1.5 min-h-[4.5rem] text-[11px] leading-4 text-violet-50/88 phone:min-h-[5rem] phone:text-[13px] phone:leading-5">
8686
{description}
8787
</p>
88-
<div className="mt-4 space-y-3 border-t border-white/12 pt-4">
88+
<div className="mt-auto space-y-3 border-t border-white/12 pt-4">
8989
<div className="border-l-4 border-purple-400 pl-3">
9090
<p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-white">
9191
What you package
@@ -151,8 +151,8 @@ export function MarketingLandingPillarCard({
151151
<div className="absolute inset-x-5 top-0 h-px bg-gradient-to-r from-transparent via-emerald-200/70 to-transparent" />
152152
<div className="absolute inset-0 -z-10 opacity-10 [mask-image:linear-gradient(to_bottom,transparent,white,white,transparent)] bg-[repeating-linear-gradient(90deg,#ffffff0d_0_40px,transparent_40px_80px)] bg-[length:160px_160px]" />
153153
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(16,185,129,0.18),transparent_28%),radial-gradient(circle_at_bottom_right,rgba(45,212,191,0.12),transparent_30%)]" />
154-
<div className="relative">
155-
<div className="relative min-h-[58px] pr-16 text-emerald-100 phone:min-h-[68px] phone:pr-20">
154+
<div className="relative flex min-h-0 flex-1 flex-col">
155+
<div className="relative pr-16 text-emerald-100 phone:pr-20">
156156
<span className="absolute right-0 top-0 inline-flex min-w-[64px] items-center justify-center rounded-none border border-emerald-200/12 bg-emerald-400/8 px-2.5 py-1 text-center text-[8px] uppercase tracking-[0.16em] text-emerald-50/72 phone:min-w-[72px]">
157157
read
158158
</span>
@@ -169,10 +169,10 @@ export function MarketingLandingPillarCard({
169169
</div>
170170
</div>
171171
</div>
172-
<p className="mt-3 min-h-[4.5rem] text-[11px] leading-4 text-emerald-50/88 phone:min-h-[5rem] phone:text-[13px] phone:leading-5">
172+
<p className="mt-1.5 min-h-[4.5rem] text-[11px] leading-4 text-emerald-50/88 phone:min-h-[5rem] phone:text-[13px] phone:leading-5">
173173
{description}
174174
</p>
175-
<div className="relative mt-4">
175+
<div className="relative mt-auto pt-4">
176176
<div className="relative grid grid-cols-3 gap-2">
177177
{measureCardAxes.map((axis, axisIndex) => (
178178
<div
@@ -219,25 +219,24 @@ export function MarketingLandingPillarCard({
219219
<div className="absolute inset-[1px] rounded-none border border-orange-200/10" />
220220
<div className="absolute inset-x-5 top-0 h-px bg-gradient-to-r from-transparent via-orange-100/70 to-transparent" />
221221
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(251,146,60,0.24),transparent_34%),radial-gradient(circle_at_bottom_left,rgba(251,191,36,0.08),transparent_30%)]" />
222-
<div className="relative">
223-
<div className="relative min-h-[58px] pr-16 text-orange-100 phone:min-h-[68px] phone:pr-20">
222+
<div className="relative flex min-h-0 flex-1 flex-col">
223+
<div className="relative pr-16 text-orange-100 phone:pr-20">
224224
<div className="flex items-start gap-2">
225225
<Icon className="h-5 w-5 text-orange-300" />
226226
<div className="min-w-0">
227227
<p className="bg-gradient-to-r from-white via-orange-100 to-white/80 bg-clip-text text-[11px] font-semibold uppercase tracking-[0.18em] text-transparent">
228228
{title}
229229
</p>
230-
<p className="mt-1 max-w-[18ch] text-[9px] uppercase leading-snug tracking-[0.16em] text-orange-100/52 phone:text-[10px]">
231-
<span className="block whitespace-nowrap">BTC · BTD</span>
232-
<span className="block whitespace-nowrap">On-Chain Delivery</span>
230+
<p className="mt-1 max-w-[20ch] text-[9px] uppercase leading-snug tracking-[0.14em] text-orange-100/52 phone:text-[10px]">
231+
<span className="block whitespace-nowrap">BTC · BTD · On-Chain</span>
233232
</p>
234233
</div>
235234
</div>
236235
<div className="absolute right-0 top-0">
237236
<BitcodeSoftwareSvgLogo width="44px" softwareClassName="hidden" className="opacity-90" />
238237
</div>
239238
</div>
240-
<p className="mt-3 min-h-[4.5rem] text-[11px] leading-4 text-orange-50/88 phone:min-h-[5rem] phone:text-[13px] phone:leading-5">
239+
<p className="mt-1.5 min-h-[4.5rem] text-[11px] leading-4 text-orange-50/88 phone:min-h-[5rem] phone:text-[13px] phone:leading-5">
241240
{hasBtdInDescription ? (
242241
<>
243242
{beforeBtd}
@@ -248,15 +247,17 @@ export function MarketingLandingPillarCard({
248247
description
249248
)}
250249
</p>
251-
<div className="mt-4 rounded-none border border-orange-200/12 bg-black/25 px-3 py-2">
252-
<p className="font-mono text-[10px] uppercase tracking-[0.18em] text-orange-50/76">
253-
{'buyer pays BTC · seller earns · rights transfer'}
254-
</p>
255-
</div>
256-
<div className="mt-4 rounded-none border border-orange-200/12 bg-black/25 px-3 py-2">
257-
<p className="font-mono text-[10px] uppercase tracking-[0.18em] text-orange-50/76">
258-
{'source unlocks only after finality + BTD rights'}
259-
</p>
250+
<div className="mt-auto space-y-3 pt-4">
251+
<div className="rounded-none border border-orange-200/12 bg-black/25 px-3 py-2">
252+
<p className="font-mono text-[10px] uppercase tracking-[0.18em] text-orange-50/76">
253+
{'buyer pays BTC · seller earns · rights transfer'}
254+
</p>
255+
</div>
256+
<div className="rounded-none border border-orange-200/12 bg-black/25 px-3 py-2">
257+
<p className="font-mono text-[10px] uppercase tracking-[0.18em] text-orange-50/76">
258+
{'source unlocks only after finality + BTD rights'}
259+
</p>
260+
</div>
260261
</div>
261262
</div>
262263
</>

‎uapi/tests/marketingLandingPage.test.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -82,14 +82,12 @@ describe('MarketingLandingPage', () => {
8282
expect(
8383
screen.getByText("AIs trade technical knowledge with Bitcode's on-chain marketplace."),
8484
).toBeInTheDocument();
85-
expect(
86-
screen.getByRole('link', { name: 'Buy AssetPacks' }),
87-
).toHaveAttribute('href', '/reads');
88-
expect(screen.getByRole('link', { name: 'Sell AssetPacks' })).toHaveAttribute(
85+
expect(screen.getByRole('link', { name: 'Buy Packs' })).toHaveAttribute('href', '/reads');
86+
expect(screen.getByRole('link', { name: 'Sell Source' })).toHaveAttribute(
8987
'href',
9088
'/deposits',
9189
);
92-
expect(screen.getByRole('link', { name: 'View AssetPacks' })).toHaveAttribute(
90+
expect(screen.getByRole('link', { name: 'View Exchange' })).toHaveAttribute(
9391
'href',
9492
'/packs',
9593
);

0 commit comments

Comments
 (0)