Fix brand page and splash hero image

Author: brookslybrand

app/pages/brand.tsx

@@ -37,7 +37,7 @@ export default function Brand() {
       </p>
       <p>
         <a
-          href="/_brand/React Router Brand Assets.zip"
+          href={encodeURI("/_brand/React Router Brand Assets.zip")}
           className="underline hover:text-red-brand"
           download
         >
@@ -125,6 +125,10 @@ let background = {
   dark: "bg-black bg-[linear-gradient(45deg,theme(colors.gray.800)_25%,transparent_25%,transparent_75%,theme(colors.gray.800)_75%,theme(colors.gray.800)),linear-gradient(45deg,theme(colors.gray.800)_25%,transparent_25%,transparent_75%,theme(colors.gray.800)_75%,theme(colors.gray.800))] bg-[length:24px_24px] bg-[position:0_0,12px_12px]",
 };
 
+function assetUrl(filePath: string, format = "svg") {
+  return encodeURI(`${filePath}.${format}`);
+}
+
 function LogoBox({
   filePath,
   theme,
@@ -147,15 +151,15 @@ function LogoBox({
       >
         <img
           className="max-h-[33%] max-w-[50%]"
-          src={`${filePath}.svg`}
+          src={assetUrl(filePath)}
           alt={alt}
         />
       </div>
       <div className="mt-1 flex items-end gap-4 text-sm">
         {["svg", "png"].map((format) => (
           <a
             className="uppercase underline opacity-50 hover:opacity-100"
-            href={`${filePath}.${format}`}
+            href={assetUrl(filePath, format)}
             download={`${downloadFilePath}.${format}`}
             key={format}
           >

app/pages/splash.tsx

@@ -115,21 +115,18 @@ export default function Home({ loaderData }: Route.ComponentProps) {
     <main className="flex min-h-full w-full flex-col items-center justify-center dark:bg-gray-900">
       <section className="from-23% via-82% flex w-full flex-col items-center gap-y-12 bg-gradient-to-b from-[#CCD2DE] via-[#D9DDE6] to-white to-100% py-[96px] dark:from-[#595F6C] dark:via-[#202228] dark:via-65% dark:to-gray-900 md:py-[160px]">
         <h1>
-          <picture className="aspect-[32/5] w-[360px] md:w-[480px] lg:w-[640px] 2xl:w-[960px]">
-            <source
-              srcSet="/splash/hero-3d-logo.webp"
-              media="(prefers-color-scheme: light)"
-            />
-            <source
-              srcSet="/splash/hero-3d-logo.dark.webp"
-              media="(prefers-color-scheme: dark)"
-            />
+          <span className="block">
             <img
               src="/splash/hero-3d-logo.webp"
               alt="React Router logo, six dots in an upward triangle (one on top, two in the middle, three on the bottom) with a path of three highlighted and connected from top to bottom, next to the text React Router"
-              className="aspect-[32/5] w-[360px] md:w-[480px] lg:w-[640px] 2xl:w-[960px]"
+              className="aspect-[32/5] w-[360px] dark:hidden md:w-[480px] lg:w-[640px] 2xl:w-[960px]"
+            />
+            <img
+              src="/splash/hero-3d-logo.dark.webp"
+              alt="React Router logo, six dots in an upward triangle (one on top, two in the middle, three on the bottom) with a path of three highlighted and connected from top to bottom, next to the text React Router"
+              className="hidden aspect-[32/5] w-[360px] dark:block md:w-[480px] lg:w-[640px] 2xl:w-[960px]"
             />
-          </picture>
+          </span>
         </h1>
         <p className="mx-12 max-w-[540px] text-center text-xl text-gray-700 dark:text-gray-200 md:mx-0">
           A user‑obsessed, standards‑focused, multi‑strategy router you can