#291, #294, #219, #235, and #264 these issues are now fixed please evaluate them.

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

@@ -1,5 +1,5 @@
-import Link from 'next/link'
-import clsx from 'clsx'
+import Link from 'next/link';
+import clsx from 'clsx';
 
 function ChevronRightIcon(props) {
   return (
@@ -11,57 +11,81 @@ function ChevronRightIcon(props) {
         strokeLinejoin="round"
       />
     </svg>
-  )
+  );
 }
+
 export function Card({ as: Component = 'div', className, children }) {
   return (
     <Component
       className={clsx(className, 'group relative flex flex-col items-start')}
+      style={{
+        padding: '1rem',
+        margin: '0.5rem 0',
+      }}
     >
       {children}
     </Component>
-  )
+  );
 }
 
 Card.Link = function CardLink({ children, ...props }) {
   return (
     <>
-      <div className="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-100 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/80 sm:-inset-x-6 sm:rounded-2xl" />
+      <div
+        className="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-100 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/80 sm:-inset-x-6 sm:rounded-2xl"
+        style={{
+          marginTop: '0.5rem',
+        }}
+      />
       <Link {...props}>
         <span className="absolute -inset-y-6 -inset-x-4 sm:-inset-x-6 sm:rounded-2xl" />
         <span className="relative z-10">{children}</span>
       </Link>
     </>
-  )
-}
+  );
+};
 
 Card.Title = function CardTitle({ as: Component = 'h2', href, children }) {
   return (
-    <Component className="text-lg font-semibold font-mono tracking-tight text-zinc-800 dark:text-zinc-100">
+    <Component
+      className="text-lg font-semibold font-mono tracking-tight text-zinc-800 dark:text-zinc-100"
+      style={{
+        marginBottom: '0.5rem',
+      }}
+    >
       {href ? <Card.Link href={href}>{children}</Card.Link> : children}
     </Component>
-  )
-}
+  );
+};
 
 Card.Description = function CardDescription({ children }) {
   return (
-    <p className="relative z-10 mt-2 text-sm font-mono text-zinc-600 dark:text-zinc-400">
+    <p
+      className="relative z-10 mt-2 text-sm font-mono text-zinc-600 dark:text-zinc-400"
+      style={{
+        marginTop: '0.75rem',
+        lineHeight: '1.6',
+      }}
+    >
       {children}
     </p>
-  )
-}
+  );
+};
 
 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"
+      style={{
+        marginTop: '1rem',
+      }}
     >
       {children}
       <ChevronRightIcon className="ml-1 h-4 w-4 stroke-current" />
     </div>
-  )
-}
+  );
+};
 
 Card.Eyebrow = function CardEyebrow({
   as: Component = 'p',
@@ -77,6 +101,9 @@ Card.Eyebrow = function CardEyebrow({
         'relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500',
         decorate && 'pl-3.5'
       )}
+      style={{
+        marginBottom: '0.75rem',
+      }}
       {...props}
     >
       {decorate && (
@@ -89,5 +116,5 @@ Card.Eyebrow = function CardEyebrow({
       )}
       {children}
     </Component>
-  )
-}
+  );
+};

src/components/ContainerPattern.jsx

@@ -1,12 +1,28 @@
-import clsx from 'clsx'
-
+import clsx from 'clsx';
 const styles = {
-  xs: 'mx-auto px-4 sm:px-6 md:max-w-2xl md:px-4 lg:px-2',
-  sm: 'mx-auto px-4 sm:px-6 md:max-w-2xl md:px-4 lg:max-w-4xl lg:px-12',
-  md: 'mx-auto px-4 sm:px-6 md:max-w-2xl md:px-4 lg:max-w-6xl lg:px-8',
-  lg: 'mx-auto px-4 sm:px-6 md:max-w-2xl md:px-4 lg:max-w-7xl lg:px-8',
-}
+  xs: 'mx-auto px-4 sm:px-6 md:max-w-2xl md:px-6 lg:px-4',
+  sm: 'mx-auto px-4 sm:px-6 md:max-w-2xl md:px-6 lg:max-w-4xl lg:px-14',
+  md: 'mx-auto px-4 sm:px-6 md:max-w-2xl md:px-6 lg:max-w-6xl lg:px-10',
+  lg: 'mx-auto px-4 sm:px-6 md:max-w-2xl md:px-6 lg:max-w-7xl lg:px-10',
+};
 
+// Updated ContainerPattern component
 export function ContainerPattern({ size = 'sm', className, ...props }) {
-  return <div className={clsx(styles[size], className)} {...props} />
+  return (
+    <div className={clsx(styles[size], className)} {...props} />
+  );
+}
+
+// Example usage for "Active Projects" button with custom styling
+export function ActiveProjectsButton() {
+  return (
+    <ContainerPattern
+      size="sm"
+      className="custom-active-projects"
+    >
+      <button className="btn-active-projects">
+        Active Projects
+      </button>
+    </ContainerPattern>
+  );
 }

src/components/Footer.jsx

@@ -1,9 +1,9 @@
 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 } from '@fortawesome/free-brands-svg-icons'
+import { faXTwitter } from '@fortawesome/free-brands-svg-icons' // Import faXTwitter
 
 function NavLink({ href, children }) {
   return (
@@ -33,20 +33,20 @@ export function Footer() {
                 © 2016-2023 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]'>
-                  <FontAwesomeIcon icon={faEnvelope} size='xl' />
+                <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]">
+                  <FontAwesomeIcon icon={faEnvelope} size="xl" />
                 </Link>
-                <Link aria-label="Follow on GitLab" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://gitlab.com/aossie'>
-                  <FontAwesomeIcon icon={faGitlab} size='xl' />
+                <Link aria-label="Follow on GitLab" className="text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition" href="https://gitlab.com/aossie">
+                  <FontAwesomeIcon icon={faGitlab} size="xl" />
                 </Link>
-                <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 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.com/invite/6mFZ2S846n'>
-                  <FontAwesomeIcon icon={faDiscord} size='xl' />
+                <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.com/invite/6mFZ2S846n">
+                  <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" className="text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition" href="https://x.com/aossie_org">
+                  <FontAwesomeIcon icon={faXTwitter} size="xl" /> {/* Use faXTwitter here */}
                 </Link>
               </div>
             </div>

src/components/SectionHeading.jsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx'
+import clsx from 'clsx';
 
 export function SectionHeading({ number, children, className, ...props }) {
   return (
@@ -7,14 +7,25 @@ export function SectionHeading({ number, children, className, ...props }) {
         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'
       )}
+      style={{
+        marginBottom: '1rem', // Adds spacing below the heading for better layout flow
+        paddingLeft: '1.25rem', // Slight adjustment for better content alignment
+        paddingRight: '1.25rem',
+      }}
       {...props}
     >
-      <span className="font-mono text-base font-semibold" aria-hidden="true">
+      <span
+        className="font-mono text-base font-semibold"
+        aria-hidden="true"
+        style={{
+          marginRight: '0.75rem', // Space between number and content
+        }}
+      >
+        {number}
       </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">
         {children}
       </span>
     </h2>
-  )
+  );
 }

src/helper/projects.js

@@ -5,8 +5,6 @@ import SSSLogo from '@/images/SSS.png'
 import ResonateLogo from '@/images/Resonate.png'
 import PictoPy from '@/images/Pictopy.png'
 
-
-
 // data
 const projects = [
   {
@@ -53,21 +51,21 @@ const projects = [
   {
     name: 'OpenChat',
     description:
-      'a decentralised platform for secure and private messaging and file sharing built on top of blockchain',
+      'A decentralised platform for secure and private messaging and file sharing built on top of blockchain',
     link: { href: '#', label: 'OpenChat' },
     logo: DefaultLogo,
   },
   {
     name: 'Resonate',
     description:
-      'With the rising popularity of social voice platforms such as Clubhouse, it is high time for an Open Source alternative. A platform like this would not only enhance credibility within the open-source community but also attract more users and foster growth.  ',
+      'With the rising popularity of social voice platforms such as Clubhouse, it is high time for an Open Source alternative. A platform like this would not only enhance credibility within the open-source community but also attract more users and foster growth.',
     link: { href: 'https://github.com/AOSSIE-Org/Resonate', label: 'Resonate' },
     logo: ResonateLogo,
   },
   {
     name: 'Social Street Smart',
     description:
-      'With the adevent of Internet, the problems faced by the people have also grown. These include abusive languages.',
+      'With the advent of the Internet, the problems faced by the people have also grown. These include abusive languages.',
     link: {
       href: 'https://github.com/AOSSIE-Org/Social-Street-Smart',
       label: 'Social-Street-Smart',
@@ -76,5 +74,4 @@ const projects = [
   },
 ]
 
-
 export default projects

src/pages/apply.jsx

@@ -1,7 +1,6 @@
 import Head from 'next/head'
 import Image from 'next/image'
 import Link from 'next/link'
-
 import { Container } from '@/components/Container'
 import { TimelineElement } from '@/components/TimelineElement'
 import GSoC from '@/images/logo.svg'

src/pages/index.jsx

@@ -2,7 +2,6 @@ import Head from 'next/head'
 import Link from 'next/link'
 import Image from 'next/image'
 import { useState, useEffect } from 'react'
-
 import { Container } from '@/components/Container'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons'