mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-12-15 17:43:03 +03:00
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">
This commit is contained in:
parent
6514358796
commit
f90c43cc42
frontend
@ -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>
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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">
|
||||||
|
@ -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">
|
||||||
|
35
frontend/app/contact/page.tsx
Normal file
35
frontend/app/contact/page.tsx
Normal 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;
|
@ -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 <></>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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 <></>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user