supabase/apps/docs/pages/index.mdx

import HomeLayout from '~/layouts/HomeLayout'
import Link from 'next/link'
import {
  Button,
  GlassPanel,
  IconBackground,
  IconChevronRight,
  IconPanel,
  IconPlay,
  TextLink,
} from 'ui'

import HomeMenuIconPicker from '~/components/Navigation/NavigationMenu/HomeMenuIconPicker'

export const meta = {
  title: 'Supabase Documentation',
  description:
    'Supabase is an open source Firebase alternative providing all the backend features you need to build a product.',
  subtitle: 'Supabase Developer Documentation and API Reference',
}

<div className="flex flex-col">
  <div>
    <div className="max-w-xl">
      ## Products
    </div>

    <div className="grid grid-cols-12 gap-6 not-prose [&_svg]:text-brand-600 [&_svg]dark:text-brand">
      {products.map((product) => {
        return (
          <Link href={product.href} key={product.title} passHref className={product.span ?? 'col-span-12 md:col-span-4'}>
            <GlassPanel {...product} icon={<HomeMenuIconPicker icon={product.icon} width={18} height={18} />} background={true} showIconBg={true} showLink={false}>
              {product.description}
            </GlassPanel>
          </Link>
        )
      })}
    </div>

    <div className="flex flex-col lg:grid grid-cols-12 gap-6 py-12 border-b">

      <div className="col-span-4 flex flex-col gap-1 [&_h2]:m-0 [&_h3]:m-0">

        <div className="md:max-w-xs 2xl:max-w-none">
          <div className="flex items-center gap-3 mb-3 text-brand-600 dark:text-brand">
            {/* <IconBackground>
              <HomeMenuIconPicker icon="reference-cli" width={18} height={18} />
            </IconBackground> */}
            ## Client Libraries
          </div>
        </div>

      </div>

      <div className="grid col-span-8 grid-cols-12 gap-6 not-prose">
        {clientLibraries.map((product) => {
          return (
            <Link href={product.href} key={product.title} passHref  className={product.span ?? 'col-span-6 md:col-span-4'}>
              <IconPanel
                {...product}
                icon={<HomeMenuIconPicker icon={product.icon} width={18} height={18} />}
                background={true}
                showIconBg={true}
                showLink={false}
              >
                {product.description}
              </IconPanel>
            </Link>
          )
        })}
      </div>

    </div>

    <div className="flex flex-col lg:grid grid-cols-12 gap-6 py-12 border-b">

      <div className="col-span-4 flex flex-col gap-1 [&_h2]:m-0">

        ## Migrate to Supabase

        <p className="text-scale-1100 text-sm p-0 m-0">Bring your existing data, auth and storage to Supabase following our migration guides.</p>

        <TextLink
          label="Explore more resources"
          url="/guides/resources"
          className="no-underline text-brand text-sm"
        />
      </div>

      <div className="grid col-span-8 grid-cols-12 gap-6 not-prose">
        {migrationGuides.map((product) => {
          return (
            <Link
              href={product.href}
              key={product.title}
              className={product.span ?? 'col-span-6 md:col-span-4'}
              passHref
            >
              <IconPanel {...product} background={true} showIconBg={true} showLink={false}>
                {product.description}
              </IconPanel>
            </Link>
          )
        })}
      </div>

    </div>

  </div>

  <div className="flex flex-col gap-6 py-12 border-b">

    <div className="col-span-4 flex flex-col gap-1 [&_h2]:m-0 [&_h3]:m-0">

      ### Additional resources

    </div>

    <div className="grid grid-cols-12 gap-6 not-prose">
      {additionalResources.map((product) => {
        return (
          <Link
            href={product.href}
            key={product.title}
            className={product.span ?? 'col-span-12 md:col-span-6 lg:col-span-3'}
            passHref
          >
            <GlassPanel {...product} icon={<HomeMenuIconPicker icon={product.icon} width={18} height={18} />} background={false}>
              {product.description}
            </GlassPanel>

          </Link>
        )
      })}
    </div>

  </div>

  <div className="flex flex-col lg:grid grid-cols-12 gap-6 py-12">

    <div className="col-span-4 flex flex-col gap-1 [&_h2]:m-0 [&_h3]:m-0">

      <div className="md:max-w-xs 2xl:max-w-none">
        <div className="flex items-center gap-3 mb-3 text-brand-600 dark:text-brand">
          <IconBackground>
            <HomeMenuIconPicker icon="self-hosting" width={18} height={18} />
          </IconBackground>
          ### Self-Hosting
        </div>
        <p className="text-scale-1100 text-sm">Get started with self-hosting Supabase.</p>
        <TextLink
          label="More on Self-Hosting"
          url="/guides/self-hosting"
          className="no-underline text-brand text-sm"
        />
      </div>

    </div>

    <div className="grid col-span-8 grid-cols-12 gap-6 not-prose">
      <div className="col-span-full lg:col-span-8 grid grid-cols-12 gap-6">
        {selfHostingOptions.map((product) => {
          return (
            <Link
              href={product.href}
              key={product.title}
              className={product.span ?? 'col-span-6'}
              passHref
            >
              <IconPanel {...product} icon={<HomeMenuIconPicker icon={product.icon} width={18} height={18} />} background={true} showIconBg={true} showLink={false}>
                {product.description}
              </IconPanel>
            </Link>
          )
        })}
      </div>
    </div>

  </div>

</div>

export const products = [
  {
    title: 'Database',
    icon: 'database',
    hasLightIcon: true,
    href: '/guides/database',
    description:
      'Supabase provides a full Postgres database for every project with Realtime functionality, database backups, extensions, and more.',
  },
  {
    title: 'Auth',
    icon: 'auth',
    hasLightIcon: true,
    href: '/guides/auth',
    description:
      'Add and manage email and password, passwordless, OAuth, and mobile logins to your project through a suite of identity providers and APIs.',
  },
  {
    title: 'Storage',
    icon: 'storage',
    hasLightIcon: true,
    href: '/guides/storage',
    description:
      'Store, organize, transform, and serve large files—fully integrated with your Postgres database with Row Level Security access policies.',
  },
  {
    title: 'AI & Vectors',
    icon: 'ai',
    hasLightIcon: true,
    href: '/guides/ai',
    description: 'Use Supabase to store and search embedding vectors.',
  },
  {
    title: 'Realtime',
    icon: 'realtime',
    hasLightIcon: true,
    href: '/guides/realtime',
    description:
      'Listen to database changes, store and sync user states across clients, broadcast data to clients subscribed to a channel, and more.',
  },
  {
    title: 'Edge Functions',
    icon: 'edge-functions',
    hasLightIcon: true,
    href: '/guides/functions',
    description:
      'Globally distributed, server-side functions to execute your code closest to your users for the lowest latency.',
  },
]

export const migrationGuides = [
  {
    title: 'Firebase Auth',
    icon: '/docs/img/icons/firebase-icon',
    href: '/guides/resources/migrating-to-supabase/firebase-auth',
  },
  {
    title: 'Firestore Data',
    icon: '/docs/img/icons/firebase-icon',
    href: '/guides/resources/migrating-to-supabase/firestore-data',
  },
  {
    title: 'Firebase Storage',
    icon: '/docs/img/icons/firebase-icon',
    href: '/guides/resources/migrating-to-supabase/firebase-storage',
  },
  {
    title: 'Heroku',
    icon: '/docs/img/icons/heroku-icon',
    href: '/guides/resources/migrating-to-supabase/heroku',
  },
  {
    title: 'Render',
    icon: '/docs/img/icons/render-icon',
    href: '/guides/resources/migrating-to-supabase/render',
  },
  {
    title: 'Amazon RDS',
    icon: '/docs/img/icons/aws-rds-icon',
    href: '/guides/resources/migrating-to-supabase/amazon-rds',
  },
  {
    title: 'Postgres',
    icon: '/docs/img/icons/postgres-icon',
    href: '/guides/resources/migrating-to-supabase/postgres',
  },
  {
    title: 'MySQL',
    icon: '/docs/img/icons/mysql-icon',
    href: '/guides/resources/migrating-to-supabase/mysql',
  },
  {
    title: 'MSSQL',
    icon: '/docs/img/icons/mssql-icon',
    href: '/guides/resources/migrating-to-supabase/mssql',
  },
]

export const selfHostingOptions = [
  {
    title: 'Auth',
    icon: 'auth',
    href: 'reference/self-hosting-auth/introduction',
  },
  {
    title: 'Realtime',
    icon: 'realtime',
    href: 'reference/self-hosting-realtime/introduction',
  },
  {
    title: 'Storage',
    icon: 'storage',
    href: 'reference/self-hosting-storage/introduction',
  },
  {
    title: 'Analytics',
    icon: 'analytics',
    href: 'reference/self-hosting-analytics/introduction',
  },
]

export const clientLibraries = [
  {
    title: 'Javascript',
    icon: 'reference-javascript',
    href: 'reference/javascript/introduction',
  },
  {
    title: 'Flutter',
    icon: 'reference-dart',
    href: 'reference/dart/introduction',
  },
  {
    title: 'Python',
    icon: 'reference-python',
    href: 'reference/python/introduction',
  },
  {
    title: 'C#',
    icon: 'reference-csharp',
    href: 'reference/csharp/introduction',
  },
  {
    title: 'Swift',
    icon: 'reference-swift',
    href: 'reference/swift/introduction',
  },
  {
    title: 'Kotlin',
    icon: 'reference-kotlin',
    href: 'reference/kotlin/introduction',
  },
]

export const additionalResources = [
  {
    title: 'Management API',
    description: 'Manage your Supabase projects and organizations.',
    icon: 'reference-api',
    href: 'reference/api/introduction',
  },
  {
    title: 'Supabase CLI',
    description: 'Use the CLI to develop, manage and deploy your projects.',
    icon: 'reference-cli',
    href: 'reference/cli/introduction',
  },
  {
    title: 'Platform Guides',
    description: 'Learn more about the tools and services powering Supabase.',
    icon: 'platform',
    href: 'guides/platform',
  },
  {
    title: 'Integrations',
    description: 'Explore a variety of integrations from Supabase partners.',
    icon: 'integrations',
    href: 'guides/integrations',
  },
]

export const Page = ({ children }) => <HomeLayout meta={meta} children={children} />

export default Page