-
+
Build in a weekend
Scale to millions
-
+
Start your project with a Postgres database. Add Authentication, Data APIs, Edge
Functions, Realtime Data, Storage, and Vector embeddings.
diff --git a/apps/www/app/(home)/_components/HomeContent.tsx b/apps/www/app/(home)/_components/HomeContent.tsx
index 10a9ca9fae7..d0a80e04d17 100644
--- a/apps/www/app/(home)/_components/HomeContent.tsx
+++ b/apps/www/app/(home)/_components/HomeContent.tsx
@@ -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
diff --git a/apps/www/app/not-found.tsx b/apps/www/app/not-found.tsx
new file mode 100644
index 00000000000..cebcae14cbb
--- /dev/null
+++ b/apps/www/app/not-found.tsx
@@ -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
+}
diff --git a/apps/www/components/Error404.tsx b/apps/www/components/Error404.tsx
new file mode 100644
index 00000000000..474a6a9aff1
--- /dev/null
+++ b/apps/www/components/Error404.tsx
@@ -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(false)
+
+ useEffect(() => {
+ setTimeout(() => {
+ setShow404(true)
+ }, 500)
+ }, [])
+
+ return (
+
+
+
+
+
+ 404
+
+
+
+
+
Looking for something? 🔍
+
+ We couldn't find the page that you're looking for!
+
+
+
+
+
+
+
)}
-
{card.heading}
+
+ {card.heading}
+
-
{card.subheading}
+
{card.subheading}
diff --git a/apps/www/data/solutions/ai-builders.tsx b/apps/www/data/solutions/ai-builders.tsx
index 76bd484e1cb..27cd8da64b0 100644
--- a/apps/www/data/solutions/ai-builders.tsx
+++ b/apps/www/data/solutions/ai-builders.tsx
@@ -191,25 +191,26 @@ const data: {
icon: Timer,
heading: (
<>
-
+ <>
+
+
A complete platform, built on Postgres
),
diff --git a/apps/www/lib/theme.utils.ts b/apps/www/lib/theme.utils.ts
index 1237d5f5dcc..6111e5acddc 100644
--- a/apps/www/lib/theme.utils.ts
+++ b/apps/www/lib/theme.utils.ts
@@ -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])
}
diff --git a/apps/www/pages/404.tsx b/apps/www/pages/404.tsx
index 1740be6d4dd..19b97150d0e 100644
--- a/apps/www/pages/404.tsx
+++ b/apps/www/pages/404.tsx
@@ -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
(false)
- const { resolvedTheme } = useTheme()
-
- useEffect(() => {
- setTimeout(() => {
- setShow404(true)
- }, 500)
- }, [])
-
- return (
-
-
-
-
-
- 404
-
-
-
-
-
Looking for something? 🔍
-
- We couldn't find the page that you're looking for!
-
-
-
-
-
-
-
+
diff --git a/apps/www/styles/globals.css b/apps/www/styles/globals.css
index ba5b4e9125f..5edaa3a8d6a 100644
--- a/apps/www/styles/globals.css
+++ b/apps/www/styles/globals.css
@@ -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 {