From 319090491679cc1a0aff2ca8196f447272b1523c Mon Sep 17 00:00:00 2001
From: Osama Sayed <osamasayed@users.noreply.github.com>
Date: Thu, 25 Apr 2024 13:10:00 +0300
Subject: [PATCH 1/6] Add NEXT_PUBLIC_GENERATE_SITEMAP_ADDITIONAL_PATHS flag
 (#2147)

---
 next-sitemap.js | 204 +++++++++++++++++++++++++-----------------------
 1 file changed, 106 insertions(+), 98 deletions(-)

diff --git a/next-sitemap.js b/next-sitemap.js
index fd7ad90867..5b8533e21a 100644
--- a/next-sitemap.js
+++ b/next-sitemap.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 /* eslint-disable max-lines */
 /* eslint-disable jsdoc/require-returns */
 /* eslint-disable import/no-extraneous-dependencies */
@@ -12,6 +13,8 @@ const { locales } = require('./i18n.json');
 
 const isProduction = process.env.NEXT_PUBLIC_VERCEL_ENV === 'production';
 const isDevelopment = process.env.NEXT_PUBLIC_VERCEL_ENV === 'development';
+const shouldGenerateAdditionalPaths =
+  process.env.NEXT_PUBLIC_GENERATE_SITEMAP_ADDITIONAL_PATHS === 'true';
 
 const BASE_PATH =
   `${isDevelopment ? 'http' : 'https'}://${process.env.NEXT_PUBLIC_VERCEL_URL}` ||
@@ -96,114 +99,119 @@ module.exports = {
       alternateRefs: config.alternateRefs ?? [],
     };
   },
-  additionalPaths: async (config) => {
-    const result = [];
-    let tafsirSlugs = [];
-    let reciterIds = [];
-    await getAvailableTafsirs().then((response) => {
-      tafsirSlugs = response.tafsirs.map((tafsir) => tafsir.slug);
-    });
-    await getAvailableReciters().then((response) => {
-      reciterIds = response.reciters.map((reciter) => reciter.id);
-    });
-    chapters.forEach((chapterId) => {
-      // 1. add the chapter slugs in English along with the localized slugs in every locale
-      const englishChapterSlug = englishChaptersData[chapterId].slug;
-      result.push({
-        loc: `/${englishChapterSlug}`,
-        alternateRefs: getAlternateRefs(chapterId),
-      });
-      // 2. add slugged /surah/[chapterSlug]/info in English along with the localized slugs in every locale
-      result.push({
-        loc: `/surah/${englishChapterSlug}/info`,
-        alternateRefs: getAlternateRefs(chapterId, true, 'surah', 'info'),
-      });
-
-      // 3. /reciters/[reciterId]/[chapterSlug]
-      reciterIds.forEach((reciterId) => {
-        const location = `/reciters/${reciterId}/${englishChapterSlug}`;
-        result.push({
-          loc: location,
-          alternateRefs: getAlternateRefs(chapterId, false, '', location),
+  additionalPaths: shouldGenerateAdditionalPaths
+    ? async (config) => {
+        const result = [];
+        let tafsirSlugs = [];
+        let reciterIds = [];
+        await getAvailableTafsirs().then((response) => {
+          tafsirSlugs = response.tafsirs.map((tafsir) => tafsir.slug);
         });
-      });
-
-      // 4. generate the verses for each of the chapters in each locale as well
-      range(englishChaptersData[chapterId].versesCount).forEach((verseId) => {
-        const verseNumber = verseId + 1;
-        const verseIdValue = verseNumber;
-        const verseKey = `${chapterId}:${verseIdValue}`;
-        const isAyatulKursi = chapterId === 2 && verseNumber === 255;
-        if (isAyatulKursi) {
-          // instead of /al-baqarah/255, we push /ayatul-kursi
+        await getAvailableReciters().then((response) => {
+          reciterIds = response.reciters.map((reciter) => reciter.id);
+        });
+        chapters.forEach((chapterId) => {
+          // 1. add the chapter slugs in English along with the localized slugs in every locale
+          const englishChapterSlug = englishChaptersData[chapterId].slug;
           result.push({
-            loc: `/ayatul-kursi`,
-            alternateRefs: getAlternateRefs(null, false, '', 'ayatul-kursi'),
+            loc: `/${englishChapterSlug}`,
+            alternateRefs: getAlternateRefs(chapterId),
           });
-        } else {
+          // 2. add slugged /surah/[chapterSlug]/info in English along with the localized slugs in every locale
           result.push({
-            loc: `/${englishChapterSlug}/${verseIdValue}`,
-            alternateRefs: getAlternateRefs(chapterId, true, '', verseIdValue),
+            loc: `/surah/${englishChapterSlug}/info`,
+            alternateRefs: getAlternateRefs(chapterId, true, 'surah', 'info'),
+          });
+
+          // 3. /reciters/[reciterId]/[chapterSlug]
+          reciterIds.forEach((reciterId) => {
+            const location = `/reciters/${reciterId}/${englishChapterSlug}`;
+            result.push({
+              loc: location,
+              alternateRefs: getAlternateRefs(chapterId, false, '', location),
+            });
           });
-        }
-        // 5. add /[chapterId]/[verseId]/tafsirs route
-        result.push({
-          loc: `/${englishChapterSlug}/${verseIdValue}/tafsirs`,
-          alternateRefs: getAlternateRefs(chapterId, true, '', `${verseIdValue}/tafsirs`),
+
+          // 4. generate the verses for each of the chapters in each locale as well
+          range(englishChaptersData[chapterId].versesCount).forEach((verseId) => {
+            const verseNumber = verseId + 1;
+            const verseIdValue = verseNumber;
+            const verseKey = `${chapterId}:${verseIdValue}`;
+            const isAyatulKursi = chapterId === 2 && verseNumber === 255;
+            if (isAyatulKursi) {
+              // instead of /al-baqarah/255, we push /ayatul-kursi
+              result.push({
+                loc: `/ayatul-kursi`,
+                alternateRefs: getAlternateRefs(null, false, '', 'ayatul-kursi'),
+              });
+            } else {
+              result.push({
+                loc: `/${englishChapterSlug}/${verseIdValue}`,
+                alternateRefs: getAlternateRefs(chapterId, true, '', verseIdValue),
+              });
+            }
+            // 5. add /[chapterId]/[verseId]/tafsirs route
+            result.push({
+              loc: `/${englishChapterSlug}/${verseIdValue}/tafsirs`,
+              alternateRefs: getAlternateRefs(chapterId, true, '', `${verseIdValue}/tafsirs`),
+            });
+            // 6. /[verseKey]/tafsirs/[tafsirSlug]
+            tafsirSlugs.forEach((tafsirSlug) => {
+              const location = `${verseKey}/tafsirs/${tafsirSlug}`;
+              result.push({
+                loc: location,
+                alternateRefs: getAlternateRefs(chapterId, false, '', location),
+              });
+            });
+            // 7. /[verseKey]/reflections
+            const reflectionsLocation = `${verseKey}/reflections`;
+            result.push({
+              loc: reflectionsLocation,
+              alternateRefs: getAlternateRefs(chapterId, false, '', reflectionsLocation),
+            });
+          });
+        });
+        // 7. /juz/[juzId]
+        range(1, 31).forEach(async (juzId) => {
+          result.push(await config.transform(config, `/juz/${juzId}`));
+        });
+        // 8. /hizb/[hizbId]
+        range(1, 61).forEach(async (hizbId) => {
+          result.push(await config.transform(config, `/hizb/${hizbId}`));
         });
-        // 6. /[verseKey]/tafsirs/[tafsirSlug]
-        tafsirSlugs.forEach((tafsirSlug) => {
-          const location = `${verseKey}/tafsirs/${tafsirSlug}`;
+        // 9. /rub/[rubId]
+        range(1, 241).forEach(async (rubId) => {
+          result.push(await config.transform(config, `/rub/${rubId}`));
+        });
+        // 10. /page/[pageId]
+        range(1, 605).forEach(async (pageId) => {
+          result.push(await config.transform(config, `/page/${pageId}`));
+        });
+        // 11. /reciters/[reciterId]
+        reciterIds.forEach((reciterId) => {
+          const location = `/reciters/${reciterId}`;
           result.push({
             loc: location,
-            alternateRefs: getAlternateRefs(chapterId, false, '', location),
+            alternateRefs: getAlternateRefs('', false, '', location),
           });
         });
-        // 7. /[verseKey]/reflections
-        const reflectionsLocation = `${verseKey}/reflections`;
-        result.push({
-          loc: reflectionsLocation,
-          alternateRefs: getAlternateRefs(chapterId, false, '', reflectionsLocation),
-        });
-      });
-    });
-    // 7. /juz/[juzId]
-    range(1, 31).forEach(async (juzId) => {
-      result.push(await config.transform(config, `/juz/${juzId}`));
-    });
-    // 8. /hizb/[hizbId]
-    range(1, 61).forEach(async (hizbId) => {
-      result.push(await config.transform(config, `/hizb/${hizbId}`));
-    });
-    // 9. /rub/[rubId]
-    range(1, 241).forEach(async (rubId) => {
-      result.push(await config.transform(config, `/rub/${rubId}`));
-    });
-    // 10. /page/[pageId]
-    range(1, 605).forEach(async (pageId) => {
-      result.push(await config.transform(config, `/page/${pageId}`));
-    });
-    // 11. /reciters/[reciterId]
-    reciterIds.forEach((reciterId) => {
-      const location = `/reciters/${reciterId}`;
-      result.push({
-        loc: location,
-        alternateRefs: getAlternateRefs('', false, '', location),
-      });
-    });
 
-    // 12. /learning-plans/[learningPlanSlug]
-    const learningPlans = await getAvailableCourses();
-    // TODO: handle pagination in the future when we have more than 10 learning plans
-    learningPlans.data.forEach((learningPlan) => {
-      const location = `/learning-plans/${learningPlan.slug}`;
-      // TODO: handle per language learning plans e.g. Arabic learning plan should only show under /ar/[learning-plan-slug]
-      result.push({
-        loc: location,
-        alternateRefs: getAlternateRefs('', false, '', location),
-      });
-    });
+        // 12. /learning-plans/[learningPlanSlug]
+        const learningPlans = await getAvailableCourses();
+        // TODO: handle pagination in the future when we have more than 10 learning plans
+        learningPlans.data.forEach((learningPlan) => {
+          const location = `/learning-plans/${learningPlan.slug}`;
+          // TODO: handle per language learning plans e.g. Arabic learning plan should only show under /ar/[learning-plan-slug]
+          result.push({
+            loc: location,
+            alternateRefs: getAlternateRefs('', false, '', location),
+          });
+        });
 
-    return result;
-  },
+        return result;
+      }
+    : async () => {
+        console.log('Skipping additional paths generation...');
+        return Promise.resolve([]);
+      },
 };

From 629a8b8fb1592f672701e528eb23e0386b22fc04 Mon Sep 17 00:00:00 2001
From: Osama Sayed <toto777_90@hotmail.com>
Date: Thu, 25 Apr 2024 15:51:15 +0200
Subject: [PATCH 2/6] Add TEST AppEnv

---
 types/AppEnv.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/types/AppEnv.ts b/types/AppEnv.ts
index b55b9e947b..dc51ea1d0c 100644
--- a/types/AppEnv.ts
+++ b/types/AppEnv.ts
@@ -1,5 +1,6 @@
 enum AppEnv {
   PRODUCTION = 'production',
+  TEST = 'test',
   STAGING = 'staging',
   STAGING2 = 'staging2',
 }

From c61989288a852366b6a6c8ec41d3a9ebeb794d1b Mon Sep 17 00:00:00 2001
From: Osama Sayed <osamasayed@users.noreply.github.com>
Date: Sun, 21 Apr 2024 11:06:27 +0300
Subject: [PATCH 3/6] Advanced Copy Start From

---
 locales/ar/common.json                        |  2 +-
 locales/bn/common.json                        |  2 +-
 locales/en/common.json                        |  2 +-
 locales/fa/common.json                        |  2 +-
 locales/fr/common.json                        |  2 +-
 locales/id/common.json                        |  2 +-
 locales/it/common.json                        |  2 +-
 locales/ms/common.json                        |  2 +-
 locales/nl/common.json                        |  2 +-
 locales/pt/common.json                        |  2 +-
 locales/ru/common.json                        |  2 +-
 locales/sq/common.json                        |  2 +-
 locales/th/common.json                        |  2 +-
 locales/tr/common.json                        |  2 +-
 locales/ur/common.json                        |  2 +-
 locales/zh/common.json                        |  2 +-
 src/components/Banner/Banner.tsx              |  5 +---
 .../Course/Buttons/NavbarButton/index.tsx     |  2 +-
 src/components/Navbar/Navbar.module.scss      |  5 ++++
 src/components/Navbar/Navbar.tsx              |  5 ++++
 .../PageContainer/PageContainer.module.scss   |  4 +++
 .../SidebarNavigation.module.scss             |  6 +++++
 .../Verse/AdvancedCopy/VerseAdvancedCopy.tsx  | 25 ++++++++++---------
 src/pages/index.module.scss                   |  6 +++++
 24 files changed, 57 insertions(+), 33 deletions(-)

diff --git a/locales/ar/common.json b/locales/ar/common.json
index cad10832c1..62ca6d39a5 100644
--- a/locales/ar/common.json
+++ b/locales/ar/common.json
@@ -251,7 +251,7 @@
   "powered-by": "مشغل بواسطة",
   "prepare-hearts": {
     "cta": "اعرف أكثر",
-    "title": "جاهزون لرمضان؟"
+    "title": "استمر بعد رمضان!"
   },
   "prev": "السابق",
   "previous-ayah": "الآية السابقة",
diff --git a/locales/bn/common.json b/locales/bn/common.json
index 5fe0a26fbb..860daec2bb 100644
--- a/locales/bn/common.json
+++ b/locales/bn/common.json
@@ -251,7 +251,7 @@
   "powered-by": "দ্বারা চালিত",
   "prepare-hearts": {
     "cta": "আরও জানুন",
-    "title": "রমজানের জন্য প্রস্তুত?"
+    "title": "রমজানের পর চালিয়ে যান!"
   },
   "prev": "আগে",
   "previous-ayah": "আগের আয়াত",
diff --git a/locales/en/common.json b/locales/en/common.json
index 29c6188024..75cbb12d8d 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -251,7 +251,7 @@
   "powered-by": "Powered by",
   "prepare-hearts": {
     "cta": "Learn more",
-    "title": "Ready for Ramadan?"
+    "title": "Keep going after Ramadan!"
   },
   "prev": "Previous",
   "previous-ayah": "Previous Ayah",
diff --git a/locales/fa/common.json b/locales/fa/common.json
index 94e4c3dfc9..e38b3871e4 100644
--- a/locales/fa/common.json
+++ b/locales/fa/common.json
@@ -251,7 +251,7 @@
   "powered-by": "پشتیبانی شده توسط",
   "prepare-hearts": {
     "cta": "بیشتر بدانید",
-    "title": "برای ماه رمضان آماده اید؟"
+    "title": "پس از ماه رمضان ادامه دهید!"
   },
   "prev": "قبلی",
   "previous-ayah": "آیه قبلی",
diff --git a/locales/fr/common.json b/locales/fr/common.json
index 524c3165c8..0c9aa5e79e 100644
--- a/locales/fr/common.json
+++ b/locales/fr/common.json
@@ -251,7 +251,7 @@
   "powered-by": "Alimenté par",
   "prepare-hearts": {
     "cta": "Apprendre encore plus",
-    "title": "Prêt pour le Ramadan ?"
+    "title": "Continuez après le Ramadan !"
   },
   "prev": "Précédent",
   "previous-ayah": "Ayah précédent",
diff --git a/locales/id/common.json b/locales/id/common.json
index 7aab947853..db28070bfc 100644
--- a/locales/id/common.json
+++ b/locales/id/common.json
@@ -251,7 +251,7 @@
   "powered-by": "Dipersembahkan oleh",
   "prepare-hearts": {
     "cta": "Belajarlah lagi",
-    "title": "Siap menyambut Ramadhan?"
+    "title": "Lanjutkan setelah Ramadhan!"
   },
   "prev": "Sebelumnya",
   "previous-ayah": "Ayat sebelumnya",
diff --git a/locales/it/common.json b/locales/it/common.json
index 2bcd3dc72e..2fbe757e22 100644
--- a/locales/it/common.json
+++ b/locales/it/common.json
@@ -251,7 +251,7 @@
   "powered-by": "Offerto da",
   "prepare-hearts": {
     "cta": "Saperne di più",
-    "title": "Pronti per il Ramadan?"
+    "title": "Continuate così dopo il Ramadan!"
   },
   "prev": "Precedente",
   "previous-ayah": "Precedente Sì",
diff --git a/locales/ms/common.json b/locales/ms/common.json
index 83a06cfee5..74af2b7e53 100644
--- a/locales/ms/common.json
+++ b/locales/ms/common.json
@@ -251,7 +251,7 @@
   "powered-by": "Dikuasai oleh",
   "prepare-hearts": {
     "cta": "Ketahui lebih lanjut",
-    "title": "Bersedia untuk Ramadan?"
+    "title": "Teruskan selepas Ramadhan!"
   },
   "prev": "Sebelumnya",
   "previous-ayah": "Ayah sebelumnya",
diff --git a/locales/nl/common.json b/locales/nl/common.json
index 1accc60ade..e3bc6f3965 100644
--- a/locales/nl/common.json
+++ b/locales/nl/common.json
@@ -251,7 +251,7 @@
   "powered-by": "Aangedreven door",
   "prepare-hearts": {
     "cta": "Kom meer te weten",
-    "title": "Klaar voor de Ramadan?"
+    "title": "Ga door na de Ramadan!"
   },
   "prev": "Vorig",
   "previous-ayah": "Vorige Aya",
diff --git a/locales/pt/common.json b/locales/pt/common.json
index bddf868737..2f86a04804 100644
--- a/locales/pt/common.json
+++ b/locales/pt/common.json
@@ -251,7 +251,7 @@
   "powered-by": "Distribuído por",
   "prepare-hearts": {
     "cta": "Saber mais",
-    "title": "Pronto para o Ramadã?"
+    "title": "Continue depois do Ramadã!"
   },
   "prev": "Anterior",
   "previous-ayah": "Anterior Ayah",
diff --git a/locales/ru/common.json b/locales/ru/common.json
index cd2b48fbd7..84921d5391 100644
--- a/locales/ru/common.json
+++ b/locales/ru/common.json
@@ -251,7 +251,7 @@
   "powered-by": "Питаться от",
   "prepare-hearts": {
     "cta": "Узнать больше",
-    "title": "Готовы к Рамадану?"
+    "title": "Продолжайте идти после Рамадана!"
   },
   "prev": "Предыдущий",
   "previous-ayah": "Предыдущий аят",
diff --git a/locales/sq/common.json b/locales/sq/common.json
index 5cf3057fe0..e95ea8ef9c 100644
--- a/locales/sq/common.json
+++ b/locales/sq/common.json
@@ -251,7 +251,7 @@
   "powered-by": "Mundësuar nga",
   "prepare-hearts": {
     "cta": "Mëso më shumë",
-    "title": "Gati për Ramazan?"
+    "title": "Vazhdoni pas Ramazanit!"
   },
   "prev": "E mëparshme",
   "previous-ayah": "Ajeti i mëparshëm",
diff --git a/locales/th/common.json b/locales/th/common.json
index f5a4a50618..da77483e49 100644
--- a/locales/th/common.json
+++ b/locales/th/common.json
@@ -251,7 +251,7 @@
   "powered-by": "ขับเคลื่อนโดย",
   "prepare-hearts": {
     "cta": "เรียนรู้เพิ่มเติม",
-    "title": "พร้อมสำหรับเดือนรอมฎอนหรือยัง?"
+    "title": "ลุยต่อหลังรอมฎอน!"
   },
   "prev": "ก่อนหน้า",
   "previous-ayah": "อายะห์ก่อนหน้า",
diff --git a/locales/tr/common.json b/locales/tr/common.json
index 4892ae4851..e07496f11b 100644
--- a/locales/tr/common.json
+++ b/locales/tr/common.json
@@ -251,7 +251,7 @@
   "powered-by": "Tarafından desteklenmektedir",
   "prepare-hearts": {
     "cta": "Daha fazla bilgi edin",
-    "title": "Ramazan'a hazır mıyız?"
+    "title": "Ramazandan sonra devam!"
   },
   "prev": "Önceki",
   "previous-ayah": "Önceki Ayet",
diff --git a/locales/ur/common.json b/locales/ur/common.json
index 1c65c0a289..de62694031 100644
--- a/locales/ur/common.json
+++ b/locales/ur/common.json
@@ -251,7 +251,7 @@
   "powered-by": "کی طرف سے طاقت",
   "prepare-hearts": {
     "cta": "اورجانیے",
-    "title": "رمضان کے لیے تیار ہیں؟"
+    "title": "رمضان کے بعد چلتے رہو!"
   },
   "prev": "پچھلا",
   "previous-ayah": "پچھلی آیت",
diff --git a/locales/zh/common.json b/locales/zh/common.json
index 65440983be..f0e9b0dfae 100644
--- a/locales/zh/common.json
+++ b/locales/zh/common.json
@@ -251,7 +251,7 @@
   "powered-by": "Powered by",
   "prepare-hearts": {
     "cta": "了解更多",
-    "title": "准备好迎接斋月了吗？"
+    "title": "斋月之后继续努力！"
   },
   "prev": "以前的",
   "previous-ayah": "上一节文",
diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx
index 6b000a6138..5207281ccb 100644
--- a/src/components/Banner/Banner.tsx
+++ b/src/components/Banner/Banner.tsx
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 
 import styles from './Banner.module.scss';
 
-import MoonIllustrationSVG from '@/public/images/moon-illustration.svg';
+// import MoonIllustrationSVG from '@/public/images/moon-illustration.svg';
 import { selectIsBannerVisible } from '@/redux/slices/banner';
 
 type BannerProps = {
@@ -21,9 +21,6 @@ const Banner = ({ text, ctaButton }: BannerProps) => {
       })}
     >
       <div className={styles.description}>
-        <div className={styles.illustrationContainer}>
-          <MoonIllustrationSVG />
-        </div>
         <div className={styles.text}>{text}</div>
       </div>
       {ctaButton && <div className={styles.ctaContainer}>{ctaButton}</div>}
diff --git a/src/components/Course/Buttons/NavbarButton/index.tsx b/src/components/Course/Buttons/NavbarButton/index.tsx
index 15a780de4d..b8b2656876 100644
--- a/src/components/Course/Buttons/NavbarButton/index.tsx
+++ b/src/components/Course/Buttons/NavbarButton/index.tsx
@@ -9,7 +9,7 @@ import Button, { ButtonSize, ButtonType } from '@/dls/Button/Button';
 import { logButtonClick } from '@/utils/eventLogger';
 import { getCourseNavigationUrl } from '@/utils/navigation';
 
-const LEARNING_PLAN_SLUG = 'preparing-our-hearts-for-ramadan';
+const LEARNING_PLAN_SLUG = 'avoiding-the-post-ramadan-slump';
 
 const NavbarButton = () => {
   const { t } = useTranslation('common');
diff --git a/src/components/Navbar/Navbar.module.scss b/src/components/Navbar/Navbar.module.scss
index 7f4e7bc1aa..2defd5151d 100644
--- a/src/components/Navbar/Navbar.module.scss
+++ b/src/components/Navbar/Navbar.module.scss
@@ -19,4 +19,9 @@
 .hiddenNav {
   // https://ptgamr.github.io/2014-09-13-translate3d-vs-translate-performance/
   transform: translate3d(0, calc(-1 * var(--navbar-container-height)), 0);
+
+  // TODO: remove this when banner is removed
+  @include breakpoints.smallerThanTablet {
+    transform: translate3d(0, calc(-1 * (var(--navbar-container-height) + var(--banner-height))), 0);
+  }
 }
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 9346662950..48bf57c397 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -1,15 +1,19 @@
 import React from 'react';
 
 import classNames from 'classnames';
+import useTranslation from 'next-translate/useTranslation';
 import { useSelector, shallowEqual } from 'react-redux';
 
 import styles from './Navbar.module.scss';
 import NavbarBody from './NavbarBody';
 
+import Banner from '@/components/Banner/Banner';
+import LearningPlanButton from '@/components/Course/Buttons/NavbarButton';
 import { useOnboarding } from '@/components/Onboarding/OnboardingProvider';
 import { selectNavbar } from '@/redux/slices/navbar';
 
 const Navbar = () => {
+  const { t } = useTranslation('common');
   const { isActive } = useOnboarding();
   const { isVisible: isNavbarVisible } = useSelector(selectNavbar, shallowEqual);
   const showNavbar = isNavbarVisible || isActive;
@@ -18,6 +22,7 @@ const Navbar = () => {
     <>
       <div className={styles.emptySpacePlaceholder} />
       <nav className={classNames(styles.container, { [styles.hiddenNav]: !showNavbar })}>
+        <Banner text={t('prepare-hearts.title')} ctaButton={<LearningPlanButton />} />
         <NavbarBody />
       </nav>
     </>
diff --git a/src/components/PageContainer/PageContainer.module.scss b/src/components/PageContainer/PageContainer.module.scss
index 8133e13928..823251c6f5 100644
--- a/src/components/PageContainer/PageContainer.module.scss
+++ b/src/components/PageContainer/PageContainer.module.scss
@@ -10,6 +10,10 @@
   margin-inline-start: auto;
   margin-inline-end: auto;
 
+  @include breakpoints.smallerThanTablet {
+    margin-block-start: var(--spacing-mega);
+  }
+
   --flow-side-spacing: var(--spacing-small);
   padding-inline-start: var(--flow-side-spacing);
   padding-inline-end: var(--flow-side-spacing);
diff --git a/src/components/QuranReader/SidebarNavigation/SidebarNavigation.module.scss b/src/components/QuranReader/SidebarNavigation/SidebarNavigation.module.scss
index 4de1809076..eea4d82c3e 100644
--- a/src/components/QuranReader/SidebarNavigation/SidebarNavigation.module.scss
+++ b/src/components/QuranReader/SidebarNavigation/SidebarNavigation.module.scss
@@ -138,6 +138,12 @@
 
 .spaceOnTop {
   padding-block-start: calc(3.5 * var(--spacing-mega));
+  @include breakpoints.smallerThanTablet {
+    padding-block-start: calc(4.5 * var(--spacing-mega));
+  }
+  @include breakpoints.tablet {
+    padding-block-start: calc(3.5 * var(--spacing-mega));
+  }
 }
 
 .chapterNumber {
diff --git a/src/components/Verse/AdvancedCopy/VerseAdvancedCopy.tsx b/src/components/Verse/AdvancedCopy/VerseAdvancedCopy.tsx
index 3d642f8f54..8598250b6d 100644
--- a/src/components/Verse/AdvancedCopy/VerseAdvancedCopy.tsx
+++ b/src/components/Verse/AdvancedCopy/VerseAdvancedCopy.tsx
@@ -67,7 +67,7 @@ const VerseAdvancedCopy: React.FC<Props> = ({ verse, children }) => {
   // Which font to copy.
   const [shouldCopyFont, setShouldCopyFont] = useState<QuranFont>(QuranFont.Uthmani);
   // whether the selected verses' footnotes should be copied or not.
-  const [shouldCopyFootnotes, setShouldCopyFootnotes] = useState(false);
+  const [shouldCopyFootnotes, setShouldCopyFootnotes] = useState(true);
   // whether we should include the translator name or not.
   const [shouldIncludeTranslatorName, setShouldIncludeTranslatorName] = useState(true);
   // a map of the IDs of the translations the users had selected and whether it should be copied or not. Will not be copied by default.
@@ -157,7 +157,8 @@ const VerseAdvancedCopy: React.FC<Props> = ({ verse, children }) => {
         })),
       );
       // set the first verse's key as the default range's start verse.
-      setRangeStartVerse(keys[0]);
+      const startFromVerseIndex = verse?.verseNumber || 0;
+      setRangeStartVerse(keys[startFromVerseIndex]);
       // set the last verse's key as the default range's end verse.
       setRangeEndVerse(keys[keys.length - 1]);
     }
@@ -315,16 +316,16 @@ const VerseAdvancedCopy: React.FC<Props> = ({ verse, children }) => {
             value={shouldIncludeTranslatorName ? TRUE_STRING : FALSE_STRING}
             onChange={onShouldIncludeTranslatorNameChange}
             items={[
-              {
-                value: FALSE_STRING,
-                id: FALSE_STRING,
-                label: t('common:no'),
-              },
               {
                 value: TRUE_STRING,
                 id: TRUE_STRING,
                 label: t('common:yes'),
               },
+              {
+                value: FALSE_STRING,
+                id: FALSE_STRING,
+                label: t('common:no'),
+              },
             ]}
           />
         </>
@@ -353,16 +354,16 @@ const VerseAdvancedCopy: React.FC<Props> = ({ verse, children }) => {
         value={shouldCopyFootnotes ? TRUE_STRING : FALSE_STRING}
         onChange={onShouldCopyFootnoteChange}
         items={[
-          {
-            value: FALSE_STRING,
-            id: FALSE_STRING,
-            label: t('common:no'),
-          },
           {
             value: TRUE_STRING,
             id: TRUE_STRING,
             label: t('common:yes'),
           },
+          {
+            value: FALSE_STRING,
+            id: FALSE_STRING,
+            label: t('common:no'),
+          },
         ]}
       />
       {customMessageComponent && (
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index e9eca3ae2a..b33fc810ae 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -4,6 +4,12 @@
 $list-max-width: 80rem;
 
 .pageContainer {
+  @include breakpoints.smallerThanTablet {
+    padding-block-start: var(--banner-height);
+  }
+  @include breakpoints.tablet {
+    padding-block-start: var(--spacing-small);
+  }
   padding-block-end: var(--spacing-small);
   padding-inline-start: 0;
   padding-inline-end: 0;

From 1bea13c9f4ea301e48edd12104e10744c64174bc Mon Sep 17 00:00:00 2001
From: Osama Sayed <toto777_90@hotmail.com>
Date: Thu, 25 Apr 2024 16:57:20 +0200
Subject: [PATCH 4/6] Update startFromVerseIndex

---
 src/components/Verse/AdvancedCopy/VerseAdvancedCopy.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Verse/AdvancedCopy/VerseAdvancedCopy.tsx b/src/components/Verse/AdvancedCopy/VerseAdvancedCopy.tsx
index 8598250b6d..9c940f8d9f 100644
--- a/src/components/Verse/AdvancedCopy/VerseAdvancedCopy.tsx
+++ b/src/components/Verse/AdvancedCopy/VerseAdvancedCopy.tsx
@@ -157,8 +157,8 @@ const VerseAdvancedCopy: React.FC<Props> = ({ verse, children }) => {
         })),
       );
       // set the first verse's key as the default range's start verse.
-      const startFromVerseIndex = verse?.verseNumber || 0;
-      setRangeStartVerse(keys[startFromVerseIndex]);
+      const startFromVerseNumber = verse?.verseNumber || 1;
+      setRangeStartVerse(keys[startFromVerseNumber - 1]);
       // set the last verse's key as the default range's end verse.
       setRangeEndVerse(keys[keys.length - 1]);
     }

From ddbbccb21d6d9145b6ad33c88afefc86b432887b Mon Sep 17 00:00:00 2001
From: Osama Sayed <toto777_90@hotmail.com>
Date: Sat, 4 May 2024 19:18:53 +0300
Subject: [PATCH 5/6] Lazy load joyride

---
 src/components/Onboarding/OnboardingProvider.tsx | 4 +++-
 src/pages/_app.tsx                               | 9 +--------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/components/Onboarding/OnboardingProvider.tsx b/src/components/Onboarding/OnboardingProvider.tsx
index d9874d5cdb..16ab51c9d2 100644
--- a/src/components/Onboarding/OnboardingProvider.tsx
+++ b/src/components/Onboarding/OnboardingProvider.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable max-lines */
 import React, { useMemo, useCallback, useState } from 'react';
 
+import dynamic from 'next/dynamic';
 import useTranslation from 'next-translate/useTranslation';
-import Joyride, { ACTIONS, Callback, EVENTS, STATUS, StoreHelpers } from 'react-joyride';
+import { ACTIONS, Callback, EVENTS, STATUS, StoreHelpers } from 'react-joyride';
 import { useSelector, useDispatch } from 'react-redux';
 
 // eslint-disable-next-line import/no-cycle
@@ -14,6 +15,7 @@ import { selectOnboardingActiveStep, setActiveStepIndex } from '@/redux/slices/o
 import OnboardingGroup from '@/types/OnboardingGroup';
 import { isLoggedIn } from '@/utils/auth/login';
 
+const Joyride = dynamic(() => import('react-joyride'), { ssr: false });
 interface OnboardingContextType {
   startTour: (group?: OnboardingGroup, startIndex?: number) => void;
   stopTour: () => void;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 4e64aa9848..d56e2a684d 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
 
 import { DirectionProvider } from '@radix-ui/react-direction';
 import { TooltipProvider } from '@radix-ui/react-tooltip';
-import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { DefaultSeo } from 'next-seo';
@@ -16,6 +15,7 @@ import FontPreLoader from '@/components/Fonts/FontPreLoader';
 import GlobalListeners from '@/components/GlobalListeners';
 import Navbar from '@/components/Navbar/Navbar';
 import OnboardingChecklist from '@/components/Onboarding/OnboardingChecklist';
+import { OnboardingProvider } from '@/components/Onboarding/OnboardingProvider';
 import SessionIncrementor from '@/components/SessionIncrementor';
 import ThirdPartyScripts from '@/components/ThirdPartyScripts/ThirdPartyScripts';
 import Footer from '@/dls/Footer/Footer';
@@ -39,13 +39,6 @@ import 'src/styles/theme.scss';
 import 'src/styles/global.scss';
 import 'src/styles/variables.scss';
 
-const OnboardingProvider = dynamic(
-  () => import('@/components/Onboarding/OnboardingProvider').then((a) => a.OnboardingProvider),
-  {
-    ssr: false,
-  },
-);
-
 function MyApp({ Component, pageProps }): JSX.Element {
   const router = useRouter();
   const { locale } = router;

From 0e24c0a4696c4f85bd2668775956cc090456e3e3 Mon Sep 17 00:00:00 2001
From: Osama Sayed <toto777_90@hotmail.com>
Date: Sun, 5 May 2024 16:38:51 +0300
Subject: [PATCH 6/6] updates

---
 src/components/Banner/Banner.tsx                            | 5 ++++-
 src/components/Course/Buttons/NavbarButton/index.tsx        | 2 +-
 src/components/Navbar/Navbar.module.scss                    | 5 -----
 src/components/Navbar/Navbar.tsx                            | 5 -----
 src/components/PageContainer/PageContainer.module.scss      | 4 ----
 .../SidebarNavigation/SidebarNavigation.module.scss         | 6 ------
 src/pages/index.module.scss                                 | 6 ------
 7 files changed, 5 insertions(+), 28 deletions(-)

diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx
index 5207281ccb..6b000a6138 100644
--- a/src/components/Banner/Banner.tsx
+++ b/src/components/Banner/Banner.tsx
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 
 import styles from './Banner.module.scss';
 
-// import MoonIllustrationSVG from '@/public/images/moon-illustration.svg';
+import MoonIllustrationSVG from '@/public/images/moon-illustration.svg';
 import { selectIsBannerVisible } from '@/redux/slices/banner';
 
 type BannerProps = {
@@ -21,6 +21,9 @@ const Banner = ({ text, ctaButton }: BannerProps) => {
       })}
     >
       <div className={styles.description}>
+        <div className={styles.illustrationContainer}>
+          <MoonIllustrationSVG />
+        </div>
         <div className={styles.text}>{text}</div>
       </div>
       {ctaButton && <div className={styles.ctaContainer}>{ctaButton}</div>}
diff --git a/src/components/Course/Buttons/NavbarButton/index.tsx b/src/components/Course/Buttons/NavbarButton/index.tsx
index b8b2656876..15a780de4d 100644
--- a/src/components/Course/Buttons/NavbarButton/index.tsx
+++ b/src/components/Course/Buttons/NavbarButton/index.tsx
@@ -9,7 +9,7 @@ import Button, { ButtonSize, ButtonType } from '@/dls/Button/Button';
 import { logButtonClick } from '@/utils/eventLogger';
 import { getCourseNavigationUrl } from '@/utils/navigation';
 
-const LEARNING_PLAN_SLUG = 'avoiding-the-post-ramadan-slump';
+const LEARNING_PLAN_SLUG = 'preparing-our-hearts-for-ramadan';
 
 const NavbarButton = () => {
   const { t } = useTranslation('common');
diff --git a/src/components/Navbar/Navbar.module.scss b/src/components/Navbar/Navbar.module.scss
index 2defd5151d..7f4e7bc1aa 100644
--- a/src/components/Navbar/Navbar.module.scss
+++ b/src/components/Navbar/Navbar.module.scss
@@ -19,9 +19,4 @@
 .hiddenNav {
   // https://ptgamr.github.io/2014-09-13-translate3d-vs-translate-performance/
   transform: translate3d(0, calc(-1 * var(--navbar-container-height)), 0);
-
-  // TODO: remove this when banner is removed
-  @include breakpoints.smallerThanTablet {
-    transform: translate3d(0, calc(-1 * (var(--navbar-container-height) + var(--banner-height))), 0);
-  }
 }
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 48bf57c397..9346662950 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -1,19 +1,15 @@
 import React from 'react';
 
 import classNames from 'classnames';
-import useTranslation from 'next-translate/useTranslation';
 import { useSelector, shallowEqual } from 'react-redux';
 
 import styles from './Navbar.module.scss';
 import NavbarBody from './NavbarBody';
 
-import Banner from '@/components/Banner/Banner';
-import LearningPlanButton from '@/components/Course/Buttons/NavbarButton';
 import { useOnboarding } from '@/components/Onboarding/OnboardingProvider';
 import { selectNavbar } from '@/redux/slices/navbar';
 
 const Navbar = () => {
-  const { t } = useTranslation('common');
   const { isActive } = useOnboarding();
   const { isVisible: isNavbarVisible } = useSelector(selectNavbar, shallowEqual);
   const showNavbar = isNavbarVisible || isActive;
@@ -22,7 +18,6 @@ const Navbar = () => {
     <>
       <div className={styles.emptySpacePlaceholder} />
       <nav className={classNames(styles.container, { [styles.hiddenNav]: !showNavbar })}>
-        <Banner text={t('prepare-hearts.title')} ctaButton={<LearningPlanButton />} />
         <NavbarBody />
       </nav>
     </>
diff --git a/src/components/PageContainer/PageContainer.module.scss b/src/components/PageContainer/PageContainer.module.scss
index 823251c6f5..8133e13928 100644
--- a/src/components/PageContainer/PageContainer.module.scss
+++ b/src/components/PageContainer/PageContainer.module.scss
@@ -10,10 +10,6 @@
   margin-inline-start: auto;
   margin-inline-end: auto;
 
-  @include breakpoints.smallerThanTablet {
-    margin-block-start: var(--spacing-mega);
-  }
-
   --flow-side-spacing: var(--spacing-small);
   padding-inline-start: var(--flow-side-spacing);
   padding-inline-end: var(--flow-side-spacing);
diff --git a/src/components/QuranReader/SidebarNavigation/SidebarNavigation.module.scss b/src/components/QuranReader/SidebarNavigation/SidebarNavigation.module.scss
index eea4d82c3e..4de1809076 100644
--- a/src/components/QuranReader/SidebarNavigation/SidebarNavigation.module.scss
+++ b/src/components/QuranReader/SidebarNavigation/SidebarNavigation.module.scss
@@ -138,12 +138,6 @@
 
 .spaceOnTop {
   padding-block-start: calc(3.5 * var(--spacing-mega));
-  @include breakpoints.smallerThanTablet {
-    padding-block-start: calc(4.5 * var(--spacing-mega));
-  }
-  @include breakpoints.tablet {
-    padding-block-start: calc(3.5 * var(--spacing-mega));
-  }
 }
 
 .chapterNumber {
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index b33fc810ae..e9eca3ae2a 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -4,12 +4,6 @@
 $list-max-width: 80rem;
 
 .pageContainer {
-  @include breakpoints.smallerThanTablet {
-    padding-block-start: var(--banner-height);
-  }
-  @include breakpoints.tablet {
-    padding-block-start: var(--spacing-small);
-  }
   padding-block-end: var(--spacing-small);
   padding-inline-start: 0;
   padding-inline-end: 0;