Merge pull request #6155 from supabase/chore/update-support-page

Fix: www website ui

www/pages/404.tsx

@@ -55,7 +55,7 @@ const Error404 = () => {
             show404 ? 'opacity-100' : 'opacity-0'
           }`}
         >
-          <div className="w-[320px] flex flex-col items-center justify-center space-y-3">
+          <div className="w-[320px] flex flex-col items-center justify-center space-y-3 text-scale-1200">
             <h1 className="text-2xl m-2">Looking for something? 🔍</h1>
             <p className="text-center text-sm">
               We couldn't find the page that you're looking for!

www/pages/auth/Auth.tsx

@@ -129,7 +129,7 @@ function AuthPage() {
                 </div>
               </p>
               <h4 className="h4">All the social providers</h4>
-              <p className="p text-base">
+              <p className="p text-base text-scale-1100">
                 Enable social logins with the click of a button. Google, Facebook, GitHub, Azure,
                 Gitlab, Twitter, Discord, and many more.
               </p>

www/pages/beta.tsx

@@ -93,9 +93,7 @@ const SectionHeader = (props: any) => {
   const { sectionNumber, header } = props
   return (
     <div className="col-span-12">
-      <span className="block mb-3 font-mono text-3xl text-dark-300 dark:text-dark-400">
-        0{sectionNumber}
-      </span>
+      <span className="block mb-3 font-mono text-3xl text-scale-1200">0{sectionNumber}</span>
       <h3 className="text-6xl text-black dark:text-white">{header}</h3>
     </div>
   )
@@ -135,7 +133,7 @@ const Introduction = () => {
     <div className="container grid grid-cols-12 gap-4 px-8 py-20 mx-auto lg:px-28 text-dark-300">
       <div className="col-span-12 sm:col-span-9 xl:col-span-8">
         <p>
-          <span className="block text-2xl text-black">
+          <span className="block text-2xl text-scale-1200">
             After the launch of our{' '}
             <a
               href="https://news.ycombinator.com/item?id=23319901"
@@ -148,7 +146,7 @@ const Introduction = () => {
           </span>
         </p>
       </div>
-      <div className="col-span-12 mb-20 text-base sm:col-span-9 xl:col-span-6 text-dark-400">
+      <div className="col-span-12 mb-20 text-base sm:col-span-9 xl:col-span-6 text-scale-1200">
         <p>
           we've been fortunate to work with thousands of early adopters on improving both our Open
           Source, and Hosted offerings. Companies like{' '}
@@ -180,7 +178,7 @@ const Introduction = () => {
       </div>
 
       <div className="col-span-12 mb-10 text-base">
-        <p className="pb-2 border-b-2 w-60 border-dark-200 text-dark-400 dark:border-dark-400">
+        <p className="pb-2 border-b-2 w-60 border-dark-200 text-scale-1100 dark:border-dark-400">
           Alpha Program in Numbers
         </p>
       </div>
@@ -200,15 +198,15 @@ const Introduction = () => {
               </div>
             </div>
             <div className="col-span-7 sm-col-span-8 md:col-span-9 xl:col-span-10 text-dark-400">
-              <p className="text-5xl lg:text-6xl">
+              <p className="text-5xl lg:text-6xl text-scale-1200">
                 <CountUp triggerAnimOnScroll={true} referenceElId="alphaNumbers">
                   {stat.value}
                 </CountUp>
-                {stat.unit && <span className="ml-1 text-2xl">{stat.unit}</span>}
+                {stat.unit && <span className="ml-1 text-2xl text-scale-1200">{stat.unit}</span>}
               </p>
             </div>
             <div className="col-span-12 sm:col-span-9 md:col-span-10 col-start-0 sm:col-start-5 md:col-start-4 xl:col-start-3">
-              <p className="text-xs lg:text-base text-dark-300 dark:text-dark-400">{stat.name}</p>
+              <p className="text-xs lg:text-base text-scale-1000">{stat.name}</p>
             </div>
           </div>
         ))}
@@ -231,7 +229,7 @@ const TableOfContents = (props: any) => {
         <div className="grid grid-cols-12 col-span-12 gap-y-10">
           {IntroductionSegments.map((segment: any, segmentIdx: number) => (
             <div key={`introSegment_${segmentIdx}`} className="grid grid-cols-12 col-span-12">
-              <div className="col-span-12 mb-10 sm:col-span-5 xl:col-span-4 sm:mb-0">
+              <div className="col-span-12 mb-10 sm:col-span-5 xl:col-span-4 sm:mb-0 text-scale-1200">
                 <p>{segment.description}</p>
               </div>
               <div className="hidden sm:block sm:col-span-1 xl:col-span-2" />
@@ -242,8 +240,8 @@ const TableOfContents = (props: any) => {
                     className="flex items-center mb-5 cursor-pointer"
                     onClick={() => scrollTo(chapter.key)}
                   >
-                    <p className="font-mono text-xs text-dark-300 dark:text-dark-400">{`0${chapter.no}`}</p>
-                    <p className="ml-4 text-base transition border-b border-gray-400 hover:text-black dark:hover:text-white">
+                    <p className="font-mono text-xs text-scale-1200">{`0${chapter.no}`}</p>
+                    <p className="ml-4 text-base transition border-b border-gray-400 text-black dark:text-white hover:text-gray-1000 dark:hover:text-gray-1000">
                       {chapter.name}
                     </p>
                   </div>
@@ -337,11 +335,11 @@ const Performance = () => {
   }
 
   return (
-    <div id="performance" className="bg-white dark:bg-dark-800">
+    <div id="performance" className="bg-white dark:bg-scale-200">
       <div className="container grid grid-cols-12 px-8 py-20 mx-auto lg:px-28 gap-y-10 text-dark-400 dark:text-dark-300">
         <SectionHeader sectionNumber={1} header="Performance" />
 
-        <div className="grid items-center grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8">
+        <div className="grid items-center grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8 text-scale-1200">
           <div className="col-span-12 text-base sm:col-span-9 xl:col-span-7">
             <p className="mb-10">
               We started Supabase to give developers a web-ready database that is delightful to use,
@@ -424,7 +422,7 @@ const Security = () => {
       <div className="container grid grid-cols-12 px-8 py-20 mx-auto lg:px-28 gap-y-10 text-dark-400 dark:text-dark-200">
         <SectionHeader sectionNumber={2} header="Security" />
 
-        <div className="grid grid-cols-12 col-span-12 gap-x-2 lg:gap-x-8">
+        <div className="grid grid-cols-12 col-span-12 gap-x-2 lg:gap-x-8 text-scale-1200">
           <div className="col-span-12 text-base sm:col-span-9 xl:col-span-7">
             <p className="mb-10">
               As an infrastructure provider, security has been a priority from day one. While we had
@@ -485,11 +483,11 @@ const Security = () => {
 const Reliability = () => {
   const { basePath } = useRouter()
   return (
-    <div id="reliability" className="bg-white dark:bg-dark-800">
+    <div id="reliability" className="bg-white dark:bg-scale-200">
       <div className="container grid grid-cols-12 px-8 py-12 mx-auto lg:px-28 gap-y-10 text-dark-400 dark:text-dark-300 ">
         <SectionHeader sectionNumber={3} header="Reliability" />
 
-        <div className="grid grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8">
+        <div className="grid grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8 text-scale-1200">
           <div className="col-span-12 text-base sm:col-span-9 xl:col-span-7">
             <p className="mb-5">
               During Alpha we experienced 2 availability incidents, neither affecting customer
@@ -542,7 +540,7 @@ const NewFeaturesAndIntegrations = () => {
       <div className="container grid grid-cols-12 px-8 py-20 mx-auto lg:px-28 gap-y-10 text-dark-400 dark:text-dark-200">
         <SectionHeader sectionNumber={4} header="New Features & Integrations" />
 
-        <div className="grid grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8">
+        <div className="grid grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8 text-scale-1200">
           <div className="col-span-12 text-base sm:col-span-9 xl:col-span-7">
             <p className="mb-5">
               If you're new to Supabase, here's a few of the things you get when you choose us as
@@ -662,11 +660,11 @@ const NewFeaturesAndIntegrations = () => {
 }
 
 const BetaPricing = () => (
-  <div id="betaPricing" className="bg-white dark:bg-dark-800">
+  <div id="betaPricing" className="bg-white dark:bg-scale-200">
     <div className="container grid grid-cols-12 px-8 py-20 mx-auto lg:px-28 gap-y-10 text-dark-400 dark:text-dark-300">
       <SectionHeader sectionNumber={5} header="Beta Pricing" />
 
-      <div className="grid grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8">
+      <div className="grid grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8 text-scale-1200">
         <div className="col-span-12 text-base sm:col-span-9 xl:col-span-7">
           <p className="mb-10">For up to date pricing info see: https://supabase.com/pricing</p>
           <p className="mb-10">
@@ -734,7 +732,7 @@ const OpenSource = () => (
     <div className="container grid grid-cols-12 px-8 py-20 mx-auto lg:px-28 gap-y-10 text-dark-400 dark:text-dark-200">
       <SectionHeader sectionNumber={6} header="Open Source" />
 
-      <div className="grid grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8">
+      <div className="grid grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8 text-scale-1200">
         <div className="col-span-12 text-base sm:col-span-9 xl:col-span-7">
           <p className="mb-10">
             Great software is multi generational and stretches beyond any single company.
@@ -797,10 +795,10 @@ const OpenSource = () => (
 )
 
 const FundingPartners = () => (
-  <div id="fundingPartners" className="bg-white dark:bg-dark-800">
+  <div id="fundingPartners" className="bg-white dark:bg-scale-200">
     <div className="container grid grid-cols-12 px-8 py-20 mx-auto lg:px-28 gap-y-10 text-dark-400 dark:text-dark-300">
       <SectionHeader sectionNumber={7} header="Funding Partners" />
-      <div className="grid grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8">
+      <div className="grid grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8 text-scale-1200">
         <div className="col-span-12 text-base sm:col-span-9 xl:col-span-7">
           <p className="mb-10">
             Building a platform that can offer all the amazing features of Firebase will take
@@ -838,7 +836,7 @@ const ScalingOurTeam = () => (
     <div className="container grid grid-cols-12 px-8 py-20 mx-auto lg:px-28 gap-y-10 text-dark-400 dark:text-dark-200">
       <SectionHeader sectionNumber={8} header="Scaling Our Team" />
 
-      <div className="grid grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8">
+      <div className="grid grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8 text-scale-1200">
         <div className="col-span-12 text-base sm:col-span-9 xl:col-span-7">
           <p className="mb-10">
             We are extremely proud of our team. We're a mix of 11 engineers, from 8 different
@@ -873,12 +871,12 @@ const ScalingOurTeam = () => (
 const WhatsNext = () => (
   <div
     id="whatsNext"
-    className="bg-white border-b-2 border-gray-50 dark:bg-dark-800 dark:border-dark-800"
+    className="bg-white border-b-px border-gray-50 dark:bg-scale-200 dark:border-scale-600"
   >
     <div className="container grid grid-cols-12 px-8 py-20 mx-auto lg:px-28 gap-y-10 text-dark-400 dark:text-dark-300">
       <SectionHeader sectionNumber={9} header="What's Next" />
 
-      <div className="grid grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8">
+      <div className="grid grid-cols-12 col-span-12 mb-10 gap-x-2 lg:gap-x-8 text-scale-1200">
         <div className="col-span-12 text-base sm:col-span-9 xl:col-span-7">
           <p className="mb-5">
             If you watch our repos you'll see that development never stops, we ship every day (and

www/pages/brand-assets.tsx

@@ -55,9 +55,9 @@ const Index = () => {
               </div>
               <div className="col-span-12 lg:col-span-7 flex items-center">
                 <div className="p-16">
-                  <div>
-                    <h1 className="text-4xl">Supabase logos</h1>
-                    <p className="text-sm">
+                  <div className="space-y-2">
+                    <h1 className="text-4xl text-scale-1200">Supabase logos</h1>
+                    <p className="text-sm text-scale-1100">
                       <p>
                         Download Supabase official logos, including as SVG's, in both light and dark
                         theme.

www/pages/company.tsx

@@ -75,7 +75,7 @@ const Header = () => {
           mx-auto px-6 lg:px-16 xl:px-20 relative py-16 sm:py-18 md:py-24 lg:py-24
           text-center"
       >
-        <h1 className="text-5xl">
+        <h1 className="text-5xl text-scale-1200">
           Join one of the world's fastest growing open source communities.
         </h1>
       </div>
@@ -104,7 +104,7 @@ const Team = () => {
         <div className="grid grid-cols-2 md:grid-cols-12">
           <div className="col-span-8 ">
             <p>
-              <p className="text-lg">
+              <p className="text-lg text-scale-1200">
                 Supabase is fully remote, with a strong affinity for open source maintainers and
                 ex-Founders. Our engineering team is made up of developers from AWS, Google,
                 Palantir, Stripe, and other YC companies.
@@ -217,15 +217,17 @@ const Community = () => {
                 />
               </div>
               <div>
-                <h1 className="mb-0 text-4xl">{x.stat}</h1>
-                <p className="text-sm">{x.statLabel}</p>
+                <h1 className="mb-0 text-4xl text-scale-1200">{x.stat}</h1>
+                <p className="text-sm text-scale-1100">{x.statLabel}</p>
               </div>
             </div>
           ))}
         </div>
         <div className="space-y-8">
           <div className="max-w-3xl">
-            <p className="text-sm">With developer signups from the world's leading brands.</p>
+            <p className="text-sm text-scale-1100">
+              With developer signups from the world's leading brands.
+            </p>
           </div>
 
           <ImageGrid images={CompaniesData} />
@@ -282,7 +284,7 @@ const Investors = () => {
           </div>
         ))}
       </div>
-      <h2>Individual investors</h2>
+      <h2 className="text-2xl text-scale-1200">Individual investors</h2>
       <div className="mt-5 mx-auto grid gap-5 grid-cols-2 lg:grid-cols-4 lg:max-w-none">
         {InvestorData.filter((x) => x.lead === false)
           .sort((a, b) => a.name.localeCompare(b.name))
@@ -292,8 +294,8 @@ const Investors = () => {
 
               <div className="flex flex-col justify-center space-y-2">
                 <div>
-                  <h1 className="mb-0 text-base">{x.name}</h1>
-                  <p className="mb-0 text-xs">{x.title}</p>
+                  <h1 className="mb-0 text-base text-scale-1200">{x.name}</h1>
+                  <p className="mb-0 text-xs text-scale-1000">{x.title}</p>
                 </div>
               </div>
             </div>
@@ -315,8 +317,8 @@ const Press = () => {
             <Card key={`press_${x.href}`} hoverable className="bg-white dark:bg-scale-400">
               <Space className="justify-between h-40" direction="vertical">
                 <div>
-                  <p>{x.type.toUpperCase()}</p>
-                  <h3>{x.title}</h3>
+                  <h1 className="text-xl text-scale-1200">{x.type.toUpperCase()}</h1>
+                  <p className="text-base text-scale-1100">{x.title}</p>
                 </div>
               </Space>
             </Card>
@@ -329,8 +331,8 @@ const Press = () => {
             <Card key={`press_${x.href}`} hoverable className="bg-white dark:bg-scale-400">
               <Space className="justify-between h-40" direction="vertical">
                 <div>
-                  <p>{x.type.toUpperCase()}</p>
-                  <h3>{x.title}</h3>
+                  <h1 className="text-xl text-scale-1200">{x.type.toUpperCase()}</h1>
+                  <p className="text-base text-scale-1100">{x.title}</p>
                 </div>
               </Space>
             </Card>

www/pages/database/Database.tsx

@@ -236,7 +236,7 @@ function Database() {
               <div className="grid grid-cols-12" key={0}>
                 <div className="mt-0 col-span-12 lg:col-span-6 xl:col-span-12 xl:mb-8 flex">
                   <p>
-                    <p className="m-0">Libraries coming soon:</p>
+                    <p className="m-0 text-scale-1100">Libraries coming soon:</p>
                   </p>
                   <div className="space-x-1 ml-1">
                     <Badge dot={false}>Python</Badge>

www/pages/pricing/index.tsx

@@ -329,7 +329,6 @@ export default function IndexPage() {
                 priceDescription={'/project/month + usage costs'}
                 description={'Everything you need to scale your project into production'}
               />
-
               <PricingTableRowMobile
                 category={pricing.database}
                 tier={'pro'}

www/pages/support.tsx

@@ -1,30 +1,8 @@
 import Container from 'components/Container'
 import Layout from '~/components/Layouts/Default'
-import Hero from 'components/Hero'
 import Link from 'next/link'
-import {
-  Button,
-  Badge,
-  IconArrowUpRight,
-  IconMessageCircle,
-  IconShuffle,
-  IconX,
-  Space,
-  Tabs,
-  IconGitHub,
-  Divider,
-  IconMail,
-} from '@supabase/ui'
-import Examples from 'data/Examples.json'
-import ExampleCard from 'components/ExampleCard'
-import Features from 'components/Features/index'
-import BuiltExamples from 'components/BuiltWithSupabase/index'
-import MadeForDevelopers from 'components/MadeForDevelopers/index'
-import AdminAccess from 'components/AdminAccess/index'
-import CaseStudies from 'components/CaseStudies/index'
-import CTABanner from 'components/CTABanner/index'
+import { Button, IconMessageCircle, IconGitHub, Divider, IconMail } from '@supabase/ui'
 import SectionContainer from '~/components/Layouts/SectionContainer'
-import TwitterSocialProof from '~/components/Sections/TwitterSocialProof'
 
 // Import Swiper styles if swiper used on page
 import 'swiper/swiper.min.css'
@@ -60,15 +38,15 @@ const Index = ({}: Props) => {
         <Container>
           <SectionContainer className="">
             <div className="text-center">
-              <h2>Get Support</h2>
+              <h1 className="text-4xl text-scale-1200">Get Support</h1>
               <p>
-                <p className="lg:text-lg">
+                <p className="lg:text-lg text-scale-1100">
                   Need a bit of help? We're here for you. Check out our current issues, GitHub
                   discussions, or get email support.
                 </p>
               </p>
             </div>
-            <div className="grid sm:grid-cols-3 md:grid-cols-12 gap-5 mt-16">
+            <div className="grid sm:grid-cols-3 md:grid-cols-12 gap-5 mt-16 text-scale-1200">
               <div className="col-span-12 lg:col-span-6 xl:col-span-4">
                 <div
                   className="h-40 bg-white dark:bg-scale-400