Squashed commit of the following:

commit bbf390b6917aaf89692dc20d5a4727c5b5970c04
Author: Tanner Linsley <tannerlinsley@gmail.com>
Date:   Tue Aug 12 13:34:52 2025 -0600

    done

commit fb94aa3b66cad69d3125a1acc5206405ee767b3e
Author: Tanner Linsley <tannerlinsley@gmail.com>
Date:   Mon Aug 11 11:26:43 2025 -0600

    refactor checkpoint

Author: tannerlinsley

src/components/BottomCTA.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import type { LinkProps } from '@tanstack/react-router'
+import { Link } from '@tanstack/react-router'
+import { twMerge } from 'tailwind-merge'
+
+type BottomCTAProps = {
+  linkProps: Omit<LinkProps, 'className' | 'children'>
+  label?: string
+  className?: string
+}
+
+export function BottomCTA({
+  linkProps,
+  label = 'Get Started!',
+  className,
+}: BottomCTAProps) {
+  return (
+    <div className="flex flex-col gap-4 items-center">
+      <div className="font-extrabold text-xl lg:text-2xl">
+        Wow, you've come a long way!
+      </div>
+      <div className="italic font-sm opacity-70">
+        Only one thing left to do...
+      </div>
+      <div>
+        <Link
+          {...linkProps}
+          className={twMerge(
+            'inline-block py-2 px-4 rounded uppercase font-extrabold transition-colors',
+            className
+          )}
+        >
+          {label}
+        </Link>
+      </div>
+    </div>
+  )
+}

src/components/FeatureGrid.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import { FaCheckCircle } from 'react-icons/fa'
+
+type FeatureGridProps = {
+  title?: string
+  items: React.ReactNode[]
+  gridClassName?: string
+}
+
+export function FeatureGrid({ title, items, gridClassName }: FeatureGridProps) {
+  return (
+    <div className="px-4 sm:px-6 lg:px-8 mx-auto">
+      {title ? (
+        <div className=" sm:text-center pb-16">
+          <h3 className="text-3xl text-center mx-auto leading-tight font-extrabold tracking-tight sm:text-4xl lg:leading-none mt-2">
+            {title}
+          </h3>
+        </div>
+      ) : null}
+      <div
+        className={
+          gridClassName ||
+          'grid grid-flow-row grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-4 mx-auto'
+        }
+      >
+        {items.map((d, i) => (
+          <span key={i} className="flex items-center gap-2">
+            <FaCheckCircle className="text-green-500 " /> {d}
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}

src/components/LibraryHero.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+import { Link } from '@tanstack/react-router'
+
+type LibraryHeroProps = {
+  libraryName: string // e.g., "Query"
+  gradientFrom: string
+  gradientTo: string
+  subtitle: React.ReactNode
+  description?: React.ReactNode
+  cta?: {
+    linkProps: React.ComponentProps<typeof Link>
+    label: string
+    className?: string
+  }
+  statusBadge?: string
+}
+
+export function LibraryHero({
+  libraryName,
+  gradientFrom,
+  gradientTo,
+  subtitle,
+  description,
+  cta,
+  statusBadge,
+}: LibraryHeroProps) {
+  const gradientText = `pr-1 inline-block text-transparent bg-clip-text bg-gradient-to-r ${gradientFrom} ${gradientTo}`
+
+  return (
+    <div className="flex flex-col items-center gap-8 text-center px-4">
+      <h1 className="font-black flex gap-3 items-center text-4xl md:text-6xl lg:text-7xl xl:text-8xl uppercase [letter-spacing:-.05em]">
+        <span>TanStack</span>
+        <span className={twMerge(gradientText)}>{libraryName}</span>
+      </h1>
+      {statusBadge ? (
+        <div
+          className={twMerge(
+            'text-sm md:text-base font-black lg:text-lg align-super text-white animate-bounce uppercase',
+            'dark:text-black bg-black dark:bg-white shadow-xl shadow-black/30 px-2 py-1 rounded-md',
+            'leading-none whitespace-nowrap'
+          )}
+        >
+          STATUS: {statusBadge}
+        </div>
+      ) : null}
+      <h2 className="font-bold text-2xl max-w-md md:text-3xl lg:text-5xl lg:max-w-2xl">
+        {subtitle}
+      </h2>
+      {description ? (
+        <p className="text opacity-90 max-w-sm lg:text-xl lg:max-w-2xl">
+          {description}
+        </p>
+      ) : null}
+      {cta ? (
+        <Link
+          {...cta.linkProps}
+          className={twMerge(
+            'inline-block py-2 px-4 rounded uppercase font-extrabold transition-colors',
+            cta.className
+          )}
+        >
+          {cta.label}
+        </Link>
+      ) : null}
+    </div>
+  )
+}

src/components/PartnersSection.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react'
+import { Link } from '@tanstack/react-router'
+import { partners } from '~/utils/partners'
+
+type PartnersSectionProps = {
+  libraryId?: string
+  title?: string
+  gridClassName?: string
+  showPreviousLink?: boolean
+}
+
+export function PartnersSection({
+  libraryId,
+  title = 'Partners',
+  gridClassName = 'grid grid-cols-1 gap-6 sm:grid-cols-2',
+  showPreviousLink = true,
+}: PartnersSectionProps) {
+  const filtered = partners.filter((p) =>
+    libraryId
+      ? p.libraries?.includes(libraryId as any) && p.status === 'active'
+      : p.status === 'active'
+  )
+
+  return (
+    <div className="px-4 lg:max-w-screen-lg md:mx-auto mx-auto">
+      <h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-8">
+        {title}
+      </h3>
+      <div className="h-8" />
+      <div className={gridClassName}>
+        {filtered.map((partner) => (
+          <a
+            key={partner.name}
+            href={partner.href}
+            target="_blank"
+            className="shadow-xl shadow-gray-500/20 rounded-lg dark:border border-gray-500/20 bg-white dark:bg-black/40 dark:shadow-none group overflow-hidden grid"
+            rel="noreferrer"
+          >
+            <div className="z-0 row-start-1 col-start-1 flex items-center justify-center group-hover:blur-sm transition-all duration-200">
+              {partner.homepageImg}
+            </div>
+            <div className="z-10 row-start-1 col-start-1 max-w-full p-4 text-sm flex flex-col gap-4 items-start opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-white/70 dark:bg-gray-800/70">
+              {partner.content}
+            </div>
+          </a>
+        ))}
+      </div>
+      {showPreviousLink ? (
+        <div className="text-center mt-6">
+          <Link
+            to="/partners"
+            search={
+              libraryId
+                ? { libraries: [libraryId], status: 'inactive' }
+                : { status: 'inactive' }
+            }
+            className="inline-flex items-center text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors"
+          >
+            View Previous Partners →
+          </Link>
+        </div>
+      ) : null}
+    </div>
+  )
+}

src/components/SponsorsSection.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react'
+import { Await } from '@tanstack/react-router'
+import { CgSpinner } from 'react-icons/cg'
+import SponsorPack from '~/components/SponsorPack'
+import { twMerge } from 'tailwind-merge'
+
+type SponsorsSectionProps = {
+  sponsorsPromise: Promise<any>
+  title?: string
+  aspectRatio?: string
+  showCTA?: boolean
+  ctaClassName?: string
+}
+
+export function SponsorsSection({
+  sponsorsPromise,
+  title = 'Sponsors',
+  aspectRatio = '1/1',
+  showCTA = true,
+  ctaClassName = 'bg-emerald-500 text-white',
+}: SponsorsSectionProps) {
+  return (
+    <div className="relative text-lg overflow-hidden">
+      <h3 className="text-center text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10 lg:leading-none mt-8">
+        {title}
+      </h3>
+      <div
+        className="my-4 flex flex-wrap mx-auto max-w-screen-lg"
+        style={{ aspectRatio }}
+      >
+        <Await
+          promise={sponsorsPromise}
+          fallback={<CgSpinner className="text-2xl animate-spin" />}
+        >
+          {(sponsors: any) => <SponsorPack sponsors={sponsors} />}
+        </Await>
+      </div>
+      {showCTA ? (
+        <div className="text-center">
+          <a
+            href="https://github.com/sponsors/tannerlinsley"
+            className={twMerge(
+              'inline-block py-2 px-4 rounded uppercase font-extrabold transition-colors',
+              ctaClassName
+            )}
+          >
+            Become a Sponsor!
+          </a>
+        </div>
+      ) : null}
+    </div>
+  )
+}

src/components/StackBlitzEmbed.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { useIsDark } from '~/hooks/useIsDark'
+
+type StackBlitzEmbedProps = {
+  repo: string
+  branch: string
+  examplePath: string
+  file?: string
+  preset?: 'node'
+  height?: string | number
+  title?: string
+}
+
+export function StackBlitzEmbed({
+  repo,
+  branch,
+  examplePath,
+  file,
+  preset = 'node',
+  height = '80vh',
+  title,
+}: StackBlitzEmbedProps) {
+  const isDark = useIsDark()
+  const themeParam = isDark ? 'dark' : 'light'
+  const fileParam = file ? `&file=${encodeURIComponent(file)}` : ''
+
+  const src = `https://stackblitz.com/github/${repo}/tree/${branch}/${examplePath}?embed=1&theme=${themeParam}&preset=${preset}${fileParam}`
+
+  return (
+    <iframe
+      key={`${examplePath}-${themeParam}`}
+      src={src}
+      title={title || `${repo}: ${examplePath}`}
+      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+      className="shadow-2xl"
+      loading="lazy"
+      style={{ width: '100%', height, border: '0' }}
+    />
+  )
+}

src/components/TrustedByMarquee.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+type TrustedByMarqueeProps = {
+  brands: string[]
+  speed?: number // pixels per second
+  className?: string
+}
+
+export function TrustedByMarquee({
+  brands,
+  speed = 40,
+  className,
+}: TrustedByMarqueeProps) {
+  const animationDuration = `${(brands.length * 150) / speed}s`
+
+  return (
+    <div className={twMerge('overflow-hidden w-full', className)}>
+      <div className="uppercase tracking-wider text-sm font-semibold text-center text-gray-400 mb-3">
+        Trusted in Production by
+      </div>
+      <div className="relative w-full">
+        <div
+          className="flex gap-6 items-center text-3xl font-bold whitespace-nowrap will-change-transform animate-[marquee_linear_infinite]"
+          style={{
+            animationDuration,
+          }}
+        >
+          {[...brands, ...brands, ...brands].map((d, i) => (
+            <span key={i} className="opacity-70 even:opacity-40">
+              {d}
+            </span>
+          ))}
+        </div>
+      </div>
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+          @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-33.333%); } }
+          .animate-\[marquee_linear_infinite\] { animation-name: marquee; animation-timing-function: linear; animation-iteration-count: infinite; }
+        `,
+        }}
+      />
+    </div>
+  )
+}

src/hooks/useIsDark.ts

@@ -0,0 +1,6 @@
+import { useTheme } from '~/components/ThemeProvider'
+
+export function useIsDark(): boolean {
+  const { resolvedTheme } = useTheme()
+  return resolvedTheme === 'dark'
+}