Merge pull request #15 from lassiecoder/staging

fix: 3D pin component issue

Author: lassiecoder

src/app/pages/articles.tsx

@@ -63,7 +63,7 @@ const pinData = [
   },
   {
     techstack: "@techscoop/lassiecoder",
-    href: "hhttps://techscoop.hashnode.dev/using-deepseek-r1-for-free-in-visual-studio-code",
+    href: "https://techscoop.hashnode.dev/using-deepseek-r1-for-free-in-visual-studio-code",
     heading: "Using DeepSeek R1 for Free in VSCode",
     description:
       "DeepSeek R1 - an open-source AI tool for code generation, seamlessly integrating with VSCode to enhance developer productivity and workflow efficiency."

src/components/ui/3d-pin.tsx

@@ -65,7 +65,13 @@ export const PinPerspective = ({
   href?: string;
 }) => {
   return (
-    <motion.div className="pointer-events-none  w-96 h-80 flex items-center justify-center opacity-0 group-hover/pin:opacity-100 z-[60] transition duration-500">
+    // <motion.div className="pointer-events-none  w-96 h-80 flex items-center justify-center opacity-0 group-hover/pin:opacity-100 z-[60] transition duration-500">
+    <motion.div
+      {...{
+        className:
+          "pointer-events-none w-96 h-80 flex items-center justify-center opacity-0 group-hover/pin:opacity-100 z-[60] transition duration-500"
+      }}
+    >
       <div className=" w-full h-full -mt-7 flex-none  inset-0">
         <div className="absolute top-0 inset-x-0  flex justify-center">
           <a
@@ -107,7 +113,10 @@ export const PinPerspective = ({
                 repeat: Infinity,
                 delay: 0
               }}
-              className="absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]"
+              {...{
+                className:
+                  "absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]"
+              }}
             ></motion.div>
             <motion.div
               initial={{
@@ -127,7 +136,10 @@ export const PinPerspective = ({
                 repeat: Infinity,
                 delay: 2
               }}
-              className="absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]"
+              {...{
+                className:
+                  "absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]"
+              }}
             ></motion.div>
             <motion.div
               initial={{
@@ -147,16 +159,39 @@ export const PinPerspective = ({
                 repeat: Infinity,
                 delay: 4
               }}
-              className="absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]"
+              {...{
+                className:
+                  "absolute left-1/2 top-1/2  h-[11.25rem] w-[11.25rem] rounded-[50%] bg-sky-500/[0.08] shadow-[0_8px_16px_rgb(0_0_0/0.4)]"
+              }}
             ></motion.div>
           </>
         </div>
 
         <>
-          <motion.div className="absolute right-1/2 bottom-1/2 bg-gradient-to-b from-transparent to-cyan-500 translate-y-[14px] w-px h-20 group-hover/pin:h-40 blur-[2px]" />
-          <motion.div className="absolute right-1/2 bottom-1/2 bg-gradient-to-b from-transparent to-cyan-500 translate-y-[14px] w-px h-20 group-hover/pin:h-40  " />
-          <motion.div className="absolute right-1/2 translate-x-[1.5px] bottom-1/2 bg-cyan-600 translate-y-[14px] w-[4px] h-[4px] rounded-full z-40 blur-[3px]" />
-          <motion.div className="absolute right-1/2 translate-x-[0.5px] bottom-1/2 bg-cyan-300 translate-y-[14px] w-[2px] h-[2px] rounded-full z-40 " />
+          <motion.div
+            {...{
+              className:
+                "absolute right-1/2 bottom-1/2 bg-gradient-to-b from-transparent to-cyan-500 translate-y-[14px] w-px h-20 group-hover/pin:h-40 blur-[2px]"
+            }}
+          />
+          <motion.div
+            {...{
+              className:
+                "absolute right-1/2 bottom-1/2 bg-gradient-to-b from-transparent to-cyan-500 translate-y-[14px] w-px h-20 group-hover/pin:h-40  "
+            }}
+          />
+          <motion.div
+            {...{
+              className:
+                "absolute right-1/2 translate-x-[1.5px] bottom-1/2 bg-cyan-600 translate-y-[14px] w-[4px] h-[4px] rounded-full z-40 blur-[3px]"
+            }}
+          />
+          <motion.div
+            {...{
+              className:
+                "absolute right-1/2 translate-x-[0.5px] bottom-1/2 bg-cyan-300 translate-y-[14px] w-[2px] h-[2px] rounded-full z-40 "
+            }}
+          />
         </>
       </div>
     </motion.div>