Files
supabase/apps/www/data/home/content.tsx
Ivan VasilovandJordi Enric 56de26fe22 chore: Migrate the monorepo to use Tailwind v4 (#45318)
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.

---------

Co-authored-by: Jordi Enric <jordi.err@gmail.com>
2026-04-30 10:53:24 +00:00

195 lines
8.1 KiB
TypeScript

import VideoWithHighlights from 'components/VideoWithHighlights'
import { useSendTelemetryEvent } from 'lib/telemetry'
import Link from 'next/link'
import { Button } from 'ui'
import ProductModules from '../ProductModules'
import MainProducts from 'data/MainProducts'
import { topTweets } from 'shared-data/tweets'
import { IconDiscord } from 'ui'
export default () => {
const sendTelemetryEvent = useSendTelemetryEvent()
return {
heroSection: {
heading: (
<>
<span className="block text-[#F4FFFA00] bg-clip-text bg-linear-to-b from-foreground to-foreground-light">
Build in a weekend
</span>
<span className="text-transparent bg-clip-text bg-linear-to-br from-[#3ECF8E] via-[#3ECF8E] to-[#3ecfb2] block md:ml-0">
Scale to millions
</span>
</>
),
subheading: (
<>
Supabase is the Postgres development platform. <br className="hidden md:block" />
Start your project with a Postgres database, Authentication, instant APIs, Edge Functions,
Realtime subscriptions, Storage, and Vector embeddings.
</>
),
image: '/images/index/gradient-bg.png',
cta: {
label: 'Start your project',
link: 'https://app.supabase.com',
},
secondaryCta: {
label: 'Documentation',
link: '/docs',
},
},
productsSection: {
products: {
...MainProducts,
vector: ProductModules.vector,
'data-api': {
name: 'Data APIs',
icon: 'M4.13477 12.8129C4.13477 14.1481 4.43245 15.4138 4.96506 16.5471M12.925 4.02271C11.5644 4.02271 10.276 4.33184 9.12614 4.88371M21.7152 12.8129C21.7152 11.4644 21.4115 10.1867 20.8688 9.0447M12.925 21.6032C14.2829 21.6032 15.5689 21.2952 16.717 20.7454M16.717 20.7454C17.2587 21.5257 18.1612 22.0366 19.1831 22.0366C20.84 22.0366 22.1831 20.6935 22.1831 19.0366C22.1831 17.3798 20.84 16.0366 19.1831 16.0366C17.5263 16.0366 16.1831 17.3798 16.1831 19.0366C16.1831 19.6716 16.3804 20.2605 16.717 20.7454ZM4.96506 16.5471C4.16552 17.086 3.63965 17.9999 3.63965 19.0366C3.63965 20.6935 4.98279 22.0366 6.63965 22.0366C8.2965 22.0366 9.63965 20.6935 9.63965 19.0366C9.63965 17.3798 8.2965 16.0366 6.63965 16.0366C6.01951 16.0366 5.44333 16.2248 4.96506 16.5471ZM9.12614 4.88371C8.58687 4.08666 7.67444 3.56274 6.63965 3.56274C4.98279 3.56274 3.63965 4.90589 3.63965 6.56274C3.63965 8.2196 4.98279 9.56274 6.63965 9.56274C8.2965 9.56274 9.63965 8.2196 9.63965 6.56274C9.63965 5.94069 9.45032 5.36285 9.12614 4.88371ZM20.8688 9.0447C21.6621 8.50486 22.1831 7.59464 22.1831 6.56274C22.1831 4.90589 20.84 3.56274 19.1831 3.56274C17.5263 3.56274 16.1831 4.90589 16.1831 6.56274C16.1831 8.2196 17.5263 9.56274 19.1831 9.56274C19.8081 9.56274 20.3884 9.37165 20.8688 9.0447Z',
description: (
<>
Instant ready-to-use <strong>Restful APIs</strong>.
</>
),
description_short: 'Instant ready-to-use Restful APIs.',
label: '',
url: 'https://supabase.com/docs/guides/api',
},
},
},
dashboardFeatures: {
title: (
<>
<span className="text-foreground">Stay productive and manage your app</span>
<br className="hidden sm:block" /> without leaving the dashboard
</>
),
tabs: [
{
label: 'Table Editor',
panel: ({ isDark }: { isDark: boolean }) => (
<VideoWithHighlights
video={{
title: 'Supabase dashboard table editor',
sources: [
{
src: `https://xguihxuzqibwxjnimxev.supabase.co/storage/v1/object/public/videos/marketing/website/supabase-table-editor${isDark ? '' : '-light'}`,
type: 'video/mp4',
},
],
poster: `/images/index/dashboard/supabase-table-editor${isDark ? '' : '-light'}.png`,
}}
/>
),
highlights: [
{
label: 'Full CRUD',
link: '/docs/guides/database/tables?queryGroups=database-method&database-method=sql&queryGroups=language&language=js',
},
{
label: 'Materialized Views',
link: '/docs/guides/database/tables?queryGroups=database-method&database-method=sql&queryGroups=language&language=js#materialized-views',
},
{
label: 'Foreign Tables',
link: '/docs/guides/database/tables?queryGroups=database-method&database-method=sql&queryGroups=language&language=js#joining-tables-with-foreign-keys',
},
{ label: 'Partitioned Tables', link: '/docs/guides/database/partitions' },
{ label: 'Easy as a spreadsheet', link: '/docs/guides/database/overview#table-view' },
],
},
{
label: 'SQL Editor',
panel: ({ isDark }: { isDark: boolean }) => (
<VideoWithHighlights
video={{
title: 'Supabase dashboard SQL editor',
sources: [
{
src: `https://xguihxuzqibwxjnimxev.supabase.co/storage/v1/object/public/videos/marketing/website/supabase-sql-editor${isDark ? '' : '-light'}`,
type: 'video/mp4',
},
],
poster: `/images/index/dashboard/supabase-sql-editor${isDark ? '' : '-light'}.png`,
}}
/>
),
highlights: [
{ label: 'AI SQL Editor', link: '/docs/guides/database/overview#the-sql-editor' },
{
label: 'Row Level Security',
link: '/docs/guides/database/postgres/row-level-security',
},
{
label: 'Save time using Templates',
link: '/docs/guides/database/overview#the-sql-editor',
},
{
label: 'Save and reuse Queries',
link: '/docs/guides/database/overview#the-sql-editor',
},
],
},
{
label: 'RLS Policies',
panel: ({ isDark }: { isDark: boolean }) => (
<VideoWithHighlights
video={{
title: 'Supabase dashboard Row Level Security',
sources: [
{
src: `https://xguihxuzqibwxjnimxev.supabase.co/storage/v1/object/public/videos/marketing/website/supabase-rls${isDark ? '' : '-light'}`,
type: 'video/mp4',
},
],
poster: `/images/index/dashboard/supabase-rls${isDark ? '' : '-light'}.png`,
}}
/>
),
highlights: [
{ label: 'Email Logins', link: '/docs/guides/auth/auth-email-passwordless' },
{
label: 'Magic Links',
link: '/docs/guides/auth/auth-email-passwordless?queryGroups=language&language=js#with-magic-link',
},
{
label: '20+ Third-party Logins',
link: '/docs/guides/auth/social-login#set-up-a-social-provider-with-supabase-auth',
},
{
label: 'Custom Access Policies via RLS',
link: '/docs/guides/database/postgres/row-level-security',
},
{
label: 'Password Recovery',
link: '/docs/guides/auth/passwords?queryGroups=language&language=js#resetting-a-password',
},
],
},
],
},
twitterSocialSection: {
heading: 'Join the community',
subheading: 'Discover what our community has to say about their Supabase experience.',
ctas: (
<Button asChild type="default" size="small" icon={<IconDiscord />}>
<Link
href={'https://discord.supabase.com/'}
target="_blank"
tabIndex={-1}
onClick={() =>
sendTelemetryEvent({
action: 'homepage_discord_button_clicked',
})
}
>
Join us on Discord
</Link>
</Button>
),
tweets: topTweets,
},
}
}