fix(): Fixing minor issue with the 3d pin

Author: ar1603

src/components/3dPin/3dPin.tsx

@@ -1,9 +1,10 @@
 'use client';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { motion } from 'framer-motion';
-import { Link } from 'react-router-dom';
+import { useCursor } from '../Cursor';
+import { Box, Link } from '@chakra-ui/react';
 
-const PinContainer = ({
+const ThreeDPin = ({
   children,
   title,
   href,
@@ -28,7 +29,8 @@ const PinContainer = ({
       className={'relative group/pin z-50  cursor-pointer'}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      to={href ?? '/'}
+      href={href}
+      isExternal
     >
       <div
         style={{
@@ -51,31 +53,26 @@ const PinContainer = ({
   );
 };
 
-export const PinPerspective = ({
-  title,
-  href,
-}: {
-  title?: string;
-  href?: string;
-}) => {
+const PinPerspective = ({ title, href }: { title?: string; 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-96 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
             href={href}
-            target={'_blank'}
             className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-0.5 px-4 ring-1 ring-white/10 "
-            rel="noreferrer"
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={() => {
+              console.log('onClick');
+            }}
           >
             <span className="relative z-20 text-white text-xs font-bold inline-block py-0.5">
               {title}
             </span>
-
-            <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover/btn:opacity-40"></span>
+            <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-violet-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover/btn:opacity-40"></span>
           </a>
         </div>
-
         <div
           style={{
             perspective: '1000px',
@@ -158,4 +155,4 @@ export const PinPerspective = ({
   );
 };
 
-export default PinContainer;
+export default ThreeDPin;

src/screens/mainFlow/contents/Contents.tsx

@@ -1,5 +1,5 @@
 import { Box, Text } from '@chakra-ui/react';
-import { Card } from '@components';
+import { Card, ThreeDPin } from '@components';
 
 const Contents = () => {
   return (
@@ -15,12 +15,14 @@ const Contents = () => {
       bg={'black'}
       color={'white'}
     >
-      <Card
-        centerText="Hourcoding"
-        titleText="Hourcoding.com"
-        subtitleText="A blog about coding and programming"
-        chipText="React, Next.js, TypeScript, Chakra UI"
-      />
+      <ThreeDPin title="Hourcoding.com" href="https://hourcoding.com">
+        <Card
+          centerText="Hourcoding"
+          titleText="Hourcoding.com"
+          subtitleText="A blog about coding and programming"
+          chipText="React, Next.js, TypeScript, Chakra UI"
+        />
+      </ThreeDPin>
     </Box>
   );
 };