AOSSIE-Org#294 issue fixed

AOSSIE-Org#294 the padding are fixed, the responsivness of the site is also imporved

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/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 = [
   {
@@ -60,14 +58,14 @@ const projects = [
   {
     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'

src/pages/projects.jsx

@@ -1,10 +1,10 @@
-import Image from 'next/image'
-import Head from 'next/head'
+import Image from 'next/image';
+import Head from 'next/head';
 
-import { Container } from '@/components/Container'
-import { SectionHeading } from '@/components/SectionHeading'
-import { Card } from '@/components/Card'
-import projects from '@/helper/projects'
+import { Container } from '@/components/Container';
+import { SectionHeading } from '@/components/SectionHeading';
+import { Card } from '@/components/Card';
+import projects from '@/helper/projects';
 
 function LinkIcon(props) {
   return (
@@ -14,39 +14,40 @@ function LinkIcon(props) {
         fill="currentColor"
       />
     </svg>
-  )
+  );
 }
 
 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>
+      <Container className="mt-10 mb-20 sm:mt-16 lg:mt-20">
+        <div className="mt-5 sm:mt-8">
+          <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 />
+            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'>
-          {/* <h1 className="text-4xl font-mono font-extrabold tracking-tighter text-zinc-800 dark:text-zinc-100">
-            Active Projects
-          </h1> */}
+        <div className="mt-12 sm:mt-16">
           <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="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-6 gap-y-8 sm:grid-cols-2 lg:grid-cols-3 mt-10 mb-16"
+          >
             {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">
                   <Image
                     src={project.logo}
                     alt="Project Logo"
-                    className='p-2'
+                    className="p-2"
                     unoptimized
                   />
                 </div>
@@ -61,35 +62,8 @@ export default function Projects() {
               </Card>
             ))}
           </ul>
-
-          {/* <h1 className="text-4xl font-mono font-extrabold tracking-tighter text-zinc-800 dark:text-zinc-100">
-            InActive Projects
-          </h1> */}
-          {/* <SectionHeading>Past Projects</SectionHeading>
-          <p className='text-zinc-600 dark:text-zinc-400 text-lg font-mono leading-7 mt-3'>The following projects are currently inactive. If you are brave and independent, you are welcome and even encouraged to contribute to these projects as well. However, help from mentors will be significantly reduced.</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">
-            {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">
-                  <Image
-                    src={project.logo}
-                    alt="Project Logo"
-                    unoptimized
-                  />
-                </div>
-                <h2 className="mt-6 text-2xl font-semibold font-mono 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">
-                  <LinkIcon className="h-6 w-6 flex-none scale-110" />
-                  <span className="ml-2">{project.link.label}</span>
-                </p>
-              </Card>
-            ))}
-          </ul> */}
         </div>
       </Container>
     </>
-    )
+  );
 }