feat: add use cases to homepage (#1415)

Ticket: QuivrHQ/quivr#1416


https://github.com/StanGirard/quivr/assets/63923024/243bb114-9b7f-4b98-b710-df74ee845ecb

.gitignore

@@ -11,8 +11,6 @@ backend/venv
 backend/.env
 backend/*.deb
 
-
-
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
@@ -59,7 +57,7 @@ backend/core/application_default_credentials.json
 #local models
 backend/core/local_models/*
 
-
 ## scripts
 .migration_info
 package-lock.json
+backend/celerybeat-schedule

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

@@ -0,0 +1,19 @@
+import { useTranslation } from "react-i18next";
+
+import { UseCasesListing } from "./components/UseCasesListing/UseCasesListing";
+
+export const UseCases = (): JSX.Element => {
+  const { t } = useTranslation("home");
+
+  return (
+    <div className="p-4 text-white">
+      <div className="mb-3">
+        <h2 className="text-center text-3xl font-semibold mb-2">
+          {t("useCases.title")}
+        </h2>
+        <p className="text-center text-lg">{t("useCases.subtitle")}</p>
+      </div>
+      <UseCasesListing />
+    </div>
+  );
+};

frontend/app/(home)/components/UseCases/components/UseCasesListing/UseCasesListing.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react";
+import { LuPanelLeft } from "react-icons/lu";
+
+import Spinner from "@/lib/components/ui/Spinner";
+import { useDevice } from "@/lib/hooks/useDevice";
+import { cn } from "@/lib/utils";
+
+import { UseCaseComponent } from "./components/UseCaseComponent";
+import { casesExamples } from "./data/cases";
+import { UseCase } from "./types";
+
+export const UseCasesListing = (): JSX.Element => {
+  const [cases, setCases] = useState<UseCase[]>([]);
+  const [selectedCaseId, setSelectedCaseId] = useState<string>();
+  const selectedCase = cases.find((c) => c.id === selectedCaseId);
+  const { isMobile } = useDevice();
+
+  useEffect(() => {
+    setCases(casesExamples);
+    setSelectedCaseId("1");
+  }, []);
+
+  if (selectedCaseId === undefined) {
+    return (
+      <div className="flex justify-center">
+        <Spinner />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex grid grid-cols-6 gap-10 flex flex-column items-start">
+      <div
+        className={"col-span-6 md:col-span-2 flex flex-col gap-3 col-span-6"}
+      >
+        {cases.map((c) => (
+          <div
+            key={c.id}
+            onClick={() => !isMobile && setSelectedCaseId(c.id)}
+            className={cn(
+              "p-6 rounded-lg cursor-pointer",
+              selectedCaseId === c.id &&
+                "md:bg-[#7D73A7] md:border-[1px] md:border-[#6752F5]"
+            )}
+          >
+            <h3 className="font-semibold mb-3">{c.name}</h3>
+            <p>{c.description}</p>
+          </div>
+        ))}
+      </div>
+
+      {selectedCase !== undefined && (
+        <div className="hidden md:block col-span-4 bg-white rounded-xl p-6 px-10 m-6">
+          <LuPanelLeft className="text-black text-xl" />
+          <UseCaseComponent discussions={selectedCase.discussions} />
+        </div>
+      )}
+    </div>
+  );
+};

frontend/app/(home)/components/UseCases/components/UseCasesListing/components/UseCaseComponent.tsx

@@ -0,0 +1,38 @@
+import { Fragment } from "react";
+import { PiPaperclipFill } from "react-icons/pi";
+
+import { UseCase } from "../types";
+
+type UseCaseComponentProps = {
+  discussions: UseCase["discussions"];
+};
+
+export const UseCaseComponent = ({
+  discussions,
+}: UseCaseComponentProps): JSX.Element => {
+  return (
+    <div className="flex flex-col gap-2 text-black">
+      {discussions.map((d) => (
+        <Fragment key={d.question}>
+          <div className="flex justify-end">
+            <div className="bg-[#9B9B9B] max-w-[75%] bg-opacity-10 p-4 rounded-xl">
+              <p>{d.question}</p>
+            </div>
+          </div>
+          <div className="flex">
+            <div className="bg-[#E0DDFC] max-w-[75%] rounded-xl p-4">
+              <span className="text-[#8F8F8F] text-xs">@Quivr</span>
+              <p>{d.answer}</p>
+            </div>
+          </div>
+        </Fragment>
+      ))}
+      <div className="flex mt-1 flex-col w-full shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-4 mt-10">
+        <div className="flex items-center">
+          <PiPaperclipFill className="text-3xl" />
+          <span className="text-[#BFBFBF]">@Einstein</span>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/app/(home)/components/UseCases/components/UseCasesListing/data/cases.ts

@@ -0,0 +1,49 @@
+import { UseCase } from "../types";
+
+export const casesExamples: UseCase[] = [
+  {
+    id: "1",
+    name: "Research and Studies",
+    description: "Quivr is your indispensable research companion.",
+    discussions: [
+      {
+        question: "Can you explain what can Research and Studies do ?",
+        answer: `Hey there ! First you can upload documents by clicking on “+”. Then you can ask questions to your documents, and interact with them. `,
+      },
+      {
+        question: "Cool, and what about brains ? ",
+        answer: `Brains are like your data base. You can feed a brain with multiple documents and then interact with one brain. You can also talk to Chat GPT by typing @ChatGPT4 `,
+      },
+    ],
+  },
+  {
+    id: "2",
+    name: "Legal research",
+    description: "Your ultimate digital ally in the field of law.",
+    discussions: [
+      {
+        question: "Can you explain whar can Legal research do ?",
+        answer: `Hey there ! First you can upload documents by clicking on “+”. Then you can ask questions to your documents, and interact with them. `,
+      },
+      {
+        question: "Cool, and what about brains ? ",
+        answer: `Brains are like your data base. You can feed a brain with multiple documents and then interact with one brain. You can also talk to Chat GPT by typing @ChatGPT4 `,
+      },
+    ],
+  },
+  {
+    id: "3",
+    name: "Sales",
+    description: "Placeholder",
+    discussions: [
+      {
+        question: "Can you explain what can Sales do ?",
+        answer: `Hey there ! First you can upload documents by clicking on “+”. Then you can ask questions to your documents, and interact with them. `,
+      },
+      {
+        question: "Cool, and what about brains ? ",
+        answer: `Brains are like your data base. You can feed a brain with multiple documents and then interact with one brain. You can also talk to Chat GPT by typing @ChatGPT4 `,
+      },
+    ],
+  },
+];

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

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

frontend/app/(home)/components/UseCases/components/UseCasesListing/types.ts

@@ -0,0 +1,9 @@
+export type UseCase = {
+  id: string;
+  name: string;
+  description: string;
+  discussions: {
+    question: string;
+    answer: string;
+  }[];
+};

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

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

frontend/app/(home)/page.tsx

@@ -9,14 +9,14 @@ import Features from "./Features";
 import Hero from "./Hero";
 import {
   DemoSection,
-  ExampleSection,
   FooterSection,
   HomeHeader,
   HomeSection,
   IntroSection,
   SecuritySection,
   TestimonialsSection,
 } from "./components";
+import { UseCases } from "./components/UseCases/UseCases";
 
 const HomePage = (): JSX.Element => {
   const { session } = useSupabase();
@@ -35,7 +35,7 @@ const HomePage = (): JSX.Element => {
         <div data-testid="home-page" className="relative">
           <HomeHeader />
 
-          <main className="relative flex flex-col items-center z-[-1]">
+          <main className="relative flex flex-col items-center">
             <HomeSection bg="transparent">
               <IntroSection />
             </HomeSection>
@@ -49,7 +49,7 @@ const HomePage = (): JSX.Element => {
             </HomeSection>
 
             <HomeSection bg="bg-[#362469]" slantCurrent="down">
-              <ExampleSection />
+              <UseCases />
             </HomeSection>
 
             <HomeSection bg="bg-white" slantBefore="down" slantAfter="up">

frontend/public/locales/en/home.json

@@ -1,5 +1,9 @@
 {
   "sign_in": "Sign in",
   "sign_up": "Sign up",
-  "star_us": "Star us on Github"
+  "star_us": "Star us on Github",
+  "useCases":{
+    "title": "Experience it now.",
+    "subtitle": "Check our example on using Quivr"
+  }
 }

frontend/public/locales/es/home.json

@@ -1,5 +1,9 @@
 {
   "sign_in": "Iniciar sesión",
   "sign_up": "Registrarse",
-  "star_us": "Danos una estrella en Github"
+  "star_us": "Danos una estrella en Github",
+  "useCases": {
+    "title": "Experiméntalo ahora.",
+    "subtitle": "Comprueba nuestro ejemplo de uso de Quivr."
+  }
 }

frontend/public/locales/fr/home.json

@@ -1,5 +1,9 @@
 {
   "sign_in": "Se connecter",
   "sign_up": "S'inscrire",
-  "star_us": "Étoilez-nous sur Github"
+  "star_us": "Étoilez-nous sur Github",
+  "useCases": {
+    "title": "Expérimentez-le maintenant.",
+    "subtitle": "Consultez notre exemple d'utilisation de Quivr."
+  }
 }

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

@@ -1,5 +1,9 @@
 {
   "sign_in": "Entrar",
   "sign_up": "Cadastrar",
-  "star_us": "Nos avalie no Github"
+  "star_us": "Nos avalie no Github",
+  "useCases": {
+    "title": "Experimente agora.",
+    "subtitle": "Confira nosso exemplo de uso do Quivr."
+  }
 }

frontend/public/locales/ru/home.json

@@ -1,5 +1,9 @@
 {
   "sign_in": "Войти",
   "sign_up": "Зарегистрироваться",
-  "star_us": "Поставьте звезду на Github"
+  "star_us": "Поставьте звезду на Github",
+  "useCases": {
+    "title": "Попробуйте сейчас.",
+    "subtitle": "Посмотрите наш пример использования Quivr."
+  }
 }

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

@@ -1,5 +1,9 @@
 {
   "sign_in": "登录",
   "sign_up": "注册",
-  "star_us": "在Github上给我们加星"
+  "star_us": "在Github上给我们加星",
+  "useCases": {
+    "title": "立刻体验。",
+    "subtitle": "查看我们使用 Quivr 的示例。"
+  }
 }