Improve mobile (#18032)

* Improve mobile announcement in vector page

apps/www/components/Announcement/Badge.tsx

@@ -9,9 +9,17 @@ interface Props {
   badge?: string
   target?: '_self' | '_blank' | string
   className?: string
+  hasArrow?: boolean
 }
 
-const AnnouncementBadge = ({ url, announcement, badge, target = '_self', className }: Props) => (
+const AnnouncementBadge = ({
+  url,
+  announcement,
+  badge,
+  target = '_self',
+  className,
+  hasArrow = true,
+}: Props) => (
   <div
     className={cn(
       'relative w-full max-w-xl flex justify-center opacity-0 !animate-[fadeIn_0.5s_cubic-bezier(0.25,0.25,0,1)_0.5s_both]',
@@ -48,7 +56,9 @@ const AnnouncementBadge = ({ url, announcement, badge, target = '_self', classNa
           </Badge>
         )}
         <span className="text-foreground">{announcement}</span>
-        <ArrowNarrowRightIcon className="h-4 ml-2 -translate-x-1 transition-transform group-hover/announcement:translate-x-0" />
+        {hasArrow && (
+          <ArrowNarrowRightIcon className="h-4 ml-2 -translate-x-1 transition-transform group-hover/announcement:translate-x-0" />
+        )}
         <div
           className="absolute inset-0 -z-10 bg-gradient-to-br
             opacity-70

apps/www/components/Sections/ProductHeaderCentered.tsx

@@ -33,7 +33,7 @@ interface Types {
 const ProductHeaderCentered = (props: Types) => (
   <div
     className={[
-      'container relative w-full mx-auto px-6 pt-4 pb-0 sm:px-16 xl:px-20',
+      'container relative w-full mx-auto px-6 pt-2 pb-0 sm:px-16 xl:px-20',
       props.className,
     ].join(' ')}
   >
@@ -53,11 +53,13 @@ const ProductHeaderCentered = (props: Types) => (
           {props.image}
         </div>
       )}
-      <div className="relative overflow-hidden w-full z-10 flex flex-col items-center space-y-2 mx-auto max-w-2xl">
-        {props.announcement && <AnnouncementBadge {...props.announcement} className="mb-4 z-10" />}
+      <div className="relative w-full z-10 flex flex-col items-center space-y-2 mx-auto max-w-2xl">
+        {props.announcement && (
+          <AnnouncementBadge {...props.announcement} className="pb-4 md:pb-8 z-10" />
+        )}
         <div>
           {props.icon || props.title ? (
-            <div className="mb-4 flex justify-center items-center gap-3">
+            <div className="mb-2 flex justify-center items-center gap-3">
               {props.icon && <ProductIcon icon={props.icon} />}
               {props.title && (
                 <span
@@ -76,32 +78,26 @@ const ProductHeaderCentered = (props: Types) => (
           </h1>
           <p className="p !text-scale-1100">{props.subheader}</p>
         </div>
-        <div className="flex flex-row md:flex-row pt-8 md:items-center">
+        <div className="w-full sm:w-auto flex flex-col items-stretch sm:flex-row pt-2 sm:pt-8 sm:items-center gap-2">
           {props.cta && (
-            <Link href={props.cta.link} as={props.cta.link}>
-              <a tabIndex={-1}>
-                <Button size="medium" className="text-white">
-                  {props.cta.label ?? 'Start for free'}
-                </Button>
-              </a>
+            <Link href={props.cta.link} as={props.cta.link} passHref>
+              <Button size="medium" className="text-white" asChild>
+                <a>{props.cta.label ?? 'Start for free'}</a>
+              </Button>
             </Link>
           )}
           {props.video && (
-            <Link href={props.video} as={props.video}>
-              <a className="ml-2">
-                <Button type="default" size="medium" icon={<IconPlayCircle />}>
-                  Watch video
-                </Button>
-              </a>
+            <Link href={props.video} as={props.video} passHref>
+              <Button type="default" size="medium" icon={<IconPlayCircle />} asChild>
+                <a>Watch video</a>
+              </Button>
             </Link>
           )}
           {props.secondaryCta && (
-            <Link href={props.secondaryCta.link} as={props.secondaryCta.link}>
-              <a className="ml-2 md:ml-3">
-                <Button type="default" size="medium">
-                  {props.secondaryCta.label}
-                </Button>
-              </a>
+            <Link href={props.secondaryCta.link} as={props.secondaryCta.link} passHref>
+              <Button type="default" size="medium" asChild>
+                <a>{props.secondaryCta.label}</a>
+              </Button>
             </Link>
           )}
         </div>

apps/www/data/products/vector/pageData.tsx

@@ -5,29 +5,29 @@ import PGvectorImg from '~/components/Products/VectorAI/PGvectorImg'
 import DeployGlobally from '~/components/Products/VectorAI/DeployGlobally'
 import IntegrationsImage from '~/components/Products/VectorAI/IntegrationsImage'
 
-export default {
+export default (isMobile?: boolean) => ({
   metaTitle: '',
   metaDescription: '',
   heroSection: {
     announcement: {
       url: 'https://www.ai.engineer/summit/schedule/supabase-vector',
-      badge: 'AI Engineer Summit',
-      announcement: 'Join us in San Francisco, Oct 8–10',
+      badge: 'Happening now',
+      announcement: 'AI Engineer Summit',
       target: '_blank',
+      hasArrow: !isMobile,
     },
     title: 'Supabase Vector',
     h1: (
       <span key={'vector-h1'} className="heading-gradient">
-        The Postgres Vector database <br />
+        The Postgres Vector database <br className="hidden md:block" />
         and AI Toolkit
       </span>
     ),
     subheader: (
       <>
         An open source Vector database for developing AI applications.
-        <br className="hidden md:block" />
-        Use pgvector to store, index, and access embeddings, and our AI toolkit to build AI
-        applications with Hugging Face and OpenAI.
+        <br className="hidden md:block" /> Use pgvector to store, index, and access embeddings, and
+        our AI toolkit to build AI applications with Hugging Face and OpenAI.
       </>
     ),
     image: '/images/product/vector/vector-hero.svg',
@@ -337,4 +337,4 @@ docs.query(
       },
     ],
   },
-}
+})

apps/www/pages/vector/Vector.tsx

@@ -3,8 +3,9 @@ import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import DefaultLayout from '~/components/Layouts/Default'
 
+import { useBreakpoint } from 'common'
 import { PRODUCT_SHORTNAMES } from '~/lib/constants'
-import pageData from '~/data/products/vector/pageData'
+import vectorPageData from '~/data/products/vector/pageData'
 
 import 'swiper/swiper.min.css'
 
@@ -20,10 +21,12 @@ const EnterpriseCta = dynamic(() => import('~/components/Sections/EnterpriseCta'
 
 function VectorPage() {
   // base path for images
+  const isXs = useBreakpoint(640)
   const { basePath } = useRouter()
   const meta_title = 'Supabase Vector | The Postgres Vector database.'
   const meta_description =
     'An open source Vector database for developing AI applications. Use pgvector to store, index, and access embeddings, and our AI toolkit to build AI applications with Hugging Face and OpenAI.'
+  const pageData = vectorPageData(isXs)
 
   return (
     <>