v2 homepage: Bitcoin gift cards focus

app/entry.server.tsx

@@ -13,6 +13,7 @@ import type { RenderToPipeableStreamOptions } from 'react-dom/server';
 import { renderToPipeableStream } from 'react-dom/server';
 import type { EntryContext, RouterContextProvider } from 'react-router';
 import { ServerRouter } from 'react-router';
+import { PRERENDERED_PATHS } from './prerender-paths';
 
 export const streamTimeout = 5_000;
 
@@ -31,6 +32,20 @@ function handleRequest(
     let shellRendered = false;
     const userAgent = request.headers.get('user-agent');
 
+    // react-router's prerender constructs requests with no user-agent header.
+    const isBuildTimePrerender = !userAgent;
+
+    // Vercel currently doesn't serve prerendered HTML as static files when
+    // ssr:true (remix-run/react-router#14281) — requests for these paths
+    // fall through to the SSR function. Match them here so the outlining
+    // override below applies at runtime SSR too. Once the upstream adapter
+    // bug is fixed, this path-list check can be dropped; the no-UA check
+    // alone will cover real prerender invocations.
+    const pathname = new URL(request.url).pathname.replace(/\/+$/, '') || '/';
+    const isPrerenderRoute = PRERENDERED_PATHS.includes(pathname);
+
+    const shouldDisableOutlining = isBuildTimePrerender || isPrerenderRoute;
+
     // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
     // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
     const readyOption: keyof RenderToPipeableStreamOptions =
@@ -41,6 +56,29 @@ function handleRequest(
     const { pipe, abort } = renderToPipeableStream(
       <ServerRouter context={routerContext} url={request.url} />,
       {
+        // React's streaming SSR uses progressiveChunkSize (default 12.8 KB) to
+        // optimize first paint: when the rendered HTML exceeds this threshold,
+        // React "outlines" the next Suspense boundary — it writes the fallback
+        // into the initial shell and emits the actual content later as a
+        // hidden <template> that an inline <script> swaps in. The server
+        // flushes the shell immediately and streams the rest, so the browser
+        // starts painting (with the fallback) before the full response is
+        // ready.
+        //
+        // This trades a fallback flash for faster first paint. It's a real
+        // win for streaming SSR with slow data — a skeleton beats a blank
+        // page. But for prerender-eligible routes it's pure cost: when
+        // served as static (the intent), the file is buffered and there's
+        // no opportunity for early flushing — the fallback-then-swap dance
+        // still happens in the file, so the user sees a fallback flash on
+        // first paint with nothing gained. When falling through to runtime
+        // SSR (current Vercel behavior, see above), the same flash returns
+        // for a different reason but the same fix applies. Setting an
+        // effectively-infinite threshold disables outlining for these
+        // requests, so the content renders inline in the shell.
+        progressiveChunkSize: shouldDisableOutlining
+          ? Number.POSITIVE_INFINITY
+          : undefined,
         [readyOption]() {
           shellRendered = true;
           const body = new PassThrough();

app/features/homepage/components/join-beta-button.tsx

@@ -0,0 +1,34 @@
+import { useQuery } from '@tanstack/react-query';
+import { Link, useLocation } from 'react-router';
+import { authQueryOptions } from '~/features/user/auth';
+import { cn } from '~/lib/utils';
+
+type JoinBetaButtonProps = {
+  size?: 'default' | 'lg';
+  className?: string;
+};
+
+export function JoinBetaButton({
+  size = 'default',
+  className,
+}: JoinBetaButtonProps) {
+  const location = useLocation();
+  const { data: authState } = useQuery(authQueryOptions());
+  const isLoggedIn = authState?.isLoggedIn ?? false;
+
+  const sizeClasses =
+    size === 'lg' ? 'h-12 px-7 text-base' : 'h-10 px-5 text-sm';
+
+  return (
+    <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',
+        sizeClasses,
+        className,
+      )}
+    >
+      {isLoggedIn ? 'Go to Wallet' : 'Get Started'}
+    </Link>
+  );
+}

app/features/homepage/components/marketing-card.tsx

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { cn } from '~/lib/utils';
+
+type MarketingCardProps = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
+};
+
+export function MarketingCard({
+  children,
+  className,
+  ...props
+}: MarketingCardProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl border border-[color:var(--mk-border)] bg-[color:var(--mk-bg-card)] p-7 transition-colors duration-200 hover:border-[color:var(--mk-border-bright)] md:p-9',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

app/features/homepage/components/marketing-nav.tsx

@@ -0,0 +1,58 @@
+import { useQuery } from '@tanstack/react-query';
+import { Link } from 'react-router';
+import logoUrl from '~/assets/full_logo.png';
+import { authQueryOptions } from '~/features/user/auth';
+
+const navBtnBase =
+  'inline-flex h-9 items-center justify-center whitespace-nowrap rounded-full border px-4 [font-family:var(--mk-font-mono)] text-xs tracking-[0.04em] transition-[background-color,color,border-color] duration-200 md:h-[38px] md:px-5 md:text-[13px]';
+
+const loginBtn =
+  'border-[color:var(--mk-brand)] bg-transparent text-[color:var(--mk-brand)] hover:bg-[rgba(0,212,255,0.08)]';
+
+const signupBtn =
+  'border-[color:var(--mk-brand)] bg-[color:var(--mk-brand)] text-[#04080f] hover:bg-transparent hover:text-[color:var(--mk-brand)]';
+
+export function MarketingNav() {
+  const { data: authState } = useQuery(authQueryOptions());
+  const isLoggedIn = authState?.isLoggedIn ?? false;
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-[color:var(--mk-border)] border-b bg-[rgba(4,8,15,0.78)] backdrop-blur-[14px] backdrop-saturate-[140%]">
+      <div className="flex w-full items-center justify-between gap-3 px-5 py-[14px] md:px-8 md:py-4">
+        <Link
+          to="/home"
+          className="inline-flex items-center"
+          aria-label="Agicash"
+          onClick={() =>
+            document
+              .querySelector('.marketing')
+              ?.scrollTo({ top: 0, behavior: 'smooth' })
+          }
+        >
+          <img
+            src={logoUrl}
+            alt="Agicash"
+            className="block h-[22px] w-auto opacity-90 md:h-[26px]"
+          />
+        </Link>
+
+        <nav className="flex items-center gap-2">
+          {isLoggedIn ? (
+            <Link to="/" className={`${navBtnBase} ${signupBtn}`}>
+              Go to Wallet
+            </Link>
+          ) : (
+            <>
+              <Link to="/login" className={`${navBtnBase} ${loginBtn}`}>
+                Log in
+              </Link>
+              <Link to="/signup" className={`${navBtnBase} ${signupBtn}`}>
+                Sign up
+              </Link>
+            </>
+          )}
+        </nav>
+      </div>
+    </header>
+  );
+}

app/features/homepage/components/section-label.tsx

@@ -0,0 +1,30 @@
+import { cn } from '~/lib/utils';
+
+type SectionLabelProps = {
+  children: string;
+  className?: string;
+  href?: string;
+};
+
+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]',
+    className,
+  );
+  const content = (
+    <>
+      <span aria-hidden="true">{'> '}</span>
+      {children}
+    </>
+  );
+
+  if (href) {
+    return (
+      <a href={href} className={cn('block w-fit', labelClasses)}>
+        {content}
+      </a>
+    );
+  }
+
+  return <div className={labelClasses}>{content}</div>;
+}

app/features/homepage/components/section.tsx

@@ -0,0 +1,30 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { cn } from '~/lib/utils';
+
+type SectionProps = HTMLAttributes<HTMLElement> & {
+  id?: string;
+  children: ReactNode;
+  hairline?: boolean;
+};
+
+export function Section({
+  id,
+  children,
+  hairline = true,
+  className,
+  ...props
+}: SectionProps) {
+  return (
+    <section
+      id={id}
+      className={cn(
+        'relative w-full px-5 py-20 md:px-8 md:py-32',
+        hairline && 'border-[color:var(--mk-border)] border-t',
+        className,
+      )}
+      {...props}
+    >
+      <div className="mx-auto w-full max-w-6xl">{children}</div>
+    </section>
+  );
+}

app/features/homepage/marketing-page.tsx

@@ -0,0 +1,28 @@
+import { MarketingNav } from './components/marketing-nav';
+import { BuySection } from './sections/buy-section';
+import { CtaSection } from './sections/cta-section';
+import { FooterSection } from './sections/footer-section';
+import { HeroSection } from './sections/hero-section';
+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';
+
+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)]">
+      <MarketingNav />
+      <main>
+        <HeroSection />
+        <BuySection />
+        <SendSection />
+        <SpendSection />
+        <WalletSection />
+        <CtaSection />
+        <MerchantsSection />
+      </main>
+      <FooterSection />
+    </div>
+  );
+}