add interaction

apps/www/components/Sections/CustomerQuotesSection.tsx

@@ -3,11 +3,14 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useTheme } from 'common/Providers'
 import { IconArrowUpRight } from 'ui'
+import { LazyMotion, domAnimation, m, useInView } from 'framer-motion'
 
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import CustomersVisual from '~/components/products/vector/CustomersVisual'
+import { useRef } from 'react'
+import { INITIAL_BOTTOM, getAnimation } from '~/lib/animations'
 
-interface CardInterface {
+interface Customer {
   type?: string
   avatar?: string
   author?: string
@@ -20,27 +23,41 @@ interface CardInterface {
   customer?: string
 }
 
+interface Card {
+  customer: any
+  index: number
+}
+
 interface Props {
   title: string | React.ReactNode
-  customers: CardInterface[]
-  secondaryLinks: CardInterface[]
+  customers: Customer[]
+  secondaryLinks: Customer[]
 }
 
 const CustomerQuotesSection = (props: Props) => {
   const { basePath } = useRouter()
+  const ref = useRef(null)
+  const isInView = useInView(ref, { margin: '-25%', once: true })
 
-  const Card = (card: CardInterface) => {
+  const Card = ({ customer, index }: Card) => {
     const { isDarkMode } = useTheme()
-    const logo = `/images/customers/logos/${!isDarkMode ? '' : 'light/'}${card.customer}.png`
+    const logo = `/images/customers/logos/${!isDarkMode ? '' : 'light/'}${customer.customer}.png`
+
+    const initial = INITIAL_BOTTOM
+    const animate = getAnimation({ delay: index * 0.1 })
 
     return (
-      <div className="bg-scale-100 dark:bg-scale-200 hover:border-scale-600 hover:dark:border-scale-700 border-scale-300 dark:border-scale-400 rounded-2xl border p-6 drop-shadow-sm flex flex-col justify-between">
+      <m.div
+        initial={initial}
+        animate={isInView ? animate : initial}
+        className="bg-scale-100 dark:bg-scale-200 hover:border-scale-600 hover:dark:border-scale-700 border-scale-300 dark:border-scale-400 rounded-2xl border p-6 drop-shadow-sm flex flex-col justify-between"
+      >
         <div className="flex flex-col gap-4">
           <div className="h-24 w-full flex items-center justify-center pb-3">
             <div className="relative w-full flex items-center justify-center h-10">
               <Image
                 src={logo}
-                alt={`Supabase + ${card.customer}`}
+                alt={`Supabase + ${customer.customer}`}
                 layout="fill"
                 objectFit="contain"
                 objectPosition="center"
@@ -48,66 +65,47 @@ const CustomerQuotesSection = (props: Props) => {
             </div>
           </div>
           <div className="border-t pt-4">
-            <p className="text-scale-1100 text-base">{card.quote}</p>
-            <p className="text-scale-900 mt-4">{card.author}</p>
-            <blockquote className="text-scale-900 text-sm">{card.role}</blockquote>
+            <p className="text-scale-1100 text-base">{customer.quote}</p>
+            <p className="text-scale-900 mt-4">{customer.author}</p>
+            <blockquote className="text-scale-900 text-sm">{customer.role}</blockquote>
           </div>
         </div>
 
-        {card.url && (
+        {customer.url && (
           <div className="text-brand-900 border-t mt-4 pt-4 cursor-pointer text-sm flex items-center justify-between">
             <span>Read Customer Story</span>
             <IconArrowUpRight />
           </div>
         )}
-      </div>
+      </m.div>
     )
   }
 
   return (
-    <div className="py-16 sm:py-18 md:py-24 bg-scale-400 overflow-hidden dark:bg-transparent">
-      <div className="relative h-[300px] w-[300vw] left-[-98vw] md:left-0 mx-auto md:w-full -mb-32 z-0">
-        <CustomersVisual />
-        {/* <Image
-          src="/images/product/vector/community/vector-graphics-dark.svg"
-          alt="vector graphic"
-          layout="fill"
-          objectPosition={isSm ? '49%' : '51%'}
-          objectFit={isSm ? 'cover' : 'contain'}
-        /> */}
-      </div>
-      <SectionContainer className="!py-0">
-        <div className="col-span-12 text-center relative z-10">
-          <h3 className="text-3xl md:text-4xl heading-gradient">{props.title}</h3>
+    <LazyMotion features={domAnimation}>
+      <div className="py-16 sm:py-18 md:py-24 bg-scale-400 overflow-hidden dark:bg-transparent">
+        <div className="relative h-[300px] w-[300vw] left-[-98vw] md:left-0 mx-auto md:w-full -mb-32 z-0">
+          <CustomersVisual />
         </div>
-        <div className="relative mx-auto max-w-4xl grid grid-cols-1 lg:grid-cols-2 gap-4 xl:gap-8 pt-16 pb-0">
-          {props.customers.map((customer) => (
-            <Link href={`${basePath}${customer.url}`}>
-              <a className="h-full flex">
-                <Card {...customer} />
-              </a>
-            </Link>
-          ))}
-          {/* <div className="w-full h-full flex flex-col justify-stretch gap-4 xl:gap-8">
-            {props.secondaryLinks.map((link) => (
-              <Link href={`${basePath}${link.url}`}>
-                <a className="w-full h-auto lg:h-full bg-scale-100 dark:bg-scale-200 hover:border-scale-600 hover:dark:border-scale-700 border-scale-300 dark:border-scale-400 rounded-2xl border p-6 drop-shadow-sm flex flex-col justify-center items-center py-16">
-                  <div className="relative w-full flex items-center justify-center h-10 pb-3">
-                    <Image
-                      src={link.image!}
-                      alt={`Supabase + ${link.customer}`}
-                      layout="fill"
-                      objectFit="contain"
-                      objectPosition="center"
-                    />
-                  </div>
+        <SectionContainer className="!py-0">
+          <div className="col-span-12 text-center relative z-10">
+            <h3 className="text-3xl md:text-4xl heading-gradient">{props.title}</h3>
+          </div>
+          <div
+            ref={ref}
+            className="relative mx-auto max-w-4xl grid grid-cols-1 lg:grid-cols-2 gap-4 xl:gap-8 pt-16 pb-0"
+          >
+            {props.customers.map((customer, i: number) => (
+              <Link href={`${basePath}${customer.url}`} key={customer.customer}>
+                <a className="h-full flex">
+                  <Card customer={customer} index={i} />
                 </a>
               </Link>
             ))}
-          </div> */}
-        </div>
-      </SectionContainer>
-    </div>
+          </div>
+        </SectionContainer>
+      </div>
+    </LazyMotion>
   )
 }
 

apps/www/components/Sections/HighlightCards.tsx

@@ -16,7 +16,7 @@ const HighlightCards = ({ highlights }: { highlights: Highlight[] }) => {
   return (
     <SectionContainer>
       <LazyMotion features={domAnimation}>
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
           {highlights.map((highlight, i) => (
             <HighlightCard highlight={highlight} index={i} key={highlight.title} />
           ))}

apps/www/components/products/vector/IntegrationsImage.tsx

@@ -1,8 +1,8 @@
-import Image from 'next/image'
 import React, { useRef } from 'react'
+import Image from 'next/image'
 import { useTheme } from 'common/Providers'
 import { LazyMotion, domAnimation, m, useInView } from 'framer-motion'
-import { INITIAL_BOTTOM, getAnimation } from '../../../lib/animations'
+import { INITIAL_BOTTOM, getAnimation } from '~/lib/animations'
 
 const IntegrationsImage = () => {
   const { isDarkMode } = useTheme()

apps/www/data/Solutions.json

@@ -39,9 +39,10 @@
     "label": "",
     "url": "/realtime"
   },
+
   "vector": {
     "name": "Vector",
-    "icon": "M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z",
+    "icon": "M12.0052 12.6366V21.9858M12.0052 12.6366L20.2539 7.84533M12.0052 12.6366L3.75687 7.84555M3.75687 7.84555V13.579M3.75687 7.84555V7.79644L8.69794 4.92639M20.2543 13.6291V7.79644L15.3132 4.92639M17.2103 19.1471L12.0056 22.1703L6.80082 19.1471M12.0075 1.82983V6.58393M21.4365 18.1456L17.3226 15.7736M2.49609 18.0311L6.60673 15.654",
     "description": "Integrate your favorite ML-models to store, index and search vector embeddings.",
     "description_short": "",
     "label": "",

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

@@ -20,7 +20,7 @@ export default {
       <>
         Integrate Supabase Vector database with your favorite ML-models{' '}
         <br className="hidden md:block" />
-        to easily store, access and scale vector embeddings for any AI use case
+        to easily store, access and scale vector embeddings for any AI use case.
       </>
     ),
     image: '/images/product/vector/vector-hero.svg',
@@ -135,9 +135,8 @@ export default {
         title: 'Data Management',
         description: 'Automatically tag, deduplicate or detect patterns in your vector store.',
         cta: {
-          label: 'Template coming soon',
-          link: '#',
-          isDisabled: true,
+          label: 'View Template',
+          link: 'https://colab.research.google.com/github/supabase/supabase/blob/master/examples/ai/semantic_text_deduplication.ipynb',
         },
       },
       {