Feature: add community partner section (#85)

SiddharthJiyani · priyankarpal · web-flow · commit f89ede201703 · 2025-10-19T11:07:29.000+05:30
* fix(events): reorganize event section with upcoming first, add CFP/volunteer cards and dedicated route for events page

* feat: add dedicated Community section with enhanced partners UI and logos

* refactor: replace IIFE with filter method for event categorization

---------

Signed-off-by: Siddharth Rajesh Jiyani &lt;120766410+SiddharthJiyani@users.noreply.github.com&gt;
Co-authored-by: Priyankar Pal &lt;88102392+priyankarpal@users.noreply.github.com&gt;
diff --git a/public/partners/Digital_Dominators.jpg b/public/partners/Digital_Dominators.jpg
diff --git a/public/partners/hackspire.jpg b/public/partners/hackspire.jpg
diff --git a/public/partners/reacthyderabad_logo.jpeg b/public/partners/reacthyderabad_logo.jpeg
diff --git a/public/partners/reactplay.png b/public/partners/reactplay.png
diff --git a/src/app/[locale]/events/page.tsx b/src/app/[locale]/events/page.tsx
@@ -13,24 +13,15 @@ import { events } from "@/base/data/dummy";
 export default function EventsPage() {
   const t = useTranslations("Events");
 
-  const { upcomingEvents, pastEvents } = (() => {
-    const upcoming: typeof events = [];
-    const past: typeof events = [];
+  const upcomingEvents = events.filter((event) => {
+    const status = getEventStatus(event.startDateTime, event.endDateTime);
+    return status === EVENT_STATUS.UPCOMING || status === EVENT_STATUS.ONGOING;
+  });
 
-    events.forEach((event) => {
-      const dynamicStatus = getEventStatus(event.startDateTime, event.endDateTime);
-      if (dynamicStatus === EVENT_STATUS.UPCOMING || dynamicStatus === EVENT_STATUS.ONGOING) {
-        upcoming.push(event);
-      } else {
-        past.push(event);
-      }
-    });
-
-    return {
-      upcomingEvents: upcoming,
-      pastEvents: past,
-    };
-  })();
+  const pastEvents = events.filter((event) => {
+    const status = getEventStatus(event.startDateTime, event.endDateTime);
+    return status === EVENT_STATUS.PAST;
+  });
 
   return (
     <AnimatedSection className="relative">
diff --git a/src/config/i18n/content/bn.json b/src/config/i18n/content/bn.json
@@ -66,7 +66,12 @@
     "call_for_volunteers": "স্বেচ্ছাসেবকদের জন্য আহ্বান",
     "view_all_events": "সব ইভেন্ট দেখুন",
     "view_all_past_events": "সব অতীত ইভেন্ট দেখুন",
-    "coming_soon": "শীঘ্রই আসছে"
+    "coming_soon": "শীঘ্রই আসছে",
+    "community_partners_title": "কমিউনিটি পার্টনার",
+    "community_partners_description": "আমরা দুর্দান্ত কমিউনিটিগুলোর সাথে কাজ করি আপনাদের আরও মূল্য দিতে।",
+    "become_partner_cta": "পার্টনার হোন",
+    "partner_visit_label": "ভিজিট",
+    "partner_visit_cta": "ওপেন"
   },
   "Blog": {
     "title": "ব্লগ থেকে সর্বশেষ",
diff --git a/src/config/i18n/content/en.json b/src/config/i18n/content/en.json
@@ -66,7 +66,12 @@
     "call_for_volunteers": "Call for Volunteers",
     "view_all_events": "View All Events",
     "view_all_past_events": "View All Past Events",
-    "coming_soon": "Coming Soon"
+    "coming_soon": "Coming Soon",
+    "community_partners_title": "Community Partners",
+    "community_partners_description": "We collaborate with amazing communities to bring more value to you.",
+    "become_partner_cta": "Become a partner",
+    "partner_visit_label": "Visit",
+    "partner_visit_cta": "Open"
   },
   "Blog": {
     "title": "Latest from the Blog",
diff --git a/src/config/i18n/content/fr.json b/src/config/i18n/content/fr.json
@@ -56,7 +56,12 @@
     "call_for_volunteers": "Appel aux bénévoles",
     "view_all_events": "Voir tous les événements",
     "view_all_past_events": "Voir tous les événements passés",
-    "coming_soon": "Bientôt disponible"
+    "coming_soon": "Bientôt disponible",
+    "community_partners_title": "Partenaires communautaires",
+    "community_partners_description": "Nous collaborons avec des communautés formidables pour vous apporter plus de valeur.",
+    "become_partner_cta": "Devenir partenaire",
+    "partner_visit_label": "Visiter",
+    "partner_visit_cta": "Ouvrir"
   },
   "NotFound": {
     "404": "404",
diff --git a/src/config/i18n/content/hi.json b/src/config/i18n/content/hi.json
@@ -66,7 +66,12 @@
     "call_for_volunteers": "वॉलंटियर्स के लिए कॉल",
     "view_all_events": "सभी इवेंट्स देखें",
     "view_all_past_events": "सभी पिछले इवेंट्स देखें",
-    "coming_soon": "जल्द आ रहा है"
+    "coming_soon": "जल्द आ रहा है",
+    "community_partners_title": "कम्युनिटी पार्टनर्स",
+    "community_partners_description": "हम शानदार कम्युनिटीज़ के साथ मिलकर आपके लिए अधिक मूल्य लाते हैं।",
+    "become_partner_cta": "पार्टनर बनें",
+    "partner_visit_label": "विज़िट करें",
+    "partner_visit_cta": "खोलें"
   },
   "Blog": {
     "title": "ब्लॉग से नवीनतम",
diff --git a/src/modules/home/(sections)/community/index.tsx b/src/modules/home/(sections)/community/index.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+import AnimatedSection from "@/components/custom/animated-section";
+
+import CommunityPartners from "../event/community-partners";
+
+export default function CommunitySection() {
+  return (
+    <AnimatedSection className="relative">
+      <div className="mx-auto flex max-w-7xl flex-col gap-8 px-4 py-16 sm:px-6 lg:px-8">
+        <CommunityPartners />
+      </div>
+    </AnimatedSection>
+  );
+}
diff --git a/src/modules/home/(sections)/event/community-partners/index.tsx b/src/modules/home/(sections)/event/community-partners/index.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowRight, Handshake, Users } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+type Partner = {
+  name: string;
+  url: string;
+  handle?: string;
+  imageSrc?: string;
+  description?: string;
+};
+
+const partners: Partner[] = [
+  {
+    name: "ReactPlay",
+    url: "https://reactplay.io",
+    handle: "@reactplay",
+    imageSrc: "/partners/reactplay.png",
+    description: "Learn, Create, and Share React projects",
+  },
+  {
+    name: "Digital Dominators",
+    url: "https://www.linkedin.com/company/digital-dominators-in/",
+    handle: "@digital-dominators",
+    imageSrc: "/partners/Digital_Dominators.jpg",
+    description: "Digital innovation and technology community",
+  },
+  {
+    name: "React Hyderabad",
+    url: "https://www.linkedin.com/company/reacthyderabad/",
+    handle: "@reacthyderabad",
+    imageSrc: "/partners/reacthyderabad_logo.jpeg",
+    description: "React community in Hyderabad",
+  },
+  {
+    name: "Hackspire",
+    url: "https://www.hackspire.tech/",
+    handle: "@hackspire",
+    imageSrc: "/partners/hackspire.jpg",
+    description: "Inspiring hackers and developers",
+  },
+];
+
+export default function CommunityPartners() {
+  const t = useTranslations("Events");
+
+  return (
+    <section className="space-y-6">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h3
+            className="text-3xl font-semibold tracking-tight sm:text-4xl"
+            style={{ fontFamily: "var(--font-poppins)" }}
+          >
+            {t("community_partners_title")}
+          </h3>
+          <p className="mt-2 text-slate-300">{t("community_partners_description")}</p>
+        </div>
+
+        <Link href="#" onClick={(e) => e.preventDefault()} className="sm:flex-shrink-0">
+          <div className="group flex items-center gap-2 rounded-lg border border-sky-500/30 bg-gradient-to-r from-sky-500/10 to-purple-500/10 px-4 py-2.5 transition hover:border-sky-500/50 hover:from-sky-500/15 hover:to-purple-500/15">
+            <Handshake className="h-4 w-4 text-sky-300" />
+            <span className="text-sm font-medium text-sky-200">{t("become_partner_cta")}</span>
+            <ArrowRight className="h-3.5 w-3.5 text-sky-300 transition-transform group-hover:translate-x-0.5" />
+          </div>
+        </Link>
+      </div>
+
+      {/* Partner Cards Grid */}
+      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+        {partners.map((partner) => (
+          <Link key={partner.name} href={partner.url} target="_blank" rel="noopener noreferrer">
+            <article className="group relative flex h-full flex-col overflow-hidden rounded-xl border border-white/5 bg-white/5 p-6 transition hover:translate-y-[-4px] hover:bg-white/10">
+              {/* Partner Logo */}
+              <div className="mb-4 flex h-12 w-12 items-center justify-center overflow-hidden rounded-lg ring-1 ring-white/10">
+                {partner.imageSrc ? (
+                  <Image
+                    src={partner.imageSrc}
+                    alt={partner.name}
+                    width={48}
+                    height={48}
+                    className="h-full w-full object-contain"
+                  />
+                ) : (
+                  <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-sky-600/30 to-violet-600/30 text-lg font-bold text-white">
+                    {partner.name.charAt(0)}
+                  </div>
+                )}
+              </div>
+
+              {/* Content */}
+              <div className="flex-1">
+                <h4 className="line-clamp-1 text-base font-semibold text-sky-200">
+                  {partner.name}
+                </h4>
+                {partner.handle && <p className="mt-1 text-xs text-slate-400">{partner.handle}</p>}
+                {partner.description && (
+                  <p className="mt-2 line-clamp-2 text-sm text-slate-300">{partner.description}</p>
+                )}
+              </div>
+
+              {/* Partner Badge */}
+              <div className="mt-4 flex items-center gap-2">
+                <div className="flex items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-2.5 py-1 text-xs text-slate-300">
+                  <Users className="h-3 w-3" />
+                  <span>Partner</span>
+                </div>
+                <div className="ml-auto">
+                  <ArrowRight className="h-4 w-4 text-sky-300 transition-transform group-hover:translate-x-1" />
+                </div>
+              </div>
+
+              {/* Hover gradient overlay */}
+              <div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-sky-500/0 via-transparent to-purple-500/0 opacity-0 transition-opacity group-hover:opacity-10" />
+            </article>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/src/modules/home/index.tsx b/src/modules/home/index.tsx
@@ -3,6 +3,7 @@ import { getInitialBlogs } from "@/utils/blog";
 
 import AboutSection from "./(sections)/about";
 import BlogSection from "./(sections)/blogs";
+import CommunitySection from "./(sections)/community";
 import EventsSection from "./(sections)/event";
 import HeroSection from "./(sections)/hero";
 
@@ -14,6 +15,7 @@ const LandingPage = async () => {
       <HeroSection />
       <AboutSection />
       <EventsSection />
+      <CommunitySection />
       <BlogSection initialBlogs={initialBlogs} initialEndCursor={initialEndCursor} error={error} />
     </>
   );
