commit

src/components/devices/devices.css

@@ -1,26 +1,31 @@
-.devices__contaner {
-    margin-bottom: 160px;
+.devices__container {
+  padding: 0;
+  margin-bottom: 160px;
 }
 
 .card__container {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
   gap: 30px;
   margin-bottom: 80px;
 }
 
 .card {
+  box-sizing: border-box;
   position: relative;
   display: flex;
   flex-direction: column;
+
   padding: 32px;
   background: #141414;
   border-radius: 16px;
-  height: 388px;
-  width: 380px;
+  gap: 10px;
 }
 
+
+
 .card__name {
-  font-family: "Gilroy";
+  margin: 0;
   font-style: normal;
   font-weight: 500;
   font-size: 24px;
@@ -37,19 +42,120 @@
 .card__image {
   width: 292px;
   height: 271px;
-}
-
-.card__image_type {
-  position: relative;
-  width: 211px;
-  top: 72px;
-  left: -17px;
+  object-fit: contain;
 
 }
 
-.card__image_type1 {
-  position: absolute;
-  top: 111px;
-  right: 35px;
-  width: 192px;
+.card__image_type {}
+
+@media screen and (min-width: 1600px) {
+  .card__image {
+    width: 350px;
+    height: 325px;
+  }
+
+  .card__name {
+    font-size: 28.8px;
+  }
+
+  .card {
+    height: 466px;
+    padding: 38px;
+  }
+
+  .card__container {
+    margin-bottom: 96px;
+  }
+
+  .devices__container {
+    margin-bottom: 192px;
+
+  }
 }
+
+
+@media screen and (max-width: 1279px) {
+  .devices__container {
+    padding-left: 30px;
+    padding-right: 30px;
+    box-sizing: border-box;
+  }
+
+  .card {
+    padding: 24px;
+
+  }
+
+  .card__image {
+    width: 240px;
+  }
+
+  .card__container {
+    gap: 15px;
+  }
+
+  .card__image_type1 {}
+}
+
+
+@media screen and (max-width: 1024px) {
+  .devices__container {
+    padding: 0 20px 0;
+    margin-bottom: 120px;
+  }
+
+
+
+  .card {
+    box-sizing: border-box;
+    height: auto;
+    object-fit: cover;
+    aspect-ratio: 1/1;
+    padding: 32px;
+  }
+
+  .card__image {
+    width: 100%;
+    height: 222px;
+  }
+
+
+}
+
+@media screen and (max-width: 750px) {
+  .card__container {
+    grid-template-columns: 1fr;
+    margin-bottom: 60px;
+  }
+
+  .card__image {
+    width: 90%;
+    height: 90%;
+    margin: 0 auto;
+  }
+}
+
+
+@media screen and (max-width: 639px) {
+  .devices__container {
+    padding: 60px 10px 0px;
+    margin-bottom: 0;
+  }
+
+  .card__container {
+    display: grid;
+    grid-template-columns: 1fr;
+    margin-bottom: 40px;
+
+  }
+
+  .card {
+    padding: 24px;
+    box-sizing: border-box;
+    object-fit: cover;
+    aspect-ratio: 1/1;
+
+  }
+
+
+}

src/components/devices/devices.tsx

@@ -3,48 +3,50 @@ import "./devices.css";
 import "../multiplayer/multiplayer.css";
 import touchscreen from "./image.png";
 import imac from "./image1.png";
-import iphone from "./iPhone.png";
-import ipad from "./iPad.png";
+import devicesFrame from './deviceFrame.png'
+import iconButton from "../../styles/iconButton.svg";
+import { Link } from 'react-router-dom';
+import { Button } from "../buttonDemo/buttonDemo"
 
-export const Devices: React.FC = ({}) => {
+
+
+export const Devices: React.FC<any> = ({text}) => {
   return (
-    <div className="devices__contaner">
-      <div className="main-block__container">
+    <div className="devices__container">
+      <div
+        data-aos-duration="400"
+        data-aos="fade-up"
+        className="main-block__container"
+      >
         <div>
-          <p className="main-block__title main-block__title_small">
+          <p className=" main-block__title_small">
             Graff.estate stream{" "}
           </p>
-          <p className="main-block__title_gardient main-block__title_gardient_small">
-            доступен на любых устройствах.{" "}
+          <p className="main-block__title_gardient_small">
+            {text.mainBlockCaptionColor}
           </p>
         </div>
         <p className="main-block__caption multiplayer__caption">
-          Приложение легко адаптируется под экран любого размера и одинаково
-          хорошо выглядит на мобильном телефоне или на большом сенсорном экране
-          в отделе продаж застройщика.{" "}
+        {text.mainBlockCaption}
         </p>
       </div>
       <div className="card__container">
-        <div className="card">
+        <div data-aos="fade-up" data-aos-delay="100" className="card">
           <p className="card__name">Interactive display</p>
           <img src={touchscreen} className="card__image"></img>
         </div>
-        <div className="card">
+        <div data-aos="fade-up" data-aos-delay="300" className="card">
           <p className="card__name">Desktop</p>
           <img src={imac} className="card__image"></img>
         </div>
-        <div className="card">
+        <div data-aos="fade-up" data-aos-delay="500" className="card">
           <p className="card__name">Mobile</p>
-          <img src={iphone} className="card__image_type"></img>
-          <img src={ipad} className="card__image_type1"></img>
+          <img src={devicesFrame} className="card__image"></img>
         </div>
       </div>
       <div className="main-block__subblock-container">
         <div className="main-block_subblock">
-          <button className="main-block__button">
-            Демоверсия
-            <div className="main-block__icon"></div>
-          </button>
+          <Button text={text}></Button>
         </div>
       </div>
     </div>