feat: added sigs page

app/sigs/components/card.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import Image from 'next/image';
+
+interface CardProps {
+  image: string;
+  title: string;
+}
+
+export default function Card({ image, title }: CardProps) {
+  const router = useRouter();
+
+  return (
+    <div
+      className="rounded-lg bg-gradient-to-b from-[rgba(62,179,114,0.2)] to-[rgba(25,113,64,0.2)] 
+                    w-[188px] md:w-[328px] h-[195px] md:h-[340px] 
+                    flex flex-col items-center justify-center border-t-2 border-midori-green hover:scale-105 duration-300"
+    >
+      <div className="relative w-16 h-16 md:w-40 md:h-40 mb-2">
+        {typeof image === 'string' ? (
+          <Image src={image} alt={title} layout="fill" objectFit="contain" />
+        ) : (
+          image
+        )}
+      </div>
+
+      <h3 className="text-yellow-400 font-bold text-lg md:text-[40px] md:leading-none text-center mb-2 md:mb-8">
+        {title}
+      </h3>
+
+      <button
+        className="bg-yellow-400 text-xs text-black py-1 px-3 rounded-full font-bold hover:scale-110 duration-300"
+        onClick={() => router.push('/404')}
+      >
+        READ MORE
+      </button>
+    </div>
+  );
+}

app/sigs/page.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import React from 'react';
+import Card from './components/card';
+
+const sigsData = [
+  { image: '/assets/sigsIcons/Group125.png', title: 'Data' },
+  { image: '/assets/sigsIcons/Group122.png', title: 'Backend' },
+];
+
+export default function Sigs() {
+  return (
+    <div className="max-w-7xl mx-auto px-">
+      <div className="relative flex flex-col justify-center mt-28 2xl:mt-60">
+        <div className="flex flex-col items-center">
+          <p className="text-primary text-[32px] md:text-[70px] leading-9 md:leading-none font-black text-center">
+            SPECIAL <br />
+            <span className="text-white">INTEREST GROUPS</span>
+          </p>
+
+          <p className="text-white text-xs md:text-xl text-center mt-4 2xl:my-14 max-w-[909px]">
+            DurianPy&rsquo;s{' '}
+            <span className="text-primary font-bold">
+              Special Interest Groups
+            </span>{' '}
+            (SIGs) are focused communities within our user group that allow
+            Python enthusiasts to dive deeper into specific topics. Whether
+            you&rsquo;re passionate about{' '}
+            <span className="text-primary font-bold">data science</span> or{' '}
+            <span className="text-primary font-bold">data science</span> or{' '}
+            <span className="text-primary font-bold">backend development</span>,
+            our SIGs providea space for hands-on learning, networking, and
+            collaboration.
+          </p>
+
+          <button
+            className="my-6 md:my-8 lg:my-10 mx-auto block bg-primary text-black text-[8px] md:text-xl leading-3 md:leading-none font-bold rounded-full px-2 md:px-4 lg:px-8 py-1 md:py-2 lg:py-4 border border-transparent hover:bg-opacity-50 hover:border-primary hover:text-primary transition-colors"
+            onClick={() =>
+              (window.location.href = 'https://forms.gle/XxDJZebqbJB6tJo27')
+            }
+          >
+            Join a SIG today
+          </button>
+          <div className="relative w-full h-[250px] md:h-[350px] -mt-20 -mb-20 flex flex-col items-center -z-10">
+            <div className="absolute top-0 w-[50%] md:w-[80%] h-[100px] md:h-[150px] bg-[#36FF90] rounded-b-full blur-2xl md:blur-3xl opacity-10 z-[-1] -mt-5"></div>
+            <div className="absolute top-1/2 -translate-y-1/2 w-full md:w-[85%] h-[80%] md:h-[71%] bg-[#36FF90] rounded-full blur-[80px] md:blur-[120px] opacity-30 z-[-2]"></div>
+            <div className="absolute bottom-0 w-[50%] md:w-[80%] h-[100px] md:h-[150px] bg-[#36FF90] rounded-t-full blur-2xl md:blur-3xl opacity-10 z-[-1]"></div>
+          </div>
+        </div>
+        <div className="sm:mt-15 md:-mt-10 lg:-mt-10">
+          <p className="text-primary text-[32px] md:text-[70px] leading-9 md:leading-none font-black text-center">
+            CURRENT <span className="text-white">SIGs</span>
+          </p>
+
+          <div className="flex flex-wrap justify-center gap-3 md:gap-8 xl:gap-20 mt-6">
+            {sigsData.map((sig, index) => (
+              <Card key={index} image={sig.image} title={sig.title} />
+            ))}
+          </div>
+        </div>
+
+        <div className="py-32">
+          <p className="text-primary text-xl md:text-4xl font-semibold text-center">
+            Want to Start a SIG?
+          </p>
+          <p className="text-white text-xs md:text-2xl text-center mt-4 mx-auto max-w-[832px]">
+            If you’re passionate about a particular Python topic and want to
+            start a SIG, reach out to us at{' '}
+            <a href="mailto:durianpy.davao@gmail.com" className="underline">
+              durianpy.davao@gmail.com
+            </a>
+            . Our organizers will review and respond within 48 hours.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

components/navs/public/DesktopView.tsx

@@ -73,13 +73,13 @@ export default function DesktopView() {
       >
         Speak
       </Button>
-      {/* <Button
+      <Button
         variant={'navLink'}
-        onClick={() => router.push('/404')}
+        onClick={() => router.push('/sigs')}
         className={`${pathname === '/sigs' ? 'text-primary border-primary' : ''}`}
       >
         SIGs
-      </Button> */}
+      </Button>
       <Button
         variant={'navLink'}
         onClick={() => router.push('/code-of-conduct')}

components/navs/public/MobileView.tsx

@@ -87,12 +87,12 @@ export default function MobileView() {
               </AccordionItem>
             </Accordion>
 
-            {/* <Button
+            <Button
               variant={'navLinkMobile'}
-              onClick={() => router.push('/404')}
+              onClick={() => router.push('/sigs')}
             >
               SIGs
-            </Button> */}
+            </Button>
             <Button
               variant={'navLinkMobile'}
               onClick={() => router.push('/code-of-conduct')}