mip-website/pages/components/accessgrid.js

import React from 'react';
import {
  MDBContainer,
} from 'mdb-react-ui-kit';

import SwiperCore, { Autoplay } from 'swiper';
import StockSales from "./StockSales";

SwiperCore.use([Autoplay]);



const Accessgrid = () => {
  return (
    <div className='lg:mx-20 sm:mx-5'>
      <style jsx>
        {
          `
                  .videoArea {
                  display: flex;
                  justify-content: space-between; 
                                   
                  }
                  .videSize{
                  width: 65%;
                  height: auto;
                    border-radius: 10px;
                  border: none;
                  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
                  }
                  .textArea {
                   width: 50%;
                  text-align: right;
                
                  }              
                  @media screen and (max-width: 991px){
                      .videoArea{
                      flex-direction: column-reverse;
                      justify-content: center;
                       text-align: center;


                      }
                      .textArea {
                      text-align: center;
                       width: 100%;

                      }
                      .fix-col {
                        flex-direction: row;
                      }
                       @media screen and (max-width: 639px){
                          .fix-col{
                            flex-direction: column;
                          }
                       }

                  }      
                  
                `
        }
      </style>
      <div>
        {/*<MDBRow className='row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-4 g-4'>*/}
        {/*    <MDBCol >*/}
        {/*        <MDBCard   shadow='5' border='info' style={{opacity: 0.9 }}>*/}
        {/*            <MDBCardHeader className={'right dana text-dark color-top-card right-align'}>*/}

        {/*                خدمات آنلاین بیماران*/}
        {/*                <MDBIcon className='ms-1' icon='globe' size='sm' />*/}

        {/*            </MDBCardHeader>*/}
        {/*            <MDBCardBody >*/}
        {/*                <MDBCardText style={{fontSize: 13,lineHeight:2,height: 128}} className={'right-align RTL'}>*/}
        {/*                    <li><a href="">رزرو وقت </a></li>*/}
        {/*                    <li><a href=""> جواب دهی آزمایشگاه و پاتولوژی </a></li>*/}
        {/*                    <li><a href=""> جواب دهی تصویربردای </a></li>*/}
        {/*                    <li><a href=""> ارسال مدارک پزشکی   </a></li>*/}
        {/*                    <li><a href=""> پیشنهادات و انتقادات   </a></li>*/}
        {/*                </MDBCardText>*/}
        {/*            </MDBCardBody>*/}
        {/*        </MDBCard>*/}
        {/*    </MDBCol>*/}
        {/*    <MDBCol>*/}
        {/*        <MDBCard shadow='5' border='info' style={{opacity: 0.9 }}>*/}
        {/*            <MDBCardHeader className={'right dana text-dark color-top-card right-align'}>*/}
        {/*                سامانه کارکنان*/}
        {/*                <MDBIcon className='ms-1' icon='users' size='sm' />*/}

        {/*            </MDBCardHeader>*/}
        {/*            <MDBCardBody className='text-dark'>*/}
        {/*                <MDBCardText style={{fontSize: 13,lineHeight:2,height: 128}} className={'right-align RTL'}>*/}
        {/*                    <li><a href="">اتوماسیون اداری پزشکان  </a></li>*/}
        {/*                    <li><a href="">اتوماسیون اداری پرسنل  </a></li>*/}
        {/*                    <li><a href="">درخواست همکاری </a></li>*/}
        {/*                    <li><a href="">استخدام  </a></li>*/}
        {/*                </MDBCardText>*/}
        {/*            </MDBCardBody>*/}
        {/*        </MDBCard>*/}
        {/*    </MDBCol>*/}
        {/*    <MDBCol>*/}
        {/*        <MDBCard shadow='5' border='info' style={{opacity: 0.9 }}>*/}
        {/*            <MDBCardHeader className={'right dana text-dark color-top-card right-align'}>*/}
        {/*            راهنمای مراجعین*/}
        {/*                <MDBIcon className='ms-1' icon='phone' size='sm' />*/}

        {/*            </MDBCardHeader>*/}
        {/*            <MDBCardBody className='text-dark'>*/}
        {/*                <MDBCardText style={{fontSize: 13,lineHeight:2,height: 128}} className={'right-align RTL'}>*/}
        {/*                    <li><a href="">پذیرش  </a></li>*/}
        {/*                    <li><a href="">ترخیص  </a></li>*/}
        {/*                    <li><a href="">بیمه های طرف قرارداد </a></li>*/}
        {/*                    <li><a href="">رزرو وقت </a></li>*/}
        {/*                </MDBCardText>*/}
        {/*            </MDBCardBody>*/}
        {/*        </MDBCard>*/}
        {/*    </MDBCol>*/}
        {/*    <MDBCol>*/}
        {/*        <MDBCard shadow='5' border='info' style={{opacity: 0.9 }}>*/}
        {/*            <MDBCardHeader className={'right dana text-dark color-top-card right-align'}>*/}
        {/*                 بخش های درمانی*/}
        {/*                <MDBIcon className='ms-1' icon='hospital-alt' size='sm' />*/}
        {/*            </MDBCardHeader>*/}
        {/*            <MDBCardBody className='text-dark'>*/}
        {/*                <MDBCardText style={{fontSize: 13,lineHeight:2,height: 128}} className={'right-align RTL'}>*/}
        {/*                    <li><a href="">کلینیک و بخش ها  </a></li>*/}
        {/*                    <li><a href="">پاراکلینیک</a></li>*/}
        {/*                    <li><a href="">مرکز جراحی </a></li>*/}
        {/*                    <li><a href="">  پزشکان بیمارستان</a></li>*/}
        {/*                </MDBCardText>*/}
        {/*            </MDBCardBody>*/}
        {/*        </MDBCard>*/}
        {/*    </MDBCol>*/}
        {/*</MDBRow>*/}

      </div>

      <br />
      <StockSales />
      <br />
      {/*<Swiper*/}
      {/*    spaceBetween={20}*/}
      {/*    navigation={true}*/}
      {/*    slidesPerView={4}*/}
      {/*    watchSlidesProgress*/}
      {/*    // onSlideChange={() => console.log('slide change')}*/}
      {/*    // onSwiper={(swiper) => console.log(swiper)}*/}
      {/*    autoplay={{*/}
      {/*        "delay": 2500,*/}
      {/*        "disableOnInteraction": false*/}
      {/*    }}*/}
      {/*    breakpoints={{*/}
      {/*        "640": {*/}
      {/*            "slidesPerView": 2,*/}
      {/*            "spaceBetween": 20*/}
      {/*        },*/}
      {/*        "360": {*/}
      {/*            "slidesPerView": 1,*/}
      {/*            "spaceBetween": 20*/}
      {/*        },*/}
      {/*        "320": {*/}
      {/*            "slidesPerView": 1,*/}
      {/*            "spaceBetween": 20*/}
      {/*        },*/}
      {/*        "596": {*/}
      {/*            width: 1080,*/}
      {/*            "slidesPerView": 1,*/}
      {/*            "spaceBetween": 20*/}
      {/*        },*/}
      {/*        "526": {*/}
      {/*            "slidesPerView": 1,*/}
      {/*            "spaceBetween": 2*/}
      {/*        },*/}

      {/*        "996": {*/}
      {/*            "slidesPerView": 1,*/}
      {/*            "spaceBetween": 40*/}
      {/*        },*/}
      {/*        "860": {*/}
      {/*            "slidesPerView": 1,*/}
      {/*            "spaceBetween": 40*/}
      {/*        },*/}
      {/*        "768":{*/}
      {/*            "slidesPerView": 1,*/}
      {/*            "spaceBetween": 40*/}
      {/*        },*/}
      {/*        "972": {*/}
      {/*            "slidesPerView": 1,*/}
      {/*            "spaceBetween": 40*/}
      {/*        },*/}
      {/*        "1024": {*/}
      {/*            "slidesPerView": 1,*/}
      {/*            "spaceBetween": 50*/}
      {/*        }*/}
      {/*    }}*/}
      {/*>*/}
      {/*    <SwiperSlide>*/}
      {/*        <div className={'videoArea'}>*/}
      {/*            <dvi>*/}
      {/*                <video className={'videSize'} controls>*/}
      {/*                    <source src="https://aspb31.cdn.asset.aparat.com/aparat-video/6e3b0e419f951acdadaa1156fba3f68c40504352-480p.mp4?wmsAuthSign=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbiI6ImYxOWQwODJjZGExMDczNzc4OTVhZjIyN2RmMGQxYzA3IiwiZXhwIjoxNjQzMTM3NjgxLCJpc3MiOiJTYWJhIElkZWEgR1NJRyJ9.SuQ7NiruYW8h17Z7_xXY3SXGnmWKpzS1isEK0439vR0"></source>*/}
      {/*                </video>*/}
      {/*            </dvi>*/}
      {/*            <div className={'textArea'}>*/}
      {/*                <h3 className={'dana font-weight-bold'}> پیشرفت ساخت پروژه  </h3>*/}
      {/*                <p style={{ lineHeight: 2.5 }}>*/}
      {/*                    پیشرفت 85 درصدی طبقه همکف بیمارستان مهر پرند*/}
      {/*                    <br />*/}
      {/*                    طبقه همکف تا پایان دی ماه سال 1400                                 با تلاش شبانه روزی مهندسین مجرب و کارگران سخت کوش*/}

      {/*                    آماده بهره برداری و خدمت رسانی به عموم مردم است*/}
      {/*                </p>*/}
      {/*            </div>*/}
      {/*        </div>*/}
      {/*    </SwiperSlide>*/}
      {/*    <SwiperSlide>*/}
      {/*        <div className={'videoArea'}>*/}
      {/*            <dvi>*/}
      {/*                <video className={'videSize'} controls>*/}
      {/*                    <source src="https://aspb34.cdn.asset.aparat.com/aparat-video/a81f1bdc132fa527cb86a0d63a1535cc40504208-480p.mp4?wmsAuthSign=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbiI6IjEwYWU1YWI5MzJkZTc5YzYxZGFkMThmNGEzNjcxNzI4IiwiZXhwIjoxNjQzMTM3NzU3LCJpc3MiOiJTYWJhIElkZWEgR1NJRyJ9.UnGNKbRAe5WXtMZxW4a3aAS1y609J1W8JvUqXB2ZWds"></source>*/}
      {/*                </video>*/}
      {/*            </dvi>*/}
      {/*            <div className={'textArea'}>*/}
      {/*                <h3 className={'dana font-weight-bold'}> خرید سهام </h3>*/}
      {/*                <p style={{ lineHeight: 2.5 }}>*/}
      {/*                    توضیحات دکتر نمکی مدیر عامل بیمارستان مهر پرند در رابطه خرید سهام بیمارستان*/}
      {/*                    در این ویدئو با  مزایای خرید سهام و مراحل پیشرفت پروژه آشنا می شوید*/}
      {/*                </p>*/}
      {/*                <MDBBtn  style={{ backgroundColor: '#EF4444', fontWeight: 'bold' }} className={'d-flex mb-5 justify-content-center dana '}>مشاوره خرید سهام </MDBBtn>*/}
      {/*            </div>*/}
      {/*        </div>*/}
      {/*    </SwiperSlide>*/}
      {/*</Swiper>*/}
      {/*<MDBContainer className={'mt-5'}>*/}
      {/*    <div className={'p-2 rounded-5 flex lg:flex-row-reverse fix-col md:flex-col sm:flex-col text-center justify-center dana'} style={{ backgroundColor: '#A7F3D0', borderLeft: '4px solid #34D399', borderRight: '4px solid #34D399' }}>*/}
      {/*        <div>*/}
      {/*            <MDBTypography className={'ml-2 RTL'} style={{ fontWeight: 'bold', lineHeight:  2 }} variant='h5'>مشاوره تلفنی خرید سهام   </MDBTypography>*/}
      {/*        </div>*/}
      {/*        <div>*/}
      {/*            <MDBTypography className={'mr-2'} style={{ fontWeight: 'bold', lineHeight:  2 }} variant='h5'>021 - 28426945   </MDBTypography>*/}
      {/*        </div>*/}
      {/*    </div>*/}
      {/*</MDBContainer>*/}
    </div>
  );
};

export default Accessgrid;