feat: new landing page (#2264)

This pull request updates the origins in cors.py, origin in
resend_invitation_email.py, and referring_site in
add-new-email/index.ts. It also refactors the code in home/page.tsx and
next.config.js.

backend/middlewares/cors.py

@@ -8,6 +8,7 @@ origins = [
     "https://www.quivr.app",
     "http://quivr.app",
     "http://www.quivr.app",
+    "https://chat.quivr.app",
     "*",
 ]
 

backend/repository/brain_subscription/resend_invitation_email.py

@@ -15,7 +15,7 @@ def resend_invitation_email(
     brain_subscription: BrainSubscription,
     inviter_email: str,
     user_id: UUID,
-    origin: str = "https://www.quivr.app",
+    origin: str = "https://chat.quivr.app",
 ):
     brains_settings = BrainSettings()  # pyright: ignore reportPrivateUsage=none
 

backend/supabase/functions/add-new-email/index.ts

@@ -41,7 +41,7 @@ serve(
         send_welcome_email: false,
         utm_source: "quivr",
         utm_medium: "organic",
-        referring_site: "https://quivr.app",
+        referring_site: "https://chat.quivr.app",
       };
 
       const response = await fetch(url, {

frontend/app/(home)/page.tsx

@@ -1,73 +1,65 @@
 "use client";
-import { useEffect } from "react";
+import Link from "next/link";
+import { Suspense } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 
-import { useSupabase } from "@/lib/context/SupabaseProvider";
-import { redirectToPreviousPageOrSearchPage } from "@/lib/helpers/redirectToPreviousPageOrSearchPage";
+import { QuivrLogo } from "@/lib/assets/QuivrLogo";
+import { Divider } from "@/lib/components/ui/Divider";
+import { useAuthModes } from "@/lib/hooks/useAuthModes";
 
-import {
-  DemoSection,
-  FooterSection,
-  HomeHeader,
-  HomeSection,
-  IntroSection,
-  SecuritySection,
-  TestimonialsSection,
-} from "./components";
-import { HomeHeaderBackground } from "./components/HomeHeader/components/HomeHeaderBackground";
-import { UseCases } from "./components/UseCases/UseCases";
+import { EmailLogin } from "../(auth)/login/components/EmailLogin";
+import { GoogleLoginButton } from "../(auth)/login/components/GoogleLogin";
+import { useLogin } from "../(auth)/login/hooks/useLogin";
+import { EmailAuthContextType } from "../(auth)/login/types";
 
-const HomePage = (): JSX.Element => {
-  const { session } = useSupabase();
+const Main = (): JSX.Element => {
+  useLogin();
+  const { googleSso, password, magicLink } = useAuthModes();
 
-  useEffect(() => {
-    if (session?.user !== undefined) {
-      redirectToPreviousPageOrSearchPage();
-    }
-  }, [session?.user]);
+  const methods = useForm<EmailAuthContextType>({
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+  const { t } = useTranslation(["translation", "login"]);
 
   return (
-    <>
-      <HomeHeaderBackground />
-      <HomeHeader />
-
-      <main
-        className="relative flex flex-col items-center"
-        data-testid="home-page"
-      >
-        <HomeSection bg="transparent">
-          <IntroSection />
-        </HomeSection>
-
-        <HomeSection bg="bg-[#FCFAF6]" slantAfter="down" hiddenOnMobile={true}>
-          <DemoSection />
-        </HomeSection>
-
-        <HomeSection
-          bg="bg-[#362469]"
-          slantCurrent="down"
-          gradient="bg-gradient-to-t bg-gradient-to-t from-white to-[#362469]"
-        >
-          <UseCases />
-          <div />
-        </HomeSection>
-
-        <HomeSection bg="bg-white" slantBefore="down" slantAfter="up">
-          <SecuritySection />
-        </HomeSection>
-
-        <HomeSection bg="bg-[#FCFAF6]" slantCurrent="up">
-          <TestimonialsSection />
-        </HomeSection>
-
-        <HomeSection
-          bg="bg-gradient-to-b from-[#D07DF9] to-[#7A27FD]"
-          slantBefore="up"
-        >
-          <FooterSection />
-        </HomeSection>
+    <div className="w-screen h-screen bg-ivory" data-testid="sign-in-card">
+      <main className="h-full flex flex-col items-center justify-center">
+        <section className="w-full md:w-1/2 lg:w-1/3 flex flex-col gap-2">
+          <Link href="/" className="flex justify-center">
+            <QuivrLogo size={80} color="black" />
+          </Link>
+          <p className="text-center text-4xl font-medium">
+            {t("talk_to", { ns: "login" })}{" "}
+            <span className="text-primary">Quivr</span>
+          </p>
+          <div className="mt-5 flex flex-col">
+            <FormProvider {...methods}>
+              <EmailLogin />
+            </FormProvider>
+            {googleSso && (password || magicLink) && (
+              <Divider text={t("or")} className="my-3 uppercase" />
+            )}
+            {googleSso && <GoogleLoginButton />}
+          </div>
+          <p className="text-[10px] text-center">
+            {t("restriction_message", { ns: "login" })}
+          </p>
+        </section>
       </main>
-    </>
+    </div>
   );
 };
 
-export default HomePage;
+const Login = (): JSX.Element => {
+  return (
+    <Suspense fallback="Loading...">
+      <Main />
+    </Suspense>
+  );
+};
+
+export default Login;

frontend/next.config.js

@@ -25,6 +25,7 @@ const nextConfig = {
   images: {
     domains: [
       "www.quivr.app",
+      "chat.quivr.app",
       "quivr-cms.s3.eu-west-3.amazonaws.com",
       "www.gravatar.com",
       "media.licdn.com",
@@ -50,6 +51,7 @@ const ContentSecurityPolicy = {
     "https://api.june.so",
     "https://us.posthog.com",
     "https://preview.quivr.app",
+    "https://chat.quivr.app",
     "*.intercom.io",
     "*.intercomcdn.com",
     "https://*.octolane.com",
@@ -85,6 +87,7 @@ const ContentSecurityPolicy = {
     process.env.NEXT_PUBLIC_FRONTEND_URL,
     "https://quivr-cms.s3.eu-west-3.amazonaws.com",
     "https://preview.quivr.app",
+    "https://chat.quivr.app",
     "https://*.vercel.app",
   ],
   "script-src": [