added dummy posts, fixed post-item image and link

components/home-page/featured-posts.js

@@ -1,10 +1,13 @@
+import PostsGrid from '../posts/posts-grid';
 import classes from './featured-posts.module.css';
 
-function FeaturedPosts() {
-  return <section className={classes.latest}>
-    <h2>Featured Posts</h2>
-
-  </section>
+function FeaturedPosts(props) {
+  return (
+    <section className={classes.latest}>
+      <h2>Featured Posts</h2>
+      <PostsGrid posts={props.posts} />
+    </section>
+  );
 }
 
-export default FeaturedPosts;
+export default FeaturedPosts;

components/posts/post-item.js

@@ -13,13 +13,20 @@ function PostItem(props) {
   });
 
   const imagePath = `/images/posts/${slug}/${image}`;
+  const linkPath = `/posts/${slug}`;
 
   return (
     <li className={classes.post}>
-      <Link>
+      <Link href={linkPath}>
         <a>
           <div className={classes.image}>
-            <Image src={imagePath} alt={title} width={300} height={200} />
+            <Image
+              src={imagePath}
+              alt={title}
+              width={300}
+              height={200}
+              layout='responsive'
+            />
           </div>
           <div className={classes.content}>
             <h3>{title}</h3>

components/posts/posts-grid.js

@@ -7,7 +7,7 @@ function PostsGrid(props) {
   return (
     <ul className={classes.grid}>
       {posts.map((post) => (
-        <PostItem />
+        <PostItem key={post.slug} post={post} />
       ))}
     </ul>
   );

pages/index.js

@@ -1,11 +1,48 @@
 import { Fragment } from 'react';
 
+import FeaturedPosts from '../components/home-page/featured-posts';
 import Hero from '../components/home-page/hero';
 
+const DUMMY_POSTS = [
+  {
+    slug: 'getting-started-with-nextjs',
+    title: 'Getting Started with NextJS',
+    image: 'getting-started-nextjs.png',
+    excerpt:
+      'NextJS is a the React framework for production - it makes building fullstack React apps and sites a breeze and ships with built-in SSR.',
+    date: '2022-02-10',
+  },
+  {
+    slug: 'getting-started-with-nextjs2',
+    title: 'Getting Started with NextJS',
+    image: 'getting-started-nextjs.png',
+    excerpt:
+      'NextJS is a the React framework for production - it makes building fullstack React apps and sites a breeze and ships with built-in SSR.',
+    date: '2022-02-10',
+  },
+  {
+    slug: 'getting-started-with-nextjs3',
+    title: 'Getting Started with NextJS',
+    image: 'getting-started-nextjs.png',
+    excerpt:
+      'NextJS is a the React framework for production - it makes building fullstack React apps and sites a breeze and ships with built-in SSR.',
+    date: '2022-02-10',
+  },
+  {
+    slug: 'getting-started-with-nextjs4',
+    title: 'Getting Started with NextJS',
+    image: 'getting-started-nextjs.png',
+    excerpt:
+      'NextJS is a the React framework for production - it makes building fullstack React apps and sites a breeze and ships with built-in SSR.',
+    date: '2022-02-10',
+  },
+];
+
 function HomePage() {
   return (
     <Fragment>
       <Hero />
+      <FeaturedPosts posts={DUMMY_POSTS} />
     </Fragment>
   );
 }