From 6964c60a27d3c99ce9381875daff55b5f67a9d87 Mon Sep 17 00:00:00 2001
From: techmannih <manishchaudharyttt@gmail.com>
Date: Wed, 9 Oct 2024 11:37:55 +0530
Subject: [PATCH 1/2] feat: add orbiting circles for community section on
 landing page

Signed-off-by: techmannih <manishchaudharyttt@gmail.com>
---
 components/community.tsx           | 52 ++++++++++++++++++++++-----
 components/magicui/orbitcircle.tsx | 57 ++++++++++++++++++++++++++++++
 tailwind.config.js                 | 11 ++++++
 3 files changed, 111 insertions(+), 9 deletions(-)
 create mode 100644 components/magicui/orbitcircle.tsx

diff --git a/components/community.tsx b/components/community.tsx
index 051f2ea5..953ca4e6 100644
--- a/components/community.tsx
+++ b/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/orbitcircle";
 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-[280px] 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,45 @@ export default function Community() {
       svgIcon: TwitterSvg,
       platformName: "Twitter",
       description: "Let's talk about regression testing!",
+      radius: 300,
+      duration: 20,
+      delay: 1,
     },
     {
       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://join.slack.com/t/keploy/shared_invite/zt-2dno1yetd-Ec3el~tTwHYIHgGI0jPe7A",
       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,
     },
   ];
 
@@ -139,7 +158,7 @@ export default function Community() {
   ));
 
   return (
-    <section className="relative py-8 ">
+    <section className="relative py-8">
       <div className="max-w-3xl mx-auto text-center">
         <h2 className="h2 text-secondary-300">
           🐰 Join the Keploy community ✨
@@ -147,13 +166,28 @@ 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" />
+          </div>
+          <div className="flex justify-center items-center">
+            {cardsData.map((card, index) => (
+              <OrbitingCircles
+                key={index}
+                className="size-[60px] border-none bg-transparent top-72 z-10"
+                duration={card.duration}
+                delay={card.delay}
+                radius={card.radius}
+              >
+                <SocialLinkCard
+                  link={card.link}
+                  svgIcon={card.svgIcon}
+                  platformName={card.platformName}
+                  description={card.description}
+                />
+              </OrbitingCircles>
+            ))}
+          </div>
         </div>
         <div className="md:hidden">
           <Image src={CommunityBunny} alt="Image" className="w-3/4 mx-auto" />
diff --git a/components/magicui/orbitcircle.tsx b/components/magicui/orbitcircle.tsx
new file mode 100644
index 00000000..4bcf1e6c
--- /dev/null
+++ b/components/magicui/orbitcircle.tsx
@@ -0,0 +1,57 @@
+import React from 'react'; // Ensure you have this import
+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>
+    </>
+  );
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 3a89ec0a..60f9e429 100644
--- a/tailwind.config.js
+++ b/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

From 8aff90548f5ae0bb07e4896298dc435b7825eadd Mon Sep 17 00:00:00 2001
From: techmannih <manishchaudharyttt@gmail.com>
Date: Mon, 14 Oct 2024 23:30:23 +0530
Subject: [PATCH 2/2] feat: add orbiting circles for community section on
 landing page

Signed-off-by: techmannih <manishchaudharyttt@gmail.com>
---
 components/community.css           |  8 ++++
 components/community.tsx           | 63 ++++++++++--------------------
 components/magicui/orbitcircle.tsx | 57 ---------------------------
 tailwind.config.js                 | 11 ------
 4 files changed, 29 insertions(+), 110 deletions(-)
 delete mode 100644 components/magicui/orbitcircle.tsx

diff --git a/components/community.css b/components/community.css
index 571d6ef6..490eb45f 100644
--- a/components/community.css
+++ b/components/community.css
@@ -15,3 +15,11 @@
   margin: calc(-100px / 2);
   width: 250px;
 }
+@keyframes orbit {
+  0% {
+    transform: rotate(0deg) translate(300px) rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg) translate(300px) rotate(-360deg);
+  }
+}
diff --git a/components/community.tsx b/components/community.tsx
index 953ca4e6..1827a0be 100644
--- a/components/community.tsx
+++ b/components/community.tsx
@@ -1,3 +1,4 @@
+
 import React from "react";
 import "./community.css";
 import Image from "next/image";
@@ -7,11 +8,12 @@ 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/orbitcircle";
 import Link from "next/link";
 
 type cardSurrondStyle = {
   transform: string;
+  animation?: string;
+  animationDelay?: string; 
 };
 
 type CardProps = {
@@ -30,21 +32,21 @@ type CardData = {
   description: string;
   radius: number;
   duration: number;
-  delay: number;
 };
 
 const createCircleStyles = (
   totalCircles: number,
   index: number,
-  containerWidth: number
+  radius: number,
 ): cardSurrondStyle => {
-  const angle = 360 - 90;
-  const dangle = 360 / totalCircles;
-  const currentAngle = angle + dangle * index;
+  const angle = 360 / totalCircles;
+  const currentAngle = angle * index;
+  console.log(index, currentAngle);
+
   return {
-    transform: `rotate(${currentAngle}deg) translate(${
-      containerWidth / 2
-    }px) rotate(-${currentAngle}deg)`,
+    transform: `rotate(${currentAngle}deg) translate(${radius}px) rotate(-${currentAngle}deg)`,
+    animation: `orbit 20s linear infinite`,
+    animationDelay: `-${(index * 20) / totalCircles}s`,
   };
 };
 
@@ -63,7 +65,7 @@ function SocialLinkCard({
       rel="noopener noreferrer"
       style={showExtraStyle ? { ...style } : {}}
       className={`${
-        showExtraStyle ? "circle" : "w-[280px] mx-auto mb-5"
+        showExtraStyle ? "circle" : "w-3/4 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">
@@ -89,7 +91,6 @@ export default function Community() {
       description: "Let's talk about regression testing!",
       radius: 300,
       duration: 20,
-      delay: 1,
     },
     {
       link: "https://github.com/keploy/keploy",
@@ -98,7 +99,6 @@ export default function Community() {
       description: "Contribute code to Keploy or report a bug",
       radius: 300,
       duration: 20,
-      delay: 5,
     },
     {
       link: "https://join.slack.com/t/keploy/shared_invite/zt-2dno1yetd-Ec3el~tTwHYIHgGI0jPe7A",
@@ -107,7 +107,6 @@ export default function Community() {
       description: "Connect and chat with other Keploy users",
       radius: 300,
       duration: 20,
-      delay: 9,
     },
     {
       link: "https://www.youtube.com/channel/UC6OTg7F4o0WkmNtSoob34lg",
@@ -116,7 +115,6 @@ export default function Community() {
       description: "Learn with Keploy team and community videos",
       radius: 300,
       duration: 20,
-      delay: 13,
     },
     {
       link: "https://www.linkedin.com/company/74471957",
@@ -125,16 +123,11 @@ export default function Community() {
       description: "Follow us and connect with other Keploy engineers!",
       radius: 300,
       duration: 20,
-      delay: 17,
     },
   ];
 
-  // Define the number of circles you want to render
   const totalCircles = cardsData.length;
 
-  // You can adjust this width as per your requirement or dynamically based on the parent component's state
-  const containerWidth = 600;
-
   const cardsSurround = Array.from({ length: totalCircles }, (_, index) => (
     <SocialLinkCard
       key={index}
@@ -142,7 +135,7 @@ export default function Community() {
       svgIcon={cardsData[index].svgIcon}
       platformName={cardsData[index].platformName}
       description={cardsData[index].description}
-      style={createCircleStyles(totalCircles, index, containerWidth)}
+      style={createCircleStyles(totalCircles, index, cardsData[index].radius)}
       showExtraStyle={true}
     />
   ));
@@ -166,28 +159,13 @@ export default function Community() {
       </div>
 
       <div className="mx-auto w-fit">
-        <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" />
-          </div>
-          <div className="flex justify-center items-center">
-            {cardsData.map((card, index) => (
-              <OrbitingCircles
-                key={index}
-                className="size-[60px] border-none bg-transparent top-72 z-10"
-                duration={card.duration}
-                delay={card.delay}
-                radius={card.radius}
-              >
-                <SocialLinkCard
-                  link={card.link}
-                  svgIcon={card.svgIcon}
-                  platformName={card.platformName}
-                  description={card.description}
-                />
-              </OrbitingCircles>
-            ))}
-          </div>
+        <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>
         <div className="md:hidden">
           <Image src={CommunityBunny} alt="Image" className="w-3/4 mx-auto" />
@@ -197,3 +175,4 @@ export default function Community() {
     </section>
   );
 }
+
diff --git a/components/magicui/orbitcircle.tsx b/components/magicui/orbitcircle.tsx
deleted file mode 100644
index 4bcf1e6c..00000000
--- a/components/magicui/orbitcircle.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react'; // Ensure you have this import
-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>
-    </>
-  );
-}
diff --git a/tailwind.config.js b/tailwind.config.js
index 60f9e429..b2b38e3e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,7 +11,6 @@ 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: {
@@ -26,16 +25,6 @@ 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