streaming-landing1/src/components/footer/footer.tsx

import './footer.css'
import logo from './logo.svg'
import write from './send.svg'
import phone from './phone.svg'
import iconButton from "../../styles/iconButton.svg"
import "../../styles/styles.css"


export const Footer: React.FC<any> = ({ text }) => {

    const { cardLarge, cardLarge1, cardSmall, cardSmall1, copyright } = text

    return (
        <div className="footer__container">
            <div className='footer__main-block'>
                <div className='footer__block_1'>
                    <div className='footer__block_name'>
                        <p className='footer__name'>Graff.estate</p>
                        <p className='footer__name_color'>stream.</p>
                    </div>
                    <div className='footer__block_contacts'>
                        <p className='contacts__title'>{text.social}</p>
                        <div className='footer__container_social'>
                            <p className='footer__social'>Facebook</p>
                            <p className='footer__social'>Instagram</p>
                            <p className='footer__social'>YouTube</p>
                            <p className='footer__social'>VK</p>
                        </div>
                    </div>
                    <div className='footer__block_copyright'>
                        <img alt='logo' src={logo} className='footer__logo'></img>
                        <div className='copyright__caption'>
                            <p className='copyright'>{copyright.caption}</p>
                            <p className='copyright'>
                                {copyright.caption1}
                            </p>
                        </div>
                    </div>
                </div>
                <div className='footer__block_2'>
                    <div className='footer__col1 footer__col1_mobile'>
                        <div className='footer__card_l'>
                            <div className='card__contacts'>
                                <p className='card__email'>info@graff.tech</p>
                                <p className='card__tel'>+7 800 770 00 76</p>
                            </div>
                            <div className='card__adress'>
                                <p className='card__street'>{cardLarge.address}</p>
                                <p className='card_city'>{cardLarge.city}</p>
                            </div>
                            <p className='card_country'>{cardLarge.country}</p>
                        </div>
                        <div className='footer__card_2'>
                            <div className='ellipse__container'>
                                <div className="main-block__icon_container">
                                    <img alt='icon' src={iconButton} className="main-block__icon"></img>
                                </div>
                            </div>

                            <div className='card__write'>
                                <img alt='icon' src={write} className='card__icon'></img>
                                <p className='card__caption'>{cardSmall.caption}</p>
                            </div>
                        </div>
                    </div>
                    <div className='footer__col2 footer__col2_mobile'>
                        <div className='footer__card_l'>
                            <div className='card__contacts'>
                                <p className='card__email'>waseem@graff.tech</p>
                                <p className='card__tel'>+971 50 938 8902</p>
                            </div>
                            <div className='card__adress card__adress_uae'>
                                <p className='card_city'>{cardLarge1.address}</p>
                            </div>
                            <p className='card_country'>{cardLarge1.country}</p>
                        </div>
                        <div className='footer__card_2'>
                            <div className='ellipse__container'>
                                <div className="main-block__icon_container">
                                    <img alt='icon' src={iconButton} className="main-block__icon"></img>
                                </div>
                            </div>
                            <div className='card__write'>
                                <img alt='icon' src={phone} className='card__icon'></img>
                                <p className='card__caption'>{cardSmall1.caption}</p>
                            </div>
                        </div>
                    </div>
                    <div className='footer__column_mobile'>
                        <div className='footer__card_2'>
                            <div className='ellipse__container'>
                                <div className="main-block__icon_container">
                                    <img alt='icon' src={iconButton} className="main-block__icon"></img>
                                </div>
                            </div>

                            <div className='card__write'>
                                <img alt='icon' src={write} className='card__icon'></img>
                                <p className='card__caption'>{cardSmall.caption}</p>
                            </div>
                        </div>
                        <div className='footer__card_2'>
                            <div className='ellipse__container'>
                                <div className="main-block__icon_container">
                                    <img alt='icon' src={iconButton} className="main-block__icon"></img>
                                </div>
                            </div>
                            <div className='card__write'>
                                <img alt='icon' src={phone} className='card__icon'></img>
                                <p className='card__caption'>{cardSmall1.caption}</p>
                            </div>

                        </div>
                        <div className='footer__card_l'>
                            <div className='card__contacts'>
                                <p className='card__email'>info@graff.tech</p>
                                <p className='card__tel'>+7 800 770 00 76</p>
                            </div>
                            <div className='card__adress'>
                                <p className='card__street'>{cardLarge.address}</p>
                                <p className='card_city'>{cardLarge.city}</p>
                            </div>
                            <p className='card_country'>{cardLarge.country}</p>
                        </div>
                        <div className='footer__card_l'>
                            <div className='card__contacts'>
                                <p className='card__email'>waseem@graff.tech</p>
                                <p className='card__tel'>+971 50 938 8902</p>
                            </div>
                            <div className='card__adress card__adress_uae'>
                                <p className='card_city'>{cardLarge1.address}</p>
                            </div>
                            <p className='card_country'>{cardLarge1.country}</p>
                        </div>
                    </div>

                </div>
                <div className='footer__block_copyright_mobile'>
                    <img alt='logo' src={logo} className='footer__logo'></img>
                    <div className='copyright__caption'>
                        <p className='copyright'>{copyright.caption}</p>
                        <p className='copyright'>
                            {copyright.caption1}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    )
}