+ );
+}
diff --git a/components/newsroom/Newsroom.tsx b/components/newsroom/Newsroom.tsx
new file mode 100644
index 00000000000..197d3bd9045
--- /dev/null
+++ b/components/newsroom/Newsroom.tsx
@@ -0,0 +1,117 @@
+import { TwitterTimelineEmbed } from 'react-twitter-embed';
+
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
+
+import ArrowRight from '../icons/ArrowRight';
+import Heading from '../typography/Heading';
+import Paragraph from '../typography/Paragraph';
+import TextLink from '../typography/TextLink';
+import NewsroomArticle from './NewsroomArticle';
+import NewsroomBlogPosts from './NewsroomBlogPosts';
+import NewsroomYoutube from './NewsroomYoutube';
+
+/**
+ * A component representing the newsroom section of AsyncAPI website.
+ * @returns {JSX.Element} The JSX element representing the newsroom section.
+ */
+export default function Newsroom() {
+ return (
+ <>
+
+
+ Latest Updates
+
+
+ Get a glimpse of latest news, events, and blog posts. Want to publish a blog post? We love community stories.
+
+ Submit yours!
+
+
+
+
+
+
+
+ From the blog
+
+
+ Check out these articles written by community members
+
+
+
+ Read all blog posts
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Latest News
+
+
+ Read about what people are saying about AsyncAPI
+
+
+
+ Follow us on Twitter
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Video & Live Streams
+
+
+ Watch our latest videos and live streams on the AsyncAPI YouTube channel
+
+
+
+ Visit our YouTube channel
+
+
+
+
+
+
+
+
+ >
+ );
+}
diff --git a/components/newsroom/NewsroomArticle.tsx b/components/newsroom/NewsroomArticle.tsx
index 5acd428833e..be2e0dc8817 100644
--- a/components/newsroom/NewsroomArticle.tsx
+++ b/components/newsroom/NewsroomArticle.tsx
@@ -13,6 +13,10 @@ interface Article {
title: string;
}
+/**
+ * Represents an article in the newsroom section.
+ * @returns {JSX.Element} The JSX element representing the newsroom article.
+ */
const NewsroomArticle: React.FC = () => {
return (
diff --git a/components/newsroom/NewsroomSection.tsx b/components/newsroom/NewsroomSection.tsx
new file mode 100644
index 00000000000..846cd875bfc
--- /dev/null
+++ b/components/newsroom/NewsroomSection.tsx
@@ -0,0 +1,62 @@
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
+
+import { getAllPosts } from '../../utils/api';
+import { useTranslation } from '../../utils/i18n';
+import Button from '../buttons/Button';
+import Heading from '../typography/Heading';
+import Paragraph from '../typography/Paragraph';
+import FeaturedBlogPost from './FeaturedBlogPost';
+
+/**
+ * Represents the Newsroom section component.
+ * @returns {JSX.Element} JSX representation of the component.
+ */
+export default function NewsroomSection() {
+ const { t } = useTranslation('common');
+
+ const posts = getAllPosts()
+ .blog.sort((i1, i2) => {
+ const i1Date = new Date(i1.date);
+ const i2Date = new Date(i2.date);
+
+ if (i1.featured && !i2.featured) return -1;
+ if (!i1.featured && i2.featured) return 1;
+
+ return i2Date.valueOf() - i1Date.valueOf();
+ })
+ .slice(0, 1);
+
+ return (
+