chore: docs homepage content

apps/docs/components/HomePageCover.tsx

@@ -21,7 +21,7 @@ const HomePageCover = (props) => {
         <div className="md:max-w-xs xl:max-w-none">
           <div className="flex items-center gap-3 mb-3">
             <IconBackground>
-              <IconPlay className="text-brand-900 w-4" />
+              <IconPlay className="text-brand-1100 dark:text-brand-900 w-4" />
             </IconBackground>
             <h3 className="text-2xl m-0">Getting Started</h3>
           </div>

apps/docs/components/Navigation/Footer.tsx

@@ -5,7 +5,7 @@ import { LayoutMainContent } from '../../layouts/DefaultLayout'
 
 const Footer = () => (
   <LayoutMainContent className="pt-0">
-    <div className="mt-8">
+    <div className="mt-16">
       <ul className="flex flex-col gap-2">
         {primaryLinks.map(({ url, featherIcon: Icon, icon, text, ctaLabel }) => (
           <li key={url} className="flex items-center gap-1 text-xs text-scale-900">

apps/docs/components/reference/RefSectionHandler.tsx

@@ -21,7 +21,7 @@ interface RefSectionHandlerProps {
 const RefSectionHandler = (props: RefSectionHandlerProps) => {
   const router = useRouter()
 
-  const slug = router.query?.slug[0]
+  const slug = router.query.slug[0]
 
   // When user lands on a url like http://supabase.com/docs/reference/javascript/sign-up
   // find the #sign-up element and scroll to that

apps/docs/data/footer.ts

@@ -3,19 +3,19 @@ import { IconCheckCircle, IconLifeBuoy } from '~/../../packages/ui'
 export const primaryLinks = [
   {
     featherIcon: IconLifeBuoy,
-    text: 'Need help?',
+    text: 'Need some help?',
     ctaLabel: 'Contact support',
     url: 'https://app.supabase.com/support/new',
   },
   {
     icon: 'M12.9521 10.5073C12.766 10.3212 12.5289 10.1943 12.2708 10.1427L10.6794 9.82467C9.80719 9.65024 8.90169 9.77152 8.10609 10.1693L7.89409 10.2747C7.0985 10.6725 6.193 10.7938 5.32076 10.6193L4.03343 10.362C3.81823 10.319 3.59574 10.3298 3.38571 10.3934C3.17569 10.457 2.9846 10.5715 2.82943 10.7267M5.33343 2.88867H10.6668L10.0001 3.55534V7.00334C10.0002 7.35693 10.1407 7.69602 10.3908 7.94601L13.7241 11.2793C14.5641 12.1193 13.9688 13.5553 12.7808 13.5553H3.21876C2.03076 13.5553 1.43609 12.1193 2.27609 11.2793L5.60943 7.94601C5.85949 7.69602 6.00002 7.35693 6.00009 7.00334V3.55534L5.33343 2.88867Z',
-    text: 'Lastest updates?',
+    text: 'Lastest product updates?',
     ctaLabel: 'See Changelog',
     url: 'https://supabase.com/changelog',
   },
   {
     featherIcon: IconCheckCircle,
-    text: 'Something’s not right?',
+    text: "Something's not right?",
     ctaLabel: 'Check system status',
     url: 'https://status.supabase.com/',
   },

apps/docs/layouts/guides/index.tsx

@@ -169,7 +169,7 @@ const Layout: FC<Props> = (props) => {
             </div>
           )}
         </div>
-        <FooterHelpCallout footerHelpType={props.meta?.footerHelpType} title={props.meta?.title} />
+        {/* <FooterHelpCallout footerHelpType={props.meta?.footerHelpType} title={props.meta?.title} /> */}
       </LayoutMainContent>
     </>
   )

apps/docs/pages/index.mdx

@@ -20,58 +20,121 @@ export const meta = {
 
 <div className="flex flex-col">
 
-<div>
-  <div className="max-w-xl">
-    ## Products
-  </div>
-
-  <div className="grid grid-cols-12 gap-6 not-prose">
-    {products.map((product) => {
-      return (
-        <Link
-          href={`${product.href}`}
-          key={product.title}
-          passHref
-        >
-          <a className={product.span ?? 'col-span-12 md:col-span-4'}>
-            <GlassPanel {...product} background={true} showIconBg={true} showLink={true}>
-              {product.description}
-            </GlassPanel>
-          </a>
-        </Link>
-      )
-    })}
-  </div>
-  
-  <div className="flex flex-col lg:grid grid-cols-12 gap-6 mt-12 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="/docs/guides/resources"
-        className="no-underline text-brand-900 text-sm"
-      />
+  <div>
+    <div className="max-w-xl">
+      ## Products
     </div>
 
-    <div className="grid col-span-8 grid-cols-12 gap-6 not-prose">
-      {migrationGuides.map((product) => {
+    <div className="grid grid-cols-12 gap-6 not-prose [&_svg]:text-brand-1100 [&_svg]dark:text-brand-900">
+      {products.map((product) => {
+        return (
+          <Link href={product.href} key={product.title} passHref>
+            <a 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>
+            </a>
+          </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-1100 dark:text-brand-900">
+            {/* <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>
+              <a 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>
+              </a>
+            </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="/docs/guides/resources"
+          className="no-underline text-brand-900 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}
+              passHref
+            >
+              <a className={product.span ?? 'col-span-6 md:col-span-4'}>
+                <IconPanel {...product} background={true} showIconBg={true} showLink={false}>
+                  {product.description}
+                </IconPanel>
+              </a>
+            </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}`}
+            href={product.href}
             key={product.title}
             passHref
           >
-            <a className={product.span ?? 'col-span-6 md:col-span-4'}>
-              <IconPanel {...product} background={true} showIconBg={true} showLink={true} showLink={false}>
+            <a className={product.span ?? 'col-span-12 md:col-span-6 lg:col-span-3'}>
+              <GlassPanel {...product} icon={<HomeMenuIconPicker icon={product.icon} width={18} height={18} />} background={false}>
                 {product.description}
-              </IconPanel>
+              </GlassPanel>
             </a>
           </Link>
         )
@@ -80,11 +143,7 @@ export const meta = {
 
   </div>
 
-</div>
-
-<div>
-
-  <div className="flex flex-col lg:grid grid-cols-12 gap-6 py-12 border-b">
+  <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">
 
@@ -112,12 +171,12 @@ export const meta = {
         {selfHostingOptions.map((product) => {
           return (
             <Link
-              href={`${product.href}`}
+              href={product.href}
               key={product.title}
               passHref
             >
               <a className={product.span ?? 'col-span-6'}>
-                <IconPanel {...product} icon={<HomeMenuIconPicker icon={product.icon} width={18} height={18} />} background={true} showIconBg={true} showLink={true} showLink={false}>
+                <IconPanel {...product} icon={<HomeMenuIconPicker icon={product.icon} width={18} height={18} />} background={true} showIconBg={true} showLink={false}>
                   {product.description}
                 </IconPanel>
               </a>
@@ -128,55 +187,13 @@ export const meta = {
     </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-1100 dark:text-brand-900">
-          <IconBackground>
-            <HomeMenuIconPicker icon="reference-cli" width={18} height={18} />
-          </IconBackground>
-          ### Official Client Libraries
-        </div>
-        {/* <p className="text-scale-1100 text-sm">
-          Some short description about using Official Client Libraries across all of these products we listed here.
-        </p> */}
-      </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">
-        {clientLibraries.map((product) => {
-          return (
-            <Link
-              href={`${product.href}`}
-              key={product.title}
-              passHref
-            >
-              <a className={product.span ?? 'col-span-6'}>
-                <IconPanel {...product} icon={<HomeMenuIconPicker icon={product.icon} width={18} height={18} />} background={true} showIconBg={true} showLink={true} showLink={false}>
-                  {product.description}
-                </IconPanel>
-              </a>
-            </Link>
-          )
-        })}
-      </div>
-    </div>
-
-  </div>
-
-</div>
 
 </div>
 
 export const products = [
   {
     title: 'Database',
-    icon: '/docs/img/icons/menu/database',
+    icon: 'database',
     hasLightIcon: true,
     href: '/guides/database',
     description:
@@ -185,16 +202,16 @@ export const products = [
   },
   {
     title: 'Auth',
-    icon: '/docs/img/icons/menu/auth',
+    icon: 'auth',
     hasLightIcon: true,
-    href: '/guides/auth/overview',
+    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.',
     span: 'col-span-12 md:col-span-6',
   },
   {
     title: 'Storage',
-    icon: '/docs/img/icons/menu/storage',
+    icon: 'storage',
     hasLightIcon: true,
     href: '/guides/storage',
     description:
@@ -202,7 +219,7 @@ export const products = [
   },
   {
     title: 'Realtime',
-    icon: '/docs/img/icons/menu/realtime',
+    icon: 'realtime',
     hasLightIcon: true,
     href: '/guides/realtime',
     description:
@@ -210,7 +227,7 @@ export const products = [
   },
   {
     title: 'Edge Functions',
-    icon: '/docs/img/icons/menu/functions',
+    icon: 'functions',
     hasLightIcon: true,
     href: '/guides/functions',
     description:
@@ -255,22 +272,22 @@ export const selfHostingOptions = [
   {
     title: 'Auth',
     icon: 'auth',
-    href: '/docs/reference/self-hosting-auth/introduction',
+    href: 'reference/self-hosting-auth/introduction',
   },
   {
     title: 'Realtime',
     icon: 'realtime',
-    href: '/docs/reference/self-hosting-realtime/introduction',
+    href: 'reference/self-hosting-realtime/introduction',
   },
   {
     title: 'Storage',
     icon: 'storage',
-    href: '/docs/reference/self-hosting-storage/introduction',
+    href: 'reference/self-hosting-storage/introduction',
   },
   {
     title: 'Analytics',
     icon: 'analytics',
-    href: '/docs/reference/self-hosting-analytics/introduction',
+    href: 'reference/self-hosting-analytics/introduction',
   },
 ]
 
@@ -278,12 +295,54 @@ export const clientLibraries = [
   {
     title: 'Javascript',
     icon: 'reference-javascript',
-    href: '/docs/reference/javascript/initializing',
+    href: 'reference/javascript/introduction',
   },
   {
     title: 'Flutter',
     icon: 'reference-dart',
-    href: '/docs/reference/dart/initializing',
+    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',
+  },
+]
+
+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',
   },
 ]
 

packages/ui/src/components/IconPanel/IconPanel.tsx

@@ -102,7 +102,14 @@ const IconPanel = ({
         bg-scale-200 dark:bg-whiteA-300 opacity-0 peer-hover:opacity-100"
         ></div>
       </div>
-      {tooltip && <ReactTooltip effect={'solid'} className="!py-2 !px-4" />}
+      {tooltip && (
+        <ReactTooltip
+          effect="solid"
+          backgroundColor="var(--colors-scale1)"
+          textColor="var(--colors-scale11)"
+          className="!py-2 !px-4"
+        />
+      )}
     </>
   )
 }