import './demos.css'
import "../../styles/styles.css";
import building1 from './building1.png'
import building2 from './building2.png'


import iconButton from "./iconButton.svg"


export const Demos: React.FC<any> = ({ text }) => {
    const { card, card1 } = text;
    console.log(text)

    return (<div className=" demo__container_mobile main-block__container width demo__container">
        <h3 className='demos__tittle'>
            {text.title}
        </h3>
        <a href='https://stream.graff.tech/' target='_blank' rel="noreferrer" data-aos="fade-up"
            data-aos-delay="100" className='demos_container'>
            <div className="main-block__icon_container demo__icon">
                <img alt='icon' src={iconButton} className="main-block__icon"></img>
            </div>
            <div className='demo'>
                <img alt='buildingImg' src={building1} className='demo_image'></img>
                <div className='demo_info'>
                    <div className='title__block'>
                        <h4 className='title__demo'>{card.title}</h4>
                        <p className='caption'>{card.subTitle}</p>
                    </div>
                    <div className='body__block'>
                        <p className='caption1'>{card.caption}</p>
                        <p className='caption2'>{card.caption1}</p>
                    </div>
                </div>
            </div>
        </a>
        <a href='https://stream.graff.tech/' target='_blank' rel="noreferrer" data-aos="fade-up"
            data-aos-delay="150" className='demos_container'>
            <div className="main-block__icon_container demo__icon">
                <img alt='icon' src={iconButton} className="main-block__icon"></img>
            </div>
            <div className='demo'>
                <img alt='buildingImg' src={building2} className='demo_image'></img>
                <div className='demo_info'>
                    <div className='title__block'>
                        <h4 className='title__demo'>{card1.title}</h4>
                        <p className='caption'>{card1.subTitle}</p>
                    </div>
                    <div className='body__block'>
                        <p className='caption1'>{card1.caption}</p>
                        <p className='caption2'>{card1.caption1}</p>
                    </div>
                </div>
            </div>
        </a>
    </div>

    )

}