feat: add testimonials section (#1427)

Issue: https://github.com/StanGirard/quivr/issues/1428


https://github.com/StanGirard/quivr/assets/63923024/b0b25f3e-d038-4740-b581-e3c256d89902

frontend/app/(home)/components/Sections/TestimonialsSection.tsx

@@ -1,10 +0,0 @@
-export const TestimonialsSection = (): JSX.Element => {
-  return (
-    <>
-      <h2 className="text-2xl text-center">What people say about Quivr</h2>
-      <div className="w-[80vw] md:w-[400px] h-[80vw] md:h-[400px] bg-slate-200 rounded flex items-center justify-center">
-        💬 Testimonials
-      </div>
-    </>
-  );
-};

frontend/app/(home)/components/Sections/index.ts

@@ -1,4 +1,3 @@
 export * from "./DemoSection/DemoSection";
 export * from "./FooterSection";
 export * from "./IntroSection";
-export * from "./TestimonialsSection";

frontend/app/(home)/components/TestimonialsSection/TestimonialsSection.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { TestimonialCard } from "./components/TestimonialCard";
+import { testimonialsExamples } from "./data/testimonialsExamples";
+import { Testimonial } from "./types";
+
+export const TestimonialsSection = (): JSX.Element => {
+  const { t } = useTranslation("home", {
+    keyPrefix: "testimonials",
+  });
+
+  const [testimonials, setTestimonials] = useState<Testimonial[]>([]);
+
+  useEffect(() => {
+    setTestimonials(testimonialsExamples);
+  }, []);
+
+  return (
+    <>
+      <p className="text-4xl font-semibold my-10">
+        {t("title")} <span className="text-primary">Quivr</span>{" "}
+      </p>
+      <div className="grid grid-cols-12 gap-10 mb-5 items-stretch p-4">
+        {testimonials.map((testimonial) => (
+          <div
+            className="col-span-12 md:col-span-4 h-full"
+            key={testimonial.content}
+          >
+            <TestimonialCard {...testimonial} />
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};

frontend/app/(home)/components/TestimonialsSection/components/TestimonialCard.tsx

@@ -0,0 +1,46 @@
+import Link from "next/link";
+
+import { Avatar } from "@/lib/components/ui/Avatar";
+
+import { Testimonial } from "../types";
+import { socialMediaToIcon } from "../utils/socialMediaToIcon";
+
+export const TestimonialCard = ({
+  socialMedia,
+  url,
+  user,
+  jobTitle,
+  content,
+  profilePicture,
+}: Testimonial): JSX.Element => {
+  return (
+    <div className="px-8 py-4 rounded-3xl shadow-2xl dark:shadow-white/25  w-full bg-white dark:bg-black h-full flex flex-col gap-3">
+      <Link
+        href={url}
+        className="hover:text-black"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <div className="w-full flex justify-end">
+          {socialMediaToIcon[socialMedia]}
+        </div>
+      </Link>
+
+      <p className="flex-1 italic">&quot;{content}&quot;</p>
+      <div>
+        <div className="flex mt-3 flex-1 items-center">
+          <Avatar
+            url={profilePicture ?? "https://www.gravatar.com/avatar?d=mp"}
+            alt={`${user}-profile`}
+            imgClassName={"rounded-full"}
+            className="w-10 h-10"
+          />
+          <div className="flex-1 ml-3">
+            <p className="font-semibold">{user}</p>
+            <p className="text-sm">{jobTitle}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/app/(home)/components/TestimonialsSection/data/testimonialsExamples.ts

@@ -0,0 +1,44 @@
+import { Testimonial } from "../types";
+
+export const testimonialsExamples: Testimonial[] = [
+  {
+    socialMedia: "linkedin",
+    url: "https://www.linkedin.com/in/alexandru-georgescu-0a0b1a1a3/",
+    user: "Mamadou DICKO",
+    jobTitle: "Software Developer @Theodo",
+    content: "Quivr is a great tool for researcher to share their work.",
+    profilePicture:
+      "https://media.licdn.com/dms/image/D4E03AQGByQj-wdh1Og/profile-displayphoto-shrink_100_100/0/1671624108600?e=1703116800&v=beta&t=EaQvA2roS7QORvQm_uhdAem9VRmZb_KV7-3Vyd3FGjI",
+  },
+  {
+    socialMedia: "x",
+    url: "https://www.linkedin.com/in/john-doe-12345678/",
+    user: "John Doe",
+    jobTitle: "Marketing Manager",
+    content:
+      "I've had the pleasure of working with John for over three years. His marketing strategies are second to none.",
+  },
+  {
+    socialMedia: "linkedin",
+    url: "https://www.linkedin.com/in/sarah-smith-abcdef12/",
+    user: "Sarah Smith",
+    jobTitle: "Graphic Designer",
+    content: "Sarah's c",
+  },
+  {
+    socialMedia: "x",
+    url: "https://www.linkedin.com/in/robert-james-98765432/",
+    user: "Robert James",
+    jobTitle: "Financial Analyst",
+    content:
+      "Robert's financial expertise has been instrumental in our company's success. He's a true asset to our team.",
+  },
+  {
+    socialMedia: "linkedin",
+    url: "https://www.linkedin.com/in/lisa-anderson-567890ab/",
+    user: "Lisa Anderson",
+    jobTitle: "Project Manager",
+    content:
+      "Lisa is an excellent project manager. She keeps projects on track and ",
+  },
+];

frontend/app/(home)/components/TestimonialsSection/index.ts

@@ -0,0 +1 @@
+export * from "./TestimonialsSection";

frontend/app/(home)/components/TestimonialsSection/types.ts

@@ -0,0 +1,8 @@
+export type Testimonial = {
+  socialMedia: "x" | "linkedin";
+  url: string;
+  jobTitle: string;
+  content: string;
+  user: string;
+  profilePicture?: string;
+};

frontend/app/(home)/components/TestimonialsSection/utils/socialMediaToIcon.tsx

@@ -0,0 +1,12 @@
+import { AiFillLinkedin } from "react-icons/ai";
+import { RiTwitterXFill } from "react-icons/ri";
+
+import { Testimonial } from "../types";
+
+export const socialMediaToIcon: Record<
+  Testimonial["socialMedia"],
+  JSX.Element
+> = {
+  linkedin: <AiFillLinkedin />,
+  x: <RiTwitterXFill />,
+};

frontend/app/(home)/components/index.ts

@@ -2,3 +2,4 @@ export * from "./HomeHeader/HomeHeader";
 export * from "./HomeSection/HomeSection";
 export * from "./Sections";
 export * from "./SecuritySection";
+export * from "./TestimonialsSection";

frontend/lib/components/Sidebar/components/SidebarFooter/components/UserButton.tsx

@@ -1,6 +1,6 @@
-import Image from "next/image";
 import Link from "next/link";
 
+import { Avatar } from "@/lib/components/ui/Avatar";
 import { useSupabase } from "@/lib/context/SupabaseProvider";
 
 import { useGravatar } from "../../../../../hooks/useGravatar";
@@ -12,15 +12,7 @@ export const UserButton = (): JSX.Element => {
 
   return (
     <Link aria-label="account" className={sidebarLinkStyle} href={"/user"}>
-      <div className="relative w-8 h-8">
+      <Avatar url={gravatarUrl} alt="user-gravatar" />
-        <Image
-          alt="gravatar"
-          fill={true}
-          sizes="32px"
-          src={gravatarUrl}
-          className="rounded-xl"
-        />
-      </div>
       <span className="text-ellipsis overflow-hidden">
         {session?.user.email ?? ""}
       </span>

frontend/lib/components/ui/Avatar.tsx

@@ -0,0 +1,28 @@
+import Image from "next/image";
+
+import { cn } from "@/lib/utils";
+
+type AvatarProps = {
+  url: string;
+  alt: string;
+  imgClassName?: string;
+  className?: string;
+};
+export const Avatar = ({
+  url,
+  alt,
+  imgClassName,
+  className,
+}: AvatarProps): JSX.Element => {
+  return (
+    <div className={cn("relative w-8 h-8", className)}>
+      <Image
+        alt={alt}
+        fill={true}
+        sizes="32px"
+        src={url}
+        className={cn("rounded-xl", imgClassName)}
+      />
+    </div>
+  );
+};

frontend/next.config.js

@@ -5,6 +5,7 @@ const nextConfig = {
       "www.quivr.app",
       "quivr-cms.s3.eu-west-3.amazonaws.com",
       "www.gravatar.com",
+      "media.licdn.com",
     ],
   },
   // eslint-disable-next-line prefer-arrow/prefer-arrow-functions

frontend/public/locales/en/home.json

@@ -25,5 +25,8 @@
     "description_2": "Simply upload your files and ask questions to it.",
     "start_using": "Start using Quivr",
     "contact_sales": "Contact sales team"
+  },
+  "testimonials":{
+    "title": "What people say about"
   }
 }

frontend/public/locales/es/home.json

@@ -25,5 +25,8 @@
     "description_2": "Simplemente carga tus archivos y hazle preguntas.",
     "start_using": "Comienza a usar Quivr",
     "contact_sales": "Contacta al equipo de ventas"
+  },
+  "testimonials":{ 
+    "title": "Lo que la gente dice sobre"
   }
 }

frontend/public/locales/fr/home.json

@@ -25,5 +25,8 @@
     "description_2": "Il vous suffit de télécharger vos fichiers et de lui poser des questions.",
     "start_using": "Commencez à utiliser Quivr",
     "contact_sales": "Contacter l'équipe commerciale"
+  },
+  "testimonials":{ 
+    "title": "Ce que les gens disent à propos de" 
   }
 }

frontend/public/locales/pt-br/home.json

@@ -25,5 +25,8 @@
     "description_2": "Basta fazer upload de seus arquivos e fazer perguntas a ele.",
     "start_using": "Comece a usar o Quivr",
     "contact_sales": "Entre em contato com a equipe de vendas"
+  },
+  "testimonials":{ 
+    "title": "O que as pessoas dizem sobre"
   }
 }

frontend/public/locales/ru/home.json

@@ -25,5 +25,8 @@
     "description_2": "Просто загрузите свои файлы и задайте ему вопросы.",
     "start_using": "Начать использовать Quivr",
     "contact_sales": "Свяжитесь с отделом продаж"
+  },
+  "testimonials":{ 
+    "title": "Что люди говорят о"
   }
 }

frontend/public/locales/zh-cn/home.json

@@ -25,5 +25,8 @@
     "description_2": "只需上传您的文件并向其提问。",
     "start_using": "开始使用Quivr",
     "contact_sales": "联系销售团队"
+  },
+  "testimonials":{ 
+    "title": "人们对此的评价" 
   }
 }