QuivrHQ/quivr
1
1
Fork 0
mirror of https://github.com/QuivrHQ/quivr.git synced 2024-12-15 09:32:22 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
# 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">
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
frontend/app/(home)/components/HomeHeader/HomeHeader.tsx
View File

@ -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}>
<Link
href={href}
className="flex justify-between items-center hover:text-primary p-2 md:text-white md:hover:text-slate-200 gap-1"
>
{leftIcon}
{label}
<LuChevronRight size={16} className={leftIcon ? "md:hidden" : ""} />
</Link>
</li>
));
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 (
<>
<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>
</>
<header className="w-screen flex justify-between items-center p-5 min-w-max md:max-w-6xl m-auto">
<Link
href="/"
className={cn(
"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">
<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>
);
};

9
frontend/app/(home)/components/HomeHeader/components/PopoverMenuMobile.tsx
View File

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

10
frontend/app/(home)/components/Sections/FooterSection.tsx
View File

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

8
frontend/app/(home)/components/Sections/IntroSection.tsx
View File

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

2
frontend/app/(home)/page.tsx
View File

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

35
frontend/app/contact/page.tsx Normal file
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;

3
frontend/lib/components/Footer/index.tsx
View File

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

3
frontend/lib/components/NavBar/index.tsx
View File

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