Skip to content

refactor(homepage): eliminate styles.css for full Tailwind migration #1085

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
orveth wants to merge 1 commit into
base: master
Choose a base branch
from
Open

refactor(homepage): eliminate styles.css for full Tailwind migration #1085

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/web-wallet/app/features/homepage/components/join-beta-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export function JoinBetaButton({
<Link
to={isLoggedIn ? '/' : { ...location, pathname: '/signup' }}
className={cn(
'inline-flex items-center justify-center rounded-md border border-[color:var(--mk-brand)] bg-[color:var(--mk-brand)] font-medium font-mono text-[#04080f] tracking-wide transition-[background-color,color] duration-200 hover:bg-transparent hover:text-[color:var(--mk-brand)] focus-visible:outline-2 focus-visible:outline-[color:var(--mk-brand)] focus-visible:outline-offset-2',
'inline-flex items-center justify-center rounded-md border border-[color:var(--mk-brand)] bg-[color:var(--mk-brand)] font-medium text-[#04080f] tracking-wide transition-[background-color,color] duration-200 [font-family:var(--mk-font-mono)] hover:bg-transparent hover:text-[color:var(--mk-brand)] focus-visible:outline-2 focus-visible:outline-[color:var(--mk-brand)] focus-visible:outline-offset-2',
sizeClasses,
className,
)}
Expand Down
2 changes: 1 addition & 1 deletion apps/web-wallet/app/features/homepage/components/section-label.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ type SectionLabelProps = {

export function SectionLabel({ children, className, href }: SectionLabelProps) {
const labelClasses = cn(
'translate-y-2 text-left font-mono text-[color:var(--mk-text-muted)] text-xs uppercase tracking-[0.12em]',
'translate-y-2 text-left [font-family:var(--mk-font-mono)] text-[color:var(--mk-text-muted)] text-xs uppercase tracking-[0.12em]',
className,
);
const content = (
Expand Down
1 change: 1 addition & 0 deletions apps/web-wallet/app/features/homepage/components/section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export function Section({
id={id}
className={cn(
'relative w-full px-5 py-20 md:px-8 md:py-32',
id && 'scroll-mt-[64px] md:scroll-mt-[70px]',
hairline && 'border-[color:var(--mk-border)] border-t',
className,
)}
Expand Down
21 changes: 19 additions & 2 deletions apps/web-wallet/app/features/homepage/marketing-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,28 @@ import { MerchantsSection } from './sections/merchants-section';
import { SendSection } from './sections/send-section';
import { SpendSection } from './sections/spend-section';
import { WalletSection } from './sections/wallet-section';
import './styles.css';

const marketingVars: React.CSSProperties = {
'--mk-bg': '#04080f',
'--mk-bg-card': 'rgba(12, 20, 36, 0.5)',
'--mk-text': '#e8edf8',
'--mk-text-dim': '#8094b8',
'--mk-text-muted': '#455575',
'--mk-brand': '#00d4ff',
'--mk-border': 'rgba(255, 255, 255, 0.06)',
'--mk-border-bright': 'rgba(255, 255, 255, 0.12)',
'--mk-font-display':
'"Cabinet Grotesk", -apple-system, BlinkMacSystemFont, sans-serif',
'--mk-font-mono': '"Kode Mono", ui-monospace, monospace',
'--mk-font-numeric': '"Teko", sans-serif',
} as React.CSSProperties;

export function MarketingPage() {
return (
<div className="marketing scrollbar-none h-dvh overflow-y-auto overflow-x-hidden bg-[color:var(--mk-bg)] text-[color:var(--mk-text)] [font-family:var(--mk-font-display)]">
<div
className="marketing scrollbar-none h-dvh overflow-y-auto overflow-x-hidden bg-[color:var(--mk-bg)] text-[color:var(--mk-text)] antialiased [font-family:var(--mk-font-display)] [font-feature-settings:'ss01','ss02']"
style={marketingVars}
>
<MarketingNav />
<main>
<HeroSection />
Expand Down
13 changes: 8 additions & 5 deletions apps/web-wallet/app/features/homepage/sections/buy-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,20 +77,23 @@ export function BuySection() {
<div className="grid grid-cols-1 items-center gap-12 md:grid-cols-2 md:gap-20">
<div className="text-center md:text-left">
<SectionLabel href="#buy">01_buy</SectionLabel>
<h2 className="mt-8 font-medium font-mono text-3xl leading-[1.15] tracking-[-0.02em] md:mt-10 md:text-5xl">
<h2 className="mt-8 font-medium text-3xl leading-[1.15] tracking-[-0.02em] [font-family:var(--mk-font-mono)] md:mt-10 md:text-5xl">
<a href="#buy">Buy a card in seconds.</a>
</h2>
<p className="mt-6 text-[color:var(--mk-text-dim)] text-base leading-relaxed md:text-lg">
Buy a gift card with bitcoin, or use the Cash App to buy directly
from your bank account.
</p>
<div className="mt-6 font-mono text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em]">
<div className="mt-6 text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em] [font-family:var(--mk-font-mono)]">
lightning · cash app · settled instantly
</div>
</div>

<div className="flex justify-center">
<div className={`${buyStageBase} ${state}`}>
<div
className={`group/paid ${buyStageBase} ${state}`}
data-paid={state === 'paid'}
>
<div className={buyHead}>
<span>{header.brand}</span>
<span className="text-[color:var(--mk-text)]">
Expand Down Expand Up @@ -231,7 +234,7 @@ function PaidBody() {
<div className="flex flex-1 flex-col items-center justify-center">
<div
aria-hidden="true"
className="cashapp-check mb-4 grid h-12 w-12 place-items-center rounded-full bg-[#00d54f] text-black"
className="cashapp-check mb-4 grid h-12 w-12 place-items-center rounded-full bg-[#00d54f] text-black group-data-[paid=true]/paid:animate-confirm-pop"
>
<svg
viewBox="0 0 24 24"
Expand All @@ -250,7 +253,7 @@ function PaidBody() {
/>
</svg>
</div>
<div className="cashapp-headline mb-[14px] font-bold text-[22px] text-[color:var(--mk-text)] leading-[1.1] tracking-[-0.02em] [font-family:var(--mk-font-display)]">
<div className="cashapp-headline mb-[14px] font-bold text-[22px] text-[color:var(--mk-text)] leading-[1.1] tracking-[-0.02em] [font-family:var(--mk-font-display)] group-data-[paid=true]/paid:animate-confirm-pop group-data-[paid=true]/paid:[animation-delay:80ms]">
You paid $7.98
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/web-wallet/app/features/homepage/sections/cta-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export function CtaSection() {
<div className="flex justify-center">
<SectionLabel href="#join">for_users</SectionLabel>
</div>
<h2 className="mt-7 font-medium font-mono text-2xl leading-[1.2] tracking-[-0.02em] md:text-3xl">
<h2 className="mt-7 font-medium text-2xl leading-[1.2] tracking-[-0.02em] [font-family:var(--mk-font-mono)] md:text-3xl">
<a href="#join">Be early.</a>
</h2>
<p className="mt-4 text-[color:var(--mk-text-dim)] text-base leading-relaxed">
Expand Down
4 changes: 2 additions & 2 deletions apps/web-wallet/app/features/homepage/sections/footer-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,12 @@ export function FooterSection() {
aria-label={s.label}
target="_blank"
rel="noopener noreferrer"
className="footer-social-link inline-flex h-10 w-10 items-center justify-center rounded-full border border-[color:var(--mk-border)] text-[color:var(--mk-text-muted)] transition-[color,border-color,background-color] duration-200 hover:border-[color:var(--mk-border-bright)] hover:bg-[rgba(255,255,255,0.03)] hover:text-[color:var(--mk-text)]"
className="group inline-flex h-10 w-10 items-center justify-center rounded-full border border-[color:var(--mk-border)] text-[color:var(--mk-text-muted)] transition-[color,border-color,background-color] duration-200 hover:border-[color:var(--mk-border-bright)] hover:bg-[rgba(255,255,255,0.03)] hover:text-[color:var(--mk-text)]"
>
<img
src={s.src}
alt=""
className="footer-social-img block h-4 w-4"
className="block h-4 w-4 opacity-90 transition-[filter,opacity] duration-200 [filter:invert(56%)_sepia(8%)_saturate(750%)_hue-rotate(190deg)_brightness(95%)_contrast(85%)] group-hover:opacity-100 group-hover:[filter:invert(94%)_sepia(5%)_saturate(380%)_hue-rotate(190deg)_brightness(102%)_contrast(94%)]"
/>
</a>
))}
Expand Down
17 changes: 10 additions & 7 deletions apps/web-wallet/app/features/homepage/sections/hero-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,16 +219,16 @@ export function HeroSection() {
return (
<section className="relative w-full px-5 pt-12 pb-24 md:px-8 md:pt-20 md:pb-32">
<div className="mx-auto grid max-w-6xl grid-cols-1 items-center gap-16 md:grid-cols-[1fr_minmax(360px,40%)] md:gap-20">
<div className="stagger flex flex-col text-center md:items-start md:text-left">
<div className="flex flex-col text-center md:items-start md:text-left">
<div
className="translate-y-2 text-left font-mono text-[11px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em]"
className="translate-y-2 animate-[mk-fade-up_0.6s_cubic-bezier(0.16,1,0.3,1)_forwards] text-left text-[11px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em] opacity-0 [font-family:var(--mk-font-mono)]"
style={{ animationDelay: '0ms' }}
>
<span aria-hidden="true">{'> '}</span>agi.cash · public beta
</div>

<h1
className="mt-8 text-balance font-bold font-mono text-4xl text-[color:var(--mk-text)] leading-[1.05] tracking-[-0.025em] md:mt-10 md:text-7xl"
className="mt-8 translate-y-2 animate-[mk-fade-up_0.6s_cubic-bezier(0.16,1,0.3,1)_forwards] text-balance font-bold text-4xl text-[color:var(--mk-text)] leading-[1.05] tracking-[-0.025em] opacity-0 [font-family:var(--mk-font-mono)] md:mt-10 md:text-7xl"
style={{ animationDelay: '80ms' }}
>
<span className="text-[color:var(--mk-brand)]">Bitcoin</span>
Expand All @@ -237,19 +237,22 @@ export function HeroSection() {
</h1>

<p
className="mt-7 max-w-md text-balance text-[color:var(--mk-text-dim)] text-base leading-relaxed md:text-lg"
className="mt-7 max-w-md translate-y-2 animate-[mk-fade-up_0.6s_cubic-bezier(0.16,1,0.3,1)_forwards] text-balance text-[color:var(--mk-text-dim)] text-base leading-relaxed opacity-0 md:text-lg"
style={{ animationDelay: '160ms' }}
>
Buy, send and spend bitcoin gift cards from your favorite merchants.
All on the most advanced Bitcoin wallet.
</p>

<div className="mt-9" style={{ animationDelay: '240ms' }}>
<div
className="mt-9 translate-y-2 animate-[mk-fade-up_0.6s_cubic-bezier(0.16,1,0.3,1)_forwards] opacity-0"
style={{ animationDelay: '240ms' }}
>
<JoinBetaButton size="lg" />
</div>

<div
className="mt-8 font-mono text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.2em]"
className="mt-8 translate-y-2 animate-[mk-fade-up_0.6s_cubic-bezier(0.16,1,0.3,1)_forwards] text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.2em] opacity-0 [font-family:var(--mk-font-mono)]"
style={{ animationDelay: '320ms' }}
>
buy · send · spend
Expand Down Expand Up @@ -295,7 +298,7 @@ export function HeroSection() {

<span
aria-hidden="true"
className="specimen-ruler-line absolute top-[12%] right-[-20px] bottom-[12%] w-2 border-[color:var(--mk-border)] border-r"
className="absolute top-[12%] right-[-20px] bottom-[12%] hidden w-2 border-[color:var(--mk-border)] border-r bg-[length:6px_24px] bg-[repeating-linear-gradient(to_bottom,var(--mk-border)_0,var(--mk-border)_1px,transparent_1px,transparent_24px)] bg-repeat-y [background-position:right] md:block"
/>

<div className="absolute inset-[14%] grid place-items-center [perspective:1200px] md:inset-[12%]">
Expand Down
4 changes: 2 additions & 2 deletions apps/web-wallet/app/features/homepage/sections/merchants-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export function MerchantsSection() {
<div className="flex justify-center">
<SectionLabel href="#merchants">for_merchants</SectionLabel>
</div>
<h2 className="mt-7 font-medium font-mono text-2xl leading-[1.2] tracking-[-0.02em] md:text-3xl">
<h2 className="mt-7 font-medium text-2xl leading-[1.2] tracking-[-0.02em] [font-family:var(--mk-font-mono)] md:text-3xl">
<a href="#merchants">
Run a store? Issue bitcoin gift cards today.
</a>
Expand All @@ -35,7 +35,7 @@ export function MerchantsSection() {
href="https://waitlist.agi.cash/merchants"
target="_blank"
rel="noreferrer"
className="inline-flex items-center font-mono text-[color:var(--mk-text)] text-sm tracking-wide transition-colors duration-200 hover:text-[color:var(--mk-brand)]"
className="inline-flex items-center text-[color:var(--mk-text)] text-sm tracking-wide transition-colors duration-200 [font-family:var(--mk-font-mono)] hover:text-[color:var(--mk-brand)]"
>
<span
aria-hidden="true"
Expand Down
30 changes: 20 additions & 10 deletions apps/web-wallet/app/features/homepage/sections/send-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,35 +65,40 @@ export function SendSection() {
<div className="grid grid-cols-1 items-center gap-12 md:grid-cols-2 md:gap-20">
<div className="text-center md:text-left">
<SectionLabel href="#send">02_send</SectionLabel>
<h2 className="mt-8 font-medium font-mono text-3xl leading-[1.15] tracking-[-0.02em] md:mt-10 md:text-5xl">
<h2 className="mt-8 font-medium text-3xl leading-[1.15] tracking-[-0.02em] [font-family:var(--mk-font-mono)] md:mt-10 md:text-5xl">
<a href="#send">Send over text or email.</a>
</h2>
<p className="mt-6 text-[color:var(--mk-text-dim)] text-base leading-relaxed md:text-lg">
Share gift cards over text, email or on any social media platform.
Gift cards settle instantly and can immediately be spent at the
merchant&apos;s point of sale.
</p>
<div className="mt-6 font-mono text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em]">
<div className="mt-6 text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em] [font-family:var(--mk-font-mono)]">
text · email · qr
</div>
</div>

<div className="flex flex-col items-center">
<div
ref={railRef}
className={`transit-rail relative mx-auto w-full max-w-[560px] px-3 ${played ? 'played' : ''}`}
data-played={played}
className="group/played transit-rail relative mx-auto w-full max-w-[560px] px-3"
>
<div className="grid grid-cols-[auto_1fr_auto] items-center gap-3">
<div className="rounded-md border border-[color:var(--mk-border)] bg-[color:var(--mk-bg-card)] px-3 py-2 text-left">
<div className="font-mono text-[9px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.2em]">
<div className="text-[9px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.2em] [font-family:var(--mk-font-mono)]">
origin
</div>
<div className="mt-1 font-mono text-[color:var(--mk-text)] text-xs">
<div className="mt-1 text-[color:var(--mk-text)] text-xs [font-family:var(--mk-font-mono)]">
@you
</div>
</div>

<div className="transit-track relative mx-3 h-20">
<div
aria-hidden="true"
className="-translate-y-1/2 absolute top-1/2 right-0 left-0 h-px bg-[length:8px_1px] bg-[linear-gradient(to_right,var(--mk-border)_50%,transparent_50%)]"
/>
<span
aria-hidden="true"
className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-0 h-2 w-px bg-[color:var(--mk-text-muted)]"
Expand All @@ -104,21 +109,26 @@ export function SendSection() {
/>
<div
aria-hidden="true"
className="transit-card -translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-0 h-7 w-11 rounded border border-[color:var(--mk-border)] bg-[color:var(--mk-bg-card)] opacity-0 shadow-[0_4px_14px_rgba(0,0,0,0.6)]"
/>
className="transit-card -translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-0 h-7 w-11 rounded border border-[color:var(--mk-border)] bg-[color:var(--mk-bg-card)] opacity-0 shadow-[0_4px_14px_rgba(0,0,0,0.6)] group-data-[played=true]/played:animate-transit-fly"
>
<div
aria-hidden="true"
className="absolute inset-1 rounded-[2px] bg-[linear-gradient(135deg,rgba(0,212,255,0.18),rgba(0,212,255,0.05))]"
/>
</div>
</div>

<div className="rounded-md border border-[color:var(--mk-border)] bg-[color:var(--mk-bg-card)] px-3 py-2 text-left">
<div className="font-mono text-[9px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.2em]">
<div className="text-[9px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.2em] [font-family:var(--mk-font-mono)]">
destination
</div>
<div className="mt-1 font-mono text-[color:var(--mk-text)] text-xs">
<div className="mt-1 text-[color:var(--mk-text)] text-xs [font-family:var(--mk-font-mono)]">
@satoshi
</div>
</div>
</div>

<div className="mt-6 flex items-center justify-between font-mono text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em]">
<div className="mt-6 flex items-center justify-between text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em] [font-family:var(--mk-font-mono)]">
<span>transit · {formattedTime}s</span>
<button
type="button"
Expand Down
Loading
Loading