Feat: event webinar 2 (#29788)

* webnar 2 event

* n2

* webinar content update

* webinar content update

* webinar trim meta_title

* update webinar 2

* fix themed image

* hero banner

apps/www/_events/2024-08-21-scale-to-millions-generative-ai-humata.mdx

@@ -1,6 +1,6 @@
 ---
-title: 'Scale to Millions: Generative AI/Humata'
-meta_title: 'Scale to Millions: Generative AI/Humata'
+title: 'Scale to Millions: Generative AI / Humata'
+meta_title: 'Scale to Millions: Generative AI / Humata'
 subtitle: 'Quickly and cost effectively build Generative AI applications that you can use to chat with your company’s documents.'
 meta_description: 'Quickly and cost effectively build Generative AI applications that you can use to chat with your company’s documents.'
 type: 'webinar'

apps/www/_events/2024-10-23-scale-to-millions-goodtape-auth.mdx

@@ -0,0 +1,41 @@
+---
+title: 'Scale to Millions: Migrating to Supabase Auth for Affordable, Scalable Authentication / Good Tape'
+meta_title: 'Scale to Millions: Migrating to Supabase Auth / Good Tape'
+subtitle: 'Learn how to reduce costs while maintaining top-tier security with Supabase'
+meta_description: 'Learn how to reduce costs while maintaining top-tier security with Supabase'
+type: 'webinar'
+onDemand: true
+date: '2024-10-23T10:00:00.000-07:00'
+timezone: 'America/Los_Angeles'
+duration: '45 mins'
+company:
+  {
+    name: 'Good Tape',
+    website_url: 'https://goodtape.io/',
+    logo: '/images/customers/logos/light/good-tape.png',
+    logo_light: '/images/customers/logos/good-tape.png',
+  }
+categories:
+  - webinar
+main_cta:
+  {
+    url: 'https://zoom.us/webinar/register/WN_26XTfO35SAC81jjS1ulWJw?amp_device_id=1bd3c92f-c97a-45ad-8aab-a508f950b536',
+    target: '_blank',
+    label: 'Register',
+  }
+speakers: 'stojan,kevinbrolly,craig_cannon,jstoone'
+---
+
+## Cutting Costs and Scaling with Confidence
+
+Managed Auth providers like Auth0 or Firebase Auth can simplify the implementation and management of authentication, but costs can explode once an application’s usage scales up. Join us as we learn about Supabase Auth and Row Level Security from Supabase Auth engineer, Stojan Dimitrovski, about how Supabase can deliver an easy to use, hosted, portable, and affordable Auth solution for your application’s authentication and security.
+
+Jakob Steinn, Co-founder & Tech Lead at [Good Tape](https://goodtape.io), will discuss how his company evolved from a corporate innovation concept to providing fast, secure, and accurate audio and video transcription for millions of journalists worldwide. Joined by Kevin Brolly, Head of Customer Success at Supabase, they’ll share insights into the challenges of rapid scaling and how their teams worked together to execute a seamless migration from Auth0.
+
+### Key Takeaways:
+
+- Learn how Supabase Auth, combined with Row Level Security, delivers an easy to implement, portable, and affordable solution for application authentication and security.
+- Hear a testimonial from Good Tape on the factors which led them to migrate as well as the cost and operational benefits after making the switch to Supabase Auth.
+- Find out how Supabase’s Customer Success team can facilitate a smooth migration from your existing Auth providers like Auth0 and Firebase Auth.
+
+Join us live to participate in the Q&A afterwards. Can’t make it to the event? Don’t worry, we'll send you a link to the recording.

apps/www/components/Announcement/WebinarAnnouncement.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import AnnouncementBadge from './Badge'
-
-const WebinarAnnouncement = () => {
-  return (
-    <div className="z-40 w-full flex flex-col gap-4 items-center justify-center -mt-4 md:-mt-8 mb-8 lg:mb-8">
-      <AnnouncementBadge
-        url="/events/scale-to-millions-generative-ai-humata"
-        badge={
-          <>
-            Webinar <span className="hidden sm:inline ml-1">/ Aug 21</span>
-          </>
-        }
-        announcement={
-          <>
-            Scale to Millions: Generative AI
-            <span className="hidden sm:inline">/Humata</span>
-          </>
-        }
-      />
-    </div>
-  )
-}
-
-export default WebinarAnnouncement

apps/www/components/EventCallout.tsx

@@ -9,7 +9,7 @@ interface Props {
   size?: 'tiny' | 'small' | 'large'
 }
 
-const EVENT_LINK = '/events/scale-to-millions-generative-ai-humata'
+const EVENT_LINK = '/events/scale-to-millions-goodtape-auth'
 
 const EventCallout = ({ className, size = 'tiny', ...props }: PropsWithChildren<Props>) => {
   switch (size) {
@@ -18,14 +18,15 @@ const EventCallout = ({ className, size = 'tiny', ...props }: PropsWithChildren<
         <Link
           href={EVENT_LINK}
           className={cn(
-            'group flex items-center flex-wrap text-sm text-foreground-light hover:text-foreground transition-opacity',
+            'group flex items-center flex-wrap text-sm text-foreground-light hover:text-foreground transition-opacity gap-y-0.5 gap-x-2 md:gap-2',
             className
           )}
           {...props}
         >
-          <span className="py-1 uppercase text-brand font-mono">Webinar</span>
-          <span className="py-1 uppercase mx-3 px-3 border-x">21 Aug</span>
-          <span className="py-1">Scale to Millions: Generative AI/Humata</span>
+          <span className="uppercase text-brand font-mono">Webinar</span>
+          {/* <span className="uppercase px-2 text-xs">23 Oct</span> */}
+          <span className="">Migrating to Supabase Auth / Good Tape</span>
+          <ChevronRightIcon className="translate-x-0 transition-transform group-hover:translate-x-0.5 w-3 h-3 -ml-1" />
         </Link>
       )
     case 'small':
@@ -39,9 +40,9 @@ const EventCallout = ({ className, size = 'tiny', ...props }: PropsWithChildren<
           {...props}
         >
           <VideoCameraIcon className="w-4 h-4 text-brand mr-2" />
-          <span className="py-1 uppercase text-brand font-mono">Upcoming Webinar</span>
-          <span className="py-1 uppercase mx-3 px-3 border-x">21 Aug</span>
-          <span className="py-1">Scale to Millions: Generative AI/Humata</span>
+          <span className="py-1 uppercase text-brand font-mono">Webinar</span>
+          <span className="py-1 uppercase mx-3 px-3 border-x">23 Oct</span>
+          <span className="py-1">Migrating to Supabase Auth / Good Tape</span>
           <ChevronRightIcon className="translate-x-0 transition-transform group-hover:translate-x-0.5 w-3 h-3 ml-1.5" />
         </Link>
       )
@@ -65,14 +66,11 @@ const EventCallout = ({ className, size = 'tiny', ...props }: PropsWithChildren<
             <div className="flex flex-col gap-2 md:gap-3 flex-grow max-w-xl xl:justify-center">
               <div className="flex flex-row text-sm">
                 <span className="uppercase text-brand font-mono">Webinar</span>
-                <span className="mx-3 pl-3 border-l">21 Aug 2024 at 8PM PST</span>
+                <span className="mx-3 pl-3 border-l">23 Oct 2024 at 10AM PST</span>
               </div>
 
               <span className="text-foreground text-3xl">Scale to Millions</span>
-              <p>
-                Quickly and cost effectively build Generative AI applications that you can use to
-                chat with your company’s documents.
-              </p>
+              <p>Learn how to reduce costs while maintaining top-tier security with Supabase</p>
               <TextLink label="Register now" />
             </div>
           </Panel>

apps/www/components/Hero/Hero.tsx

@@ -1,13 +1,16 @@
-import { useTelemetryProps } from 'common/hooks/useTelemetryProps'
-import { BookOpen } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { Button } from 'ui'
-import SectionContainer from '~/components/Layouts/SectionContainer'
+import { useTelemetryProps } from 'common/hooks/useTelemetryProps'
 import gaEvents from '~/lib/gaEvents'
 import Telemetry, { TelemetryEvent } from '~/lib/telemetry'
 
+import { Button } from 'ui'
+import SectionContainer from '~/components/Layouts/SectionContainer'
+import EventCallout from '~/components/EventCallout'
+import { useBreakpoint } from 'common'
+
 const Hero = () => {
+  const isMobile = useBreakpoint(768)
   const router = useRouter()
   const telemetryProps = useTelemetryProps()
   const sendTelemetryEvent = async (event: TelemetryEvent) => {
@@ -22,6 +25,7 @@ const Hero = () => {
             <div className="mx-auto max-w-2xl lg:col-span-6 lg:flex lg:items-center justify-center text-center">
               <div className="relative z-10 lg:h-auto pt-[90px] lg:pt-[90px] lg:min-h-[300px] flex flex-col items-center justify-center sm:mx-auto md:w-3/4 lg:mx-0 lg:w-full gap-4 lg:gap-8">
                 <div className="flex flex-col items-center">
+                  <EventCallout size={isMobile ? 'tiny' : 'small'} className="mb-4 lg:mb-8 -mt-4" />
                   <h1 className="text-foreground text-4xl sm:text-5xl sm:leading-none lg:text-7xl">
                     <span className="block text-foreground">Build in a weekend</span>
                     <span className="text-brand block md:ml-0">Scale to millions</span>

apps/www/components/Nav/ProductDropdown.tsx

@@ -9,6 +9,9 @@ import { TextLink } from 'ui'
 import { NavigationMenuLink } from 'ui/src/components/shadcn/ui/navigation-menu'
 import MenuItem from './MenuItem'
 
+import EventCallout from '~/components/EventCallout'
+import Panel from '~/components/Panel'
+
 import ComparisonsData from 'data/Comparisons'
 import CustomersData from 'data/CustomerStories'
 import SolutionsData from 'data/Solutions'
@@ -85,6 +88,11 @@ const ProductDropdown = () => {
               ))}
             </ul>
           </div>
+          <div>
+            <Panel outerClassName="rounded-md" innerClassName="bg-surface-100 rounded-md">
+              <EventCallout size="tiny" className="p-3 !gap-0.5 [&_svg]:hidden" />
+            </Panel>
+          </div>
         </div>
       </div>
     </div>

apps/www/lib/authors.json

@@ -358,6 +358,13 @@
     "author_url": "https://github.com/kevcodez",
     "author_image_url": "https://github.com/kevcodez.png"
   },
+  {
+    "author_id": "kevinbrolly",
+    "author": "Kevin Brolly",
+    "position": "Head of Customer Success",
+    "author_url": "https://twitter.com/kevinbrolly",
+    "author_image_url": "https://pbs.twimg.com/profile_images/1292938696912756736/_DO9_Evo_200x200.jpg"
+  },
   {
     "author_id": "benediktmueller",
     "author": "Benedikt Müller",
@@ -490,7 +497,8 @@
     "author_id": "khajvandi",
     "author": "Cyrus Khajvandi",
     "username": "khajvandi",
-    "position": "Co-Founder & CEO, Humata",
+    "position": "Co-Founder & CEO",
+    "company": "Humata",
     "author_url": "https://www.linkedin.com/in/khajvandi/",
     "author_image_url": "https://media.licdn.com/dms/image/v2/D5603AQGZst2tvV47PA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1694666298155?e=1728518400&v=beta&t=Jkt6ii4cV8FsvU4qONEGFVUADw-Zc_WI1h-pSrenxGg"
   },
@@ -534,6 +542,14 @@
     "author_url": "https://github.com/nyannyacha",
     "author_image_url": "https://github.com/nyannyacha.png"
   },
+  {
+    "author_id": "jstoone",
+    "author": "Jakob Steinn",
+    "position": "Co-founder & Tech Lead",
+    "company": "Good Tape",
+    "author_url": "https://twitter.com/jstoone",
+    "author_image_url": "https://pbs.twimg.com/profile_images/1233003191538790400/3OxNooXT_200x200.jpg"
+  },
   {
     "author_id": "tim_shedor",
     "author": "Tim Shedor",

apps/www/pages/customers.tsx

@@ -13,7 +13,8 @@ import { motion } from 'framer-motion'
 import styles from '~/styles/customers.module.css'
 import Link from 'next/link'
 import { GlassPanel } from 'ui-patterns/GlassPanel'
-import WebinarAnnouncement from '~/components/Announcement/WebinarAnnouncement'
+import EventCallout from '../components/EventCallout'
+import { useBreakpoint } from 'common'
 
 export async function getStaticProps() {
   const allPostsData = getSortedPosts({ directory: '_customers' })
@@ -32,6 +33,7 @@ export async function getStaticProps() {
 
 function CustomerStoriesPage(props: any) {
   const { basePath } = useRouter()
+  const isMobile = useBreakpoint(768)
 
   const meta = {
     title: 'Customer Stories | Supabase',
@@ -82,11 +84,11 @@ function CustomerStoriesPage(props: any) {
           <div className="container mx-auto mt-28 sm:mt-44 px-4 xl:px-20">
             <div className="mx-auto relative z-10">
               <motion.div
-                className="mx-auto sm:max-w-2xl text-center"
+                className="mx-auto sm:max-w-2xl text-center flex flex-col items-center"
                 initial={{ opacity: 0, y: 10 }}
                 animate={{ opacity: 1, y: 0, transition: { duration: 0.5, easing: 'easeOut' } }}
               >
-                <WebinarAnnouncement />
+                <EventCallout size={isMobile ? 'tiny' : 'small'} className="mb-4 lg:mb-8 -mt-4" />
                 <h1 className="text-foreground mb-3 text-3xl">Customer stories</h1>
                 <h2 className="text-foreground-light text-base sm:text-xl">
                   Discover case studies on how Supabase is being used around the world to quickly

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

@@ -2,7 +2,6 @@ import React from 'react'
 import Link from 'next/link'
 import NextImage from 'next/image'
 import { useRouter } from 'next/router'
-import type { GetStaticProps, InferGetStaticPropsType } from 'next'
 import { MDXRemote } from 'next-mdx-remote'
 import { NextSeo } from 'next-seo'
 import dayjs from 'dayjs'
@@ -13,7 +12,8 @@ import {
   MicrophoneIcon,
   HandIcon,
 } from '@heroicons/react/solid'
-import { capitalize } from 'lodash'
+import capitalize from 'lodash/capitalize'
+import { ChevronLeft, X as XIcon } from 'lucide-react'
 
 import authors from 'lib/authors.json'
 import { isNotNullOrUndefined } from '~/lib/helpers'
@@ -23,7 +23,6 @@ import { getAllPostSlugs, getPostdata } from '~/lib/posts'
 import { isBrowser, useTelemetryProps } from 'common'
 import Telemetry, { TelemetryEvent } from '~/lib/telemetry'
 import gaEvents from '~/lib/gaEvents'
-import { XIcon } from '@heroicons/react/outline'
 
 import utc from 'dayjs/plugin/utc'
 import timezone from 'dayjs/plugin/timezone'
@@ -36,7 +35,9 @@ import ShareArticleActions from '~/components/Blog/ShareArticleActions'
 
 import * as supabaseLogoWordmarkDark from 'common/assets/images/supabase-logo-wordmark--dark.png'
 import * as supabaseLogoWordmarkLight from 'common/assets/images/supabase-logo-wordmark--light.png'
-import { ChevronLeft } from 'lucide-react'
+
+import type { GetStaticProps, InferGetStaticPropsType } from 'next'
+import type Author from '~/types/author'
 
 dayjs.extend(utc)
 dayjs.extend(timezone)
@@ -148,7 +149,7 @@ const EventPage = ({ event }: InferGetStaticPropsType<typeof getStaticProps>) =>
     ?.map((speakerId: string) => {
       return authors.find((author) => author.author_id === speakerId)
     })
-    .filter(isNotNullOrUndefined)
+    .filter(isNotNullOrUndefined) as Author[]
   const hadEndDate = event.end_date?.length
 
   const IS_REGISTRATION_OPEN =
@@ -265,7 +266,7 @@ const EventPage = ({ event }: InferGetStaticPropsType<typeof getStaticProps>) =>
               className="
                 relative z-10
                 lg:min-h-[400px] h-full
-                grid grid-cols-1 lg:grid-cols-2
+                grid grid-cols-1 xl:grid-cols-2
                 gap-8
                 text-foreground-light
                 !py-10 md:!py-16
@@ -282,7 +283,7 @@ const EventPage = ({ event }: InferGetStaticPropsType<typeof getStaticProps>) =>
                     <span className="">Duration: {event.duration}</span>
                   </div>
 
-                  <h1 className="text-foreground text-3xl lg:text-4xl">{event.title}</h1>
+                  <h1 className="text-foreground text-3xl md:text-4xl xl:pr-9">{event.title}</h1>
                   <p>{event.subtitle}</p>
                   <Button
                     type="primary"
@@ -337,21 +338,15 @@ const EventPage = ({ event }: InferGetStaticPropsType<typeof getStaticProps>) =>
           <SectionContainer className="grid lg:grid-cols-3 gap-12 !py-10 md:!py-16">
             {event.company && (
               <div className="order-first lg:col-span-full flex items-center gap-4 md:gap-6 lg:mb-4">
-                <figure className="h-6">
-                  <NextImage
-                    src={supabaseLogoWordmarkLight}
+                <figure className="h-6 [&_.next-image--dynamic-fill_img]:!h-full">
+                  <Image
+                    src={{ dark: supabaseLogoWordmarkDark, light: supabaseLogoWordmarkLight }}
+                    alt="Supabase Logo"
                     width={160}
                     height={30}
-                    alt="Supabase Logo"
-                    className="object-contain dark:hidden"
-                    priority
-                  />
-                  <NextImage
-                    src={supabaseLogoWordmarkDark}
-                    width={160}
-                    height={30}
-                    alt="Supabase Logo"
-                    className="object-contain hidden dark:block"
+                    sizes="100%"
+                    className="!relative object-contain object-left"
+                    containerClassName="h-full object-contain object-left !rounded-none !border-none"
                     priority
                   />
                 </figure>
@@ -359,22 +354,16 @@ const EventPage = ({ event }: InferGetStaticPropsType<typeof getStaticProps>) =>
                 <Link
                   href={event.company?.website_url ?? '#'}
                   target="_blank"
-                  className="h-5 aspect-[9/1] transition-opacity opacity-100 hover:opacity-90"
+                  className="h-5 aspect-[9/1] transition-opacity opacity-100 hover:opacity-90 [&_.next-image--dynamic-fill_img]:!h-full"
                 >
-                  <NextImage
-                    src={event.company?.logo}
+                  <Image
+                    src={{ dark: event.company?.logo, light: event.company?.logo_light }}
                     alt={`${event.company?.name} Logo`}
-                    fill
+                    width={160}
+                    height={30}
                     sizes="100%"
-                    className="!relative object-contain object-left hidden dark:block"
-                    priority
-                  />
-                  <NextImage
-                    src={event.company?.logo_light}
-                    alt={`${event.company?.name} Logo`}
-                    fill
-                    sizes="100%"
-                    className="!relative object-contain object-left dark:hidden"
+                    className="!relative object-contain object-left"
+                    containerClassName="h-full object-contain object-left !rounded-none !border-none"
                     priority
                   />
                 </Link>
@@ -437,6 +426,7 @@ const EventPage = ({ event }: InferGetStaticPropsType<typeof getStaticProps>) =>
                             <p>{speaker?.author}</p>
                             <span className="text-xs text-foreground-light">
                               {speaker?.position}
+                              {speaker?.company ? `, ${speaker?.company}` : ', Supabase'}
                             </span>
                           </div>
                         </Link>

apps/www/public/customers-rss.xml

@@ -5,9 +5,16 @@
       <link>https://supabase.com</link>
       <description>Latest news from Supabase</description>
       <language>en</language>
-      <lastBuildDate>Tue, 11 Jun 2024 22:00:00 GMT</lastBuildDate>
+      <lastBuildDate>Mon, 30 Sep 2024 22:00:00 GMT</lastBuildDate>
       <atom:link href="https://supabase.com/rss.xml" rel="self" type="application/rss+xml"/>
       <item>
+  <guid>https://supabase.com/customers/humata</guid>
+  <title>Humata Scales with Supabase - Achieving 4X Cost Savings and Enhanced Performance</title>
+  <link>https://supabase.com/customers/humata</link>
+  <description>By partnering with Supabase, Humata achieved a 4X reduction in vector database costs, streamlined their development, and consolidated their data so they could scale seamlessly.</description>
+  <pubDate>Mon, 30 Sep 2024 22:00:00 GMT</pubDate>
+</item>
+<item>
   <guid>https://supabase.com/customers/maergo</guid>
   <title>Maergo&apos;s Express Delivery: How Supabase Helped Achieve Scalability, Speed, and Cost Saving</title>
   <link>https://supabase.com/customers/maergo</link>

apps/www/public/rss.xml

@@ -5,9 +5,30 @@
       <link>https://supabase.com</link>
       <description>Latest news from Supabase</description>
       <language>en</language>
-      <lastBuildDate>Wed, 11 Sep 2024 22:00:00 GMT</lastBuildDate>
+      <lastBuildDate>Mon, 07 Oct 2024 22:00:00 GMT</lastBuildDate>
       <atom:link href="https://supabase.com/rss.xml" rel="self" type="application/rss+xml"/>
       <item>
+  <guid>https://supabase.com/blog/offline-first-flutter-apps</guid>
+  <title>Building offline-first mobile apps with Supabase, Flutter and Brick</title>
+  <link>https://supabase.com/blog/offline-first-flutter-apps</link>
+  <description>Brick is an all-in-one data manager for Flutter that handles querying and uploading between Supabase and local caches like SQLite. Using Brick, developers can focus on implementing the application without worrying about translating or storing their data.</description>
+  <pubDate>Mon, 07 Oct 2024 22:00:00 GMT</pubDate>
+</item>
+<item>
+  <guid>https://supabase.com/blog/lw12-hackathon-winners</guid>
+  <title>Supabase Launch Week 12 Hackathon</title>
+  <link>https://supabase.com/blog/lw12-hackathon-winners</link>
+  <description>Announcing the winners of the Supabase Launch Week 12 Hackathon.</description>
+  <pubDate>Sun, 29 Sep 2024 22:00:00 GMT</pubDate>
+</item>
+<item>
+  <guid>https://supabase.com/blog/local-first-expo-legend-state</guid>
+  <title>Local-first Realtime Apps with Expo and Legend-State</title>
+  <link>https://supabase.com/blog/local-first-expo-legend-state</link>
+  <description>Build local-first realtime web and mobile apps with Expo, Legend-State, and Supabase.</description>
+  <pubDate>Sun, 22 Sep 2024 22:00:00 GMT</pubDate>
+</item>
+<item>
   <guid>https://supabase.com/blog/edge-functions-faster-smaller</guid>
   <title>Edge Functions are now 2x smaller and boot 3x faster</title>
   <link>https://supabase.com/blog/edge-functions-faster-smaller</link>

apps/www/types/author.ts

@@ -4,6 +4,7 @@ type Author = {
   position: string
   author_url: string
   author_image_url: string
+  company?: string
 }
 
 export default Author

packages/ui/src/components/Image/Image.tsx

@@ -74,6 +74,7 @@ const Image = ({ src, alt = '', zoomable, ...props }: ImageProps) => {
           : undefined)}
       >
         <NextImage
+          key={resolvedTheme}
           alt={alt}
           src={source}
           sizes={sizes}