From 5cb8970396ea409e0b830842571ab2aca8f4b5d2 Mon Sep 17 00:00:00 2001
From: alireza akbarzadeh <devtools95@gmail.com>
Date: Tue, 4 Feb 2025 08:44:25 +0330
Subject: [PATCH] feat: implement logo thicker animation

---
 components/sections/logo-thicker.tsx | 34 ++++++++++++++++++----------
 package.json                         |  1 -
 pnpm-lock.yaml                       | 24 --------------------
 3 files changed, 22 insertions(+), 37 deletions(-)

diff --git a/components/sections/logo-thicker.tsx b/components/sections/logo-thicker.tsx
index fd6ce51..fbabf0c 100644
--- a/components/sections/logo-thicker.tsx
+++ b/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>
diff --git a/package.json b/package.json
index 4929554..a80f145 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f8877cc..280906a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -137,9 +137,6 @@ dependencies:
   date-fns:
     specifier: ^3.6.0
     version: 3.6.0
-  framer-motion:
-    specifier: ^12.0.6
-    version: 12.0.6(react-dom@18.2.0)(react@18.2.0)
   lint-staged:
     specifier: 15.2.2
     version: 15.2.2
@@ -10533,27 +10530,6 @@ packages:
       '@emotion/is-prop-valid': 0.8.8
     dev: false
 
-  /framer-motion@12.0.6(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-LmrXbXF6Vv5WCNmb+O/zn891VPZrH7XbsZgRLBROw6kFiP+iTK49gxTv2Ur3F0Tbw6+sy9BVtSqnWfMUpH+6nA==}
-    peerDependencies:
-      '@emotion/is-prop-valid': '*'
-      react: ^18.0.0 || ^19.0.0
-      react-dom: ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@emotion/is-prop-valid':
-        optional: true
-      react:
-        optional: true
-      react-dom:
-        optional: true
-    dependencies:
-      motion-dom: 12.0.0
-      motion-utils: 12.0.0
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      tslib: 2.6.2
-    dev: false
-
   /framer-motion@12.0.8(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-GLgTyrQhyETMCYMpvSRKuf0t2gzUXsGXGVSFTtpI0rgIby+h1LmBxfl2zcWMZOklY6R15Vcg3diziKeKAtP9UA==}
     peerDependencies: