New login page UI (#4862)

* wip new home page multiuser auth

* implement new login page designs for single and multiuser auth

* fix scroll overflow on mobile

* rounded custom logos

* fix up translation entry to use var

---------

Co-authored-by: Timothy Carambat <rambat1010@gmail.com>

frontend/src/components/Modals/Password/MultiUserAuth.jsx

@@ -32,68 +32,67 @@ const RecoveryForm = ({ onSubmit, setShowRecoveryForm }) => {
   return (
     <form
       onSubmit={handleSubmit}
-      className="flex flex-col justify-center items-center relative rounded-2xl border-none bg-theme-bg-secondary md:shadow-[0_4px_14px_rgba(0,0,0,0.25)] md:px-8 px-0 py-4 w-full md:w-fit mt-10 md:mt-0"
+      className="flex flex-col justify-center items-center"
     >
-      <div className="flex items-start justify-between pt-11 pb-9 w-screen md:w-full md:px-12 px-6 ">
-        <div className="flex flex-col gap-y-4 w-full">
-          <h3 className="text-4xl md:text-lg font-bold text-theme-text-primary text-center md:text-left">
-            {t("login.password-reset.title")}
-          </h3>
-          <p className="text-sm text-theme-text-secondary md:text-left md:max-w-[300px] px-4 md:px-0 text-center">
+      <div className="flex items-start justify-between pt-7 pb-9">
+        <div className="flex items-center flex-col gap-y-[18px] max-w-[300px]">
+          <div className="flex gap-x-1">
+            <h3 className="text-white light:text-slate-950 text-3xl leading-[28px] font-medium text-center white-space-nowrap block">
+              {t("login.password-reset.title")}
+            </h3>
+          </div>
+          <p className="text-zinc-400 light:text-zinc-600 text-sm text-center">
             {t("login.password-reset.description")}
           </p>
         </div>
       </div>
-      <div className="md:px-12 px-6 space-y-6 flex h-full w-full">
-        <div className="w-full flex flex-col gap-y-4">
-          <div className="flex flex-col gap-y-2">
-            <label className="text-white text-sm font-bold">
+      <div className="w-full px-12">
+        <div className="w-full flex flex-col gap-y-3">
+          <div className="w-full flex flex-col gap-y-2">
+            <label className="text-zinc-300 light:text-slate-800 text-sm">
               {t("login.multi-user.placeholder-username")}
             </label>
             <input
               name="username"
               type="text"
-              placeholder={t("login.multi-user.placeholder-username")}
+              className="border-none bg-zinc-800 light:bg-slate-200 text-zinc-200 light:text-zinc-600 text-sm rounded-lg p-2.5 w-[300px] h-[34px] focus:outline-none focus:ring-1 focus:ring-sky-300"
               value={username}
               onChange={(e) => setUsername(e.target.value)}
-              className="border-none bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]"
               required
+              autoComplete="off"
             />
           </div>
-          <div className="flex flex-col gap-y-2">
-            <label className="text-white text-sm font-bold">
+          <div className="w-full flex flex-col gap-y-2">
+            <label className="text-zinc-300 light:text-slate-800 text-sm">
               {t("login.password-reset.recovery-codes")}
             </label>
             {recoveryCodeInputs.map((code, index) => (
-              <div key={index}>
-                <input
-                  type="text"
-                  name={`recoveryCode${index + 1}`}
-                  placeholder={t("login.password-reset.recovery-code", {
-                    index: index + 1,
-                  })}
-                  value={code}
-                  onChange={(e) =>
-                    handleRecoveryCodeChange(index, e.target.value)
-                  }
-                  className="border-none bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]"
-                  required
-                />
-              </div>
+              <input
+                key={index}
+                type="text"
+                name={`recoveryCode${index + 1}`}
+                className="border-none bg-zinc-800 light:bg-slate-200 text-zinc-200 light:text-zinc-600 text-sm rounded-lg p-2.5 w-[300px] h-[34px] focus:outline-none focus:ring-1 focus:ring-sky-300"
+                value={code}
+                onChange={(e) =>
+                  handleRecoveryCodeChange(index, e.target.value)
+                }
+                required
+                autoComplete="off"
+              />
             ))}
           </div>
         </div>
       </div>
-      <div className="flex items-center md:p-12 md:px-0 px-6 mt-12 md:mt-0 space-x-2 border-gray-600 w-full flex-col gap-y-8">
+      <div className="flex items-center px-12 mt-9 space-x-2 w-full flex-col gap-y-6">
         <button
           type="submit"
-          className="md:text-primary-button md:bg-transparent md:w-[300px] text-dark-text text-sm font-bold focus:ring-4 focus:outline-none rounded-md border-[1.5px] border-primary-button md:h-[34px] h-[48px] md:hover:text-white md:hover:bg-primary-button bg-primary-button focus:z-10 w-full"
+          className="text-zinc-950 bg-white hover:bg-zinc-300 light:bg-sky-200 light:text-slate-950 light:hover:bg-sky-300 text-sm font-semibold rounded-lg border-primary-button h-[34px] w-full"
         >
           {t("login.password-reset.title")}
         </button>
         <button
           type="button"
-          className="text-white text-sm flex gap-x-1 hover:text-primary-button hover:underline -mb-8"
+          className="text-zinc-200 light:text-zinc-600 hover:text-sky-300 light:hover:text-sky-600 hover:underline text-sm flex gap-x-1"
           onClick={() => setShowRecoveryForm(false)}
         >
           {t("login.password-reset.back-to-login")}
@@ -115,48 +114,54 @@ const ResetPasswordForm = ({ onSubmit }) => {
   return (
     <form
       onSubmit={handleSubmit}
-      className="flex flex-col justify-center items-center relative rounded-2xl bg-theme-bg-secondary md:shadow-[0_4px_14px_rgba(0,0,0,0.25)] md:px-8 px-0 py-4 w-full md:w-fit mt-10 md:mt-0"
+      className="flex flex-col justify-center items-center"
     >
-      <div className="flex items-start justify-between pt-11 pb-9 w-screen md:w-full md:px-12 px-6">
-        <div className="flex flex-col gap-y-4 w-full">
-          <h3 className="text-4xl md:text-2xl font-bold text-white text-center md:text-left">
-            Reset Password
-          </h3>
-          <p className="text-sm text-white/90 md:text-left md:max-w-[300px] px-4 md:px-0 text-center">
+      <div className="flex items-start justify-between pt-7 pb-9">
+        <div className="flex items-center flex-col gap-y-[18px] max-w-[300px]">
+          <div className="flex gap-x-1">
+            <h3 className="text-white light:text-slate-950 text-[38px] leading-[28px] font-medium text-center white-space-nowrap block">
+              Reset Password
+            </h3>
+          </div>
+          <p className="text-zinc-400 light:text-zinc-600 text-sm text-center">
             Enter your new password.
           </p>
         </div>
       </div>
-      <div className="md:px-12 px-6 space-y-6 flex h-full w-full">
-        <div className="w-full flex flex-col gap-y-4">
-          <div>
+      <div className="w-full px-12">
+        <div className="w-full flex flex-col gap-y-3">
+          <div className="w-full flex flex-col gap-y-2">
+            <label className="text-zinc-300 light:text-slate-800 text-sm">
+              New Password
+            </label>
             <input
               type="password"
               name="newPassword"
-              placeholder="New Password"
+              className="border-none bg-zinc-800 light:bg-slate-200 text-zinc-200 light:text-zinc-600 text-sm rounded-lg p-2.5 w-[300px] h-[34px] focus:outline-none focus:ring-1 focus:ring-sky-300"
               value={newPassword}
               onChange={(e) => setNewPassword(e.target.value)}
-              className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
               required
             />
           </div>
-          <div>
+          <div className="w-full flex flex-col gap-y-2">
+            <label className="text-zinc-300 light:text-slate-800 text-sm">
+              Confirm Password
+            </label>
             <input
               type="password"
               name="confirmPassword"
-              placeholder="Confirm Password"
+              className="border-none bg-zinc-800 light:bg-slate-200 text-zinc-200 light:text-zinc-600 text-sm rounded-lg p-2.5 w-[300px] h-[34px] focus:outline-none focus:ring-1 focus:ring-sky-300"
               value={confirmPassword}
               onChange={(e) => setConfirmPassword(e.target.value)}
-              className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
               required
             />
           </div>
         </div>
       </div>
-      <div className="flex items-center md:p-12 md:px-0 px-6 mt-12 md:mt-0 space-x-2 border-gray-600 w-full flex-col gap-y-8">
+      <div className="flex items-center px-12 mt-9 space-x-2 w-full flex-col gap-y-6">
         <button
           type="submit"
-          className="md:text-primary-button md:bg-transparent md:w-[300px] text-dark-text text-sm font-bold focus:ring-4 focus:outline-none rounded-md border-[1.5px] border-primary-button md:h-[34px] h-[48px] md:hover:text-white md:hover:bg-primary-button bg-primary-button focus:z-10 w-full"
+          className="text-zinc-950 bg-white hover:bg-zinc-300 light:bg-sky-200 light:text-slate-950 light:hover:bg-sky-300 text-sm font-semibold rounded-lg border-primary-button h-[34px] w-full"
         >
           Reset Password
         </button>
@@ -280,68 +285,71 @@ export default function MultiUserAuth() {
     return <ResetPasswordForm onSubmit={handleResetSubmit} />;
   return (
     <>
-      <form onSubmit={handleLogin}>
-        <div className="flex flex-col justify-center items-center relative rounded-2xl bg-theme-bg-secondary md:shadow-[0_4px_14px_rgba(0,0,0,0.25)] md:px-12 py-12 -mt-4 md:mt-0">
-          <div className="flex items-start justify-between pt-11 pb-9 rounded-t">
-            <div className="flex items-center flex-col gap-y-4">
-              <div className="flex gap-x-1">
-                <h3 className="text-md md:text-2xl font-bold text-white text-center white-space-nowrap hidden md:block">
-                  {t("login.multi-user.welcome")}
-                </h3>
-                <p className="text-4xl md:text-2xl font-bold bg-gradient-to-r from-[#75D6FF] via-[#FFFFFF] light:via-[#75D6FF] to-[#FFFFFF] light:to-[#75D6FF] bg-clip-text text-transparent">
-                  {customAppName || "AnythingLLM"}
-                </p>
-              </div>
-              <p className="text-sm text-theme-text-secondary text-center">
-                {t("login.sign-in.start")} {customAppName || "AnythingLLM"}{" "}
-                {t("login.sign-in.end")}
-              </p>
+      <form
+        onSubmit={handleLogin}
+        className="flex flex-col justify-center items-center"
+      >
+        <div className="flex items-start justify-between pt-7 pb-9">
+          <div className="flex items-center flex-col gap-y-[18px] max-w-[300px]">
+            <div className="flex gap-x-1">
+              <h3 className="text-white light:text-slate-950 text-[38px] leading-[28px] font-medium text-center white-space-nowrap block">
+                {t("login.multi-user.welcome")}
+              </h3>
             </div>
+            <p className="text-zinc-400 light:text-zinc-600 text-sm text-center">
+              {t("login.sign-in", { appName: customAppName || "AnythingLLM" })}
+            </p>
           </div>
-          <div className="w-full px-4 md:px-12">
-            <div className="w-full flex flex-col gap-y-4">
-              <div className="w-screen md:w-full md:px-0 px-6">
-                <input
-                  name="username"
-                  type="text"
-                  placeholder={t("login.multi-user.placeholder-username")}
-                  className="border-none bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]"
-                  required={true}
-                  autoComplete="off"
-                />
-              </div>
-              <div className="w-screen md:w-full md:px-0 px-6">
-                <input
-                  name="password"
-                  type="password"
-                  placeholder={t("login.multi-user.placeholder-password")}
-                  className="border-none bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]"
-                  required={true}
-                  autoComplete="off"
-                />
-              </div>
-              {error && <p className="text-red-400 text-sm">Error: {error}</p>}
+        </div>
+        <div className="w-full px-12">
+          <div className="w-full flex flex-col gap-y-3">
+            <div className="w-full flex flex-col gap-y-2">
+              <label className="text-zinc-300 light:text-slate-800 text-sm">
+                {t("login.multi-user.placeholder-username")}
+              </label>
+              <input
+                name="username"
+                type="text"
+                className="border-none bg-zinc-800 light:bg-slate-200 text-zinc-200 light:text-zinc-600 text-sm rounded-lg p-2.5 w-[300px] h-[34px] focus:outline-none focus:ring-1 focus:ring-sky-300"
+                required={true}
+                autoComplete="off"
+              />
             </div>
+            <div className="w-full px-0 flex flex-col gap-y-2">
+              <label className="text-zinc-300 light:text-slate-800 text-sm">
+                {t("login.multi-user.placeholder-password")}
+              </label>
+              <input
+                name="password"
+                type="password"
+                className="border-none bg-zinc-800 light:bg-slate-200 text-zinc-200 light:text-zinc-600 text-sm rounded-lg p-2.5 w-[300px] h-[34px] focus:outline-none focus:ring-1 focus:ring-sky-300"
+                required={true}
+                autoComplete="off"
+              />
+            </div>
+            {error && <p className="text-red-400 text-sm">Error: {error}</p>}
           </div>
-          <div className="flex items-center md:p-12 px-10 mt-12 md:mt-0 space-x-2 border-gray-600 w-full flex-col gap-y-8">
-            <button
-              disabled={loading}
-              type="submit"
-              className="md:text-primary-button md:bg-transparent text-dark-text text-sm font-bold focus:ring-4 focus:outline-none rounded-md border-[1.5px] border-primary-button md:h-[34px] h-[48px] md:hover:text-white md:hover:bg-primary-button bg-primary-button focus:z-10 w-full"
-            >
-              {loading
-                ? t("login.multi-user.validating")
-                : t("login.multi-user.login")}
-            </button>
-            <button
-              type="button"
-              className="text-white text-sm flex gap-x-1 hover:text-primary-button hover:underline"
-              onClick={handleResetPassword}
-            >
-              {t("login.multi-user.forgot-pass")}?
-              <b>{t("login.multi-user.reset")}</b>
-            </button>
-          </div>
+        </div>
+        <div className="flex items-center px-12 mt-9 space-x-2 w-full flex-col gap-y-6">
+          <button
+            disabled={loading}
+            type="submit"
+            className="text-zinc-950 bg-white hover:bg-zinc-300 light:bg-sky-200 light:text-slate-950 light:hover:bg-sky-300 text-sm font-semibold rounded-lg border-primary-button h-[34px] w-full"
+          >
+            {loading
+              ? t("login.multi-user.validating")
+              : t("login.multi-user.login")}
+          </button>
+          <button
+            type="button"
+            className="text-zinc-200 light:text-zinc-600 hover:text-sky-300 light:hover:text-sky-600 hover:underline text-sm flex gap-x-1"
+            onClick={handleResetPassword}
+          >
+            {t("login.multi-user.forgot-pass")}?
+            <b className="font-semibold text-sky-300 light:text-sky-600">
+              {t("login.multi-user.reset")}
+            </b>
+          </button>
         </div>
       </form>
 

frontend/src/components/Modals/Password/SingleUserAuth.jsx

@@ -69,50 +69,49 @@ export default function SingleUserAuth() {
 
   return (
     <>
-      <form onSubmit={handleLogin}>
-        <div className="flex flex-col justify-center items-center relative rounded-2xl bg-theme-bg-secondary md:shadow-[0_4px_14px_rgba(0,0,0,0.25)] md:px-12 py-12 -mt-36 md:-mt-10">
-          <div className="flex items-start justify-between pt-11 pb-9 rounded-t">
-            <div className="flex items-center flex-col gap-y-4">
-              <div className="flex gap-x-1">
-                <h3 className="text-md md:text-2xl font-bold text-white text-center white-space-nowrap hidden md:block">
-                  {t("login.multi-user.welcome")}
-                </h3>
-                <p className="text-4xl md:text-2xl font-bold bg-gradient-to-r from-[#75D6FF] via-[#FFFFFF] light:via-[#75D6FF] to-[#FFFFFF] light:to-[#75D6FF] bg-clip-text text-transparent">
-                  {customAppName || "AnythingLLM"}
-                </p>
-              </div>
-              <p className="text-sm text-theme-text-secondary text-center">
-                {t("login.sign-in.start")} {customAppName || "AnythingLLM"}{" "}
-                {t("login.sign-in.end")}
-              </p>
+      <form
+        onSubmit={handleLogin}
+        className="flex flex-col justify-center items-center"
+      >
+        <div className="flex items-start justify-between pt-7 pb-9">
+          <div className="flex items-center flex-col gap-y-[18px] max-w-[300px]">
+            <div className="flex gap-x-1">
+              <h3 className="text-white light:text-slate-950 text-3xl leading-[28px] font-medium text-center white-space-nowrap block">
+                {t("login.multi-user.welcome")}
+              </h3>
             </div>
+            <p className="text-zinc-400 light:text-zinc-600 text-sm text-center">
+              {t("login.sign-in", { appName: customAppName || "AnythingLLM" })}
+            </p>
           </div>
-          <div className="w-full px-4 md:px-12">
-            <div className="w-full flex flex-col gap-y-4">
-              <div className="w-screen md:w-full md:px-0 px-6">
-                <input
-                  name="password"
-                  type="password"
-                  placeholder="Password"
-                  className="border-none bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-md p-2.5 w-full h-[48px] md:w-[300px] md:h-[34px]"
-                  required={true}
-                  autoComplete="off"
-                />
-              </div>
-              {error && <p className="text-red-400 text-sm">Error: {error}</p>}
+        </div>
+        <div className="w-full px-12">
+          <div className="w-full flex flex-col gap-y-3">
+            <div className="w-full flex flex-col gap-y-2">
+              <label className="text-zinc-300 light:text-slate-800 text-sm">
+                Password
+              </label>
+              <input
+                name="password"
+                type="password"
+                className="border-none bg-zinc-800 light:bg-slate-200 text-zinc-200 light:text-zinc-600 text-sm rounded-lg p-2.5 w-[300px] h-[34px] focus:outline-none focus:ring-1 focus:ring-sky-300"
+                required={true}
+                autoComplete="off"
+              />
             </div>
+            {error && <p className="text-red-400 text-sm">Error: {error}</p>}
           </div>
-          <div className="flex items-center md:p-12 px-10 mt-12 md:mt-0 space-x-2 border-gray-600 w-full flex-col gap-y-8">
-            <button
-              disabled={loading}
-              type="submit"
-              className="md:text-primary-button md:bg-transparent text-dark-text text-sm font-bold focus:ring-4 focus:outline-none rounded-md border-[1.5px] border-primary-button md:h-[34px] h-[48px] md:hover:text-white md:hover:bg-primary-button bg-primary-button focus:z-10 w-full"
-            >
-              {loading
-                ? t("login.multi-user.validating")
-                : t("login.multi-user.login")}
-            </button>
-          </div>
+        </div>
+        <div className="flex items-center px-12 mt-9 space-x-2 w-full flex-col gap-y-6">
+          <button
+            disabled={loading}
+            type="submit"
+            className="text-zinc-950 bg-white hover:bg-zinc-300 light:bg-sky-200 light:text-slate-950 light:hover:bg-sky-300 text-sm font-semibold rounded-lg border-primary-button h-[34px] w-full"
+          >
+            {loading
+              ? t("login.multi-user.validating")
+              : t("login.multi-user.login")}
+          </button>
         </div>
       </form>
 

frontend/src/components/Modals/Password/index.jsx

@@ -8,42 +8,18 @@ import {
   AUTH_TIMESTAMP,
 } from "../../../utils/constants";
 import useLogo from "../../../hooks/useLogo";
-import illustration from "@/media/illustrations/login-illustration.svg";
 
 export default function PasswordModal({ mode = "single" }) {
-  const { loginLogo } = useLogo();
+  const { loginLogo, isCustomLogo } = useLogo();
   return (
-    <div className="fixed top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] h-full bg-theme-bg-primary flex flex-col md:flex-row items-center justify-center">
-      <div
-        style={{
-          background: `
-    radial-gradient(circle at center, transparent 40%, black 100%),
-    linear-gradient(180deg, #85F8FF 0%, #65A6F2 100%)
-  `,
-          width: "575px",
-          filter: "blur(150px)",
-          opacity: "0.4",
-        }}
-        className="absolute left-0 top-0 z-0 h-full w-full"
+    <div className="fixed inset-0 bg-zinc-950 light:bg-slate-50 flex flex-col items-center justify-center overflow-hidden">
+      <img
+        src={loginLogo}
+        alt="Logo"
+        className={`max-h-[80px] ${isCustomLogo ? "rounded-lg" : ""}`}
+        style={{ objectFit: "contain" }}
       />
-      <div className="hidden md:flex md:w-1/2 md:h-full md:items-center md:justify-center">
-        <img
-          className="w-full h-full object-contain z-50"
-          src={illustration}
-          alt="login illustration"
-        />
-      </div>
-      <div className="flex flex-col items-center justify-center h-full w-full md:w-1/2 z-50 relative md:-mt-20 mt-0 !border-none bg-theme-bg-secondary md:bg-transparent">
-        <img
-          src={loginLogo}
-          alt="Logo"
-          className={`hidden relative md:flex rounded-2xl w-fit m-4 z-30 ${
-            mode === "single" ? "md:top-2" : "md:top-12"
-          } absolute max-h-[65px]`}
-          style={{ objectFit: "contain" }}
-        />
-        {mode === "single" ? <SingleUserAuth /> : <MultiUserAuth />}
-      </div>
+      {mode === "single" ? <SingleUserAuth /> : <MultiUserAuth />}
     </div>
   );
 }

frontend/src/locales/ar/common.js

@@ -113,10 +113,7 @@ const TRANSLATIONS = {
       "forgot-pass": "هل نسيت كلمة المرور",
       reset: "إعادة الضبط",
     },
-    "sign-in": {
-      start: "تسجيل الدخول إلى",
-      end: "حساب.",
-    },
+    "sign-in": "تسجيل الدخول إلى حساب {{appName}}.",
     "password-reset": {
       title: "إعادة تعيين كلمة المرور",
       description:

frontend/src/locales/cs/common.js

@@ -122,10 +122,7 @@ const TRANSLATIONS = {
       "forgot-pass": "Zapomněli jste heslo",
       reset: "Resetovat",
     },
-    "sign-in": {
-      start: "Přihlaste se do svého",
-      end: "účtu.",
-    },
+    "sign-in": "Přihlaste se do svého {{appName}} účtu.",
     "password-reset": {
       title: "Reset hesla",
       description: "Níže uveďte potřebné informace pro resetování hesla.",

frontend/src/locales/da/common.js

@@ -115,10 +115,7 @@ const TRANSLATIONS = {
       "forgot-pass": "Glemt adgangskode",
       reset: "Nulstil",
     },
-    "sign-in": {
-      start: "Log ind på din",
-      end: "konto.",
-    },
+    "sign-in": "Log ind på din {{appName}} konto.",
     "password-reset": {
       title: "Nulstilling af adgangskode",
       description:

frontend/src/locales/de/common.js

@@ -115,10 +115,7 @@ const TRANSLATIONS = {
       "forgot-pass": "Passwort vergessen",
       reset: "Zurücksetzen",
     },
-    "sign-in": {
-      start: "Melden Sie sich bei Ihrem",
-      end: "Konto an.",
-    },
+    "sign-in": "Melden Sie sich bei Ihrem {{appName}} Konto an.",
     "password-reset": {
       title: "Passwort zurücksetzen",
       description:

frontend/src/locales/en/common.js

@@ -118,7 +118,7 @@ const TRANSLATIONS = {
   // Page Definitions
   login: {
     "multi-user": {
-      welcome: "Welcome to",
+      welcome: "Welcome",
       "placeholder-username": "Username",
       "placeholder-password": "Password",
       login: "Login",
@@ -126,10 +126,8 @@ const TRANSLATIONS = {
       "forgot-pass": "Forgot password",
       reset: "Reset",
     },
-    "sign-in": {
-      start: "Sign in to your",
-      end: "account.",
-    },
+    "sign-in":
+      "Enter your username and password to access your {{appName}} instance.",
     "password-reset": {
       title: "Password Reset",
       description:

frontend/src/locales/es/common.js

@@ -115,10 +115,7 @@ const TRANSLATIONS = {
       "forgot-pass": "Olvidé mi contraseña",
       reset: "Restablecer",
     },
-    "sign-in": {
-      start: "Inicia sesión en tu",
-      end: "cuenta.",
-    },
+    "sign-in": "Inicia sesión en tu cuenta de {{appName}}.",
     "password-reset": {
       title: "Restablecimiento de contraseña",
       description:

frontend/src/locales/et/common.js

@@ -113,10 +113,7 @@ const TRANSLATIONS = {
       "forgot-pass": "Unustasid parooli",
       reset: "Lähtesta",
     },
-    "sign-in": {
-      start: "Logi sisse oma",
-      end: "kontosse.",
-    },
+    "sign-in": "Logi sisse oma {{appName}} kontosse.",
     "password-reset": {
       title: "Parooli lähtestamine",
       description: "Sisesta all vajalik info, et parool lähtestada.",

frontend/src/locales/fa/common.js

@@ -107,10 +107,7 @@ const TRANSLATIONS = {
       "forgot-pass": "فراموشی رمز عبور",
       reset: "بازنشانی",
     },
-    "sign-in": {
-      start: "ورود به حساب",
-      end: "کاربری شما.",
-    },
+    "sign-in": "ورود به حساب {{appName}} کاربری شما.",
     "password-reset": {
       title: "بازنشانی رمز عبور",
       description: "برای بازنشانی رمز عبور خود، اطلاعات لازم را وارد کنید.",

frontend/src/locales/fr/common.js

@@ -114,10 +114,7 @@ const TRANSLATIONS = {
       "forgot-pass": "Mot de passe oublié",
       reset: "Réinitialiser",
     },
-    "sign-in": {
-      start: "Connectez-vous à votre",
-      end: "compte.",
-    },
+    "sign-in": "Connectez-vous à votre compte {{appName}}.",
     "password-reset": {
       title: "Réinitialisation du mot de passe",
       description:

frontend/src/locales/he/common.js

@@ -112,10 +112,7 @@ const TRANSLATIONS = {
       "forgot-pass": "שכחת סיסמה",
       reset: "איפוס",
     },
-    "sign-in": {
-      start: "התחבר ל",
-      end: "חשבונך.",
-    },
+    "sign-in": "התחבר לחשבון {{appName}} שלך.",
     "password-reset": {
       title: "איפוס סיסמה",
       description: "ספק את המידע הדרוש למטה כדי לאפס את סיסמתך.",

frontend/src/locales/it/common.js

@@ -107,10 +107,7 @@ const TRANSLATIONS = {
       "forgot-pass": "Password dimenticata",
       reset: "Reset",
     },
-    "sign-in": {
-      start: "Accedi al tuo",
-      end: "account.",
-    },
+    "sign-in": "Accedi al tuo {{appName}} account.",
     "password-reset": {
       title: "Password Reset",
       description:

frontend/src/locales/ja/common.js

@@ -114,10 +114,7 @@ const TRANSLATIONS = {
       "forgot-pass": "パスワードを忘れた",
       reset: "リセット",
     },
-    "sign-in": {
-      start: "サインインして",
-      end: "アカウントにアクセスします。",
-    },
+    "sign-in": "{{appName}} アカウントにサインインします。",
     "password-reset": {
       title: "パスワードリセット",
       description:

frontend/src/locales/ko/common.js

@@ -113,10 +113,7 @@ const TRANSLATIONS = {
       "forgot-pass": "비밀번호를 잊으셨나요",
       reset: "재설정",
     },
-    "sign-in": {
-      start: "사용자 계정으로 ",
-      end: "에 로그인하세요.",
-    },
+    "sign-in": "{{appName}}에 로그인하세요.",
     "password-reset": {
       title: "비밀번호 재설정",
       description: "비밀번호를 재설정하려면 아래에 필요한 정보를 입력하세요.",

frontend/src/locales/lv/common.js

@@ -114,10 +114,7 @@ const TRANSLATIONS = {
       "forgot-pass": "Aizmirsi paroli",
       reset: "Atiestatīt",
     },
-    "sign-in": {
-      start: "Piesakieties savā",
-      end: "kontā.",
-    },
+    "sign-in": "Piesakieties savā {{appName}} kontā.",
     "password-reset": {
       title: "Paroles atiestatīšana",
       description:

frontend/src/locales/nl/common.js

@@ -115,10 +115,7 @@ const TRANSLATIONS = {
       "forgot-pass": "Wachtwoord vergeten",
       reset: "Reset",
     },
-    "sign-in": {
-      start: "Meld je aan bij je",
-      end: "account.",
-    },
+    "sign-in": "Meld je aan bij je {{appName}} account.",
     "password-reset": {
       title: "Wachtwoord Resetten",
       description:

frontend/src/locales/pl/common.js

@@ -115,10 +115,7 @@ const TRANSLATIONS = {
       "forgot-pass": "Nie pamiętam hasła",
       reset: "Reset",
     },
-    "sign-in": {
-      start: "Zaloguj się do",
-      end: "",
-    },
+    "sign-in": "Zaloguj się do {{appName}}.",
     "password-reset": {
       title: "Resetowanie hasła",
       description: "Podaj poniżej niezbędne informacje, aby zresetować hasło.",

frontend/src/locales/pt_BR/common.js

@@ -113,10 +113,7 @@ const TRANSLATIONS = {
       "forgot-pass": "Esqueci a senha",
       reset: "Redefinir",
     },
-    "sign-in": {
-      start: "Acesse sua",
-      end: "conta.",
-    },
+    "sign-in": "Acesse sua {{appName}} conta.",
     "password-reset": {
       title: "Redefinição de Senha",
       description:

frontend/src/locales/ro/common.js

@@ -115,10 +115,7 @@ const TRANSLATIONS = {
       "forgot-pass": "Ai uitat parola",
       reset: "Resetează",
     },
-    "sign-in": {
-      start: "Autentifică-te în",
-      end: "cont.",
-    },
+    "sign-in": "Autentifică-te în {{appName}} cont.",
     "password-reset": {
       title: "Resetare parolă",
       description:

frontend/src/locales/ru/common.js

@@ -114,10 +114,7 @@ const TRANSLATIONS = {
       "forgot-pass": "Забыли пароль",
       reset: "Сбросить",
     },
-    "sign-in": {
-      start: "Войти в ваш",
-      end: "аккаунт.",
-    },
+    "sign-in": "Войти в ваш {{appName}} аккаунт.",
     "password-reset": {
       title: "Сброс пароля",
       description:

frontend/src/locales/tr/common.js

@@ -107,10 +107,7 @@ const TRANSLATIONS = {
       "forgot-pass": "Şifremi Unuttum",
       reset: "Sıfırla",
     },
-    "sign-in": {
-      start: "Hesabınıza",
-      end: "giriş yapın.",
-    },
+    "sign-in": "{{appName}} hesabınıza giriş yapın.",
     "password-reset": {
       title: "Şifre Sıfırlama",
       description: "Şifrenizi sıfırlamak için gerekli bilgileri aşağıya girin.",

frontend/src/locales/vn/common.js

@@ -107,10 +107,7 @@ const TRANSLATIONS = {
       "forgot-pass": "Quên mật khẩu",
       reset: "Đặt lại",
     },
-    "sign-in": {
-      start: "Đăng nhập vào",
-      end: "tài khoản của bạn.",
-    },
+    "sign-in": "Đăng nhập vào {{appName}} tài khoản của bạn.",
     "password-reset": {
       title: "Mật khẩu Đặt lại",
       description: "Cung cấp thông tin cần thiết dưới đây để đặt lại mật khẩu.",

frontend/src/locales/zh/common.js

@@ -110,10 +110,7 @@ const TRANSLATIONS = {
       "forgot-pass": "忘记密码",
       reset: "重置",
     },
-    "sign-in": {
-      start: "登录你的",
-      end: "账户",
-    },
+    "sign-in": "登录你的 {{appName}} 账户",
     "password-reset": {
       title: "重置密码",
       description: "请提供以下必要信息以重置你的密码。",

frontend/src/locales/zh_TW/common.js

@@ -110,10 +110,7 @@ const TRANSLATIONS = {
       "forgot-pass": "忘記密碼",
       reset: "重設",
     },
-    "sign-in": {
-      start: "登入您的",
-      end: "帳號。",
-    },
+    "sign-in": "登入您的 {{appName}} 帳號。",
     "password-reset": {
       title: "重設密碼",
       description: "請在下方提供必要資訊以重設您的密碼。",

frontend/src/media/illustrations/login-illustration.svg

@@ -1,174 +0,0 @@
-<svg width="500" height="656" viewBox="0 0 500 656" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_1_4)">
-<g filter="url(#filter1_ii_1_4)">
-<path d="M126.778 581.68V225.373L177.937 256.068V611.774L126.778 581.68Z" fill="url(#paint0_linear_1_4)"/>
-</g>
-<path d="M127.929 577.98L192.097 616.48L177.693 625.145L112.619 588.534L112.619 220.107L127.817 208.962L127.929 577.98Z" fill="url(#paint1_linear_1_4)"/>
-<path d="M176.786 258.588L112.619 220.088L128.154 208.851L192.096 248.034V616.461L177.596 625.326L176.786 258.588Z" fill="url(#paint2_linear_1_4)"/>
-<g filter="url(#filter2_ii_1_4)">
-<path d="M265.61 514.411V158.104L316.769 188.799V544.505L265.61 514.411Z" fill="url(#paint3_linear_1_4)"/>
-</g>
-<path d="M266.761 510.711L330.928 549.211L316.525 557.876L251.451 521.266L251.451 152.839L266.648 141.694L266.761 510.711Z" fill="url(#paint4_linear_1_4)"/>
-<path d="M315.618 191.32L251.451 152.82L266.986 141.583L330.928 180.765V549.192L316.428 558.057L315.618 191.32Z" fill="url(#paint5_linear_1_4)"/>
-<g filter="url(#filter3_ii_1_4)">
-<path d="M404.442 418.683V62.3754L455.602 93.071V448.776L404.442 418.683Z" fill="url(#paint6_linear_1_4)"/>
-</g>
-<path d="M405.594 414.982L469.761 453.483L455.357 462.147L390.283 425.537L390.283 57.11L405.481 45.9652L405.594 414.982Z" fill="url(#paint7_linear_1_4)"/>
-<path d="M454.45 95.5913L390.283 57.0911L405.818 45.8542L469.761 85.0366V453.464L455.261 462.328L454.45 95.5913Z" fill="url(#paint8_linear_1_4)"/>
-</g>
-<rect x="88.956" y="351.304" width="68.0244" height="40.4539" rx="15" fill="url(#paint9_linear_1_4)"/>
-<rect x="104.57" y="359.68" width="36.797" height="5.23376" rx="2.61688" fill="white" fill-opacity="0.8"/>
-<rect x="104.57" y="378.148" width="36.797" height="5.23376" rx="2.61688" fill="white" fill-opacity="0.8"/>
-<rect x="104.57" y="368.914" width="36.797" height="5.23376" rx="2.61688" fill="white" fill-opacity="0.8"/>
-<mask id="mask0_1_4" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="211" width="178" height="436">
-<rect x="0.787216" y="211.982" width="177.152" height="434.649" fill="#D9D9D9"/>
-</mask>
-<g mask="url(#mask0_1_4)">
-<rect x="51.503" y="479.103" width="183.106" height="78.9537" rx="39.4769" fill="url(#paint10_linear_1_4)"/>
-<circle cx="99.9761" cy="509.549" r="13.9262" fill="white"/>
-<circle cx="143.056" cy="519.287" r="13.9262" fill="white"/>
-<circle cx="186.136" cy="519.287" r="13.9262" fill="white"/>
-</g>
-<mask id="mask1_1_4" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="148" y="178" width="169" height="340">
-<rect x="148.819" y="178.725" width="167.95" height="338.735" fill="#D9D9D9"/>
-</mask>
-<g mask="url(#mask1_1_4)">
-<rect x="187.512" y="233.079" width="183.106" height="78.9537" rx="39.4769" fill="url(#paint11_linear_1_4)"/>
-<path d="M310.535 287.977L305.269 284.227L311.812 275.529L301.997 272.178L303.992 266.034L313.886 269.305V258.613H320.35V269.305L330.244 266.034L332.239 272.178L322.424 275.529L328.888 284.227L323.701 287.977L317.078 279.28L310.535 287.977Z" fill="white"/>
-<path d="M270.716 287.977L265.449 284.227L271.992 275.529L262.178 272.178L264.173 266.034L274.067 269.305V258.613H280.53V269.305L290.425 266.034L292.42 272.178L282.605 275.529L289.068 284.227L283.882 287.977L277.259 279.28L270.716 287.977Z" fill="white"/>
-<path d="M230.897 287.977L225.63 284.227L232.173 275.529L222.359 272.178L224.354 266.034L234.248 269.305V258.613H240.711V269.305L250.606 266.034L252.601 272.178L242.786 275.529L249.249 284.227L244.063 287.977L237.44 279.28L230.897 287.977Z" fill="white"/>
-<rect x="252.529" y="387.811" width="100.24" height="43.2226" rx="21.6113" fill="url(#paint12_linear_1_4)"/>
-<circle cx="279.065" cy="404.479" r="7.62378" fill="white"/>
-<circle cx="302.649" cy="409.81" r="7.62378" fill="white"/>
-</g>
-<mask id="mask2_1_4" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="199" y="0" width="257" height="309">
-<rect x="199.166" y="0.894867" width="256.435" height="307.227" fill="#D9D9D9"/>
-</mask>
-<g mask="url(#mask2_1_4)">
-<rect x="317.531" y="103.658" width="183.106" height="108.893" rx="40" fill="url(#paint13_linear_1_4)"/>
-<rect x="343.093" y="123.945" width="131.983" height="18.7724" rx="8" fill="white" fill-opacity="0.8"/>
-<rect x="343.093" y="173.49" width="131.983" height="18.7724" rx="8" fill="white" fill-opacity="0.8"/>
-<rect x="343.093" y="148.718" width="131.983" height="18.7724" rx="8" fill="white" fill-opacity="0.8"/>
-</g>
-<defs>
-<filter id="filter0_d_1_4" x="102.619" y="35.8542" width="397.142" height="619.471" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dx="10" dy="10"/>
-<feGaussianBlur stdDeviation="10"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_4"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_4" result="shape"/>
-</filter>
-<filter id="filter1_ii_1_4" x="122.778" y="221.373" width="59.1591" height="394.401" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dx="-4" dy="4"/>
-<feGaussianBlur stdDeviation="3"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1_4"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dx="4" dy="-4"/>
-<feGaussianBlur stdDeviation="3"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.471302 0 0 0 0 0.547141 0 0 0 0 0.651872 0 0 0 0.2 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_1_4" result="effect2_innerShadow_1_4"/>
-</filter>
-<filter id="filter2_ii_1_4" x="261.61" y="154.104" width="59.159" height="394.401" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dx="-4" dy="4"/>
-<feGaussianBlur stdDeviation="3"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1_4"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dx="4" dy="-4"/>
-<feGaussianBlur stdDeviation="3"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.471302 0 0 0 0 0.547141 0 0 0 0 0.651872 0 0 0 0.2 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_1_4" result="effect2_innerShadow_1_4"/>
-</filter>
-<filter id="filter3_ii_1_4" x="400.442" y="58.3754" width="59.159" height="394.401" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dx="-4" dy="4"/>
-<feGaussianBlur stdDeviation="3"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1_4"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dx="4" dy="-4"/>
-<feGaussianBlur stdDeviation="3"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.471302 0 0 0 0 0.547141 0 0 0 0 0.651872 0 0 0 0.2 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_1_4" result="effect2_innerShadow_1_4"/>
-</filter>
-<linearGradient id="paint0_linear_1_4" x1="152.358" y1="225.373" x2="152.358" y2="611.774" gradientUnits="userSpaceOnUse">
-<stop stop-color="#41495D"/>
-<stop offset="1" stop-color="#293240"/>
-</linearGradient>
-<linearGradient id="paint1_linear_1_4" x1="152.358" y1="208.962" x2="152.358" y2="625.145" gradientUnits="userSpaceOnUse">
-<stop stop-color="#151B23"/>
-<stop offset="1" stop-color="#526A89"/>
-</linearGradient>
-<linearGradient id="paint2_linear_1_4" x1="152.358" y1="211.423" x2="152.358" y2="627.606" gradientUnits="userSpaceOnUse">
-<stop stop-color="#697784"/>
-<stop offset="1" stop-color="#181B1E"/>
-</linearGradient>
-<linearGradient id="paint3_linear_1_4" x1="291.189" y1="158.104" x2="291.189" y2="544.505" gradientUnits="userSpaceOnUse">
-<stop stop-color="#41495D"/>
-<stop offset="1" stop-color="#293240"/>
-</linearGradient>
-<linearGradient id="paint4_linear_1_4" x1="291.189" y1="141.694" x2="291.189" y2="557.876" gradientUnits="userSpaceOnUse">
-<stop stop-color="#151B23"/>
-<stop offset="1" stop-color="#526A89"/>
-</linearGradient>
-<linearGradient id="paint5_linear_1_4" x1="291.19" y1="144.155" x2="291.19" y2="560.337" gradientUnits="userSpaceOnUse">
-<stop stop-color="#697784"/>
-<stop offset="1" stop-color="#181B1E"/>
-</linearGradient>
-<linearGradient id="paint6_linear_1_4" x1="430.022" y1="62.3754" x2="430.022" y2="448.776" gradientUnits="userSpaceOnUse">
-<stop stop-color="#41495D"/>
-<stop offset="1" stop-color="#293240"/>
-</linearGradient>
-<linearGradient id="paint7_linear_1_4" x1="430.022" y1="45.9652" x2="430.022" y2="462.147" gradientUnits="userSpaceOnUse">
-<stop stop-color="#151B23"/>
-<stop offset="1" stop-color="#526A89"/>
-</linearGradient>
-<linearGradient id="paint8_linear_1_4" x1="430.022" y1="48.4262" x2="430.022" y2="464.608" gradientUnits="userSpaceOnUse">
-<stop stop-color="#697784"/>
-<stop offset="1" stop-color="#181B1E"/>
-</linearGradient>
-<linearGradient id="paint9_linear_1_4" x1="122.968" y1="351.304" x2="122.968" y2="391.758" gradientUnits="userSpaceOnUse">
-<stop stop-color="#46C8FF"/>
-<stop offset="0.438941" stop-color="#3AA5D2"/>
-<stop offset="1" stop-color="#2A7899"/>
-</linearGradient>
-<linearGradient id="paint10_linear_1_4" x1="143.056" y1="479.103" x2="143.056" y2="558.057" gradientUnits="userSpaceOnUse">
-<stop stop-color="#46C8FF"/>
-<stop offset="0.438941" stop-color="#3AA5D2"/>
-<stop offset="1" stop-color="#2A7899"/>
-</linearGradient>
-<linearGradient id="paint11_linear_1_4" x1="279.065" y1="233.079" x2="279.065" y2="312.033" gradientUnits="userSpaceOnUse">
-<stop stop-color="#46C8FF"/>
-<stop offset="0.438941" stop-color="#3AA5D2"/>
-<stop offset="1" stop-color="#2A7899"/>
-</linearGradient>
-<linearGradient id="paint12_linear_1_4" x1="302.649" y1="387.811" x2="302.649" y2="431.034" gradientUnits="userSpaceOnUse">
-<stop stop-color="#46C8FF"/>
-<stop offset="0.438941" stop-color="#3AA5D2"/>
-<stop offset="1" stop-color="#2A7899"/>
-</linearGradient>
-<linearGradient id="paint13_linear_1_4" x1="409.084" y1="103.658" x2="409.084" y2="212.55" gradientUnits="userSpaceOnUse">
-<stop stop-color="#46C8FF"/>
-<stop offset="0.438941" stop-color="#3AA5D2"/>
-<stop offset="1" stop-color="#2A7899"/>
-</linearGradient>
-</defs>
-</svg>