From fe96089c31b34f9a04e2522242bb2e4af9a0b0c9 Mon Sep 17 00:00:00 2001
From: arnab <arnabchatterjee.ac.2@gmail.com>
Date: Thu, 9 Feb 2023 19:31:10 +0530
Subject: [PATCH] Image Optimisation - Added placeholder blur for the banners
 so that a placeholder is used while they are loading

---
 components/Home/Chapters.js       | 1 +
 components/Shared/AboutBanner.js  | 5 +++--
 components/Shared/QuotesBanner.js | 5 +++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/components/Home/Chapters.js b/components/Home/Chapters.js
index d58236a..1ab0966 100755
--- a/components/Home/Chapters.js
+++ b/components/Home/Chapters.js
@@ -1,6 +1,7 @@
 import React from "react";
 import Card from "./Card";
 import Image from "next/image";
+import BGVersesBanner from "../../public/bg-verses-fixed.png"
 
 const Chapters = ({ chapters }) => {
   return (
diff --git a/components/Shared/AboutBanner.js b/components/Shared/AboutBanner.js
index 6151278..9ac7997 100755
--- a/components/Shared/AboutBanner.js
+++ b/components/Shared/AboutBanner.js
@@ -1,12 +1,13 @@
 import React from "react";
 import Image from "next/image";
-
+import AboutGitaBanner from "../../public/quotes-bg.png"
 export default function AboutBanner() {
   return (
     <>
       <div className="max-w-full mx-auto xl:mx-24 z-10 relative">
         <Image
-          src="/about-gita.png"
+          src={AboutGitaBanner}
+          placeholder="blur"
           alt="BG About Banner Image"
           layout="fill"
           objectFit="cover"
diff --git a/components/Shared/QuotesBanner.js b/components/Shared/QuotesBanner.js
index 9bf8926..295a77e 100755
--- a/components/Shared/QuotesBanner.js
+++ b/components/Shared/QuotesBanner.js
@@ -1,12 +1,13 @@
 import React from "react";
 import Image from "next/image";
-
+import QuotesBannerBG from "../../public/quotes-bg.png"
 export default function QuotesBanner() {
   return (
     <div className="max-w-full mx-auto xl:mx-24 z-10 relative">
       <Image
-        src="/quotes-bg.png"
+        src={QuotesBannerBG}
         alt="BG Quotes Banner Image"
+        placeholder="blur"
         layout="fill"
         objectFit="cover"
         objectPosition="center"