upd

src/features/stream-demo/AvailableDemos.tsx

@@ -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:[transform:translateX(calc(7.5%+20px))_scale(0.85)]"
-              slideCount - 1 === (current + 1) % slideCount
-                ? "max-md:translate-x-[calc(7.5%+20px)]"
                 : 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>

src/features/stream-demo/StreamDemo.tsx

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

src/features/stream-demo/StreamPlayer.tsx

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

src/features/stream-demo/StreamingProject.tsx

@@ -28,17 +28,16 @@ export function StreamingProject({
   const streamHref = build ? streamDemoUrlFromBuild(build) : href;
 
   return (
-    <div
+    <a
-      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 ${
+      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))_scale(0.85)]"
-        index === (current + 1) % count
-          ? "max-md:[transform:translateX(calc(7.5%+20px))]"
           : 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>
   );
 }

src/i18n/locales/en.json

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

src/i18n/locales/ru.json

@@ -48,7 +48,7 @@
     "cta": "Оставить заявку"
   },
   "streamPlayer": {
-    "caption": "GRAFF.estate — модуль удаленной демонстрации — доступен на\u00a0любых устройствах, для\u00a0демонстрации нужен только интернет"
+    "caption": "Модуль удаленных продаж GRAFF.estate доступен на\u00a0любых устройствах, для\u00a0демонстрации нужен только\u00a0интернет."
   },
   "feedback": {
     "titleLead": "Хотите увеличить конверсию?",

src/ui/Button.tsx

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