Add post-Ramadan learning plan button (#2144)

* Add post-Ramadan learning plans * Sync locales * Sync locales
quran · Apr 21, 2024 · d9d77d3 · d9d77d3
1 parent ce56ccb
commit d9d77d3
Show file tree

Hide file tree

Showing 23 changed files with 44 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/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;