first commit

src/components/devices/devices.css

@@ -0,0 +1,55 @@
+.devices__contaner {
+    margin-bottom: 160px;
+}
+
+.card__container {
+  display: flex;
+  gap: 30px;
+  margin-bottom: 80px;
+}
+
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 32px;
+  background: #141414;
+  border-radius: 16px;
+  height: 388px;
+  width: 380px;
+}
+
+.card__name {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 100%;
+  /* identical to box height, or 24px */
+
+  /* Landing/White */
+
+  color: #ebebeb;
+
+  opacity: 0.8;
+}
+
+.card__image {
+  width: 292px;
+  height: 271px;
+}
+
+.card__image_type {
+  position: relative;
+  width: 211px;
+  top: 72px;
+  left: -17px;
+
+}
+
+.card__image_type1 {
+  position: absolute;
+  top: 111px;
+  right: 35px;
+  width: 192px;
+}

src/components/devices/devices.tsx

@@ -0,0 +1,52 @@
+import "../../styles/styles.css";
+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";
+
+export const Devices: React.FC = ({}) => {
+  return (
+    <div className="devices__contaner">
+      <div className="main-block__container">
+        <div>
+          <p className="main-block__title main-block__title_small">
+            Graff.estate stream{" "}
+          </p>
+          <p className="main-block__title_gardient main-block__title_gardient_small">
+            доступен на любых устройствах.{" "}
+          </p>
+        </div>
+        <p className="main-block__caption multiplayer__caption">
+          Приложение легко адаптируется под экран любого размера и одинаково
+          хорошо выглядит на мобильном телефоне или на большом сенсорном экране
+          в отделе продаж застройщика.{" "}
+        </p>
+      </div>
+      <div className="card__container">
+        <div className="card">
+          <p className="card__name">Interactive display</p>
+          <img src={touchscreen} className="card__image"></img>
+        </div>
+        <div className="card">
+          <p className="card__name">Desktop</p>
+          <img src={imac} className="card__image"></img>
+        </div>
+        <div className="card">
+          <p className="card__name">Mobile</p>
+          <img src={iphone} className="card__image_type"></img>
+          <img src={ipad} className="card__image_type1"></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>
+        </div>
+      </div>
+    </div>
+  );
+};