diff --git a/components/CommunityEvents.tsx b/components/CommunityEvents.tsx
new file mode 100644
index 000000000000..868360265b21
--- /dev/null
+++ b/components/CommunityEvents.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+
+import EventFilter from '@/components/navigation/EventFilter';
+import EventPostItem from '@/components/navigation/EventPostItem';
+import Heading from '@/components/typography/Heading';
+import Paragraph from '@/components/typography/Paragraph';
+import meetings from '@/config/meetings.json';
+import type { Event } from '@/types/pages/community/Community';
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
+import { getEvents } from '@/utils/staticHelpers';
+
+const CommunityEvents = () => {
+  const [events, setEvents] = useState(getEvents(meetings));
+
+  return (
+    <div className='mt-20'>
+      <div className='items-center justify-between sm:flex'>
+        <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.md}>
+          All Events
+        </Heading>
+        <div className='mt-5 sm:mt-0'>
+          <EventFilter data={meetings} setData={setEvents} />
+        </div>
+      </div>
+      <div className='mt-10'>
+        {!events || events.length === 0 ? (
+          <div className='flex content-center justify-center'>
+            <Paragraph typeStyle={ParagraphTypeStyle.md} className='mx-auto mt-5 max-w-2xl'>
+              No Events. Check back later!
+            </Paragraph>
+          </div>
+        ) : (
+          <ul className='grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3'>
+            {events.map((event: Event, index: number) => {
+              return <EventPostItem key={index} id={event.title} post={event} />;
+            })}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CommunityEvents;
diff --git a/pages/community/events/index.tsx b/pages/community/events/index.tsx
index 8e2e966ca668..f0314cb69a6d 100644
--- a/pages/community/events/index.tsx
+++ b/pages/community/events/index.tsx
@@ -1,30 +1,29 @@
 /* eslint-disable react/no-unescaped-entities */
 import { ArrowRightIcon } from '@heroicons/react/outline';
-import React, { useState } from 'react';
 
-import type { Event } from '@/types/pages/community/Community';
+import CommunityEvents from '@/components/CommunityEvents';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
+import { makeStaticProps } from '@/utils/getStatic';
 
 import GoogleCalendarButton from '../../../components/buttons/GoogleCalendarButton';
 import ICSFileButton from '../../../components/buttons/ICSFileButton';
 import GenericLayout from '../../../components/layout/GenericLayout';
 import Meeting from '../../../components/Meeting';
-import EventFilter from '../../../components/navigation/EventFilter';
-import EventPostItem from '../../../components/navigation/EventPostItem';
 import NewsletterSubscribe from '../../../components/NewsletterSubscribe';
 import Heading from '../../../components/typography/Heading';
 import Paragraph from '../../../components/typography/Paragraph';
 import TextLink from '../../../components/typography/TextLink';
-import meetings from '../../../config/meetings.json';
-import { getEvents } from '../../../utils/staticHelpers';
+
+const getStaticProps = makeStaticProps(['landing-page', 'footer', 'common']);
+
+export { getStaticProps };
 
 /**
  * @description This is the events page which displays all the events and meetings.
  */
 export default function EventIndex() {
   const image = '/img/social/community-events.webp';
-  const [events, setEvents] = useState(getEvents(meetings));
 
   return (
     <GenericLayout title='AsyncAPI events' description='Our catalogs of events and meetups' image={image} wide>
@@ -89,31 +88,7 @@ export default function EventIndex() {
           </div>
         </div>
       </div>
-      <div className='mt-20'>
-        <div className='items-center justify-between sm:flex'>
-          <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.md}>
-            All Events
-          </Heading>
-          <div className='mt-5 sm:mt-0'>
-            <EventFilter data={meetings} setData={setEvents} />
-          </div>
-        </div>
-        <div className='mt-10'>
-          {!events || events.length === 0 ? (
-            <div className='flex content-center justify-center'>
-              <Paragraph typeStyle={ParagraphTypeStyle.md} className='mx-auto mt-5 max-w-2xl'>
-                No Events. Check back later!
-              </Paragraph>
-            </div>
-          ) : (
-            <ul className='grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3'>
-              {events.map((event: Event, index: number) => {
-                return <EventPostItem key={index} id={event.title} post={event} />;
-              })}
-            </ul>
-          )}
-        </div>
-      </div>
+      <CommunityEvents />
       <div className='mt-24'>
         <div className='lg:flex lg:justify-between' data-testid='EventTypesCard'>
           <div className='lg:w-[30%]'>
diff --git a/pages/community/index.tsx b/pages/community/index.tsx
index e8a68b23528f..7b76b6407d36 100644
--- a/pages/community/index.tsx
+++ b/pages/community/index.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import { CardType } from '@/types/components/community/CardPropsType';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+import { makeStaticProps } from '@/utils/getStatic';
 
 import Card from '../../components/community/Card';
 import Header from '../../components/community/Header';
@@ -14,6 +15,10 @@ import Heading from '../../components/typography/Heading';
 import eventsData from '../../config/meetings.json';
 import { getEvents } from '../../utils/staticHelpers';
 
+const getStaticProps = makeStaticProps(['common']);
+
+export { getStaticProps };
+
 interface Event {
   title: string;
   date: moment.Moment;
diff --git a/pages/community/tsc.tsx b/pages/community/tsc.tsx
index 755652736f1b..aef6af4c7995 100644
--- a/pages/community/tsc.tsx
+++ b/pages/community/tsc.tsx
@@ -1,7 +1,7 @@
 import { sortBy } from 'lodash';
-import React, { useState } from 'react';
 
 import type { Tsc } from '@/types/pages/community/Community';
+import { makeStaticProps } from '@/utils/getStatic';
 
 import IconGithub from '../../components/icons/Github';
 import IconLinkedIn from '../../components/icons/LinkedIn';
@@ -11,6 +11,10 @@ import NewsletterSubscribe from '../../components/NewsletterSubscribe';
 import TextLink from '../../components/typography/TextLink';
 import TSCMembersList from '../../config/MAINTAINERS.json';
 
+const getStaticProps = makeStaticProps(['common']);
+
+export { getStaticProps };
+
 interface SocialLinkProps {
   href: string;
   social: string;
@@ -66,11 +70,9 @@ function addAdditionalUserInfo(user: Tsc) {
  * @returns The Twitter SVG component.
  */
 function TwitterSVG() {
-  const [isHovered, setIsHovered] = useState(false);
-
   return (
-    <div className='size-5' onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
-      <IconTwitter className={isHovered ? 'hover:fill-black' : ''} />
+    <div className='size-5'>
+      <IconTwitter className={'hover:fill-black'} />
     </div>
   );
 }
@@ -81,11 +83,9 @@ function TwitterSVG() {
  * @returns The GitHub SVG component.
  */
 function GitHubSVG() {
-  const [isHovered, setIsHovered] = useState(false);
-
   return (
-    <div className='size-5' onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
-      <IconGithub className={isHovered ? 'hover:fill-black' : ''} />
+    <div className='size-5'>
+      <IconGithub className={'hover:fill-black'} />
     </div>
   );
 }
@@ -96,12 +96,10 @@ function GitHubSVG() {
  * @returns The LinkedIn SVG component.
  */
 function LinkedInSVG() {
-  const [isHovered, setIsHovered] = useState(false);
-
   return (
-    <div className='size-5' onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
+    <div className='size-5'>
       {/* Use the imported SVG icon component */}
-      <IconLinkedIn className={isHovered ? 'hover:fill-linkedin' : ''} />
+      <IconLinkedIn className={'hover:fill-linkedin'} />
     </div>
   );
 }
diff --git a/utils/getStatic.ts b/utils/getStatic.ts
index 56af2cf6b1ca..2d30a29e7230 100644
--- a/utils/getStatic.ts
+++ b/utils/getStatic.ts
@@ -29,7 +29,7 @@ export const getStaticPaths = () => ({
  * @returns An object containing the internationalization props.
  */
 export async function getI18nProps(ctx: any, ns = ['common']) {
-  const locale = ctx?.params?.lang;
+  const locale = ctx?.params?.lang ? ctx?.params?.lang : 'en';
   const props = {
     ...(await serverSideTranslations(locale, ns))
   };