feat: select ‘25 banner (#38773)

* first push

* select branding

* banner data

* fix: type errors

apps/www/components/Nav/index.tsx

@@ -7,7 +7,7 @@ import { useWindowSize } from 'react-use'
 
 import { useIsLoggedIn, useUser } from 'common'
 import { Button, buttonVariants, cn } from 'ui'
-import { AuthenticatedDropdownMenu } from 'ui-patterns'
+import { AnnouncementBanner, AuthenticatedDropdownMenu } from 'ui-patterns'
 
 import { useSendTelemetryEvent } from 'lib/telemetry'
 import GitHubButton from './GitHubButton'
@@ -88,6 +88,7 @@ const Nav = ({ hideNavbar, stickyNavbar = true }: Props) => {
 
   return (
     <>
+      <AnnouncementBanner />
       <div
         className={cn('sticky top-0 z-40 transform', disableStickyNav && 'relative')}
         style={{ transform: 'translate3d(0,0,999px)' }}

packages/ui-patterns/src/Banners/AnnouncementBanner.tsx

@@ -1,13 +1,13 @@
 import { Announcement } from 'ui/src/layout/banners'
-import LW15Banner from './LW15Banner'
+import SelectBanner from './SelectBanner'
 import announcementJSON from './data.json'
 
 export const announcement = announcementJSON
 
 export const AnnouncementBanner = () => {
   return (
-    <Announcement show={true} announcementKey="announcement_lw15_d2">
-      <LW15Banner />
+    <Announcement show={true} announcementKey="announcement_select_25_09">
+      <SelectBanner />
     </Announcement>
   )
 }

packages/ui-patterns/src/Banners/LW15Banner.tsx

@@ -53,11 +53,11 @@ export function LW15Banner() {
       <div className="relative z-10 flex items-center justify-center">
         <div className="w-full flex gap-5 md:gap-10 items-center md:justify-center text-sm">
           <p className="flex gap-1.5 items-center font-mono uppercase tracking-widest text-sm">
-            {announcement.text}
+            {announcement.title}
           </p>
-          <p className="text-sm hidden sm:block">{announcement.launch}</p>
+          <p className="text-sm hidden sm:block">{announcement.desc}</p>
           <Button size="tiny" type="default" className="px-2 !leading-none text-xs" asChild>
-            <Link href={announcement.link}>{announcement.cta}</Link>
+            <Link href={announcement.link}>{announcement.button}</Link>
           </Button>
         </div>
       </div>

packages/ui-patterns/src/Banners/SelectBanner.tsx

@@ -0,0 +1,30 @@
+import Link from 'next/link'
+import { Button } from 'ui/src/components/Button'
+import announcement from './data.json'
+
+export function SelectBanner() {
+  return (
+    <div className="relative w-full p-4 flex items-center group justify-center text-foreground-contrast dark:text-white bg-black border-b border-muted transition-colors overflow-hidden ">
+      <div className="relative z-10 flex items-center justify-center">
+        <div className="w-full flex gap-5 md:gap-10 items-center md:justify-center text-sm">
+          <Link target={announcement.target ?? '_self'} href={announcement.link}>
+            <img src="/images/select/supabase-select.svg" alt="Supabase Select" className="w-32" />
+          </Link>
+
+          <p className="text-sm hidden sm:block">
+            {announcement.desc}
+            <span className="hidden xl:inline">{announcement.verbose}</span>
+          </p>
+
+          <Button size="tiny" type="default" className="px-2 !leading-none text-xs" asChild>
+            <Link target={announcement.target ?? '_self'} href={announcement.link}>
+              {announcement.button}
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SelectBanner

packages/ui-patterns/src/Banners/data.json

@@ -1,7 +1,8 @@
 {
-  "text": "",
-  "launch": "",
-  "launchDate": "2025-07-17T08:00:00.000-07:00",
-  "link": "#",
-  "cta": "Learn more"
+  "title": "Supabase Select",
+  "desc": "Our first user conference · October 3, San Francisco",
+  "verbose": " · Guillermo Rauch, Dylan Field, and more",
+  "link": "https://select.supabase.com/",
+  "target": "_blank",
+  "button": "Save your seat"
 }

packages/ui-patterns/src/PromoToast/PromoToast.tsx

@@ -46,7 +46,7 @@ const PromoToast = () => {
         poster={`${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/images/launch-week/lw15/assets/lw15-galaxy.png`}
       />
       <div className="relative z-10 text-foreground-lighter uppercase flex flex-col text-sm w-full mb-2">
-        <span className="mb-1">{announcement.text}</span>
+        <span className="mb-1">{announcement.title}</span>
         <p className="relative z-10 text-foreground flex flex-col text-xl w-full leading-7"></p>
       </div>
 

packages/ui/src/layout/banners/Announcement.tsx

@@ -9,8 +9,8 @@ import { X } from 'lucide-react'
 
 export interface AnnouncementProps {
   show: boolean
-  text: string
-  launchDate: string
+  title: string
+  launchDate: string | null
   link: string
   badge?: string
 }
@@ -66,7 +66,7 @@ const Announcement = ({
       <div className={cn('relative z-40 w-full', className)}>
         {dismissable && !isLaunchWeekSection && (
           <div
-            className="absolute z-50 right-4 flex h-full items-center opacity-100 text-foreground transition-opacity hover:opacity-100"
+            className="absolute z-50 right-4 flex h-full items-center opacity-100 text-foreground-contrast dark:text-foreground transition-opacity hover:opacity-100 hover:cursor-pointer"
             onClick={handleClose}
           >
             <X size={16} />