From 1693624772d511ebf7ae2f194275e73ae31fe262 Mon Sep 17 00:00:00 2001
From: xbrzee <hibreezo@gmail.com>
Date: Mon, 20 Apr 2026 20:37:37 +0545
Subject: [PATCH] fix:fix card border not appearing alternatively i.e 1st and
 3rd Card in Mobile View

---
 .../app/sections/Benefits/BenefitsCard.tsx    | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/sections/Benefits/BenefitsCard.tsx b/frontend/src/app/sections/Benefits/BenefitsCard.tsx
index 10128dd..448d7a7 100644
--- a/frontend/src/app/sections/Benefits/BenefitsCard.tsx
+++ b/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/>}