QF-2598-Dhul-Hijja-homepage-updates (#2418)

* feat: update banner and links to promote Best Days donation campaign

* feat: add Dhul-Hijjah best days landing page with styling and OG image support

* fix: update QuranReflect post links in the-best-days page

* fix: update text for best-day modal link to use plural form

* style: update CSS properties and restructure content layout for Dhul-Hijjah page

Author: AhmedCodeGuy

locales/en/common.json

@@ -94,6 +94,7 @@
   "ayahs": "Ayahs",
   "beta": "Beta",
   "beyond-ramadan": "Grow Beyond Ramadan!",
+  "best-days-banner": "Give during the best days!",
   "bookmark": "Bookmark",
   "bookmarked": "Bookmarked",
   "both": "Both",

locales/en/home.json

@@ -7,6 +7,7 @@
   "explore-topics": "Explore Topics",
   "first-time-reading": "New to the Quran? <link>Start here</link>",
   "grow-beyond-ramadan": "Grow with us <modalLink>Beyond Ramadan</modalLink>",
+  "best-day": "Don't miss the rewards of <modalLink>the Best Days!</modalLink>",
   "know-someone": "Grow with us this <modalLink>Ramadan</modalLink>",
   "learning-plan": "Learning Plans",
   "listen-to-radio": "Listen to Quran Radio",

src/components/HomePage/ReadingSection/NewCard/index.tsx

@@ -11,7 +11,7 @@ import IconContainer, { IconSize } from '@/dls/IconContainer/IconContainer';
 import Link, { LinkVariant } from '@/dls/Link/Link';
 import ArrowIcon from '@/public/icons/arrow.svg';
 import { logButtonClick } from '@/utils/eventLogger';
-import { getBeyondRamadanNavigationUrl } from '@/utils/navigation';
+import { getBestDayNavigationUrl } from '@/utils/navigation';
 
 const ShareQuranModal = dynamic(() => import('./ShareQuranModal'), {
   ssr: false,
@@ -32,23 +32,23 @@ const NewCard: React.FC = () => {
     <>
       <Card
         onClick={() => {
-          logButtonClick('homepage_grow_beyond_ramadan');
+          logButtonClick('homepage_best_day');
         }}
         className={styles.firstTimeReadingCard}
-        link={getBeyondRamadanNavigationUrl()}
+        link={getBestDayNavigationUrl()}
         isNewTab
       >
         <div className={styles.cardOuterContainer}>
           <div className={styles.cardWithIcon}>
-            <div className={styles.iconContainer}>🚀</div>
+            <div className={styles.iconContainer}>🕋</div>
             <div className={styles.link}>
               <Trans
-                i18nKey="home:grow-beyond-ramadan"
+                i18nKey="home:best-day"
                 components={{
                   modalLink: (
                     <Link
                       variant={LinkVariant.Blend}
-                      href={getBeyondRamadanNavigationUrl()}
+                      href={getBestDayNavigationUrl()}
                       className={styles.linkHref}
                       onClick={onShareQuranClicked}
                       isNewTab

src/components/Navbar/Navbar.tsx

@@ -13,7 +13,7 @@ import Button, { ButtonSize, ButtonType, ButtonShape } from '@/dls/Button/Button
 import DiamondIcon from '@/icons/diamond.svg';
 import { selectNavbar } from '@/redux/slices/navbar';
 import { logButtonClick } from '@/utils/eventLogger';
-import { getBeyondRamadanNavigationUrl } from '@/utils/navigation';
+import { getDonationUrl } from '@/utils/navigation';
 
 const Navbar = () => {
   const { isActive } = useOnboarding();
@@ -27,12 +27,12 @@ const Navbar = () => {
       <nav className={classNames(styles.container, { [styles.hiddenNav]: !showNavbar })}>
         <Banner
           shouldShowPrefixIcon={false}
-          text={t('beyond-ramadan')}
+          text={t('best-days-banner')}
           ctaButton={
             <Button
-              href={getBeyondRamadanNavigationUrl()}
+              href={getDonationUrl()}
               onClick={() => {
-                logButtonClick('navbar_beyond_ramadan');
+                logButtonClick('navbar_best_days');
               }}
               isNewTab
               size={ButtonSize.Small}
@@ -41,7 +41,7 @@ const Navbar = () => {
               className={styles.donateButton}
               prefix={<DiamondIcon />}
             >
-              {t('learn-more')}
+              {t('donate')}
             </Button>
           }
         />

src/lib/og.ts

@@ -22,6 +22,9 @@ export const getPreparingForRamadanOgImageUrl = ({ locale }: BaseOgOptions) =>
 export const getBeyondRamadanOgImageUrl = ({ locale }: BaseOgOptions) =>
   `${BASE_OG_URL}/api/og/beyond-ramadan?lang=${locale}`;
 
+export const getBestDaysOgImageUrl = ({ locale }: BaseOgOptions) =>
+  `${BASE_OG_URL}/api/og/the-best-days?lang=${locale}`;
+
 export const getChapterOgImageUrl = ({
   chapterId,
   locale,

src/pages/contentPage.module.scss

@@ -1,12 +1,12 @@
-@use "src/styles/breakpoints";
+@use 'src/styles/breakpoints';
 
 .contentPage {
   margin: auto;
   @include breakpoints.desktop {
-    width: 65%;
+    inline-size: 65%;
   }
   @include breakpoints.smallerThanDesktop {
-    width: 90%;
+    inline-size: 90%;
   }
   * {
     line-height: calc(1.3 * var(--line-height-xlarge));
@@ -70,16 +70,31 @@
 
 .list {
   list-style: unset;
-  padding-inline-start: var(--spacing-mega);
 }
 
-.underline {
-  text-decoration: underline;
+.arabic {
+  text-align: start;
+  font-size: var(--font-size-normal);
+  font-style: italic;
+  direction: rtl;
+  display: block;
+  font-family: 'Noto Nastaliq Arabic', 'NotoNastaliq', serif;
+  word-spacing: 0.1em;
+  letter-spacing: 0.02em;
+  padding-block: var(--spacing-xsmall);
 }
 
-.subListItem {
-  list-style-type: circle;
-  margin-inline-start: var(--spacing-large);
+.numberedList {
+  list-style-type: decimal !important;
+  list-style-position: outside;
+
+  li {
+    display: list-item;
+  }
+}
+
+.underline {
+  text-decoration: underline;
 }
 
 .ctaContainer {