update open source page

apps/www/components/OpenSource/OSSHero.tsx

@@ -21,7 +21,10 @@ const OSSHero = () => (
         styles['hero-container'],
       ].join(' ')}
     >
-      <div className={['w-full h-full opacity-20 dark:opacity-60', styles['gradient']].join(' ')} />
+      <div
+        className="absolute select-none pointer-events-none inset-0 z-[3] blur-[100px] w-full h-full opacity-20 dark:opacity-60 "
+        style={{ transform: 'translateZ(0px)' }}
+      />
       <div className="absolute bottom-0 z-[-2] w-full h-full bg-gradient-to-t from-background to-transparent" />
       <HeroGrid />
     </div>

apps/www/components/OpenSource/Repos.tsx

@@ -22,7 +22,7 @@ const Tab = ({ isActive, label, icon, onClick }: TabProps) => (
     role="tab"
   >
     <div className="flex flex-nowrap text-sm lg:text-base gap-1 lg:gap-2 items-center">
-      {icon ? (
+      {icon && (
         <svg
           width="16"
           height="16"
@@ -39,8 +39,7 @@ const Tab = ({ isActive, label, icon, onClick }: TabProps) => (
             strokeLinejoin="round"
           />
         </svg>
-      ) : // <IconPenTool className={cn(isActive && 'transition-colors text-brand')} />
-      null}
+      )}
       <span className="whitespace-nowrap tracking-tight lg:tracking-normal">{label}</span>
     </div>
   </button>
@@ -53,16 +52,20 @@ export interface RepoTab {
 }
 
 interface Props {
-  title: string | ReactNode
-  paragraph: string
   tabs: RepoTab[]
   repos: any[]
 }
 
+enum SWIPER_STATE {
+  START = 'START',
+  MIDDLE = 'MIDDLE',
+  END = 'END',
+}
+
 const Repos = ({ tabs, repos }: Props) => {
   const [activeTab, setActiveTab] = useState(0)
   const [apiSwiper, setApiSwiper] = useState(undefined)
-  const [swiperState, setSwiperState] = useState<'START' | 'END' | 'MIDDLE'>('START')
+  const [swiperState, setSwiperState] = useState<SWIPER_STATE>(SWIPER_STATE.START)
 
   useEffect(() => {
     if (!apiSwiper) return
@@ -105,20 +108,26 @@ const Repos = ({ tabs, repos }: Props) => {
             grabCursor
             slidesPerView="auto"
             onSlideChange={(slider) =>
-              setSwiperState(slider.isEnd ? 'END' : slider.isBeginning ? 'START' : 'MIDDLE')
+              setSwiperState(
+                slider.isEnd
+                  ? SWIPER_STATE.END
+                  : slider.isBeginning
+                  ? SWIPER_STATE.START
+                  : SWIPER_STATE.MIDDLE
+              )
             }
             className="relative flex md:hidden justify-center max-w-full w-full overflow-hidden items-center rounded-full bg-surface-100 p-2"
           >
             <div
               className={cn(
                 'not-sr-only absolute inset-0 left-auto bg-gradient-to-r from-transparent to-background-surface-100 w-10 z-20 pointer-events-none opacity-0 transition-opacity',
-                swiperState !== 'END' && 'opacity-100'
+                swiperState !== SWIPER_STATE.END && 'opacity-100'
               )}
             />
             <div
               className={cn(
                 'not-sr-only absolute inset-0 right-auto bg-gradient-to-l from-transparent to-background-surface-100 w-10 z-20 pointer-events-none opacity-0 transition-opacity',
-                swiperState !== 'START' && 'opacity-100'
+                swiperState !== SWIPER_STATE.START && 'opacity-100'
               )}
             />
             {tabs.map((tab, index) => (

apps/www/components/OpenSource/hero.module.css

@@ -20,18 +20,6 @@
   will-change: transform;
 }
 
-.gradient {
-  position: absolute;
-  user-select: none;
-  pointer-events: none;
-  inset: 0px;
-  z-index: -3;
-  filter: blur(140px);
-  transform: translateZ(0px);
-  background: radial-gradient(ellipse 50% 60% at 50% 70%, #3ecf8e, transparent),
-    radial-gradient(ellipse 70% 80% at 50% 50%, #1d7a50, transparent);
-}
-
 @media (min-width: 1024px) {
   .hero-grid-lines {
     animation-duration: 30s;

apps/www/components/Sections/ProductHeaderCentered.tsx

@@ -66,7 +66,7 @@ const ProductHeaderCentered = (props: Types) => (
           <h1 className="h1 text-3xl md:text-4xl xl:!text-5xl tracking-[-1.5px]" key={`h1`}>
             {props.h1}
           </h1>
-          <p className="p !text-scale-1000">{props.subheader}</p>
+          <p className="p !text-scale-1100">{props.subheader}</p>
         </div>
         <div className="flex flex-row md:flex-row pt-8 md:items-center">
           {props.cta && (

apps/www/data/open-source/index.tsx

@@ -15,19 +15,6 @@ export default {
     ),
   },
   repo_tabs: [
-    // {
-    //   label: 'Generic',
-    //   icon: '',
-    //   repos: [
-    //     'supabase',
-    //     'supavisor',
-    //     'supabase-cli',
-    //     'supabase-js',
-    //     'supabase-dart',
-    //     'supabase-flutter',
-    //     'supabase-audit',
-    //   ],
-    // },
     {
       label: 'Database',
       icon: products.database.icon[16],
@@ -58,6 +45,7 @@ export default {
         'auth-helpers',
         'auth-elements',
         'auth-ui',
+        'gotrue',
         'mailme',
       ],
     },

apps/www/pages/open-source/index.tsx

@@ -1,9 +1,11 @@
 import { useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
 import { Octokit } from '@octokit/core'
+import { NextSeo } from 'next-seo'
+
 import DefaultLayout from '~/components/Layouts/Default'
 import SectionContainer from '~/components/Layouts/SectionContainer'
-import { NextSeo } from 'next-seo'
+import OSSHero from '~/components/OpenSource/OSSHero'
 import ProductHeaderCentered from '~/components/Sections/ProductHeaderCentered'
 import Repos from '~/components/OpenSource/Repos'
 import Sponsorships from '~/components/OpenSource/Sponsorships'
@@ -12,7 +14,7 @@ import pageData from '~/data/open-source'
 
 // Import Swiper styles if swiper used on page
 import 'swiper/swiper.min.css'
-import OSSHero from '../../components/OpenSource/OSSHero'
+import CTABanner from '../../components/CTABanner'
 
 const OpenSource = () => {
   const octokit = new Octokit()
@@ -26,6 +28,7 @@ const OpenSource = () => {
         per_page: 200,
         page: 1,
       })
+
       setRepos(res.data)
     }
     fetchOctoData()
@@ -37,6 +40,7 @@ const OpenSource = () => {
   const meta_description =
     pageData.metaDescription ||
     'Supabase is an open source company, supporting existing open source tools and communities wherever possible.'
+  const totalStars = repos.reduce((acc: number, val: any) => acc + val.stargazers_count, 0)
 
   return (
     <>
@@ -60,11 +64,15 @@ const OpenSource = () => {
         </SectionContainer>
         <OSSHero />
         <SectionContainer className="!pt-0">
-          <Repos repos={repos} tabs={pageData.repo_tabs} title="Yooo" paragraph="asfd" />
+          <Repos repos={repos} tabs={pageData.repo_tabs} />
         </SectionContainer>
-        <SectionContainer className="">
+        <SectionContainer className="!py-0">
+          <div className="w-full  bg-scale-400 border-b" />
+        </SectionContainer>
+        <SectionContainer>
           <Sponsorships sponsorships={pageData.sponsorships} />
         </SectionContainer>
+        <CTABanner />
       </DefaultLayout>
     </>
   )