Fix project page

README.md

@@ -43,7 +43,7 @@ You can contribute by:
 
 If you want to get in touch with us first before contributing, you can use:
 
-* [AOSSIE Discord Channel](https://discord.gg/hjUhu33uAn)
+* [AOSSIE Discord Channel](https://discord.gg/xnmAPS7zqB)
 
 
 # **License**

package.json

@@ -18,7 +18,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.2.1",
     "@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",
@@ -49,4 +49,4 @@
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.11"
   }
-}
+}

src/components/Footer.jsx

@@ -3,7 +3,7 @@ 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 { faDiscord, faGithub, faGitlab, faXTwitter } from '@fortawesome/free-brands-svg-icons'
 
 function NavLink({ href, children }) {
   return (
@@ -42,11 +42,11 @@ export function Footer() {
                 <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'>
                   <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.gg/hjUhu33uAn'>
+                <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/xnmAPS7zqB'>
                   <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/pages/apply.jsx

@@ -113,7 +113,7 @@ export default function About() {
                 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.gg/hjUhu33uAn"
+                link="https://discord.gg/xnmAPS7zqB"
               />
               <TimelineElement
                 title="Start Contributing"

src/pages/index.jsx

@@ -10,13 +10,14 @@ import {
   faDiscord,
   faGithub,
   faGitlab,
-  faTwitter,
+  faXTwitter
 } from '@fortawesome/free-brands-svg-icons'
 import { CardEffect } from '@/components/CardEffect'
 import { Banner } from '@/components/Banner'
 import projects from '@/helper/projects'
 import Journey from '@/components/Journey'
 
+
 export default function Home() {
   const [randomProjects, setRandomProjects] = useState(projects)
 
@@ -83,7 +84,7 @@ export default function Home() {
                   <Link
                     aria-label="Join on Discord"
                     className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
-                    href="https://discord.gg/hjUhu33uAn"
+                    href="https://discord.gg/xnmAPS7zqB"
                   >
                     <FontAwesomeIcon icon={faDiscord} size="2xl" />
                   </Link>
@@ -92,7 +93,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 className="mt-12 mx-4 md:mx-0 md:mt-8 text-left ">

src/pages/projects.jsx

@@ -43,6 +43,11 @@ const Cards = () => {
               backdropFilter: 'blur(4px) brightness(100%)',
               display: 'flex',
               flexDirection: 'column',
+              transition: 'transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out',
+              '&:hover': {
+                transform: 'translateY(-5px)',
+                boxShadow: '0px 10px 20px rgba(0,0,0,0.2)',
+              },
             }}
           >
             <CardContent sx={{ flexGrow: 1, textAlign: 'center' }}>
@@ -83,10 +88,15 @@ const Cards = () => {
               </Typography>
             </CardContent>
             <CardActions sx={{ justifyContent: 'center' }}>
-              <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">
+              <a
+                href={project.link.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="relative z-10 mt-6 flex items-center text-md font-semibold font-mono text-zinc-600 dark:text-zinc-200 hover:text-[#00843D] dark:hover:text-yellow-400 transition-colors"
+              >
                 <LinkIcon className="h-6 w-6 flex-none scale-110" />
                 <span className="ml-2">{project.link.label}</span>
-              </p>
+              </a>
             </CardActions>
           </MuiCard>
         </Grid>
@@ -120,8 +130,7 @@ const ProjectSection = () => {
 
 const styles = {
   bannerWrapper: {
-    width: '100vw',
-    marginLeft: 'calc(-50vw + 50%)',
+    width: '100%',
     position: 'relative',
     overflow: 'hidden',
   },