import "../../styles/styles.css";
import "./devices.css";
import "../multiplayer/multiplayer.css";
import touchscreen from "./image.png";
import imac from "./image1.png";
import devicesFrame from './deviceFrame.png'
import { Button } from "../buttonDemo/buttonDemo"
import { Content } from "../content/content";



export const Devices: React.FC<any> = ({ text }) => {
  return (
    <div className="devices__container">
      <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 alt="device" src={touchscreen} className="card__image_l"></img>
        </div>
        <div data-aos="fade-up" data-aos-delay="300" className="card">
          <p className="card__name">Desktop</p>
          <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 alt="device" src={devicesFrame} className="card__image_m"></img>
        </div>
      </div>
      <div className="main-block__subblock-container">
        <div className="main-block_subblock">
          <Button text={text}></Button>
        </div>
      </div>
    </div>
  );
};
