DY-50

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,76 @@
+'use client';
+
+import React from 'react';
+import Card from './components/card';
+import { Footer } from '../(home)/components/Footer';
+
+const sigsData = [
+  { image: '/assets/sigsIcons/Group125.png', title: 'Data' },
+  { image: '/assets/sigsIcons/Group122.png', title: 'Backend' },
+];
+
+export default function Sigs() {
+  return (
+    <main className="relative flex flex-col justify-center mt-28">
+      <div>
+        <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 mx-auto w-[85%] 2xl:w-[55%]">
+          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">backend development</span>,
+          our SIGs provide a 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-[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 hover:scale-105 duration-300"
+          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">
+          <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="mt-16">
+        <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 w-[85%]">
+          If you’re passionate about a particular Python topic and want to start
+          a SIG, reach out to us at{' '}
+          <span className="underline">durianpy.davao@gmail.com</span>. Our
+          organizers will review and respond within 48 hours.
+        </p>
+      </div>
+      <Footer />
+    </main>
+  );
+}

components/navs/public/DesktopView.tsx

@@ -15,7 +15,7 @@ interface redirectProps {
 }
 
 function redirectTo({ href }: redirectProps) {
-  window.open(href, '_blank', 'noopener,noreferrer');
+  window.location.href = href;
 }
 
 export default function DesktopView() {
@@ -75,7 +75,7 @@ export default function DesktopView() {
       </Button>
       <Button
         variant={'navLink'}
-        onClick={() => router.push('/404')}
+        onClick={() => redirectTo({ href: '/sigs' })}
         className={`${pathname === '/sigs' ? 'text-primary border-primary' : ''}`}
       >
         SIGs

components/navs/public/MobileView.tsx

@@ -25,7 +25,7 @@ interface redirectProps {
 }
 
 function redirectTo({ href }: redirectProps) {
-  window.open(href, '_blank', 'noopener,noreferrer');
+  window.location.href = href;
 }
 
 export default function MobileView() {
@@ -89,7 +89,7 @@ export default function MobileView() {
 
             <Button
               variant={'navLinkMobile'}
-              onClick={() => router.push('/404')}
+              onClick={() => redirectTo({ href: '/sigs' })}
             >
               SIGs
             </Button>