feat/adding-orbiting-circle-animation

components/community.tsx

@@ -7,6 +7,7 @@ import TwitterSvg from "@/public/images/social/twitter.svg";
 import SlackSvg from "@/public/images/social/slack.svg";
 import YoutubeSvg from "@/public/images/social/youtube.svg";
 import LinkedinSvg from "@/public/images/social/linkedin.svg";
+import { OrbitingCircles } from "./magicui/orbitingcircles";
 import Link from "next/link";
 
 type cardSurrondStyle = {
@@ -27,6 +28,9 @@ type CardData = {
   svgIcon: string;
   platformName: string;
   description: string;
+  radius: number;
+  duration: number;
+  delay: number;
 };
 
 const createCircleStyles = (
@@ -59,7 +63,7 @@ function SocialLinkCard({
       rel="noopener noreferrer"
       style={showExtraStyle ? { ...style } : {}}
       className={`${
-        showExtraStyle ? "circle" : "w-3/4 mx-auto mb-5"
+        showExtraStyle ? "circle" : "w-[250px]  mx-auto mb-5"
       } z-10 bg-white shadow-md rounded-lg border border-accent-500 p-4 hover:shadow-xl flex items-center justify-start group transition duration-300`}
     >
       <div className="w-12 h-12 text-center sm:mr-2">
@@ -83,30 +87,46 @@ export default function Community() {
       svgIcon: TwitterSvg,
       platformName: "Twitter",
       description: "Let's talk about regression testing!",
+      radius: 300,
+      duration: 20,
+      delay: 1,
+      // reverse: true,
     },
     {
       link: "https://github.com/keploy/keploy",
       svgIcon: GithubSvg,
       platformName: "Github",
       description: "Contribute code to Keploy or report a bug",
+      radius: 300,
+      duration: 20,
+      delay: 5,
     },
     {
       link: "https://keploy.slack.com/join/shared_invite/zt-2poflru6f-_VAuvQfCBT8fDWv1WwSbkw",
       svgIcon: SlackSvg,
       platformName: "Slack",
       description: "Connect and chat with other Keploy users",
+      radius: 300,
+      duration: 20,
+      delay: 9,
     },
     {
       link: "https://www.youtube.com/channel/UC6OTg7F4o0WkmNtSoob34lg",
       svgIcon: YoutubeSvg,
       platformName: "Youtube",
       description: "Learn with Keploy team and community videos",
+      radius: 300,
+      duration: 20,
+      delay: 13,
     },
     {
       link: "https://www.linkedin.com/company/74471957",
       svgIcon: LinkedinSvg,
       platformName: "Linkedin",
       description: "Follow us and connect with other Keploy engineers!",
+      radius: 300,
+      duration: 20,
+      delay: 17,
     },
   ];
 
@@ -147,14 +167,35 @@ export default function Community() {
       </div>
 
       <div className="mx-auto w-fit">
-        <div className="ciclegraph hidden md:block relative w-[600px] h-[600px] mx-auto mt-24 mb-24">
-          {cardsSurround}
-          <Image
-            src={CommunityBunny}
-            alt="Image"
-            className="absolute -translate-x-1/2 -translate-y-1/2 bg-white top-1/2 left-1/2"
+
+      <div className="relative hidden md:block m-auto h-[600px] w-[600px]  mt-24 mb-24 items-center justify-center bg-background">
+       <div>
+        <Image src={CommunityBunny} alt="Image" className="absolute pl-5 -translate-x-1/2 translate-y-1/5 left-1/2 bg-background max-w-2xl"></Image>
+        </div>
+      <div className="flex justify-center items-center">
+      {cardsData.map((card, index) => (
+        <OrbitingCircles
+          key={index}
+          className="size-[50px] border-none bg-transparent top-72 z-10"
+          duration={card.duration}
+          delay={card.delay}
+          radius={card.radius}
+        >
+        <div>
+        <SocialLinkCard
+            key={index}
+            link={cardsData[index].link}
+            svgIcon={cardsData[index].svgIcon}
+            platformName={cardsData[index].platformName}
+            description={cardsData[index].description}
           />
         </div>
+
+        </OrbitingCircles>
+      ))}
+      </div>
+      </div>
+
         <div className="md:hidden">
           <Image src={CommunityBunny} alt="Image" className="w-3/4 mx-auto" />
           {cardsList}

components/magicui/orbitingcircles.tsx

@@ -0,0 +1,58 @@
+import { cn } from "@/lib/utils";
+
+export interface OrbitingCirclesProps {
+  className?: string;
+  children?: React.ReactNode;
+  reverse?: boolean;
+  duration?: number;
+  delay?: number;
+  radius?: number;
+  path?: boolean;
+}
+
+export function OrbitingCircles({
+  className,
+  children,
+  reverse,
+  duration = 20,
+  delay = 10,
+  radius = 50,
+  path = true,
+}: OrbitingCirclesProps) {
+  return (
+    <>
+      {path && (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.1"
+          className="pointer-events-none absolute inset-0 size-full"
+        >
+          <circle
+            className="stroke-black stroke-2 dark:stroke-black/40 invisible"
+            cx="50%"
+            cy="50%"
+            r={radius}
+            fill="none"
+          />
+        </svg>
+      )}
+
+      <div
+        style={
+          {
+            "--duration": duration,
+            "--radius": radius,
+            "--delay": -delay,
+          } as React.CSSProperties
+        }
+        className={cn(
+          "absolute flex size-full transform-gpu animate-orbit items-center justify-center rounded-full border bg-black/10 [animation-delay:calc(var(--delay)*1000ms)] dark:bg-white/10",
+          { "[animation-direction:reverse]": reverse },
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </>
+  );
+}

tailwind.config.js

@@ -11,6 +11,7 @@ module.exports = {
         marquee: "marquee var(--duration) linear infinite",
         "marquee-vertical": "marquee-vertical var(--duration) linear infinite",
         "background-position-spin": "background-position-spin 3000ms infinite alternate",
+        orbit: "orbit calc(var(--duration)*1s) linear infinite",
       },
       keyframes: {
         marquee: {
@@ -25,7 +26,17 @@ module.exports = {
           "0%": { backgroundPosition: "top center" },
           "100%": { backgroundPosition: "bottom center" },
         },
+        orbit: {
+          "0%": {
+            transform:
+              "rotate(0deg) translateY(calc(var(--radius) * 1px)) rotate(0deg)",
+          },
+          "100%": {
+            transform:
+              "rotate(360deg) translateY(calc(var(--radius) * 1px)) rotate(-360deg)",
+          },
       },
+    },
       colors: {
         // Brand Palette
         // Primary headings, primary buttons, main elements
@@ -242,4 +253,4 @@ module.exports = {
     },
   },
   plugins: [require("@tailwindcss/forms")],
-};
+}