From f90c43cc428b598c501a42b054bbadc2dfd7ff8e Mon Sep 17 00:00:00 2001 From: Matthieu Jacq <67386567+matthieujacq@users.noreply.github.com> Date: Fri, 20 Oct 2023 15:38:35 +0200 Subject: [PATCH] feat: contact sales page (front layout) (#1451) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Description Epic: #1232 Issue: #1443 ## Screenshots (if appropriate): ### 🖥️ Desktop image ### 📱 Mobile image --- .../components/HomeHeader/HomeHeader.tsx | 75 ++++++++++++------- .../components/PopoverMenuMobile.tsx | 9 ++- .../components/Sections/FooterSection.tsx | 10 ++- .../components/Sections/IntroSection.tsx | 8 +- frontend/app/(home)/page.tsx | 2 + frontend/app/contact/page.tsx | 35 +++++++++ frontend/lib/components/Footer/index.tsx | 3 +- frontend/lib/components/NavBar/index.tsx | 3 +- 8 files changed, 106 insertions(+), 39 deletions(-) create mode 100644 frontend/app/contact/page.tsx diff --git a/frontend/app/(home)/components/HomeHeader/HomeHeader.tsx b/frontend/app/(home)/components/HomeHeader/HomeHeader.tsx index 4dbb4d564..c39fbdea4 100644 --- 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 }) => ( -
  • - - {leftIcon} - {label} - - -
    • - )); + const navLinks = (device: "mobile" | "desktop") => + navItems.map(({ href, label, leftIcon }) => ( +
  • + + {leftIcon} + {label} + + +
    • + )); return ( - <> - -
    -
    - -
    Quivr
    -
    -
    -
      {navLinks}
    -
    -
    - -
    -
    - +
    + + +
    Quivr
    + +
    +
      {navLinks("desktop")}
    +
    +
    + +
    +
    ); }; diff --git a/frontend/app/(home)/components/HomeHeader/components/PopoverMenuMobile.tsx b/frontend/app/(home)/components/HomeHeader/components/PopoverMenuMobile.tsx index 5a9396a61..9067fca27 100644 --- 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 = ({ diff --git a/frontend/app/(home)/components/Sections/FooterSection.tsx b/frontend/app/(home)/components/Sections/FooterSection.tsx index 9c358c79d..954cd92d1 100644 --- 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 => {

    {t("description_1")}
    {t("description_2")}{" "}

    -
    +
    - + + +
    diff --git a/frontend/app/(home)/page.tsx b/frontend/app/(home)/page.tsx index e5b89f353..6837ee989 100644 --- 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 ( <> +
    diff --git a/frontend/app/contact/page.tsx b/frontend/app/contact/page.tsx new file mode 100644 index 000000000..c3a5bda54 --- /dev/null +++ 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 ( +
    + + +
    + TODO: The Form! + + + + + + +
    +
    + ); +}; + +export default ContactSalesPage; diff --git a/frontend/lib/components/Footer/index.tsx b/frontend/lib/components/Footer/index.tsx index 6503af782..2a030c473 100644 --- 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 index c3502cbe8..f489be14d 100644 --- 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 <>; }