Feature/projects card zoom

src/components/Footer.jsx

@@ -1,9 +1,10 @@
 import Link from 'next/link'
 
 import { Container } from '@/components/Container'
+import { XIcon } from '@/components/XIcon'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
-import { faDiscord, faGithub, faGitlab, faTwitter } from '@fortawesome/free-brands-svg-icons'
+import { faDiscord, faGithub, faGitlab } from '@fortawesome/free-brands-svg-icons'
 
 function NavLink({ href, children }) {
   return (
@@ -45,8 +46,8 @@ export function Footer() {
                 <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.gg/hjUhu33uAn'>
                   <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'>
-                  <FontAwesomeIcon icon={faTwitter} size='xl' />
+                <Link aria-label="Follow on X (Twitter)" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'>
+                  <XIcon className="h-6 w-6" />
                 </Link>
               </div>
             </div>

src/components/XIcon.jsx

@@ -0,0 +1,13 @@
+export function XIcon({ className }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      className={className}
+      fill="currentColor"
+    >
+      <path d="M4 3.5h3.1L12 10.25 16.6 3.5H20l-6 8.5 6.5 8.5h-3.6L12 13.75 7 20.5H4l6-8.5L4 3.5z" />
+    </svg>
+  )
+}
+

src/pages/apply.jsx

@@ -142,7 +142,10 @@ 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} alt='gsoc' width={500} height={350} className="mx-auto" />
               <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
+                  className="order-1 group relative inline-flex items-center overflow-hidden rounded-lg bg-white px-8 py-3 font-mono font-semibold text-[#00843D] shadow-sm ring-1 ring-black/10 transition hover:bg-[#00843D] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#00843D] focus-visible:ring-offset-2 dark:bg-black dark:text-yellow-400 dark:ring-white/15 dark:hover:bg-yellow-400 dark:hover:text-black dark:focus-visible:ring-yellow-400 dark:focus-visible:ring-offset-2 dark:focus-visible:ring-offset-black"
+                  href="https://summerofcode.withgoogle.com/"
+                >
                   <span className="font-mono font-semibold text-center">
                     View GSoC Program Announcements
                   </span>

src/pages/ideas/2024/index.jsx

@@ -14,7 +14,7 @@ function Article({ article }) {
     return (
         <Grid item xs={12} sm={6} md={4}>
             <MuiCard
-                className="dark:bg-[#2A2A2A] dark:border-white"
+                className="dark:bg-[#2A2A2A] dark:border-white transform transition-transform duration-200 hover:scale-105"
                 sx={{
                     height: 350,
                     borderRadius: 2,
@@ -102,7 +102,7 @@ export default function Ideas({ articles }) {
                     <div className="text-center mt-16">
                         <Link
                             href="/ideas"
-                            className="mx-auto group rounded-lg items-center overflow-hidden bg-zinc-800 dark:bg-white px-8 py-3 text-white focus:outline-none dark:text-black"
+                            className="group mx-auto inline-flex items-center overflow-hidden rounded-lg bg-white px-8 py-3 font-mono font-semibold text-[#00843D] shadow-sm ring-1 ring-black/10 transition hover:bg-[#00843D] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#00843D] focus-visible:ring-offset-2 dark:bg-black dark:text-yellow-400 dark:ring-white/15 dark:hover:bg-yellow-400 dark:hover:text-black dark:focus-visible:ring-yellow-400 dark:focus-visible:ring-offset-2 dark:focus-visible:ring-offset-black"
                         >
                             <span className="font-mono font-semibold">Go Back</span>
                         </Link>

src/pages/ideas/index.jsx

@@ -14,7 +14,7 @@ function Article({ article }) {
   return (
     <Grid item xs={12} sm={6} md={4}>
       <MuiCard
-        className="dark:bg-[#2A2A2A] dark:border-white"
+        className="dark:bg-[#2A2A2A] dark:border-white transform transition-transform duration-200 hover:scale-105"
         sx={{
           height: 350,
           borderRadius: 2,
@@ -120,10 +120,10 @@ 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 inline-flex items-center overflow-hidden rounded-lg bg-white px-8 py-3 font-mono font-semibold text-[#00843D] shadow-sm ring-1 ring-black/10 transition hover:bg-[#00843D] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#00843D] focus-visible:ring-offset-2 dark:bg-black dark:text-yellow-400 dark:ring-white/15 dark:hover:bg-yellow-400 dark:hover:text-black dark:focus-visible:ring-yellow-400 dark:focus-visible:ring-offset-2 dark:focus-visible:ring-offset-black"
               href="/ideas/2024"
             >
-              <span className="text-center font-mono font-semibold">
+              <span className="text-center">
                 View 2024 Idea List
               </span>
             </Link>

src/pages/index.jsx

@@ -4,13 +4,13 @@ import Image from 'next/image'
 import { useState, useEffect } from 'react'
 
 import { Container } from '@/components/Container'
+import { XIcon } from '@/components/XIcon'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
 import {
   faDiscord,
   faGithub,
   faGitlab,
-  faTwitter,
 } from '@fortawesome/free-brands-svg-icons'
 import { CardEffect } from '@/components/CardEffect'
 import { Banner } from '@/components/Banner'
@@ -88,11 +88,11 @@ export default function Home() {
                     <FontAwesomeIcon icon={faDiscord} size="2xl" />
                   </Link>
                   <Link
-                    aria-label="Follow on Twitter"
+                    aria-label="Follow on X (Twitter)"
                     className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
                     href="https://twitter.com/aossie_org"
                   >
-                    <FontAwesomeIcon icon={faTwitter} size="2xl" />
+                    <XIcon className="h-7 w-7" />
                   </Link>
                 </div>
                 <div className="mt-12 mx-4 md:mx-0 md:mt-8 text-left ">

src/pages/projects.jsx

@@ -33,7 +33,7 @@ const Cards = () => {
       {projects.map((project, index) => (
         <Grid item xs={12} sm={6} md={4} key={index}>
           <MuiCard
-            className='dark:bg-[#2A2A2A] dark:border-white'
+            className='dark:bg-[#2A2A2A] dark:border-white transform transition-transform duration-200 hover:scale-105'
             sx={{
               height: 400,
               borderRadius: 2,