feat: created newsroom section

components/BlogView.js

@@ -0,0 +1,51 @@
+import {useEffect} from 'react'
+import BlogPostItem from './navigation/BlogPostItem'
+import { getAllPosts } from '../lib/api'
+import ArrowRight from './icons/ArrowRight'
+import ArrowLeft from './icons/ArrowLeft'
+
+export default function BlogView() {
+    const posts = getAllPosts()
+    .filter(p => p.slug.startsWith('/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 - i1Date
+    })
+    .slice(0, 5)
+    let blogContainer
+    useEffect(() => {
+      blogContainer = document.getElementById('blog-container')
+    }, [])
+
+    const shiftLeft = (e) =>{
+      e.preventDefault()
+      blogContainer.scrollLeft-=350
+     }
+    const shiftRight = (e) =>{
+    e.preventDefault()
+    blogContainer.scrollLeft+=350
+    }  
+  return (
+    <div className="flex-col lg:flex lg:w-4/5 p-4 overflow-auto">
+        <div className="flex snap-x gap-6 overflow-x-auto scroll-none" id="blog-container">
+            {
+                posts.map((post, index) => (
+                     <BlogPostItem className='snap-start scroll-ml-6' post={post} key={index} /> 
+                  ))
+            }
+        </div>
+       <div className="flex flex-row mt-4">
+           <div className="border-2 py-4 px-8 shadow-md rounded border-gray-100 text-gray-400 hover:border-secondary-500 hover:text-secondary-500 hover:bg-secondary-100 mx-2" onClick={shiftLeft}>
+                <ArrowLeft className="w-5" />
+           </div>
+           <div className="border-2 py-2 px-6 shadow-md rounded border-gray-100 text-gray-400 hover:border-secondary-500 hover:text-secondary-500 hover:bg-secondary-100 mx-2" onClick={shiftRight}>
+                <ArrowRight className="w-8" />
+           </div>
+        </div>   
+    </div>
+  )
+}

components/navigation/BlogPostItem.js

@@ -25,7 +25,7 @@ export default function BlogPostItem({ post, className = '' }) {
 
   return (
     <Link href={post.slug} passHref>
-      <a className={`flex flex-col border border-gray-200 rounded-lg shadow-md divide-y divide-gray-200 transition-all duration-300 ease-in-out hover:shadow-lg overflow-hidden cursor-pointer ${className}`}>
+      <a className={`flex flex-col border border-gray-200 rounded-lg shadow-md divide-y divide-gray-200 transition-all duration-300 ease-in-out hover:shadow-lg overflow-hidden cursor-pointer ${className}`} style={{minWidth:"22rem"}}>
             <img className="h-48 w-full object-cover" src={post.cover} alt="" />  
         <div className="flex-1 bg-white p-6 flex flex-col justify-between">
           <div className="flex-1">

components/typography/TextLink.js

@@ -1,3 +1,4 @@
+import Link from 'next/link'
 
 export default function TextLink({
     href,
@@ -11,9 +12,11 @@ export default function TextLink({
     return(
         <>
         {' '}
-        <a href={href} target={target} rel="noreferrer noopener" className={classNames}>
+        <Link href={href} passHref>
+            <a target={target} rel="noreferrer noopener" className={classNames}>
             {children}
-        </a>
+            </a>
+        </Link>
         </>
     )
 

css/styles.css

@@ -10,6 +10,7 @@
 html, body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  scroll-behavior: smooth;
 }
 
 li > p {

pages/index.js

@@ -6,6 +6,7 @@ import NewsletterSubscribe from '../components/NewsletterSubscribe'
 import Sponsors from '../components/Sponsors'
 import Head from '../components/Head'
 import Slack from '../components/slack'
+import ArrowRight from '../components/icons/ArrowRight'
 import Button from '../components/buttons/Button'
 import Calendar from '../components/Calendar'
 import AdidasLogo from '../components/logos/Adidas'
@@ -15,6 +16,7 @@ import SalesforceLogo from '../components/logos/Salesforce'
 import SapLogo from '../components/logos/SAP'
 import Testimonial from '../components/Testimonial'
 import BlogPostItem from '../components/navigation/BlogPostItem'
+import BlogView from '../components/BlogView'
 import Heading from '../components/typography/Heading'
 import Paragraph from '../components/typography/Paragraph'
 import TextLink from '../components/typography/TextLink'
@@ -43,11 +45,11 @@ function HomePage() {
     <>
       <Head />
       <StickyNavbar>
-       <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
+        <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
       </StickyNavbar>
 
       <Container wide>
-      <Hero className="mb-24" />
+        <Hero className="mb-24" />
       </Container>
 
       <Container className="text-center pb-12" wide>
@@ -123,7 +125,7 @@ function HomePage() {
 
             <div className="mt-12 lg:flex lg:flex-row-reverse">
               <div className="mt-10 lg:mt-0 lg:flex-1">
-                <Calendar size="2" className="float-left"/>
+                <Calendar size="2" className="float-left" />
               </div>
               <div className="lg:text-left lg:max-w-xl lg:mr-12">
                 <div className="mt-5">
@@ -183,7 +185,7 @@ function HomePage() {
           typeStyle="heading-md-semibold"
           className="mb-4"
         >
-            Want to Sponsor Us?
+          Want to Sponsor Us?
         </Heading>
         <Paragraph className="mt-2 md:w-1/2 md:mx-auto">
           These great organizations are already supporting AsyncAPI. Want to become a sponsor?
@@ -234,7 +236,7 @@ function HomePage() {
         <Paragraph className="mt-3 max-w-2xl mx-auto sm:mt-4 pb-4">
           The following companies support us by letting us use their products for free. Interested in supporting us too?
           <TextLink href="mailto:[email protected]" target="_blank">
-              Email us
+            Email us
           </TextLink> for more info.
         </Paragraph>
         <SupportUs className="mt-4" showSupportBanner={false} />
@@ -245,29 +247,50 @@ function HomePage() {
             level="h2"
             typeStyle="heading-lg"
           >
-            Latest stories from our blog
+            Latest Updates
           </Heading>
-          <Paragraph className="mt-3 max-w-2xl mx-auto sm:mt-4">
-            Find the latest and greatest stories from our community.
-          </Paragraph>
-          <Paragraph typeStyle="body-md" className="max-w-2xl mx-auto">
-            Want to publish a blog post? We love community stories.
+          <Paragraph typeStyle="body-md" className="max-w-2xl mx-auto mt-3">
+            Get a glimpse of latest news, events, and blog posts. Want to publish a blog post? We love community stories.
             <TextLink href="https://github.com/asyncapi/website/issues/new?template=blog.md" target="_blank">
               Submit yours!
             </TextLink>
           </Paragraph>
         </div>
-        <div className="mt-12 mx-auto md:grid md:gap-5 md:grid-cols-2 lg:grid-cols-3 lg:max-w-none lg:px-8">
-          {
-            posts.map((post, index) => (
-              <BlogPostItem className="mb-8 md:mb-0" key={index} post={post} />
-            ))
-          }
+        <div className="lg:flex flex-row mt-4">
+          <div className="text-center lg:text-left lg:w-1/5 pt-4">
+            <Heading level="h4" typeStyle="heading-md-semibold">
+              From the blog
+            </Heading>
+            <Paragraph typeStyle="body-md" className="mt-4">
+              Check out these articles written by community members
+            </Paragraph>
+            <div className="mt-4">
+              <TextLink href="/blog" className="mt-4">
+                Read all blog posts
+                <ArrowRight className="inline w-6" />
+              </TextLink>
+            </div>
+          </div>
+          <BlogView />
         </div>
-        <div className="my-10 text-center">
-          <Button bgClassName="bg-none border border-gray-200 text-gray-800 hover:text-gray-700 shadow-none" href="/blog" text="View more blog posts" />
+        <div className="lg:flex flex-row mt-4">
+          <div className="text-center lg:text-left lg:w-1/5 pt-4">
+            <Heading level="h4" typeStyle="heading-md-semibold">
+              Latest News
+            </Heading>
+            <Paragraph typeStyle="body-md" className="mt-4">
+              Read about what people are saying about AsyncAPI
+            </Paragraph>
+            <div className="mt-4">
+              <TextLink href="https://twitter.com/AsyncAPISpec" className="mt-4" target="_blank">
+                Follow us on Twitter
+                <ArrowRight className="inline w-6" />
+              </TextLink>
+            </div>
+          </div>
         </div>
-      </Container>
+    </Container>
+
     </>
   )
 }

tailwind.config.js

@@ -207,6 +207,14 @@ module.exports = {
         '.font-ligatures-contextual': {
           'font-variant-ligatures': 'contextual',
         },
+        '.scroll-none':{
+          'scrollbar-width': 'none',
+          '-ms-overflow-style': 'none', 
+        },
+        '.scroll-none::-webkit-scrollbar':{
+          'display':'none',
+          'scroll-behavior':'smooth',
+        }
       })
     })
   ],