feat: implement logo thicker animation

components/sections/logo-thicker.tsx

@@ -1,3 +1,4 @@
+'use client';
 import {
   AcmeLogo,
   ApexLogo,
@@ -6,7 +7,7 @@ import {
   PulseLogo,
   QuantumLogo,
 } from '@/assets';
-import Image from 'next/image';
+import { motion } from 'motion/react';
 
 const COMPANY_LOGOS = [
   { src: AcmeLogo, name: 'Acme Corporation' },
@@ -15,6 +16,12 @@ const COMPANY_LOGOS = [
   { src: EchoLogo, name: 'Echo Innovations' },
   { src: PulseLogo, name: 'Pulse Digital' },
   { src: QuantumLogo, name: 'Quantum Solutions' },
+  { src: AcmeLogo, name: 'Acme Corporation' },
+  { src: ApexLogo, name: 'Apex Technologies' },
+  { src: CelestialLogo, name: 'Celestial Systems' },
+  { src: EchoLogo, name: 'Echo Innovations' },
+  { src: PulseLogo, name: 'Pulse Digital' },
+  { src: QuantumLogo, name: 'Quantum Solutions' },
 ];
 
 export function LogoThicker() {
@@ -36,19 +43,22 @@ export function LogoThicker() {
             role="group"
             aria-label="Partner company logos"
           >
-            <div className="flex gap-6">
+            <motion.div
+              initial={{ translate: '-50%' }}
+              animate={{ translate: '0' }}
+              transition={{ repeat: Infinity, ease: 'linear', duration: 30 }}
+              className="flex flex-none -translate-x-1/2 flex-row gap-14 pr-14"
+            >
               {COMPANY_LOGOS.map((logo) => (
-                <div key={logo.name} className="relative aspect-square w-full">
-                  <Image
-                    src={logo.src.src}
-                    alt={`${logo.name} logo`}
-                    fill
-                    sizes="(max-width: 768px) 60vw, 60vw"
-                    className="object-contain"
-                  />
-                </div>
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  key={logo.name}
+                  src={logo.src.src}
+                  alt={`${logo.name} logo`}
+                  className="h-6 w-auto flex-none"
+                />
               ))}
-            </div>
+            </motion.div>
           </div>
         </div>
       </div>

package.json

@@ -73,7 +73,6 @@
     "concurrently": "^8.2.2",
     "contentlayer": "^0.3.4",
     "date-fns": "^3.6.0",
-    "framer-motion": "^12.0.6",
     "lint-staged": "15.2.2",
     "lucide-react": "^0.372.0",
     "motion": "^12.0.8",