feat(footer): Add motion animation to logo in Footer section

faridvatani · Jul 30, 2024 · 4946160 · 4946160
1 parent d196988
commit 4946160
Showing 1 changed file with 20 additions and 1 deletion.
diff --git a/src/sections/Footer.tsx b/src/sections/Footer.tsx
@@ -1,3 +1,4 @@
+"use client";
 import {
   Logo,
   SocialX,
@@ -7,12 +8,29 @@ import {
   SocialYoutube,
 } from "@/src/assets";
 import Image from "next/image";
+import { motion } from "framer-motion";
 
 export const Footer = () => {
   return (
     <footer className="bg-black text-[#BCBCBC] text-sm py-10 text-center">
       <div className="container">
-        <div className="inline-flex relative before:content-[''] before:top-0 before:bottom-0 before:h-full before:w-full before:blur before:bg-[linear-gradient(to_right,#F87BFF,#FB92CF,#FFDD9B,#C2F0B1,#2FD8FE)] before:absolute">
+        <div className="inline-flex relative">
+          <motion.div
+            className="absolute inset-0 blur-md rounded-full"
+            animate={{
+              rotate: 360,
+            }}
+            transition={{
+              duration: 2,
+              repeat: Infinity,
+              repeatType: "loop",
+              ease: "linear",
+            }}
+            style={{
+              background:
+                "linear-gradient(to right, #F87BFF, #FB92CF, #FFDD9B, #C2F0B1, #2FD8FE)",
+            }}
+          />
           <Image
             src={Logo}
             alt="Prodway SaaS logo"
@@ -21,6 +39,7 @@ export const Footer = () => {
             className="relative"
           />
         </div>
+
         <nav className="flex flex-col md:flex-row md:justify-center gap-6 mt-6">
           <a href="#">About</a>
           <a href="#">Features</a>