chore: update more sections on homepage. replace some images

www/components/AdminAccess/index.tsx

@@ -3,6 +3,12 @@ import Tabs from 'components/AdminAccess/tabs'
 import SectionHeader from 'components/UI/SectionHeader'
 import { useRouter } from 'next/router'
 import SectionContainer from '../Layouts/SectionContainer'
+import ImageCarousel from '../Carousels/ImageCarousel'
+
+import TableViewCarouselData from 'data/products/database/table-view-carousel.json'
+import { Typography } from '@supabase/ui'
+
+import AdminAccessData from 'data/home/admin-access.json'
 
 const AdminAccess = () => {
   const { basePath } = useRouter()
@@ -10,56 +16,12 @@ const AdminAccess = () => {
 
   return (
     <SectionContainer>
-      <div className="relative items-center">
-        <div className="relative">
-          <SectionHeader
-            title={'Build your app'}
-            title_alt={' without leaving the dashboard'}
-            subtitle={'Admin Access'}
-          />
-          <div className="flex flex-col-reverse lg:flex-row lg:grid lg:grid-cols-2 gap-32">
-            <Tabs tabId={tabId} setTabId={setTabId} />
-            <div className="shadow-lg rounded-md" style={{ height: 'fit-content' }}>
-              <div className="w-full rounded-t-md h-5 bg-dark-400 flex items-center justify-start px-2">
-                <div className="h-2 w-2 mr-2 rounded-full bg-dark-500" />
-                <div className="h-2 w-2 mr-2 rounded-full bg-dark-500" />
-                <div className="h-2 w-2 mr-2 rounded-full bg-dark-500" />
-              </div>
-              {/* Joshen: Preload all videos to prevent the flickering of video when changing tabs */}
-              <video
-                className={`rounded-b-md ${tabId === 'tabTableEditor' ? 'block' : 'hidden'}`}
-                src={`${basePath}/videos/tabTableEditor.mp4`}
-                autoPlay
-                loop
-                muted
-                playsInline
-              >
-                Your browser does not support the video tag
-              </video>
-              <video
-                className={`rounded-b-md ${tabId === 'tabSqlEditor' ? 'block' : 'hidden'}`}
-                src={`${basePath}/videos/tabSqlEditor.mp4`}
-                autoPlay
-                loop
-                muted
-                playsInline
-              >
-                Your browser does not support the video tag
-              </video>
-              <video
-                className={`rounded-b-md ${tabId === 'tabAuthRules' ? 'block' : 'hidden'}`}
-                src={`${basePath}/videos/tabAuthRules.mp4`}
-                autoPlay
-                loop
-                muted
-                playsInline
-              >
-                Your browser does not support the video tag
-              </video>
-            </div>
-          </div>
-        </div>
+      <div>
+        <Typography.Title level={2} className="mb-16">
+          Build your app without leaving the dashboard
+        </Typography.Title>
       </div>
+      <ImageCarousel content={AdminAccessData} altTabView={true} />
     </SectionContainer>
   )
 }

www/components/Carousels/ImageCarousel.tsx

@@ -27,6 +27,7 @@ interface Content {
 interface ImageCaoursel {
   content: Content
   footer?: React.ReactNode
+  altTabView?: boolean
 }
 
 function ImageCarousel(props: ImageCaoursel) {
@@ -70,22 +71,27 @@ function ImageCarousel(props: ImageCaoursel) {
     <div className="grid grid-cols-12">
       <div className="col-span-12 lg:col-span-6 w-full">
         <div className="col-span-12 lg:col-span-7 sbui-tabs--alt">
-          <Tabs
-            scrollable
-            type="pills"
-            // @ts-ignore
-            activeId={imageSwiperActiveIndex.toString()}
-            // @ts-ignore
-            onChange={(id: string) => handleImageSwiperNav(Number(id))}
-          >
-            {props.content.map((content, i) => {
-              return (
-                <Tabs.Panel label={content.label ? content.label : content.title} id={i.toString()}>
-                  <span></span>
-                </Tabs.Panel>
-              )
-            })}
-          </Tabs>
+          <div className={props.altTabView ? 'hidden' : 'block'}>
+            <Tabs
+              scrollable
+              type="underlined"
+              // @ts-ignore
+              activeId={imageSwiperActiveIndex.toString()}
+              // @ts-ignore
+              onChange={(id: string) => handleImageSwiperNav(Number(id))}
+            >
+              {props.content.map((content, i) => {
+                return (
+                  <Tabs.Panel
+                    label={content.label ? content.label : content.title}
+                    id={i.toString()}
+                  >
+                    <span></span>
+                  </Tabs.Panel>
+                )
+              })}
+            </Tabs>
+          </div>
           <div
             className={`border border-gray-100 dark:border-gray-600 rounded-md bg-gray-800 overflow-hidden ${ImageCarouselStyles['gradient-bg']}`}
           >
@@ -103,7 +109,18 @@ function ImageCarousel(props: ImageCaoursel) {
               {props.content.map((content, i) => {
                 return (
                   <SwiperSlide key={i}>
-                    <img src={`${basePath}${content.img_url}`} />
+                    {content.img_url && <img src={`${basePath}${content.img_url}`} />}
+                    {content.video_url && (
+                      <video
+                        src={`${basePath}/${content.video_url}`}
+                        autoPlay
+                        loop
+                        muted
+                        playsInline
+                      >
+                        Your browser does not support the video tag
+                      </video>
+                    )}
                   </SwiperSlide>
                 )
               })}
@@ -112,15 +129,30 @@ function ImageCarousel(props: ImageCaoursel) {
         </div>
       </div>
       <div className="mt-8 lg:mt-0 col-span-12 lg:col-span-5 lg:col-start-8 xl:col-span-4 xl:col-start-9">
+        <div className={`sbui-tabs--underline-alt ${props.altTabView ? 'block' : 'hidden'} mb-3`}>
+          <Tabs
+            scrollable
+            type="underlined"
+            size="small"
+            // @ts-ignore
+            activeId={imageSwiperActiveIndex.toString()}
+            // @ts-ignore
+            onChange={(id: string) => handleImageSwiperNav(Number(id))}
+            block
+          >
+            {props.content.map((content, i) => {
+              return (
+                <Tabs.Panel label={content.label ? content.label : content.title} id={i.toString()}>
+                  <span></span>
+                </Tabs.Panel>
+              )
+            })}
+          </Tabs>
+        </div>
         <Swiper
           // @ts-ignore
           onSwiper={setSwiperDetails}
-          // style={{ zIndex: 0 }}
           initialSlide={0}
-          // spaceBetween={0}
-          // slidesPerView={1}
-          // direction="horizontal"
-          // style={{ overflow: 'hidden' }}
           speed={400}
           allowTouchMove={false}
           autoHeight={true}

www/data/home/admin-access.json

@@ -0,0 +1,26 @@
+[
+  {
+    "label": "Table editor",
+    "title": "Manage your data with the familiarity of a spreadsheet",
+    "text": "You don’t have to be a database expert to use Supabase. Our table editor makes Postgres easy to use, even for non-techies. You can do everything right in our dashboard.",
+    "video_url": "videos/tabTableEditor.mp4",
+    "cta": "Explore Table View",
+    "url": "/docs/guides/platform"
+  },
+  {
+    "label": "SQL Editor",
+    "title": "In-built SQL editor for when you need greater control",
+    "text": "Write, save, and execute SQL queries directly on our dashboard, with templates to save you time. Run common queries and even build applications using our growing list of templates.",
+    "video_url": "videos/tabSqlEditor.mp4",
+    "cta": "Explore SQL Editor",
+    "url": "/docs/guides/platform"
+  },
+  {
+    "label": "Auth rules",
+    "title": "User management as straight-forward as it can be",
+    "text": "Easily manage your users with Supabase Auth, with email logins, magic links, and third-party logins. Create complex access policies with SQL rules to fit your unique business needs.",
+    "video_url": "videos/tabAuthRules.mp4",
+    "cta": "Explore Auth Policies",
+    "url": "/docs/guides/auth"
+  }
+]

www/pages/database/Database.tsx

@@ -11,6 +11,7 @@ import {
   IconArrowUpRight,
   IconLock,
   IconShield,
+  IconX,
   Space,
   Tabs,
   Typography,
@@ -38,6 +39,7 @@ import TweetCard from '~/components/TweetCard'
 import FeatureColumn from '~/components/FeatureColumn'
 
 import Solutions from 'data/Solutions.json'
+import ProductIcon from '~/components/ProductIcon'
 
 // install Swiper's Controller component
 // SwiperCore.use([Controller])
@@ -87,65 +89,50 @@ function Database() {
           <div className="col-span-3">
             <p className="mb-4">
               <Space>
-                <img src={`${basePath}/images/product/auth/google-icon.svg`} width={21} />
-                <img src={`${basePath}/images/product/auth/facebook-icon.svg`} width={21} />
-                <div>
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 32.58 31.77"
-                    width={21}
-                    className="text-gray-800 dark:text-white"
-                  >
-                    <path
-                      fill="currentColor"
-                      d="M16.29,0a16.29,16.29,0,0,0-5.15,31.75c.82.15,1.11-.36,1.11-.79s0-1.41,0-2.77C7.7,29.18,6.74,26,6.74,26a4.36,4.36,0,0,0-1.81-2.39c-1.47-1,.12-1,.12-1a3.43,3.43,0,0,1,2.49,1.68,3.48,3.48,0,0,0,4.74,1.36,3.46,3.46,0,0,1,1-2.18c-3.62-.41-7.42-1.81-7.42-8a6.3,6.3,0,0,1,1.67-4.37,5.94,5.94,0,0,1,.16-4.31s1.37-.44,4.48,1.67a15.41,15.41,0,0,1,8.16,0c3.11-2.11,4.47-1.67,4.47-1.67A5.91,5.91,0,0,1,25,11.07a6.3,6.3,0,0,1,1.67,4.37c0,6.26-3.81,7.63-7.44,8a3.85,3.85,0,0,1,1.11,3c0,2.18,0,3.94,0,4.47s.29.94,1.12.78A16.29,16.29,0,0,0,16.29,0Z"
-                    />
-                  </svg>
-                </div>
-                <img src={`${basePath}/images/product/auth/gitlab-icon.svg`} width={21} />
-                <img src={`${basePath}/images/product/auth/bitbucket-icon.svg`} width={21} />
+                <ProductIcon icon={Solutions['database'].icon} />
+                <IconX />
+                <img src={`${basePath}/images/product/database/postgresql-icon.svg`} width={30} />
               </Space>
             </p>
-            <Typography.Title level={4}>All the social providers</Typography.Title>
+            <Typography.Title level={4}>PostgreSQL Relational</Typography.Title>
             <Typography.Text>
               <p className="text-lg">
-                We provide all the popular social logins you expect. Google, Facebook, Github,
-                Azure, Gitlab and Bitbucket.
+                Our database is PostgreSQL, which is an open source object-relational database.
+              </p>
+              <p>
+                With Supabase’s APIs and easy to use dashboard, it makes designing relational
+                databases easy.
               </p>
-              <Space>
-                <img src={`${basePath}/images/product/auth/twitter-icon.svg`} width={21} />
-                <p className="m-0">
-                  <span className="text-gray-800 dark:text-white">Twitter</span> coming soon
-                </p>
-              </Space>
             </Typography.Text>
           </div>
           <div className="col-span-3 col-start-5">
             <p className="mb-4">
-              <IconLock />
+              <Space>
+                <ProductIcon icon={Solutions['database'].icon} />
+                <IconX />
+                <ProductIcon icon={Solutions['authentication'].icon} />
+              </Space>
             </p>
-            <Typography.Title level={4}>Fully integrated</Typography.Title>
+            <Typography.Title level={4}>Auth</Typography.Title>
             <Typography.Text>
               <p className="text-lg">
-                Auth built into your project, no external services (liek auth0)ZERO setup.
-              </p>
-              <p>
-                Send authentication emails from your own custom domain.Set up once and all email
-                templates will come from your desired email address.
+                With 30 years in the making, it is the worlds most trusted and advanced relational
+                database.
               </p>
+              <p>Our PostgreSQL databases have a reputation for realiability and robustness.</p>
             </Typography.Text>
           </div>
           <div className="col-span-3 col-start-9">
             <p className="mb-4">
               <IconShield />
             </p>
-            <Typography.Title level={4}>Own your data</Typography.Title>
+            <Typography.Title level={4}>Realtime</Typography.Title>
             <Typography.Text>
-              <p className="text-lg">
-                Use media in your project without needing to reply on external services or learn new
-                frameworks.
+              <p className="text-lg">We built realtime functionality right into the database.</p>
+              <p>
+                Our powerful APIs allow you to watch for specific row and column changes so you can
+                easily make smart apps quicker.
               </p>
-              <p>Supabase is GDPR / CPA Compliant</p>
             </Typography.Text>
           </div>
         </div>

www/public/images/product/database/postgresql-icon.svg

@@ -0,0 +1 @@
+<svg height="64" viewBox="0 0 25.6 25.6" width="64" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#fff"><path d="m18.983 18.636c.163-1.357.114-1.555 1.124-1.336l.257.023c.777.035 1.793-.125 2.4-.402 1.285-.596 2.047-1.592.78-1.33-2.89.596-3.1-.383-3.1-.383 3.053-4.53 4.33-10.28 3.227-11.687-3.004-3.84-8.205-2.024-8.292-1.976l-.028.005c-.57-.12-1.2-.19-1.93-.2-1.308-.02-2.3.343-3.054.914 0 0-9.277-3.822-8.846 4.807.092 1.836 2.63 13.9 5.66 10.25 1.109-1.334 2.179-2.461 2.179-2.461.53.353 1.167.533 1.834.468l.052-.044a2.01 2.01 0 0 0 .021.518c-.78.872-.55 1.025-2.11 1.346-1.578.325-.65.904-.046 1.056.734.184 2.432.444 3.58-1.162l-.046.183c.306.245.285 1.76.33 2.842s.116 2.093.337 2.688.48 2.13 2.53 1.7c1.713-.367 3.023-.896 3.143-5.81" fill="#000" stroke="#000" stroke-width="2.149"/><path d="m23.535 15.6c-2.89.596-3.1-.383-3.1-.383 3.053-4.53 4.33-10.28 3.228-11.687-3.004-3.84-8.205-2.023-8.292-1.976l-.028.005a10.31 10.31 0 0 0 -1.929-.201c-1.308-.02-2.3.343-3.054.914 0 0-9.278-3.822-8.846 4.807.092 1.836 2.63 13.9 5.66 10.25 1.116-1.342 2.186-2.469 2.186-2.469.53.353 1.167.533 1.834.468l.052-.044a2.02 2.02 0 0 0 .021.518c-.78.872-.55 1.025-2.11 1.346-1.578.325-.65.904-.046 1.056.734.184 2.432.444 3.58-1.162l-.046.183c.306.245.52 1.593.484 2.815s-.06 2.06.18 2.716.48 2.13 2.53 1.7c1.713-.367 2.6-1.32 2.725-2.906.088-1.128.286-.962.3-1.97l.16-.478c.183-1.53.03-2.023 1.085-1.793l.257.023c.777.035 1.794-.125 2.39-.402 1.285-.596 2.047-1.592.78-1.33z" fill="#336791" stroke="none"/><g stroke-width=".716"><g stroke-linecap="round"><path d="m12.814 16.467c-.08 2.846.02 5.712.298 6.4s.875 2.05 2.926 1.612c1.713-.367 2.337-1.078 2.607-2.647l.633-5.017m-8.922-14.615s-9.284-3.796-8.852 4.833c.092 1.836 2.63 13.9 5.66 10.25 1.106-1.333 2.106-2.376 2.106-2.376m6.1-13.4c-.32.1 5.164-2.005 8.282 1.978 1.1 1.407-.175 7.157-3.228 11.687" stroke-linejoin="round"/><path d="m20.425 15.17s.2.98 3.1.382c1.267-.262.504.734-.78 1.33-1.054.49-3.418.615-3.457-.06-.1-1.745 1.244-1.215 1.147-1.652-.088-.394-.69-.78-1.086-1.744-.347-.84-4.76-7.29 1.224-6.333.22-.045-1.56-5.7-7.16-5.782s-5.423 6.885-5.423 6.885" stroke-linejoin="bevel"/></g><g stroke-linejoin="round"><path d="m11.247 15.768c-.78.872-.55 1.025-2.11 1.346-1.578.325-.65.904-.046 1.056.734.184 2.432.444 3.58-1.163.35-.49-.002-1.27-.482-1.468-.232-.096-.542-.216-.94.23z"/><path d="m11.196 15.753c-.08-.513.168-1.122.433-1.836.398-1.07 1.316-2.14.582-5.537-.547-2.53-4.22-.527-4.22-.184s.166 1.74-.06 3.365c-.297 2.122 1.35 3.916 3.246 3.733" stroke-linecap="round"/></g></g><g fill="#fff"><path d="m10.322 8.145c-.017.117.215.43.516.472s.558-.202.575-.32-.215-.246-.516-.288-.56.02-.575.136z" stroke-width=".239"/><path d="m19.486 7.906c.016.117-.215.43-.516.472s-.56-.202-.575-.32.215-.246.516-.288.56.02.575.136z" stroke-width=".119"/></g><path d="m20.562 7.095c.05.92-.198 1.545-.23 2.524-.046 1.422.678 3.05-.413 4.68" stroke-linecap="round" stroke-linejoin="round" stroke-width=".716"/></g></svg>