diff --git a/app/assets/btcpay-logo.svg b/app/assets/btcpay-logo.svg
new file mode 100644
index 000000000..5d8592b71
--- /dev/null
+++ b/app/assets/btcpay-logo.svg
@@ -0,0 +1 @@
+<svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 236.18 102.3"><defs><style>.cls-1{fill:#cedc21;}.cls-2{fill:#51b13e;}.cls-3{fill:#1e7a44;}.cls-4{fill:#fff;}</style></defs><title>btcpay3</title><path class="cls-1" d="M38.55,201.73a6,6,0,0,1-6-6V105.44a6,6,0,0,1,12,0v90.29A6,6,0,0,1,38.55,201.73Z" transform="translate(-32.55 -99.43)"/><path class="cls-2" d="M38.56,201.73A6,6,0,0,1,36,190.31l36.18-17.17L35,145.76a6,6,0,1,1,7.11-9.66l45.24,33.33a6,6,0,0,1-1,10.25L41.13,201.15A5.9,5.9,0,0,1,38.56,201.73Z" transform="translate(-32.55 -99.43)"/><path class="cls-1" d="M38.56,166.24A6,6,0,0,1,35,155.41L72.16,128,36,110.86A6,6,0,1,1,41.13,100l45.24,21.47a6,6,0,0,1,1,10.25L42.11,165.07A6,6,0,0,1,38.56,166.24Z" transform="translate(-32.55 -99.43)"/><polygon class="cls-3" points="12 38.46 12 63.84 29.21 51.16 12 38.46"/><rect class="cls-4" y="27.82" width="12" height="29.25"/><path class="cls-1" d="M44.55,105.44a6,6,0,0,0-12,0V181h12Z" transform="translate(-32.55 -99.43)"/><path class="cls-4" d="M123.92,149.86c3.84,1.09,6,4.57,6,8.93,0,6.81-4.15,10-9.82,10H107.14V132.4h11.43c5.56,0,9.87,2.65,9.87,9.56C128.44,145.44,127,148.66,123.92,149.86Zm-5.3-.89c4.1,0,7.43-1.45,7.43-7.06s-3.43-7.17-7.59-7.17h-8.88V149Zm1.3,17.41c4.15,0,7.48-2.18,7.48-7.59,0-5.82-3.79-7.58-8.52-7.58h-9.3v15.17Z" transform="translate(-32.55 -99.43)"/><path class="cls-4" d="M154.21,132.4v2.23h-10v34.14h-2.44V134.63h-10V132.4Z" transform="translate(-32.55 -99.43)"/><path class="cls-4" d="M171.3,131.88c6.19,0,11.8,3.12,13.57,10.55h-2.34c-1.66-6.08-6.55-8.32-11.28-8.32-8.57,0-13.09,7-13.09,16.47,0,10,4.52,16.37,13.14,16.37,5.1,0,9.67-2.29,11.44-9h2.33a13.6,13.6,0,0,1-13.77,11.33c-9.71,0-15.53-7.17-15.53-18.71C155.77,139.52,161.9,131.88,171.3,131.88Z" transform="translate(-32.55 -99.43)"/><path class="cls-4" d="M203.36,132.4c6.29,0,10.86,4.1,10.86,12,0,7.48-4.57,12-10.86,12H193.8v12.32h-2.39V132.4Zm0,21.66c4.63,0,8.42-3,8.42-9.66s-3.64-9.71-8.42-9.71H193.8v19.37Z" transform="translate(-32.55 -99.43)"/><path class="cls-4" d="M214.64,168.77v-.31l14.49-36.16h1.1l14.34,36.16v.31H242l-4.1-10.5H221.34l-4.1,10.5Zm15-32.16L222.17,156h14.91Z" transform="translate(-32.55 -99.43)"/><path class="cls-4" d="M266.13,132.4h2.6v.36L257.4,153.65v15.12h-2.49V153.65l-11.38-20.94v-.31h2.65l4.93,9.25,5,9.61h0l5-9.61Z" transform="translate(-32.55 -99.43)"/></svg>
\ No newline at end of file
diff --git a/app/assets/shopify-logo.svg b/app/assets/shopify-logo.svg
new file mode 100755
index 000000000..551074c35
--- /dev/null
+++ b/app/assets/shopify-logo.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 142.8" style="enable-background:new 0 0 500 142.8;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#95BF47;}
+	.st1{fill:#5E8E3E;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M107.4,27.1c-0.1-0.7-0.7-1.1-1.2-1.1c-0.5,0-10.4-0.2-10.4-0.2s-8.3-8-9.1-8.9c-0.8-0.8-2.4-0.6-3-0.4
+			c0,0-1.6,0.5-4.2,1.3c-0.4-1.4-1.1-3.1-2-4.9c-2.9-5.6-7.3-8.6-12.5-8.6c0,0,0,0,0,0c-0.4,0-0.7,0-1.1,0.1
+			c-0.2-0.2-0.3-0.4-0.5-0.5c-2.3-2.4-5.2-3.6-8.7-3.5c-6.7,0.2-13.4,5.1-18.9,13.7c-3.8,6.1-6.7,13.7-7.6,19.6
+			c-7.7,2.4-13.1,4.1-13.3,4.1c-3.9,1.2-4,1.3-4.5,5C10.2,45.6,0,124.5,0,124.5l85.6,14.8l37.1-9.2
+			C122.6,130.1,107.5,27.8,107.4,27.1z M75.2,19.2c-2,0.6-4.2,1.3-6.6,2.1c0-3.4-0.5-8.2-2-12.2C71.7,9.9,74.2,15.7,75.2,19.2z
+			 M64.1,22.6c-4.5,1.4-9.4,2.9-14.3,4.4c1.4-5.3,4-10.5,7.2-14c1.2-1.3,2.9-2.7,4.8-3.5C63.8,13.4,64.2,18.9,64.1,22.6z M54.9,4.9
+			c1.6,0,2.9,0.3,4,1.1c-1.8,0.9-3.6,2.3-5.2,4.1c-4.3,4.6-7.6,11.7-8.9,18.6c-4.1,1.3-8.1,2.5-11.7,3.6
+			C35.5,21.4,44.6,5.2,54.9,4.9z"/>
+		<g>
+			<path class="st1" d="M106.2,26c-0.5,0-10.4-0.2-10.4-0.2s-8.3-8-9.1-8.9c-0.3-0.3-0.7-0.5-1.1-0.5l0,122.9l37.1-9.2
+				c0,0-15.1-102.3-15.2-103C107.3,26.4,106.7,26,106.2,26z"/>
+			<path class="st2" d="M65,45.1l-4.3,16.1c0,0-4.8-2.2-10.5-1.8c-8.4,0.5-8.4,5.8-8.4,7.1c0.5,7.2,19.4,8.8,20.5,25.7
+				c0.8,13.3-7,22.4-18.4,23.1C30.3,116,22.8,108,22.8,108l2.9-12.3c0,0,7.6,5.7,13.6,5.3c3.9-0.2,5.4-3.5,5.2-5.7
+				c-0.6-9.4-16-8.8-17-24.3C26.7,58,35.2,44.9,54,43.7C61.3,43.2,65,45.1,65,45.1z"/>
+		</g>
+	</g>
+	<g>
+		<path id="s_4_" class="st2" d="M172.9,79.4c-4.3-2.3-6.5-4.3-6.5-7c0-3.4,3.1-5.6,7.9-5.6c5.6,0,10.6,2.3,10.6,2.3l3.9-12
+			c0,0-3.6-2.8-14.2-2.8c-14.8,0-25.1,8.5-25.1,20.4c0,6.8,4.8,11.9,11.2,15.6c5.2,2.9,7,5,7,8.1c0,3.2-2.6,5.8-7.4,5.8
+			c-7.1,0-13.9-3.7-13.9-3.7l-4.2,12c0,0,6.2,4.2,16.7,4.2c15.2,0,26.2-7.5,26.2-21C185,88.4,179.5,83.2,172.9,79.4z"/>
+		<path id="h_4_" class="st2" d="M233.5,54.1c-7.5,0-13.4,3.6-17.9,9l-0.2-0.1l6.5-34h-16.9l-16.5,86.6h16.9l5.6-29.6
+			c2.2-11.2,8-18.1,13.4-18.1c3.8,0,5.3,2.6,5.3,6.3c0,2.3-0.2,5.2-0.7,7.5l-6.4,33.9h16.9l6.6-35c0.7-3.7,1.2-8.1,1.2-11.1
+			C247.4,59.9,242.4,54.1,233.5,54.1z"/>
+		<path id="o_4_" class="st2" d="M285.7,54.1c-20.4,0-33.9,18.4-33.9,38.9c0,13.1,8.1,23.7,23.3,23.7c20,0,33.5-17.9,33.5-38.9
+			C308.7,65.7,301.6,54.1,285.7,54.1z M277.4,103.8c-5.8,0-8.2-4.9-8.2-11.1c0-9.7,5-25.5,14.2-25.5c6,0,8,5.2,8,10.2
+			C291.4,87.8,286.3,103.8,277.4,103.8z"/>
+		<path id="p_4_" class="st2" d="M352,54.1c-11.4,0-17.9,10.1-17.9,10.1h-0.2l1-9.1h-15c-0.7,6.1-2.1,15.5-3.4,22.5l-11.8,62h16.9
+			l4.7-25.1h0.4c0,0,3.5,2.2,9.9,2.2c19.9,0,32.9-20.4,32.9-41C369.5,64.3,364.4,54.1,352,54.1z M335.8,104c-4.4,0-7-2.5-7-2.5
+			l2.8-15.8c2-10.6,7.5-17.6,13.4-17.6c5.2,0,6.8,4.8,6.8,9.3C351.8,88.4,345.3,104,335.8,104z"/>
+		<path id="dot_4_" class="st2" d="M393.7,29.8c-5.4,0-9.7,4.3-9.7,9.8c0,5,3.2,8.5,8,8.5h0.2c5.3,0,9.8-3.6,9.9-9.8
+			C402.1,33.4,398.8,29.8,393.7,29.8z"/>
+		<polygon id="i_4_" class="st2" points="370,115.5 386.9,115.5 398.4,55.5 381.4,55.5 		"/>
+		<path id="f_4_" class="st2" d="M441.5,55.4h-11.8l0.6-2.8c1-5.8,4.4-10.9,10.1-10.9c3,0,5.4,0.9,5.4,0.9l3.3-13.3
+			c0,0-2.9-1.5-9.2-1.5c-6,0-12,1.7-16.6,5.6c-5.8,4.9-8.5,12-9.8,19.2l-0.5,2.8h-7.9l-2.5,12.8h7.9l-9,47.4h16.9l9-47.4h11.7
+			L441.5,55.4z"/>
+		<path id="y_4_" class="st2" d="M482.3,55.5c0,0-10.6,26.7-15.3,41.3h-0.2c-0.3-4.7-4.2-41.3-4.2-41.3h-17.8l10.2,55.1
+			c0.2,1.2,0.1,2-0.4,2.8c-2,3.8-5.3,7.5-9.2,10.2c-3.2,2.3-6.8,3.8-9.6,4.8l4.7,14.4c3.4-0.7,10.6-3.6,16.6-9.2
+			c7.7-7.2,14.9-18.4,22.2-33.6L500,55.5H482.3z"/>
+	</g>
+</g>
+</svg>
diff --git a/app/assets/square-logo.svg b/app/assets/square-logo.svg
new file mode 100644
index 000000000..50468c551
--- /dev/null
+++ b/app/assets/square-logo.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1999.98 501.42">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M501.42,83.79v333.84c0,46.27-37.5,83.79-83.79,83.79H83.79c-46.28,0-83.79-37.5-83.79-83.79V83.79C0,37.51,37.52,0,83.79,0h333.84c46.29,0,83.79,37.5,83.79,83.79h0ZM410.22,117.64c0-14.61-11.85-26.45-26.45-26.45H117.62c-14.61,0-26.45,11.84-26.45,26.45v266.19c0,14.61,11.84,26.45,26.45,26.45h266.17c14.61,0,26.45-11.85,26.45-26.45V117.64h-.02ZM182.31,197.59c0-8.43,6.79-15.26,15.17-15.26h106.4c8.39,0,15.17,6.84,15.17,15.26v106.24c0,8.43-6.75,15.26-15.17,15.26h-106.4c-8.39,0-15.17-6.84-15.17-15.26v-106.24ZM778.93,221.94l-3.85-.86c-41.04-9.31-65.81-14.93-65.81-42,0-24.2,23.02-41.11,55.98-41.11,30.52,0,53.74,12.76,73.08,40.16,1.11,1.57,2.84,2.61,4.74,2.84,1.89.23,3.79-.35,5.23-1.59l32.16-27.71c2.68-2.31,3.15-6.22,1.1-9.09-24.19-33.89-67.01-54.12-114.56-54.12-31.56,0-60.34,9.26-81.04,26.08-21.73,17.65-33.21,41.93-33.21,70.23,0,63.76,54.74,76.94,98.71,87.53,4.45,1.08,8.77,2.1,12.95,3.08,39.74,9.36,66,15.54,66,43.74s-24.04,45.48-61.24,45.48c-33.71,0-64.35-17.1-86.28-48.14-1.1-1.55-2.8-2.59-4.68-2.84s-3.73.28-5.2,1.49l-33.86,27.99c-2.72,2.25-3.28,6.14-1.3,9.05,25.63,37.64,76.48,61.97,129.56,61.97,32.56,0,62.52-9.57,84.36-26.95,23.27-18.51,35.57-44.01,35.57-73.73,0-67.27-57.62-80.13-108.45-91.48l.04-.02ZM1126.33,177.73h-40.76c-3.74,0-6.78,3.04-6.78,6.78v19.06c-12.6-14.21-33.77-30.22-65.18-30.22s-56.88,12.32-75.37,35.62c-17.16,21.63-26.62,51.73-26.62,84.75s9.45,63.12,26.62,84.75c18.49,23.31,44.56,35.62,75.37,35.62,26.63,0,49.1-9.45,65.18-27.37v107.92c0,3.74,3.04,6.78,6.78,6.78h40.76c3.74,0,6.78-3.04,6.78-6.78V184.51c0-3.74-3.04-6.78-6.78-6.78ZM1080.1,287.16v13.57c0,39.86-21.97,65.61-55.98,65.61-36.15,0-57.74-27.15-57.74-72.61s21.58-72.61,57.74-72.61c34.01,0,55.98,25.93,55.98,66.05h0ZM1360.59,177.73h-40.76c-3.74,0-6.78,3.04-6.78,6.78v130.66c0,32.45-23.32,49.42-46.36,49.42-26.03,0-39.79-15.58-39.79-45.04v-135.03c0-3.74-3.04-6.78-6.78-6.78h-40.76c-3.74,0-6.78,3.04-6.78,6.78v146.41c0,50.53,30.93,83.17,78.8,83.17,23.76,0,43.95-9.67,61.67-29.56v17.96c0,3.74,3.04,6.78,6.78,6.78h40.76c3.74,0,6.78-3.04,6.78-6.78v-217.99c0-3.74-3.04-6.78-6.78-6.78h0ZM1607.92,367.06c-8.79-.24-12.72-4.78-12.72-14.7v-98.9c0-51.66-31.71-80.11-89.3-80.11-44.71,0-80.07,23.24-94.59,62.18-.66,1.78-.52,3.78.39,5.47.93,1.73,2.57,2.98,4.48,3.42l37.83,8.71c3.37.77,6.78-1.14,7.94-4.45,6.74-19.11,20.01-28.01,41.76-28.01,25.53,0,38.48,11.62,38.48,34.54v3.2l-62.73,12.98c-53.04,11.03-77.74,34.25-77.74,73.09s32.22,68.73,78.36,68.73c28.25,0,51.2-8.69,66.46-25.16,9.13,17.73,33.93,26.29,62.3,21.35,3.24-.57,5.6-3.38,5.6-6.69v-28.9c0-3.63-2.93-6.67-6.52-6.77v.02ZM1542.2,300.53v26.89c0,27.56-27.28,41.98-54.24,41.98-20.26,0-32.35-10.13-32.35-27.1,0-19.37,14.63-26.41,38.23-31.5l48.36-10.27ZM1774.34,177.32c-3.17-.52-6.47-.77-10.09-.77-27.5,0-50.92,12.35-62.11,32.47v-24.51c0-3.74-3.04-6.78-6.78-6.78h-40.76c-3.74,0-6.78,3.04-6.78,6.78v217.99c0,3.74,3.04,6.78,6.78,6.78h40.76c3.74,0,6.78-3.04,6.78-6.78v-114.9c0-34.27,23.2-57.3,57.74-57.3,4.7,0,8.63.17,12.74.56,1.89.18,3.79-.45,5.2-1.73s2.22-3.11,2.22-5.02v-40.09c0-3.34-2.39-6.16-5.69-6.7h-.01ZM1973.74,206.72c-18.32-21.83-44.82-33.36-76.62-33.36s-59.09,12.34-79.33,34.76c-19.98,22.12-30.98,52.52-30.98,85.61,0,70.87,46.26,120.37,112.49,120.37,43.9,0,79.17-21.53,96.77-59.08.8-1.7.85-3.61.14-5.37-.71-1.76-2.14-3.15-3.91-3.82l-33.69-12.76c-3.39-1.28-7.27.37-8.63,3.68-8.08,19.63-26.56,30.9-50.68,30.9-33.08,0-56.1-23.59-60.26-61.64h154.16c3.74,0,6.78-3.04,6.78-6.78v-11.63c0-31.99-9.32-60.72-26.25-80.88h.01ZM1945.21,264.82h-103.37c7.73-28.91,27.66-45.45,54.84-45.45,34.72,0,47.8,23.3,48.52,45.45h.01Z"/>
+</svg>
\ No newline at end of file
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
index a893ab879..96c4eb50f 100644
--- a/app/entry.server.tsx
+++ b/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();
diff --git a/app/features/homepage/components/join-beta-button.tsx b/app/features/homepage/components/join-beta-button.tsx
new file mode 100644
index 000000000..bd5da348d
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/features/homepage/components/marketing-card.tsx b/app/features/homepage/components/marketing-card.tsx
new file mode 100644
index 000000000..773086296
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/features/homepage/components/marketing-nav.tsx b/app/features/homepage/components/marketing-nav.tsx
new file mode 100644
index 000000000..a691aa8d1
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/features/homepage/components/section-label.tsx b/app/features/homepage/components/section-label.tsx
new file mode 100644
index 000000000..70ec1d7ee
--- /dev/null
+++ b/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>;
+}
diff --git a/app/features/homepage/components/section.tsx b/app/features/homepage/components/section.tsx
new file mode 100644
index 000000000..a842ce747
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/features/homepage/marketing-page.tsx b/app/features/homepage/marketing-page.tsx
new file mode 100644
index 000000000..95fabdbdb
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/features/homepage/sections/buy-section.tsx b/app/features/homepage/sections/buy-section.tsx
new file mode 100644
index 000000000..2760bd8dd
--- /dev/null
+++ b/app/features/homepage/sections/buy-section.tsx
@@ -0,0 +1,327 @@
+import { useEffect, useRef, useState } from 'react';
+import { Section } from '../components/section';
+import { SectionLabel } from '../components/section-label';
+
+type State = 'idle' | 'loading' | 'review' | 'paid' | 'received';
+
+const HEADERS: Record<State, { brand: string; right: string }> = {
+  idle: { brand: 'agicash', right: 'pink owl' },
+  loading: { brand: 'cash app', right: 'pay $7.98' },
+  review: { brand: 'cash app', right: 'pay $7.98' },
+  paid: { brand: 'cash app', right: 'complete' },
+  received: { brand: 'agicash', right: 'received' },
+};
+
+const isCashApp = (s: State) =>
+  s === 'loading' || s === 'review' || s === 'paid';
+
+const NEXT: Record<State, State> = {
+  idle: 'loading',
+  loading: 'review', // auto-advances after a brief delay
+  review: 'paid',
+  paid: 'received',
+  received: 'idle',
+};
+
+const buyStageBase =
+  'buy-stage relative mx-auto flex w-full max-w-[320px] min-h-[380px] flex-col overflow-hidden rounded-[18px] border border-[color:var(--mk-border)] bg-[linear-gradient(180deg,#070d18_0%,#050a13_100%)] px-[22px] pt-[22px] pb-[18px] [font-family:var(--mk-font-display)] shadow-[0_30px_80px_-30px_rgba(0,0,0,0.8),inset_0_1px_0_rgba(255,255,255,0.04)]';
+
+const buyHead =
+  'mb-[18px] flex items-center justify-between border-[color:var(--mk-border)] border-b pb-[14px] [font-family:var(--mk-font-mono)] text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em]';
+
+const buyRows =
+  'mt-auto flex flex-col gap-2.5 rounded-xl border border-[color:var(--mk-border)] px-4 py-[14px] [font-family:var(--mk-font-mono)]';
+const buyRow = 'flex items-center justify-between text-[11px]';
+const buyRowLabel =
+  'text-[color:var(--mk-text-muted)] uppercase tracking-[0.06em]';
+const buyRowValue = 'text-[color:var(--mk-text)]';
+
+const buyPayButtonBase =
+  'inline-flex w-full cursor-pointer items-center justify-center rounded-[10px] border border-[color:var(--mk-border)] bg-[rgba(255,255,255,0.04)] px-7 py-3 [font-family:var(--mk-font-mono)] font-medium text-[13px] text-[color:var(--mk-text)] transition-[background-color,border-color] duration-200 hover:border-[color:var(--mk-border-bright)] hover:bg-[rgba(255,255,255,0.08)]';
+const buyPayButtonPrimary =
+  'inline-flex w-full cursor-pointer items-center justify-center rounded-full border border-white bg-white px-7 py-3 [font-family:var(--mk-font-display)] font-medium text-[13px] text-black transition-[background-color] duration-200 hover:bg-[rgba(255,255,255,0.92)]';
+
+export function BuySection() {
+  const prevStateRef = useRef<State>('idle');
+  const [state, setState] = useState<State>('idle');
+
+  // Determine transition kind based on whether we're crossing brands.
+  // Slide between Agicash ↔ Cash App; fade within Cash App's own steps.
+  const isSlide = isCashApp(prevStateRef.current) !== isCashApp(state);
+  const transitionClass = isSlide
+    ? 'animate-state-slide'
+    : 'animate-state-fade';
+
+  useEffect(() => {
+    prevStateRef.current = state;
+  }, [state]);
+
+  // Loading auto-advances quickly (no button); all other states wait for a
+  // click but fall back to advancing automatically after 6s of inactivity.
+  useEffect(() => {
+    const delay = state === 'loading' ? 1500 : 6000;
+    const t = window.setTimeout(() => {
+      setState(NEXT[state]);
+    }, delay);
+    return () => window.clearTimeout(t);
+  }, [state]);
+
+  const handleAdvance = () => {
+    setState(NEXT[state]);
+  };
+
+  const header = HEADERS[state];
+
+  return (
+    <Section id="buy">
+      <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">
+            <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]">
+            lightning · cash app · settled instantly
+          </div>
+        </div>
+
+        <div className="flex justify-center">
+          <div className={`${buyStageBase} ${state}`}>
+            <div className={buyHead}>
+              <span>{header.brand}</span>
+              <span className="text-[color:var(--mk-text)]">
+                {header.right}
+              </span>
+            </div>
+            <div
+              className={`flex flex-1 flex-col ${transitionClass}`}
+              key={state}
+            >
+              <div className="flex flex-1 flex-col">
+                {state === 'idle' && <PayBody />}
+                {state === 'loading' && <LoadingBody />}
+                {state === 'review' && <ReviewBody />}
+                {state === 'paid' && <PaidBody />}
+                {state === 'received' && <ReceivedBody />}
+              </div>
+              {state !== 'loading' && (
+                <div className="mt-4 flex justify-center">
+                  {renderCta(state, handleAdvance)}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Section>
+  );
+}
+
+function renderCta(state: State, onClick: () => void) {
+  const button = (label: string, primary = false) => (
+    <button
+      type="button"
+      className={primary ? buyPayButtonPrimary : buyPayButtonBase}
+      onClick={onClick}
+    >
+      {label}
+    </button>
+  );
+  switch (state) {
+    case 'idle':
+      return button('Pay');
+    case 'review':
+      return button('Confirm and pay', true);
+    case 'paid':
+      return button('Done', true);
+    case 'received':
+      return button('OK');
+    default:
+      return null;
+  }
+}
+
+function PayBody() {
+  return (
+    <>
+      <div className="mt-1.5 mb-[18px] flex flex-col items-center gap-1 text-center">
+        <span className="font-bold text-[38px] text-[color:var(--mk-text)] tabular-nums leading-none tracking-[0.01em] [font-family:var(--mk-font-numeric)]">
+          <span className="mr-[0.06em] inline-block align-[0.02em] font-bold text-[0.86em] [font-family:var(--mk-font-mono)]">
+            ₿
+          </span>
+          10,000
+        </span>
+        <span className="font-semibold text-[18px] text-[color:var(--mk-text-muted)] tabular-nums leading-none [font-family:var(--mk-font-numeric)]">
+          $7.98
+        </span>
+      </div>
+      <div className={buyRows}>
+        <div className={buyRow}>
+          <span className={buyRowLabel}>From</span>
+          <span className={buyRowValue}>Cash App</span>
+        </div>
+        <div className={buyRow}>
+          <span className={buyRowLabel}>To</span>
+          <span className={buyRowValue}>Pink Owl Coffee</span>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function LoadingBody() {
+  return (
+    <div className="flex flex-1 items-center justify-center">
+      <span
+        aria-hidden="true"
+        className="cashapp-spinner h-9 w-9 animate-cashapp-spin rounded-full border-[3px] border-[rgba(255,255,255,0.85)] border-r-transparent border-b-transparent border-dashed"
+      />
+    </div>
+  );
+}
+
+function ReviewBody() {
+  return (
+    <div className="flex flex-col items-start">
+      <div
+        aria-hidden="true"
+        className="mb-2.5 grid h-[38px] w-[38px] place-items-center rounded-full bg-[#00d54f] font-extrabold text-[22px] text-black [font-family:var(--mk-font-display)]"
+      >
+        $
+      </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)]">
+        Pay $7.98
+      </div>
+      <div className="mt-0.5 flex w-full flex-col gap-2 text-[11px] [font-family:var(--mk-font-mono)]">
+        <div className="flex items-baseline justify-between gap-3">
+          <span className="text-[color:var(--mk-text-muted)] uppercase tracking-[0.06em]">
+            Funding source
+          </span>
+          <span className="max-w-[58%] truncate text-right text-[color:var(--mk-text)] tabular-nums">
+            Debit 9687
+          </span>
+        </div>
+        <div className="flex items-baseline justify-between gap-3">
+          <span className="text-[color:var(--mk-text-muted)] uppercase tracking-[0.06em]">
+            To
+          </span>
+          <span className="max-w-[58%] truncate text-right text-[color:var(--mk-text)] tabular-nums">
+            lnbc100u…q97c
+          </span>
+        </div>
+        <div className="flex items-baseline justify-between gap-3">
+          <span className="text-[color:var(--mk-text-muted)] uppercase tracking-[0.06em]">
+            Fees
+          </span>
+          <span className="max-w-[58%] truncate text-right text-[color:var(--mk-text)] tabular-nums">
+            Free
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function PaidBody() {
+  return (
+    <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"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          width="28"
+          height="28"
+          aria-hidden="true"
+          className="block h-6 w-6"
+        >
+          <path
+            d="M5 12.5l4.5 4.5L19 8"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="3"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </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)]">
+        You paid $7.98
+      </div>
+    </div>
+  );
+}
+
+function ReceivedBody() {
+  return (
+    <>
+      <div className="mt-1.5 mb-[18px] flex flex-col items-center gap-1 text-center">
+        <span className="font-bold text-[38px] text-[color:var(--mk-text)] tabular-nums leading-none tracking-[0.01em] [font-family:var(--mk-font-numeric)]">
+          <span className="mr-[0.06em] inline-block align-[0.02em] font-bold text-[0.86em] [font-family:var(--mk-font-mono)]">
+            ₿
+          </span>
+          10,000
+        </span>
+        <span className="font-semibold text-[18px] text-[color:var(--mk-text-muted)] tabular-nums leading-none [font-family:var(--mk-font-numeric)]">
+          $7.98
+        </span>
+      </div>
+      <div className="mt-auto flex flex-col gap-2.5 rounded-xl border border-[color:var(--mk-border)] px-4 py-[14px] [font-family:var(--mk-font-mono)]">
+        <div className="mb-0.5 text-[13px] text-[color:var(--mk-text)]">
+          Details
+        </div>
+        <div className="mb-1 text-[11px] text-[color:var(--mk-text-muted)]">
+          Today at 4:48 PM
+        </div>
+        <div className="flex items-center gap-2.5 text-[12px] text-[color:var(--mk-text)]">
+          <span
+            aria-hidden="true"
+            className="inline-flex h-4 w-4 flex-shrink-0 items-center justify-center text-[#34c759]"
+          >
+            <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
+              <path
+                d="M5 12.5l4.5 4.5L19 8"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="3"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </span>
+          <span>Bought</span>
+        </div>
+        <div className="flex items-center gap-2.5 text-[12px] text-[color:var(--mk-text)]">
+          <span
+            aria-hidden="true"
+            className="inline-flex h-4 w-4 flex-shrink-0 items-center justify-center text-[color:var(--mk-text-muted)]"
+          >
+            <svg
+              viewBox="0 0 24 24"
+              width="14"
+              height="14"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <rect x="3" y="8" width="18" height="4" rx="0.5" />
+              <path d="M12 8v13" />
+              <path d="M19 12v9H5v-9" />
+              <path d="M7.5 8a2.5 2.5 0 0 1 0-5C11 3 12 8 12 8" />
+              <path d="M16.5 8a2.5 2.5 0 0 0 0-5C13 3 12 8 12 8" />
+            </svg>
+          </span>
+          <span>Pink Owl Coffee</span>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/app/features/homepage/sections/cta-section.tsx b/app/features/homepage/sections/cta-section.tsx
new file mode 100644
index 000000000..ea01955b9
--- /dev/null
+++ b/app/features/homepage/sections/cta-section.tsx
@@ -0,0 +1,30 @@
+import { JoinBetaButton } from '../components/join-beta-button';
+import { MarketingCard } from '../components/marketing-card';
+import { SectionLabel } from '../components/section-label';
+
+export function CtaSection() {
+  return (
+    <section
+      id="join"
+      className="relative w-full border-[color:var(--mk-border)] border-t px-5 py-20 md:px-8 md:py-28"
+    >
+      <div className="mx-auto max-w-xl">
+        <MarketingCard className="text-center">
+          <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">
+            <a href="#join">Be early.</a>
+          </h2>
+          <p className="mt-4 text-[color:var(--mk-text-dim)] text-base leading-relaxed">
+            Agicash is in public beta. Join now to experience the best in
+            bitcoin.
+          </p>
+          <div className="mt-7 flex justify-center">
+            <JoinBetaButton size="lg" />
+          </div>
+        </MarketingCard>
+      </div>
+    </section>
+  );
+}
diff --git a/app/features/homepage/sections/footer-section.tsx b/app/features/homepage/sections/footer-section.tsx
new file mode 100644
index 000000000..c263e2ddd
--- /dev/null
+++ b/app/features/homepage/sections/footer-section.tsx
@@ -0,0 +1,70 @@
+import { Link } from 'react-router';
+import discordLogo from '~/assets/discord_logo.svg';
+import githubLogo from '~/assets/github.svg';
+import nostrLogo from '~/assets/nostr_logo.svg';
+import xLogo from '~/assets/x_logo.svg';
+
+const SOCIALS = [
+  {
+    label: 'Discord',
+    href: 'https://discord.gg/e2TSCfXxhd',
+    src: discordLogo,
+  },
+  { label: 'X', href: 'https://x.com/agi_cash', src: xLogo },
+  {
+    label: 'Nostr',
+    href: 'https://njump.me/nprofile1qqsw3u8v7rz83txuy8nc0eth6rsqh4z935fs3t6ugwc7364gpzy5psce64r7c',
+    src: nostrLogo,
+  },
+  {
+    label: 'GitHub',
+    href: 'https://github.com/MakePrisms/agicash',
+    src: githubLogo,
+  },
+];
+
+const footerMetaLink =
+  'text-[color:var(--mk-text-muted)] transition-colors duration-200 hover:text-[color:var(--mk-text-dim)]';
+
+export function FooterSection() {
+  return (
+    <footer className="mt-6 w-full overflow-hidden border-[color:var(--mk-border)] border-t pt-12">
+      <div className="mx-auto mb-[60px] max-w-[1100px] px-5 text-center md:mb-20 md:px-8">
+        <div className="mb-7 flex items-center justify-center gap-[14px]">
+          {SOCIALS.map((s) => (
+            <a
+              key={s.label}
+              href={s.href}
+              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)]"
+            >
+              <img
+                src={s.src}
+                alt=""
+                className="footer-social-img block h-4 w-4"
+              />
+            </a>
+          ))}
+        </div>
+
+        <div className="text-[11px] text-[color:var(--mk-text-muted)] uppercase leading-[1.7] tracking-[0.08em] [font-family:var(--mk-font-mono)]">
+          <Link to="/terms" className={footerMetaLink}>
+            Terms of Service
+          </Link>
+          <span aria-hidden="true"> · </span>
+          <Link to="/privacy" className={footerMetaLink}>
+            Privacy Notice
+          </Link>
+          <span aria-hidden="true"> · </span>
+          <span>© 2026 MakePrisms, Inc. All rights reserved.</span>
+        </div>
+      </div>
+
+      <div className="m-0 block select-none whitespace-nowrap p-0 text-center font-bold text-[24vw] text-[color:var(--mk-brand)] uppercase leading-[0.86] tracking-[-0.04em] [font-family:var(--mk-font-mono)]">
+        AGICASH
+      </div>
+    </footer>
+  );
+}
diff --git a/app/features/homepage/sections/hero-section.tsx b/app/features/homepage/sections/hero-section.tsx
new file mode 100644
index 000000000..993f0f2a7
--- /dev/null
+++ b/app/features/homepage/sections/hero-section.tsx
@@ -0,0 +1,384 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import forkAndCoin from '~/assets/gift-cards/forkandcoin.agi.cash.webp';
+import kissOfMatcha from '~/assets/gift-cards/kissofmatcha.agi.cash.webp';
+import mariposa from '~/assets/gift-cards/mariposa.agi.cash.webp';
+import pinkOwl from '~/assets/gift-cards/pinkowl.agi.cash.webp';
+import pubkey from '~/assets/gift-cards/pubkey.agi.cash.webp';
+import epicurean from '~/assets/gift-cards/theepicureantrader.agi.cash.webp';
+import { JoinBetaButton } from '../components/join-beta-button';
+
+const cards = [
+  {
+    src: pubkey,
+    label: 'PUBKEY DC',
+    location: 'WASHINGTON, D.C.',
+    url: 'https://www.pubkey.bar/dc/home',
+  },
+  {
+    src: epicurean,
+    label: 'EPICUREAN TRADER',
+    location: 'CALIFORNIA',
+    url: 'https://theepicureantrader.com',
+  },
+  {
+    src: pinkOwl,
+    label: 'PINK OWL COFFEE',
+    location: 'CALIFORNIA',
+    url: 'https://pinkowlcoffee.com/',
+  },
+  {
+    src: mariposa,
+    label: 'MARIPOSA BAKING CO.',
+    location: 'CALIFORNIA',
+    url: 'https://www.mariposabaking.com/',
+  },
+  {
+    src: kissOfMatcha,
+    label: 'KISS OF MATCHA',
+    location: 'CALIFORNIA',
+    url: 'https://www.kissofmatcha.com/',
+  },
+  {
+    src: forkAndCoin,
+    label: 'FORK & COIN',
+    location: 'ILLINOIS',
+    url: 'https://www.forkandcoin.com/',
+  },
+];
+
+function pad3(n: number) {
+  return String(n + 1).padStart(3, '0');
+}
+
+const FADE_DURATION = 720;
+
+// Pixel-dissolve via SVG-native masking: both incoming and outgoing cards
+// render as <image> inside a single <svg> so they share an identical paint
+// pipeline (eliminates the desktop DPR=1 sub-pixel AA shift HTML <img>+SVG
+// had). The outgoing <image> carries mask="url(#…)" referencing an inline
+// SVG <mask> of 24 white rects whose opacity steps 1 → 0 with a randomized
+// delay across PIXEL_STAGGER_WINDOW. Done as a real SVG mask (not CSS
+// mask-image) because iOS Safari has long-standing bugs with `mask-image:
+// url(#fragment)` referencing inline SVG masks, especially with animated
+// content — SVG-native mask= has worked reliably in WebKit for years.
+// The cell count stays well under the ~30 DOM-node budget — the original
+// PixelWipe used 504 simultaneous CSS animations and choked on iOS Safari.
+const PIXEL_COLS = 6;
+const PIXEL_ROWS = 4;
+const PIXEL_CELLS = PIXEL_COLS * PIXEL_ROWS;
+const PIXEL_STAGGER_WINDOW = 720;
+
+function makePixelDelays(): number[] {
+  const indices = Array.from({ length: PIXEL_CELLS }, (_, i) => i);
+  for (let i = indices.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [indices[i], indices[j]] = [indices[j], indices[i]];
+  }
+  const delays = new Array<number>(PIXEL_CELLS);
+  indices.forEach((cellIdx, order) => {
+    delays[cellIdx] = Math.round(
+      (order / Math.max(1, PIXEL_CELLS - 1)) * PIXEL_STAGGER_WINDOW,
+    );
+  });
+  return delays;
+}
+
+const specimenCornerBase =
+  'pointer-events-none absolute h-[14px] w-[14px] border border-[color:var(--mk-text-muted)]';
+const specimenMetaBase =
+  'absolute [font-family:var(--mk-font-mono)] text-[9px] md:text-[10px] tracking-[0.1em] uppercase text-[color:var(--mk-text-muted)]';
+
+export function HeroSection() {
+  // activeIdx — the visible card; rendered as a steady SVG <image> bottom
+  //   layer AND drives meta labels + active dot
+  // prevIdx — outgoing card as a sibling SVG <image> stacked on top, with
+  //   mask="url(#…)" so its 24 cell rects erase opacity 1 → 0 over
+  //   FADE_DURATION ms, exposing activeIdx beneath. Both <image>s share
+  //   the same SVG paint pipeline.
+  const [activeIdx, setActiveIdx] = useState(0);
+  const [prevIdx, setPrevIdx] = useState<number | null>(null);
+  const [paused, setPaused] = useState(false);
+  const [visible, setVisible] = useState(true);
+  const cardRef = useRef<HTMLDivElement>(null);
+  const activeIdxRef = useRef(activeIdx);
+  const transitioningRef = useRef(false);
+  const timersRef = useRef<number[]>([]);
+  // Holds decoded HTMLImageElements so the browser keeps the bitmaps in
+  // cache for the lifetime of the component — guarantees the incoming card
+  // is painted on frame 1 of the pixel-dissolve, instead of briefly showing
+  // transparent or a partial decode on slower devices.
+  const decodedImagesRef = useRef<HTMLImageElement[]>([]);
+
+  activeIdxRef.current = activeIdx;
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    decodedImagesRef.current = cards.map(({ src }) => {
+      const img = new Image();
+      img.src = src;
+      img.decoding = 'async';
+      img.decode().catch(() => {
+        // ignore decode failure; transition still runs via normal img load
+      });
+      return img;
+    });
+  }, []);
+
+  const advanceTo = useCallback(async (nextIdx: number) => {
+    if (transitioningRef.current) return;
+    if (nextIdx === activeIdxRef.current) return;
+    transitioningRef.current = true;
+
+    try {
+      await decodedImagesRef.current[nextIdx]?.decode();
+    } catch {
+      // ignore; transition still runs
+    }
+
+    setPrevIdx(activeIdxRef.current);
+    setActiveIdx(nextIdx);
+
+    const cleanupTimer = window.setTimeout(() => {
+      setPrevIdx(null);
+      transitioningRef.current = false;
+    }, FADE_DURATION);
+
+    timersRef.current = [cleanupTimer];
+  }, []);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    setVisible(!document.hidden);
+    const onVisibilityChange = () => setVisible(!document.hidden);
+    document.addEventListener('visibilitychange', onVisibilityChange);
+    return () =>
+      document.removeEventListener('visibilitychange', onVisibilityChange);
+  }, []);
+
+  useEffect(() => {
+    if (paused || !visible) return;
+    let intervalId: number | undefined;
+    const firstTimeout = window.setTimeout(() => {
+      advanceTo((activeIdxRef.current + 1) % cards.length);
+      intervalId = window.setInterval(() => {
+        advanceTo((activeIdxRef.current + 1) % cards.length);
+      }, 5000);
+    }, 3500);
+    return () => {
+      window.clearTimeout(firstTimeout);
+      if (intervalId !== undefined) window.clearInterval(intervalId);
+    };
+  }, [paused, visible, advanceTo]);
+
+  useEffect(
+    () => () => {
+      for (const t of timersRef.current) {
+        window.clearTimeout(t);
+      }
+    },
+    [],
+  );
+
+  // Mouse parallax tilt (desktop only)
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    if (!window.matchMedia('(hover: hover)').matches) return;
+    const card = cardRef.current;
+    const wrap = card?.parentElement;
+    if (!card || !wrap) return;
+
+    let raf = 0;
+    const onMove = (e: MouseEvent) => {
+      const r = wrap.getBoundingClientRect();
+      const x = ((e.clientX - r.left) / r.width - 0.5) * 2;
+      const y = ((e.clientY - r.top) / r.height - 0.5) * 2;
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        card.style.transform = `rotateY(${x * 8}deg) rotateX(${-y * 6}deg)`;
+      });
+    };
+    const onLeave = () => {
+      cancelAnimationFrame(raf);
+      card.style.transform = '';
+    };
+
+    wrap.addEventListener('mousemove', onMove);
+    wrap.addEventListener('mouseleave', onLeave);
+    return () => {
+      wrap.removeEventListener('mousemove', onMove);
+      wrap.removeEventListener('mouseleave', onLeave);
+      cancelAnimationFrame(raf);
+    };
+  }, []);
+
+  const incoming = cards[activeIdx];
+  const outgoing = prevIdx !== null ? cards[prevIdx] : null;
+  // biome-ignore lint/correctness/useExhaustiveDependencies: activeIdx triggers a fresh shuffle per transition; the value itself is unused inside makePixelDelays
+  const pixelDelays = useMemo(() => makePixelDelays(), [activeIdx]);
+
+  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="translate-y-2 text-left font-mono text-[11px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em]">
+            <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">
+            <span className="text-[color:var(--mk-brand)]">Bitcoin</span>
+            <br />
+            Gift Cards.
+          </h1>
+
+          <p className="mt-7 max-w-md text-balance text-[color:var(--mk-text-dim)] text-base leading-relaxed md:text-lg">
+            Buy, send and spend bitcoin gift cards from your favorite merchants.
+            All on the most advanced Bitcoin wallet.
+          </p>
+
+          <div className="mt-9">
+            <JoinBetaButton size="lg" />
+          </div>
+
+          <div className="mt-8 font-mono text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.2em]">
+            buy · send · spend
+          </div>
+        </div>
+
+        <div className="flex justify-center md:justify-end">
+          <div
+            className="relative mx-auto aspect-square w-full max-w-[320px] md:aspect-[4/3] md:max-w-[460px]"
+            onMouseEnter={() => setPaused(true)}
+            onMouseLeave={() => setPaused(false)}
+          >
+            <span
+              className={`${specimenCornerBase} top-0 left-0 border-r-0 border-b-0`}
+            />
+            <span
+              className={`${specimenCornerBase} top-0 right-0 border-b-0 border-l-0`}
+            />
+            <span
+              className={`${specimenCornerBase} bottom-0 left-0 border-t-0 border-r-0`}
+            />
+            <span
+              className={`${specimenCornerBase} right-0 bottom-0 border-t-0 border-l-0`}
+            />
+
+            <span className={`${specimenMetaBase} top-[-22px] left-0`}>
+              {pad3(activeIdx)} / {String(cards.length).padStart(3, '0')}
+            </span>
+            <span className={`${specimenMetaBase} top-[-22px] right-0`}>
+              btc gift card
+            </span>
+            <a
+              href={incoming?.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={`${specimenMetaBase} bottom-[-22px] left-0 transition-colors duration-200 hover:text-[color:var(--mk-text)]`}
+            >
+              {incoming?.label}
+            </a>
+            <span className={`${specimenMetaBase} right-0 bottom-[-22px]`}>
+              {incoming?.location}
+            </span>
+
+            <span
+              aria-hidden="true"
+              className="specimen-ruler-line absolute top-[12%] right-[-20px] bottom-[12%] w-2 border-[color:var(--mk-border)] border-r"
+            />
+
+            <div className="absolute inset-[14%] grid place-items-center [perspective:1200px] md:inset-[12%]">
+              <div
+                ref={cardRef}
+                className="relative aspect-[1.6/1] w-full rounded-xl shadow-[0_2px_4px_rgba(0,0,0,0.35),0_10px_20px_-6px_rgba(0,0,0,0.55),0_24px_48px_-14px_rgba(0,0,0,0.7),0_50px_90px_-22px_rgba(0,0,0,0.85)] transition-transform duration-[400ms] ease-[cubic-bezier(0.16,1,0.3,1)] [transform-style:preserve-3d] [will-change:transform]"
+              >
+                <div className="absolute inset-0 overflow-hidden rounded-xl">
+                  <svg
+                    role="img"
+                    aria-label={`${incoming?.label} gift card`}
+                    viewBox={`0 0 ${PIXEL_COLS} ${PIXEL_ROWS}`}
+                    preserveAspectRatio="none"
+                    className="absolute inset-0 block h-full w-full"
+                  >
+                    <title>{`${incoming?.label} gift card`}</title>
+                    {outgoing && (
+                      <defs>
+                        <mask
+                          id={`hero-pixel-mask-${prevIdx}`}
+                          maskUnits="userSpaceOnUse"
+                          maskContentUnits="userSpaceOnUse"
+                          x="0"
+                          y="0"
+                          width={PIXEL_COLS}
+                          height={PIXEL_ROWS}
+                        >
+                          {pixelDelays.map((delay, idx) => {
+                            const col = idx % PIXEL_COLS;
+                            const row = Math.floor(idx / PIXEL_COLS);
+                            return (
+                              <rect
+                                // biome-ignore lint/suspicious/noArrayIndexKey: cell positions are stable for the life of the transition
+                                key={idx}
+                                x={col}
+                                y={row}
+                                width={1.02}
+                                height={1.02}
+                                fill="white"
+                                className="animate-hero-pixel-cell-out"
+                                style={{ animationDelay: `${delay}ms` }}
+                              />
+                            );
+                          })}
+                        </mask>
+                      </defs>
+                    )}
+                    <image
+                      key={`current-${activeIdx}`}
+                      href={incoming?.src}
+                      x="0"
+                      y="0"
+                      width={PIXEL_COLS}
+                      height={PIXEL_ROWS}
+                      preserveAspectRatio="none"
+                    />
+                    {outgoing && (
+                      <image
+                        key={`outgoing-${prevIdx}`}
+                        href={outgoing.src}
+                        x="0"
+                        y="0"
+                        width={PIXEL_COLS}
+                        height={PIXEL_ROWS}
+                        preserveAspectRatio="none"
+                        mask={`url(#hero-pixel-mask-${prevIdx})`}
+                      />
+                    )}
+                  </svg>
+                  <div
+                    aria-hidden="true"
+                    className="pointer-events-none absolute inset-0 rounded-xl shadow-[inset_0_0_0_1px_rgba(0,0,0,0.4),inset_0_1px_0_rgba(255,255,255,0.18),inset_0_-1px_0_rgba(0,0,0,0.5),inset_0_0_0_1px_rgba(255,255,255,0.08)]"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="absolute inset-x-0 bottom-[-50px] flex items-center justify-center gap-2">
+              {cards.map((c, i) => (
+                <button
+                  key={c.label}
+                  type="button"
+                  aria-label={`Specimen ${pad3(i)}`}
+                  onClick={() => advanceTo(i)}
+                  className={`h-0.5 cursor-pointer border-none p-0 transition-[background-color,width] duration-[220ms] ${
+                    i === activeIdx
+                      ? 'w-9 bg-[color:var(--mk-brand)] hover:bg-[color:var(--mk-brand)]'
+                      : 'w-6 bg-[color:var(--mk-border)] hover:bg-[color:var(--mk-border-bright)]'
+                  }`}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/app/features/homepage/sections/merchants-section.tsx b/app/features/homepage/sections/merchants-section.tsx
new file mode 100644
index 000000000..bdcfbe583
--- /dev/null
+++ b/app/features/homepage/sections/merchants-section.tsx
@@ -0,0 +1,72 @@
+import btcpayLogoUrl from '~/assets/btcpay-logo.svg';
+import shopifyLogoUrl from '~/assets/shopify-logo.svg';
+import squareLogoUrl from '~/assets/square-logo.svg';
+import { MarketingCard } from '../components/marketing-card';
+import { SectionLabel } from '../components/section-label';
+
+const supportedSystems = [
+  { name: 'Square', src: squareLogoUrl },
+  { name: 'BTCPay Server', src: btcpayLogoUrl },
+  { name: 'Shopify', src: shopifyLogoUrl },
+];
+
+export function MerchantsSection() {
+  return (
+    <section
+      id="merchants"
+      className="relative w-full border-[color:var(--mk-border)] border-t px-5 py-20 md:px-8 md:py-28"
+    >
+      <div className="mx-auto max-w-xl">
+        <MarketingCard className="text-center">
+          <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">
+            <a href="#merchants">
+              Run a store? Issue bitcoin gift cards today.
+            </a>
+          </h2>
+          <p className="mt-4 text-[color:var(--mk-text-dim)] text-base leading-relaxed">
+            Closed-loop bitcoin gift cards for your shop. No fees, instant
+            settlement, no new hardware. We&apos;d love to talk.
+          </p>
+          <div className="mt-7 flex justify-center">
+            <a
+              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)]"
+            >
+              <span
+                aria-hidden="true"
+                className="mr-2 text-[color:var(--mk-text-muted)]"
+              >
+                {'>'}
+              </span>
+              join the waitlist
+            </a>
+          </div>
+
+          <div className="mt-7 border-[color:var(--mk-border)] border-t pt-[22px] text-center">
+            <div className="mb-4 text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.2em] [font-family:var(--mk-font-mono)]">
+              supported systems
+            </div>
+            <div className="mb-[14px] flex flex-wrap items-center justify-center gap-7 text-[color:var(--mk-text-dim)]">
+              {supportedSystems.map((s) => (
+                <img
+                  key={s.name}
+                  src={s.src}
+                  alt={s.name}
+                  className="block h-[30px] w-auto opacity-90"
+                />
+              ))}
+            </div>
+            <div className="text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em] opacity-70 [font-family:var(--mk-font-mono)]">
+              more coming soon
+            </div>
+          </div>
+        </MarketingCard>
+      </div>
+    </section>
+  );
+}
diff --git a/app/features/homepage/sections/send-section.tsx b/app/features/homepage/sections/send-section.tsx
new file mode 100644
index 000000000..eb81f8c88
--- /dev/null
+++ b/app/features/homepage/sections/send-section.tsx
@@ -0,0 +1,136 @@
+import { useEffect, useRef, useState } from 'react';
+import { Section } from '../components/section';
+import { SectionLabel } from '../components/section-label';
+
+const TRANSIT_TARGET_MS = 83; // simulated lightning latency
+const TRANSIT_DURATION_MS = 1500; // matches transit-fly keyframes
+
+export function SendSection() {
+  const railRef = useRef<HTMLDivElement>(null);
+  const [played, setPlayed] = useState(false);
+  const [elapsedMs, setElapsedMs] = useState(0);
+
+  useEffect(() => {
+    const node = railRef.current;
+    if (!node) return;
+    const root = node.closest('.marketing');
+    const obs = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting) {
+          setPlayed(true);
+          obs.disconnect();
+        }
+      },
+      {
+        root: root as Element | null,
+        // Trigger only when the section reaches the middle of the viewport —
+        // shrinks the viewport's effective bottom so it must scroll up further.
+        rootMargin: '0px 0px -45% 0px',
+        threshold: 0,
+      },
+    );
+    obs.observe(node);
+    return () => obs.disconnect();
+  }, []);
+
+  // Counter ticks 0 → 0.083s in lockstep with the card animation
+  useEffect(() => {
+    if (!played) {
+      setElapsedMs(0);
+      return;
+    }
+    const start = performance.now();
+    let raf = 0;
+    const tick = (now: number) => {
+      const wall = now - start;
+      const t = Math.min(1, wall / TRANSIT_DURATION_MS);
+      setElapsedMs(Math.round(t * TRANSIT_TARGET_MS));
+      if (t < 1) raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [played]);
+
+  const handleReplay = () => {
+    setPlayed(false);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => setPlayed(true));
+    });
+  };
+
+  const formattedTime = (elapsedMs / 1000).toFixed(3);
+
+  return (
+    <Section id="send">
+      <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">
+            <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]">
+            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' : ''}`}
+          >
+            <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]">
+                  origin
+                </div>
+                <div className="mt-1 font-mono text-[color:var(--mk-text)] text-xs">
+                  @you
+                </div>
+              </div>
+
+              <div className="transit-track relative mx-3 h-20">
+                <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)]"
+                />
+                <span
+                  aria-hidden="true"
+                  className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-full h-2 w-px bg-[color:var(--mk-text-muted)]"
+                />
+                <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)]"
+                />
+              </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]">
+                  destination
+                </div>
+                <div className="mt-1 font-mono text-[color:var(--mk-text)] text-xs">
+                  @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]">
+              <span>transit · {formattedTime}s</span>
+              <button
+                type="button"
+                onClick={handleReplay}
+                className="inline-flex cursor-pointer items-center gap-1.5 border-none bg-transparent p-0 text-[11px] text-[color:var(--mk-text-muted)] transition-colors duration-200 [font-family:var(--mk-font-mono)] hover:text-[color:var(--mk-text-dim)]"
+              >
+                <span aria-hidden="true">{'> '}</span>replay
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Section>
+  );
+}
diff --git a/app/features/homepage/sections/spend-section.tsx b/app/features/homepage/sections/spend-section.tsx
new file mode 100644
index 000000000..74217a4f2
--- /dev/null
+++ b/app/features/homepage/sections/spend-section.tsx
@@ -0,0 +1,182 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Section } from '../components/section';
+import { SectionLabel } from '../components/section-label';
+
+const QR_SIZE = 21;
+const FINDER_SIZE = 7;
+
+// Mulberry32 — small deterministic PRNG so the QR pattern is stable
+function mulberry32(seed: number) {
+  let a = seed;
+  return () => {
+    a |= 0;
+    a = (a + 0x6d2b79f5) | 0;
+    let t = a;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+function buildQrPattern(size: number, seed: number): boolean[][] {
+  const grid: boolean[][] = Array.from({ length: size }, () =>
+    Array(size).fill(false),
+  );
+
+  const drawFinder = (r0: number, c0: number) => {
+    for (let dr = 0; dr < FINDER_SIZE; dr++) {
+      for (let dc = 0; dc < FINDER_SIZE; dc++) {
+        const isOuter = dr === 0 || dr === 6 || dc === 0 || dc === 6;
+        const isInner = dr >= 2 && dr <= 4 && dc >= 2 && dc <= 4;
+        grid[r0 + dr][c0 + dc] = isOuter || isInner;
+      }
+    }
+  };
+
+  drawFinder(0, 0);
+  drawFinder(0, size - FINDER_SIZE);
+  drawFinder(size - FINDER_SIZE, 0);
+
+  const inFinderZone = (r: number, c: number) =>
+    (r < FINDER_SIZE + 1 && c < FINDER_SIZE + 1) ||
+    (r < FINDER_SIZE + 1 && c >= size - FINDER_SIZE - 1) ||
+    (r >= size - FINDER_SIZE - 1 && c < FINDER_SIZE + 1);
+
+  const rng = mulberry32(seed);
+  for (let r = 0; r < size; r++) {
+    for (let c = 0; c < size; c++) {
+      if (inFinderZone(r, c)) continue;
+      // Timing pattern on row 6 + col 6
+      if (r === 6) {
+        grid[r][c] = c % 2 === 0;
+        continue;
+      }
+      if (c === 6) {
+        grid[r][c] = r % 2 === 0;
+        continue;
+      }
+      grid[r][c] = rng() < 0.46;
+    }
+  }
+
+  return grid;
+}
+
+function QrPattern() {
+  const grid = useMemo(() => buildQrPattern(QR_SIZE, 4242), []);
+  return (
+    <svg
+      className="pay-qr block text-[#04080f]"
+      width="100%"
+      height="100%"
+      viewBox={`0 0 ${QR_SIZE} ${QR_SIZE}`}
+      preserveAspectRatio="xMidYMid meet"
+      overflow="hidden"
+      aria-hidden="true"
+    >
+      {grid.flatMap((row, r) =>
+        row.map((cell, c) =>
+          cell ? (
+            // biome-ignore lint/suspicious/noArrayIndexKey: static QR grid never reorders
+            <rect key={`${r}-${c}`} x={c} y={r} width={1} height={1} />
+          ) : null,
+        ),
+      )}
+    </svg>
+  );
+}
+
+export function SpendSection() {
+  const stageRef = useRef<HTMLDivElement>(null);
+  const [playing, setPlaying] = useState(false);
+
+  useEffect(() => {
+    const node = stageRef.current;
+    if (!node) return;
+    const root = node.closest('.marketing');
+    const obs = new IntersectionObserver(
+      ([entry]) => {
+        setPlaying(Boolean(entry?.isIntersecting));
+      },
+      {
+        root: root as Element | null,
+        rootMargin: '0px 0px -45% 0px',
+        threshold: 0,
+      },
+    );
+    obs.observe(node);
+    return () => obs.disconnect();
+  }, []);
+
+  return (
+    <Section id="spend">
+      <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="#spend">03_spend</SectionLabel>
+          <h2 className="mt-8 font-medium font-mono text-3xl leading-[1.15] tracking-[-0.02em] md:mt-10 md:text-5xl">
+            <a href="#spend">Spend. Scan. Done.</a>
+          </h2>
+          <p className="mt-6 text-[color:var(--mk-text-dim)] text-base leading-relaxed md:text-lg">
+            Pay with bitcoin at checkout. Scan the QR code with your Agicash
+            wallet. Bitcoin lands instantly at the merchant. No card networks or
+            bank intermediaries.
+          </p>
+          <div className="mt-6 font-mono text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em]">
+            settled instantly · 0% fee
+          </div>
+        </div>
+
+        <div className="flex justify-center">
+          <div
+            ref={stageRef}
+            className={`pay-stage relative mx-auto w-full max-w-[320px] rounded-[18px] border border-[color:var(--mk-border)] bg-[linear-gradient(180deg,#070d18_0%,#050a13_100%)] px-[22px] pt-6 pb-[22px] shadow-[0_30px_80px_-30px_rgba(0,0,0,0.8),inset_0_1px_0_rgba(255,255,255,0.04)] [font-family:var(--mk-font-display)] ${playing ? 'playing' : ''}`}
+          >
+            <div className="mb-[18px] flex items-center justify-between border-[color:var(--mk-border)] border-b pb-[14px] text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em] [font-family:var(--mk-font-mono)]">
+              <span>pay with bitcoin</span>
+              <span className="text-[color:var(--mk-text)]">pubkey dc</span>
+            </div>
+
+            <div className="pay-qr-wrap relative mx-auto aspect-square w-[55%] max-w-[200px] transform-gpu overflow-hidden rounded-lg bg-[#f4f7ff] transition-opacity duration-[360ms]">
+              <div className="absolute inset-2.5 overflow-hidden">
+                <QrPattern />
+              </div>
+              <span
+                aria-hidden="true"
+                className="pay-scanline pointer-events-none absolute right-[6%] left-[6%] h-0.5 bg-[color:var(--mk-brand)] opacity-0 shadow-[0_0_12px_rgba(0,212,255,0.6)]"
+              />
+              <div className="pay-paid pointer-events-none absolute inset-2.5 grid place-items-center bg-[#04080f] opacity-0">
+                <div
+                  aria-hidden="true"
+                  className="grid h-16 w-16 place-items-center rounded-full border-2 border-[color:var(--mk-brand)] text-[32px] text-[color:var(--mk-brand)]"
+                >
+                  ✓
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-[18px] flex flex-col items-center gap-1 text-center">
+              <span className="font-semibold text-[36px] text-[color:var(--mk-text)] tabular-nums leading-none tracking-[0.01em] [font-family:var(--mk-font-numeric)]">
+                <span className="mr-[0.06em] inline-block align-[0.02em] font-bold text-[0.86em] [font-family:var(--mk-font-mono)]">
+                  ₿
+                </span>
+                5,634
+              </span>
+              <span className="font-medium text-[16px] text-[color:var(--mk-text-muted)] tabular-nums leading-none tracking-[0.02em] [font-family:var(--mk-font-numeric)]">
+                $4.50
+              </span>
+            </div>
+
+            <div className="relative mt-4 h-7 border-[color:var(--mk-border)] border-t pt-[14px] text-[11px] uppercase tracking-[0.12em] [font-family:var(--mk-font-mono)]">
+              <span className="pay-status-scan absolute inset-x-0 top-[14px] bottom-0 grid place-items-center text-[color:var(--mk-text-muted)] opacity-100">
+                scan to pay
+              </span>
+              <span className="pay-status-paid absolute inset-x-0 top-[14px] bottom-0 grid place-items-center text-[color:var(--mk-brand)] opacity-0">
+                paid
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Section>
+  );
+}
diff --git a/app/features/homepage/sections/wallet-section.tsx b/app/features/homepage/sections/wallet-section.tsx
new file mode 100644
index 000000000..3f3c11f36
--- /dev/null
+++ b/app/features/homepage/sections/wallet-section.tsx
@@ -0,0 +1,111 @@
+import { Section } from '../components/section';
+import { SectionLabel } from '../components/section-label';
+
+type Spec = { label: string; value: string; mono?: boolean };
+
+const specs: Spec[] = [
+  { label: 'Protocol', value: 'cashu · spark', mono: true },
+  { label: 'Payments', value: 'lightning, lightning address', mono: true },
+  {
+    label: 'Features',
+    value: 'cross-device sync, encrypted backups',
+    mono: true,
+  },
+  { label: 'Login', value: 'email · google oauth', mono: true },
+];
+
+export function WalletSection() {
+  return (
+    <Section id="wallet">
+      <div className="grid grid-cols-1 items-start gap-12 md:grid-cols-[42%_1fr] md:items-center md:gap-20">
+        <div className="text-center md:text-left">
+          <SectionLabel href="#wallet">04_wallet</SectionLabel>
+          <h2 className="mt-8 font-medium font-mono text-3xl leading-[1.15] tracking-[-0.02em] md:hidden">
+            <a href="#wallet">The most advanced bitcoin wallet.</a>
+          </h2>
+          <p className="mt-6 text-[color:var(--mk-text-dim)] text-base leading-relaxed md:hidden">
+            Agicash is a non-custodial bitcoin wallet built on secure enclaves
+            to enable cross-device sync and email login. Built on the latest
+            bitcoin payment protocols.
+          </p>
+
+          <div className="mt-10 md:mt-8">
+            <div className="mx-auto w-full max-w-[320px] rounded-[18px] border border-[color:var(--mk-border)] bg-[linear-gradient(180deg,#070d18_0%,#050a13_100%)] px-[22px] pt-[22px] pb-5 shadow-[0_30px_60px_-30px_rgba(0,0,0,0.7)] [font-family:var(--mk-font-display)]">
+              <div className="mb-[18px] flex items-center justify-between">
+                <span className="text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.18em] [font-family:var(--mk-font-mono)]">
+                  bitcoin
+                </span>
+              </div>
+              <div className="mb-[18px] text-[12px] text-[color:var(--mk-text-dim)] [font-family:var(--mk-font-mono)]">
+                bob@agi.cash
+              </div>
+              <div className="text-center font-semibold text-[52px] text-[color:var(--mk-text)] tabular-nums leading-none tracking-[0.01em] [font-family:var(--mk-font-numeric)]">
+                <span className="mr-[0.06em] inline-block align-[0.02em] font-bold text-[0.86em] [font-family:var(--mk-font-mono)]">
+                  ₿
+                </span>
+                142,800
+              </div>
+              <div className="mt-1.5 mb-[22px] text-center font-medium text-[18px] text-[color:var(--mk-text-muted)] tabular-nums leading-none tracking-[0.01em] [font-family:var(--mk-font-numeric)]">
+                $145.62
+              </div>
+              <div className="flex flex-col gap-2">
+                <div className="grid grid-cols-2 gap-2">
+                  <span className="rounded-[10px] border border-[color:var(--mk-border)] bg-transparent py-3 text-center text-[13px] text-[color:var(--mk-text)] [font-family:var(--mk-font-mono)]">
+                    Receive
+                  </span>
+                  <span className="rounded-[10px] border border-[color:var(--mk-border)] bg-transparent py-3 text-center text-[13px] text-[color:var(--mk-text)] [font-family:var(--mk-font-mono)]">
+                    Buy
+                  </span>
+                </div>
+                <span className="rounded-[10px] border border-[color:var(--mk-border)] bg-[rgba(255,255,255,0.04)] py-3 text-center text-[13px] text-[color:var(--mk-text)] [font-family:var(--mk-font-mono)]">
+                  Send
+                </span>
+              </div>
+              <div className="mt-[18px] flex items-center gap-2 text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.1em] [font-family:var(--mk-font-mono)]">
+                <span
+                  aria-hidden="true"
+                  className="h-[5px] w-[5px] rounded-full bg-[color:var(--mk-brand)] opacity-70"
+                />
+                synced
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <h2 className="hidden font-medium font-mono text-3xl leading-[1.15] tracking-[-0.02em] md:block md:text-5xl">
+            <a href="#wallet">The most advanced bitcoin wallet.</a>
+          </h2>
+          <p className="mt-6 hidden text-[color:var(--mk-text-dim)] leading-relaxed md:block md:text-lg">
+            Agicash is a non-custodial bitcoin wallet built on secure enclaves
+            to enable cross-device sync and email login. Built on the latest
+            bitcoin payment protocols.
+          </p>
+
+          <div className="mt-10 w-full md:mt-12">
+            <div className="mb-1.5 border-[color:var(--mk-border)] border-b pb-2 text-[10px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.2em] [font-family:var(--mk-font-mono)]">
+              specification
+            </div>
+            {specs.map((s) => (
+              <div
+                key={s.label}
+                className="grid grid-cols-[80px_1fr] items-baseline gap-3 border-[color:var(--mk-border)] border-b py-[14px] last:border-b-0 md:grid-cols-[88px_1fr_auto]"
+              >
+                <span className="text-[11px] text-[color:var(--mk-text-muted)] uppercase tracking-[0.12em] [font-family:var(--mk-font-mono)]">
+                  {s.label}
+                </span>
+                <span
+                  className="spec-leader-line hidden md:block"
+                  aria-hidden="true"
+                />
+                <span className="text-right text-[11px] text-[color:var(--mk-text)] uppercase tabular-nums tracking-[0.12em] [font-family:var(--mk-font-mono)]">
+                  {s.value}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </Section>
+  );
+}
diff --git a/app/features/homepage/styles.css b/app/features/homepage/styles.css
new file mode 100644
index 000000000..b5702fd11
--- /dev/null
+++ b/app/features/homepage/styles.css
@@ -0,0 +1,218 @@
+@import url("https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,600,700,800&display=swap");
+
+/* CSS variables for the marketing palette / fonts.
+   Kept here (rather than in tailwind.css) because they're only used by the
+   homepage and several Tailwind arbitrary-value classes reference them via
+   text-[color:var(--mk-text)] etc. */
+.marketing {
+  --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;
+
+  font-feature-settings: "ss01", "ss02";
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Hide scrollbar on the scroll container (Tailwind v4 has a scrollbar-none
+   @utility in tailwind.css, but we need IE/Firefox properties + ::-webkit
+   alongside the inline classes — easier to assert in raw CSS). */
+.marketing::-webkit-scrollbar {
+  display: none;
+}
+
+/* Map Tailwind's font-mono utility to Kode Mono inside the marketing tree.
+   Without this, font-mono falls back to the default ui-monospace stack and
+   loses the brand monospace face. */
+.marketing .font-mono {
+  font-family: var(--mk-font-mono);
+}
+
+/* Section scroll target — the outer <section> carries the id (e.g. #buy,
+   #send), so a hash navigation lands at the top of the section itself
+   rather than mid-content where the section's label sits. Offset matches
+   the sticky nav's height per breakpoint (-1px so the section's border-t
+   overlays the nav's border-b as a single 1px line). */
+.marketing section[id] {
+  scroll-margin-top: 64px;
+}
+@media (min-width: 768px) {
+  .marketing section[id] {
+    scroll-margin-top: 70px;
+  }
+}
+
+/* Stagger children with sequenced delays — hard to express in pure Tailwind
+   (would require setting style={{ animationDelay }} on each child). Cheaper
+   to keep these descendant selectors. */
+.marketing .stagger > * {
+  opacity: 0;
+  transform: translateY(8px);
+  animation: mk-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+.marketing .stagger > *:nth-child(1) {
+  animation-delay: 0ms;
+}
+.marketing .stagger > *:nth-child(2) {
+  animation-delay: 80ms;
+}
+.marketing .stagger > *:nth-child(3) {
+  animation-delay: 160ms;
+}
+.marketing .stagger > *:nth-child(4) {
+  animation-delay: 240ms;
+}
+.marketing .stagger > *:nth-child(5) {
+  animation-delay: 320ms;
+}
+.marketing .stagger > *:nth-child(6) {
+  animation-delay: 400ms;
+}
+
+/* Pay-QR rects — auto-fill with currentColor and crisp edges. The
+   <rect> elements are generated by React from a deterministic seed, no
+   way to add classes to each one cheaply. */
+.marketing .pay-qr rect {
+  fill: currentColor;
+  shape-rendering: crispEdges;
+}
+
+/* Pay stage cyclical animations — when `.playing`, several descendants
+   animate independently on a single 6s cycle. Easier to leave as CSS
+   because Tailwind has no concept of "ancestor state triggers descendant
+   animation". */
+.marketing .pay-stage.playing .pay-qr-wrap {
+  animation: pay-qr-cycle 6s linear infinite;
+}
+.marketing .pay-stage.playing .pay-scanline {
+  animation: pay-scan-cycle 6s ease-in-out infinite;
+}
+.marketing .pay-stage.playing .pay-paid {
+  animation: pay-paid-cycle 6s ease-in-out infinite;
+}
+.marketing .pay-stage.playing .pay-status-scan {
+  animation: pay-status-scan 6s linear infinite;
+}
+.marketing .pay-stage.playing .pay-status-paid {
+  animation: pay-status-paid 6s linear infinite;
+}
+
+/* Transit card — when the parent .transit-rail.played fires, the card flies.
+   Could push to inline with React state but cleaner to keep the trigger as
+   an ancestor class toggle. */
+.marketing .transit-rail.played .transit-card {
+  animation: transit-fly 1500ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
+}
+
+/* Transit-card decorative inner gradient via ::before — Tailwind can do
+   `before:` with `content-['']` but stacking inset + radial gradient with
+   border-radius is more readable as plain CSS. */
+.marketing .transit-card::before {
+  content: "";
+  position: absolute;
+  inset: 4px;
+  border-radius: 2px;
+  background: linear-gradient(
+    135deg,
+    rgba(0, 212, 255, 0.18),
+    rgba(0, 212, 255, 0.05)
+  );
+}
+
+/* Transit-track dashed midline via ::before — kept as CSS for the same
+   stacking + repeating gradient reason. */
+.marketing .transit-track::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-image: linear-gradient(
+    to right,
+    var(--mk-border) 50%,
+    transparent 50%
+  );
+  background-size: 8px 1px;
+  transform: translateY(-50%);
+}
+
+/* Buy-stage paid-state animation triggers — ancestor class drives nested
+   element animations + staggered delays. */
+.marketing .buy-stage.paid .cashapp-check,
+.marketing .buy-stage.paid .cashapp-headline,
+.marketing .buy-stage.paid .cashapp-done {
+  animation: confirm-pop 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+.marketing .buy-stage.paid .cashapp-headline {
+  animation-delay: 80ms;
+}
+.marketing .buy-stage.paid .cashapp-done {
+  animation-delay: 160ms;
+}
+
+/* Footer image filter — turn the imported SVG socials into off-white
+   silhouettes. Filter chains are not in Tailwind out of the box. */
+.marketing .footer-social-img {
+  filter: invert(56%) sepia(8%) saturate(750%) hue-rotate(190deg)
+    brightness(95%) contrast(85%);
+  opacity: 0.9;
+  transition: filter 200ms ease, opacity 200ms ease;
+}
+.marketing .footer-social-link:hover .footer-social-img {
+  filter: invert(94%) sepia(5%) saturate(380%) hue-rotate(190deg)
+    brightness(102%) contrast(94%);
+  opacity: 1;
+}
+
+/* Spec-leader dotted line — repeating radial gradient. Tailwind can't
+   express this directly. */
+.marketing .spec-leader-line {
+  height: 1px;
+  background-image: radial-gradient(
+    circle,
+    var(--mk-text-muted) 0.6px,
+    transparent 0.6px
+  );
+  background-size: 6px 1px;
+  background-repeat: repeat-x;
+  background-position: 0 50%;
+  align-self: center;
+  opacity: 0.6;
+}
+
+@media (max-width: 767px) {
+  .marketing .spec-leader-line {
+    display: none;
+  }
+}
+
+/* Specimen-ruler — vertical ruler with repeating ticks. Tailwind doesn't
+   express repeating-linear-gradient cleanly. */
+.marketing .specimen-ruler-line {
+  background-image: repeating-linear-gradient(
+    to bottom,
+    var(--mk-border) 0,
+    var(--mk-border) 1px,
+    transparent 1px,
+    transparent 24px
+  );
+  background-position: right;
+  background-size: 6px 24px;
+  background-repeat: repeat-y;
+}
+
+@media (max-width: 767px) {
+  .marketing .specimen-ruler-line {
+    display: none;
+  }
+}
diff --git a/app/prerender-paths.ts b/app/prerender-paths.ts
new file mode 100644
index 000000000..2e9efa22d
--- /dev/null
+++ b/app/prerender-paths.ts
@@ -0,0 +1,17 @@
+/**
+ * Paths prerendered at build time. Consumed by `react-router.config.ts`
+ * (the actual prerender directive) and `app/entry.server.tsx` (where the
+ * list is used to disable React's Suspense outlining for runtime SSR of
+ * these routes — Vercel currently doesn't serve them as static files when
+ * `ssr:true`, see remix-run/react-router#14281).
+ */
+export const PRERENDERED_PATHS = [
+  '/terms',
+  '/terms/wallet',
+  '/terms/mint',
+  '/privacy',
+  '/privacy/wallet',
+  '/privacy/mint',
+  '/mint-risks',
+  '/home',
+];
diff --git a/app/routes/_protected._index.tsx b/app/routes/_protected._index.tsx
index e418348ee..d09297759 100644
--- a/app/routes/_protected._index.tsx
+++ b/app/routes/_protected._index.tsx
@@ -16,9 +16,9 @@ import { DefaultCurrencySwitcher } from '~/features/accounts/default-currency-sw
 import { CASH_APP_LOGO_URL } from '~/features/buy/cash-app';
 import { InstallPwaPrompt } from '~/features/pwa/install-pwa-prompt';
 import { MoneyWithConvertedAmount } from '~/features/shared/money-with-converted-amount';
-import useIsPwa from '~/hooks/use-is-pwa';
 import { useHasTransactionsPendingAck } from '~/features/transactions/transaction-hooks';
 import { useUser } from '~/features/user/user-hooks';
+import useIsPwa from '~/hooks/use-is-pwa';
 import { LinkWithViewTransition } from '~/lib/transitions';
 import { cn } from '~/lib/utils';
 
diff --git a/app/routes/_public.home.tsx b/app/routes/_public.home.tsx
index ac1f87232..b64d8425a 100644
--- a/app/routes/_public.home.tsx
+++ b/app/routes/_public.home.tsx
@@ -1,58 +1,30 @@
-import { useQuery } from '@tanstack/react-query';
-import { Link, useLocation } from 'react-router';
-import DiscordLogo from '~/assets/discord_logo.svg';
-import { Page, PageContent } from '~/components/page';
-import { Button } from '~/components/ui/button';
-import { authQueryOptions } from '~/features/user/auth';
+import type { LinksFunction } from 'react-router';
+import pubkeyCard from '~/assets/gift-cards/pubkey.agi.cash.webp';
+import { MarketingPage } from '~/features/homepage/marketing-page';
 
-export default function HomePage() {
-  const location = useLocation();
-  const { data: authState } = useQuery(authQueryOptions());
-
-  const isLoggedIn = authState?.isLoggedIn ?? false;
+const fontPreloads = [
+  'https://cdn.fontshare.com/wf/J6PPRPKWXDUIYA47IXLEQB4R4OPVYDQH/N2ZXAXWEHVMLISD2TIXJC7EF4GOY43L4/NXM4Z4TDCMYWBZ7AVI2N6DQ5VMWNENMU.woff2',
+  'https://cdn.fontshare.com/wf/CKQBK2QBTCDREE7L3MXZ3PPW7LDNJCWU/OTOY7FQFSFOJVZKJWKO2EHUJLOGBDN4Q/4CO2ETY7NITKLUDKMYJ75RHJSPHOJ7XT.woff2',
+  'https://cdn.fontshare.com/wf/XMXWOHABYLQDJ42L65EFRYNVRY37HQCB/B2O4O6V3JMFM2WDCYQI3A47L5U4THDUL/WN5274VQ3AUBDFP74GB4EC4XYJ3EKVNE.woff2',
+  'https://cdn.fontshare.com/wf/ZX6AQLSFYVDPN2URWO2MQFGTYYOHIS64/TPYPKOYWFQVNJHLLRXD4KFYX4LUOUW4Z/6QH2ALVTTK7IRVO5MYOQQ3OZNXW5SSS3.woff2',
+  'https://fonts.gstatic.com/s/kodemono/v4/A2BYn5pb0QgtVEPFnlYOnYLw.woff2',
+  'https://fonts.gstatic.com/s/teko/v23/LYjNdG7kmE0gfaN9pQ.woff2',
+];
 
-  return (
-    <Page>
-      <PageContent className="flex flex-col items-center">
-        <div className="absolute top-0 right-0 bottom-0 left-0 mx-auto flex max-w-sm items-center justify-center">
-          <div className="relative text-center">
-            <h1 className="mb-8 font-bold text-[clamp(3rem,10vw,4rem)] leading-none tracking-tight drop-shadow-lg">
-              Coming Soon
-            </h1>
+export const links: LinksFunction = () => [
+  ...fontPreloads.map((href) => ({
+    rel: 'preload',
+    href,
+    as: 'font',
+    type: 'font/woff2',
+    crossOrigin: 'anonymous' as const,
+  })),
+  // PubKey is the first hero card — preload so LCP isn't blocked on the
+  // bundled JS finishing before the image request even starts. The other
+  // 5 cards are pre-decoded post-mount by HeroSection's decodedImagesRef.
+  { rel: 'preload', href: pubkeyCard, as: 'image', type: 'image/webp' },
+];
 
-            <a
-              href="https://discord.gg/e2TSCfXxhd"
-              className="inline-flex"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <img
-                src={DiscordLogo}
-                alt="Discord"
-                className="size-8"
-                style={{
-                  filter:
-                    'invert(38%) sepia(95%) saturate(1817%) hue-rotate(218deg) brightness(100%) contrast(93%)',
-                }}
-              />
-            </a>
-
-            <div className="-translate-x-1/2 absolute top-full left-1/2 mt-8">
-              {isLoggedIn ? (
-                <Button asChild size="sm">
-                  <Link to="/">Go to Wallet</Link>
-                </Button>
-              ) : (
-                <Button asChild size="sm">
-                  <Link to={{ ...location, pathname: '/signup' }}>
-                    Join Beta
-                  </Link>
-                </Button>
-              )}
-            </div>
-          </div>
-        </div>
-      </PageContent>
-    </Page>
-  );
+export default function HomePage() {
+  return <MarketingPage />;
 }
diff --git a/app/tailwind.css b/app/tailwind.css
index eddb4b3e1..53f35d542 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -125,6 +125,15 @@
   --animate-shake: shake 0.2s ease-in-out;
   --animate-slam: slam 0.4s ease-out both;
   --animate-slide-out-up: slide-out-up 300ms ease-out forwards;
+
+  /* Marketing homepage animation utilities (consumed as Tailwind classes).
+     Other marketing keyframes (mk-fade-up, transit-fly, pay-*, confirm-pop)
+     are referenced directly via `animation:` in features/homepage/styles.css
+     and don't need utility bindings here. */
+  --animate-hero-pixel-cell-out: hero-pixel-cell-out 1ms steps(1, end) forwards;
+  --animate-state-slide: state-slide 2000ms cubic-bezier(0.22, 1, 0.36, 1);
+  --animate-state-fade: state-fade 1700ms ease-out;
+  --animate-cashapp-spin: cashapp-spin 1s linear infinite;
 }
 
 /* Custom keyframes */
@@ -183,6 +192,158 @@
   }
 }
 
+/* Marketing homepage keyframes */
+@keyframes mk-fade-up {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes hero-pixel-cell-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes transit-fly {
+  0% {
+    left: 0%;
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    left: 100%;
+    opacity: 1;
+  }
+}
+
+@keyframes pay-qr-cycle {
+  0%,
+  55% {
+    opacity: 1;
+  }
+  62%,
+  92% {
+    opacity: 0.18;
+  }
+  98%,
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes pay-scan-cycle {
+  0%,
+  35% {
+    opacity: 0;
+    top: 10px;
+  }
+  38% {
+    opacity: 1;
+    top: 10px;
+  }
+  55% {
+    opacity: 1;
+    top: calc(100% - 12px);
+  }
+  58% {
+    opacity: 0;
+    top: calc(100% - 12px);
+  }
+  100% {
+    opacity: 0;
+    top: 10px;
+  }
+}
+
+@keyframes pay-paid-cycle {
+  0%,
+  60% {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  64% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  92% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  96%,
+  100% {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+@keyframes pay-status-scan {
+  0%,
+  55% {
+    opacity: 1;
+  }
+  60%,
+  95% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes pay-status-paid {
+  0%,
+  60% {
+    opacity: 0;
+  }
+  64%,
+  92% {
+    opacity: 1;
+  }
+  96%,
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes state-slide {
+  0% {
+    opacity: 0;
+    transform: translateX(80px);
+  }
+  60% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes state-fade {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes cashapp-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 /* Custom scrollbar utility */
 @utility scrollbar-none {
   -ms-overflow-style: none;
diff --git a/react-router.config.ts b/react-router.config.ts
index 1a65173ea..77c2ca087 100644
--- a/react-router.config.ts
+++ b/react-router.config.ts
@@ -2,6 +2,7 @@ import type { Config, Preset } from '@react-router/dev/config';
 import { sentryOnBuildEnd } from '@sentry/react-router';
 import { vercelPreset } from '@vercel/react-router/vite';
 import type { NavigateOptions, To } from 'react-router';
+import { PRERENDERED_PATHS } from './app/prerender-paths';
 
 // Check https://reactrouter.com/api/hooks/useNavigate#return-type-augmentation to see why this is needed
 declare module 'react-router' {
@@ -24,16 +25,7 @@ export default {
     (preset): preset is Preset => Boolean(preset),
   ),
   async prerender() {
-    return [
-      '/terms',
-      '/terms/wallet',
-      '/terms/mint',
-      '/privacy',
-      '/privacy/wallet',
-      '/privacy/mint',
-      '/mint-risks',
-      '/home',
-    ];
+    return [...PRERENDERED_PATHS];
   },
   future: {
     v8_middleware: true,