analy

src/components/devices/devices.css

@@ -46,7 +46,6 @@
 
 }
 
-.card__image_type {}
 
 @media screen and (min-width: 1600px) {
   .card__image {
@@ -94,7 +93,6 @@
     gap: 15px;
   }
 
-  .card__image_type1 {}
 }
 
 
@@ -104,7 +102,9 @@
     margin-bottom: 120px;
   }
 
-
+  .card__name {
+    font-size: 21px;
+  }
 
   .card {
     box-sizing: border-box;

src/components/devices/devices.tsx

@@ -4,44 +4,27 @@ import "../multiplayer/multiplayer.css";
 import touchscreen from "./image.png";
 import imac from "./image1.png";
 import devicesFrame from './deviceFrame.png'
-import iconButton from "../../styles/iconButton.svg";
-import { Link } from 'react-router-dom';
 import { Button } from "../buttonDemo/buttonDemo"
+import { Content } from "../content/content";
 
 
 
-export const Devices: React.FC<any> = ({text}) => {
+export const Devices: React.FC<any> = ({ text }) => {
   return (
     <div className="devices__container">
-      <div
-        data-aos-duration="400"
-        data-aos="fade-up"
-        className="main-block__container"
-      >
-        <div>
-          <p className=" main-block__title_small">
-            Graff.estate stream{" "}
-          </p>
-          <p className="main-block__title_gardient_small">
-            {text.mainBlockCaptionColor}
-          </p>
-        </div>
-        <p className="main-block__caption multiplayer__caption">
-        {text.mainBlockCaption}
-        </p>
-      </div>
+      <Content text={text}></Content>
       <div className="card__container">
         <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>
+          <img alt="device" src={touchscreen} className="card__image"></img>
         </div>
         <div data-aos="fade-up" data-aos-delay="300" className="card">
           <p className="card__name">Desktop</p>
-          <img src={imac} className="card__image"></img>
+          <img alt="device" src={imac} className="card__image"></img>
         </div>
         <div data-aos="fade-up" data-aos-delay="500" className="card">
           <p className="card__name">Mobile</p>
-          <img src={devicesFrame} className="card__image"></img>
+          <img alt="device" src={devicesFrame} className="card__image"></img>
         </div>
       </div>
       <div className="main-block__subblock-container">