Paritosh/benefits page

frontend/src/app/sections/Benefits/BenefitsCard.tsx

@@ -1,3 +1,6 @@
+'use client'
+
+import { useState, useEffect } from 'react';
 import CardDark from "@/app/components/BenefitsOfParticipating/CardDark";
 import CardLight from "@/app/components/BenefitsOfParticipating/CardLight";
 import NewNetworksSVG from "@/app/assets/images/NewNetworks";
@@ -11,6 +14,19 @@ import BenefitsCardFourth from "@/app/assets/images/BenefitsCardFourth";
 
 
 export default function BenefitsCards() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 1024);
+    };
+
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  },[]);
+
   return (
     <div className="flex flex-col justify-center gap-5 mx-10 w-full items-center">
       <div className="flex w-full h-full flex-col gap-5 lg:flex-row justify-center items-center">
@@ -32,13 +48,14 @@ export default function BenefitsCards() {
       <div className="flex w-full h-full flex-col gap-5 lg:flex-row justify-center items-center">
       <CardDark
           title="Career Opportunities"
+          bordercolour = {isMobile}
           description="Showcase talents, gain hands-on experience, and develop crucial skills like problem-solving and teamwork for career success."
            pgNo="3."
           svg={<BenefitsCardThird/>}
         />
         <CardLight
           title="Interpersonal Development"
-          bordercolour={true}
+          bordercolour={!isMobile}
           description="Embrace the challenge at DeerHack and watch as your interpersonal skills evolve under pressure, transforming you into a more resilient and effective collaborator."
            pgNo="4."
           svg={<BenefitsCardFourth/>}