Merge pull request #99 from 202306-NEA-DZ-FEW/93-landing-page-ui-enha…

…ncement

feat(landing page): improve newsletter section

__mocks__/next/intersectionObserverMock.js

@@ -0,0 +1,17 @@
+class IntersectionObserver {
+  observe = jest.fn();
+  disconnect = jest.fn();
+  unobserve = jest.fn();
+}
+
+Object.defineProperty(window, "IntersectionObserver", {
+  writable: true,
+  configurable: true,
+  value: IntersectionObserver,
+});
+
+Object.defineProperty(global, "IntersectionObserver", {
+  writable: true,
+  configurable: true,
+  value: IntersectionObserver,
+});

package.json

@@ -33,6 +33,7 @@
     "moment": "^2.29.4",
     "next": "13.5.5",
     "next-i18next": "^11.2.2",
+    "next-themes": "^0.2.1",
     "nextjs-toploader": "^1.4.2",
     "react": "^18.2.0",
     "react-confetti": "^6.1.0",

public/locales/ar/common.json

@@ -24,7 +24,7 @@
     "signIn": "تسجيل الدخول",
     "signOut": "تسجيل الخروج",
     "signUp": "التسجيل",
-    "noItemsfound": "لم يتم العثور على عناصر...",
+    "noItemsFound": "لم يتم العثور على عناصر...",
     "prevButton": "الصفحة السابقة",
     "nextButton": "الصفحة الموالية"
   }

public/locales/ar/landingPage.json

@@ -1,7 +1,11 @@
 {
   "hero": {
-    "title": "لنتشارك معًا.",
-    "description": "مرحبًا في Unify! حيث كل ما قد لا تحتاجه هو ضرورة لشخص آخر. من الملابس إلى الأثاث، نحن هنا لنكون الوصلة بينك وبين الأشخاص الذين في حاجة. معًا، يمكننا أن نحقق فرقًا كبيرًا في حياة أولئك الذين يحتاجون إلى يد مساعدة. انضم إلينا لننشر الدفء واللطف والأمل. دعونا نخلق مجتمعًا يوحدنا روح العطاء والرحمة، عنصر واحد في كل مرة."
+    "title": "لنتشارك معًا روح العمل",
+    "titleHighlight": "الجماعي.",
+    "description": "الهبة الحقيقية هي انعكاس إنسانيتك",
+    "stat1": "وجبة رمضانية مقدمة",
+    "stat2": "يتيم تم التكفل به",
+    "stat3": "ضمن برامج مساعدات اللاجئين"
   },
   "causes": {
     "title": "القضايا",
@@ -39,5 +43,6 @@
   },
   "items": "العناصر الشائعة",
   "blogs": "المدونات",
+  "latestBlogs": "أحدث مدوناتنا",
   "partners": "شركاؤنا"
 }

public/locales/en/common.json

@@ -24,7 +24,7 @@
     "signIn": "Sign in",
     "signOut": "Sign out",
     "signUp": "Sign up",
-    "noItemsfound": "No Items Found...",
+    "noItemsFound": "No Items Found...",
     "prevButton": "Previous",
     "nextButton": "Next"
   }

public/locales/en/landingPage.json

@@ -1,7 +1,11 @@
 {
   "hero": {
-    "title": "Let's share.",
-    "description": "Welcome to Unify! Where everything you may not need is someone else's necessity. From clothing to furniture, we are here to be the link between you and people in need. Together, we can make a significant difference in the lives of those who require a helping hand. Join us in spreading warmth, kindness, and hope. Let's create a community bound by the spirit of giving and compassion, one item at a time."
+    "title": "The power of collective",
+    "titleHighlight": "Giving.",
+    "description": "You offer more than possessions when you give, true giving is an extension of yourself",
+    "stat1": "Ramadan Meal Outreach",
+    "stat2": "Orphan Received Support",
+    "stat3": "In Refugee Aid Program"
   },
   "causes": {
     "title": "Causes",
@@ -38,5 +42,6 @@
   },
   "items": "Popular items",
   "blogs": "Blogs",
+  "latestBlogs": "Our Latest Blogs",
   "partners": "Our Partners"
 }

public/locales/fr/common.json

@@ -24,7 +24,7 @@
     "signIn": "Se connecter",
     "signOut": "Se déconnecter",
     "signUp": "S'inscrire",
-    "noItemsfound": "Aucun élément trouvé...",
+    "noItemsFound": "Aucun élément trouvé...",
     "prevButton": "Précédent",
     "nextButton": "Suivant"
   }

public/locales/fr/landingPage.json

@@ -1,7 +1,11 @@
 {
   "hero": {
-    "title": "Partageons ensemble.",
-    "description": "Bienvenue chez Unify! Là où tout ce dont vous pourriez ne pas avoir besoin est la nécessité de quelqu'un d'autre. Des vêtements aux meubles, nous sommes là pour faire le lien entre vous et les personnes dans le besoin. Ensemble, nous pouvons faire une différence significative dans la vie de ceux qui ont besoin d'un coup de main. Rejoignez-nous pour répandre la chaleur, la gentillesse et l'espoir. Créons une communauté unie par l'esprit du don et de la compassion, un article à la fois."
+    "title": "Le pouvoir du don ",
+    "titleHighlight": "collectif.",
+    "description": "le véritable don est un reflet de votre humanité",
+    "stat1": "Repas distribués durant le Ramadhan",
+    "stat2": "Orphelins pris en charge",
+    "stat3": "Recensés dans le programme d'aide aux réfugiés"
   },
   "causes": {
     "title": "Causes",
@@ -38,5 +42,6 @@
   },
   "items": "Articles populaires",
   "blogs": "Blogs",
+  "latestBlogs": "Nos plus récents blogs",
   "partners": "Nos partenaires"
 }

public/locales/tr/common.json

@@ -24,7 +24,7 @@
     "signIn": "Giriş Yap",
     "signOut": "Çıkış Yap",
     "signUp": "Kaydol",
-    "noItemsfound": "Öğe bulunamadı...",
+    "noItemsFound": "Öğe bulunamadı...",
     "prevButton": "Önceki",
     "nextButton": "Sonraki"
   }

public/locales/tr/landingPage.json

@@ -1,7 +1,11 @@
 {
   "hero": {
-    "title": "Paylaşalım.",
-    "description": "Unify'e hoş geldiniz! Burada ihtiyacınız olmayan her şey, başkasının ihtiyacı olabilir. Giysiden mobilyaya, sizin ve ihtiyaç sahipleri arasındaki bağlantıyı sağlamak için buradayız. Birlikte, yardıma ihtiyaç duyanların hayatlarında önemli bir fark yaratabiliriz. Bize katılın, sıcaklık, iyilik ve umut yaymada bir araya gelelim. Bir eşya ile başlayarak, yardımseverlik ve şefkat ruhuyla bağlı bir topluluk oluşturalım."
+    "title": "Toplu Bağışın",
+    "titleHighlight": "gücü.",
+    "description": "Gerçek bağış, insanlığınızın bir yansımasıdır",
+    "stat1": "Ramazan'da dağıtılan yemek",
+    "stat2": "Yetim Eğitim Desteği",
+    "stat3": "Mülteci Yardım Programı"
   },
   "causes": {
     "title": "Nedenler",
@@ -38,5 +42,6 @@
   },
   "items": "Popüler Ürünler",
   "blogs": "Bloglar",
+  "latestBlogs": "En Son Bloglarımız",
   "partners": "İş Ortağımız"
 }

src/components/AddItemForm/ListingTypeButton.jsx

@@ -6,8 +6,8 @@ function ListingTypeButton({ value, text, selected, onSelect }) {
       onClick={() => onSelect(value)}
       type='button'
       className={`${
-        selected === value ? "bg-accent text-white" : "bg-base-300"
-      } px-3 py-2 flex-1 text-sm font-light rounded-lg`}
+        selected === value ? "bg-primary text-white" : "bg-base-100"
+      } px-3 py-2 flex-1 text-sm font-light rounded-lg shadow-md`}
     >
       {text}
     </button>

src/components/AddItemForm/__test__/__snapshots__/ListingTypeButton.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <button
-  className="bg-base-300 px-3 py-2 flex-1 text-sm font-light rounded-lg"
+  className="bg-base-100 px-3 py-2 flex-1 text-sm font-light rounded-lg shadow-md"
   onClick={[Function]}
   type="button"
 >

src/components/AddItemForm/index.jsx

@@ -47,7 +47,7 @@ function AddItemForm({ t, initialLocale, categories, states }) {
       category: Yup.string().required(t("addItem:categoryRequired")),
       location: Yup.string().required(t("addItem:locationRequired")),
       description: Yup.string()
-        .max(150, "description too long")
+        .max(250, "description too long")
         .required(t("addItem:descriptionRequired")),
       listingType: Yup.string().required(t("addItem:listingTypeRequired")),
     }),
@@ -157,7 +157,7 @@ function AddItemForm({ t, initialLocale, categories, states }) {
             error={formik.errors.description}
             touched={formik.touched.description}
             textLength={formik.values.description.length}
-            maxLength={150}
+            maxLength={250}
           />
           <div className='label'>
             <span htmlFor='file-upload' className='label-text'>
@@ -208,7 +208,7 @@ function AddItemForm({ t, initialLocale, categories, states }) {
           <div className='flex flex-col md:flex-row gap-2 justify-center mt-2'>
             <button
               type='submit'
-              className='btn btn-md rounded-xl btn-primary bg-opacity-30 flex-1 md:self-center'
+              className='btn btn-md rounded-xl btn-secondary bg-opacity-50 text-black flex-1 md:self-center'
             >
               {t("addItem:addItem")}
             </button>

src/components/BlogCard/HorizontalCard.jsx

@@ -0,0 +1,49 @@
+import Image from "next/image";
+import Link from "next/link";
+import { useTranslation } from "next-i18next";
+import { IoIosArrowDropright } from "react-icons/io";
+
+import { formatDate, truncateString } from "@/lib/helpers";
+
+function HorizontalCard({ title, description, imageUrl, createdAt, id }) {
+  const { t } = useTranslation();
+  const date = formatDate(createdAt, "MMM YYYY");
+  const truncatedDescription = truncateString(description, 200);
+  return (
+    <div className='card lg:card-side bg-base-100 shadow-xl h-full lg:h-[26rem]'>
+      <figure className=' lg:w-[45%]'>
+        <Image
+          height={400}
+          width={400}
+          priority
+          src={imageUrl}
+          alt='Blog Image'
+          className='w-full h-full object-cover'
+        />
+      </figure>
+      <div className='card-body lg:w-[35%] p-6 lg:p-10 gap-4'>
+        <h2 className='card-title text-2xl lg:text-3xl' title={title}>
+          {title}
+        </h2>
+        <p
+          className=' text-md lg:text-xl tracking-wide font-light'
+          title={description}
+        >
+          {truncatedDescription}
+        </p>
+        <div className='card-actions flex gap-2 justify-between'>
+          <span>{date}</span>
+          <Link
+            href={`/blogs/${id}`}
+            className='text-secondary font-bold flex items-center gap-2'
+          >
+            {t("common:buttons:readMore")}
+
+            <IoIosArrowDropright className='text-xl' />
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+export default HorizontalCard;

src/components/BlogCard/__test__/__snapshots__/BlogCard.test.js.snap

@@ -2,14 +2,14 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="card bg-base-200 rounded-xl shadow-lg w-64"
+  className="card rounded-xl bg-base-100 shadow-lg h-full w-full"
 >
-  <div
-    className="relative"
+  <figure
+    className="relative overflow-hidden"
   >
     <img
       alt="Blog Image"
-      className="w-full relative object-cover h-44 rounded-tr-2xl rounded-tl-2xl p-1"
+      className="w-full h-full object-cover rounded-t-2xl"
       data-nimg="1"
       decoding="async"
       fetchpriority="high"
@@ -25,38 +25,52 @@ exports[`renders correctly 1`] = `
       }
       width={400}
     />
-    <span
-      className="absolute left-1 bottom-1 text-white bg-primary px-2 py-1"
-    >
-      2023-10-28
-    </span>
-  </div>
+  </figure>
   <div
-    className="p-3 gap-1 flex flex-col"
+    className="flex p-6 flex-1 gap-4 flex-col justify-between items-"
   >
     <h2
-      className="text-lg font-bold mb-2"
-      title="title"
+      className="text-2xl lg:text-3xl text-start font-bold w-full"
     >
-      Mocked Truncate String
+      title
     </h2>
-    <p
-      className="text-sm font-light mb-4"
-      title="description"
-    >
-      Mocked Truncate String
-    </p>
     <div
-      className="flex justify-end"
+      className="flex justify-between items-center py-4"
     >
+      <span>
+        2023-10-28
+         
+      </span>
       <a
-        className="text-secondary/[.8] hover:text-secondary font-bold"
+        className="text-secondary hover:text-secondary font-bold flex items-center gap-2"
         href="/blogs/1"
         onClick={[Function]}
         onMouseEnter={[Function]}
         onTouchStart={[Function]}
       >
         buttons.readMore
+        <svg
+          className="text-xl"
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          strokeWidth="0"
+          style={
+            Object {
+              "color": undefined,
+            }
+          }
+          viewBox="0 0 512 512"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M210.7 147.6c7.5-7.5 19.8-7.5 27.3 0l95.4 95.7c7.3 7.3 7.5 19.1.6 26.6l-94 94.3c-3.8 3.8-8.7 5.7-13.7 5.7-4.9 0-9.9-1.9-13.6-5.6-7.5-7.5-7.6-19.7 0-27.3l79.9-81.1-81.9-81.1c-7.6-7.4-7.6-19.6 0-27.2z"
+          />
+          <path
+            d="M48 256c0 114.9 93.1 208 208 208s208-93.1 208-208S370.9 48 256 48 48 141.1 48 256zm32 0c0-47 18.3-91.2 51.6-124.4C164.8 98.3 209 80 256 80s91.2 18.3 124.4 51.6C413.7 164.8 432 209 432 256s-18.3 91.2-51.6 124.4C347.2 413.7 303 432 256 432s-91.2-18.3-124.4-51.6C98.3 347.2 80 303 80 256z"
+          />
+        </svg>
       </a>
     </div>
   </div>