fixed the same tab opening issues of links

src/components/Banner.jsx

@@ -17,10 +17,8 @@ export function Banner() {
               Learn how to apply for an opportunity to work on open-source projects and gain real-world experience through Google Summer of Code.
             </p>
             <div className="mt-5">
-              <Link href="/apply">
-                <a className="group relative rounded-lg inline-flex items-center overflow-hidden bg-white dark:bg-black px-8 py-3 text-black dark:text-white focus:outline-none font-mono font-semibold">
-                  Apply to GSoC with AOSSIE
-                </a>
+            <Link href="/apply" className="group relative rounded-lg inline-flex items-center overflow-hidden bg-white dark:bg-black px-8 py-3 text-black dark:text-white focus:outline-none font-mono font-semibold">
+            Apply to GSoC with AOSSIE
               </Link>
             </div>
           </div>

src/components/Card.jsx

@@ -27,9 +27,10 @@ Card.Link = function CardLink({ children, ...props }) {
   return (
     <>
       <div className="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-100 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/80 sm:-inset-x-6 sm:rounded-2xl" />
-      <Link {...props}>
+      <Link {...props} target="_blank" rel="noopener noreferrer">
         <span className="absolute -inset-y-6 -inset-x-4 sm:-inset-x-6 sm:rounded-2xl" />
         <span className="relative z-10">{children}</span>
+
       </Link>
     </>
   )

src/components/CardEffect.jsx

@@ -1,27 +1,34 @@
 import Image from 'next/image'
+import Link from 'next/link'
 
-export function CardEffect({heading, content, logo}) {
+export function CardEffect({ heading, content, logo }) {
     return (
-        <a className="group relative block h-[22rem] max-lg:w-72 max-xl:w-60 w-72 cursor-pointer">
-            {/* <span className="absolute inset-0 border-2 rounded-lg border-dashed border-black dark:border-zinc-300"></span> */}
+      <Link
+        href="#"
+        className="group relative block h-[22rem] w-72 cursor-pointer max-xl:w-60 max-lg:w-72"
+      >
+        {/* <span className="absolute inset-0 border-2 rounded-lg border-dashed border-black dark:border-zinc-300"></span> */}
+
 
-            {/* <div className="relative flex h-full transform items-end border-4 rounded-lg border-black dark:border-zinc-300 bg-transparent dark:bg-transparent transition-transform group-hover:-translate-x-2 group-hover:-translate-y-2"> */}
-            {/* <div className="relative shadow-xl flex h-full justify-center rounded-3xl border-2 border-gray-400 dark:border-gray-200 bg-white dark:bg-gray-800/40 md:p-8 p-8 px-16 lg:py-8 lg:px-0 xl:p-8 transition group-hover:-translate-x-2 group-hover:-translate-y-2 group-hover:shadow-[8px_8px_0_0_#9ca3af] dark:group-hover:shadow-[8px_8px_0_0_#e5e7eb]"> */}
-            <div className="relative shadow-xl flex h-full justify-center rounded-3xl border-2 border-gray-400 dark:border-gray-200 bg-white dark:bg-gray-800 md:p-8 p-8 px-16 lg:py-8 lg:px-0 xl:p-8">
-                <div className="px-8 pb-4 self-center transition-opacity group-hover:absolute group-hover:opacity-0">
-                    <Image
-                        src= {logo}
-                        width={150}
-                        unoptimized
-                        className='mx-auto'
-                        alt='Project Logo'
-                    />
-                    <h2 className="ml-0 leading-9 text-4xl text-center flex font-extrabold justify-center font-mono text-[#00843D] dark:text-yellow-400">{heading}</h2>
-                </div>
-                <div className="absolute self-center pr-6 lg:scale-90 lg:pb-0 lg:pl-3 lg:pr-0 xl:pl-0 md:p-0 md:scale-95 opacity-0 transition-opacity group-hover:relative group-hover:opacity-100 dark:text-zinc-300">
-                    <p className="mt-4 font-mono sm:w-100 w-52">{content}</p>
-                </div>
-            </div>
-        </a>
-    )
-}
+           {/* <div className="relative flex h-full transform items-end border-4 rounded-lg border-black dark:border-zinc-300 bg-transparent dark:bg-transparent transition-transform group-hover:-translate-x-2 group-hover:-translate-y-2"> */}
+      {/* <div className="relative shadow-xl flex h-full justify-center rounded-3xl border-2 border-gray-400 dark:border-gray-200 bg-white dark:bg-gray-800/40 md:p-8 p-8 px-16 lg:py-8 lg:px-0 xl:p-8 transition group-hover:-translate-x-2 group-hover:-translate-y-2 group-hover:shadow-[8px_8px_0_0_#9ca3af] dark:group-hover:shadow-[8px_8px_0_0_#e5e7eb]"> */}
+      <div className="relative flex h-full justify-center rounded-3xl border-2 border-gray-400 bg-white p-8 px-16 shadow-xl dark:border-gray-200 dark:bg-gray-800 md:p-8 lg:py-8 lg:px-0 xl:p-8">
+        <div className="self-center px-8 pb-4 transition-opacity group-hover:absolute group-hover:opacity-0">
+          <Image
+            src={logo}
+            width={150}
+            unoptimized
+            className="mx-auto"
+            alt="Project Logo"
+          />
+          <h2 className="ml-0 flex justify-center text-center font-mono text-4xl font-extrabold leading-9 text-[#00843D] dark:text-yellow-400">
+            {heading}
+          </h2>
+        </div>
+        <div className="absolute self-center pr-6 opacity-0 transition-opacity group-hover:relative group-hover:opacity-100 dark:text-zinc-300 md:scale-95 md:p-0 lg:scale-90 lg:pb-0 lg:pl-3 lg:pr-0 xl:pl-0">
+          <p className="sm:w-100 mt-4 w-52 font-mono">{content}</p>
+        </div>
+      </div>
+    </Link>
+  )
+}

src/components/Container.jsx

@@ -6,8 +6,8 @@ const OuterContainer = forwardRef(function OuterContainer(
   ref
 ) {
   return (
-    <div ref={ref} className={clsx('sm:px-8', className)} {...props}>
-      <div className="mx-auto max-w-7xl lg:px-8">{children}</div>
+    <div ref={ref} className={clsx('sm:px-8  ', className)} {...props}>
+      <div className="mx-auto max-w-7xl lg:px-8 ">{children}</div>
     </div>
   )
 })
@@ -19,10 +19,10 @@ const InnerContainer = forwardRef(function InnerContainer(
   return (
     <div
       ref={ref}
-      className={clsx('relative px-4 sm:px-8 lg:px-12', className)}
+      className={clsx('relative px-4 sm:px-8 lg:px-12 ', className)}
       {...props}
     >
-      <div className="mx-auto max-w-2xl lg:max-w-5xl">{children}</div>
+     <div className="mx-auto max-w-2xl lg:max-w-5xl ">{children}</div>
     </div>
   )
 })
@@ -33,7 +33,7 @@ export const Container = forwardRef(function Container(
 ) {
   return (
     <OuterContainer ref={ref} {...props}>
-      <InnerContainer>{children}</InnerContainer>
+       <InnerContainer >{children}</InnerContainer>
     </OuterContainer>
   )
 })

src/components/Footer.jsx

@@ -33,19 +33,19 @@ export function Footer() {
                 © 2016-2023 AOSSIE. All rights reserved.
               </p>
               <div className="flex gap-6">
-                <Link aria-label="Contact by Mail" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='mailto:[email protected]'>
+                <Link aria-label="Contact by Mail" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='mailto:[email protected]'target="_blank" rel="noopener noreferrer">
                   <FontAwesomeIcon icon={faEnvelope} size='xl' />
                 </Link>
-                <Link aria-label="Follow on GitLab" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://gitlab.com/aossie'>
+                <Link aria-label="Follow on GitLab" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://gitlab.com/aossie'  target="_blank" rel="noopener noreferrer">
                   <FontAwesomeIcon icon={faGitlab} size='xl' />
                 </Link>
-                <Link aria-label="Follow on GitHub" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://github.com/AOSSIE-Org'>
+                <Link aria-label="Follow on GitHub" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://github.com/AOSSIE-Org' target="_blank" rel="noopener noreferrer">
                   <FontAwesomeIcon icon={faGithub} size='xl' />
                 </Link>
-                <Link aria-label="Join on Discord" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://discord.com/invite/6mFZ2S846n'>
+                <Link aria-label="Join on Discord" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://discord.com/invite/6mFZ2S846n' target="_blank" rel="noopener noreferrer">
                   <FontAwesomeIcon icon={faDiscord} size='xl' />
                 </Link>
-                <Link aria-label="Follow on Twitter" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'>
+                <Link aria-label="Follow on Twitter" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org' target="_blank" rel="noopener noreferrer">
                   <FontAwesomeIcon icon={faTwitter} size='xl' />
                 </Link>
               </div>

src/components/TimelineElement.jsx

@@ -1,6 +1,13 @@
-import clsx from "clsx"
+import Link from 'next/link';
+import clsx from 'clsx';
 
 export function TimelineElement({ title, description, button, time, link, classCondition }) {
+     // Log link to check if it's undefined
+     console.log('TimelineElement link:', link);
+
+     // Ensure link is defined and not empty
+     const validLink = link || '#';
+
     return (
         <li className="mb-10 ml-6">
             <span className="absolute flex items-center justify-center w-6 h-6 bg-green-100 rounded-full -left-3 ring-8 ring-white dark:ring-zinc-900 dark:bg-yellow-900 scale-150">
@@ -11,7 +18,9 @@ export function TimelineElement({ title, description, button, time, link, classC
             <h3 className="flex font-mono tracking-tighter items-center mb-1 text-xl font-bold text-gray-900 dark:text-white ml-2">{title}</h3>
             <time className="block mb-2 font-mono text-sm font-normal leading-none text-gray-400 dark:text-gray-500">{time}</time>
             <p className="mb-4 font-mono tracking-tight text-base font-normal text-gray-500 dark:text-gray-400 ml-2">{description}</p>
-            <a href={link} className={clsx(classCondition,"inline-flex font-mono items-center px-4 py-2 text-sm font-bold text-gray-900 bg-white border-2 border-gray-200 rounded-lg hover:bg-gray-100 hover:text-green-700 focus:z-10 focus:ring-2 focus:outline-none focus:ring-gray-300 focus:text-green-700 dark:bg-zinc-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700")}>{button}</a>
+            <Link href={validLink} className={clsx(classCondition, "inline-flex font-mono items-center px-4 py-2 text-sm font-bold text-gray-900 bg-white border-2 border-gray-200 rounded-lg hover:bg-gray-100 hover:text-green-700 focus:z-10 focus:ring-2 focus:outline-none focus:ring-gray-300 focus:text-green-700 dark:bg-zinc-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700")}>
+                {button}
+            </Link>
         </li>
-    )
+    );
 }

src/pages/apply.jsx

@@ -11,17 +11,15 @@ export default function About() {
   return (
     <>
       <Head>
-        <title>
-          Application Timeline
-        </title>
-        <meta
-          name="description"
-          content="How to apply for GSOC"
-        />
+      <title>Application Timeline</title>
+      <meta name="description" content="How to apply for GSOC" />
       </Head>
       <Container className="mt-20 mb-28">
         <div className="mt-5">
-          <p className='text-zinc-600 dark:text-zinc-400 text-lg font-mono leading-7'>Learn how to apply for an opportunity to work on open-source projects and gain real-world experience through Google Summer of Code. <br></br> Our application timeline is your step-by-step guide to becoming a part of our open-source community and contributing to projects that are shaping the future of technology. From submitting your proposal to final evaluations, we&apos;ll walk you through the process every step of the way. Don&apos;t miss this opportunity to be a part of something great and apply now!</p>
+        <p className='text-zinc-600 dark:text-zinc-400 text-lg font-mono leading-7'>
+            Learn how to apply for an opportunity to work on open-source projects and gain real-world experience through Google Summer of Code. <br /> 
+            Our application timeline is your step-by-step guide to becoming a part of our open-source community and contributing to projects that are shaping the future of technology. From submitting your proposal to final evaluations, we&apos;ll walk you through the process every step of the way. Don&apos;t miss this opportunity to be a part of something great and apply now!
+          </p>
         </div>
         <Container.Inner className='mt-16'>
           <ol className="relative border-l-2 border-gray-200 dark:border-gray-700">
@@ -39,7 +37,7 @@ export default function About() {
             />
             <TimelineElement
               title="Write a Draft Application"
-              description="Select an Idea and write a draft application that expands this ideas with your own proposals and showcases how you will execute and complete your project . This is your chance to demonstrate your understanding of the project, your skills, and your passion for open-source development. Our mentors will provide feedback and help you refine your proposal, increasing your chances of being selected for the program."
+              description="Select an Idea and write a draft application that expands this ideas with your own proposals and showcases how you will execute and complete your project. This is your chance to demonstrate your understanding of the project, your skills, and your passion for open-source development. Our mentors will provide feedback and help you refine your proposal, increasing your chances of being selected for the program."
               button="Choose an Idea"
               link='/ideas'
             />
@@ -57,17 +55,14 @@ export default function About() {
 
           <div className="mt-20 relative block rounded-3xl dark:bg-white/70 bg-zinc-400/20 p-8 pb-16 shadow-xl">
             <Image src={GSoC} width={700} className='mx-auto' />
-            {/* <h3 className="text-4xl font-bold">100+</h3> */}
-            {/* <h1 className="mt-4 text-4xl font-mono font-black text-gray-500">
-              2024 Program Timeline
-            </h1> */}
+
             <div className='mt-10 flex justify-center gap-6 flex-col sm:flex-row'>
-              <Link className=" order-1 group relative rounded-lg inline-flex items-center overflow-hidden bg-white dark:bg-zinc-800 px-8 py-3 text-black dark:text-white focus:outline-none" href="https://summerofcode.withgoogle.com/">
+            <Link href="https://summerofcode.withgoogle.com/" className="order-1 group relative rounded-lg inline-flex items-center overflow-hidden bg-white dark:bg-zinc-800 px-8 py-3 text-black dark:text-white focus:outline-none" target="_blank" rel="noopener noreferrer" >
                 <span className="font-mono font-semibold text-center">
                   View 2024 Program Announcements
                 </span>
               </Link>
-              <Link className="order-2 group relative rounded-lg inline-flex items-center overflow-hidden bg-white dark:bg-zinc-800 px-8 py-3 text-black dark:text-white focus:outline-none" href="https://summerofcode.withgoogle.com/programs/2024">
+              <Link href="https://summerofcode.withgoogle.com/programs/2024" className="order-2 group relative rounded-lg inline-flex items-center overflow-hidden bg-white dark:bg-zinc-800 px-8 py-3 text-black dark:text-white focus:outline-none" target="_blank" rel="noopener noreferrer">
                 <span className="font-mono font-semibold text-center">
                   View 2024 Program Timeline
                 </span>

src/pages/ideas/index.jsx

@@ -7,8 +7,8 @@ import { getAllIdeas } from '@/helper/getAllIdeas'
 
 function Article({ article }) {
   return (
-    <article className="mt-5 sm:mt-0 md:grid md:grid-flow-col md:grid-cols-4 md:items-baseline">
-      <Card className="md:col-span-3">
+    <article className="mt-5 sm:mt-0 md:grid md:grid-flow-col md:grid-cols-4 md:items-baseline border border-gray-300 rounded-lg"> {/* Add padding and border here */}
+      <Card className="md:col-span-3 p-3"> {/* Add padding and border here */}
         <Card.Title href={`/ideas/2024/${article.slug}`}>
           {article.title}
         </Card.Title>
@@ -26,12 +26,12 @@ export default function Ideas({ articles }) {
         <title>Idea List</title>
         <meta name="description" content="Idea List for GSOC" />
       </Head>
-      <Container className="mt-20 mb-28">
-        <div className="">
+      <Container className="mt-20 mb-28 p-4 "> {/* Add padding and border here */}
+        <div className="p-4 "> {/* Add padding and border here */}
           <p className="font-mono text-lg leading-7 text-zinc-600 dark:text-zinc-400">
             Explore the world of open-source possibilities with AOSSIE&apos;s{' '}
             <b>Idea List</b>. As part of Google Summer of Code, we offer
-            a unique opportunity for developers to explore new ideas,  a wide
+            a unique opportunity for developers to explore new ideas, a wide
             variety of projects for developers to choose from and contribute to.
             From developing new features to fixing critical bugs, our idea list
             is your go-to destination for finding your next big project and
@@ -48,7 +48,7 @@ export default function Ideas({ articles }) {
           </div>
           <div className="mt-16 text-center">
             <Link
-              className="group order-2 mx-auto items-center overflow-hidden rounded-lg bg-zinc-800 px-8 py-3 text-white focus:outline-none dark:bg-white dark:text-black"
+               className="group order-2 mx-auto items-center overflow-hidden rounded-lg bg-zinc-800 px-8 py-3 text-white focus:outline-none dark:bg-white dark:text-black border border-gray-300 p-4"
               href="/ideas/2023"
             >
               <span className="text-center font-mono font-semibold">