feat: contact sales page (front layout) (#1451)

# Description Epic: #1232 Issue: #1443 ## Screenshots (if appropriate): ### 🖥️ Desktop <img width="1512" alt="image" src="https://github.com/StanGirard/quivr/assets/67386567/dce63bf7-0046-4f2b-9633-bdc34a1b0893"> ### 📱 Mobile <img width="338" alt="image" src="https://github.com/StanGirard/quivr/assets/67386567/8828b5bc-3819-4774-9d77-d60fbff72e6c">
QuivrHQ · Oct 20, 2023 · f90c43c · f90c43c
1 parent 6514358
commit f90c43c
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 38 deletions.
diff --git a/frontend/app/(home)/components/HomeHeader/HomeHeader.tsx b/frontend/app/(home)/components/HomeHeader/HomeHeader.tsx
@@ -3,12 +3,21 @@ import { useTranslation } from "react-i18next";
 import { AiFillStar } from "react-icons/ai";
 import { LuChevronRight } from "react-icons/lu";
 
-import { HomeHeaderBackground } from "./components/HomeHeaderBackground";
+import { cn } from "@/lib/utils";
+
 import { PopoverMenuMobile } from "./components/PopoverMenuMobile";
 import { QuivrLogo } from "./components/QuivrLogo";
 
-export const HomeHeader = (): JSX.Element => {
+type HomeNavProps = {
+  color?: "white" | "black";
+};
+
+export const HomeHeader = ({ color = "white" }: HomeNavProps): JSX.Element => {
   const { t } = useTranslation("home");
+  const linkStyle = {
+    white: "text-white hover:text-slate-200",
+    black: "text-black",
+  };
 
   const navItems = [
     {
@@ -20,34 +29,42 @@ export const HomeHeader = (): JSX.Element => {
     { href: "/login", label: t("sign_in") },
   ];
 
-  const navLinks = navItems.map(({ href, label, leftIcon }) => (
-    <li key={label}>
+  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>
+    ));
+
+  return (
+    <header className="w-screen flex justify-between items-center p-5 min-w-max md:max-w-6xl m-auto">
       <Link
-        href={href}
-        className="flex justify-between items-center hover:text-primary p-2 md:text-white md:hover:text-slate-200 gap-1"
+        href="/"
+        className={cn(
+          "text-3xl flex gap-2 items-center",
+          linkStyle[color],
+          color === "black" ? "hover:text-black" : "hover:text-white"
+        )}
       >
-        {leftIcon}
-        {label}
-        <LuChevronRight size={16} className={leftIcon ? "md:hidden" : ""} />
+        <QuivrLogo size={64} color={color} />
+        <div>Quivr</div>
       </Link>
-    </li>
-  ));
-
-  return (
-    <>
-      <HomeHeaderBackground />
-      <header className="w-screen flex justify-between items-center p-5 min-w-max md:max-w-6xl m-auto">
-        <div className="text-white text-3xl flex gap-2 items-center">
-          <QuivrLogo size={64} />
-          <div className="cursor-default">Quivr</div>
-        </div>
-        <div className="hidden md:flex">
-          <ul className="flex gap-4 items-center">{navLinks}</ul>
-        </div>
-        <div className="md:hidden z-10">
-          <PopoverMenuMobile navLinks={navLinks} />
-        </div>
-      </header>
-    </>
+      <div className="hidden md:flex">
+        <ul className="flex gap-4 items-center">{navLinks("desktop")}</ul>
+      </div>
+      <div className="md:hidden z-10">
+        <PopoverMenuMobile navLinks={navLinks("mobile")} color={color} />
+      </div>
+    </header>
   );
 };
diff --git a/frontend/app/(home)/components/HomeHeader/components/PopoverMenuMobile.tsx b/frontend/app/(home)/components/HomeHeader/components/PopoverMenuMobile.tsx
@@ -1,14 +1,18 @@
 import * as Popover from "@radix-ui/react-popover";
 import { LuMenu, LuX } from "react-icons/lu";
 
+import { cn } from "@/lib/utils";
+
 import { QuivrLogo } from "./QuivrLogo";
 
 type PopoverMenuMobileProps = {
   navLinks: JSX.Element[];
+  color?: "white" | "black";
 };
 
 export const PopoverMenuMobile = ({
   navLinks,
+  color = "white",
 }: PopoverMenuMobileProps): JSX.Element => {
   return (
     <>
@@ -19,7 +23,10 @@ export const PopoverMenuMobile = ({
             <button
               title="menu"
               type="button"
-              className="text-white bg-[#D9D9D9] bg-opacity-30 rounded-full px-4 py-1"
+              className={cn(
+                "bg-[#D9D9D9] bg-opacity-30 rounded-full px-4 py-1",
+                color === "white" ? "text-white" : "text-black"
+              )}
             >
               <LuMenu size={32} />
             </button>

diff --git a/frontend/app/(home)/components/Sections/FooterSection.tsx b/frontend/app/(home)/components/Sections/FooterSection.tsx
@@ -16,16 +16,18 @@ export const FooterSection = (): JSX.Element => {
       <p>
         {t("description_1")} <br /> {t("description_2")}{" "}
       </p>
-      <div className="flex items-center">
+      <div className="flex items-center justify-center gap-5 flex-wrap">
         <Link href="/signup">
           <Button className=" rounded-full">
             {t("start_using")}
             <LuChevronRight size={24} />
           </Button>
         </Link>
-        <Button variant="tertiary">
-          {t("contact_sales")} <LuChevronRight size={24} />
-        </Button>
+        <Link href="/contact">
+          <Button variant="tertiary">
+            {t("contact_sales")} <LuChevronRight size={24} />
+          </Button>
+        </Link>
       </div>
       <ul className="flex gap-10 mt-5 mb-10 text-black">
         <li>

diff --git a/frontend/app/(home)/components/Sections/IntroSection.tsx b/frontend/app/(home)/components/Sections/IntroSection.tsx
@@ -27,9 +27,11 @@ export const IntroSection = (): JSX.Element => {
                 {t("try_demo")} <LuChevronRight size={24} />
               </Button>
             </Link>
-            <Button variant="tertiary" className="font-semibold">
-              {t("contact_sales")} <LuChevronRight size={24} />
-            </Button>
+            <Link href="/contact">
+              <Button variant="tertiary" className="font-semibold">
+                {t("contact_sales")} <LuChevronRight size={24} />
+              </Button>
+            </Link>
           </div>
         </div>
         <div className="w-[80vw] lg:w-[calc(50vw)] lg:shrink-0 lg:max-h-[calc(80vh-100px)] rounded flex items-center justify-center lg:justify-start">

diff --git a/frontend/app/(home)/page.tsx b/frontend/app/(home)/page.tsx
@@ -16,6 +16,7 @@ import {
   SecuritySection,
   TestimonialsSection,
 } from "./components";
+import { HomeHeaderBackground } from "./components/HomeHeader/components/HomeHeaderBackground";
 import { UseCases } from "./components/UseCases/UseCases";
 
 const HomePage = (): JSX.Element => {
@@ -32,6 +33,7 @@ const HomePage = (): JSX.Element => {
   if (isNewHomePage) {
     return (
       <>
+        <HomeHeaderBackground />
         <HomeHeader />
 
         <main className="relative flex flex-col items-center">

diff --git a/frontend/app/contact/page.tsx b/frontend/app/contact/page.tsx
@@ -0,0 +1,35 @@
+"use client";
+import { useFeatureIsOn } from "@growthbook/growthbook-react";
+import { redirect } from "next/navigation";
+
+import {
+  FooterSection,
+  HomeHeader,
+  HomeSection,
+  TestimonialsSection,
+} from "../(home)/components";
+
+const ContactSalesPage = (): JSX.Element => {
+  const isNewHomePage = useFeatureIsOn("new-homepage-activated");
+  if (!isNewHomePage) {
+    redirect("/");
+  }
+
+  return (
+    <div className="bg-[#FCFAF6]">
+      <HomeHeader color="black" />
+
+      <main className="relative flex flex-col items-center">
+        TODO: The Form!
+        <HomeSection bg="bg-[#FCFAF6]">
+          <TestimonialsSection />
+        </HomeSection>
+        <HomeSection bg="bg-gradient-to-b from-[#D07DF9] to-[#7A27FD]">
+          <FooterSection />
+        </HomeSection>
+      </main>
+    </div>
+  );
+};
+
+export default ContactSalesPage;
diff --git a/frontend/lib/components/Footer/index.tsx b/frontend/lib/components/Footer/index.tsx
@@ -11,8 +11,9 @@ const Footer = (): JSX.Element => {
   const path = usePathname();
   const isNewHomePageActivated = useFeatureIsOn("new-homepage-activated");
   const isNewHomePage = path === "/" && isNewHomePageActivated;
+  const isContactPage = path === "/contact";
 
-  if (session?.user !== undefined || isNewHomePage) {
+  if (session?.user !== undefined || isNewHomePage || isContactPage) {
     return <></>;
   }
 

diff --git a/frontend/lib/components/NavBar/index.tsx b/frontend/lib/components/NavBar/index.tsx
@@ -17,8 +17,9 @@ export const NavBar = (): JSX.Element => {
 
   const isNewHomePageActivated = useFeatureIsOn("new-homepage-activated");
   const isNewHomePage = path === "/" && isNewHomePageActivated;
+  const isContactPage = path === "/contact";
 
-  if (pageHasSidebar || isNewHomePage) {
+  if (pageHasSidebar || isNewHomePage || isContactPage) {
     return <></>;
   }