Shravani/#294 Fix button padding

README.md

@@ -5,7 +5,7 @@ This repository contains the assets required to build the **AOSSIE's website**.
 
 Contributions to the project are very much welcomed! Please reach out with ideas for new content or issues with existing content!
 
-Th website is a **Next.js** project using **Tailwind** for styling and design.
+The website is a **Next.js** project using **Tailwind** for styling and design.
 
 # **Getting Started**
 

package.json

@@ -12,11 +12,11 @@
   "license": "ISC",
   "browserslist": "defaults, not ie <= 11",
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.2.1",
-    "@fortawesome/free-brands-svg-icons": "^6.2.1",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
-    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@headlessui/react": "^1.7.2",
     "@mapbox/rehype-prism": "^0.8.0",
     "@mdx-js/loader": "^2.3.0",

src/components/Banner.jsx

@@ -4,28 +4,39 @@ import { Pattern } from '@/components/Pattern';
 
 export function Banner() {
   return (
-    <section aria-label="Apply Banner" className="scroll-mt-14 bg-[#00843D] dark:bg-yellow-400 sm:scroll-mt-32">
+    <section
+      aria-label="Apply Banner"
+      className="scroll-mt-14 bg-[#00843D] dark:bg-yellow-400 sm:scroll-mt-32"
+    >
       <div className="overflow-hidden lg:relative">
-        <ContainerPattern size="md" className="relative grid grid-cols-1 items-end gap-y-12 lg:static lg:grid-cols-2 pt-24 pb-8 sm:py-10">
+        <ContainerPattern
+          size="md"
+          className="relative grid grid-cols-1 items-end gap-y-12 pt-24 pb-8 sm:py-10 lg:static lg:grid-cols-2"
+        >
           <Pattern className="absolute -top-28 left-0 w-full sm:left-3/4 sm:-top-10 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3" />
-          <Pattern className="absolute mt-2 -top-32 left-0 w-full sm:left-3/4 sm:top-36 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3 sm:visible invisible" />
+          <Pattern className="invisible absolute -top-32 left-0 mt-2 w-full sm:visible sm:left-3/4 sm:top-36 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3" />
           <div>
             <h2 className="font-mono text-5xl font-black tracking-tighter text-white dark:text-black sm:w-3/4 sm:text-5xl md:w-2/3 lg:w-auto">
               Launch into AOSSIE&apos;s open-source world through GSoC!
             </h2>
-            <p className="mt-4 text-lg tracking-tighter text-white dark:text-black font-medium font-mono">
-              Learn how to apply for an opportunity to work on open-source projects and gain real-world experience through Google Summer of Code.
+            <p className="mt-4 font-mono text-lg font-medium tracking-tighter text-white dark:text-black">
+              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" legacyBehavior>
-                <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 className="group relative inline-flex items-center overflow-hidden rounded-lg bg-white px-8 py-3 font-mono font-semibold text-black transition-all duration-300 hover:bg-gradient-to-r hover:from-[#00843D] hover:to-green-500 hover:text-white focus:outline-none dark:bg-black dark:text-white dark:hover:from-green-500 dark:hover:to-green-500">
+                  <span className="absolute inset-0 translate-x-full bg-[#FED41E] transition-transform duration-500 ease-out group-hover:translate-x-0 dark:bg-green-500"></span>
+                  <span className="relative z-10">
+                    Apply to GSoC with AOSSIE
+                  </span>
                 </a>
               </Link>
             </div>
           </div>
         </ContainerPattern>
       </div>
     </section>
-  );
+  )
 }

src/components/Card.jsx

@@ -55,7 +55,7 @@ Card.Cta = function CardCta({ children }) {
   return (
     <div
       aria-hidden="true"
-      className="relative font-mono z-10 mt-4 flex items-center text-sm font-semibold text-[#00843D] dark:text-yellow-400"
+      className="relative z-10 mt-4 flex items-center font-mono text-sm font-semibold text-[#00843D] dark:text-yellow-400"
     >
       {children}
       <ChevronRightIcon className="ml-1 h-4 w-4 stroke-current" />

src/components/Footer.jsx

@@ -1,9 +1,10 @@
-import Link from 'next/link'
+import Link from 'next/link';
 
-import { Container } from '@/components/Container'
-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 { Container } from '@/components/Container';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
+import { faDiscord, faGithub, faGitlab} from '@fortawesome/free-brands-svg-icons';
+import { faXTwitter } from '@fortawesome/free-brands-svg-icons';
 
 function NavLink({ href, children }) {
   return (
@@ -30,7 +31,7 @@ export function Footer() {
                 <NavLink href="/apply">Apply</NavLink>
               </div>
               <p className="text-sm text-zinc-400 dark:text-zinc-500 font-mono">
-                &copy; 2016-2023 AOSSIE. All rights reserved.
+                &copy; 2017-2025 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]'>
@@ -46,7 +47,7 @@ export function Footer() {
                   <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' />
+                  <FontAwesomeIcon icon={faXTwitter} size='xl' />
                 </Link>
               </div>
             </div>

src/components/SectionHeading.jsx

@@ -5,14 +5,14 @@ export function SectionHeading({ number, children, className, ...props }) {
     <h2
       className={clsx(
         className,
-        'inline-flex items-center rounded-full py-1 px-4 text-[#00843D] dark:text-yellow-400 ring-1 ring-inset ring-[#00843D] dark:ring-yellow-400'
+        'inline-flex items-center rounded-full py-1 px-6 text-[#00843D] dark:text-yellow-400 ring-1 ring-inset ring-[#00843D] dark:ring-yellow-400'
       )}
       {...props}
     >
       <span className="font-mono text-base font-semibold" aria-hidden="true">
       </span>
       {/* <span className="ml-3 h-3.5 w-px bg-blue-600/20 dark:bg-white" /> */}
-      <span className="ml-3 text-base font-semibold font-mono tracking-tighter">
+      <span className="text-base font-semibold font-mono tracking-tighter">
         {children}
       </span>
     </h2>

src/pages/ideas/index.jsx

@@ -46,16 +46,18 @@ export default function Ideas({ articles }) {
               ))}
             </div>
           </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"
-              href="/ideas/2023"
-            >
-              <span className="text-center font-mono font-semibold">
-                View 2023 Idea List
-              </span>
-            </Link>
-          </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 transition-transform duration-300 hover:scale-105"
+    href="/ideas/2023"
+  >
+    <span className="relative text-center font-mono font-semibold transition-transform duration-300 group-hover:translate-y-[-2px] group-hover:tracking-wider">
+      View 2023 Idea List
+    </span>
+  </Link>
+</div>
+
+
         </Container.Inner>
       </Container>
     </>

src/pages/index.jsx

@@ -10,8 +10,8 @@ import {
   faDiscord,
   faGithub,
   faGitlab,
-  faTwitter,
-} from '@fortawesome/free-brands-svg-icons'
+} from '@fortawesome/free-brands-svg-icons';
+import { faXTwitter } from '@fortawesome/free-brands-svg-icons'
 import { CardEffect } from '@/components/CardEffect'
 import { Banner } from '@/components/Banner'
 import projects from '@/helper/projects'
@@ -84,7 +84,7 @@ export default function Home() {
                   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" />
+                  <FontAwesomeIcon icon={faXTwitter} size="2xl" />
                 </Link>
               </div>
             </div>
@@ -144,7 +144,7 @@ export default function Home() {
           </div>
           <div className="mt-10 flex flex-col items-center gap-6 sm:flex-row sm:justify-evenly sm:gap-0">
             <Container.Inner>
-              <div className="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3">
+              <div className="flex flex-wrap gap-x-8 items-center justify-evenly gap-y-16 sm:flex-wrap lg:flex-row">
                 {randomProjects.map((project) => (
                   <span key={project.name}>
                     <CardEffect

src/pages/projects.jsx

@@ -1,5 +1,6 @@
 import Image from 'next/image'
 import Head from 'next/head'
+import Link from 'next/link'
 
 import { Container } from '@/components/Container'
 import { SectionHeading } from '@/components/SectionHeading'
@@ -21,42 +22,51 @@ export default function Projects() {
   return (
     <>
       <Head>
-        <title>
-          Projects
-        </title>
-        <meta
-          name="description"
-          content="About AOSSIE's Projects"
-        />
+        <title>Projects</title>
+        <meta name="description" content="About AOSSIE's Projects" />
       </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'>Our Projects, where we showcase our tech wizardry and code-slinging skills! <br></br> Our portfolio is a treasure trove of open-source gems, featuring projects in a variety of languages and areas. Take a peek and see how we&apos;re making a difference with our technical spells.</p>
+          <p className="font-mono text-lg leading-7 text-zinc-600 dark:text-zinc-400">
+            Our Projects, where we showcase our tech wizardry and code-slinging
+            skills! <br></br> Our portfolio is a treasure trove of open-source
+            gems, featuring projects in a variety of languages and areas. Take a
+            peek and see how we&apos;re making a difference with our technical
+            spells.
+          </p>
         </div>
-        <div className='mt-16'>
+        <div className="mt-16">
           {/* <h1 className="text-4xl font-mono font-extrabold tracking-tighter text-zinc-800 dark:text-zinc-100">
             Active Projects
           </h1> */}
           <SectionHeading>Active Projects</SectionHeading>
-          <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">
+          <p className="mt-3 font-mono text-lg leading-7 text-zinc-600 dark:text-zinc-400">
+            The following projects are currently actively maintained and mentors
+            are available!
+          </p>
+          <ul
+            role="list"
+            className="mt-12 mb-16 grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3"
+          >
             {projects.map((project) => (
               <Card as="li" key={project.name}>
-                <div className="relative z-10 flex h-20 w-20 items-center justify-center rounded-lg bg-white shadow-md shadow-zinc-800/20 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-white/10 dark:shadow-white/10">
+                <div className="relative z-10 flex h-20 w-20 items-center justify-center rounded-lg bg-white shadow-md shadow-zinc-800/20 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:shadow-white/10 dark:ring-white/10">
                   <Image
                     src={project.logo}
                     alt="Project Logo"
-                    className='p-2'
+                    className="p-2"
                     unoptimized
                   />
                 </div>
-                <h2 className="mt-6 text-2xl font-semibold font-mono text-zinc-800 dark:text-zinc-100">
+                <h2 className="mt-6 font-mono text-2xl font-semibold text-zinc-800 dark:text-zinc-100">
                   <Card.Link href={project.link.href}>{project.name}</Card.Link>
                 </h2>
                 <Card.Description>{project.description}</Card.Description>
-                <p className="relative z-10 mt-6 flex text-md font-semibold font-mono text-zinc-600 transition group-hover:text-[#00843D] dark:group-hover:text-yellow-400 dark:text-zinc-200">
+                <p className="text-md relative z-10 mt-6 flex font-mono font-semibold text-zinc-600 transition group-hover:text-[#00843D] dark:text-zinc-200 dark:group-hover:text-yellow-400">
                   <LinkIcon className="h-6 w-6 flex-none scale-110" />
-                  <span className="ml-2">{project.link.label}</span>
+                  <span className="ml-2">
+                    <Link href={project.link.href}>{project.link.label}</Link>
+                  </span>
                 </p>
               </Card>
             ))}
@@ -91,5 +101,5 @@ export default function Projects() {
         </div>
       </Container>
     </>
-    )
+  )
 }