fix: added major components

app/page.tsx

@@ -1,17 +1,19 @@
 import { HeroSection } from "@/components/hero";
-import { Programs } from "@/components/programs";
+import Services from "@/components/programs";
 import { Partners } from "@/components/footer/partners";
 import StickyEventBottomBanner from "@/components/sticky-bottom-banner";
 import Contributors from "@/components/contributers";
+import CommunitySupport from "@/components/community";
 
 export default function IndexPage() {
   return (
-    <section className="container grid items-center gap-6 pb-8 pt-6 md:py-10">
+    <section className=" grid items-center gap-6 pb-8 pt-6 md:py-10">
         <main>
           <HeroSection />
-          <Programs />
-          <Partners />
+          <CommunitySupport />
+          <Services />
           <Contributors />
+          <Partners />
         </main>
         <StickyEventBottomBanner />
     </section>

components/community/index.tsx

@@ -0,0 +1,133 @@
+import Link from "next/link"
+
+const MyCommunitySections = [
+  {
+    title: "Getting Started",
+    links: [
+      {
+        title: "Introduction to Codenight",
+        link: "",
+      },
+      {
+        title: "About Codenight",
+        link: "",
+      },
+      {
+        title: "Technical Steering Committee",
+        link: "",
+      },
+      {
+        title: "Governance model",
+        link: "",
+      },
+      {
+        title: "Working Groups",
+        link: "",
+      },
+    ],
+  },
+  {
+    title: "Projects",
+    links: [
+      {
+        title: "Project #1",
+        link: "",
+      },
+      {
+        title: "Project #2",
+        link: "",
+      },
+      {
+        title: "Project #3",
+        link: "",
+      },
+      {
+        title: "Project #4",
+        link: "",
+      },
+      {
+        title: "Project #5",
+        link: "",
+      },
+    ],
+  },
+  {
+    title: "Contributing",
+    links: [
+      {
+        title: "Contributing guidelines",
+        link: "",
+      },
+      {
+        title: "Code contributions",
+        link: "",
+      },
+      {
+        title: "Documentation contributions",
+        link: "",
+      },
+      {
+        title: "Management contributions",
+        link: "",
+      },
+    ],
+  },
+  {
+    title: "Safety & Support",
+    links: [
+      {
+        title: "Community Code of Conduct",
+        link: "",
+      },
+      {
+        title: "Community support",
+        link: "",
+      },
+    ],
+  },
+  {
+    title: "Miscellaneous",
+    links: [
+      {
+        title: "Frequently Asked Questions",
+        link: "",
+      },
+      {
+        title: "Join moja global",
+        link: "",
+      },
+    ],
+  },
+]
+
+
+export default function Community() {
+  return (
+    <section className="w-full max-w-8xl mx-auto py-12 md:py-16 lg:py-20">
+      <div className="space-y-6">
+        <h2 className="text-3xl text-center font-bold tracking-tight sm:text-4xl">
+          Know the Community
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-10">
+          {MyCommunitySections.map(({ title, links }, key) => (
+            <div key={key} className="space-y-4">
+              <h3 className="text-xl font-semibold">{title}</h3>
+              <div className="space-y-3">
+                {links.map(({ title, link }, index) => (
+                  <article
+                    key={index}
+                    className="dark:bg-gray-950 hover:underline transition-shadow"
+                  >
+                    <Link href={link}>
+                      <h4 className=" font-medium">{title}</h4>
+                    </Link>
+                  </article>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

components/events/dev-pic-component.tsx

@@ -79,7 +79,7 @@ export const DevPicComponent = ({
               indx={indx}
               product={product}
               translate={translateX}
-              key={product.title}
+              key={indx}
             />
           ))}
         </motion.div>
@@ -89,7 +89,8 @@ export const DevPicComponent = ({
               indx={indx}
               product={product}
               translate={translateXReverse}
-              key={product.title}
+              key={indx}
+
             />
           ))}
         </motion.div>
@@ -99,7 +100,8 @@ export const DevPicComponent = ({
               indx={indx}
               product={product}
               translate={translateX}
-              key={product.title}
+              key={indx}
+
             />
           ))}
         </motion.div>
@@ -150,7 +152,8 @@ export const ProductCard = ({
       whileHover={{
         y: -20,
       }}
-      key={product.title}
+      key={indx}
+
       className="relative group/product h-96 w-[30rem]  flex-shrink-0"
     >
       <Link

components/events/organizers.tsx

@@ -75,8 +75,8 @@ export default function Organizers() {
           role="list"
           className="mx-auto mt-20 grid max-w-4xl grid-cols-1 gap-x-32 gap-y-16 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3"
         >
-          {people.map((person) => (
-            <li key={person.name}>
+          {people.map((person, index) => (
+            <li key={index}>
               <img
                 className="mx-auto h-56 w-56 rounded-full"
                 src={person.imageUrl}