Add Hover Effect to Active Project Button

src/components/Banner.jsx

@@ -17,11 +17,9 @@ 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>
+            <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>
         </ContainerPattern>

src/components/CardEffect.jsx

@@ -1,8 +1,9 @@
 import Image from 'next/image'
+import Link from 'next/link'
 
 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">
+        <Link href="#" 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> */}
 
             {/* <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"> */}
@@ -22,6 +23,6 @@ export function CardEffect({heading, content, logo}) {
                     <p className="mt-4 font-mono sm:w-100 w-52">{content}</p>
                 </div>
             </div>
-        </a>
+        </Link>
     )
 }

src/components/TimelineElement.jsx

@@ -11,7 +11,7 @@ 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={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}</Link>
         </li>
     )
 }

src/helper/projects.js

@@ -53,7 +53,7 @@ const projects = [
   {
     name: 'OpenChat',
     description:
-      'a decentralised platform for secure and private messaging and file sharing built on top of blockchain',
+      'A decentralized platform for secure and private messaging and file sharing, built on blockchain technology.',
     link: { href: '#', label: 'OpenChat' },
     logo: DefaultLogo,
   },

src/pages/projects.jsx

@@ -37,7 +37,7 @@ export default function Projects() {
           {/* <h1 className="text-4xl font-mono font-extrabold tracking-tighter text-zinc-800 dark:text-zinc-100">
             Active Projects
           </h1> */}
-          <SectionHeading>Active Projects</SectionHeading>
+          <h1 className='text-2xl text-yellow-400 border rounded-full border-yellow-400 p-4 max-w-[10vw] inline-flex items-center justify-center transition-colors hover:bg-yellow-400 hover:text-black duration:300'>Active Projects</h1>
           <p className='text-zinc-600 dark:text-zinc-400 text-lg font-mono leading-7 mt-3'>The following projects are currently actively maintained and mentors are available!</p>
           <ul role="list" className="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3 mt-12 mb-16">
             {projects.map((project) => (