54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
import BR from "@/components/Layout/LineBreak";
|
|
import { Button } from "@/ui/Button";
|
|
import QuestionFormModal from "@/components/modals/QuestionFormModal";
|
|
import { useModalStore } from "@/stores/useModalStore";
|
|
|
|
export default function RequestForDemo() {
|
|
const { t } = useTranslation();
|
|
const { setModal } = useModalStore();
|
|
|
|
return (
|
|
<div
|
|
className="
|
|
flex max-md:flex-col flex-row lg:gap-[0.833vw] md:gap-[2.865vw] gap-[11.111vw]
|
|
lg:-mx-[1.389vw] lg:w-[calc(100%+2.778vw)] lg:pl-[1.389vw] lg:pr-0
|
|
md:-mx-[{...handlers}] md:w-[calc(100%+4.167vw)] md:pr-[2.083vw]
|
|
"
|
|
>
|
|
<div className="flex flex-col lg:max-w-[31.944vw] min-h-full">
|
|
<h2 className="line2 max-md:mb-[6.667vw]">
|
|
{t("requestDemo.titleLine1")} <BR lg md /> {t("requestDemo.titleLine2")}
|
|
<BR /> {t("requestDemo.titleLine3")}
|
|
</h2>
|
|
|
|
<div className="flex flex-col lg:gap-[2.222vw] md:gap-[4.167vw] mt-auto">
|
|
<p className="lg:headline1 headline2 text-[#7A7A7A]">
|
|
{t("requestDemo.description")}
|
|
</p>
|
|
<Button
|
|
onClick={() => {
|
|
setModal(
|
|
<QuestionFormModal products={[t("products.remoteDemo")]} />
|
|
);
|
|
}}
|
|
className="max-md:hidden btnl bg-gradient-saturated lg:py-[1.389vw] lg:px-[2.222vw] md:py-[2.604vw] md:px-[4.167vw] md:rounded-[2.083vw] lg:rounded-[1.111vw]"
|
|
>
|
|
{t("requestDemo.cta")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<video
|
|
poster="/img/showreel.png"
|
|
src="/videos/composition_c.mp4"
|
|
loop
|
|
autoPlay
|
|
muted
|
|
playsInline
|
|
className="lg:h-[44.444vw] md:h-[57.292vw] h-[122.222vw] lg:rounded-[1.111vw_0_0_1.111vw] md:rounded-[2.083vw_0_0_2.083vw] max-md:rounded-[4.444vw] object-cover overflow-hidden"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|