upd
This commit is contained in:
@@ -63,7 +63,7 @@ export default function AvailableDemos() {
|
||||
</h2>
|
||||
|
||||
<div
|
||||
className="grid lg:hidden md:hidden grid-cols-4 gap-3 px-5 [scrollbar-width:none] relative max-md:aspect-[340/344] [transform-style:preserve-3d] items-stretch mb-[5.556vw]"
|
||||
className="grid lg:hidden md:hidden grid-cols-3 gap-3 px-[5vw] [scrollbar-width:none] relative max-md:aspect-[340/344] [transform-style:preserve-3d] items-stretch mb-[5.556vw]"
|
||||
{...handlers}
|
||||
>
|
||||
{projects.map((project, index, { length }) => (
|
||||
@@ -81,23 +81,21 @@ export default function AvailableDemos() {
|
||||
className={`bg-gradient-to-r from-[#232425] to-[#1A1A1C] [background:linear-gradient(to_right,#232425,#1A1A1C)] p-0.5 rounded-2xl flex flex-1 justify-center !duration-500 items-center group max-md:absolute max-md:inset-x-5 max-md:w-auto self-stretch max-md:h-full transition-[scale,transform] will-change-[transform,scale] select-none ${
|
||||
slideCount - 1 === current
|
||||
? "max-md:[transform:translateZ(40px)]"
|
||||
: "max-md:[scale:85%]"
|
||||
} ${
|
||||
slideCount - 1 === (current + 1) % slideCount
|
||||
? "max-md:translate-x-[calc(7.5%+20px)]"
|
||||
: slideCount - 1 === (current + 1) % slideCount
|
||||
? "max-md:[transform:translateX(calc(7.5%+20px))_scale(0.85)]"
|
||||
: slideCount - 1 === (current - 1 + slideCount) % slideCount
|
||||
? "max-md:translate-x-[calc(-7.5%-20px)]"
|
||||
: ""
|
||||
? "max-md:[transform:translateX(calc(-7.5%-20px))_scale(0.85)]"
|
||||
: "max-md:[transform:scale(0.85)]"
|
||||
}`}
|
||||
>
|
||||
<div className="md:bg-[#0F1011] h-full w-full lg:rounded-[1.111vw] rounded-2xl flex items-center p-6">
|
||||
<div className="md:bg-[#0F1011] h-full w-full lg:rounded-[1.111vw] rounded-2xl flex items-center justify-center p-6">
|
||||
<div className="flex flex-col items-center space-y-6">
|
||||
<p className="heading2 font-medium text-center">
|
||||
{t("demos.ctaTitle")}
|
||||
</p>
|
||||
<a
|
||||
href="#contacts"
|
||||
className="btnm font-medium group-hover:scale-105 duration-500 lg:px-[1.667vw] lg:py-[1.181vw] px-6 py-[17px] transition-transform lg:rounded-[0.833vw] rounded-xl bg-gradient"
|
||||
className="btnm font-medium group-hover:scale-105 duration-500 lg:px-[1.667vw] lg:py-[1.181vw] px-6 py-[17px] transition-transform lg:rounded-[0.833vw] rounded-xl bg-gradient-saturated"
|
||||
>
|
||||
{t("demos.ctaButton")}
|
||||
</a>
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
import { Feedback } from "@/components/Layout/Feedback";
|
||||
import AvailableDemos from "./AvailableDemos";
|
||||
import RequestForDemo from "./RequestForDemo";
|
||||
import StreamPlayer from "./StreamPlayer";
|
||||
|
||||
export default function StreamDemo() {
|
||||
return (
|
||||
<div className="lg:space-y-[9.722vw] md:space-y-[13.021vw] space-y-[27.778vw]">
|
||||
<div className="lg:space-y-[140px] space-y-[100px]">
|
||||
<AvailableDemos />
|
||||
<RequestForDemo />
|
||||
<div className="w-full shrink-0 aspect-[340/600] max-h-[85dvh] md:max-lg:aspect-[736/480] md:max-lg:max-h-[80dvh] lg:aspect-auto lg:h-[44.444vw] lg:max-h-none">
|
||||
<StreamPlayer className="h-full min-h-[12rem]" />
|
||||
</div>
|
||||
|
||||
@@ -20,7 +20,7 @@ export default function StreamPlayer({ className }: { className?: string }) {
|
||||
muted
|
||||
className="lg:aspect-[1400/640] max-h-dvh md:max-lg:aspect-[736/480] aspect-[340/600]"
|
||||
>
|
||||
<p className="absolute font-medium md:bottom-6 md:left-6 bottom-4 left-4 lg:max-w-[40%] md:max-lg:max-w-[80%] accent">
|
||||
<p className="absolute font-medium md:bottom-6 md:left-6 bottom-4 left-4 lg:max-w-[40%] md:max-lg:max-w-[80%] w-[85vw] accent">
|
||||
{t("streamPlayer.caption")}
|
||||
</p>
|
||||
</VideoPlayer>
|
||||
|
||||
@@ -28,17 +28,16 @@ export function StreamingProject({
|
||||
const streamHref = build ? streamDemoUrlFromBuild(build) : href;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`lg:aspect-[344/396] aspect-[300/344] flex-1 md:max-lg:min-w-[300px] transition-[scale,transform] will-change-[transform,scale] lg:rounded-[1.111vw] rounded-2xl lg:p-[1.111vw] p-4 flex duration-500 relative overflow-hidden group max-md:absolute max-md:inset-x-5 max-md:w-auto select-none h-full ${
|
||||
<a
|
||||
href={streamHref}
|
||||
className={`lg:aspect-[344/396] max-md:aspect-none flex-1 md:max-lg:min-w-[300px] transition-transform will-change-transform lg:rounded-[1.111vw] rounded-2xl lg:p-[1.111vw] p-4 flex duration-500 relative overflow-hidden group max-md:absolute max-md:inset-x-5 max-md:w-auto select-none h-full ${
|
||||
index === current
|
||||
? "max-md:[transform:translateZ(40px)]"
|
||||
: "max-md:[scale:85%]"
|
||||
} ${
|
||||
index === (current + 1) % count
|
||||
? "max-md:[transform:translateX(calc(7.5%+20px))]"
|
||||
: index === (current + 1) % count
|
||||
? "max-md:[transform:translateX(calc(7.5%+20px))_scale(0.85)]"
|
||||
: index === (current - 1 + count) % count
|
||||
? "max-md:[transform:translateX(calc(-7.5%-20px))]"
|
||||
: ""
|
||||
? "max-md:[transform:translateX(calc(-7.5%-20px))_scale(0.85)]"
|
||||
: "max-md:[transform:scale(0.85)]"
|
||||
} ${className ?? ""}`}
|
||||
>
|
||||
<div className="z-0 rounded-2xl absolute inset-0 overflow-hidden transition-transform duration-500 group-hover:scale-110">
|
||||
@@ -74,7 +73,7 @@ export function StreamingProject({
|
||||
</div>
|
||||
<div className="z-[2] lg:hidden absolute right-4 bottom-4">
|
||||
<a
|
||||
className="bg-gradient btns flex gap-2 items-center px-3 py-2 font-medium rounded-xl"
|
||||
className="bg-gradient-saturated btns flex gap-2 items-center px-3 py-2 font-medium rounded-xl"
|
||||
href={streamHref}
|
||||
>
|
||||
{t("streamingProject.watch")}
|
||||
@@ -94,6 +93,6 @@ export function StreamingProject({
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
"cta": "Request a call"
|
||||
},
|
||||
"streamPlayer": {
|
||||
"caption": "GRAFF.estate remote demo module works on\u00a0any device; all you need is an internet connection"
|
||||
"caption": "GRAFF.estate Stream is available on\u00a0any device — all you need for a demo is an internet connection."
|
||||
},
|
||||
"feedback": {
|
||||
"titleLead": "Want to improve conversion?",
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
"cta": "Оставить заявку"
|
||||
},
|
||||
"streamPlayer": {
|
||||
"caption": "GRAFF.estate — модуль удаленной демонстрации — доступен на\u00a0любых устройствах, для\u00a0демонстрации нужен только интернет"
|
||||
"caption": "Модуль удаленных продаж GRAFF.estate доступен на\u00a0любых устройствах, для\u00a0демонстрации нужен только\u00a0интернет."
|
||||
},
|
||||
"feedback": {
|
||||
"titleLead": "Хотите увеличить конверсию?",
|
||||
|
||||
+6
-2
@@ -35,9 +35,13 @@ export function Button({
|
||||
className={`group cursor-pointer relative px-6 py-2${
|
||||
rounded ? " rounded-" + rounded : ""
|
||||
} min-w-fit ${
|
||||
(color === "primary" ? "bg-gradient" : "") ||
|
||||
(color === "primary" ? "bg-gradient-saturated" : "") ||
|
||||
(color === "secondary" ? " outline-1 outline-[#3D425C]" : "")
|
||||
} ${icon ? "pr-4" : ""} flex gap-1 items-center overflow-hidden ${widthClass} ${className ?? ""} justify-between`}
|
||||
} ${
|
||||
icon ? "pr-4" : ""
|
||||
} flex gap-1 items-center overflow-hidden ${widthClass} ${
|
||||
className ?? ""
|
||||
} justify-between`}
|
||||
>
|
||||
<span className="group-hover:opacity-10 absolute top-0 left-0 w-full h-full transition-opacity bg-black opacity-0"></span>
|
||||
<span className={"relative font-medium" + (icon ? "" : " m-auto")}>
|
||||
|
||||
Reference in New Issue
Block a user