Update support page (#17763)

* update Support page layout

* layout improvements

* add command K search in Support Page

* use SessionContextProvider for cmdK and update supabase client in www

* cleanup

* add typed input placeholder to support page

* reduce gap in layout

* update support page layout, icons, cta hierarchy and copywriting

* separate issues and feature requests call to actions

* update and cleanup Support page

* fix support heading title

* update icon color

* clean up import

* update icon color

apps/www/components/Layouts/Default.tsx

@@ -1,5 +1,6 @@
 import Nav from 'components/Nav/index'
 import Footer from 'components/Footer/index'
+import { cn } from 'ui'
 
 type Props = {
   hideHeader?: boolean
@@ -21,9 +22,7 @@ const DefaultLayout = (props: Props) => {
   return (
     <>
       {!hideHeader && <Nav />}
-      <div className="min-h-screen">
-        <main className={className}>{children}</main>
-      </div>
+      <main className={cn('min-h-screen', className)}>{children}</main>
       {!hideFooter && <Footer className={footerClassName} />}
     </>
   )

apps/www/components/MfaContactForm.tsx

@@ -1,7 +1,7 @@
 import { Button, Form, Input, Select } from 'ui'
 import { useState } from 'react'
 import countries from '~/data/Countries.json'
-import supabase from '~/lib/supabase'
+import supabase from '~/lib/supabaseMisc'
 
 const INITIAL_VALUES = {
   companyName: '',

apps/www/components/Partners/BecomeAPartner.tsx

@@ -1,8 +1,7 @@
 import { Button } from 'ui'
-import { SupabaseClient } from '~/lib/supabase'
 import Link from 'next/link'
 
-export default function BecomeAPartner({ supabase }: { supabase: SupabaseClient }) {
+export default function BecomeAPartner() {
   return (
     <div className="border-t">
       <div id="become-a-partner" className="mx-auto max-w-2xl space-y-12 py-32 px-6 text-center">

apps/www/components/SOC2RequestForm.tsx

@@ -1,7 +1,7 @@
 import { Button, Form, Input, Select } from 'ui'
 import { useState } from 'react'
 import countries from '~/data/Countries.json'
-import supabase from '~/lib/supabase'
+import supabase from '~/lib/supabaseMisc'
 
 const INITIAL_VALUES = {
   companyName: '',

apps/www/data/support.tsx

@@ -0,0 +1,91 @@
+import { IconGitHubSolid, IconDiscussions, IconDiscord, IconArrowUpRight } from 'ui'
+
+const data = {
+  meta_title: 'Help & Support | Supabase',
+  meta_description:
+    'Find help and support for Supabase. Our Support team provide answers on all types of issues, including account information, billing, and refunds.',
+  hero: {
+    h1: 'Support',
+    title: 'Hello, how can we help?',
+  },
+  cards: [
+    {
+      title: 'Issues',
+      paragraph: "Found a bug? We'd love to hear about it in our GitHub issues.",
+      links: [
+        {
+          label: 'Open GitHub Issue',
+          link: '',
+          target: '_blank',
+          icon: <IconGitHubSolid />,
+          type: 'default',
+        },
+      ],
+    },
+    {
+      title: 'Feature requests',
+      paragraph: 'Want to suggest a new feature? Share it with us and the community.',
+      links: [
+        {
+          label: 'Request feature',
+          link: 'https://github.com/orgs/supabase/discussions/categories/feature-requests',
+          target: '_blank',
+          icon: <IconGitHubSolid />,
+          type: 'default',
+        },
+      ],
+    },
+    {
+      title: 'Ask the Community',
+      paragraph:
+        'Join our GitHub discussions or our Discord server to browse for help and best practices.',
+      links: [
+        {
+          label: 'Ask a question',
+          link: 'https://github.com/supabase/supabase/discussions',
+          target: '_blank',
+          icon: <IconDiscussions />,
+          type: 'default',
+        },
+        {
+          label: 'Join Discord',
+          link: 'https://discord.supabase.com/',
+          target: '_blank',
+          icon: <IconDiscord fill="hsl(var(--background-default))" />,
+          type: 'secondary',
+        },
+      ],
+      className: 'col-span-full xl:col-span-1',
+    },
+  ],
+  banner: {
+    title: "Can't find what you're looking for?",
+    paragraph: (
+      <>
+        <p className="text-light">The Supabase Support Team is ready to help.</p>
+        <p className="text-lighter text-sm">
+          Response time for support tickets will vary depending on plan type and severity of the
+          issue.
+        </p>
+      </>
+    ),
+    links: [
+      {
+        label: 'Contact Enterprise Sales',
+        link: 'https://forms.supabase.com/enterprise',
+        target: '_blank',
+        type: 'default',
+      },
+      {
+        label: 'Open Ticket',
+        link: 'https://supabase.com/dashboard/support/new',
+        target: '_blank',
+        icon: <IconArrowUpRight />,
+        className: '!text-light hover:!text-foreground',
+        type: 'text',
+      },
+    ],
+  },
+}
+
+export default data

apps/www/lib/supabase.ts

@@ -2,8 +2,8 @@ import { createClient } from '@supabase/supabase-js'
 import { Database } from './database.types'
 
 const supabase = createClient<Database>(
-  process.env.NEXT_PUBLIC_MISC_USE_URL!,
-  process.env.NEXT_PUBLIC_MISC_USE_ANON_KEY!
+  process.env.NEXT_PUBLIC_SUPABASE_URL!,
+  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
 )
 
 export type SupabaseClient = typeof supabase

apps/www/lib/supabaseMisc.ts

@@ -0,0 +1,11 @@
+import { createClient } from '@supabase/supabase-js'
+import { Database } from './database.types'
+
+const supabase = createClient<Database>(
+  process.env.NEXT_PUBLIC_MISC_USE_URL!,
+  process.env.NEXT_PUBLIC_MISC_USE_ANON_KEY!
+)
+
+export type SupabaseClient = typeof supabase
+
+export default supabase

apps/www/package.json

@@ -56,6 +56,7 @@
     "shared-data": "*",
     "swiper": "^6.5.0",
     "three": "^0.136.0",
+    "typed.js": "^2.0.16",
     "typescript": "^5.0.4",
     "ui": "*",
     "use-debounce": "^7.0.1",

apps/www/pages/_app.tsx

@@ -8,13 +8,16 @@ import { AppProps } from 'next/app'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { DefaultSeo } from 'next-seo'
-
+import { SessionContextProvider } from '@supabase/auth-helpers-react'
 import { API_URL, APP_NAME, DEFAULT_META_DESCRIPTION } from 'lib/constants'
-import Meta from '~/components/Favicons'
 import { post } from '~/lib/fetchWrapper'
+import supabase from '~/lib/supabase'
+import { CommandMenuProvider } from 'ui'
 import PortalToast from 'ui/src/layout/PortalToast'
 import { AuthProvider, ThemeProvider, useConsent, useTelemetryProps } from 'common'
 
+import Meta from '~/components/Favicons'
+
 export default function App({ Component, pageProps }: AppProps) {
   const router = useRouter()
   const telemetryProps = useTelemetryProps()
@@ -89,18 +92,22 @@ export default function App({ Component, pageProps }: AppProps) {
           cardType: 'summary_large_image',
         }}
       />
-      <AuthProvider>
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
-          forcedTheme={forceDarkMode ? 'dark' : undefined}
-        >
-          <PortalToast />
-          <Component {...pageProps} />
-        </ThemeProvider>
-      </AuthProvider>
+      <SessionContextProvider supabaseClient={supabase}>
+        <AuthProvider>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+            forcedTheme={forceDarkMode ? 'dark' : undefined}
+          >
+            <CommandMenuProvider site="website">
+              <PortalToast />
+              <Component {...pageProps} />
+            </CommandMenuProvider>
+          </ThemeProvider>
+        </AuthProvider>
+      </SessionContextProvider>
     </>
   )
 }

apps/www/pages/legal/dpa.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useState } from 'react'
 import { Button, Form, IconDownload, Input } from 'ui'
 
-import supabase from '~/lib/supabase'
+import supabase from '~/lib/supabaseMisc'
 import CTABanner from 'components/CTABanner/index'
 import Layout from '~/components/Layouts/Default'
 import SectionContainer from '~/components/Layouts/SectionContainer'

apps/www/pages/partners/[slug].tsx

@@ -1,7 +1,6 @@
 import { GetStaticPaths, GetStaticProps } from 'next'
 import 'swiper/swiper.min.css'
-import supabase from '~/lib/supabase'
-import { Partner } from '~/types/partners'
+import supabase from '~/lib/supabaseMisc'
 import Error404 from '../404'
 
 function PartnerPage() {

apps/www/pages/partners/experts/[slug].tsx

@@ -9,7 +9,7 @@ import 'swiper/swiper.min.css'
 import { IconChevronLeft, IconExternalLink } from 'ui'
 import DefaultLayout from '~/components/Layouts/Default'
 import SectionContainer from '~/components/Layouts/SectionContainer'
-import supabase from '~/lib/supabase'
+import supabase from '~/lib/supabaseMisc'
 import { Partner } from '~/types/partners'
 import Error404 from '../../404'
 

apps/www/pages/partners/experts/index.tsx

@@ -4,7 +4,7 @@ import DefaultLayout from '~/components/Layouts/Default'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import BecomeAPartner from '~/components/Partners/BecomeAPartner'
 import PartnerLinkBox from '~/components/Partners/PartnerLinkBox'
-import supabase from '~/lib/supabase'
+import supabase from '~/lib/supabaseMisc'
 import { Partner } from '~/types/partners'
 import TileGrid from '../../../components/Partners/TileGrid'
 
@@ -56,7 +56,7 @@ function ExpertPartnersPage(props: Props) {
         <SectionContainer className="space-y-12">
           <div>
             <h1 className="h1">{meta_title}</h1>
-            <h2 className="text-scale-900 text-xl">{meta_description}</h2>
+            <p className="text-scale-900 text-xl">{meta_description}</p>
           </div>
           <div className="grid space-y-12 md:gap-8 lg:grid-cols-12 lg:gap-16 lg:space-y-0 xl:gap-16">
             <div className="lg:col-span-4 xl:col-span-3">
@@ -120,15 +120,14 @@ function ExpertPartnersPage(props: Props) {
                 {partners.length ? (
                   <TileGrid partners={partners} hideCategories={true} />
                 ) : (
-                  <h2 className="h2">No Partners Found</h2>
+                  <p className="h2">No Partners Found</p>
                 )}
               </div>
             </div>
           </div>
-
-          {/* Become a partner form */}
         </SectionContainer>
-        <BecomeAPartner supabase={supabase} />
+        {/* Become a partner form */}
+        <BecomeAPartner />
       </DefaultLayout>
     </>
   )

apps/www/pages/partners/integrations/[slug].tsx

@@ -15,7 +15,7 @@ import { Admonition, Button, ExpandableVideo, IconChevronLeft, IconExternalLink
 import ImageModal from '~/components/ImageModal'
 import DefaultLayout from '~/components/Layouts/Default'
 import SectionContainer from '~/components/Layouts/SectionContainer'
-import supabase from '~/lib/supabase'
+import supabase from '~/lib/supabaseMisc'
 import { Partner } from '~/types/partners'
 import Error404 from '../../404'
 

apps/www/pages/partners/integrations/index.tsx

@@ -7,7 +7,7 @@ import DefaultLayout from '~/components/Layouts/Default'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import BecomeAPartner from '~/components/Partners/BecomeAPartner'
 import PartnerLinkBox from '~/components/Partners/PartnerLinkBox'
-import supabase from '~/lib/supabase'
+import supabase from '~/lib/supabaseMisc'
 import { Partner } from '~/types/partners'
 import TileGrid from '../../../components/Partners/TileGrid'
 
@@ -106,7 +106,7 @@ function IntegrationPartnersPage(props: Props) {
         <SectionContainer className="space-y-16">
           <div>
             <h1 className="h1">{meta_title}</h1>
-            <h2 className="text-scale-900 text-xl">{meta_description}</h2>
+            <p className="text-scale-900 text-xl">{meta_description}</p>
           </div>
           {/* Title */}
           <div className="grid space-y-12 md:gap-8 lg:grid-cols-12 lg:gap-16 lg:space-y-0 xl:gap-16">
@@ -120,7 +120,6 @@ function IntegrationPartnersPage(props: Props) {
                   icon={<IconSearch />}
                   placeholder="Search..."
                   type="text"
-                  // className="md:w-1/2"
                   value={search}
                   onChange={(e) => setSearch(e.target.value)}
                   actions={
@@ -195,19 +194,6 @@ function IntegrationPartnersPage(props: Props) {
                     />
                   </div>
                 </div>
-                {/* <div className="flex flex-col space-y-1 sm:flex-row sm:space-y-0 sm:space-x-6">
-                  <Link href={`/partners/integrations`}>
-                    <a className="text-scale-1200">INTEGRATIONS</a>
-                  </Link>
-                  <Link href={`/partners/experts`}>
-                    <a className="transition-colors text-brand hover:text-brand-300">EXPERTS</a>
-                  </Link>
-                  <Link href={`/partners/integrations#become-a-partner`}>
-                    <a className="flex items-center space-x-1 transition-colors text-brand hover:text-brand-300">
-                      BECOME A PARTNER <IconArrowRight />
-                    </a>
-                  </Link>
-                </div> */}
               </div>
             </div>
             <div className="lg:col-span-8 xl:col-span-9">
@@ -216,14 +202,13 @@ function IntegrationPartnersPage(props: Props) {
                 {partners?.length ? (
                   <TileGrid partners={partners} />
                 ) : (
-                  <h2 className="h2">No Partners Found</h2>
+                  <p className="h2">No Partners Found</p>
                 )}
               </div>
             </div>
           </div>
-          {/* Become a partner form */}
         </SectionContainer>
-        <BecomeAPartner supabase={supabase} />
+        <BecomeAPartner />
       </DefaultLayout>
     </>
   )

apps/www/pages/support.tsx

@@ -1,31 +1,42 @@
-import Container from 'components/Container'
-import Layout from '~/components/Layouts/Default'
+import { useEffect, useRef } from 'react'
 import Link from 'next/link'
-import { Button, IconMessageCircle, IconGitHub, Divider, IconMail } from 'ui'
-import SectionContainer from '~/components/Layouts/SectionContainer'
-
-// Import Swiper styles if swiper used on page
-import 'swiper/swiper.min.css'
 import { useRouter } from 'next/router'
 import { NextSeo } from 'next-seo'
+import Typed from 'typed.js'
+import { Button, ButtonProps, cn, IconCommand, IconSearch, SearchButton } from 'ui'
 
-type Props = {}
+import DefaultLayout from '~/components/Layouts/Default'
+import InteractiveShimmerCard from '~/components/InteractiveShimmerCard'
+import SectionContainer from '~/components/Layouts/SectionContainer'
+import { questions } from 'shared-data'
+import data from '~/data/support'
 
-const Index = ({}: Props) => {
+const Index = () => {
   const router = useRouter()
+  const typerRef = useRef(null)
 
-  const meta_title = 'Help & Support | Supabase'
-  const meta_description =
-    'Find help and support for Supabase. Our support agents provide answers on all types of issues, including account information, billing, and refunds.'
+  useEffect(() => {
+    const typed = new Typed(typerRef.current, {
+      strings: questions,
+      typeSpeed: 50,
+      backDelay: 4000,
+      showCursor: false,
+    })
+
+    return () => {
+      // Destroy Typed instance during cleanup to stop animation
+      typed.destroy()
+    }
+  }, [])
 
   return (
     <>
       <NextSeo
-        title={meta_title}
-        description={meta_description}
+        title={data.meta_title}
+        description={data.meta_description}
         openGraph={{
-          title: meta_title,
-          description: meta_description,
+          title: data.meta_title,
+          description: data.meta_description,
           url: `https://supabase.com/${router.pathname}`,
           images: [
             {
@@ -34,181 +45,106 @@ const Index = ({}: Props) => {
           ],
         }}
       />
-      <Layout>
-        <Container>
-          <SectionContainer className="">
-            <div className="space-y-2 text-center">
-              <h1 className="text-brand font-mono text-base uppercase tracking-widest">Support</h1>
-              <h1 className="h1">Get Support</h1>
-              <p className="text-scale-1100 lg:text-lg">
-                The Supabase Support Team is ready to help.
-              </p>
-            </div>
-            <div className="text-scale-1200 mt-16 grid gap-5 sm:grid-cols-3 md:grid-cols-12">
-              <div className="col-span-12 lg:col-span-6 xl:col-span-4">
-                <div
-                  className="dark:bg-scale-400 flex h-40
-                    flex-col justify-between rounded rounded-b-none border-t
-                    border-r
-                    border-l border-gray-100 bg-white
-                    p-5 dark:border-gray-600
-                    "
-                >
-                  <div className="mb-4">
-                    <h5 className="text-scale-1200 text-lg font-medium">GitHub Issues</h5>
-                    <p className="my-2 block">
-                      <p className="text-scale-1100">
-                        Have a general issue or bug that you've found? We'd love to hear about it in
-                        our GitHub issues. This can be feature requests too!
-                      </p>
-                      <p className="text-scale-1100 mt-2 text-sm">
-                        <span className="text-brand font-bold">Use this for:</span> Bugs and other
-                        issues
-                      </p>
-                    </p>
-                  </div>
+      <DefaultLayout className="!min-h-fit">
+        <div className="bg-alternative">
+          <SectionContainer className="space-y-2 text-center">
+            <h1 className="text-brand font-mono text-base uppercase tracking-widest">
+              {data.hero.h1}
+            </h1>
+            <p className="h1 tracking-[-1px]">{data.hero.title}</p>
+            <SearchButton className="mx-auto w-full max-w-lg">
+              <div
+                className="
+                  flex
+                  px-3
+                  py-3
+                  group
+                  items-center
+                  justify-between
+                  bg-scale-200
+                  border
+                  border-scale-500
+                  hover:bg-scale-300
+                  hover:border-scale-600
+                  transition 
+                  rounded"
+              >
+                <div className="flex items-center flex-1 space-x-2">
+                  <IconSearch className="text-scale-1100" size={18} strokeWidth={2} />
+                  <p
+                    ref={typerRef}
+                    className="text-lighter text-sm group-hover:text-light transition"
+                  />
                 </div>
-                <Divider type="horizontal" light orientation="center" />
-                <div>
-                  <div
-                    className="
-                    dark:bg-scale-400 flex
-                    flex-col justify-between rounded rounded-t-none border-b
-                    border-r border-l
-                    border-gray-100 bg-white p-5
-                    pt-14 dark:border-gray-600"
-                  >
-                    <Link
-                      href="https://github.com/supabase/supabase/issues"
-                      as="https://github.com/supabase/supabase/issues"
-                    >
-                      <a target="_blank">
-                        <Button size="medium" type="default" iconRight={<IconGitHub />}>
-                          Go To Issues
-                        </Button>
-                      </a>
-                    </Link>
+                <div className="flex items-center h-full space-x-1">
+                  <div className="hidden text-lighter md:flex items-center justify-center h-5 w-10 border rounded bg-scale-500 border-scale-700 gap-1">
+                    <IconCommand size={12} strokeWidth={1.5} />
+                    <span className="text-[12px]">K</span>
                   </div>
                 </div>
               </div>
-              <div className="col-span-12 lg:col-span-6 xl:col-span-4">
-                <div
-                  className="dark:bg-scale-400 flex h-40
-                    flex-col justify-between rounded rounded-b-none border-t
-                    border-r
-                    border-l border-gray-100 bg-white
-                    p-5 dark:border-gray-600
-                    "
-                >
-                  <div className="mb-4">
-                    <h5 className="text-scale-1200 text-lg font-medium">
-                      GitHub Discussions/Discord
-                    </h5>
-                    <p className="my-2 block">
-                      <p className="text-scale-1100">
-                        For help and questions about best practices, join our GitHub discussions or
-                        join us on Discord. Browse and ask questions.
-                      </p>
-                      <p className="text-scale-1100 mt-2 text-sm">
-                        <span className="text-brand text-sm font-bold">Use this for:</span> General
-                        questions
-                      </p>
-                    </p>
-                  </div>
-                </div>
-                <Divider type="horizontal" light orientation="center" />
-                <div>
-                  <div
-                    className="
-                    dark:bg-scale-400 flex flex-row
-                    gap-2 rounded rounded-t-none border-b border-r
-                    border-l border-gray-100
-                    bg-white p-5 pt-14
-                    dark:border-gray-600 lg:justify-evenly"
-                  >
-                    <Link
-                      href="https://github.com/supabase/supabase/discussions"
-                      as="https://github.com/supabase/supabase/discussions"
-                    >
-                      <a target="_blank">
-                        <Button size="medium" type="default" iconRight={<IconMessageCircle />}>
-                          Join the discussion
-                        </Button>
-                      </a>
-                    </Link>
-                    <Link href="https://discord.gg/rxTfewPvys" as="https://discord.gg/rxTfewPvys">
-                      <a target="_blank">
-                        <Button
-                          size="medium"
-                          type="default"
-                          iconRight={
-                            <svg
-                              className="h-5 w-5"
-                              fill="currentColor"
-                              viewBox="0 0 71 55"
-                              aria-hidden="true"
-                            >
-                              <path
-                                fillRule="evenodd"
-                                d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z"
-                                clipRule="evenodd"
-                              />
-                            </svg>
-                          }
-                        >
-                          Join Discord
-                        </Button>
-                      </a>
-                    </Link>
-                  </div>
-                </div>
-              </div>
-
-              <div className="col-span-12 lg:col-span-6 xl:col-span-4">
-                <div
-                  className="dark:bg-scale-400 flex h-40
-                    flex-col justify-between rounded rounded-b-none border-t
-                    border-r
-                    border-l border-gray-100 bg-white
-                    p-5 dark:border-gray-600
-                    "
-                >
-                  <div className="mb-4">
-                    <h5 className="text-scale-1200 text-lg font-medium">Email Support</h5>
-                    <p className="my-2 block">
-                      <p className="text-scale-1100">
-                        We offer email based support. If you need SLAs, guaranteed response times,
-                        or have an issue, please contact us here.
-                      </p>
-                      <p className="text-scale-1100 mt-2 text-sm">
-                        <span className="text-brand text-sm font-bold">Use this for:</span> Issues
-                        or questions specific to you
-                      </p>
-                    </p>
-                  </div>
-                </div>
-                <Divider type="horizontal" light orientation="center" />
-                <div>
-                  <div
-                    className="
-                    dark:bg-scale-400 flex
-                    flex-col justify-between rounded rounded-t-none border-b
-                    border-r border-l
-                    border-gray-100 bg-white p-5
-                    pt-14 dark:border-gray-600"
-                  >
-                    <a href="https://supabase.com/dashboard/support/new">
-                      <Button size="medium" type="default" iconRight={<IconMail />}>
-                        Email Support
-                      </Button>
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
+            </SearchButton>
           </SectionContainer>
-        </Container>
-      </Layout>
+        </div>
+        <SectionContainer className="text grid gap-5 md:grid-cols-2 xl:grid-cols-3 max-w-7xl !pb-8">
+          {data.cards.map((card) => (
+            <InteractiveShimmerCard
+              key={card.title}
+              outerClassName={cn(card.className)}
+              innerClassName="flex flex-col p-5"
+            >
+              <div className="mb-4 lg:mb-8 flex-1">
+                <h2 className="text text-lg font-medium">{card.title}</h2>
+                <div className="my-2 block">
+                  <p className="text-light">{card.paragraph}</p>
+                </div>
+              </div>
+              <div className="flex gap-2">
+                {card.links.map((link) => (
+                  <Link href={link.link} as={link.link} passHref>
+                    <Button
+                      size="small"
+                      type={(link.type as ButtonProps['type']) ?? 'default'}
+                      iconRight={link.icon}
+                      asChild
+                    >
+                      <a target={link.target}>{link.label}</a>
+                    </Button>
+                  </Link>
+                ))}
+              </div>
+            </InteractiveShimmerCard>
+          ))}
+        </SectionContainer>
+        <SectionContainer className="!pt-0 max-w-7xl">
+          <div className="mx-auto bg-alternative border rounded-xl p-6 lg:p-10">
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-2 xl:gap-16 justify-between">
+              <div className="gap-2 flex flex-col">
+                <h2 className="text-xl lg:text-2xl tracking-tight">{data.banner.title}</h2>
+              </div>
+              <div className="flex flex-col gap-4">
+                <div className="flex flex-col">{data.banner.paragraph}</div>
+                <div className="flex gap-2">
+                  {data.banner.links.map((link) => (
+                    <Link href={link.link} as={link.link} passHref>
+                      <Button
+                        size="tiny"
+                        type={(link.type as ButtonProps['type']) ?? 'default'}
+                        iconRight={link.icon}
+                        asChild
+                      >
+                        <a target={link.target} className={cn(link.className)}>
+                          {link.label}
+                        </a>
+                      </Button>
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </SectionContainer>
+      </DefaultLayout>
     </>
   )
 }

package-lock.json

@@ -298,6 +298,7 @@
         "shared-data": "*",
         "swiper": "^6.5.0",
         "three": "^0.136.0",
+        "typed.js": "^2.0.16",
         "typescript": "^5.0.4",
         "ui": "*",
         "use-debounce": "^7.0.1",
@@ -39020,6 +39021,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typed.js": {
+      "version": "2.0.16",
+      "resolved": "https://registry.npmjs.org/typed.js/-/typed.js-2.0.16.tgz",
+      "integrity": "sha512-IBB52GlJiTUOnomwdVVf7lWgC6gScn8md+26zTHj5oJWA+4pSuclHE76rbGI2hnyO+NT+QXdIUHbfjAY5nEtcw=="
+    },
     "node_modules/typedarray": {
       "version": "0.0.6",
       "license": "MIT"

packages/shared-data/index.ts

@@ -3,7 +3,8 @@ import logConstants from './logConstants'
 import { plans, PricingInformation } from './plans'
 import { pricing } from './pricing'
 import { products } from './products'
+import questions from './questions'
 import extensions from './extensions.json'
 
-export { tweets, logConstants, plans, pricing, products, extensions }
+export { tweets, logConstants, plans, pricing, products, questions, extensions }
 export type { PricingInformation }

packages/shared-data/questions.ts

@@ -0,0 +1,9 @@
+export default [
+  'How do I restart my database?',
+  'How do I get started with Supabase?',
+  'How do I run Supabase locally?',
+  'How do I connect to my database?',
+  'How do I run migrations? ',
+  'How do I listen to changes in a table?',
+  'How do I set up authentication?',
+]

packages/ui/index.tsx

@@ -259,6 +259,8 @@ export * from './src/components/Icon/icons/IconCrosshair'
 export * from './src/components/Icon/icons/IconDatabase'
 export * from './src/components/Icon/icons/IconDelete'
 export * from './src/components/Icon/icons/IconDisc'
+export * from './src/components/Icon/icons/IconDiscord'
+export * from './src/components/Icon/icons/IconDiscussions'
 export * from './src/components/Icon/icons/IconDivideCircle'
 export * from './src/components/Icon/icons/IconDivideSquare'
 export * from './src/components/Icon/icons/IconDivide'
@@ -295,6 +297,7 @@ export * from './src/components/Icon/icons/IconGitCommit'
 export * from './src/components/Icon/icons/IconGitMerge'
 export * from './src/components/Icon/icons/IconGitPullRequest'
 export * from './src/components/Icon/icons/IconGitHub'
+export * from './src/components/Icon/icons/IconGitHubSolid'
 export * from './src/components/Icon/icons/IconGitlab'
 export * from './src/components/Icon/icons/IconGlobe'
 export * from './src/components/Icon/icons/IconGrid'

packages/ui/src/components/Command/CommandMenuProvider.tsx

@@ -16,7 +16,7 @@ export interface CommandMenuContextValue {
   pages: string[]
   setPages: React.Dispatch<React.SetStateAction<string[]>>
   currentPage?: string
-  site: 'studio' | 'docs'
+  site: 'studio' | 'docs' | 'website'
 
   /**
    * Project metadata for easy retrieval
@@ -46,7 +46,7 @@ export const useCommandMenu = () => {
 }
 
 export interface CommandMenuProviderProps {
-  site: 'studio' | 'docs'
+  site: 'studio' | 'docs' | 'website'
   projectRef?: string
   /**
    * Project's API keys, for easy access through CMDK

packages/ui/src/components/Icon/icons/IconDiscord/IconDiscord.tsx

@@ -0,0 +1,16 @@
+// @ts-ignore
+import IconBase from '../../IconBase'
+
+const src = (
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M14.0447 3.21602C13.0249 2.7481 11.9313 2.40336 10.7879 2.20591C10.7671 2.2021 10.7463 2.21162 10.7356 2.23067C10.5949 2.48081 10.4392 2.80714 10.3301 3.06364C9.10027 2.87952 7.87679 2.87952 6.67221 3.06364C6.5631 2.80144 6.40166 2.48081 6.26038 2.23067C6.24966 2.21225 6.22886 2.20273 6.20803 2.20591C5.06527 2.40272 3.97171 2.74747 2.95129 3.21602C2.94246 3.21983 2.93488 3.22618 2.92986 3.23443C0.855594 6.33334 0.287367 9.35608 0.56612 12.3413C0.567381 12.3559 0.57558 12.3699 0.586932 12.3788C1.95547 13.3838 3.28114 13.994 4.58219 14.3984C4.60301 14.4047 4.62507 14.3971 4.63832 14.38C4.94608 13.9597 5.22043 13.5165 5.45565 13.0505C5.46953 13.0232 5.45628 12.9908 5.42791 12.98C4.99275 12.815 4.5784 12.6137 4.17982 12.3851C4.14829 12.3667 4.14577 12.3216 4.17477 12.3001C4.25865 12.2372 4.34255 12.1718 4.42264 12.1058C4.43713 12.0937 4.45732 12.0912 4.47435 12.0988C7.09286 13.2943 9.9277 13.2943 12.5153 12.0988C12.5323 12.0905 12.5525 12.0931 12.5677 12.1051C12.6478 12.1712 12.7316 12.2372 12.8161 12.3001C12.8451 12.3216 12.8433 12.3667 12.8117 12.3851C12.4131 12.6181 11.9988 12.815 11.563 12.9794C11.5346 12.9902 11.522 13.0232 11.5359 13.0505C11.7762 13.5159 12.0505 13.959 12.3526 14.3793C12.3652 14.3971 12.3879 14.4047 12.4087 14.3984C13.7161 13.994 15.0417 13.3838 16.4103 12.3788C16.4223 12.3699 16.4298 12.3566 16.4311 12.342C16.7647 8.89068 15.8723 5.89273 14.0655 3.23506C14.0611 3.22618 14.0535 3.21983 14.0447 3.21602ZM5.84668 10.5236C5.05833 10.5236 4.40876 9.79986 4.40876 8.91101C4.40876 8.02215 5.04574 7.29839 5.84668 7.29839C6.65392 7.29839 7.29721 8.0285 7.28459 8.91101C7.28459 9.79986 6.64761 10.5236 5.84668 10.5236ZM11.1632 10.5236C10.3748 10.5236 9.72526 9.79986 9.72526 8.91101C9.72526 8.02215 10.3622 7.29839 11.1632 7.29839C11.9704 7.29839 12.6137 8.0285 12.6011 8.91101C12.6011 9.79986 11.9704 10.5236 11.1632 10.5236Z"
+  />
+)
+
+function IconDiscord(props: any) {
+  return <IconBase src={src} stroke="none" {...props} />
+}
+
+export default IconDiscord

packages/ui/src/components/Icon/icons/IconDiscord/index.tsx

@@ -0,0 +1 @@
+export { default as IconDiscord } from './IconDiscord'

packages/ui/src/components/Icon/icons/IconDiscussions/IconDiscussions.tsx

@@ -0,0 +1,22 @@
+// @ts-ignore
+import IconBase from '../../IconBase'
+
+const src = (
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="
+      M0.504883 3.07692C0.504883 1.37759 1.88247 0 3.58181 0H13.428C15.1273 0 16.5049 1.37758 16.5049 3.07692V9.69032C16.5049 11.3897 15.1273 12.7672 13.428 12.7672H8.16317L5.24084 15.8108C5.06688 15.992 4.80026 16.0493 4.56724 15.9555C4.33422 15.8617 4.18157 15.6358 4.18157 15.3846V12.7672H3.58181C1.88247 12.7672 0.504883 11.3897 0.504883 9.69032V3.07692ZM3.58181 1.23077C2.5622 1.23077 1.73565 2.05732 1.73565 3.07692V9.69032C1.73565 10.7099 2.5622 11.5365 3.58181 11.5365H4.79695C5.13682 11.5365 5.41233 11.812 5.41233 12.1519V13.8552L7.45702 11.7256C7.57307 11.6048 7.73337 11.5365 7.90092 11.5365H13.428C14.4476 11.5365 15.2741 10.7099 15.2741 9.69032V3.07692C15.2741 2.05732 14.4476 1.23077 13.428 1.23077H3.58181Z
+      M6.04334 5.86479C6.38321 5.86479 6.65873 6.14031 6.65873 6.48017C6.65873 6.82004 6.38321 7.09556 6.04334 7.09556C5.70348 7.09556 5.42796 6.82004 5.42796 6.48017C5.42796 6.14031 5.70348 5.86479 6.04334 5.86479Z
+      M8.50488 5.86479C8.84475 5.86479 9.12027 6.14031 9.12027 6.48017C9.12027 6.82004 8.84475 7.09556 8.50488 7.09556C8.16502 7.09556 7.8895 6.82004 7.8895 6.48017C7.8895 6.14031 8.16502 5.86479 8.50488 5.86479Z
+      M10.9664 5.86479C11.3063 5.86479 11.5818 6.14031 11.5818 6.48017C11.5818 6.82004 11.3063 7.09556 10.9664 7.09556C10.6266 7.09556 10.351 6.82004 10.351 6.48017C10.351 6.14031 10.6266 5.86479 10.9664 5.86479Z
+    "
+    fill="currentColor"
+  />
+)
+
+function IconDiscussions(props: any) {
+  return <IconBase src={src} stroke="none" {...props} />
+}
+
+export default IconDiscussions

packages/ui/src/components/Icon/icons/IconDiscussions/index.tsx

@@ -0,0 +1 @@
+export { default as IconDiscussions } from './IconDiscussions'

packages/ui/src/components/Icon/icons/IconGitHubSolid/IconGitHubSolid.tsx

@@ -0,0 +1,20 @@
+// DO NOT EDIT
+// this file is generated by /internals/populate-icons script
+import * as React from 'react'
+// @ts-ignore
+import IconBase from '../../IconBase'
+
+const src = (
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8.50488 0.18457C4.08648 0.18457 0.504883 3.77176 0.504883 8.19814C0.504883 11.7381 2.79688 14.7421 5.97608 15.8013C6.37608 15.8749 6.52168 15.6277 6.52168 15.4149C6.52168 15.2253 6.51528 14.7205 6.51128 14.0525C4.28568 14.5365 3.81608 12.9781 3.81608 12.9781C3.45288 12.0517 2.92808 11.8053 2.92808 11.8053C2.20168 11.3093 2.98328 11.3189 2.98328 11.3189C3.78568 11.3749 4.20808 12.1445 4.20808 12.1445C4.92168 13.3685 6.08088 13.0149 6.53608 12.8101C6.60968 12.2925 6.81608 11.9397 7.04488 11.7397C5.26888 11.5373 3.40088 10.8493 3.40088 7.77895C3.40088 6.90455 3.71288 6.18855 4.22408 5.62855C4.14168 5.42615 3.86728 4.61096 4.30248 3.50856C4.30248 3.50856 4.97448 3.29256 6.50248 4.32936C7.1551 4.15137 7.82843 4.06071 8.50488 4.05976C9.18488 4.06296 9.86888 4.15176 10.5081 4.32936C12.0353 3.29256 12.7057 3.50776 12.7057 3.50776C13.1425 4.61096 12.8673 5.42615 12.7857 5.62855C13.2977 6.18855 13.6081 6.90455 13.6081 7.77895C13.6081 10.8573 11.7369 11.5349 9.95528 11.7333C10.2425 11.9805 10.4977 12.4693 10.4977 13.2173C10.4977 14.2877 10.4881 15.1525 10.4881 15.4149C10.4881 15.6293 10.6321 15.8789 11.0385 15.8005C12.6315 15.2662 14.0164 14.2448 14.9973 12.8806C15.9782 11.5164 16.5056 9.87839 16.5049 8.19814C16.5049 3.77176 12.9225 0.18457 8.50488 0.18457Z"
+    fill="currentColor"
+  />
+)
+
+function IconGitHubSolid(props: any) {
+  return <IconBase src={src} stroke="none" {...props} />
+}
+
+export default IconGitHubSolid

packages/ui/src/components/Icon/icons/IconGitHubSolid/index.tsx

@@ -0,0 +1 @@
+export { default as IconGitHubSolid } from './IconGitHubSolid'

packages/ui/src/components/Icon/icons/index.tsx

@@ -86,6 +86,8 @@ export * as IconCrosshair from './IconCrosshair'
 export * as IconDatabase from './IconDatabase'
 export * as IconDelete from './IconDelete'
 export * as IconDisc from './IconDisc'
+export * as IconDiscord from './IconDiscord'
+export * as IconDiscussions from './IconDiscussions'
 export * as IconDivideCircle from './IconDivideCircle'
 export * as IconDivideSquare from './IconDivideSquare'
 export * as IconDivide from './IconDivide'
@@ -122,6 +124,7 @@ export * as IconGitCommit from './IconGitCommit'
 export * as IconGitMerge from './IconGitMerge'
 export * as IconGitPullRequest from './IconGitPullRequest'
 export * as IconGitHub from './IconGitHub'
+export * as IconGitHubSolid from './IconGitHubSolid'
 export * as IconGitlab from './IconGitlab'
 export * as IconGlobe from './IconGlobe'
 export * as IconGrid from './IconGrid'