Update logos on homepage (#48087)

Updates logos on homepage and removes slider

apps/www/app/(home)/_components/LogosGrid.tsx

@@ -1,79 +1,37 @@
-'use client'
-
-import { AnimatePresence, motion } from 'framer-motion'
-import { ComponentProps, useEffect, useState } from 'react'
+import { ComponentProps } from 'react'
 
 import {
   BetasharesLogo,
   BoltLogo,
-  ChatbaseLogo,
   FigmaLogo,
   GithubLogo,
-  GoodtapeLogo,
-  GopuffLogo,
-  GumloopLogo,
-  HappyteamsLogo,
-  HumataLogo,
   LangchainLogo,
-  LoopsLogo,
   LovableLogo,
-  MarkpromptLogo,
-  MdnLogo,
   MobbinLogo,
   MozillaLogo,
-  PikaLogo,
+  OnePasswordLogo,
   PwcLogo,
   ResendLogo,
-  SoshiLogo,
-  SubmagicLogo,
-  TempoLogo,
   V0Logo,
 } from './logos/PublicityLogos'
 import SectionContainer from '@/components/Layouts/SectionContainer'
 
 const gridLogos: { name: string; Logo: (props: ComponentProps<'svg'>) => React.JSX.Element }[] = [
-  { name: 'betashares', Logo: BetasharesLogo },
-  { name: 'bolt', Logo: BoltLogo },
-  { name: 'chatbase', Logo: ChatbaseLogo },
-  { name: 'figma', Logo: FigmaLogo },
-  { name: 'github', Logo: GithubLogo },
-  { name: 'goodtape', Logo: GoodtapeLogo },
-  { name: 'gopuff', Logo: GopuffLogo },
-  { name: 'gumloop', Logo: GumloopLogo },
-  { name: 'happyteams', Logo: HappyteamsLogo },
-  { name: 'humata', Logo: HumataLogo },
-  { name: 'langchain', Logo: LangchainLogo },
-  { name: 'loops', Logo: LoopsLogo },
   { name: 'lovable', Logo: LovableLogo },
-  { name: 'markprompt', Logo: MarkpromptLogo },
-  { name: 'mdn', Logo: MdnLogo },
-  { name: 'mobbin', Logo: MobbinLogo },
   { name: 'mozilla', Logo: MozillaLogo },
-  { name: 'pika', Logo: PikaLogo },
   { name: 'pwc', Logo: PwcLogo },
-  { name: 'resend', Logo: ResendLogo },
-  { name: 'soshi', Logo: SoshiLogo },
-  { name: 'submagic', Logo: SubmagicLogo },
-  { name: 'tempo', Logo: TempoLogo },
+  { name: 'figma', Logo: FigmaLogo },
   { name: 'v0', Logo: V0Logo },
+  { name: 'bolt', Logo: BoltLogo },
+  { name: 'github', Logo: GithubLogo },
+  { name: 'betashares', Logo: BetasharesLogo },
+  { name: 'mobbin', Logo: MobbinLogo },
+  { name: 'resend', Logo: ResendLogo },
+  { name: 'langchain', Logo: LangchainLogo },
+  { name: '1password', Logo: OnePasswordLogo },
 ]
 
-const LOGOS_PER_PAGE = 12
-
 export function LogosGrid() {
-  const [page, setPage] = useState(0)
-  const totalPages = Math.ceil(gridLogos.length / LOGOS_PER_PAGE)
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setPage((p) => (p + 1) % totalPages)
-    }, 10000)
-    return () => clearInterval(interval)
-  }, [totalPages])
-
-  const start = page * LOGOS_PER_PAGE
-  const currentLogos = gridLogos.slice(start, start + LOGOS_PER_PAGE)
-
   return (
     <div>
       <SectionContainer className="py-6!">
@@ -84,34 +42,27 @@ export function LogosGrid() {
 
       <div className="border-y border-border">
         <SectionContainer className="border-x border-border py-10!">
-          <AnimatePresence mode="popLayout" initial={false}>
-            <motion.ul
-              key={page}
-              aria-label="Trusted by fast-growing companies worldwide"
-              className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-y-10 gap-x-6 list-none"
-            >
-              {currentLogos.map(({ name, Logo }, i) => (
-                <motion.li
-                  key={name}
-                  initial={{ opacity: 0, scale: 0.95, filter: 'blur(2px)' }}
-                  animate={{ opacity: 0.7, scale: 1, filter: 'blur(0px)' }}
-                  exit={{ opacity: 0, scale: 0.95, filter: 'blur(2px)' }}
-                  transition={{
-                    duration: 0.45,
-                    delay: i * 0.03,
-                    ease: [0.25, 0.46, 0.45, 0.94],
-                  }}
-                  className="flex items-center justify-center h-10 text-foreground-lighter"
-                >
-                  <Logo
-                    role="img"
-                    aria-label={name.charAt(0).toUpperCase() + name.slice(1)}
-                    className="h-8 lg:h-12 w-auto"
-                  />
-                </motion.li>
-              ))}
-            </motion.ul>
-          </AnimatePresence>
+          <ul
+            aria-label="Trusted by fast-growing companies worldwide"
+            className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-y-10 gap-x-6 list-none"
+          >
+            {gridLogos.map(({ name, Logo }) => (
+              <li
+                key={name}
+                className="flex items-center justify-center h-10 text-foreground-lighter opacity-70"
+              >
+                <Logo
+                  role="img"
+                  aria-label={
+                    name === '1password'
+                      ? '1Password'
+                      : name.charAt(0).toUpperCase() + name.slice(1)
+                  }
+                  className="h-8 lg:h-12 w-auto"
+                />
+              </li>
+            ))}
+          </ul>
         </SectionContainer>
       </div>
     </div>