From bc011bad8a1162667319644483830cb68ea7b5ee Mon Sep 17 00:00:00 2001
From: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Date: Wed, 28 Feb 2024 17:32:29 +0300
Subject: [PATCH] feat: add university alert (#53904)

---
 client/i18n/locales/english/translations.json |  4 +--
 client/src/components/Intro/learn-alert.tsx   | 25 ++++++++++++++++++-
 client/src/templates/Introduction/intro.css   | 14 +++++++++++
 3 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
index 3119bd14f7e..58db2e44b3e 100644
--- a/client/i18n/locales/english/translations.json
+++ b/client/i18n/locales/english/translations.json
@@ -448,8 +448,8 @@
     "challenges-completed": "{{completedCount}} of {{totalChallenges}} challenges completed",
     "season-greetings-fcc": "Season's Greetings from the freeCodeCamp community 🎉",
     "if-getting-value": "If you're getting a lot out of freeCodeCamp, now is a great time to donate to support our charity's mission.",
-    "building-a-university": "We're Building a Free Computer Science University Degree Program",
-    "if-help-university": "We've already made a ton of progress. Support our charity with the long road ahead.",
+    "building-a-university": "We're Building a Free Computer Science University Degree Program 🎉",
+    "if-help-university": "We've already made a ton of progress. Donate now to help our charity with the road ahead.",
     "preview-external-window": "Preview currently showing in external window.",
     "fill-in-the-blank": "Fill in the blank",
     "blank": "blank",
diff --git a/client/src/components/Intro/learn-alert.tsx b/client/src/components/Intro/learn-alert.tsx
index b36775d572e..8724145ed5c 100644
--- a/client/src/components/Intro/learn-alert.tsx
+++ b/client/src/components/Intro/learn-alert.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Alert } from '@freecodecamp/ui';
 import { useFeature } from '@growthbook/growthbook-react';
 import { useTranslation } from 'react-i18next';
-import { Link } from '../helpers';
+import { Link, Spacer } from '../helpers';
 import { ProgressBar } from '../Progress/progress-bar';
 
 interface LearnAlertProps {
@@ -17,6 +17,7 @@ const LearnAlert = ({
   const { t } = useTranslation();
   const seasonalAlertFlag = useFeature('seasonal-alert');
   const progressAlertFlag2024 = useFeature('progress-alert-2024');
+  const createUniversityFlag = useFeature('university-alert');
   const progressAlertDefault = (text: string, value?: number) => (
     <Alert variant='info' className='annual-donation-alert'>
       {value && (
@@ -71,7 +72,29 @@ const LearnAlert = ({
     Number(progressAlertFlag2024.value)
   );
 
+  const universityAlert = (
+    <Alert variant='info' className='university-alert'>
+      <p>
+        <b>{t('learn.building-a-university')}</b>
+      </p>
+      <p>{t('learn.if-help-university')}</p>
+      <Spacer size='medium' />
+      <p className={'text-center'}>
+        <Link
+          className='btn'
+          key='donate'
+          sameTab={false}
+          to='/donate'
+          onClick={onLearnDonationAlertClick}
+        >
+          {t('buttons.donate')}
+        </Link>
+      </p>
+    </Alert>
+  );
+
   if (!isDonating) {
+    if (createUniversityFlag) return universityAlert;
     if (progressAlertFlag2024.on) return progressAlert2024;
     if (seasonalAlertFlag.on) return seasonalAlertFlagAlert;
   }
diff --git a/client/src/templates/Introduction/intro.css b/client/src/templates/Introduction/intro.css
index 9b632e3b665..93b214c3cf9 100644
--- a/client/src/templates/Introduction/intro.css
+++ b/client/src/templates/Introduction/intro.css
@@ -479,6 +479,20 @@ ToDo: find out why, and remove the need for it */
   border-top-color: var(--blue10);
 }
 
+.university-alert {
+  background-repeat: repeat;
+  animation: slideBackground 10s linear infinite;
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="144" height="113" viewBox="0 0 144 113" fill="none"><path d="M83.0205 89.0206L83.0515 78.5206L98.0293 86.0649L114.053 78.1122L114.02 89.1121C114.02 89.1121 107.6 96.0932 97.9998 96.0648C88.3998 96.0365 83.0205 89.0206 83.0205 89.0206Z" fill="%23198EEE" fill-opacity="0.1"/><path d="M76 72L98 59L121 72V81L123.5 87.5H117L120 81V72.5L98 83L76 72Z" fill="%233099F0" fill-opacity="0.1"/><path d="M10.0205 33.0206L10.0515 22.5206L25.0293 30.0649L41.0529 22.1122L41.0204 33.1121C41.0204 33.1121 34.5997 40.0932 24.9998 40.0648C15.3998 40.0365 10.0205 33.0206 10.0205 33.0206Z" fill="%23198EEE" fill-opacity="0.1"/><path d="M3 16L25 3L48 16V25L50.5 31.5H44L47 25V16.5L25 27L3 16Z" fill="%233099F0" fill-opacity="0.1"/></svg>');
+}
+
+@keyframes slideBackground {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 144px 113px;
+  }
+}
 /* story starts here */
 
 .annual-donation-alert .progress-bar-percent {