feat: add sponsor and blog links (#1472)

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


<img width="539" alt="Screenshot 2023-10-24 at 12 09 30"
src="https://github.com/StanGirard/quivr/assets/63923024/97cc1d8c-90a5-4656-83cd-99ca68f1432c">
<img width="1512" alt="Screenshot 2023-10-24 at 12 09 16"
src="https://github.com/StanGirard/quivr/assets/63923024/92a78ea1-dee6-469d-b452-9e6ecfba888c">

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

@@ -7,6 +7,7 @@ import { cn } from "@/lib/utils";
 
 import { PopoverMenuMobile } from "./components/PopoverMenuMobile";
 import { QuivrLogo } from "./components/QuivrLogo";
+import { NavbarItem } from "./types";
 
 type HomeNavProps = {
   color?: "white" | "black";
@@ -19,32 +20,45 @@ export const HomeHeader = ({ color = "white" }: HomeNavProps): JSX.Element => {
     black: "text-black",
   };
 
-  const navItems = [
+  const navItems: NavbarItem[] = [
+    {
+      href: "https://theodo.co.uk",
+      label: `${t("sponsored_by")} Theodo`,
+      rightIcon: null,
+      newTab: true,
+      className: "underline",
+    },
     {
       href: "https://github.com/StanGirard/quivr",
       label: t("star_us"),
       leftIcon: <AiFillStar size={16} className="hidden md:inline" />,
+      rightIcon: null,
     },
+    { href: "/blog", label: t("blog"), rightIcon: null, newTab: true },
     { href: "/signup", label: t("sign_up") },
     { href: "/login", label: t("sign_in") },
   ];
 
   const navLinks = (device: "mobile" | "desktop") =>
-    navItems.map(({ href, label, leftIcon }) => (
-      <li key={label}>
-        <Link
-          href={href}
-          className={cn(
-            "flex justify-between items-center hover:text-primary p-2 gap-1",
-            device === "desktop" ? linkStyle[color] : null
-          )}
-        >
-          {leftIcon}
-          {label}
-          <LuChevronRight size={16} className={leftIcon ? "md:hidden" : ""} />
-        </Link>
-      </li>
-    ));
+    navItems.map(
+      ({ href, label, leftIcon, rightIcon, newTab = false, className }) => (
+        <li key={label}>
+          <Link
+            href={href}
+            {...(newTab && { target: "_blank", rel: "noopener noreferrer" })}
+            className={cn(
+              "flex justify-between items-center hover:text-primary p-2 gap-1",
+              device === "desktop" ? linkStyle[color] : null,
+              className
+            )}
+          >
+            {leftIcon}
+            {label}
+            {rightIcon !== null && (rightIcon ?? <LuChevronRight size={16} />)}
+          </Link>
+        </li>
+      )
+    );
 
   return (
     <header className="w-screen flex justify-between items-center p-5 min-w-max md:max-w-6xl m-auto">

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

@@ -0,0 +1,8 @@
+export type NavbarItem = {
+  href: string;
+  label: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode | null;
+  newTab?: boolean;
+  className?: string;
+};

frontend/public/locales/en/home.json

@@ -2,6 +2,8 @@
   "sign_in": "Sign in",
   "sign_up": "Sign up",
   "star_us": "Star us on Github",
+  "blog": "Blog",
+  "sponsored_by": "Sponsored by",
   "useCases": {
     "title": "Experience it now.",
     "subtitle": "Check our example on using Quivr"

frontend/public/locales/es/home.json

@@ -2,6 +2,8 @@
   "sign_in": "Iniciar sesión",
   "sign_up": "Registrarse",
   "star_us": "Danos una estrella en Github",
+  "blog": "Blog",
+  "sponsored_by": "Patrocinado por",
   "useCases": {
     "title": "Experiméntalo ahora.",
     "subtitle": "Comprueba nuestro ejemplo de uso de Quivr."

frontend/public/locales/fr/home.json

@@ -2,6 +2,8 @@
   "sign_in": "Se connecter",
   "sign_up": "S'inscrire",
   "star_us": "Étoilez-nous sur Github",
+  "blog": "Blog",
+  "sponsored_by": "Sponsorisé par",
   "useCases": {
     "title": "Expérimentez-le maintenant.",
     "subtitle": "Consultez notre exemple d'utilisation de Quivr."

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

@@ -2,6 +2,8 @@
   "sign_in": "Entrar",
   "sign_up": "Cadastrar",
   "star_us": "Nos avalie no Github",
+  "blog": "Blog",
+  "sponsored_by": "Patrocinado por",
   "useCases": {
     "title": "Experimente agora.",
     "subtitle": "Confira nosso exemplo de uso do Quivr."

frontend/public/locales/ru/home.json

@@ -2,6 +2,8 @@
   "sign_in": "Войти",
   "sign_up": "Зарегистрироваться",
   "star_us": "Поставьте звезду на Github",
+  "blog": "Блог",
+  "sponsored_by": "Спонсируется",
   "useCases": {
     "title": "Попробуйте сейчас.",
     "subtitle": "Посмотрите наш пример использования Quivr."

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

@@ -2,6 +2,8 @@
   "sign_in": "登录",
   "sign_up": "注册",
   "star_us": "在Github上给我们加星",
+  "blog": "博客",
+  "sponsored_by": "赞助商",
   "useCases": {
     "title": "立刻体验。",
     "subtitle": "查看我们使用 Quivr 的示例。"