mirror of
https://github.com/StanGirard/quivr.git
synced 2024-12-19 00:22:14 +03:00
f90c43cc42
# 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">
57 lines
2.2 KiB
TypeScript
57 lines
2.2 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useTranslation } from "react-i18next";
|
|
import { LuChevronRight } from "react-icons/lu";
|
|
|
|
import Button from "@/lib/components/ui/Button";
|
|
|
|
export const IntroSection = (): JSX.Element => {
|
|
const { t } = useTranslation("home", { keyPrefix: "intro" });
|
|
const laptopImage = "/Homepage/laptop-demo.png";
|
|
const smartphoneImage = "/Homepage/smartphone-demo.png";
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-col lg:flex-row items-center justify-center md:justify-start gap-10 lg:gap-0 xl:gap-10 lg:h-[calc(100vh-250px)] mb-[calc(50vw*tan(6deg))] md:mb-0">
|
|
<div className="w-[80vw] lg:w-[50%] lg:shrink-0 flex flex-col justify-center gap-10 sm:gap-20 lg:gap-32 xl:gap-36">
|
|
<div>
|
|
<h1 className="text-5xl leading-[4rem] sm:text-6xl sm:leading-[5rem] lg:text-[4.2rem] lg:leading-[6rem] font-bold text-black block max-w-2xl">
|
|
{t("title")} <span className="text-primary">Quivr</span>
|
|
</h1>
|
|
<br />
|
|
<p className="text-xl">{t("subtitle")}</p>
|
|
</div>
|
|
<div className="flex flex-col items-start sm:flex-row sm:items-center gap-5">
|
|
<Link href="/signup">
|
|
<Button className="text-white bg-black rounded-full">
|
|
{t("try_demo")} <LuChevronRight size={24} />
|
|
</Button>
|
|
</Link>
|
|
<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">
|
|
<Image
|
|
src={laptopImage}
|
|
alt="Quivr on laptop"
|
|
width={1200}
|
|
height={1200}
|
|
className="hidden sm:block max-w-[calc(80vh-100px)] max-h-[calc(80vh-100px)] xl:scale-125"
|
|
/>
|
|
<Image
|
|
src={smartphoneImage}
|
|
alt="Quivr on smartphone"
|
|
width={640}
|
|
height={640}
|
|
className="sm:hidden"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|