https://remix.run/

스캔 ID:: ef5a9f1d-6f37-4878-83c1-a03d683309b7완료
제출된 URL:: https://remix.run/
보고서 완료:: 2024년 10월 28일 16:13:10
링크 · 15개 결과

페이지에서 식별된 외부 링크
링크	텍스트
https://twitter.com/jjenzz/status/1459941582912827398	Tweet from Jenna SmithJenna Smith
https://twitter.com/jkup/status/1456360115205033989	Tweet from Jon KupermanTwitter Logo
https://twitter.com/aweary/status/1456399484473200644	Tweet from Brandon DailTwitter Logo
https://twitter.com/TAbrodi/status/1459531154533634048	Tweet from Tiger AbrodiTwitter Logo
https://twitter.com/sergiodxa/status/1400503400802959361	Tweet from Sergio XalambríTwitter Logo
https://twitter.com/elrickvm/status/1458918740918251524	Tweet from Elrick RyanTwitter Logo
https://twitter.com/theflyingcoder1/status/1456407168291278851	Tweet from Tom RoweTwitter Logo
https://twitter.com/wisecobbler/status/1388174702900772868	Tweet from Sophia ShoemakerTwitter Logo
https://twitter.com/meindertsmajens/status/1454393707604680711	Tweet from Jens MeindertsmaTwitter Logo
https://twitter.com/cammchenry/status/1447267585456812039	Tweet from Cameron McHenryTwitter Logo
JavaScript 변수 · 11개 결과

페이지의 창 개체에 로드된 전역 JavaScript 변수는 함수 외부에서 선언된 변수로, 현재 범위 내에서 코드의 어느 부분에서나 액세스할 수 있습니다
이름	유형
onbeforetoggle	object
documentPictureInPicture	object
onscrollend	object
__remixContext	object
$RC	function
__reactRouterVersion	string
__remixManifest	object
__remixRouteModules	object
__remixRouter	object
fathom	object
콘솔 로그 메시지 · 0개 결과

웹 콘솔에 기록된 메시지
HTML

페이지의 원시 HTML 본문
<!DOCTYPE html><html lang="en" class="dark" data-theme="dark"><head><meta charset="utf-8"><meta name="theme-color" content="#121212"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><link rel="stylesheet" href="/assets/root-oSyDRLCA.css"><link rel="icon" href="/favicon-32.png" sizes="32x32"><link rel="icon" href="/favicon-128.png" sizes="128x128"><link rel="icon" href="/favicon-180.png" sizes="180x180"><link rel="icon" href="/favicon-192.png" sizes="192x192"><link rel="apple-touch-icon" href="/favicon-180.png" sizes="180x180"><link rel="preload" as="font" href="/font/inter-roman-latin-var.woff2" crossorigin="anonymous"><link rel="preload" as="font" href="/font/inter-italic-latin-var.woff2" crossorigin="anonymous"><link rel="preload" as="font" href="/font/source-code-pro-roman-var.woff2" crossorigin="anonymous"><link rel="preload" as="font" href="/font/source-code-pro-italic-var.woff2" crossorigin="anonymous"><link rel="alternate" type="application/rss+xml" href="/blog/rss.xml"><link rel="stylesheet" href="/assets/details-menu-B-7xMjyk.css"><link rel="stylesheet" href="/assets/index-D7T23u_2.css"><title>Remix - Build Better Websites</title><meta name="description" content="Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff."><meta property="og:url" content="https://remix.run"><meta property="og:title" content="Remix - Build Better Websites"><meta property="og:description" content="Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff."><meta property="og:image" content="https://remix.run/img/og.1.jpg"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:creator" content="@remix_run"><meta name="twitter:site" content="@remix_run"><meta name="twitter:title" content="Remix - Build Better Websites"><meta name="twitter:description" content="Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff."><meta name="twitter:image" content="https://remix.run/img/og.1.jpg"></head><body class="flex min-h-screen w-full flex-col overflow-x-hidden antialiased selection:bg-blue-200 selection:text-black dark:selection:bg-blue-800 dark:selection:text-white bg-gray-900 text-gray-200"><div role="progressbar" aria-hidden="true" class="fixed inset-x-0 left-0 top-0 z-50 h-1 animate-pulse"><div class="h-full bg-gradient-to-r from-blue-brand to-aqua-brand transition-all duration-500 ease-in-out w-0 opacity-0 transition-none"></div></div><div class="flex h-full flex-1 flex-col"><header class="flex items-center justify-between px-6 py-9 lg:px-12 text-white"><a x-comp="NavLink" aria-label="Remix" data-discover="true" aria-current="page" class="active" href="/"><svg x-comp="Wordmark" height="24" viewBox="0 0 659 165" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M133.85 124.16C135.3 142.762 135.3 151.482 135.3 161H92.2283C92.2283 158.927 92.2653 157.03 92.3028 155.107C92.4195 149.128 92.5411 142.894 91.5717 130.304C90.2905 111.872 82.3473 107.776 67.7419 107.776H54.8021H0V74.24H69.7918C88.2407 74.24 97.4651 68.632 97.4651 53.784C97.4651 40.728 88.2407 32.816 69.7918 32.816H0V0H77.4788C119.245 0 140 19.712 140 51.2C140 74.752 125.395 90.112 105.665 92.672C122.32 96 132.057 105.472 133.85 124.16Z" fill="currentColor"></path><path d="M0 161V136H45.5416C53.1486 136 54.8003 141.638 54.8003 145V161H0Z" fill="currentColor"></path><path d="M654.54 47.1035H611.788L592.332 74.2395L573.388 47.1035H527.564L568.78 103.168L523.98 161.28H566.732L589.516 130.304L612.3 161.28H658.124L613.068 101.376L654.54 47.1035Z" fill="url(#paint0_linear)"></path><path d="M654.54 47.1035H611.788L592.332 74.2395L573.388 47.1035H527.564L568.78 103.168L523.98 161.28H566.732L589.516 130.304L612.3 161.28H658.124L613.068 101.376L654.54 47.1035Z" fill="currentColor"></path><path d="M229.43 120.576C225.59 129.536 218.422 133.376 207.158 133.376C194.614 133.376 184.374 126.72 183.35 112.64H263.478V101.12C263.478 70.1437 243.254 44.0317 205.11 44.0317C169.526 44.0317 142.902 69.8877 142.902 105.984C142.902 142.336 169.014 164.352 205.622 164.352C235.83 164.352 256.822 149.76 262.71 123.648L229.43 120.576ZM183.862 92.6717C185.398 81.9197 191.286 73.7277 204.598 73.7277C216.886 73.7277 223.542 82.4317 224.054 92.6717H183.862Z" fill="url(#paint1_linear)"></path><path d="M229.43 120.576C225.59 129.536 218.422 133.376 207.158 133.376C194.614 133.376 184.374 126.72 183.35 112.64H263.478V101.12C263.478 70.1437 243.254 44.0317 205.11 44.0317C169.526 44.0317 142.902 69.8877 142.902 105.984C142.902 142.336 169.014 164.352 205.622 164.352C235.83 164.352 256.822 149.76 262.71 123.648L229.43 120.576ZM183.862 92.6717C185.398 81.9197 191.286 73.7277 204.598 73.7277C216.886 73.7277 223.542 82.4317 224.054 92.6717H183.862Z" fill="currentColor"></path><path d="M385.256 66.5597C380.392 53.2477 369.896 44.0317 349.672 44.0317C332.52 44.0317 320.232 51.7117 314.088 64.2557V47.1037H272.616V161.28H314.088V105.216C314.088 88.0638 318.952 76.7997 332.52 76.7997C345.064 76.7997 348.136 84.9917 348.136 100.608V161.28H389.608V105.216C389.608 88.0638 394.216 76.7997 408.04 76.7997C420.584 76.7997 423.4 84.9917 423.4 100.608V161.28H464.872V89.5997C464.872 65.7917 455.656 44.0317 424.168 44.0317C404.968 44.0317 391.4 53.7597 385.256 66.5597Z" fill="url(#paint2_linear)"></path><path d="M385.256 66.5597C380.392 53.2477 369.896 44.0317 349.672 44.0317C332.52 44.0317 320.232 51.7117 314.088 64.2557V47.1037H272.616V161.28H314.088V105.216C314.088 88.0638 318.952 76.7997 332.52 76.7997C345.064 76.7997 348.136 84.9917 348.136 100.608V161.28H389.608V105.216C389.608 88.0638 394.216 76.7997 408.04 76.7997C420.584 76.7997 423.4 84.9917 423.4 100.608V161.28H464.872V89.5997C464.872 65.7917 455.656 44.0317 424.168 44.0317C404.968 44.0317 391.4 53.7597 385.256 66.5597Z" fill="currentColor"></path><path d="M478.436 47.104V161.28H519.908V47.104H478.436ZM478.18 36.352H520.164V0H478.18V36.352Z" fill="url(#paint3_linear)"></path><path d="M478.436 47.104V161.28H519.908V47.104H478.436ZM478.18 36.352H520.164V0H478.18V36.352Z" fill="currentColor"></path><defs><linearGradient id="paint0_linear" x1="591.052" y1="47.1035" x2="591.052" y2="161.28" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"></stop><stop offset="1" stop-color="currentColor" stop-opacity="0"></stop></linearGradient><linearGradient id="paint1_linear" x1="203.19" y1="44.0317" x2="203.19" y2="164.352" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"></stop><stop offset="1" stop-color="currentColor" stop-opacity="0"></stop></linearGradient><linearGradient id="paint2_linear" x1="368.744" y1="44.0317" x2="368.744" y2="161.28" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"></stop><stop offset="1" stop-color="currentColor" stop-opacity="0"></stop></linearGradient><linearGradient id="paint3_linear" x1="499.172" y1="0" x2="499.172" y2="161.28" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"></stop><stop offset="1" stop-color="currentColor" stop-opacity="0"></stop></linearGradient></defs></svg></a><nav class="hidden gap-8 md:flex" aria-label="Main"><a x-comp="HeaderLink" data-discover="true" class="text-base font-semibold opacity-80 last:mr-0 hover:opacity-100" href="/docs/en/main">Docs</a><a x-comp="HeaderLink" data-discover="true" class="text-base font-semibold opacity-80 last:mr-0 hover:opacity-100" href="/blog">Blog</a><a x-comp="HeaderLink" data-discover="true" class="text-base font-semibold opacity-80 last:mr-0 hover:opacity-100" href="/showcase">Showcase</a><a x-comp="HeaderLink" data-discover="true" class="text-base font-semibold opacity-80 last:mr-0 hover:opacity-100" href="/resources">Resources</a></nav><details class="relative cursor-pointer md:hidden"><summary class="bg-gray-100 hover:bg-gray-200 [[open]>&amp;]:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 dark:[[open]>&amp;]:bg-gray-700 _no-triangle grid h-10 w-10 place-items-center rounded-full"><svg class="h-5 w-5"><use href="/assets/icons-Dxzco0Kk.svg#menu"></use></svg></summary><div class="absolute right-0 z-20 md:left-0"><div class="relative top-1 w-40 rounded-md border border-gray-100 bg-white p-1 shadow-sm dark:border-gray-800 dark:bg-gray-900"><nav class="flex flex-col gap-2 px-2 py-2.5"><a x-comp="HeaderLink" data-discover="true" class="text-base font-semibold opacity-80 last:mr-0 hover:opacity-100" href="/docs/en/main">Docs</a><a x-comp="HeaderLink" data-discover="true" class="text-base font-semibold opacity-80 last:mr-0 hover:opacity-100" href="/blog">Blog</a><a x-comp="HeaderLink" data-discover="true" class="text-base font-semibold opacity-80 last:mr-0 hover:opacity-100" href="/showcase">Showcase</a><a x-comp="HeaderLink" data-discover="true" class="text-base font-semibold opacity-80 last:mr-0 hover:opacity-100" href="/resources">Resources</a></nav></div></div></details></header><main class="flex flex-1 flex-col" tabindex="-1"><div x-comp="Index"><div class="h-8"></div><h1 class="sr-only">Welcome to Remix</h1><section x-comp="Hero" class="px-6 sm:px-8 lg:flex lg:w-full lg:items-center lg:justify-between lg:gap-12"><div class="lg:mb-10 lg:w-1/2"><div class="lg:mx-auto lg:max-w-2xl"><h2 class="text-3xl font-black text-white xs:text-4xl sm:text-5xl lg:text-[3.5rem] xl:text-6xl">Focused on <span class="text-aqua-brand">web standards</span> <!-- -->and <span class="text-green-brand">modern web app</span> UX, you’re simply going to<!-- --> <span class="text-yellow-brand">build better websites</span></h2><div class="h-6"></div><p class="xs:text-lg lg:text-xl xl:max-w-xl">Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff.</p><div class="h-9 xl:h-10"></div><div class="xl: flex flex-col gap-4 xl:flex-row"><a x-comp="PrimaryButtonLink" class="inline-flex items-center justify-center xl:text-xl h-14 xl:h-16 box-border px-8 rounded focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-transparent font-semibold bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-200 transition-colors duration-200 w-full xl:order-1 xl:w-60" data-discover="true" href="/docs/start/quickstart">Get Started</a><a x-comp="OutlineButtonLink" class="inline-flex items-center justify-center xl:text-xl h-14 xl:h-16 t box-border px-8 rounded bg-transparent text-white border-current hover:border-blue-brand focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-transparent focus:ring-blue-200 focus:ring-opacity-80 font-semibold border-2 w-full xl:w-60" data-discover="true" href="/docs">Read the Docs</a></div></div></div><div class="relative -mx-6 mt-6 overflow-hidden p-4 sm:-mx-8 sm:p-8 md:p-10 lg:mt-0 lg:h-[51rem] lg:w-1/2 lg:rounded-l-2xl lg:p-8"><svg class="absolute left-0 top-0 h-full xl:rounded-3xl" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1920 1080"><g clip-path="url(#clip0_230:73)"><path fill="url(#paint0_linear_230:73)" d="M0 0H1920V1080H0z"></path><path fill="url(#paint1_linear_230:73)" d="M664.307 809.4c-7.074-90.56-120.853-580.729-176.858-814.494l152.54-182.225c-238.022-21.168-727.33-60.742-780.388-49.698-66.322 13.805-79.586 563.243-99.483 668.161-15.917 83.934 146.645 574.286 229.916 808.976 135.592 7.36 416.06 17.67 453.2 0 46.426-22.09 229.916-317.519 221.073-430.72z"></path><path fill="url(#paint2_linear_230:73)" d="M174.662 803.768C309.297 634.216 292.388 197.274 267.105-.002c14.222-14.663 45.984-47.187 59.258-59.983C342.955-75.981 30.073-149.96 6.369-147.96-12.593-146.361-45.778 429.875-60 717.792c22.123 99.305 100.028 255.527 234.662 85.976z"></path><path fill="url(#paint3_linear_230:73)" d="M867.369 535.857c-105.199 62.977-57.22 440.793-48.583 564.173H2019.11l62.83-920.49c-64.77-201.867-257.55-510.307-510.44-129.13-252.89 381.176-213.12 906.695-305.1 963.99-109.48 68.19-293.833-541.52-399.031-478.543z"></path></g><defs><linearGradient id="paint0_linear_230:73" x1="680.162" x2="1632.05" y1="577.98" y2="236.725" gradientUnits="userSpaceOnUse"><stop stop-color="#EB6899"></stop><stop offset="0.243" stop-color="#F090AE"></stop><stop offset="1" stop-color="#F6BDC5"></stop></linearGradient><linearGradient id="paint1_linear_230:73" x1="212.213" x2="586.594" y1="-18.898" y2="1121.55" gradientUnits="userSpaceOnUse"><stop stop-color="#F892A2"></stop><stop offset="1" stop-color="#F4768C"></stop></linearGradient><linearGradient id="paint2_linear_230:73" x1="297.919" x2="-16.453" y1="155.953" y2="236.012" gradientUnits="userSpaceOnUse"><stop stop-color="#F6728F"></stop><stop offset="1" stop-color="#F24F70"></stop></linearGradient><linearGradient id="paint3_linear_230:73" x1="866.073" x2="1903.93" y1="1072.4" y2="300.803" gradientUnits="userSpaceOnUse"><stop offset="0.191" stop-color="#D45DA2"></stop><stop offset="0.415" stop-color="#9D58C7"></stop><stop offset="0.618" stop-color="#8F7DEC"></stop><stop offset="0.978" stop-color="#C1BAF4"></stop></linearGradient><clipPath id="clip0_230:73"><path fill="#fff" d="M0 0H1920V1080H0z"></path></clipPath></defs></svg><div class="relative overflow-auto bg-[#252525] p-3 text-sm sm:rounded-lg sm:text-base md:max-w-full lg:max-w-max xl:rounded-xl xl:p-4 rounded-xl sm:hidden"><div data-code-block="" data-line-numbers="true" data-lang="tsx"><pre data-line-numbers="true" data-lang="tsx" style="color: var(--base05);"><code><span class="codeblock-line" data-line-number="1"><span style="color: var(--base0E)">export</span> <span style="color: var(--base0E)">async</span> <span style="color: var(--base0D)">function</span> <span style="color: var(--base0D)">loader</span>({ <span style="color: var(--base08)">request</span> }) {
</span><span class="codeblock-line" data-line-number="2">  <span style="color: var(--base0E)">return</span> <span style="color: var(--base0D)">getProjects</span>();
</span><span class="codeblock-line" data-line-number="3">}
</span><span class="codeblock-line" data-line-number="4">
</span><span class="codeblock-line" data-line-number="5"><span style="color: var(--base0E)">export</span> <span style="color: var(--base0E)">async</span> <span style="color: var(--base0D)">function</span> <span style="color: var(--base0D)">action</span>({ <span style="color: var(--base08)">request</span> }) {
</span><span class="codeblock-line" data-line-number="6">  <span style="color: var(--base0A)">const</span> <span style="color: var(--base08)">form</span> <span style="color: var(--base0E)">=</span> <span style="color: var(--base0E)">await</span> <span style="color: var(--base08)">request</span>.<span style="color: var(--base0D)">formData</span>();
</span><span class="codeblock-line" data-line-number="7">  <span style="color: var(--base0E)">return</span> <span style="color: var(--base0D)">createProject</span>({
</span><span class="codeblock-line" data-line-number="8">    title: <span style="color: var(--base08)">form</span>.<span style="color: var(--base0D)">get</span>("<span style="color: var(--base0B)">title</span>"),
</span><span class="codeblock-line" data-line-number="9">  });
</span><span class="codeblock-line" data-line-number="10">}
</span><span class="codeblock-line" data-line-number="11">
</span><span class="codeblock-line" data-line-number="12"><span style="color: var(--base0E)">export</span> <span style="color: var(--base0E)">default</span> <span style="color: var(--base0D)">function</span> <span style="color: var(--base0D)">Projects</span>() {
</span><span class="codeblock-line" data-line-number="13">  <span style="color: var(--base0A)">const</span> <span style="color: var(--base08)">projects</span> <span style="color: var(--base0E)">=</span> <span style="color: var(--base0D)">useLoaderData</span>();
</span><span class="codeblock-line" data-line-number="14">  <span style="color: var(--base0A)">const</span> { <span style="color: var(--base08)">state</span> } <span style="color: var(--base0E)">=</span> <span style="color: var(--base0D)">useNavigation</span>();
</span><span class="codeblock-line" data-line-number="15">  <span style="color: var(--base0A)">const</span> <span style="color: var(--base08)">busy</span> <span style="color: var(--base0E)">=</span> <span style="color: var(--base08)">state</span> <span style="color: var(--base0E)">===</span> "<span style="color: var(--base0B)">submitting</span>";
</span><span class="codeblock-line" data-line-number="16">
</span><span class="codeblock-line" data-line-number="17">  <span style="color: var(--base0E)">return</span> (
</span><span class="codeblock-line" data-line-number="18">    &lt;<span style="color: var(--base08)">div</span>&gt;
</span><span class="codeblock-line" data-line-number="19">      <span style="color: var(--base0F)">{</span><span style="color: var(--base08)">projects</span>.<span style="color: var(--base0D)">map</span>((<span style="color: var(--base08)">project</span>) <span style="color: var(--base0D)">=&gt;</span> (
</span><span class="codeblock-line" data-line-number="20">        &lt;<span style="color: var(--base0A)">Link</span> <span style="color: var(--base0D)">to</span><span style="color: var(--base0E)">=</span><span style="color: var(--base0F)">{</span><span style="color: var(--base08)">project</span>.<span style="color: var(--base08)">slug</span><span style="color: var(--base0F)">}</span>&gt;
</span><span class="codeblock-line" data-line-number="21">          <span style="color: var(--base0F)">{</span><span style="color: var(--base08)">project</span>.<span style="color: var(--base08)">title</span><span style="color: var(--base0F)">}</span>
</span><span class="codeblock-line" data-line-number="22">        &lt;/<span style="color: var(--base0A)">Link</span>&gt;
</span><span class="codeblock-line" data-line-number="23">      ))<span style="color: var(--base0F)">}</span>
</span><span class="codeblock-line" data-line-number="24">
</span><span class="codeblock-line" data-line-number="25">      &lt;<span style="color: var(--base0A)">Form</span> <span style="color: var(--base0D)">method</span><span style="color: var(--base0E)">=</span>"<span style="color: var(--base0B)">post</span>"&gt;
</span><span class="codeblock-line" data-line-number="26">        &lt;<span style="color: var(--base08)">input</span> <span style="color: var(--base0D)">name</span><span style="color: var(--base0E)">=</span>"<span style="color: var(--base0B)">title</span>" /&gt;
</span><span class="codeblock-line" data-line-number="27">        &lt;<span style="color: var(--base08)">button</span> <span style="color: var(--base0D)">type</span><span style="color: var(--base0E)">=</span>"<span style="color: var(--base0B)">submit</span>" <span style="color: var(--base0D)">disabled</span><span style="color: var(--base0E)">=</span><span style="color: var(--base0F)">{</span><span style="color: var(--base08)">busy</span><span style="color: var(--base0F)">}</span>&gt;
</span><span class="codeblock-line" data-line-number="28">          <span style="color: var(--base0F)">{</span><span style="color: var(--base08)">busy</span>
</span><span class="codeblock-line" data-line-number="29">            <span style="color: var(--base0E)">?</span> "<span style="color: var(--base0B)">Creating...</span>"
</span><span class="codeblock-line" data-line-number="30">            <span style="color: var(--base0E)">:</span> "<span style="color: var(--base0B)">Create New Project</span>"<span style="color: var(--base0F)">}</span>
</span><span class="codeblock-line" data-line-number="31">        &lt;/<span style="color: var(--base08)">button</span>&gt;
</span><span class="codeblock-line" data-line-number="32">      &lt;/<span style="color: var(--base0A)">Form</span>&gt;
</span><span class="codeblock-line" data-line-number="33">    &lt;/<span style="color: var(--base08)">div</span>&gt;
</span><span class="codeblock-line" data-line-number="34">  );
</span><span class="codeblock-line" data-line-number="35">}
</span></code></pre></div></div><div class="relative overflow-auto bg-[#252525] p-3 text-sm sm:rounded-lg sm:text-base md:max-w-full lg:max-w-max xl:rounded-xl xl:p-4 hidden sm:block"><div data-code-block="" data-line-numbers="true" data-lang="tsx"><pre data-line-numbers="true" data-lang="tsx" style="color: var(--base05);"><code><span class="codeblock-line" data-line-number="1"><span style="color: var(--base0E)">export</span> <span style="color: var(--base0E)">async</span> <span style="color: var(--base0D)">function</span> <span style="color: var(--base0D)">loader</span>({ <span style="color: var(--base08)">request</span> }) {
</span><span class="codeblock-line" data-line-number="2">  <span style="color: var(--base0E)">return</span> <span style="color: var(--base0D)">getProjects</span>();
</span><span class="codeblock-line" data-line-number="3">}
</span><span class="codeblock-line" data-line-number="4">
</span><span class="codeblock-line" data-line-number="5"><span style="color: var(--base0E)">export</span> <span style="color: var(--base0E)">async</span> <span style="color: var(--base0D)">function</span> <span style="color: var(--base0D)">action</span>({ <span style="color: var(--base08)">request</span> }) {
</span><span class="codeblock-line" data-line-number="6">  <span style="color: var(--base0A)">const</span> <span style="color: var(--base08)">form</span> <span style="color: var(--base0E)">=</span> <span style="color: var(--base0E)">await</span> <span style="color: var(--base08)">request</span>.<span style="color: var(--base0D)">formData</span>();
</span><span class="codeblock-line" data-line-number="7">  <span style="color: var(--base0E)">return</span> <span style="color: var(--base0D)">createProject</span>({ title: <span style="color: var(--base08)">form</span>.<span style="color: var(--base0D)">get</span>("<span style="color: var(--base0B)">title</span>") });
</span><span class="codeblock-line" data-line-number="8">}
</span><span class="codeblock-line" data-line-number="9">
</span><span class="codeblock-line" data-line-number="10"><span style="color: var(--base0E)">export</span> <span style="color: var(--base0E)">default</span> <span style="color: var(--base0D)">function</span> <span style="color: var(--base0D)">Projects</span>() {
</span><span class="codeblock-line" data-line-number="11">  <span style="color: var(--base0A)">const</span> <span style="color: var(--base08)">projects</span> <span style="color: var(--base0E)">=</span> <span style="color: var(--base0D)">useLoaderData</span>();
</span><span class="codeblock-line" data-line-number="12">  <span style="color: var(--base0A)">const</span> { <span style="color: var(--base08)">state</span> } <span style="color: var(--base0E)">=</span> <span style="color: var(--base0D)">useNavigation</span>();
</span><span class="codeblock-line" data-line-number="13">  <span style="color: var(--base0A)">const</span> <span style="color: var(--base08)">busy</span> <span style="color: var(--base0E)">=</span> <span style="color: var(--base08)">state</span> <span style="color: var(--base0E)">===</span> "<span style="color: var(--base0B)">submitting</span>";
</span><span class="codeblock-line" data-line-number="14">
</span><span class="codeblock-line" data-line-number="15">  <span style="color: var(--base0E)">return</span> (
</span><span class="codeblock-line" data-line-number="16">    &lt;<span style="color: var(--base08)">div</span>&gt;
</span><span class="codeblock-line" data-line-number="17">      <span style="color: var(--base0F)">{</span><span style="color: var(--base08)">projects</span>.<span style="color: var(--base0D)">map</span>((<span style="color: var(--base08)">project</span>) <span style="color: var(--base0D)">=&gt;</span> (
</span><span class="codeblock-line" data-line-number="18">        &lt;<span style="color: var(--base0A)">Link</span> <span style="color: var(--base0D)">to</span><span style="color: var(--base0E)">=</span><span style="color: var(--base0F)">{</span><span style="color: var(--base08)">project</span>.<span style="color: var(--base08)">slug</span><span style="color: var(--base0F)">}</span>&gt;<span style="color: var(--base0F)">{</span><span style="color: var(--base08)">project</span>.<span style="color: var(--base08)">title</span><span style="color: var(--base0F)">}</span>&lt;/<span style="color: var(--base0A)">Link</span>&gt;
</span><span class="codeblock-line" data-line-number="19">      ))<span style="color: var(--base0F)">}</span>
</span><span class="codeblock-line" data-line-number="20">
</span><span class="codeblock-line" data-line-number="21">      &lt;<span style="color: var(--base0A)">Form</span> <span style="color: var(--base0D)">method</span><span style="color: var(--base0E)">=</span>"<span style="color: var(--base0B)">post</span>"&gt;
</span><span class="codeblock-line" data-line-number="22">        &lt;<span style="color: var(--base08)">input</span> <span style="color: var(--base0D)">name</span><span style="color: var(--base0E)">=</span>"<span style="color: var(--base0B)">title</span>" /&gt;
</span><span class="codeblock-line" data-line-number="23">        &lt;<span style="color: var(--base08)">button</span> <span style="color: var(--base0D)">type</span><span style="color: var(--base0E)">=</span>"<span style="color: var(--base0B)">submit</span>" <span style="color: var(--base0D)">disabled</span><span style="color: var(--base0E)">=</span><span style="color: var(--base0F)">{</span><span style="color: var(--base08)">busy</span><span style="color: var(--base0F)">}</span>&gt;
</span><span class="codeblock-line" data-line-number="24">          <span style="color: var(--base0F)">{</span><span style="color: var(--base08)">busy</span> <span style="color: var(--base0E)">?</span> "<span style="color: var(--base0B)">Creating...</span>" <span style="color: var(--base0E)">:</span> "<span style="color: var(--base0B)">Create New Project</span>"<span style="color: var(--base0F)">}</span>
</span><span class="codeblock-line" data-line-number="25">        &lt;/<span style="color: var(--base08)">button</span>&gt;
</span><span class="codeblock-line" data-line-number="26">      &lt;/<span style="color: var(--base0A)">Form</span>&gt;
</span><span class="codeblock-line" data-line-number="27">    &lt;/<span style="color: var(--base08)">div</span>&gt;
</span><span class="codeblock-line" data-line-number="28">  );
</span><span class="codeblock-line" data-line-number="29">}
</span></code></pre></div></div></div></section><div class="h-32"></div><section><h2 class="sr-only">Testimonials</h2><figure class="mx-auto max-w-xl p-6 sm:p-8"><div class="flex items-center justify-center gap-4 text-white"><div class="flex"><div class="h-12 w-12 relative z-10"><img src="/img/jenna.jpg" class="rounded-full object-cover" alt=""></div><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" height="40" width="40" role="presentation" class="relative -left-4 h-12 w-12 text-white"><title>Twitter Logo</title><path d="M20 0C8.95599 0 0 8.95599 0 20C0 31.044 8.95599 40 20 40C31.044 40 40 31.044 40 20C40 8.95599 31.044 0 20 0ZM29.1318 15.5939C29.1406 15.7907 29.1449 15.9885 29.1449 16.1871C29.1449 22.2531 24.5276 29.248 16.0837 29.2484C13.4912 29.2484 11.0788 28.4885 9.04724 27.1863C9.40643 27.2287 9.77203 27.2498 10.1422 27.2498C12.2931 27.2498 14.2725 26.5161 15.8438 25.2847C13.8342 25.2475 12.1399 23.9203 11.5552 22.0963C11.835 22.15 12.1228 22.1793 12.4179 22.1793C12.8369 22.1793 13.2428 22.1228 13.6285 22.0175C11.528 21.597 9.94568 19.7406 9.94568 17.5177C9.94568 17.4969 9.94568 17.4783 9.94629 17.4591C10.5649 17.803 11.2723 18.0099 12.0255 18.0331C10.7928 17.2107 9.9826 15.8047 9.9826 14.212C9.9826 13.371 10.21 12.583 10.6042 11.9046C12.868 14.6823 16.2512 16.5091 20.0665 16.701C19.9878 16.3647 19.9472 16.0144 19.9472 15.6543C19.9472 13.1201 22.0032 11.0641 24.5383 11.0641C25.8588 11.0641 27.0514 11.6223 27.8891 12.5146C28.9349 12.3083 29.917 11.9263 30.8041 11.4005C30.4608 12.4719 29.7333 13.371 28.7854 13.9395C29.7141 13.8284 30.5991 13.5822 31.4215 13.2166C30.8072 14.1373 30.0281 14.946 29.1318 15.5939Z" fill="currentColor"></path></svg></div><figcaption><a href="https://twitter.com/jjenzz/status/1459941582912827398" target="_blank" rel="noreferrer" class="block text-xl font-extrabold md:text-3xl" aria-label="Tweet from Jenna Smith">Jenna Smith</a><span class="sr-only">, </span><div class="text-lg uppercase">Radix UI</div></figcaption></div><div class="h-10"></div><blockquote class="text-center text-lg leading-6 md:text-xl">I've been waiting for something to encourage progressive enhancement in the React space *forever* and Remix truly is so much more. Proving we don't need to sacrifice React or choose SSG for a lightning fast, accessible UI, and the DX makes it all too easy 🤤</blockquote></figure><div class="h-10"></div><div class="mx-auto max-w-max"><div class="__carousel flex gap-6 overflow-x-scroll md:pb-4"><figure class="__slide w-[80vw] shrink-0 rounded-lg bg-gray-800 p-8 text-white sm:p-10 md:w-[43vw] xl:w-[30rem]"><div class="flex items-center justify-between"><div class="flex items-center gap-4"><div class="h-12 w-12"><img src="/img/jkup.jpg" class="rounded-full object-cover" alt=""></div><figcaption><a href="https://twitter.com/jkup/status/1456360115205033989" class="block text-xl font-extrabold md:text-xl" aria-label="Tweet from Jon Kuperman">@<!-- -->jkup</a><div class="text-sm lg:text-base">Cloudflare</div></figcaption></div><a href="https://twitter.com/jkup/status/1456360115205033989" class="block" aria-label="Tweet from Jon Kuperman" tabindex="-1"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" height="40" width="40" class="h-6 w-6" role="presentation"><title>Twitter Logo</title><path d="M20 0C8.95599 0 0 8.95599 0 20C0 31.044 8.95599 40 20 40C31.044 40 40 31.044 40 20C40 8.95599 31.044 0 20 0ZM29.1318 15.5939C29.1406 15.7907 29.1449 15.9885 29.1449 16.1871C29.1449 22.2531 24.5276 29.248 16.0837 29.2484C13.4912 29.2484 11.0788 28.4885 9.04724 27.1863C9.40643 27.2287 9.77203 27.2498 10.1422 27.2498C12.2931 27.2498 14.2725 26.5161 15.8438 25.2847C13.8342 25.2475 12.1399 23.9203 11.5552 22.0963C11.835 22.15 12.1228 22.1793 12.4179 22.1793C12.8369 22.1793 13.2428 22.1228 13.6285 22.0175C11.528 21.597 9.94568 19.7406 9.94568 17.5177C9.94568 17.4969 9.94568 17.4783 9.94629 17.4591C10.5649 17.803 11.2723 18.0099 12.0255 18.0331C10.7928 17.2107 9.9826 15.8047 9.9826 14.212C9.9826 13.371 10.21 12.583 10.6042 11.9046C12.868 14.6823 16.2512 16.5091 20.0665 16.701C19.9878 16.3647 19.9472 16.0144 19.9472 15.6543C19.9472 13.1201 22.0032 11.0641 24.5383 11.0641C25.8588 11.0641 27.0514 11.6223 27.8891 12.5146C28.9349 12.3083 29.917 11.9263 30.8041 11.4005C30.4608 12.4719 29.7333 13.371 28.7854 13.9395C29.7141 13.8284 30.5991 13.5822 31.4215 13.2166C30.8072 14.1373 30.0281 14.946 29.1318 15.5939Z" fill="currentColor"></path></svg></a></div><div class="h-6"></div><blockquote class="text-sm text-gray-200 xl:text-base">holy 💩 Remix is good</blockquote></figure><figure class="__slide w-[80vw] shrink-0 rounded-lg bg-gray-800 p-8 text-white sm:p-10 md:w-[43vw] xl:w-[30rem]"><div class="flex items-center justify-between"><div class="flex items-center gap-4"><div class="h-12 w-12"><img src="/img/aweary.jpg" class="rounded-full object-cover" alt=""></div><figcaption><a href="https://twitter.com/aweary/status/1456399484473200644" class="block text-xl font-extrabold md:text-xl" aria-label="Tweet from Brandon Dail">@<!-- -->aweary</a><div class="text-sm lg:text-base">Discord, prev React Core</div></figcaption></div><a href="https://twitter.com/aweary/status/1456399484473200644" class="block" aria-label="Tweet from Brandon Dail" tabindex="-1"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" height="40" width="40" class="h-6 w-6" role="presentation"><title>Twitter Logo</title><path d="M20 0C8.95599 0 0 8.95599 0 20C0 31.044 8.95599 40 20 40C31.044 40 40 31.044 40 20C40 8.95599 31.044 0 20 0ZM29.1318 15.5939C29.1406 15.7907 29.1449 15.9885 29.1449 16.1871C29.1449 22.2531 24.5276 29.248 16.0837 29.2484C13.4912 29.2484 11.0788 28.4885 9.04724 27.1863C9.40643 27.2287 9.77203 27.2498 10.1422 27.2498C12.2931 27.2498 14.2725 26.5161 15.8438 25.2847C13.8342 25.2475 12.1399 23.9203 11.5552 22.0963C11.835 22.15 12.1228 22.1793 12.4179 22.1793C12.8369 22.1793 13.2428 22.1228 13.6285 22.0175C11.528 21.597 9.94568 19.7406 9.94568 17.5177C9.94568 17.4969 9.94568 17.4783 9.94629 17.4591C10.5649 17.803 11.2723 18.0099 12.0255 18.0331C10.7928 17.2107 9.9826 15.8047 9.9826 14.212C9.9826 13.371 10.21 12.583 10.6042 11.9046C12.868 14.6823 16.2512 16.5091 20.0665 16.701C19.9878 16.3647 19.9472 16.0144 19.9472 15.6543C19.9472 13.1201 22.0032 11.0641 24.5383 11.0641C25.8588 11.0641 27.0514 11.6223 27.8891 12.5146C28.9349 12.3083 29.917 11.9263 30.8041 11.4005C30.4608 12.4719 29.7333 13.371 28.7854 13.9395C29.7141 13.8284 30.5991 13.5822 31.4215 13.2166C30.8072 14.1373 30.0281 14.946 29.1318 15.5939Z" fill="currentColor"></path></svg></a></div><div class="h-6"></div><blockquote class="text-sm text-gray-200 xl:text-base">I just rewrote my first Remix app on top of Cloudflare Workers and Supabase and it’s so damn good</blockquote></figure><figure class="__slide w-[80vw] shrink-0 rounded-lg bg-gray-800 p-8 text-white sm:p-10 md:w-[43vw] xl:w-[30rem]"><div class="flex items-center justify-between"><div class="flex items-center gap-4"><div class="h-12 w-12"><img src="/img/tiger.jpg" class="rounded-full object-cover" alt=""></div><figcaption><a href="https://twitter.com/TAbrodi/status/1459531154533634048" class="block text-xl font-extrabold md:text-xl" aria-label="Tweet from Tiger Abrodi">@<!-- -->TAbrodi</a><div class="text-sm lg:text-base">Software Developer</div></figcaption></div><a href="https://twitter.com/TAbrodi/status/1459531154533634048" class="block" aria-label="Tweet from Tiger Abrodi" tabindex="-1"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" height="40" width="40" class="h-6 w-6" role="presentation"><title>Twitter Logo</title><path d="M20 0C8.95599 0 0 8.95599 0 20C0 31.044 8.95599 40 20 40C31.044 40 40 31.044 40 20C40 8.95599 31.044 0 20 0ZM29.1318 15.5939C29.1406 15.7907 29.1449 15.9885 29.1449 16.1871C29.1449 22.2531 24.5276 29.248 16.0837 29.2484C13.4912 29.2484 11.0788 28.4885 9.04724 27.1863C9.40643 27.2287 9.77203 27.2498 10.1422 27.2498C12.2931 27.2498 14.2725 26.5161 15.8438 25.2847C13.8342 25.2475 12.1399 23.9203 11.5552 22.0963C11.835 22.15 12.1228 22.1793 12.4179 22.1793C12.8369 22.1793 13.2428 22.1228 13.6285 22.0175C11.528 21.597 9.94568 19.7406 9.94568 17.5177C9.94568 17.4969 9.94568 17.4783 9.94629 17.4591C10.5649 17.803 11.2723 18.0099 12.0255 18.0331C10.7928 17.2107 9.9826 15.8047 9.9826 14.212C9.9826 13.371 10.21 12.583 10.6042 11.9046C12.868 14.6823 16.2512 16.5091 20.0665 16.701C19.9878 16.3647 19.9472 16.0144 19.9472 15.6543C19.9472 13.1201 22.0032 11.0641 24.5383 11.0641C25.8588 11.0641 27.0514 11.6223 27.8891 12.5146C28.9349 12.3083 29.917 11.9263 30.8041 11.4005C30.4608 12.4719 29.7333 13.371 28.7854 13.9395C29.7141 13.8284 30.5991 13.5822 31.4215 13.2166C30.8072 14.1373 30.0281 14.946 29.1318 15.5939Z" fill="currentColor"></path></svg></a></div><div class="h-6"></div><blockquote class="text-sm text-gray-200 xl:text-base">My mind is still blown away with Remix! So easy and elegant 😩. I love how it also focuses on Accessibility (Progressive Enhancement...) 🤯, A few days ago I was like wazzup with remix, we got Next.js and Svelte 😴 ... and now I'm fired up like crazy 😂. This is so good 🤤</blockquote></figure><figure class="__slide w-[80vw] shrink-0 rounded-lg bg-gray-800 p-8 text-white sm:p-10 md:w-[43vw] xl:w-[30rem]"><div class="flex items-center justify-between"><div class="flex items-center gap-4"><div class="h-12 w-12"><img src="/img/sergio.jpg" class="rounded-full object-cover" alt=""></div><figcaption><a href="https://twitter.com/sergiodxa/status/1400503400802959361" class="block text-xl font-extrabold md:text-xl" aria-label="Tweet from Sergio Xalambrí">@<!-- -->sergiodxa</a><div class="text-sm lg:text-base">Daffy, prev Vercel</div></figcaption></div><a href="https://twitter.com/sergiodxa/status/1400503400802959361" class="block" aria-label="Tweet from Sergio Xalambrí" tabindex="-1"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" height="40" width="40" class="h-6 w-6" role="presentation"><title>Twitter Logo</title><path d="M20 0C8.95599 0 0 8.95599 0 20C0 31.044 8.95599 40 20 40C31.044 40 40 31.044 40 20C40 8.95599 31.044 0 20 0ZM29.1318 15.5939C29.1406 15.7907 29.1449 15.9885 29.1449 16.1871C29.1449 22.2531 24.5276 29.248 16.0837 29.2484C13.4912 29.2484 11.0788 28.4885 9.04724 27.1863C9.40643 27.2287 9.77203 27.2498 10.1422 27.2498C12.2931 27.2498 14.2725 26.5161 15.8438 25.2847C13.8342 25.2475 12.1399 23.9203 11.5552 22.0963C11.835 22.15 12.1228 22.1793 12.4179 22.1793C12.8369 22.1793 13.2428 22.1228 13.6285 22.0175C11.528 21.597 9.94568 19.7406 9.94568 17.5177C9.94568 17.4969 9.94568 17.4783 9.94629 17.4591C10.5649 17.803 11.2723 18.0099 12.0255 18.0331C10.7928 17.2107 9.9826 15.8047 9.9826 14.212C9.9826 13.371 10.21 12.583 10.6042 11.9046C12.868 14.6823 16.2512 16.5091 20.0665 16.701C19.9878 16.3647 19.9472 16.0144 19.9472 15.6543C19.9472 13.1201 22.0032 11.0641 24.5383 11.0641C25.8588 11.0641 27.0514 11.6223 27.8891 12.5146C28.9349 12.3083 29.917 11.9263 30.8041 11.4005C30.4608 12.4719 29.7333 13.371 28.7854 13.9395C29.7141 13.8284 30.5991 13.5822 31.4215 13.2166C30.8072 14.1373 30.0281 14.946 29.1318 15.5939Z" fill="currentColor"></path></svg></a></div><div class="h-6"></div><blockquote class="text-sm text-gray-200 xl:text-base">What’s really cool with Remix loaders is that you can do most of your data transformation and calculations there, like check if a list is empty, limit the number of records, only send specific attributes, so your React component just receives the data and renders it, no logic needed</blockquote></figure><figure class="__slide w-[80vw] shrink-0 rounded-lg bg-gray-800 p-8 text-white sm:p-10 md:w-[43vw] xl:w-[30rem]"><div class="flex items-center justify-between"><div class="flex items-center gap-4"><div class="h-12 w-12"><img src="/img/elrick.jpg" class="rounded-full object-cover" alt=""></div><figcaption><a href="https://twitter.com/elrickvm/status/1458918740918251524" class="block text-xl font-extrabold md:text-xl" aria-label="Tweet from Elrick Ryan">@<!-- -->elrickvm</a><div class="text-sm lg:text-base">Fullstack Dev, Frontside</div></figcaption></div><a href="https://twitter.com/elrickvm/status/1458918740918251524" class="block" aria-label="Tweet from Elrick Ryan" tabindex="-1"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" height="40" width="40" class="h-6 w-6" role="presentation"><title>Twitter Logo</title><path d="M20 0C8.95599 0 0 8.95599 0 20C0 31.044 8.95599 40 20 40C31.044 40 40 31.044 40 20C40 8.95599 31.044 0 20 0ZM29.1318 15.5939C29.1406 15.7907 29.1449 15.9885 29.1449 16.1871C29.1449 22.2531 24.5276 29.248 16.0837 29.2484C13.4912 29.2484 11.0788 28.4885 9.04724 27.1863C9.40643 27.2287 9.77203 27.2498 10.1422 27.2498C12.2931 27.2498 14.2725 26.5161 15.8438 25.2847C13.8342 25.2475 12.1399 23.9203 11.5552 22.0963C11.835 22.15 12.1228 22.1793 12.4179 22.1793C12.8369 22.1793 13.2428 22.1228 13.6285 22.0175C11.528 21.597 9.94568 19.7406 9.94568 17.5177C9.94568 17.4969 9.94568 17.4783 9.94629 17.4591C10.5649 17.803 11.2723 18.0099 12.0255 18.0331C10.7928 17.2107 9.9826 15.8047 9.9826 14.212C9.9826 13.371 10.21 12.583 10.6042 11.9046C12.868 14.6823 16.2512 16.5091 20.0665 16.701C19.9878 16.3647 19.9472 16.0144 19.9472 15.6543C19.9472 13.1201 22.0032 11.0641 24.5383 11.0641C25.8588 11.0641 27.0514 11.6223 27.8891 12.5146C28.9349 12.3083 29.917 11.9263 30.8041 11.4005C30.4608 12.4719 29.7333 13.371 28.7854 13.9395C29.7141 13.8284 30.5991 13.5822 31.4215 13.2166C30.8072 14.1373 30.0281 14.946 29.1318 15.5939Z" fill="currentColor"></path></svg></a></div><div class="h-6"></div><blockquote class="text-sm text-gray-200 xl:text-base">Remix is going to put developers on the Hot Path to build accessible, scaleable, and performant apps, that have stellar user experiences and amazing developer ergonomics. It's not only going to be a win for developers, but also a big win for the end-users!</blockquote></figure><figure class="__slide w-[80vw] shrink-0 rounded-lg bg-gray-800 p-8 text-white sm:p-10 md:w-[43vw] xl:w-[30rem]"><div class="flex items-center justify-between"><div class="flex items-center gap-4"><div class="h-12 w-12"><img src="/img/tom.jpg" class="rounded-full object-cover" alt=""></div><figcaption><a href="https://twitter.com/theflyingcoder1/status/1456407168291278851" class="block text-xl font-extrabold md:text-xl" aria-label="Tweet from Tom Rowe">@<!-- -->theflyingcoder1</a><div class="text-sm lg:text-base">Fullstack Developer</div></figcaption></div><a href="https://twitter.com/theflyingcoder1/status/1456407168291278851" class="block" aria-label="Tweet from Tom Rowe" tabindex="-1"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" height="40" width="40" class="h-6 w-6" role="presentation"><title>Twitter Logo</title><path d="M20 0C8.95599 0 0 8.95599 0 20C0 31.044 8.95599 40 20 40C31.044 40 40 31.044 40 20C40 8.95599 31.044 0 20 0ZM29.1318 15.5939C29.1406 15.7907 29.1449 15.9885 29.1449 16.1871C29.1449 22.2531 24.5276 29.248 16.0837 29.2484C13.4912 29.2484 11.0788 28.4885 9.04724 27.1863C9.40643 27.2287 9.77203 27.2498 10.1422 27.2498C12.2931 27.2498 14.2725 26.5161 15.8438 25.2847C13.8342 25.2475 12.1399 23.9203 11.5552 22.0963C11.835 22.15 12.1228 22.1793 12.4179 22.1793C12.8369 22.1793 13.2428 22.1228 13.6285 22.0175C11.528 21.597 9.94568 19.7406 9.94568 17.5177C9.94568 17.4969 9.94568 17.4783 9.94629 17.4591C10.5649 17.803 11.2723 18.0099 12.0255 18.0331C10.7928 17.2107 9.9826 15.8047 9.9826 14.212C9.9826 13.371 10.21 12.583 10.6042 11.9046C12.868 14.6823 16.2512 16.5091 20.0665 16.701C19.9878 16.3647 19.9472 16.0144 19.9472 15.6543C19.9472 13.1201 22.0032 11.0641 24.5383 11.0641C25.8588 11.0641 27.0514 11.6223 27.8891 12.5146C28.9349 12.3083 29.917 11.9263 30.8041 11.4005C30.4608 12.4719 29.7333 13.371 28.7854 13.9395C29.7141 13.8284 30.5991 13.5822 31.4215 13.2166C30.8072 14.1373 30.0281 14.946 29.1318 15.5939Z" fill="currentColor"></path></svg></a></div><div class="h-6"></div><blockquote class="text-sm text-gray-200 xl:text-base">In my opinion @remix_run will be game changer for corporate teams hesitant to adopt full stack JavaScript. The core concepts are so intuitive you can pick it up in a day, and it will even integrate into your existing stack.</blockquote></figure><figure class="__slide w-[80vw] shrink-0 rounded-lg bg-gray-800 p-8 text-white sm:p-10 md:w-[43vw] xl:w-[30rem]"><div class="flex items-center justify-between"><div class="flex items-center gap-4"><div class="h-12 w-12"><img src="/img/sophia.jpg" class="rounded-full object-cover" alt=""></div><figcaption><a href="https://twitter.com/wisecobbler/status/1388174702900772868" class="block text-xl font-extrabold md:text-xl" aria-label="Tweet from Sophia Shoemaker">@<!-- -->wisecobbler</a><div class="text-sm lg:text-base">Software Engineer, Box</div></figcaption></div><a href="https://twitter.com/wisecobbler/status/1388174702900772868" class="block" aria-label="Tweet from Sophia Shoemaker" tabindex="-1"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" height="40" width="40" class="h-6 w-6" role="presentation"><title>Twitter Logo</title><path d="M20 0C8.95599 0 0 8.95599 0 20C0 31.044 8.95599 40 20 40C31.044 40 40 31.044 40 20C40 8.95599 31.044 0 20 0ZM29.1318 15.5939C29.1406 15.7907 29.1449 15.9885 29.1449 16.1871C29.1449 22.2531 24.5276 29.248 16.0837 29.2484C13.4912 29.2484 11.0788 28.4885 9.04724 27.1863C9.40643 27.2287 9.77203 27.2498 10.1422 27.2498C12.2931 27.2498 14.2725 26.5161 15.8438 25.2847C13.8342 25.2475 12.1399 23.9203 11.5552 22.0963C11.835 22.15 12.1228 22.1793 12.4179 22.1793C12.8369 22.1793 13.2428 22.1228 13.6285 22.0175C11.528 21.597 9.94568 19.7406 9.94568 17.5177C9.94568 17.4969 9.94568 17.4783 9.94629 17.4591C10.5649 17.803 11.2723 18.0099 12.0255 18.0331C10.7928 17.2107 9.9826 15.8047 9.9826 14.212C9.9826 13.371 10.21 12.583 10.6042 11.9046C12.868 14.6823 16.2512 16.5091 20.0665 16.701C19.9878 16.3647 19.9472 16.0144 19.9472 15.6543C19.9472 13.1201 22.0032 11.0641 24.5383 11.0641C25.8588 11.0641 27.0514 11.6223 27.8891 12.5146C28.9349 12.3083 29.917 11.9263 30.8041 11.4005C30.4608 12.4719 29.7333 13.371 28.7854 13.9395C29.7141 13.8284 30.5991 13.5822 31.4215 13.2166C30.8072 14.1373 30.0281 14.946 29.1318 15.5939Z" fill="currentColor"></path></svg></a></div><div class="h-6"></div><blockquote class="text-sm text-gray-200 xl:text-base">I love what @mjackson and @ryanflorence are doing with Remix! Deploying to AWS Lambda in under 30 seconds 🤯</blockquote></figure><figure class="__slide w-[80vw] shrink-0 rounded-lg bg-gray-800 p-8 text-white sm:p-10 md:w-[43vw] xl:w-[30rem]"><div class="flex items-center justify-between"><div class="flex items-center gap-4"><div class="h-12 w-12"><img src="/img/jens.jpg" class="rounded-full object-cover" alt=""></div><figcaption><a href="https://twitter.com/meindertsmajens/status/1454393707604680711" class="block text-xl font-extrabold md:text-xl" aria-label="Tweet from Jens Meindertsma">@<!-- -->meindertsmajens</a><div class="text-sm lg:text-base">Web Developer</div></figcaption></div><a href="https://twitter.com/meindertsmajens/status/1454393707604680711" class="block" aria-label="Tweet from Jens Meindertsma" tabindex="-1"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" height="40" width="40" class="h-6 w-6" role="presentation"><title>Twitter Logo</title><path d="M20 0C8.95599 0 0 8.95599 0 20C0 31.044 8.95599 40 20 40C31.044 40 40 31.044 40 20C40 8.95599 31.044 0 20 0ZM29.1318 15.5939C29.1406 15.7907 29.1449 15.9885 29.1449 16.1871C29.1449 22.2531 24.5276 29.248 16.0837 29.2484C13.4912 29.2484 11.0788 28.4885 9.04724 27.1863C9.40643 27.2287 9.77203 27.2498 10.1422 27.2498C12.2931 27.2498 14.2725 26.5161 15.8438 25.2847C13.8342 25.2475 12.1399 23.9203 11.5552 22.0963C11.835 22.15 12.1228 22.1793 12.4179 22.1793C12.8369 22.1793 13.2428 22.1228 13.6285 22.0175C11.528 21.597 9.94568 19.7406 9.94568 17.5177C9.94568 17.4969 9.94568 17.4783 9.94629 17.4591C10.5649 17.803 11.2723 18.0099 12.0255 18.0331C10.7928 17.2107 9.9826 15.8047 9.9826 14.212C9.9826 13.371 10.21 12.583 10.6042 11.9046C12.868 14.6823 16.2512 16.5091 20.0665 16.701C19.9878 16.3647 19.9472 16.0144 19.9472 15.6543C19.9472 13.1201 22.0032 11.0641 24.5383 11.0641C25.8588 11.0641 27.0514 11.6223 27.8891 12.5146C28.9349 12.3083 29.917 11.9263 30.8041 11.4005C30.4608 12.4719 29.7333 13.371 28.7854 13.9395C29.7141 13.8284 30.5991 13.5822 31.4215 13.2166C30.8072 14.1373 30.0281 14.946 29.1318 15.5939Z" fill="currentColor"></path></svg></a></div><div class="h-6"></div><blockquote class="text-sm text-gray-200 xl:text-base">Building with @remix_run has been awesome so far. Having used Next.js for applications for years, the nested layouts are a wonderful feature. I also haven't learned this much about the web in years.</blockquote></figure><figure class="__slide w-[80vw] shrink-0 rounded-lg bg-gray-800 p-8 text-white sm:p-10 md:w-[43vw] xl:w-[30rem]"><div class="flex items-center justify-between"><div class="flex items-center gap-4"><div class="h-12 w-12"><img src="/img/cammchenry.jpg" class="rounded-full object-cover" alt=""></div><figcaption><a href="https://twitter.com/cammchenry/status/1447267585456812039" class="block text-xl font-extrabold md:text-xl" aria-label="Tweet from Cameron McHenry">@<!-- -->cammchenry</a><div class="text-sm lg:text-base">Web Developer</div></figcaption></div><a href="https://twitter.com/cammchenry/status/1447267585456812039" class="block" aria-label="Tweet from Cameron McHenry" tabindex="-1"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" height="40" width="40" class="h-6 w-6" role="presentation"><title>Twitter Logo</title><path d="M20 0C8.95599 0 0 8.95599 0 20C0 31.044 8.95599 40 20 40C31.044 40 40 31.044 40 20C40 8.95599 31.044 0 20 0ZM29.1318 15.5939C29.1406 15.7907 29.1449 15.9885 29.1449 16.1871C29.1449 22.2531 24.5276 29.248 16.0837 29.2484C13.4912 29.2484 11.0788 28.4885 9.04724 27.1863C9.40643 27.2287 9.77203 27.2498 10.1422 27.2498C12.2931 27.2498 14.2725 26.5161 15.8438 25.2847C13.8342 25.2475 12.1399 23.9203 11.5552 22.0963C11.835 22.15 12.1228 22.1793 12.4179 22.1793C12.8369 22.1793 13.2428 22.1228 13.6285 22.0175C11.528 21.597 9.94568 19.7406 9.94568 17.5177C9.94568 17.4969 9.94568 17.4783 9.94629 17.4591C10.5649 17.803 11.2723 18.0099 12.0255 18.0331C10.7928 17.2107 9.9826 15.8047 9.9826 14.212C9.9826 13.371 10.21 12.583 10.6042 11.9046C12.868 14.6823 16.2512 16.5091 20.0665 16.701C19.9878 16.3647 19.9472 16.0144 19.9472 15.6543C19.9472 13.1201 22.0032 11.0641 24.5383 11.0641C25.8588 11.0641 27.0514 11.6223 27.8891 12.5146C28.9349 12.3083 29.917 11.9263 30.8041 11.4005C30.4608 12.4719 29.7333 13.371 28.7854 13.9395C29.7141 13.8284 30.5991 13.5822 31.4215 13.2166C30.8072 14.1373 30.0281 14.946 29.1318 15.5939Z" fill="currentColor"></path></svg></a></div><div class="h-6"></div><blockquote class="text-sm text-gray-200 xl:text-base">I love using @remix_run for my website.  Remix has improved my productivity as a front-end developer by empowering me to seamlessly switch between front-end and back-end code.</blockquote></figure><figure class="__slide w-[80vw] shrink-0 rounded-lg bg-gray-800 p-8 text-white sm:p-10 md:w-[43vw] xl:w-[30rem]"><div class="flex items-center justify-between"><div class="flex items-center gap-4"><div class="h-12 w-12"><img src="/img/airuyi.jpg" class="rounded-full object-cover" alt=""></div><figcaption><a href="https://twitter.com/airuyi/status/1456438853804298244" class="block text-xl font-extrabold md:text-xl" aria-label="Tweet from Fergus Meiklejohn">@<!-- -->airuyi</a><div class="text-sm lg:text-base">App Developer</div></figcaption></div><a href="https://twitter.com/airuyi/status/1456438853804298244" class="block" aria-label="Tweet from Fergus Meiklejohn" tabindex="-1"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" height="40" width="40" class="h-6 w-6" role="presentation"><title>Twitter Logo</title><path d="M20 0C8.95599 0 0 8.95599 0 20C0 31.044 8.95599 40 20 40C31.044 40 40 31.044 40 20C40 8.95599 31.044 0 20 0ZM29.1318 15.5939C29.1406 15.7907 29.1449 15.9885 29.1449 16.1871C29.1449 22.2531 24.5276 29.248 16.0837 29.2484C13.4912 29.2484 11.0788 28.4885 9.04724 27.1863C9.40643 27.2287 9.77203 27.2498 10.1422 27.2498C12.2931 27.2498 14.2725 26.5161 15.8438 25.2847C13.8342 25.2475 12.1399 23.9203 11.5552 22.0963C11.835 22.15 12.1228 22.1793 12.4179 22.1793C12.8369 22.1793 13.2428 22.1228 13.6285 22.0175C11.528 21.597 9.94568 19.7406 9.94568 17.5177C9.94568 17.4969 9.94568 17.4783 9.94629 17.4591C10.5649 17.803 11.2723 18.0099 12.0255 18.0331C10.7928 17.2107 9.9826 15.8047 9.9826 14.212C9.9826 13.371 10.21 12.583 10.6042 11.9046C12.868 14.6823 16.2512 16.5091 20.0665 16.701C19.9878 16.3647 19.9472 16.0144 19.9472 15.6543C19.9472 13.1201 22.0032 11.0641 24.5383 11.0641C25.8588 11.0641 27.0514 11.6223 27.8891 12.5146C28.9349 12.3083 29.917 11.9263 30.8041 11.4005C30.4608 12.4719 29.7333 13.371 28.7854 13.9395C29.7141 13.8284 30.5991 13.5822 31.4215 13.2166C30.8072 14.1373 30.0281 14.946 29.1318 15.5939Z" fill="currentColor"></path></svg></a></div><div class="h-6"></div><blockquote class="text-sm text-gray-200 xl:text-base">If you're doing #webdevelopment you should check out Remix 🔥 It's a new (old) paradigm for web dev, which simplifies our code, especially state management😅, speeds up our page loads, and gives us a mental model and framework we can rely on to create our best work</blockquote></figure></div></div></section><div class="h-32"></div><div><img src="/wave.png" alt="" class="absolute -left-full"><img src="/loading.gif" alt="" class="absolute -left-full"><section class="mx-auto max-w-5xl p-6 md:p-10"><h2 class="text-4xl font-black text-white sm:text-5xl md:text-6xl">While you were <span class="text-red-brand">waiting</span> for your static site to build,<!-- --> <span class="text-blue-brand">distributed web</span> <!-- -->infrastructure got really good.<!-- --> <span class="text-pink-brand">Break through the static.</span></h2><div class="h-6"></div><p class="hyphen-manual mt-2 text-lg md:pr-52 md:text-xl lg:pr-72">Remix is a seamless server and browser runtime that provides snappy page loads and instant transitions by leveraging distributed systems and native browser features instead of clunky static builds. Built on the Web Fetch API (instead of Node) <b class="text-white">it can run anywhere</b>. It already runs natively on Cloudflare Workers, and of course supports serverless and traditional Node.js environments, so you can come as you are.</p><div class="h-6"></div><p class="hyphen-manual mt-2 text-lg md:pr-52 md:text-xl lg:pr-72">Page speed is only one aspect of our true goal though. We're after<!-- --> <b class="text-white">better user experiences</b>. As you’ve pushed the boundaries of the web, your tools haven’t caught up to your appetite.<!-- --> <b class="text-white">Remix is ready</b> to serve you from the initial request to the fanciest UX your designers can think up. Check it out 👀</p></section><div class="h-60"></div><section><div class="mx-auto max-w-6xl px-6 text-5xl font-black text-white md:px-12 md:text-[88px] md:leading-[96px]"><h2>Remix has a cheat code:<br><span class="text-yellow-brand">Nested Routes.</span></h2><span class="font-mono text-gray-700" aria-hidden="true"><span class="">↑</span><span class="">↑</span><span class="">↓</span><span class="">↓</span><span class="">←</span><span class="">→</span><span class="">←</span><span class="">→</span><span class="">B</span><span class="">A</span><span class="">↵</span></span></div><div class="h-[25vh]"></div><div style="min-height:275vh"><p tabindex="0" class="min-h-[50vh] px-6 pb-12 text-4xl font-black text-gray-100 md:mx-auto md:max-w-3xl md:text-6xl">Websites usually have levels of navigation that control child views.</p><p tabindex="0" class="min-h-[50vh] px-6 pb-12 text-4xl font-black text-gray-100 md:mx-auto md:max-w-3xl md:text-6xl">Not only are these components pretty much always coupled to URL segments...</p><p tabindex="0" class="min-h-[50vh] px-6 pb-12 text-4xl font-black text-gray-100 md:mx-auto md:max-w-3xl md:text-6xl">...they’re also the semantic boundary of data loading and code splitting.</p><p aria-hidden="true" class="min-h-[50vh] px-6 pb-12 text-4xl font-black text-gray-100 md:mx-auto md:max-w-3xl md:text-6xl">Hover or tap the buttons to see how they’re all related</p><div class="pb-2 text-center text-4xl md:text-7xl animate-bounce" aria-hidden="true">👇</div><div class="text-center"><button class="m-2 rounded-full bg-opacity-70 px-6 py-2 font-mono text-[12px] font-bold leading-6 md:text-base opacity-80 bg-blue-900 text-blue-300">&lt;Root&gt;</button><button class="m-2 rounded-full bg-opacity-70 px-6 py-2 font-mono text-[12px] font-bold leading-6 md:text-base opacity-80 bg-aqua-900 text-aqua-brand">&lt;Sales&gt;</button><button class="m-2 rounded-full bg-opacity-70 px-6 py-2 font-mono text-[12px] font-bold leading-6 md:text-base opacity-80 bg-yellow-900 text-yellow-brand">&lt;Invoices&gt;</button><button class="m-2 rounded-full bg-opacity-70 px-6 py-2 font-mono text-[12px] font-bold leading-6 md:text-base opacity-80 bg-red-900 text-red-300">&lt;Invoice id=<!-- -->{id}<!-- -->&gt;</button></div><div class="h-4"></div><div class="sticky bottom-0 md:bottom-[-14vh]"><div class="relative mx-2 max-h-[75vh] select-none overflow-hidden rounded bg-gray-700 shadow-md md:mx-4 md:rounded-lg lg:mx-auto lg:max-w-4xl"><div class="flex items-center justify-center px-1 pb-0 pt-1 md:px-2 md:pt-2"><div class="relative flex w-2/3 items-center rounded-md bg-gray-600 px-2 py-1 text-gray-100 md:px-3 md:py-1"><span class="text-[length:10px] md:text-sm">example.com/sales/invoices/102000</span><svg xmlns="http://www.w3.org/2000/svg" class="absolute right-1 h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 7 7"><path fill="#fff" fill-opacity="0.8" d="M5.088 4.004l-.125.126.125.125.126-.125-.126-.126zm-1.073-.822l.948.948.251-.252-.948-.948-.251.252zm1.2.948l.947-.948-.251-.252-.948.948.251.252z"></path><path stroke="#fff" stroke-linecap="round" stroke-opacity="0.8" stroke-width="0.355" d="M4.26 4.966a1.659 1.659 0 11.829-1.436"></path></svg></div><div class="absolute left-1 flex gap-1 p-2 md:left-2 md:gap-2"><div class="h-2 w-2 rounded-full bg-gray-400 md:h-3 md:w-3"></div><div class="h-2 w-2 rounded-full bg-gray-400 md:h-3 md:w-3"></div><div class="h-2 w-2 rounded-full bg-gray-400 md:h-3 md:w-3"></div></div></div><div class="px-2 pb-2 pt-1 md:px-4 md:pb-4 md:pt-2"><div class="relative flex overflow-hidden rounded bg-white text-gray-600 md:rounded-lg undefined"><div class="border-r border-gray-100 bg-gray-50"><div class="p-[5.7px] lg:p-4"><div class="flex items-center text-green-700"><svg class="relative top-[1px] h-[8.5px] w-[8.5px] md:h-[18px] md:w-[18px]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M12 3a9 9 0 000 18h4.5c1.398 0 2.097 0 2.648-.228a3 3 0 001.624-1.624C21 18.597 21 17.898 21 16.5V12a9 9 0 00-9-9zm-4 8a1 1 0 011-1h6a1 1 0 110 2H9a1 1 0 01-1-1zm3 4a1 1 0 011-1h3a1 1 0 110 2h-3a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg><div class="w-[1px] md:w-1"></div><div class="text-[length:8px] font-extrabold md:text-base">Fakebooks</div></div><div class="h-2 md:h-7"></div><div class="font-bold text-gray-800"><div class="my-[1.4px] px-[2.8px] py-[1.4px] pr-4 text-[length:7px] md:my-1 md:px-2 md:py-1 md:pr-16 md:text-[length:10px] lg:text-[length:14px] undefined">Dashboard</div><div class="my-[1.4px] px-[2.8px] py-[1.4px] pr-4 text-[length:7px] md:my-1 md:px-2 md:py-1 md:pr-16 md:text-[length:10px] lg:text-[length:14px] undefined">Accounts</div><div class="my-[1.4px] px-[2.8px] py-[1.4px] pr-4 text-[length:7px] md:my-1 md:px-2 md:py-1 md:pr-16 md:text-[length:10px] lg:text-[length:14px] rounded bg-gray-100 md:rounded-md">Sales</div><div class="my-[1.4px] px-[2.8px] py-[1.4px] pr-4 text-[length:7px] md:my-1 md:px-2 md:py-1 md:pr-16 md:text-[length:10px] lg:text-[length:14px] undefined">Expenses</div><div class="my-[1.4px] px-[2.8px] py-[1.4px] pr-4 text-[length:7px] md:my-1 md:px-2 md:py-1 md:pr-16 md:text-[length:10px] lg:text-[length:14px] undefined">Reports</div></div></div></div><div class="flex-1"><div class="relative h-full p-3 md:p-10"><div class="text-[length:10px] font-extrabold text-black md:text-3xl">Sales</div><div class="h-2 md:h-6"></div><div class="flex gap-2 border-b border-gray-100 pb-1 text-[length:5px] font-medium text-gray-500 md:gap-4 md:pb-4 md:text-[length:14px]"><div>Overview</div><div>Subscriptions</div><div class="font-bold text-black">Invoices</div><div>Customers</div><div>Deposits</div></div><div class="h-3 md:h-4"></div><div class="relative"><div class="flex items-center justify-between gap-1 md:gap-4"><div class=""><div class="text-[length:5px] font-medium uppercase leading-[8.5px] text-gray-500 md:text-[12px] md:leading-[24px]">Overdue</div><div class="text-[length:6.4px] text-black md:text-[length:18px]">$10,800</div></div><div class="flex h-[6px] flex-1 overflow-hidden rounded-full md:h-4"><div class="w-1/3 bg-yellow-brand"></div><div class="flex-1 bg-green-brand"></div></div><div class="text-right"><div class="text-[length:5px] font-medium uppercase leading-[8.5px] text-gray-500 md:text-[12px] md:leading-[24px]">Due Soon</div><div class="text-[length:6.4px] text-black md:text-[length:18px]">$62,000</div></div></div><div class="h-3 md:h-4"></div><div class="text-[length:5px] font-medium uppercase leading-[8.5px] text-gray-500 md:text-[12px] md:leading-[24px]">Invoice List</div><div class="h-[2.8px] md:h-2"></div><div class="flex rounded border border-gray-100 md:rounded-lg"><div class="w-1/2 border-r border-gray-100"><div class="border-b border-gray-50 py-[4.2px] md:py-3 mx-[5.7px] border-transparent md:mx-4"><div class="flex justify-between text-[length:5px] font-bold leading-[8.5px] md:text-[length:14px] md:leading-6"><div>Santa Monica</div><div>$10,800</div></div><div class="flex justify-between text-[length:4.2px] font-medium leading-[6px] text-gray-500 md:text-[length:12px] md:leading-4"><div>1995</div><div class="uppercase text-red-600">Overdue</div></div></div><div class="border-b border-gray-50 py-[4.2px] md:py-3 bg-gray-50 px-[5.7px] md:px-4"><div class="flex justify-between text-[length:5px] font-bold leading-[8.5px] md:text-[length:14px] md:leading-6"><div>Stankonia</div><div>$8,000</div></div><div class="flex justify-between text-[length:4.2px] font-medium leading-[6px] text-gray-500 md:text-[length:12px] md:leading-4"><div>2000</div><div class="uppercase ">Due Today</div></div></div><div class="border-b border-gray-50 py-[4.2px] md:py-3 mx-[5.7px] border-transparent md:mx-4"><div class="flex justify-between text-[length:5px] font-bold leading-[8.5px] md:text-[length:14px] md:leading-6"><div>Ocean Avenue</div><div>$9,500</div></div><div class="flex justify-between text-[length:4.2px] font-medium leading-[6px] text-gray-500 md:text-[length:12px] md:leading-4"><div>2003</div><div class="uppercase text-green-700">Paid</div></div></div><div class="border-b border-gray-50 py-[4.2px] md:py-3 mx-[5.7px] border-transparent md:mx-4"><div class="flex justify-between text-[length:5px] font-bold leading-[8.5px] md:text-[length:14px] md:leading-6"><div>Tubthumper</div><div>$14,000</div></div><div class="flex justify-between text-[length:4.2px] font-medium leading-[6px] text-gray-500 md:text-[length:12px] md:leading-4"><div>1997</div><div class="uppercase ">Due in 10 Days</div></div></div><div class="border-b border-gray-50 py-[4.2px] md:py-3 mx-[5.7px] border-transparent md:mx-4"><div class="flex justify-between text-[length:5px] font-bold leading-[8.5px] md:text-[length:14px] md:leading-6"><div>Wide Open Sp...</div><div>$4,600</div></div><div class="flex justify-between text-[length:4.2px] font-medium leading-[6px] text-gray-500 md:text-[length:12px] md:leading-4"><div>1998</div><div class="uppercase ">Due in 8 Days</div></div></div></div><div class="w-1/2"><div class="relative p-3 md:p-10"><div class="text-[length:5px] font-bold leading-[8.5px] md:text-[length:14px] md:leading-6">Stankonia</div><div class="text-[length:11px] font-bold leading-[14px] md:text-[length:32px] md:leading-[40px]">$8,000</div><div class="text-[length:5px] font-medium uppercase leading-[8.5px] text-gray-500 md:text-[12px] md:leading-[24px]">Due Today<!-- --> • Invoiced 10/31/2000</div><div class="h-[5.7px] md:h-4"></div><div class="flex justify-between border-t border-gray-100 py-[5.7px] text-[5px] leading-[9px] md:py-4 md:text-[14px] md:leading-[24px] "><div>Pro Plan</div><div>$6,000</div></div><div class="flex justify-between border-t border-gray-100 py-[5.7px] text-[5px] leading-[9px] md:py-4 md:text-[14px] md:leading-[24px] "><div>Custom</div><div>$2,000</div></div><div class="flex justify-between border-t border-gray-100 py-[5.7px] text-[5px] leading-[9px] md:py-4 md:text-[14px] md:leading-[24px] font-bold"><div>Net Total</div><div>$8,000</div></div></div></div></div></div></div></div></div></div></div></div></div></section><div class="h-[25vh]"></div><section><h2 class="sr-only">What about loading states?</h2><div class="mx-auto max-w-6xl px-6 text-5xl font-black text-white md:px-12 md:text-[88px] md:leading-[96px]">Through nested routes, Remix can eliminate nearly<!-- --> <span class="text-green-brand">every loading state.</span></div><div class="h-[25vh]"></div><p class="min-h-[50vh] px-6 pb-12 text-4xl font-black text-gray-100 md:mx-auto md:max-w-3xl md:text-6xl">Most web apps fetch inside of components, creating<!-- --> <span class="text-aqua-brand">request waterfalls</span>, slower loads, and <span class="text-red-brand">jank.</span></p><p class="min-h-[50vh] px-6 pb-12 text-4xl font-black text-gray-100 md:mx-auto md:max-w-3xl md:text-6xl">Remix loads data in parallel on the server and sends a fully formed HTML document.<!-- --> <span class="text-pink-brand">Way faster, jank free.</span></p><div style="min-height:400vh"><div class="sticky top-0 flex h-screen w-full flex-col justify-center pb-4 xl:pb-56" aria-hidden="true"><div class="xl:flex"><div class="relative xl:-right-10"><div class="mb-2 text-center text-xl font-black text-white lg:mb-6 lg:text-3xl">Without Remix</div><div class="-mb-14 origin-top scale-75 sm:mb-[-18rem] sm:scale-50 xl:w-[50vw] xl:scale-75 undefined"><div class="relative mx-2 max-h-[75vh] select-none overflow-hidden rounded bg-gray-700 shadow-md md:mx-4 md:rounded-lg lg:mx-auto lg:max-w-4xl"><div class="flex items-center justify-center px-1 pb-0 pt-1 md:px-2 md:pt-2"><div class="relative flex w-2/3 items-center rounded-md bg-gray-600 px-2 py-1 text-gray-100 md:px-3 md:py-1"><span class="text-[length:10px] md:text-sm">about:blank</span><svg xmlns="http://www.w3.org/2000/svg" class="absolute right-1 h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 7 7"><path fill="#fff" fill-opacity="0.8" d="M5.088 4.004l-.125.126.125.125.126-.125-.126-.126zm-1.073-.822l.948.948.251-.252-.948-.948-.251.252zm1.2.948l.947-.948-.251-.252-.948.948.251.252z"></path><path stroke="#fff" stroke-linecap="round" stroke-opacity="0.8" stroke-width="0.355" d="M4.26 4.966a1.659 1.659 0 11.829-1.436"></path></svg></div><div class="absolute left-1 flex gap-1 p-2 md:left-2 md:gap-2"><div class="h-2 w-2 rounded-full bg-gray-400 md:h-3 md:w-3"></div><div class="h-2 w-2 rounded-full bg-gray-400 md:h-3 md:w-3"></div><div class="h-2 w-2 rounded-full bg-gray-400 md:h-3 md:w-3"></div></div></div><div class="px-2 pb-2 pt-1 md:px-4 md:pb-4 md:pt-2"><div class="h-[25vh] bg-white sm:h-[38vh]"><div class="h-full w-full bg-white"></div></div><div class="h-4"></div><div class="relative"><div class="absolute left-16 right-0 top-0 flex justify-around sm:left-28"><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-[6px] w-[1px] bg-gray-50"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-[6px] w-[1px] bg-gray-50"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-[6px] w-[1px] bg-gray-50"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-[6px] w-[1px] bg-gray-50"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-[6px] w-[1px] bg-gray-50"></div></div><div class="h-4"></div><div><div class="flex items-center justify-center border-b border-gray-600 last:border-b-0"><div class="w-16 text-[length:8px] sm:w-28 sm:text-sm opacity-0">document</div><div class="relative flex-1"><div class="h-1 sm:h-2 bg-blue-brand" style="width: 0%; margin-left: 0%;"></div></div></div><div class="flex items-center justify-center border-b border-gray-600 last:border-b-0"><div class="w-16 text-[length:8px] sm:w-28 sm:text-sm opacity-0">root.js</div><div class="relative flex-1"><div class="h-1 sm:h-2 bg-blue-brand" style="width: 0%; margin-left: 10%;"></div></div></div><div class="flex items-center justify-center border-b border-gray-600 last:border-b-0"><div class="w-16 text-[length:8px] sm:w-28 sm:text-sm opacity-0">user.json</div><div class="relative flex-1"><div class="h-1 sm:h-2 bg-blue-brand" style="width: 0%; margin-left: 35%;"></div></div></div><div class="flex items-center justify-center border-b border-gray-600 last:border-b-0"><div class="w-16 text-[length:8px] sm:w-28 sm:text-sm opacity-0">sales.js</div><div class="relative flex-1"><div class="h-1 sm:h-2 bg-blue-brand" style="width: 0%; margin-left: 35%;"></div></div></div><div class="flex items-center justify-center border-b border-gray-600 last:border-b-0"><div class="w-16 text-[length:8px] sm:w-28 sm:text-sm opacity-0">sales/nav.json</div><div class="relative flex-1"><div class="h-1 sm:h-2 bg-blue-brand" style="width: 0%; margin-left: 56%;"></div></div></div><div class="flex items-center justify-center border-b border-gray-600 last:border-b-0"><div class="w-16 text-[length:8px] sm:w-28 sm:text-sm opacity-0">invoices.js</div><div class="relative flex-1"><div class="h-1 sm:h-2 bg-blue-brand" style="width: 0%; margin-left: 56%;"></div></div></div><div class="flex items-center justify-center border-b border-gray-600 last:border-b-0"><div class="w-16 text-[length:8px] sm:w-28 sm:text-sm opacity-0">invoice.js</div><div class="relative flex-1"><div class="h-1 sm:h-2 bg-blue-brand" style="width:0%;margin-left:66%"></div></div></div><div class="flex items-center justify-center border-b border-gray-600 last:border-b-0"><div class="w-16 text-[length:8px] sm:w-28 sm:text-sm opacity-0">invoice/{id}.json</div><div class="relative flex-1"><div class="h-1 sm:h-2 bg-blue-brand" style="width:0%;margin-left:88%"></div></div></div></div><div class="absolute left-16 right-0 top-0 h-full sm:left-28"><div class="absolute top-0 h-full" style="left: 0%;"><svg class="-ml-1 w-2 text-blue-brand" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 7 14"><path fill="currentColor" d="M0 0h7v9.249a2 2 0 01-.495 1.316L3.5 14 .495 10.566A2 2 0 010 9.248V0z"></path></svg><div class="relative top-[-1px] h-full w-[1px] bg-blue-brand"></div></div></div></div></div></div></div></div><div class="relative xl:-left-10"><div class="mb-2 text-center text-xl font-black text-white lg:mb-6 lg:text-3xl">With Remix</div><div class="-mb-14 origin-top scale-75 sm:mb-[-18rem] sm:scale-50 xl:w-[50vw] xl:scale-75 undefined"><div class="relative mx-2 max-h-[75vh] select-none overflow-hidden rounded bg-gray-700 shadow-md md:mx-4 md:rounded-lg lg:mx-auto lg:max-w-4xl"><div class="flex items-center justify-center px-1 pb-0 pt-1 md:px-2 md:pt-2"><div class="relative flex w-2/3 items-center rounded-md bg-gray-600 px-2 py-1 text-gray-100 md:px-3 md:py-1"><span class="text-[length:10px] md:text-sm">about:blank</span><svg xmlns="http://www.w3.org/2000/svg" class="absolute right-1 h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 7 7"><path fill="#fff" fill-opacity="0.8" d="M5.088 4.004l-.125.126.125.125.126-.125-.126-.126zm-1.073-.822l.948.948.251-.252-.948-.948-.251.252zm1.2.948l.947-.948-.251-.252-.948.948.251.252z"></path><path stroke="#fff" stroke-linecap="round" stroke-opacity="0.8" stroke-width="0.355" d="M4.26 4.966a1.659 1.659 0 11.829-1.436"></path></svg></div><div class="absolute left-1 flex gap-1 p-2 md:left-2 md:gap-2"><div class="h-2 w-2 rounded-full bg-gray-400 md:h-3 md:w-3"></div><div class="h-2 w-2 rounded-full bg-gray-400 md:h-3 md:w-3"></div><div class="h-2 w-2 rounded-full bg-gray-400 md:h-3 md:w-3"></div></div></div><div class="px-2 pb-2 pt-1 md:px-4 md:pb-4 md:pt-2"><div class="h-[25vh] bg-white sm:h-[38vh]"></div><div class="h-4"></div><div class="relative"><div class="absolute left-16 right-0 top-0 flex justify-around sm:left-28"><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-[6px] w-[1px] bg-gray-50"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-[6px] w-[1px] bg-gray-50"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-[6px] w-[1px] bg-gray-50"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-[6px] w-[1px] bg-gray-50"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-1 w-[1px] bg-gray-300"></div><div class="h-[6px] w-[1px] bg-gray-50"></div></div><div class="h-4"></div><div><div class="flex items-center justify-center border-b border-gray-600 last:border-b-0"><div class="w-16 text-[length:8px] sm:w-28 sm:text-sm opacity-0">document</div><div class="relative flex-1"><div class="h-1 sm:h-2 bg-blue-brand" style="width: 0%; margin-left: 0%;"></div></div></div><div class="flex items-center justify-center border-b border-gray-600 last:border-b-0"><div class="w-16 text-[length:8px] sm:w-28 sm:text-sm opacity-0">root.js</div><div class="relative flex-1"><div class="h-1 sm:h-2 bg-blue-brand" style="width: 0%; margin-left: 30%;"></div></div></div><div class="flex items-center justify-center border-b border-gray-600 last:border-b-0"><div class="w-16 text-[length:8px] sm:w-28 sm:text-sm opacity-0">sales.js</div><div class="relative flex-1"><div class="h-1 sm:h-2 bg-blue-brand" style="width: 0%; margin-left: 30%;"></div></div></div><div class="flex items-center justify-center border-b border-gray-600 last:border-b-0"><div class="w-16 text-[length:8px] sm:w-28 sm:text-sm opacity-0">invoices.js</div><div class="relative flex-1"><div class="h-1 sm:h-2 bg-blue-brand" style="width: 0%; margin-left: 30%;"></div></div></div><div class="flex items-center justify-center border-b border-gray-600 last:border-b-0"><div class="w-16 text-[length:8px] sm:w-28 sm:text-sm opacity-0">invoice.js</div><div class="relative flex-1"><div class="h-1 sm:h-2 bg-blue-brand" style="width: 0%; margin-left: 30%;"></div></div></div><div class="flex items-center justify-center border-b border-gray-600 last:border-b-0"><div class="w-16 text-[length:8px] sm:w-28 sm:text-sm opacity-0">&nbsp;</div><div class="relative flex-1"><div class="h-1 sm:h-2 bg-blue-brand" style="width:0%;margin-left:0%"></div></div></div><div class="flex items-center justify-center border-b border-gray-600 last:border-b-0"><div class="w-16 text-[length:8px] sm:w-28 sm:text-sm opacity-0">&nbsp;</div><div class="relative flex-1"><div class="h-1 sm:h-2 bg-blue-brand" style="width:0%;margin-left:0%"></div></div></div><div class="flex items-center justify-center border-b border-gray-600 last:border-b-0"><div class="w-16 text-[length:8px] sm:w-28 sm:text-sm opacity-0">&nbsp;</div><div class="relative flex-1"><div class="h-1 sm:h-2 bg-blue-brand" style="width:0%;margin-left:0%"></div></div></div></div><div class="absolute left-16 right-0 top-0 h-full sm:left-28"><div class="absolute top-0 h-full" style="left: 0%;"><svg class="-ml-1 w-2 text-blue-brand" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 7 14"><path fill="currentColor" d="M0 0h7v9.249a2 2 0 01-.495 1.316L3.5 14 .495 10.566A2 2 0 010 9.248V0z"></path></svg><div class="relative top-[-1px] h-full w-[1px] bg-blue-brand"></div></div></div></div></div></div></div></div></div><div class="absolute bottom-0 w-full pb-4 text-center text-sm text-gray-300 md:text-base">(Keep scrolling to compare)</div></div></div></section><div class="h-[25vh]"></div><div style="min-height:150vh"><div hidden="" class="fixed inset-0 overflow-hidden"></div><div style="opacity:0;transform:scale(10)" class="flex h-screen w-screen items-center justify-center text-center text-5xl font-black text-white sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl hidden">Say goodbye to Spinnageddon</div><div aria-hidden="true" class="sm:leading-6xl sticky top-0 flex h-screen w-screen items-center justify-center text-center text-4xl font-black text-white sm:text-5xl md:text-7xl lg:text-8xl xl:text-9xl hidden">Say goodbye to Spinnageddon</div></div><section><h2 class="sr-only">Pre-fetching Everything</h2><div class="mx-auto max-w-6xl px-6 text-5xl font-black text-white md:px-12 md:text-[88px] md:leading-[96px]">Nested routes allow Remix to make your app<!-- --> <span class="text-red-brand">as fast as instant.</span></div><div class="h-[10vh]"></div><div style="min-height:200vh"><div class="h-[15vh]"></div><p class="min-h-[50vh] px-6 pb-12 text-4xl font-black text-gray-100 md:mx-auto md:max-w-3xl md:text-6xl">Remix can prefetch everything in parallel before the user clicks a link.</p><p class="min-h-[50vh] px-6 pb-12 text-4xl font-black text-gray-100 md:mx-auto md:max-w-3xl md:text-6xl">Public Data. User Data. Modules. Heck, even CSS.</p><p class="min-h-[50vh] px-6 pb-12 text-4xl font-black text-gray-100 md:mx-auto md:max-w-3xl md:text-6xl">Zero loading states. Zero skeleton UI. Zero jank.</p><p class="min-h-[50vh] px-6 pb-12 text-4xl font-black text-gray-100 md:mx-auto md:max-w-3xl md:text-6xl"><span class="text-gray-400">Alright, you caught us, they’re just prefetch link tags, #useThePlatform</span></p><div class="sticky bottom-[-5vh]"><div class="relative mx-2 max-h-[75vh] select-none overflow-hidden rounded bg-gray-700 shadow-md md:mx-4 md:rounded-lg lg:mx-auto lg:max-w-4xl"><div class="flex items-center justify-center px-1 pb-0 pt-1 md:px-2 md:pt-2"><div class="relative flex w-2/3 items-center rounded-md bg-gray-600 px-2 py-1 text-gray-100 md:px-3 md:py-1"><span class="text-[length:10px] md:text-sm">example.com/dashboard</span><svg xmlns="http://www.w3.org/2000/svg" class="absolute right-1 h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 7 7"><path fill="#fff" fill-opacity="0.8" d="M5.088 4.004l-.125.126.125.125.126-.125-.126-.126zm-1.073-.822l.948.948.251-.252-.948-.948-.251.252zm1.2.948l.947-.948-.251-.252-.948.948.251.252z"></path><path stroke="#fff" stroke-linecap="round" stroke-opacity="0.8" stroke-width="0.355" d="M4.26 4.966a1.659 1.659 0 11.829-1.436"></path></svg></div><div class="absolute left-1 flex gap-1 p-2 md:left-2 md:gap-2"><div class="h-2 w-2 rounded-full bg-gray-400 md:h-3 md:w-3"></div><div class="h-2 w-2 rounded-full bg-gray-400 md:h-3 md:w-3"></div><div class="h-2 w-2 rounded-full bg-gray-400 md:h-3 md:w-3"></div></div></div><div class="px-2 pb-2 pt-1 md:px-4 md:pb-4 md:pt-2"><div class="relative flex overflow-hidden rounded bg-white text-gray-600 md:rounded-lg h-[35vh] md:h-[45vh]"><div class="border-r border-gray-100 bg-gray-50"><div class="p-[5.7px] lg:p-4"><div class="flex items-center text-green-700"><svg class="relative top-[1px] h-[8.5px] w-[8.5px] md:h-[18px] md:w-[18px]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M12 3a9 9 0 000 18h4.5c1.398 0 2.097 0 2.648-.228a3 3 0 001.624-1.624C21 18.597 21 17.898 21 16.5V12a9 9 0 00-9-9zm-4 8a1 1 0 011-1h6a1 1 0 110 2H9a1 1 0 01-1-1zm3 4a1 1 0 011-1h3a1 1 0 110 2h-3a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg><div class="w-[1px] md:w-1"></div><div class="text-[length:8px] font-extrabold md:text-base">Fakebooks</div></div><div class="h-2 md:h-7"></div><div class="font-bold text-gray-800"><div class="my-[1.4px] px-[2.8px] py-[1.4px] pr-4 text-[length:7px] md:my-1 md:px-2 md:py-1 md:pr-16 md:text-[length:10px] lg:text-[length:14px] undefined">Dashboard</div><div class="my-[1.4px] px-[2.8px] py-[1.4px] pr-4 text-[length:7px] md:my-1 md:px-2 md:py-1 md:pr-16 md:text-[length:10px] lg:text-[length:14px] undefined">Accounts</div><div class="my-[1.4px] px-[2.8px] py-[1.4px] pr-4 text-[length:7px] md:my-1 md:px-2 md:py-1 md:pr-16 md:text-[length:10px] lg:text-[length:14px] rounded bg-gray-100 md:rounded-md">Sales</div><div class="my-[1.4px] px-[2.8px] py-[1.4px] pr-4 text-[length:7px] md:my-1 md:px-2 md:py-1 md:pr-16 md:text-[length:10px] lg:text-[length:14px] undefined">Expenses</div><div class="my-[1.4px] px-[2.8px] py-[1.4px] pr-4 text-[length:7px] md:my-1 md:px-2 md:py-1 md:pr-16 md:text-[length:10px] lg:text-[length:14px] undefined">Reports</div></div></div></div><div class="flex-1"><div class="relative p-3 md:p-6"><div class="text-[length:10px] font-extrabold text-black md:text-3xl">Dashboard</div><div class="h-2 md:h-6"></div><div class="flex gap-2 border-b border-gray-100 pb-1 text-[length:5px] font-medium text-gray-500 md:gap-4 md:pb-4 md:text-[length:14px]"><div class="font-bold text-black">Recent Activity</div><div>Alerts</div><div>Messages</div></div><div class="h-3 md:h-4"></div><div class="flex gap-2"><div class="box-border flex-1 rounded-lg border border-gray-50 p-2 md:p-10 "><div class="text-center text-[length:5px] font-bold leading-[8.5px] md:text-[length:14px] md:leading-6">New Invoice</div><div class="h-[5.7px] md:h-4"></div><div class="flex justify-between border-t border-gray-100 py-[5.7px] text-[5px] leading-[9px] md:py-4 md:text-[14px] md:leading-[24px] "><div>Customer</div><div>Stankonia</div></div><div class="flex justify-between border-t border-gray-100 py-[5.7px] text-[5px] leading-[9px] md:py-4 md:text-[14px] md:leading-[24px] "><div>Net Total</div><div>$8,000</div></div></div><div class="box-border flex-1 rounded-lg border border-gray-50 p-2 md:p-10 "><div class="text-center text-[length:5px] font-bold leading-[8.5px] md:text-[length:14px] md:leading-6">New Invoice</div><div class="h-[5.7px] md:h-4"></div><div class="flex justify-between border-t border-gray-100 py-[5.7px] text-[5px] leading-[9px] md:py-4 md:text-[14px] md:leading-[24px] "><div>Customer</div><div>Ocean Avenue</div></div><div class="flex justify-between border-t border-gray-100 py-[5.7px] text-[5px] leading-[9px] md:py-4 md:text-[14px] md:leading-[24px] "><div>Net Total</div><div>$9,500</div></div></div></div></div></div></div><div><div class="absolute" style="top: 10%; left: 5%;"><svg class="w-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 23 32"><path fill="#fff" stroke="#000" stroke-width="2" d="M8.214 22.016L1 30.43V1.47l20.197 20.196H8.512l-.299.349z"></path></svg></div></div></div></div></div></div></section><div class="h-[75vh]"></div><section><div class="mx-auto max-w-5xl p-6 md:p-10"><div class="mb-8 text-4xl font-black text-white sm:text-5xl md:text-6xl"><h2 class="inline">Data loading</h2> <span aria-hidden="true">... <img src="/yawn.png" alt="" class="inline h-8 md:h-14"></span><p>You ever notice most of the code in your app is for<!-- --> <span class="text-yellow-brand">changing data?</span></p></div><p class="hyphen-manual mt-2 text-lg md:pr-52 md:text-xl lg:pr-72">Imagine if React only had props and no way to set state. What’s the point? If a web framework helps you load data but doesn’t help you update it, what’s the point? Remix doesn’t drop you off at the<!-- --> <code>&lt;form onSubmit&gt;</code> cliff.<!-- --> <span class="text-gray-400">(What the heck does <code>event.preventDefault</code> do anyway?)</span></p></div><div class="h-[25vh]"></div><div class="mx-auto max-w-6xl px-6 text-5xl font-black text-white md:px-12 md:text-[88px] md:leading-[96px]">Resilient, progressively enhanced<!-- --> <span class="text-blue-brand">data updates</span> are built in.</div><div class="h-[25vh]"></div><div style="min-height:550vh"><div class="xl:flex"><div class="p-max-w-lg flex-1 xl:mx-auto"><div class="xl:h-[12vh]"></div><div class="max-w-full px-6"><p class="flex min-h-[75vh] max-w-2xl items-center px-6 text-4xl font-black text-gray-100 sm:mx-auto sm:px-8 md:text-6xl">It’s so simple it’s kind of silly. Just make a form...</p><p class="flex min-h-[75vh] max-w-2xl items-center px-6 text-4xl font-black text-gray-100 sm:mx-auto sm:px-8 md:text-6xl">...and an action on a route module. It looks like traditional HTML forms but enables fully dynamic web experiences you're after.</p><p class="flex min-h-[75vh] max-w-2xl items-center px-6 text-4xl font-black text-gray-100 sm:mx-auto sm:px-8 md:text-6xl">Remix runs the action server side, revalidates data client side, and even handles race conditions from resubmissions.</p><p class="flex min-h-[75vh] max-w-2xl items-center px-6 text-4xl font-black text-gray-100 sm:mx-auto sm:px-8 md:text-6xl">Get fancy with transition hooks and make some pending UI. Remix handles all the state, you simply ask for it.</p><p class="flex min-h-[75vh] max-w-2xl items-center px-6 text-4xl font-black text-gray-100 sm:mx-auto sm:px-8 md:text-6xl">Or get jiggy with some optimistic UI. Remix provides the data being sent to the server so you can skip the busy spinners for mutations, too.</p><p class="flex min-h-[75vh] max-w-2xl items-center px-6 text-4xl font-black text-gray-100 sm:mx-auto sm:px-8 md:text-6xl">HTML forms for mutations. Who knew?</p></div></div><div class="sticky bottom-0 bg-[#252525] xl:bottom-auto xl:top-0 xl:flex xl:h-screen xl:flex-1 xl:items-center xl:self-start"><div class="__mutation_code text-sm sm:text-base md:text-lg xl:w-full"><div data-code-block="" data-line-numbers="true" data-lang="tsx"><pre data-line-numbers="true" data-lang="tsx" style="color: var(--base05);"><code><span class="codeblock-line" data-line-number="1"><span style="color: var(--base0E)">export</span> <span style="color: var(--base0E)">default</span> <span style="color: var(--base0D)">function</span> <span style="color: var(--base0D)">NewInvoice</span>() {
</span><span class="codeblock-line" data-line-number="2">  <span style="color: var(--base0E)">return</span> (
</span><span class="codeblock-line" data-line-number="3">    &lt;<span style="color: var(--base0A)">Form</span> <span style="color: var(--base0D)">method</span><span style="color: var(--base0E)">=</span>"<span style="color: var(--base0B)">post</span>"&gt;
</span><span class="codeblock-line" data-line-number="4">      &lt;<span style="color: var(--base08)">input</span> <span style="color: var(--base0D)">type</span><span style="color: var(--base0E)">=</span>"<span style="color: var(--base0B)">text</span>" <span style="color: var(--base0D)">name</span><span style="color: var(--base0E)">=</span>"<span style="color: var(--base0B)">company</span>" /&gt;
</span><span class="codeblock-line" data-line-number="5">      &lt;<span style="color: var(--base08)">input</span> <span style="color: var(--base0D)">type</span><span style="color: var(--base0E)">=</span>"<span style="color: var(--base0B)">text</span>" <span style="color: var(--base0D)">name</span><span style="color: var(--base0E)">=</span>"<span style="color: var(--base0B)">amount</span>" /&gt;
</span><span class="codeblock-line" data-line-number="6">      &lt;<span style="color: var(--base08)">button</span> <span style="color: var(--base0D)">type</span><span style="color: var(--base0E)">=</span>"<span style="color: var(--base0B)">submit</span>"&gt;Create&lt;/<span style="color: var(--base08)">button</span>&gt;
</span><span class="codeblock-line" data-line-number="7">    &lt;/<span style="color: var(--base0A)">Form</span>&gt;
</span><span class="codeblock-line" data-line-number="8">  );
</span><span class="codeblock-line" data-line-number="9">}
</span></code></pre></div></div></div></div></div></section><div class="mb-[-10vh]"></div><div style="min-height:25vh"></div><div style="min-height:100vh"><section class="relative z-10 h-full bg-blue-600 px-6 pb-32 text-lg text-white sm:px-36 sm:pb-40 sm:text-xl"><h2 class="sr-only">Error Handling</h2><div aria-hidden="true" class="text-6xl sm:text-7xl md:text-[length:120px]">:)</div><div class="my-10 sm:my-16 sm:max-w-4xl md:text-[length:30px] md:leading-[40px]">Your websites run into problems, but with Remix they don’t need to be refreshed. Error handling is hard to remember and hard to do. That’s why it’s built in.</div><div class="my-10 sm:my-16 sm:max-w-4xl md:text-[length:30px] md:leading-[40px]">Remix handles errors while Server Rendering. Errors while Client Rendering. Even errors in your server side data handling.</div><img class="h-24 w-24" alt="" aria-hidden="true" src="/qrcode.png"></section></div><div class="h-[33vh]"></div><section><div class="mx-auto max-w-6xl px-6 text-5xl font-black text-white md:px-12 md:text-[88px] md:leading-[96px]"><h2>Route Error Boundaries<!-- --> <span class="text-yellow-brand">keep the happy path happy.</span></h2></div><div class="h-[10vh]"></div><div style="min-height:325vh"><div class="h-[15vh]"></div><p class="min-h-[50vh] px-6 pb-12 text-4xl font-black text-gray-100 md:mx-auto md:max-w-3xl md:text-6xl">Each route module can export an error boundary next to the default route component.</p><div class="h-[25vh]"></div><p class="min-h-[50vh] px-6 pb-12 text-4xl font-black text-gray-100 md:mx-auto md:max-w-3xl md:text-6xl">If an error is thrown, client or server side, users see the boundary instead of the default component.</p><p class="min-h-[50vh] px-6 pb-12 text-4xl font-black text-gray-100 md:mx-auto md:max-w-3xl md:text-6xl">Routes w/o trouble render normally, so users have more options than slamming refresh.</p><p class="min-h-[50vh] px-6 pb-12 text-4xl font-black text-gray-100 md:mx-auto md:max-w-3xl md:text-6xl">If a route has no boundary, errors bubble up. Just put one at the top and chill out about errors in code review, yeah?</p><div class="sticky bottom-[-5vh]"><div class="__mutation_code text-sm sm:text-base md:text-lg xl:w-full"><div data-code-block="" data-line-numbers="true" data-lang="tsx"><pre data-line-numbers="true" data-lang="tsx" style="color: var(--base05);"><code><span class="codeblock-line" data-line-number="1"><span style="color: var(--base0E)">export</span> <span style="color: var(--base0E)">default</span> <span style="color: var(--base0D)">function</span> <span style="color: var(--base0D)">InvoiceRoute</span>() {
</span><span class="codeblock-line" data-line-number="2">  <span style="color: var(--base0A)">const</span> <span style="color: var(--base08)">invoice</span> <span style="color: var(--base0E)">=</span> <span style="color: var(--base0D)">useLoaderData</span>();
</span><span class="codeblock-line" data-line-number="3">  <span style="color: var(--base0E)">return</span> &lt;<span style="color: var(--base0A)">Invoice</span> <span style="color: var(--base0D)">data</span><span style="color: var(--base0E)">=</span><span style="color: var(--base0F)">{</span><span style="color: var(--base08)">invoice</span><span style="color: var(--base0F)">}</span> /&gt;;
</span><span class="codeblock-line" data-line-number="4">}
</span></code></pre></div></div></div></div></section><div class="mx-auto max-w-6xl px-6 text-5xl font-black text-white md:px-12 md:text-[88px] md:leading-[96px]">That's probably enough for now. What are you waiting for?</div><div class="mx-auto max-w-6xl px-6 md:px-12"><div class="h-4"></div><a x-comp="PrimaryButtonLink" class="inline-flex items-center justify-center xl:text-xl h-14 xl:h-16 box-border px-8 rounded focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-transparent font-semibold bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-200 transition-colors duration-200 undefined" data-discover="true" href="/docs">Go Play!</a></div><div class="h-[25vh]"></div></div></div></main><footer x-comp="Footer" class="flex items-center justify-between px-6 py-9 text-base lg:px-12 text-white"><div class="flex items-center"><svg x-comp="Wordmark" height="16" viewBox="0 0 659 165" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Remix logo" role="img"><path fill-rule="evenodd" clip-rule="evenodd" d="M133.85 124.16C135.3 142.762 135.3 151.482 135.3 161H92.2283C92.2283 158.927 92.2653 157.03 92.3028 155.107C92.4195 149.128 92.5411 142.894 91.5717 130.304C90.2905 111.872 82.3473 107.776 67.7419 107.776H54.8021H0V74.24H69.7918C88.2407 74.24 97.4651 68.632 97.4651 53.784C97.4651 40.728 88.2407 32.816 69.7918 32.816H0V0H77.4788C119.245 0 140 19.712 140 51.2C140 74.752 125.395 90.112 105.665 92.672C122.32 96 132.057 105.472 133.85 124.16Z" fill="currentColor"></path><path d="M0 161V136H45.5416C53.1486 136 54.8003 141.638 54.8003 145V161H0Z" fill="currentColor"></path><path d="M654.54 47.1035H611.788L592.332 74.2395L573.388 47.1035H527.564L568.78 103.168L523.98 161.28H566.732L589.516 130.304L612.3 161.28H658.124L613.068 101.376L654.54 47.1035Z" fill="url(#paint0_linear)"></path><path d="M654.54 47.1035H611.788L592.332 74.2395L573.388 47.1035H527.564L568.78 103.168L523.98 161.28H566.732L589.516 130.304L612.3 161.28H658.124L613.068 101.376L654.54 47.1035Z" fill="currentColor"></path><path d="M229.43 120.576C225.59 129.536 218.422 133.376 207.158 133.376C194.614 133.376 184.374 126.72 183.35 112.64H263.478V101.12C263.478 70.1437 243.254 44.0317 205.11 44.0317C169.526 44.0317 142.902 69.8877 142.902 105.984C142.902 142.336 169.014 164.352 205.622 164.352C235.83 164.352 256.822 149.76 262.71 123.648L229.43 120.576ZM183.862 92.6717C185.398 81.9197 191.286 73.7277 204.598 73.7277C216.886 73.7277 223.542 82.4317 224.054 92.6717H183.862Z" fill="url(#paint1_linear)"></path><path d="M229.43 120.576C225.59 129.536 218.422 133.376 207.158 133.376C194.614 133.376 184.374 126.72 183.35 112.64H263.478V101.12C263.478 70.1437 243.254 44.0317 205.11 44.0317C169.526 44.0317 142.902 69.8877 142.902 105.984C142.902 142.336 169.014 164.352 205.622 164.352C235.83 164.352 256.822 149.76 262.71 123.648L229.43 120.576ZM183.862 92.6717C185.398 81.9197 191.286 73.7277 204.598 73.7277C216.886 73.7277 223.542 82.4317 224.054 92.6717H183.862Z" fill="currentColor"></path><path d="M385.256 66.5597C380.392 53.2477 369.896 44.0317 349.672 44.0317C332.52 44.0317 320.232 51.7117 314.088 64.2557V47.1037H272.616V161.28H314.088V105.216C314.088 88.0638 318.952 76.7997 332.52 76.7997C345.064 76.7997 348.136 84.9917 348.136 100.608V161.28H389.608V105.216C389.608 88.0638 394.216 76.7997 408.04 76.7997C420.584 76.7997 423.4 84.9917 423.4 100.608V161.28H464.872V89.5997C464.872 65.7917 455.656 44.0317 424.168 44.0317C404.968 44.0317 391.4 53.7597 385.256 66.5597Z" fill="url(#paint2_linear)"></path><path d="M385.256 66.5597C380.392 53.2477 369.896 44.0317 349.672 44.0317C332.52 44.0317 320.232 51.7117 314.088 64.2557V47.1037H272.616V161.28H314.088V105.216C314.088 88.0638 318.952 76.7997 332.52 76.7997C345.064 76.7997 348.136 84.9917 348.136 100.608V161.28H389.608V105.216C389.608 88.0638 394.216 76.7997 408.04 76.7997C420.584 76.7997 423.4 84.9917 423.4 100.608V161.28H464.872V89.5997C464.872 65.7917 455.656 44.0317 424.168 44.0317C404.968 44.0317 391.4 53.7597 385.256 66.5597Z" fill="currentColor"></path><path d="M478.436 47.104V161.28H519.908V47.104H478.436ZM478.18 36.352H520.164V0H478.18V36.352Z" fill="url(#paint3_linear)"></path><path d="M478.436 47.104V161.28H519.908V47.104H478.436ZM478.18 36.352H520.164V0H478.18V36.352Z" fill="currentColor"></path><defs><linearGradient id="paint0_linear" x1="591.052" y1="47.1035" x2="591.052" y2="161.28" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"></stop><stop offset="1" stop-color="currentColor" stop-opacity="0"></stop></linearGradient><linearGradient id="paint1_linear" x1="203.19" y1="44.0317" x2="203.19" y2="164.352" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"></stop><stop offset="1" stop-color="currentColor" stop-opacity="0"></stop></linearGradient><linearGradient id="paint2_linear" x1="368.744" y1="44.0317" x2="368.744" y2="161.28" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"></stop><stop offset="1" stop-color="currentColor" stop-opacity="0"></stop></linearGradient><linearGradient id="paint3_linear" x1="499.172" y1="0" x2="499.172" y2="161.28" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"></stop><stop offset="1" stop-color="currentColor" stop-opacity="0"></stop></linearGradient></defs></svg></div><nav class="flex gap-6 text-white" aria-label="Find us on the web"><a href="https://github.com/remix-run" aria-label="GitHub"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><title>GitHub Logo</title><path d="M20.0002 0C9.01496 0 0 9.01496 0 20.0002C0 29.3743 6.57781 37.8897 15.3126 40.0003V33.3834C14.4471 33.5729 13.6506 33.5784 12.7696 33.3187C11.5876 32.9699 10.6272 32.1826 9.91432 30.982C9.45991 30.2154 8.65455 29.3841 7.81439 29.4451L7.6084 27.1105C9.42512 26.9549 10.9968 28.2174 11.9297 29.7848C12.3441 30.4818 12.8211 30.8904 13.4333 31.0711C14.0251 31.2454 14.6605 31.1617 15.4008 30.9002C15.5867 29.4179 16.2657 28.8631 16.7787 28.0819V28.0807C11.5693 27.3037 9.49318 24.54 8.66919 22.3586C7.57727 19.4621 8.16321 15.8436 10.0941 13.5569C10.1316 13.5124 10.1994 13.3958 10.1731 13.3143C9.28779 10.64 10.3666 8.4278 10.4063 8.19312C11.428 8.49524 11.594 7.88916 14.8445 9.86397L15.4063 10.2015C15.6413 10.3416 15.5674 10.2616 15.8024 10.2439C17.1596 9.87526 18.5902 9.6717 19.9998 9.65339C21.4201 9.6717 22.8417 9.87526 24.2549 10.2589L24.4368 10.2772C24.421 10.2747 24.4863 10.2656 24.5958 10.2003C28.6562 7.74084 28.5103 8.54468 29.5992 8.19068C29.6386 8.42566 30.7031 10.6739 29.8272 13.3143C29.7091 13.6781 33.3474 17.0097 31.3308 22.3577C30.5068 24.54 28.431 27.3037 23.2216 28.0807V28.0819C23.8893 29.0996 24.6917 29.641 24.6874 31.7407V40.0003C33.4225 37.8897 40 29.3743 40 20.0002C40.0003 9.01496 30.9853 0 20.0002 0V0Z" fill="currentColor"></path></svg></a><a href="https://twitter.com/remix_run" aria-label="Twitter"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" height="40" width="40" aria-hidden="true"><title>Twitter Logo</title><path d="M20 0C8.95599 0 0 8.95599 0 20C0 31.044 8.95599 40 20 40C31.044 40 40 31.044 40 20C40 8.95599 31.044 0 20 0ZM29.1318 15.5939C29.1406 15.7907 29.1449 15.9885 29.1449 16.1871C29.1449 22.2531 24.5276 29.248 16.0837 29.2484C13.4912 29.2484 11.0788 28.4885 9.04724 27.1863C9.40643 27.2287 9.77203 27.2498 10.1422 27.2498C12.2931 27.2498 14.2725 26.5161 15.8438 25.2847C13.8342 25.2475 12.1399 23.9203 11.5552 22.0963C11.835 22.15 12.1228 22.1793 12.4179 22.1793C12.8369 22.1793 13.2428 22.1228 13.6285 22.0175C11.528 21.597 9.94568 19.7406 9.94568 17.5177C9.94568 17.4969 9.94568 17.4783 9.94629 17.4591C10.5649 17.803 11.2723 18.0099 12.0255 18.0331C10.7928 17.2107 9.9826 15.8047 9.9826 14.212C9.9826 13.371 10.21 12.583 10.6042 11.9046C12.868 14.6823 16.2512 16.5091 20.0665 16.701C19.9878 16.3647 19.9472 16.0144 19.9472 15.6543C19.9472 13.1201 22.0032 11.0641 24.5383 11.0641C25.8588 11.0641 27.0514 11.6223 27.8891 12.5146C28.9349 12.3083 29.917 11.9263 30.8041 11.4005C30.4608 12.4719 29.7333 13.371 28.7854 13.9395C29.7141 13.8284 30.5991 13.5822 31.4215 13.2166C30.8072 14.1373 30.0281 14.946 29.1318 15.5939Z" fill="currentColor"></path></svg></a><a href="https://youtube.com/remix_run" aria-label="YouTube"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><title>YouTube logo</title><path d="M17.5088 23.7468L24.0145 19.9999L17.5088 16.2529V23.7468Z" fill="currentColor"></path><path d="M20 0C8.95599 0 0 8.95599 0 20C0 31.044 8.95599 40 20 40C31.044 40 40 31.044 40 20C40 8.95599 31.044 0 20 0ZM32.4969 20.0204C32.4969 20.0204 32.4969 24.0765 31.9824 26.0324C31.694 27.103 30.8499 27.9471 29.7794 28.2352C27.8235 28.75 20 28.75 20 28.75C20 28.75 12.197 28.75 10.2206 28.2147C9.15009 27.9266 8.30597 27.0822 8.01758 26.0117C7.50275 24.0765 7.50275 20 7.50275 20C7.50275 20 7.50275 15.9442 8.01758 13.9883C8.30566 12.9178 9.17053 12.0529 10.2206 11.7648C12.1765 11.25 20 11.25 20 11.25C20 11.25 27.8235 11.25 29.7794 11.7853C30.8499 12.0734 31.694 12.9178 31.9824 13.9883C32.5177 15.9442 32.4969 20.0204 32.4969 20.0204Z" fill="currentColor"></path></svg></a><a href="https://rmx.as/discord" aria-label="Remix"><svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 0C8.95105 0 0 8.95105 0 20C0 31.0256 8.95105 39.9767 20 40C31.049 40 40 31.049 40 20C40 8.95105 31.049 0 20 0ZM23.6829 10.2331C25.5244 10.5361 27.2959 11.0955 28.9976 11.8648C31.9113 16.1538 33.3565 21.0023 32.8437 26.5967C30.8857 28.0652 28.6712 29.1608 26.3169 29.8834C25.7808 29.1608 25.3146 28.4149 24.9183 27.6224C25.6875 27.3426 26.4335 26.993 27.1328 26.5734C27.0395 26.5035 26.9521 26.4335 26.8647 26.3636C26.7773 26.2937 26.6899 26.2238 26.5966 26.1538C22.4708 28.1119 17.6689 28.1119 13.543 26.1538C13.4498 26.2238 13.3624 26.2937 13.275 26.3636C13.1875 26.4335 13.1001 26.5035 13.0069 26.5734C13.7062 26.993 14.4288 27.3426 15.198 27.6224C14.8018 28.4149 14.3356 29.1608 13.7994 29.8834C11.4451 29.1841 9.25397 28.0652 7.27262 26.5967C6.82973 21.7715 7.73882 16.8997 11.0955 11.8881C12.7738 11.0955 14.5687 10.5361 16.4101 10.2331C16.6666 10.676 16.8997 11.1422 17.1094 11.6317C19.0675 11.3286 21.0488 11.3286 23.0069 11.6317C23.1934 11.1888 23.4498 10.6527 23.6829 10.2331ZM13.4498 21.0256C13.4498 22.4475 14.4754 23.613 15.7575 23.613C17.0628 23.613 18.0652 22.4475 18.0885 21.0256C18.0885 19.5804 17.0628 18.4149 15.7575 18.4149C14.4754 18.4149 13.4498 19.6037 13.4498 21.0256ZM22.0279 21.0256C22.0279 22.4475 23.0535 23.613 24.3356 23.613C25.6176 23.613 26.6199 22.4708 26.6432 21.0256C26.6666 19.5804 25.6409 18.4149 24.3356 18.4149C23.0535 18.4149 22.0279 19.6037 22.0279 21.0256Z" fill="currentColor"></path></svg></a></nav></footer></div><img src="/assets/icons-Dxzco0Kk.svg" alt="" hidden="" fetchpriority="high"><script id="fathom-script" async="" data-site="IRVDGCHK" src="https://cdn.usefathom.com/script.js" data-excluded-domains="localhost" data-spa="history"></script><script>((STORAGE_KEY, restoreKey) => {
    if (!window.history.state || !window.history.state.key) {
      let key = Math.random().toString(32).slice(2);
      window.history.replaceState({
        key
      }, "");
    }
    try {
      let positions = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || "{}");
      let storedY = positions[restoreKey || window.history.state.key];
      if (typeof storedY === "number") {
        window.scrollTo(0, storedY);
      }
    } catch (error) {
      console.error(error);
      sessionStorage.removeItem(STORAGE_KEY);
    }
  })("positions", null)</script><script>window.__remixContext.streamController.enqueue("[{\"_1\":2,\"_51\":-5,\"_42\":-5},\"loaderData\",{\"_3\":4,\"_13\":14,\"_50\":-5},\"root\",{\"_5\":6,\"_7\":8,\"_9\":10,\"_11\":12},\"colorScheme\",\"system\",\"host\",\"remix.run\",\"isProductionHost\",true,\"noIndex\",false,\"routes/_marketing._index\",{\"_15\":16,\"_21\":22,\"_24\":25,\"_26\":27,\"_42\":43},\"sample\",{\"_17\":18,\"_19\":20},\"type\",\"prose\",\"html\",\"\u003cdiv data-code-block=\\\"\\\" data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\"\u003e\u003cpre data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\" style=\\\"color: var(--base05);\\\"\u003e\u003ccode\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"1\\\"\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003eexport\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003easync\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003efunction\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eloader\u003c/span\u003e({ \u003cspan style=\\\"color: var(--base08)\\\"\u003erequest\u003c/span\u003e }) {\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"2\\\"\u003e  \u003cspan style=\\\"color: var(--base0E)\\\"\u003ereturn\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003egetProjects\u003c/span\u003e();\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"3\\\"\u003e}\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"4\\\"\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"5\\\"\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003eexport\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003easync\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003efunction\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eaction\u003c/span\u003e({ \u003cspan style=\\\"color: var(--base08)\\\"\u003erequest\u003c/span\u003e }) {\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"6\\\"\u003e  \u003cspan style=\\\"color: var(--base0A)\\\"\u003econst\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003eform\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003eawait\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003erequest\u003c/span\u003e.\u003cspan style=\\\"color: var(--base0D)\\\"\u003eformData\u003c/span\u003e();\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"7\\\"\u003e  \u003cspan style=\\\"color: var(--base0E)\\\"\u003ereturn\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003ecreateProject\u003c/span\u003e({\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"8\\\"\u003e    title: \u003cspan style=\\\"color: var(--base08)\\\"\u003eform\u003c/span\u003e.\u003cspan style=\\\"color: var(--base0D)\\\"\u003eget\u003c/span\u003e(\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003etitle\u003c/span\u003e\\\"),\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"9\\\"\u003e  });\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"10\\\"\u003e}\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"11\\\"\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"12\\\"\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003eexport\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003edefault\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003efunction\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eProjects\u003c/span\u003e() {\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"13\\\"\u003e  \u003cspan style=\\\"color: var(--base0A)\\\"\u003econst\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003eprojects\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003euseLoaderData\u003c/span\u003e();\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"14\\\"\u003e  \u003cspan style=\\\"color: var(--base0A)\\\"\u003econst\u003c/span\u003e { \u003cspan style=\\\"color: var(--base08)\\\"\u003estate\u003c/span\u003e } \u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003euseNavigation\u003c/span\u003e();\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"15\\\"\u003e  \u003cspan style=\\\"color: var(--base0A)\\\"\u003econst\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003ebusy\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003estate\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e===\u003c/span\u003e \\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003esubmitting\u003c/span\u003e\\\";\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"16\\\"\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"17\\\"\u003e  \u003cspan style=\\\"color: var(--base0E)\\\"\u003ereturn\u003c/span\u003e (\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"18\\\"\u003e    \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003ediv\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"19\\\"\u003e      \u003cspan style=\\\"color: var(--base0F)\\\"\u003e{\u003c/span\u003e\u003cspan style=\\\"color: var(--base08)\\\"\u003eprojects\u003c/span\u003e.\u003cspan style=\\\"color: var(--base0D)\\\"\u003emap\u003c/span\u003e((\u003cspan style=\\\"color: var(--base08)\\\"\u003eproject\u003c/span\u003e) \u003cspan style=\\\"color: var(--base0D)\\\"\u003e=\u003e\u003c/span\u003e (\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"20\\\"\u003e        \u0026#x3C;\u003cspan style=\\\"color: var(--base0A)\\\"\u003eLink\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eto\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e{\u003c/span\u003e\u003cspan style=\\\"color: var(--base08)\\\"\u003eproject\u003c/span\u003e.\u003cspan style=\\\"color: var(--base08)\\\"\u003eslug\u003c/span\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e}\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"21\\\"\u003e          \u003cspan style=\\\"color: var(--base0F)\\\"\u003e{\u003c/span\u003e\u003cspan style=\\\"color: var(--base08)\\\"\u003eproject\u003c/span\u003e.\u003cspan style=\\\"color: var(--base08)\\\"\u003etitle\u003c/span\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e}\u003c/span\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"22\\\"\u003e        \u0026#x3C;/\u003cspan style=\\\"color: var(--base0A)\\\"\u003eLink\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"23\\\"\u003e      ))\u003cspan style=\\\"color: var(--base0F)\\\"\u003e}\u003c/span\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"24\\\"\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"25\\\"\u003e      \u0026#x3C;\u003cspan style=\\\"color: var(--base0A)\\\"\u003eForm\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003emethod\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003epost\u003c/span\u003e\\\"\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"26\\\"\u003e        \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003einput\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003ename\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003etitle\u003c/span\u003e\\\" /\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"27\\\"\u003e        \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003ebutton\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003etype\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003esubmit\u003c/span\u003e\\\" \u003cspan style=\\\"color: var(--base0D)\\\"\u003edisabled\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e{\u003c/span\u003e\u003cspan style=\\\"color: var(--base08)\\\"\u003ebusy\u003c/span\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e}\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"28\\\"\u003e          \u003cspan style=\\\"color: var(--base0F)\\\"\u003e{\u003c/span\u003e\u003cspan style=\\\"color: var(--base08)\\\"\u003ebusy\u003c/span\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"29\\\"\u003e            \u003cspan style=\\\"color: var(--base0E)\\\"\u003e?\u003c/span\u003e \\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003eCreating...\u003c/span\u003e\\\"\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"30\\\"\u003e            \u003cspan style=\\\"color: var(--base0E)\\\"\u003e:\u003c/span\u003e \\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003eCreate New Project\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0F)\\\"\u003e}\u003c/span\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"31\\\"\u003e        \u0026#x3C;/\u003cspan style=\\\"color: var(--base08)\\\"\u003ebutton\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"32\\\"\u003e      \u0026#x3C;/\u003cspan style=\\\"color: var(--base0A)\\\"\u003eForm\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"33\\\"\u003e    \u0026#x3C;/\u003cspan style=\\\"color: var(--base08)\\\"\u003ediv\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"34\\\"\u003e  );\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"35\\\"\u003e}\\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\",\"sampleSm\",{\"_17\":18,\"_19\":23},\"\u003cdiv data-code-block=\\\"\\\" data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\"\u003e\u003cpre data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\" style=\\\"color: var(--base05);\\\"\u003e\u003ccode\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"1\\\"\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003eexport\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003easync\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003efunction\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eloader\u003c/span\u003e({ \u003cspan style=\\\"color: var(--base08)\\\"\u003erequest\u003c/span\u003e }) {\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"2\\\"\u003e  \u003cspan style=\\\"color: var(--base0E)\\\"\u003ereturn\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003egetProjects\u003c/span\u003e();\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"3\\\"\u003e}\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"4\\\"\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"5\\\"\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003eexport\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003easync\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003efunction\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eaction\u003c/span\u003e({ \u003cspan style=\\\"color: var(--base08)\\\"\u003erequest\u003c/span\u003e }) {\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"6\\\"\u003e  \u003cspan style=\\\"color: var(--base0A)\\\"\u003econst\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003eform\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003eawait\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003erequest\u003c/span\u003e.\u003cspan style=\\\"color: var(--base0D)\\\"\u003eformData\u003c/span\u003e();\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"7\\\"\u003e  \u003cspan style=\\\"color: var(--base0E)\\\"\u003ereturn\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003ecreateProject\u003c/span\u003e({ title: \u003cspan style=\\\"color: var(--base08)\\\"\u003eform\u003c/span\u003e.\u003cspan style=\\\"color: var(--base0D)\\\"\u003eget\u003c/span\u003e(\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003etitle\u003c/span\u003e\\\") });\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"8\\\"\u003e}\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"9\\\"\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"10\\\"\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003eexport\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003edefault\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003efunction\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eProjects\u003c/span\u003e() {\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"11\\\"\u003e  \u003cspan style=\\\"color: var(--base0A)\\\"\u003econst\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003eprojects\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003euseLoaderData\u003c/span\u003e();\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"12\\\"\u003e  \u003cspan style=\\\"color: var(--base0A)\\\"\u003econst\u003c/span\u003e { \u003cspan style=\\\"color: var(--base08)\\\"\u003estate\u003c/span\u003e } \u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003euseNavigation\u003c/span\u003e();\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"13\\\"\u003e  \u003cspan style=\\\"color: var(--base0A)\\\"\u003econst\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003ebusy\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003estate\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e===\u003c/span\u003e \\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003esubmitting\u003c/span\u003e\\\";\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"14\\\"\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"15\\\"\u003e  \u003cspan style=\\\"color: var(--base0E)\\\"\u003ereturn\u003c/span\u003e (\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"16\\\"\u003e    \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003ediv\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"17\\\"\u003e      \u003cspan style=\\\"color: var(--base0F)\\\"\u003e{\u003c/span\u003e\u003cspan style=\\\"color: var(--base08)\\\"\u003eprojects\u003c/span\u003e.\u003cspan style=\\\"color: var(--base0D)\\\"\u003emap\u003c/span\u003e((\u003cspan style=\\\"color: var(--base08)\\\"\u003eproject\u003c/span\u003e) \u003cspan style=\\\"color: var(--base0D)\\\"\u003e=\u003e\u003c/span\u003e (\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"18\\\"\u003e        \u0026#x3C;\u003cspan style=\\\"color: var(--base0A)\\\"\u003eLink\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eto\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e{\u003c/span\u003e\u003cspan style=\\\"color: var(--base08)\\\"\u003eproject\u003c/span\u003e.\u003cspan style=\\\"color: var(--base08)\\\"\u003eslug\u003c/span\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e}\u003c/span\u003e\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e{\u003c/span\u003e\u003cspan style=\\\"color: var(--base08)\\\"\u003eproject\u003c/span\u003e.\u003cspan style=\\\"color: var(--base08)\\\"\u003etitle\u003c/span\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e}\u003c/span\u003e\u0026#x3C;/\u003cspan style=\\\"color: var(--base0A)\\\"\u003eLink\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"19\\\"\u003e      ))\u003cspan style=\\\"color: var(--base0F)\\\"\u003e}\u003c/span\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"20\\\"\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"21\\\"\u003e      \u0026#x3C;\u003cspan style=\\\"color: var(--base0A)\\\"\u003eForm\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003emethod\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003epost\u003c/span\u003e\\\"\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"22\\\"\u003e        \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003einput\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003ename\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003etitle\u003c/span\u003e\\\" /\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"23\\\"\u003e        \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003ebutton\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003etype\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003esubmit\u003c/span\u003e\\\" \u003cspan style=\\\"color: var(--base0D)\\\"\u003edisabled\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e{\u003c/span\u003e\u003cspan style=\\\"color: var(--base08)\\\"\u003ebusy\u003c/span\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e}\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"24\\\"\u003e          \u003cspan style=\\\"color: var(--base0F)\\\"\u003e{\u003c/span\u003e\u003cspan style=\\\"color: var(--base08)\\\"\u003ebusy\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e?\u003c/span\u003e \\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003eCreating...\u003c/span\u003e\\\" \u003cspan style=\\\"color: var(--base0E)\\\"\u003e:\u003c/span\u003e \\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003eCreate New Project\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0F)\\\"\u003e}\u003c/span\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"25\\\"\u003e        \u0026#x3C;/\u003cspan style=\\\"color: var(--base08)\\\"\u003ebutton\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"26\\\"\u003e      \u0026#x3C;/\u003cspan style=\\\"color: var(--base0A)\\\"\u003eForm\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"27\\\"\u003e    \u0026#x3C;/\u003cspan style=\\\"color: var(--base08)\\\"\u003ediv\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"28\\\"\u003e  );\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"29\\\"\u003e}\\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\",\"siteUrl\",\"https://remix.run\",\"mutations\",{\"_17\":28,\"_29\":30},\"sequence\",\"slides\",[31,36,38,40],{\"_17\":32,\"_33\":34,\"_19\":35},\"slide\",\"subject\",\"\u003cdiv data-code-block=\\\"\\\" data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\"\u003e\u003cpre data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\" style=\\\"color: var(--base05);\\\"\u003e\u003ccode\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"1\\\"\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003eexport\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003edefault\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003efunction\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eNewInvoice\u003c/span\u003e() {\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"2\\\"\u003e  \u003cspan style=\\\"color: var(--base0E)\\\"\u003ereturn\u003c/span\u003e (\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"3\\\"\u003e    \u0026#x3C;\u003cspan style=\\\"color: var(--base0A)\\\"\u003eForm\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003emethod\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003epost\u003c/span\u003e\\\"\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"4\\\"\u003e      \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003einput\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003etype\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003etext\u003c/span\u003e\\\" \u003cspan style=\\\"color: var(--base0D)\\\"\u003ename\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003ecompany\u003c/span\u003e\\\" /\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"5\\\"\u003e      \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003einput\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003etype\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003etext\u003c/span\u003e\\\" \u003cspan style=\\\"color: var(--base0D)\\\"\u003ename\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003eamount\u003c/span\u003e\\\" /\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"6\\\"\u003e      \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003ebutton\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003etype\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003esubmit\u003c/span\u003e\\\"\u003eCreate\u0026#x3C;/\u003cspan style=\\\"color: var(--base08)\\\"\u003ebutton\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"7\\\"\u003e    \u0026#x3C;/\u003cspan style=\\\"color: var(--base0A)\\\"\u003eForm\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"8\\\"\u003e  );\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"9\\\"\u003e}\\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\",\"\",{\"_17\":32,\"_33\":37,\"_19\":35},\"\u003cdiv data-code-block=\\\"\\\" data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\"\u003e\u003cpre data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\" style=\\\"color: var(--base05);\\\"\u003e\u003ccode\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"1\\\"\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003eexport\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003edefault\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003efunction\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eNewInvoice\u003c/span\u003e() {\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"2\\\"\u003e  \u003cspan style=\\\"color: var(--base0E)\\\"\u003ereturn\u003c/span\u003e (\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"3\\\"\u003e    \u0026#x3C;\u003cspan style=\\\"color: var(--base0A)\\\"\u003eForm\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003emethod\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003epost\u003c/span\u003e\\\"\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"4\\\"\u003e      \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003einput\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003etype\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003etext\u003c/span\u003e\\\" \u003cspan style=\\\"color: var(--base0D)\\\"\u003ename\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003ecompany\u003c/span\u003e\\\" /\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"5\\\"\u003e      \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003einput\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003etype\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003etext\u003c/span\u003e\\\" \u003cspan style=\\\"color: var(--base0D)\\\"\u003ename\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003eamount\u003c/span\u003e\\\" /\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"6\\\"\u003e      \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003ebutton\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003etype\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003esubmit\u003c/span\u003e\\\"\u003eCreate\u0026#x3C;/\u003cspan style=\\\"color: var(--base08)\\\"\u003ebutton\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"7\\\"\u003e    \u0026#x3C;/\u003cspan style=\\\"color: var(--base0A)\\\"\u003eForm\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"8\\\"\u003e  );\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"9\\\"\u003e}\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"10\\\"\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"11\\\"\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003eexport\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003easync\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003efunction\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eaction\u003c/span\u003e({ \u003cspan style=\\\"color: var(--base08)\\\"\u003erequest\u003c/span\u003e }) {\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"12\\\"\u003e  \u003cspan style=\\\"color: var(--base0A)\\\"\u003econst\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003ebody\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003eawait\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003erequest\u003c/span\u003e.\u003cspan style=\\\"color: var(--base0D)\\\"\u003eformData\u003c/span\u003e();\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"13\\\"\u003e  \u003cspan style=\\\"color: var(--base0A)\\\"\u003econst\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003einvoice\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003eawait\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003ecreateInvoice\u003c/span\u003e(\u003cspan style=\\\"color: var(--base08)\\\"\u003ebody\u003c/span\u003e);\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"14\\\"\u003e  \u003cspan style=\\\"color: var(--base0E)\\\"\u003ereturn\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eredirect\u003c/span\u003e(`\u003cspan style=\\\"color: var(--base0B)\\\"\u003e/invoices/\u003c/span\u003e${\u003cspan style=\\\"color: var(--base08)\\\"\u003einvoice\u003c/span\u003e.\u003cspan style=\\\"color: var(--base08)\\\"\u003eid\u003c/span\u003e}`);\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"15\\\"\u003e}\\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\",{\"_17\":32,\"_33\":39,\"_19\":35},\"\u003cdiv data-code-block=\\\"\\\" data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\"\u003e\u003cpre data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\" style=\\\"color: var(--base05);\\\"\u003e\u003ccode\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"1\\\"\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003eexport\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003edefault\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003efunction\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eNewInvoice\u003c/span\u003e() {\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"2\\\"\u003e  \u003cspan style=\\\"color: var(--base0A)\\\"\u003econst\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003enavigation\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003euseNavigation\u003c/span\u003e();\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"3\\\"\u003e  \u003cspan style=\\\"color: var(--base0E)\\\"\u003ereturn\u003c/span\u003e (\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"4\\\"\u003e    \u0026#x3C;\u003cspan style=\\\"color: var(--base0A)\\\"\u003eForm\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003emethod\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003epost\u003c/span\u003e\\\"\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"5\\\"\u003e      \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003einput\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003etype\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003etext\u003c/span\u003e\\\" \u003cspan style=\\\"color: var(--base0D)\\\"\u003ename\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003ecompany\u003c/span\u003e\\\" /\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"6\\\"\u003e      \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003einput\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003etype\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003etext\u003c/span\u003e\\\" \u003cspan style=\\\"color: var(--base0D)\\\"\u003ename\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003eamount\u003c/span\u003e\\\" /\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"7\\\"\u003e      \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003ebutton\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003etype\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003esubmit\u003c/span\u003e\\\"\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"8\\\"\u003e        \u003cspan style=\\\"color: var(--base0F)\\\"\u003e{\u003c/span\u003e\u003cspan style=\\\"color: var(--base08)\\\"\u003enavigation\u003c/span\u003e.\u003cspan style=\\\"color: var(--base08)\\\"\u003estate\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e===\u003c/span\u003e \\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003esubmitting\u003c/span\u003e\\\"\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"9\\\"\u003e          \u003cspan style=\\\"color: var(--base0E)\\\"\u003e?\u003c/span\u003e \\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003eCreating invoice...\u003c/span\u003e\\\"\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"10\\\"\u003e          \u003cspan style=\\\"color: var(--base0E)\\\"\u003e:\u003c/span\u003e \\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003eCreate invoice\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0F)\\\"\u003e}\u003c/span\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"11\\\"\u003e      \u0026#x3C;/\u003cspan style=\\\"color: var(--base08)\\\"\u003ebutton\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"12\\\"\u003e    \u0026#x3C;/\u003cspan style=\\\"color: var(--base0A)\\\"\u003eForm\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"13\\\"\u003e  );\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"14\\\"\u003e}\\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\",{\"_17\":32,\"_33\":41,\"_19\":35},\"\u003cdiv data-code-block=\\\"\\\" data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\"\u003e\u003cpre data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\" style=\\\"color: var(--base05);\\\"\u003e\u003ccode\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"1\\\"\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003eexport\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003edefault\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003efunction\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eNewInvoice\u003c/span\u003e() {\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"2\\\"\u003e  \u003cspan style=\\\"color: var(--base0A)\\\"\u003econst\u003c/span\u003e { \u003cspan style=\\\"color: var(--base08)\\\"\u003eformData\u003c/span\u003e, \u003cspan style=\\\"color: var(--base08)\\\"\u003estate\u003c/span\u003e } \u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003euseNavigation\u003c/span\u003e();\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"3\\\"\u003e  \u003cspan style=\\\"color: var(--base0A)\\\"\u003econst\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003esubmission\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003estate\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e!==\u003c/span\u003e \\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003eidle\u003c/span\u003e\\\";\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"4\\\"\u003e  \u003cspan style=\\\"color: var(--base0E)\\\"\u003ereturn\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003esubmission\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e?\u003c/span\u003e (\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"5\\\"\u003e    \u0026#x3C;\u003cspan style=\\\"color: var(--base0A)\\\"\u003eInvoice\u003c/span\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"6\\\"\u003e      \u003cspan style=\\\"color: var(--base0D)\\\"\u003einvoice\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e{\u003c/span\u003e\u003cspan style=\\\"color: var(--base08)\\\"\u003eObject\u003c/span\u003e.\u003cspan style=\\\"color: var(--base0D)\\\"\u003efromEntries\u003c/span\u003e(\u003cspan style=\\\"color: var(--base08)\\\"\u003eformData\u003c/span\u003e)\u003cspan style=\\\"color: var(--base0F)\\\"\u003e}\u003c/span\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"7\\\"\u003e    /\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"8\\\"\u003e  ) \u003cspan style=\\\"color: var(--base0E)\\\"\u003e:\u003c/span\u003e (\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"9\\\"\u003e    \u0026#x3C;\u003cspan style=\\\"color: var(--base0A)\\\"\u003eForm\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003emethod\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003epost\u003c/span\u003e\\\"\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"10\\\"\u003e      \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003einput\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003etype\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003etext\u003c/span\u003e\\\" \u003cspan style=\\\"color: var(--base0D)\\\"\u003ename\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003ecompany\u003c/span\u003e\\\" /\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"11\\\"\u003e      \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003einput\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003etype\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003etext\u003c/span\u003e\\\" \u003cspan style=\\\"color: var(--base0D)\\\"\u003ename\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003eamount\u003c/span\u003e\\\" /\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"12\\\"\u003e      \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003ebutton\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003etype\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\\\"\u003cspan style=\\\"color: var(--base0B)\\\"\u003esubmit\u003c/span\u003e\\\"\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"13\\\"\u003e        Create invoice\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"14\\\"\u003e      \u0026#x3C;/\u003cspan style=\\\"color: var(--base08)\\\"\u003ebutton\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"15\\\"\u003e    \u0026#x3C;/\u003cspan style=\\\"color: var(--base0A)\\\"\u003eForm\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"16\\\"\u003e  );\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"17\\\"\u003e}\\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\",\"errors\",{\"_17\":28,\"_29\":44},[45,47,49],{\"_17\":32,\"_33\":46,\"_19\":35},\"\u003cdiv data-code-block=\\\"\\\" data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\"\u003e\u003cpre data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\" style=\\\"color: var(--base05);\\\"\u003e\u003ccode\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"1\\\"\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003eexport\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003edefault\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003efunction\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eInvoiceRoute\u003c/span\u003e() {\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"2\\\"\u003e  \u003cspan style=\\\"color: var(--base0A)\\\"\u003econst\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003einvoice\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003euseLoaderData\u003c/span\u003e();\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"3\\\"\u003e  \u003cspan style=\\\"color: var(--base0E)\\\"\u003ereturn\u003c/span\u003e \u0026#x3C;\u003cspan style=\\\"color: var(--base0A)\\\"\u003eInvoice\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003edata\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e{\u003c/span\u003e\u003cspan style=\\\"color: var(--base08)\\\"\u003einvoice\u003c/span\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e}\u003c/span\u003e /\u003e;\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"4\\\"\u003e}\\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\",{\"_17\":32,\"_33\":48,\"_19\":35},\"\u003cdiv data-code-block=\\\"\\\" data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\"\u003e\u003cpre data-line-numbers=\\\"true\\\" data-lang=\\\"tsx\\\" style=\\\"color: var(--base05);\\\"\u003e\u003ccode\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"1\\\"\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003eexport\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003edefault\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003efunction\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eInvoiceRoute\u003c/span\u003e() {\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"2\\\"\u003e  \u003cspan style=\\\"color: var(--base0A)\\\"\u003econst\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003einvoice\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003euseLoaderData\u003c/span\u003e();\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"3\\\"\u003e  \u003cspan style=\\\"color: var(--base0E)\\\"\u003ereturn\u003c/span\u003e \u0026#x3C;\u003cspan style=\\\"color: var(--base0A)\\\"\u003eInvoice\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003edata\u003c/span\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e{\u003c/span\u003e\u003cspan style=\\\"color: var(--base08)\\\"\u003einvoice\u003c/span\u003e\u003cspan style=\\\"color: var(--base0F)\\\"\u003e}\u003c/span\u003e /\u003e;\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"4\\\"\u003e}\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"5\\\"\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"6\\\"\u003e\u003cspan style=\\\"color: var(--base0E)\\\"\u003eexport\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003efunction\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003eErrorBoundary\u003c/span\u003e() {\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"7\\\"\u003e  \u003cspan style=\\\"color: var(--base0A)\\\"\u003elet\u003c/span\u003e \u003cspan style=\\\"color: var(--base08)\\\"\u003eerror\u003c/span\u003e \u003cspan style=\\\"color: var(--base0E)\\\"\u003e=\u003c/span\u003e \u003cspan style=\\\"color: var(--base0D)\\\"\u003euseRouteError\u003c/span\u003e();\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"8\\\"\u003e  \u003cspan style=\\\"color: var(--base08)\\\"\u003econsole\u003c/span\u003e.\u003cspan style=\\\"color: var(--base0D)\\\"\u003eerror\u003c/span\u003e(\u003cspan style=\\\"color: var(--base08)\\\"\u003eerror\u003c/span\u003e);\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"9\\\"\u003e  \u003cspan style=\\\"color: var(--base0E)\\\"\u003ereturn\u003c/span\u003e (\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"10\\\"\u003e    \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003ediv\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"11\\\"\u003e      \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003eh2\u003c/span\u003e\u003eOh snap!\u0026#x3C;/\u003cspan style=\\\"color: var(--base08)\\\"\u003eh2\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"12\\\"\u003e      \u0026#x3C;\u003cspan style=\\\"color: var(--base08)\\\"\u003ep\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"13\\\"\u003e        There was a problem loading this invoice\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"14\\\"\u003e      \u0026#x3C;/\u003cspan style=\\\"color: var(--base08)\\\"\u003ep\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-highlight=\\\"true\\\" data-line-number=\\\"15\\\"\u003e    \u0026#x3C;/\u003cspan style=\\\"color: var(--base08)\\\"\u003ediv\u003c/span\u003e\u003e\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"16\\\"\u003e  );\\n\u003c/span\u003e\u003cspan class=\\\"codeblock-line\\\" data-line-number=\\\"17\\\"\u003e}\\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\",{\"_17\":32,\"_33\":46,\"_19\":35},\"routes/_marketing\",\"actionData\"]\n");</script><!--$--><script>window.__remixContext.streamController.close();</script><!--/$--><!--/$--><script>function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}};$RC("B:0","S:0")</script><script>$RC("B:1","S:1")</script></body></html><!--$?-->