Domains Addition and Activites card Update

components/homepage/ActivitiesSection.tsx

@@ -1,4 +1,5 @@
 import Image from "next/image";
+import { useState, useEffect } from "react";
 import FadeIn from "@/components/FadeIn";
 import hustleImg from "@/public/images/hustle.webp";
 import chroniclesImg from "@/public/images/chronicles.webp";
@@ -53,6 +54,15 @@ const activities = [
 ];
 
 export default function ActivitiesSection() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => setIsMobile(window.innerWidth < 400);
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   return (
     <section
       id="activities"
@@ -63,29 +73,34 @@ export default function ActivitiesSection() {
       </FadeIn>
 
       <div className="max-w-8xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-        {activities.map(({ title, tag, img, description }, i) => (
-          <FadeIn key={i} delay={(i % 3) * 0.1} className="h-full">
-            <div className="inline-flex w-full h-full flex-col justify-start items-center gap-10 p-6 bg-[#1C1C1C] rounded-t-[54px] rounded-b-[16px] [outline:1px_solid_#262626] [outline-offset:-1px] transition-all duration-300">
-              <div className="self-stretch h-[277px] overflow-hidden rounded-t-[30px] rounded-b-[12px] shadow-[0_4px_4px_rgba(0,0,0,0.25)]">
-                <Image src={img} alt={title} className="w-full h-full object-cover" draggable={false} />
-              </div>
+        {activities.map(({ title, tag, img, description }, i) => {
+          const displayTag = isMobile && tag === "PB Chronicles" ? "Chronicles" :
+                             isMobile && tag === "Smart India Hackathon" ? "SIH" :
+                             tag;
+          return (
+            <FadeIn key={i} delay={(i % 3) * 0.1} className="h-full">
+              <div className="inline-flex w-full h-full flex-col justify-start items-center gap-10 p-6 bg-[#1C1C1C] rounded-t-[54px] rounded-b-[16px] [outline:1px_solid_#262626] [outline-offset:-1px] transition-all duration-300">
+                <div className="self-stretch h-[277px] overflow-hidden rounded-t-[30px] rounded-b-[12px] shadow-[0_4px_4px_rgba(0,0,0,0.25)]">
+                  <Image src={img} alt={title} className="w-full h-full object-cover" draggable={false} />
+                </div>
 
-              <div className="self-stretch px-6 flex flex-col items-center gap-6">
-                <div className="self-stretch flex items-start justify-between gap-3">
-                  <h3 className="text-white text-[20px] leading-[30px] font-lexend font-[400] break-words">{title}</h3>
+                <div className="self-stretch px-6 flex flex-col items-center gap-6">
+                  <div className="self-stretch flex items-start justify-between gap-3">
+                    <h3 className="text-white text-[20px] leading-[30px] font-lexend font-[400] break-words">{title}</h3>
 
-                  <div className="flex items-start">
-                    <div className="bg-[#1A1A1A] rounded-full px-4 py-1.5 [outline:1px_solid_#262626] [outline-offset:-1px] flex items-center justify-center">
-                      <div className="text-pbgreen text-[16px] leading-[24px] font-lexend font-[300]">{tag}</div>
+                    <div className="flex items-start">
+                      <div className="bg-[#1A1A1A] rounded-full px-4 py-1.5 [outline:1px_solid_#262626] [outline-offset:-1px] flex items-center justify-center">
+                        <div className="text-pbgreen text-[16px] leading-[24px] font-lexend font-[300]">{displayTag}</div>
+                      </div>
                     </div>
                   </div>
-                </div>
 
-                <p className="self-stretch text-[#B3B3B3] text-[16px] leading-[24px] font-lexend font-[300] break-words">{description}</p>
+                  <p className="self-stretch text-[#B3B3B3] text-[16px] leading-[24px] font-lexend font-[300] break-words">{description}</p>
+                </div>
               </div>
-            </div>
-          </FadeIn>
-        ))}
+            </FadeIn>
+          );
+        })}
       </div>
     </section>
   );

components/homepage/DomainsSection.tsx

@@ -9,16 +9,24 @@ import opensourceIcon from "@/public/images/icons/opensource.webp";
 import reactIcon from "@/public/images/icons/react.webp";
 import acmIcon from "@/public/images/icons/acm-icpc.webp";
 import flutterIcon from "@/public/images/icons/flutter.webp";
+import androidIcon from "@/public/images/icons/android.webp";
+import systemsIcon from "@/public/images/icons/systems.webp";
+import hackathonIcon from "@/public/images/icons/hackathon.webp";
+import cybersecurityIcon from "@/public/images/icons/Cybersecurity.webp";
 
 const domains = [
   { name: "DevOps", icon: devopsIcon },
-  { name: "IOT-ML", icon: iotIcon },
+  { name: "IOT-Hardware", icon: iotIcon },
   { name: "Kaggle", icon: kaggleIcon },
   { name: "ML-Research", icon: aimlIcon },
-  { name: "Open Source Hackathon", icon: opensourceIcon },
-  { name: "React Development", icon: reactIcon },
-  { name: "ACM - ICPC", icon: acmIcon },
-  { name: "Flutter Development", icon: flutterIcon },
+  { name: "Open Source", icon: opensourceIcon },
+  { name: "Web Development", icon: reactIcon },
+  { name: "Competitive Programming", icon: acmIcon },
+  { name: "App Development", icon: flutterIcon },
+  { name: "AOSP", icon: androidIcon },
+  { name: "Systems Engineering", icon: systemsIcon },
+  { name: "Hackathon", icon: hackathonIcon },
+  { name: "cybersecurity", icon: cybersecurityIcon },
 ];
 
 export default function DomainsSection() {