Feature : added-club-links-for-redirection

components/ChapterSection.tsx

@@ -3,6 +3,7 @@
 import { Chapters } from "@/data";
 import { PinContainer } from "./ui/Pin";
 import Image from "next/image";
+import Link from "next/link";
 
 const ChapterSection = () => {
   return (
@@ -13,12 +14,14 @@ const ChapterSection = () => {
       <div className='flex flex-wrap items-center justify-center p-4 gap-20 mt-10'>
         {Chapters.map((item, idx) => (
           <div className='h-auto w-64 flex items-center justify-center' key={idx}>
-            <PinContainer title={item.title} href={item.link}>
+            <Link href={item.link} target="_blank">
+              <PinContainer title={item.title} href={item.link}>
               <div
                 className={`flex basis-full flex-col p-4 tracking-tight text-slate-100/50 sm:basis-1/2 ${
                   idx == 1 ? "md:w-[18rem] md:h-[22rem] w-[16rem] h-[20rem]" : " w-[16rem] h-[20rem]"
                 }`}
               >
+
                 <h3 className='max-w-xs !pb-2 !m-0 font-normal  text-base text-slate-100'>{item.title}</h3>
                 <div className='text-sm !m-0 !p-0 font-normal'>
                   <span className='text-slate-500 '>{item.des}</span>
@@ -34,7 +37,9 @@ const ChapterSection = () => {
                 </div>
               </div>
             </PinContainer>
+            </Link>
           </div>
+
         ))}
       </div>
     </div>

components/ui/Pin.tsx

@@ -50,6 +50,7 @@ export const PinContainer = ({
         </div>
       </div>
       <PinPerspective title={title} href={href} />
+
     </div>
   );
 };
@@ -60,15 +61,14 @@ export const PinPerspective = ({ title, href }: { title?: string; href?: string
     <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
-            href={href}
-            target={"_blank"}
+          <div
+
             className='relative flex  items-center z-10 rounded-full bg-black-100 py-1 px-4 ring-1 ring-white/10 '
           >
             <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>
-          </a>
+          </div>
         </div>
 
         <div

data/index.ts

@@ -94,7 +94,7 @@ export const Chapters = [
     des: "GDSC ABESEC fosters learning, collaboration, and personal growth, exploring new technologies and exchanging knowledge for success.",
     img: "/gdscThumbnail.png",
     iconLists: ["/re.svg", "/tail.svg", "/ts.svg", "/three.svg", "/c.svg"],
-    link: "https://www.instagram.com/gdsc.abesec/",
+    link: "https://www.instagram.com/gdg.abesec/",
   },
 ];