1
1
mirror of https://github.com/QuivrHQ/quivr.git synced 2024-12-15 17:43:03 +03:00

feat: contact sales page (front layout) ()

# Description

Epic: 
Issue: 

## 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">
This commit is contained in:
Matthieu Jacq 2023-10-20 15:38:35 +02:00 committed by GitHub
parent 6514358796
commit f90c43cc42
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 106 additions and 39 deletions
frontend
app
lib/components
Footer
NavBar

View File

@ -3,12 +3,21 @@ import { useTranslation } from "react-i18next";
import { AiFillStar } from "react-icons/ai"; import { AiFillStar } from "react-icons/ai";
import { LuChevronRight } from "react-icons/lu"; import { LuChevronRight } from "react-icons/lu";
import { HomeHeaderBackground } from "./components/HomeHeaderBackground"; import { cn } from "@/lib/utils";
import { PopoverMenuMobile } from "./components/PopoverMenuMobile"; import { PopoverMenuMobile } from "./components/PopoverMenuMobile";
import { QuivrLogo } from "./components/QuivrLogo"; 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 { t } = useTranslation("home");
const linkStyle = {
white: "text-white hover:text-slate-200",
black: "text-black",
};
const navItems = [ const navItems = [
{ {
@ -20,11 +29,15 @@ export const HomeHeader = (): JSX.Element => {
{ href: "/login", label: t("sign_in") }, { href: "/login", label: t("sign_in") },
]; ];
const navLinks = navItems.map(({ href, label, leftIcon }) => ( const navLinks = (device: "mobile" | "desktop") =>
navItems.map(({ href, label, leftIcon }) => (
<li key={label}> <li key={label}>
<Link <Link
href={href} href={href}
className="flex justify-between items-center hover:text-primary p-2 md:text-white md:hover:text-slate-200 gap-1" className={cn(
"flex justify-between items-center hover:text-primary p-2 gap-1",
device === "desktop" ? linkStyle[color] : null
)}
> >
{leftIcon} {leftIcon}
{label} {label}
@ -34,20 +47,24 @@ export const HomeHeader = (): JSX.Element => {
)); ));
return ( return (
<>
<HomeHeaderBackground />
<header className="w-screen flex justify-between items-center p-5 min-w-max md:max-w-6xl m-auto"> <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"> <Link
<QuivrLogo size={64} /> href="/"
<div className="cursor-default">Quivr</div> className={cn(
</div> "text-3xl flex gap-2 items-center",
linkStyle[color],
color === "black" ? "hover:text-black" : "hover:text-white"
)}
>
<QuivrLogo size={64} color={color} />
<div>Quivr</div>
</Link>
<div className="hidden md:flex"> <div className="hidden md:flex">
<ul className="flex gap-4 items-center">{navLinks}</ul> <ul className="flex gap-4 items-center">{navLinks("desktop")}</ul>
</div> </div>
<div className="md:hidden z-10"> <div className="md:hidden z-10">
<PopoverMenuMobile navLinks={navLinks} /> <PopoverMenuMobile navLinks={navLinks("mobile")} color={color} />
</div> </div>
</header> </header>
</>
); );
}; };

View File

@ -1,14 +1,18 @@
import * as Popover from "@radix-ui/react-popover"; import * as Popover from "@radix-ui/react-popover";
import { LuMenu, LuX } from "react-icons/lu"; import { LuMenu, LuX } from "react-icons/lu";
import { cn } from "@/lib/utils";
import { QuivrLogo } from "./QuivrLogo"; import { QuivrLogo } from "./QuivrLogo";
type PopoverMenuMobileProps = { type PopoverMenuMobileProps = {
navLinks: JSX.Element[]; navLinks: JSX.Element[];
color?: "white" | "black";
}; };
export const PopoverMenuMobile = ({ export const PopoverMenuMobile = ({
navLinks, navLinks,
color = "white",
}: PopoverMenuMobileProps): JSX.Element => { }: PopoverMenuMobileProps): JSX.Element => {
return ( return (
<> <>
@ -19,7 +23,10 @@ export const PopoverMenuMobile = ({
<button <button
title="menu" title="menu"
type="button" 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} /> <LuMenu size={32} />
</button> </button>

View File

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

View File

@ -27,9 +27,11 @@ export const IntroSection = (): JSX.Element => {
{t("try_demo")} <LuChevronRight size={24} /> {t("try_demo")} <LuChevronRight size={24} />
</Button> </Button>
</Link> </Link>
<Link href="/contact">
<Button variant="tertiary" className="font-semibold"> <Button variant="tertiary" className="font-semibold">
{t("contact_sales")} <LuChevronRight size={24} /> {t("contact_sales")} <LuChevronRight size={24} />
</Button> </Button>
</Link>
</div> </div>
</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"> <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">

View File

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

View File

@ -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;

View File

@ -11,8 +11,9 @@ const Footer = (): JSX.Element => {
const path = usePathname(); const path = usePathname();
const isNewHomePageActivated = useFeatureIsOn("new-homepage-activated"); const isNewHomePageActivated = useFeatureIsOn("new-homepage-activated");
const isNewHomePage = path === "/" && isNewHomePageActivated; const isNewHomePage = path === "/" && isNewHomePageActivated;
const isContactPage = path === "/contact";
if (session?.user !== undefined || isNewHomePage) { if (session?.user !== undefined || isNewHomePage || isContactPage) {
return <></>; return <></>;
} }

View File

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