fix: remove Suspense wrapper from hero splash logo to prevent CLS

The LazyBrandContextMenu Suspense boundary caused layout shift on page
load as the fallback div swapped to the loaded component. Since both
rendered the same images, replace with direct rendering.

Author: franklinjavier

src/routes/index.tsx

@@ -28,12 +28,6 @@ import LibraryCard from '~/components/LibraryCard'
 import { FeaturedShowcases } from '~/components/ShowcaseSection'
 import { Button } from '~/ui'
 
-const LazyBrandContextMenu = React.lazy(() =>
-  import('~/components/BrandContextMenu').then((m) => ({
-    default: m.BrandContextMenu,
-  })),
-)
-
 export const textColors = [
   `text-rose-500`,
   `text-yellow-500`,
@@ -127,55 +121,26 @@ function Index() {
                   />
                 </Link>
               </ClientOnly>
-              <React.Suspense
-                fallback={
-                  <div className="cursor-pointer relative z-10">
-                    <NetlifyImage
-                      src="/images/logos/splash-light.png"
-                      width={500}
-                      height={500}
-                      quality={85}
-                      className="w-[300px] pt-8 xl:pt-0 xl:w-[400px] 2xl:w-[500px] dark:hidden"
-                      alt="TanStack Logo"
-                      loading="eager"
-                      fetchPriority="high"
-                    />
-                    <NetlifyImage
-                      src="/images/logos/splash-dark.png"
-                      width={500}
-                      height={500}
-                      quality={85}
-                      className="w-[300px] pt-8 xl:pt-0 xl:w-[400px] 2xl:w-[500px] hidden dark:block"
-                      alt="TanStack Logo"
-                      loading="eager"
-                      fetchPriority="high"
-                    />
-                  </div>
-                }
-              >
-                <LazyBrandContextMenu className="cursor-pointer relative z-10">
-                  <NetlifyImage
-                    src="/images/logos/splash-light.png"
-                    width={500}
-                    height={500}
-                    quality={85}
-                    className="w-[300px] pt-8 xl:pt-0 xl:w-[400px] 2xl:w-[500px] dark:hidden"
-                    alt="TanStack Logo"
-                    loading="eager"
-                    fetchPriority="high"
-                  />
-                  <NetlifyImage
-                    src="/images/logos/splash-dark.png"
-                    width={500}
-                    height={500}
-                    quality={85}
-                    className="w-[300px] pt-8 xl:pt-0 xl:w-[400px] 2xl:w-[500px] hidden dark:block"
-                    alt="TanStack Logo"
-                    loading="eager"
-                    fetchPriority="high"
-                  />
-                </LazyBrandContextMenu>
-              </React.Suspense>
+              <NetlifyImage
+                src="/images/logos/splash-light.png"
+                width={500}
+                height={500}
+                quality={85}
+                className="w-[300px] pt-8 xl:pt-0 xl:w-[400px] 2xl:w-[500px] dark:hidden"
+                alt="TanStack Logo"
+                loading="eager"
+                fetchPriority="high"
+              />
+              <NetlifyImage
+                src="/images/logos/splash-dark.png"
+                width={500}
+                height={500}
+                quality={85}
+                className="w-[300px] pt-8 xl:pt-0 xl:w-[400px] 2xl:w-[500px] hidden dark:block"
+                alt="TanStack Logo"
+                loading="eager"
+                fetchPriority="high"
+              />
             </div>
             <div className="flex flex-col items-center gap-6 text-center px-4 xl:text-left xl:items-start">
               <div className="flex gap-2 lg:gap-4 items-center">