chore(www): refine www styling (#47499)

### Logo positioning bug on Safari #### Before <img width="1538" height="1404" alt="CleanShot 2026-07-01 at 07 11 55@2x_b0d735b7df6470afb861f4e82cfeed554743cec621475197e07ff39a98c5c506" src="https://github.com/user-attachments/assets/dc8483bd-5a2a-4d89-9b90-d0ab3529b4b5" /> #### After <img width="1177" height="526" alt="Screenshot 2026-07-01 at 15 25 59" src="https://github.com/user-attachments/assets/e5ab66eb-56eb-4f1b-8a66-783aafad069d" /> ### Uniform h1 styling #### Before Font-weight too heavy <img width="721" height="504" alt="Screenshot 2026-07-01 at 15 55 53" src="https://github.com/user-attachments/assets/4dc4e157-f746-4626-9ec7-5e893d7155ba" /> #### After <img width="693" height="410" alt="Screenshot 2026-07-01 at 15 56 04" src="https://github.com/user-attachments/assets/c012d6e5-0889-4466-b2b2-56d1c9516e27" /> ### AI Builders platform card ### Before <img width="675" height="573" alt="Screenshot 2026-07-01 at 16 18 31" src="https://github.com/user-attachments/assets/a34e2fde-115b-45e8-8d44-9fc32c22c0a1" /> ### After <img width="640" height="576" alt="Screenshot 2026-07-01 at 16 18 23" src="https://github.com/user-attachments/assets/45ebf1c7-6508-40de-a755-dda17824979a" /> ### Logo theme-awareness on 404 page #### Before <img width="1053" height="670" alt="Screenshot 2026-07-02 at 11 22 45" src="https://github.com/user-attachments/assets/d1f45cc8-00ad-48ad-a21a-3b92bf6097f0" /> #### After <img width="1053" height="666" alt="Screenshot 2026-07-02 at 11 22 28" src="https://github.com/user-attachments/assets/8b6435aa-da87-46f3-9d5c-750f8222edb1" /> --- Plus other minor padding/spacing issues: - remove customer stories in homepage - use correct container width and align "Use Supabase with [framework]" section - restore default `--font-sm` sizing as it resulted too small for www  ## Summary by CodeRabbit * **Bug Fixes / UI Improvements** * Refined spacing, layout, and responsive styling across multiple homepage sections. * Improved featured logo positioning and adjusted community/hero copy sizing. * Updated site typography for better readability and wrapping. * Refreshed the 404 experience with a smoother reveal animation and consistent layout. * Updated deep dark-mode behavior to apply only during launch weeks. * **Performance** * Lazy-loaded multiple homepage sections to improve initial load and perceived speed. * **SEO / New Features** * Added a dedicated 404 page that disables indexing.
2026-10-05 09:25:06 +03:00 · 2026-07-03 03:14:43 +10:00
1 parent f9fc5c8020
commit aa764e4013
@@ -135,7 +135,7 @@ export function BuiltWithSupabaseSection() {
                    <img
                      src={logo.src}
                      alt=""
-                      className={`h-5 w-fit object-contain ${logo.invert ? ' dark:invert' : ''}`}
+                      className={`h-5 w-fit object-contain object-left ${logo.invert ? ' dark:invert' : ''}`}
                    />
                  )}
                  <div>
@@ -44,7 +44,7 @@ export function CommunitySectionV2() {
      <div className="mx-auto">
        <div className="flex flex-col items-center gap-3 px-6 py-20">
          <h3 className="text-2xl md:text-4xl text-center">Join the community</h3>
-          <p className="text-foreground-lighter text-center text-sm">
+          <p className="text-foreground-lighter text-center">
            Discover what our community has to say about their Supabase experience.
          </p>
          <Button asChild variant="default" size="small" className="mt-2">
@@ -3,39 +3,11 @@
 import BrowserFrame from '~/components/BrowserFrame'
 import { AnimatePresence, motion, useInView } from 'framer-motion'
 import { useTheme } from 'next-themes'
-import Link from 'next/link'
 import React, { useRef, useState } from 'react'
 import { cn } from 'ui'

 import SectionContainer from '@/components/Layouts/SectionContainer'

-const dashboardStories = [
-  {
-    logo: '/images/customers/logos/hyper-icon.svg',
-    name: 'Hyper',
-    quote:
-      'We store embeddings in a PostgreSQL database, hosted by Supabase, to perform a similarity search to identify the most relevant sections within the MDN.',
-    author: 'Hermina Condei, Director at MDN, Mozilla',
-    slug: 'mozilla-mdn',
-  },
-  {
-    logo: '/images/customers/logos/chatbase-icon.svg',
-    name: 'Chatbase',
-    quote:
-      'The SQL Editor in Supabase is my favorite feature — it lets us run complex queries, debug issues, and iterate on our schema without ever leaving the browser.',
-    author: 'Yasser Elsaid, Founder of Chatbase',
-    slug: 'chatbase',
-  },
-  {
-    logo: '/images/customers/logos/markprompt-icon.svg',
-    name: 'Markprompt',
-    quote:
-      'Row Level Security in Supabase allows us to set granular access policies directly in Postgres, so our multi-tenant architecture stays secure by default.',
-    author: 'Michael Fester, Co-Founder of Markprompt',
-    slug: 'markprompt',
-  },
-]
-
 export function DashboardFeaturesSection({
  title,
  tabs,
@@ -55,90 +27,51 @@ export function DashboardFeaturesSection({
  if (tabs.length === 0) return null

  const Panel = tabs[activeTabIdx].panel
-  const story = dashboardStories[activeTabIdx] ?? dashboardStories[0]

  return (
-    <>
-      <SectionContainer ref={sectionRef} className="pt-10! pb-4! overflow-hidden">
-        <div className="pt-12 flex flex-col gap-8">
-          <h3 className="text-2xl md:text-4xl text-foreground-lighter">{title}</h3>
-          <div className="flex gap-2" role="tablist">
-            {tabs.map((tab, index) => (
-              <button
-                key={index}
-                onClick={() => setActiveTabIdx(index)}
-                aria-selected={index === activeTabIdx}
-                role="tab"
-                className={cn(
-                  'py-1.5 px-3 lg:py-2 lg:px-8 border rounded-full bg-alternative hover:border-foreground text-sm opacity-80 transition-all',
-                  'hover:border-foreground-lighter hover:text-foreground',
-                  index === activeTabIdx ? 'opacity-100 !border-foreground' : ''
-                )}
-              >
-                {tab.label}
-              </button>
-            ))}
-          </div>
+    <SectionContainer ref={sectionRef} className="pt-10! pb-4! space-y-8 overflow-hidden">
+      <div className="pt-12 flex flex-col gap-8">
+        <h3 className="text-2xl md:text-4xl text-foreground-lighter">{title}</h3>
+        <div className="flex gap-2" role="tablist">
+          {tabs.map((tab, index) => (
+            <button
+              key={index}
+              onClick={() => setActiveTabIdx(index)}
+              aria-selected={index === activeTabIdx}
+              role="tab"
+              className={cn(
+                'py-1.5 px-3 lg:py-2 lg:px-8 border rounded-full bg-alternative hover:border-foreground text-sm opacity-80 transition-all',
+                'hover:border-foreground-lighter hover:text-foreground',
+                index === activeTabIdx ? 'opacity-100 !border-foreground' : ''
+              )}
+            >
+              {tab.label}
+            </button>
+          ))}
        </div>
+      </div>

-        <BrowserFrame
-          className="overflow-hidden bg-default w-full mx-auto translate-y-16"
-          contentClassName="aspect-video overflow-hidden rounded-lg"
-        >
-          {isInView && (
-            <AnimatePresence mode="wait">
-              <motion.div
-                key={tabs[activeTabIdx]?.label}
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1, transition: { duration: 0.1, delay: 0.2 } }}
-                exit={{ opacity: 0, transition: { duration: 0.05 } }}
-                className="relative w-full max-w-full h-full"
-              >
-                <Panel
-                  key={String(resolvedTheme?.includes('dark'))}
-                  isDark={resolvedTheme?.includes('dark') ?? false}
-                />
-              </motion.div>
-            </AnimatePresence>
-          )}
-        </BrowserFrame>
-      </SectionContainer>
-
-      {/* Customer story banner */}
-      <div className="border-t border-border">
-        <SectionContainer className="py-4!">
+      <BrowserFrame
+        className="overflow-hidden bg-default w-full mx-auto -mb-16"
+        contentClassName="aspect-video overflow-hidden rounded-lg"
+      >
+        {isInView && (
          <AnimatePresence mode="wait">
            <motion.div
-              key={story.slug}
+              key={tabs[activeTabIdx]?.label}
              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.2 }}
-              className="flex flex-col md:flex-row md:items-center gap-4 md:gap-6 px-6 py-5"
+              animate={{ opacity: 1, transition: { duration: 0.1, delay: 0.2 } }}
+              exit={{ opacity: 0, transition: { duration: 0.05 } }}
+              className="relative w-full max-w-full h-full"
            >
-              <img
-                src={story.logo}
-                alt={story.name}
-                className="h-8 w-8 shrink-0 object-contain grayscale opacity-80 dark:invert"
+              <Panel
+                key={String(resolvedTheme?.includes('dark'))}
+                isDark={resolvedTheme?.includes('dark') ?? false}
              />
-              <div className="flex-1 min-w-0">
-                <p className="text-foreground-lighter text-sm">
-                  <span className="font-medium text-foreground">{story.name}</span>
-                  {' — '}
-                  {story.quote} <span className="text-foreground-muted">{story.author}</span>
-                </p>
-              </div>
-
-              <Link
-                href={`/customers/${story.slug}`}
-                className="shrink-0 text-sm text-foreground-lighter hover:text-foreground transition-colors whitespace-nowrap"
-              >
-                View more about {story.name}
-              </Link>
            </motion.div>
          </AnimatePresence>
-        </SectionContainer>
-      </div>
-    </>
+        )}
+      </BrowserFrame>
+    </SectionContainer>
  )
 }
@@ -5,6 +5,8 @@ import Link from 'next/link'
 import { useState } from 'react'
 import { cn } from 'ui'

+import SectionContainerWithCn from '../../../components/Layouts/SectionContainerWithCn'
+
 type Framework = {
  name: string
  icon: string
@@ -23,14 +25,14 @@ export function FrameworksSectionClient({ frameworks }: { frameworks: Framework[
  }

  return (
-    <div className="border-b border-border py-24">
-      <div className="mx-auto max-w-(--container-max-w,75rem) px-6">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 md:gap-0">
+    <div className="border-b border-border">
+      <SectionContainerWithCn>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 md:gap-0">
          {/* Left: title */}
-          <div className="flex flex-col justify-between py-4 gap-6 md:gap-10">
+          <div className="flex flex-col justify-between gap-6 md:gap-10">
            <h3 className="text-2xl md:text-4xl text-foreground-lighter">
              Use Supabase with{' '}
-              <span className="block">
+              <span className="md:block">
                <AnimatePresence mode="popLayout" initial={false}>
                  <motion.span
                    key={active.name}
@@ -134,7 +136,7 @@ export function FrameworksSectionClient({ frameworks }: { frameworks: Framework[
            </div>
          </div>
        </div>
-      </div>
+      </SectionContainerWithCn>
    </div>
  )
 }
@@ -10,14 +10,14 @@ export function Hero() {
  const sendTelemetryEvent = useSendTelemetryEvent()

  return (
-    <SectionContainer className="pt-12 pb-24 md:pt-40! md:pb-32">
+    <SectionContainer className="pt-12 pb-8 md:pt-40! md:pb-16">
      <div className="flex flex-col gap-6 lg:gap-8">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-end">
-          <h1 className="text-foreground text-4xl sm:text-5xl sm:leading-none font-medium tracking-normal">
+          <h1 className="text-foreground text-4xl sm:text-5xl sm:leading-none">
            <span className="block">Build in a weekend</span>
            <span className="text-brand block">Scale to millions</span>
          </h1>
-          <p className="text-foreground-lighter text-sm lg:text-base text-balance">
+          <p className="text-foreground-lighter text-balance">
            Start your project with a Postgres database. Add Authentication, Data APIs, Edge
            Functions, Realtime Data, Storage, and Vector embeddings.
          </p>
@@ -4,15 +4,23 @@ import getContent from '~/data/home/content'
 import dynamic from 'next/dynamic'

 import { BuiltWithSupabaseSection } from './BuiltWithSupabaseSection'
-import { CommunitySectionV2 as CommunitySection } from './CommunitySectionV2'
-import { CTASection } from './CTASection'
-import { CustomerStoriesSection } from './CustomerStoriesSection'
-import { DashboardFeaturesSection } from './DashboardFeaturesSection'
 import { Hero } from './Hero'
-import { LogosGrid } from './LogosGrid'
-import { OpenSourceSection } from './OpenSourceSection'

-const Products = dynamic(() => import('~/components/Products/index'))
+const Products = dynamic(() => import('@/components/Products/index'))
+const CommunitySection = dynamic(() =>
+  import('./CommunitySectionV2').then((mod) => mod.CommunitySectionV2)
+)
+const CTASection = dynamic(() => import('./CTASection').then((mod) => mod.CTASection))
+const CustomerStoriesSection = dynamic(() =>
+  import('./CustomerStoriesSection').then((mod) => mod.CustomerStoriesSection)
+)
+const DashboardFeaturesSection = dynamic(() =>
+  import('./DashboardFeaturesSection').then((mod) => mod.DashboardFeaturesSection)
+)
+const LogosGrid = dynamic(() => import('./LogosGrid').then((mod) => mod.LogosGrid))
+const OpenSourceSection = dynamic(() =>
+  import('./OpenSourceSection').then((mod) => mod.OpenSourceSection)
+)

 export function HomeContent({ frameworksSlot }: { frameworksSlot: React.ReactNode }) {
  const content = getContent()
@@ -23,9 +31,7 @@ export function HomeContent({ frameworksSlot }: { frameworksSlot: React.ReactNod
        <Hero />
      </header>
      <section id="products" className="relative">
-        <div className="-translate-y-16">
-          <Products {...content.productsSection} />
-        </div>
+        <Products {...content.productsSection} />
      </section>
      <section id="social-proof">
        <LogosGrid />
@@ -0,0 +1,14 @@
+import { type Metadata } from 'next'
+
+import Error404 from '@/components/Error404'
+
+export const metadata: Metadata = {
+  title: '404: This page could not be found',
+  robots: {
+    index: false,
+  },
+}
+
+export default function NotFound() {
+  return <Error404 />
+}
@@ -0,0 +1,64 @@
+'use client'
+
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import { Button } from 'ui'
+
+import DefaultLayout from '@/components/Layouts/Default'
+import SupabaseWordmark from '@/components/Nav/SupabaseWordmark'
+
+const Error404 = () => {
+  const [show404, setShow404] = useState<boolean>(false)
+
+  useEffect(() => {
+    setTimeout(() => {
+      setShow404(true)
+    }, 500)
+  }, [])
+
+  return (
+    <DefaultLayout hideHeader hideFooter>
+      <div className="relative mx-auto flex h-screen w-full flex-col items-center justify-center">
+        <div className="absolute top-0 mx-auto w-full max-w-7xl px-8 pt-6 sm:px-6 lg:px-8">
+          <nav className="relative flex items-center justify-between sm:h-10">
+            <div className="flex shrink-0 grow items-center lg:grow-0">
+              <div className="flex w-full items-center justify-between md:w-auto">
+                <a href="/" className="text-foreground block w-auto h-6">
+                  <SupabaseWordmark />
+                </a>
+              </div>
+            </div>
+          </nav>
+        </div>
+        <div className="absolute">
+          <h1
+            className={`text-foreground select-none text-[14rem] opacity-5 filter transition duration-200 sm:text-[18rem] lg:text-[28rem] ${
+              show404 ? 'blur-xs' : 'blur-none'
+            }`}
+          >
+            404
+          </h1>
+        </div>
+        <div
+          className={`flex flex-col items-center justify-center space-y-6 transition ${
+            show404 ? 'opacity-100' : 'opacity-0'
+          }`}
+        >
+          <div className="text-foreground flex w-full max-w-sm flex-col items-center justify-center space-y-3">
+            <h1 className="m-2 text-2xl">Looking for something? 🔍</h1>
+            <p className="text-center text-sm">
+              We couldn't find the page that you're looking for!
+            </p>
+          </div>
+          <div className="flex items-center space-x-4">
+            <Button asChild size="small" className="text-white">
+              <Link href="/">Head back</Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </DefaultLayout>
+  )
+}
+
+export default Error404
@@ -1,8 +1,9 @@
-import styles from './features-grid.module.css'
+import Panel from '~/components/Panel'
 import React from 'react'
 import { cn } from 'ui'
-import Panel from '~/components/Panel'
+
 import SectionContainer from '../Layouts/SectionContainer'
+import styles from './features-grid.module.css'

 export default function FeaturesGrid(props: any) {
  const hasExtendedCards = props.features.some(
@@ -75,9 +76,11 @@ const Content = ({ card, innerClassName }: { card: any; innerClassName?: string
        </div>
      )}
      <div className="content-container flex flex-col justify-between gap-3 p-6 flex-1">
-        <h3 className="text-foreground-lighter flex items-center gap-2">{card.heading}</h3>
+        <h3 className="text-foreground-lighter flex items-center gap-2 text-balance">
+          {card.heading}
+        </h3>
        <div className="flex flex-col justify-between gap-2">
-          <p className="text-sm text-foreground-lighter">{card.subheading}</p>
+          <p className="text-sm text-foreground-lighter text-pretty">{card.subheading}</p>
        </div>
      </div>
    </Panel>
@@ -191,25 +191,26 @@ const data: {
        icon: Timer,
        heading: (
          <>
-            <svg
-              width="18"
-              height="18"
-              viewBox="0 0 18 18"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M8.09431 1.43094C7.77675 1.43094 7.51931 1.68838 7.51931 2.00594C7.51931 2.32351 7.77675 2.58094 8.09431 2.58094V1.43094ZM15.3251 14.1989C15.3251 13.8813 15.0676 13.6239 14.7501 13.6239C14.4325 13.6239 14.1751 13.8813 14.1751 14.1989H15.3251ZM14.1751 11.4632C14.1751 11.7807 14.4325 12.0382 14.7501 12.0382C15.0676 12.0382 15.3251 11.7807 15.3251 11.4632H14.1751ZM9.41204 14.2006C9.35121 13.8889 9.04923 13.6856 8.73755 13.7464C8.42587 13.8072 8.22251 14.1092 8.28334 14.4209L9.41204 14.2006ZM6.80129 13.6979L6.22629 13.6979V13.6979H6.80129ZM2.42103 3.21819L1.88126 3.02002L1.88126 3.02002L2.42103 3.21819ZM1.1209 6.7594L0.581129 6.56122H0.581129L1.1209 6.7594ZM1.68051 8.92905L1.30393 9.36357H1.30393L1.68051 8.92905ZM2.57264 9.70221L2.19606 10.1367V10.1367L2.57264 9.70221ZM3.04137 10.7287L2.46637 10.7287L3.04137 10.7287ZM3.04135 12.1496L3.61635 12.1496L3.04135 12.1496ZM6.80133 7.36668L6.22633 7.36667V7.36667L6.80133 7.36668ZM8.53109 4.59541C8.75659 4.37181 8.75812 4.00774 8.53452 3.78225C8.31092 3.55675 7.94685 3.55521 7.72135 3.77882L8.53109 4.59541ZM12.9599 13.616L12.9599 13.041L12.9599 13.616ZM17 14.191C17.3176 14.191 17.575 13.9335 17.575 13.616C17.575 13.2984 17.3176 13.041 17 13.041L17 14.191ZM9.4003 10.8228C9.2604 10.5377 8.91588 10.42 8.63079 10.5599C8.3457 10.6998 8.22801 11.0443 8.36791 11.3294L9.4003 10.8228ZM8.09431 2.58094H8.91481V1.43094H8.09431V2.58094ZM14.1751 14.1989C14.1751 15.2397 13.2037 16.1407 11.7713 16.1407V17.2907C13.6291 17.2907 15.3251 16.066 15.3251 14.1989H14.1751ZM8.91481 2.58094C11.82 2.58094 14.1751 4.93605 14.1751 7.84122H15.3251C15.3251 4.30092 12.4551 1.43094 8.91481 1.43094V2.58094ZM14.1751 7.84122V11.4632H15.3251V7.84122H14.1751ZM11.7713 16.1407C10.6027 16.1407 9.62784 15.3063 9.41204 14.2006L8.28334 14.4209C8.60251 16.0563 10.0421 17.2907 11.7713 17.2907V16.1407ZM8.17827 1.425H4.16598V2.575H8.17827V1.425ZM1.88126 3.02002L0.581129 6.56122L1.66067 6.95757L2.9608 3.41636L1.88126 3.02002ZM1.30393 9.36357L2.19606 10.1367L2.94922 9.26768L2.05709 8.49452L1.30393 9.36357ZM2.46637 10.7287L2.46635 12.1496L3.61635 12.1496L3.61637 10.7287L2.46637 10.7287ZM7.37633 7.36668C7.37633 6.3259 7.79205 5.32824 8.53109 4.59541L7.72135 3.77882C6.76455 4.72758 6.22634 6.01922 6.22633 7.36667L7.37633 7.36668ZM0.581129 6.56122C0.216349 7.55478 0.504096 8.6704 1.30393 9.36357L2.05709 8.49452C1.61842 8.11435 1.46061 7.50249 1.66067 6.95757L0.581129 6.56122ZM5.69543 15.3787C6.62374 15.3787 7.37629 14.6262 7.37629 13.6979H6.22629C6.22629 13.9911 5.98862 14.2287 5.69543 14.2287V15.3787ZM5.69543 14.2287C4.54717 14.2287 3.61633 13.2979 3.61635 12.1496L2.46635 12.1496C2.46632 13.933 3.91204 15.3787 5.69543 15.3787V14.2287ZM2.19606 10.1367C2.36774 10.2855 2.46637 10.5015 2.46637 10.7287L3.61637 10.7287C3.61637 10.168 3.37295 9.63491 2.94922 9.26768L2.19606 10.1367ZM4.16598 1.425C3.1453 1.425 2.23304 2.06187 1.88126 3.02002L2.9608 3.41636C3.14637 2.91094 3.62757 2.575 4.16598 2.575V1.425ZM12.9599 14.191L17 14.191L17 13.041L12.9599 13.041L12.9599 14.191ZM8.36791 11.3294C9.2275 13.081 11.0087 14.191 12.9599 14.191L12.9599 13.041C11.4474 13.041 10.0666 12.1806 9.4003 10.8228L8.36791 11.3294ZM7.37629 13.6979L7.37633 7.36668L6.22633 7.36667L6.22629 13.6979L7.37629 13.6979Z"
-                fill="currentColor"
-              />
-              <path
-                d="M11.9044 7.79688C11.9016 7.79688 11.9003 7.79642 11.8995 7.79609C11.8984 7.79561 11.8968 7.79466 11.8952 7.79306C11.8936 7.79147 11.8927 7.78989 11.8922 7.78874C11.8919 7.78798 11.8914 7.7867 11.8914 7.78384C11.8914 7.78098 11.8919 7.7797 11.8922 7.77894C11.8927 7.7778 11.8936 7.77622 11.8952 7.77462C11.8968 7.77302 11.8984 7.77207 11.8995 7.77159C11.9003 7.77127 11.9016 7.7708 11.9044 7.7708C11.9073 7.7708 11.9086 7.77127 11.9093 7.77159C11.9105 7.77207 11.9121 7.77302 11.9137 7.77462C11.9153 7.77622 11.9162 7.7778 11.9167 7.77894C11.917 7.7797 11.9175 7.78098 11.9175 7.78384C11.9175 7.7867 11.917 7.78798 11.9167 7.78874C11.9162 7.78989 11.9153 7.79147 11.9137 7.79306C11.9121 7.79466 11.9105 7.79561 11.9093 7.79609C11.9086 7.79642 11.9073 7.79688 11.9044 7.79688Z"
-                fill="currentColor"
-                stroke="currentColor"
-                strokeWidth="1.15"
-                strokeLinecap="round"
-              />
-            </svg>
+            <>
+              <svg
+                className="w-5 h-5 xl:h-10 xl:w-10 shrink-0"
+                viewBox="0 0 18 18"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M8.09431 1.43094C7.77675 1.43094 7.51931 1.68838 7.51931 2.00594C7.51931 2.32351 7.77675 2.58094 8.09431 2.58094V1.43094ZM15.3251 14.1989C15.3251 13.8813 15.0676 13.6239 14.7501 13.6239C14.4325 13.6239 14.1751 13.8813 14.1751 14.1989H15.3251ZM14.1751 11.4632C14.1751 11.7807 14.4325 12.0382 14.7501 12.0382C15.0676 12.0382 15.3251 11.7807 15.3251 11.4632H14.1751ZM9.41204 14.2006C9.35121 13.8889 9.04923 13.6856 8.73755 13.7464C8.42587 13.8072 8.22251 14.1092 8.28334 14.4209L9.41204 14.2006ZM6.80129 13.6979L6.22629 13.6979V13.6979H6.80129ZM2.42103 3.21819L1.88126 3.02002L1.88126 3.02002L2.42103 3.21819ZM1.1209 6.7594L0.581129 6.56122H0.581129L1.1209 6.7594ZM1.68051 8.92905L1.30393 9.36357H1.30393L1.68051 8.92905ZM2.57264 9.70221L2.19606 10.1367V10.1367L2.57264 9.70221ZM3.04137 10.7287L2.46637 10.7287L3.04137 10.7287ZM3.04135 12.1496L3.61635 12.1496L3.04135 12.1496ZM6.80133 7.36668L6.22633 7.36667V7.36667L6.80133 7.36668ZM8.53109 4.59541C8.75659 4.37181 8.75812 4.00774 8.53452 3.78225C8.31092 3.55675 7.94685 3.55521 7.72135 3.77882L8.53109 4.59541ZM12.9599 13.616L12.9599 13.041L12.9599 13.616ZM17 14.191C17.3176 14.191 17.575 13.9335 17.575 13.616C17.575 13.2984 17.3176 13.041 17 13.041L17 14.191ZM9.4003 10.8228C9.2604 10.5377 8.91588 10.42 8.63079 10.5599C8.3457 10.6998 8.22801 11.0443 8.36791 11.3294L9.4003 10.8228ZM8.09431 2.58094H8.91481V1.43094H8.09431V2.58094ZM14.1751 14.1989C14.1751 15.2397 13.2037 16.1407 11.7713 16.1407V17.2907C13.6291 17.2907 15.3251 16.066 15.3251 14.1989H14.1751ZM8.91481 2.58094C11.82 2.58094 14.1751 4.93605 14.1751 7.84122H15.3251C15.3251 4.30092 12.4551 1.43094 8.91481 1.43094V2.58094ZM14.1751 7.84122V11.4632H15.3251V7.84122H14.1751ZM11.7713 16.1407C10.6027 16.1407 9.62784 15.3063 9.41204 14.2006L8.28334 14.4209C8.60251 16.0563 10.0421 17.2907 11.7713 17.2907V16.1407ZM8.17827 1.425H4.16598V2.575H8.17827V1.425ZM1.88126 3.02002L0.581129 6.56122L1.66067 6.95757L2.9608 3.41636L1.88126 3.02002ZM1.30393 9.36357L2.19606 10.1367L2.94922 9.26768L2.05709 8.49452L1.30393 9.36357ZM2.46637 10.7287L2.46635 12.1496L3.61635 12.1496L3.61637 10.7287L2.46637 10.7287ZM7.37633 7.36668C7.37633 6.3259 7.79205 5.32824 8.53109 4.59541L7.72135 3.77882C6.76455 4.72758 6.22634 6.01922 6.22633 7.36667L7.37633 7.36668ZM0.581129 6.56122C0.216349 7.55478 0.504096 8.6704 1.30393 9.36357L2.05709 8.49452C1.61842 8.11435 1.46061 7.50249 1.66067 6.95757L0.581129 6.56122ZM5.69543 15.3787C6.62374 15.3787 7.37629 14.6262 7.37629 13.6979H6.22629C6.22629 13.9911 5.98862 14.2287 5.69543 14.2287V15.3787ZM5.69543 14.2287C4.54717 14.2287 3.61633 13.2979 3.61635 12.1496L2.46635 12.1496C2.46632 13.933 3.91204 15.3787 5.69543 15.3787V14.2287ZM2.19606 10.1367C2.36774 10.2855 2.46637 10.5015 2.46637 10.7287L3.61637 10.7287C3.61637 10.168 3.37295 9.63491 2.94922 9.26768L2.19606 10.1367ZM4.16598 1.425C3.1453 1.425 2.23304 2.06187 1.88126 3.02002L2.9608 3.41636C3.14637 2.91094 3.62757 2.575 4.16598 2.575V1.425ZM12.9599 14.191L17 14.191L17 13.041L12.9599 13.041L12.9599 14.191ZM8.36791 11.3294C9.2275 13.081 11.0087 14.191 12.9599 14.191L12.9599 13.041C11.4474 13.041 10.0666 12.1806 9.4003 10.8228L8.36791 11.3294ZM7.37629 13.6979L7.37633 7.36668L6.22633 7.36667L6.22629 13.6979L7.37629 13.6979Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M11.9044 7.79688C11.9016 7.79688 11.9003 7.79642 11.8995 7.79609C11.8984 7.79561 11.8968 7.79466 11.8952 7.79306C11.8936 7.79147 11.8927 7.78989 11.8922 7.78874C11.8919 7.78798 11.8914 7.7867 11.8914 7.78384C11.8914 7.78098 11.8919 7.7797 11.8922 7.77894C11.8927 7.7778 11.8936 7.77622 11.8952 7.77462C11.8968 7.77302 11.8984 7.77207 11.8995 7.77159C11.9003 7.77127 11.9016 7.7708 11.9044 7.7708C11.9073 7.7708 11.9086 7.77127 11.9093 7.77159C11.9105 7.77207 11.9121 7.77302 11.9137 7.77462C11.9153 7.77622 11.9162 7.7778 11.9167 7.77894C11.917 7.7797 11.9175 7.78098 11.9175 7.78384C11.9175 7.7867 11.917 7.78798 11.9167 7.78874C11.9162 7.78989 11.9153 7.79147 11.9137 7.79306C11.9121 7.79466 11.9105 7.79561 11.9093 7.79609C11.9086 7.79642 11.9073 7.79688 11.9044 7.79688Z"
+                  fill="currentColor"
+                  stroke="currentColor"
+                  strokeWidth="1.15"
+                  strokeLinecap="round"
+                />
+              </svg>
+            </>
            A complete platform, built on Postgres
          </>
        ),
@@ -1,30 +1,23 @@
 'use client'

-import { useEffect } from 'react'
-import { useTheme } from 'next-themes'
 import { useRouter } from 'next/compat/router'
+import { useEffect } from 'react'
+
 import useDarkLaunchWeeks from '../hooks/useDarkLaunchWeeks'

 export function useForceDeepDark() {
  const router = useRouter()
-  const { resolvedTheme, theme } = useTheme()
-
-  const isDarkTheme = resolvedTheme?.includes('dark')
  const forceDarkMode = useDarkLaunchWeeks()

+  // next-themes already sets `data-theme`/`color-scheme` correctly and
+  // synchronously for the resolved theme. This hook only needs to step in
+  // to force dark mode during launch weeks, regardless of the user's theme.
  useEffect(() => {
+    if (!forceDarkMode) return
+
    const handleDocumentLoad = () => {
-      // Update the HTML element attributes
-      const theme = forceDarkMode || isDarkTheme ? 'dark' : 'light'
-
-      document.documentElement.setAttribute('data-theme', theme)
-      document.documentElement.style.colorScheme = theme
-
-      // wait before setting the theme
-      setTimeout(() => {
-        document.documentElement.setAttribute('data-theme', theme)
-        document.documentElement.style.colorScheme = theme
-      }, 200)
+      document.documentElement.setAttribute('data-theme', 'dark')
+      document.documentElement.style.colorScheme = 'dark'

      // Clean up the event listener
      window.removeEventListener('load', handleDocumentLoad)
@@ -42,5 +35,5 @@ export function useForceDeepDark() {
    return () => {
      window.removeEventListener('load', handleDocumentLoad)
    }
-  }, [resolvedTheme, theme, isDarkTheme, router])
+  }, [forceDarkMode, router])
 }
@@ -1,75 +1,3 @@
-import * as supabaseLogoWordmarkDark from 'common/assets/images/supabase-logo-wordmark--dark.png'
-import * as supabaseLogoWordmarkLight from 'common/assets/images/supabase-logo-wordmark--light.png'
-import { useTheme } from 'next-themes'
-import Image from 'next/image'
-import Link from 'next/link'
-import { useEffect, useState } from 'react'
-import { Button } from 'ui'
-
-import DefaultLayout from '../components/Layouts/Default'
-
-const Error404 = () => {
-  const [show404, setShow404] = useState<boolean>(false)
-  const { resolvedTheme } = useTheme()
-
-  useEffect(() => {
-    setTimeout(() => {
-      setShow404(true)
-    }, 500)
-  }, [])
-
-  return (
-    <DefaultLayout hideHeader hideFooter>
-      <div className="relative mx-auto flex h-screen w-full flex-col items-center justify-center">
-        <div className="absolute top-0 mx-auto w-full max-w-7xl px-8 pt-6 sm:px-6 lg:px-8">
-          <nav className="relative flex items-center justify-between sm:h-10">
-            <div className="flex shrink-0 grow items-center lg:grow-0">
-              <div className="flex w-full items-center justify-between md:w-auto">
-                <a href="/">
-                  <Image
-                    src={
-                      resolvedTheme?.includes('dark')
-                        ? supabaseLogoWordmarkDark
-                        : supabaseLogoWordmarkLight
-                    }
-                    alt="supabase logo"
-                    height={24}
-                    width={120}
-                  />
-                </a>
-              </div>
-            </div>
-          </nav>
-        </div>
-        <div className="absolute">
-          <h1
-            className={`text-foreground select-none text-[14rem] opacity-5 filter transition duration-200 sm:text-[18rem] lg:text-[28rem] ${
-              show404 ? 'blur-xs' : 'blur-none'
-            }`}
-          >
-            404
-          </h1>
-        </div>
-        <div
-          className={`flex flex-col items-center justify-center space-y-6 transition ${
-            show404 ? 'opacity-100' : 'opacity-0'
-          }`}
-        >
-          <div className="text-foreground flex w-[320px] flex-col items-center justify-center space-y-3">
-            <h1 className="m-2 text-2xl">Looking for something? 🔍</h1>
-            <p className="text-center text-sm">
-              We couldn't find the page that you're looking for!
-            </p>
-          </div>
-          <div className="flex items-center space-x-4">
-            <Button asChild size="small" className="text-white">
-              <Link href="/">Head back</Link>
-            </Button>
-          </div>
-        </div>
-      </div>
-    </DefaultLayout>
-  )
-}
+import Error404 from '@/components/Error404'

 export default Error404
@@ -152,35 +152,35 @@ const InnovationTeams: NextPage = () => {
                </svg>

                {/* Provider Logos Bar */}
-                <div className="flex items-center gap-6 px-6 py-4 rounded-lg border border-strong bg-surface-100">
+                <div className="flex flex-wrap items-center justify-center max-w-full gap-3 sm:gap-4 md:gap-6 px-6 sm:px-4 py-3 sm:py-4 rounded-lg border border-strong bg-surface-100">
                  <img
                    src="/images/logos/publicity/lovable.svg"
                    alt="Lovable"
-                    className="h-8"
+                    className="h-5 min-[1080px]:h-6 xl:h-7 w-auto max-w-full shrink-0"
                    draggable={false}
                  />
                  <img
                    src="/images/logos/publicity/bolt.svg"
                    alt="Bolt"
-                    className="h-8"
+                    className="h-5 min-[1080px]:h-6 xl:h-7 w-auto max-w-full shrink-0"
                    draggable={false}
                  />
                  <img
                    src="/images/logos/publicity/v0.svg"
                    alt="v0"
-                    className="h-8"
+                    className="h-5 min-[1080px]:h-6 xl:h-7 w-auto max-w-full shrink-0"
                    draggable={false}
                  />
                  <img
                    src="/images/logos/publicity/figma.svg"
                    alt="Figma"
-                    className="h-8"
+                    className="h-5 min-[1080px]:h-6 xl:h-7 w-auto max-w-full shrink-0"
                    draggable={false}
                  />
                  <img
                    src="/images/logos/publicity/tempo.svg"
                    alt="Tempo"
-                    className="h-8"
+                    className="h-5 min-[1080px]:h-6 xl:h-7 w-auto max-w-full shrink-0"
                    draggable={false}
                  />
                </div>
@@ -46,7 +46,6 @@
  --delay-1500: 1500ms;

  /* font sizing and weights optimized for Inter */
-  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1rem;
  --text-xl: 1.125rem;
@@ -138,13 +137,11 @@
    border-color: hsl(var(--border-default, currentColor));
  }

-  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
-  .h1,
  .h2,
  .h3,
  .h4,
@@ -152,6 +149,11 @@
  .h6 {
    @apply font-heading font-semibold;
  }
+
+  h1,
+  .h1 {
+    @apply font-heading font-medium tracking-normal;
+  }
 }

@layer utilities {