feat: add orbiting circles for community section on landing page

keploy · Oct 14, 2024 · 82bda3b · 82bda3b
1 parent 6964c60
commit 82bda3b
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 110 deletions.
diff --git 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
@@ -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,24 +123,19 @@ 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}
       link={cardsData[index].link}
       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
diff --git 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