From 6245208baba6a3ccba79776c429902096fe0c26a Mon Sep 17 00:00:00 2001
From: khalilcodes <khalilali.j@gmail.com>
Date: Wed, 1 Jun 2022 18:56:01 +0300
Subject: [PATCH] [site/seo]: replace img with next image component

---
 site/components/Home/Latest.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/site/components/Home/Latest.js b/site/components/Home/Latest.js
index f65cd14..91e4375 100644
--- a/site/components/Home/Latest.js
+++ b/site/components/Home/Latest.js
@@ -1,3 +1,5 @@
+import Image from "next/image"
+
 export function Latest({ posts }) {
   return (
     <div className="relative pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
@@ -15,8 +17,11 @@ export function Latest({ posts }) {
           {posts && posts.map((post) => (
             <div key={post.title} className="flex flex-col rounded-lg shadow-lg overflow-hidden">
               <div className="flex-shrink-0">
-                {post.image ? <img className="h-48 w-full object-cover" src={post.image} alt={post.title} />
-                 : <div className="h-20 w-full bg-slate-500" />
+                {post.image ? (
+                  <div className="relative h-48 w-full">
+                    <Image className="object-cover" src={post.image} alt={post.title} layout="fill" placeholder="blur" blurDataURL={post.image} />
+                  </div>
+                  ) : <div className="h-20 w-full bg-slate-500" />
                 }
               </div>
               <div className="flex-1 bg-slate-800 p-6 flex flex-col justify-between">