Shravani - Hover effect added on View 2024 Program Announcements and View 2024 Program Timeline

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/apply.jsx

@@ -6,77 +6,85 @@ import { Container } from '@/components/Container'
 import { TimelineElement } from '@/components/TimelineElement'
 import GSoC from '@/images/logo.svg'
 
-
 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="font-mono text-lg leading-7 text-zinc-600 dark:text-zinc-400">
+            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>
         </div>
-        <Container.Inner className='mt-16'>
+        <Container.Inner className="mt-16">
           <ol className="relative border-l-2 border-gray-200 dark:border-gray-700">
             <TimelineElement
               title="Join us on Discord"
               description="Join the AOSSIE community on Discord and connect with other developers, mentors, and organizers. Our Discord server is a great place to ask questions, share ideas, and get support throughout the Google Summer of Code application process. From proposal writing tips to coding advice, our community is here to help you succeed. Don't go through the process alone, join us on Discord now!"
               button="Join Discord"
-              link='https://discord.com/invite/6mFZ2S846n'
+              link="https://discord.com/invite/6mFZ2S846n"
             />
             <TimelineElement
               title="Start Contributing"
               description="Contribute to the project and make your mark on open-source development with AOSSIE. By making a Pull Request (PR) to one of our existing projects, you'll have the opportunity to showcase your skills and demonstrate your understanding of the project. This will also give you an opportunity to work with the mentors and get familiar with the project before the official GSoC coding period starts. This is a great way to get started and increase your chances of being selected for the program."
               button="Contribute"
-              link='https://gitlab.com/aossie'
+              link="https://gitlab.com/aossie"
             />
             <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."
               button="Choose an Idea"
-              link='/ideas'
+              link="/ideas"
             />
             <TimelineElement
               title="Discuss with Mentors"
               description="By having a discussion with our mentors, you'll have the opportunity to ask questions, get feedback, and fine-tune your proposal. This will ensure that your proposal is well-aligned with the project goals and that you fully understand the expectations for the project. Our mentors will provide guidance and support to help you craft the best possible proposal, increasing your chances of being selected for the program."
-              classCondition='hidden'
+              classCondition="hidden"
             />
             <TimelineElement
               title="Submit Final Application"
               description="By submitting your final application for GSoC, you'll be taking the last step in your journey to becoming a part of our community and contributing to projects that are shaping the future of technology. Make sure to submit your application before the deadline and include all the details correctly that are asked by Google. Wait for the selection process to take place and cross your fingers!"
-              classCondition='hidden'
+              classCondition="hidden"
             />
           </ol>
 
-          <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' />
+          <div className="relative mt-20 block rounded-3xl bg-zinc-400/20 p-8 pb-16 shadow-xl dark:bg-white/70">
+            <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/">
-                <span className="font-mono font-semibold text-center">
+            <div className="mt-10 flex flex-col justify-center gap-6 sm:flex-row">
+              <Link
+                className="group relative order-1 inline-flex items-center overflow-hidden rounded-lg bg-white px-8 py-3 text-black transition-all duration-300 hover:scale-105 hover:shadow-lg focus:outline-none dark:bg-zinc-800 dark:text-white"
+                href="https://summerofcode.withgoogle.com/"
+              >
+                <span className="relative text-center font-mono font-semibold transition-all duration-300 group-hover:tracking-wide group-hover:text-green-500">
                   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">
-                <span className="font-mono font-semibold text-center">
+              <Link
+                className="group relative order-2 inline-flex items-center overflow-hidden rounded-lg bg-white px-8 py-3 text-black transition-all duration-300 hover:scale-105 hover:shadow-lg focus:outline-none dark:bg-zinc-800 dark:text-white"
+                href="https://summerofcode.withgoogle.com/programs/2024"
+              >
+                <span className="relative text-center font-mono font-semibold transition-all duration-300 group-hover:tracking-wide group-hover:text-green-500">
                   View 2024 Program Timeline
                 </span>
               </Link>
             </div>
           </div>
-
         </Container.Inner>
       </Container>
     </>
-    )
+  )
 }