mip-website/pages/index.js

import AppContainer from './appContainer'
import Slider from './components/slider'
import News from './News'
import axios from 'axios'
import { MDBBtn, MDBCard, MDBCardBody, MDBContainer, MDBIcon } from 'mdb-react-ui-kit'
import Link from 'next/link'
import Paralax from './components/Paralax'
import Service from './components/service'
import { AppUrl } from '../lib/api'
import Accessgrid from './components/accessgrid'
import React from 'react'
import { SimpleGrid } from '@chakra-ui/react'
import SalesTeam from './components/SalesTeam'
import FadeIn from 'react-fade-in'
import Brands from './components/Brands'
import Sales from './page/sales'

export default function Home({ data_NEWS }) {
  return (
    <div>
      <style jsx>
        {`
          .fix-col {
            flex-direction: row;
          }
          .opening-announcement {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            width: min(1180px, calc(100% - 2rem));
            margin: 2rem auto;
            padding: clamp(2rem, 5vw, 3.5rem);
            overflow: hidden;
            border-radius: 1.5rem;
            color: #fff;
            background: linear-gradient(120deg, #0b3942, #147778);
            box-shadow: 0 20px 50px rgba(13, 83, 88, 0.18);
            direction: rtl;
          }
          .opening-announcement::after {
            content: '';
            position: absolute;
            width: 360px;
            height: 360px;
            left: -140px;
            bottom: -230px;
            border: 1px solid rgba(255, 255, 255, 0.17);
            border-radius: 50%;
            box-shadow: 0 0 0 65px rgba(255, 255, 255, 0.035);
            pointer-events: none;
          }
          .opening-copy,
          .opening-actions {
            position: relative;
            z-index: 1;
          }
          .opening-copy {
            max-width: 720px;
          }
          .opening-label {
            display: inline-block;
            margin-bottom: 0.8rem;
            color: #a5eee6;
            font-size: 0.85rem;
            font-weight: 700;
          }
          .opening-copy h2 {
            margin: 0;
            color: #fff;
            font-size: clamp(1.55rem, 3vw, 2.5rem);
            font-weight: 800;
            line-height: 1.5;
          }
          .opening-copy p {
            margin: 1rem 0 0;
            color: rgba(255, 255, 255, 0.82);
            font-size: 0.95rem;
            line-height: 2;
          }
          .opening-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 50px;
            padding: 0.8rem 1.4rem;
            border-radius: 0.8rem;
            color: #083b40;
            background: #a5eee6;
            font-size: 0.9rem;
            font-weight: 700;
            white-space: nowrap;
            transition: background 180ms ease, transform 180ms ease;
          }
          .opening-button:hover {
            color: #083b40;
            background: #c5f8f2;
            text-decoration: none;
            transform: translateY(-2px);
          }
          @media screen and (max-width: 800px) {
            .opening-announcement {
              flex-direction: column;
              align-items: flex-start;
              gap: 1.5rem;
            }
          }
          @media screen and (max-width: 639px) {
            .fix-col {
              flex-direction: column;
            }
            .opening-announcement {
              width: calc(100% - 1.25rem);
              margin: 1.25rem auto;
              border-radius: 1rem;
            }
          }
        `}
      </style>
      <AppContainer>
        <Slider />
        <section className='opening-announcement' aria-labelledby='opening-announcement-title'>
          <div className='opening-copy'>
            <span className='opening-label'>اطلاع‌رسانی افتتاح</span>
            <h2 id='opening-announcement-title'>در چند قدمی افتتاح بیمارستان مهر ایرانیان</h2>
            <p>اخبار و زمان دقیق افتتاح بیمارستان از طریق همین وب‌سایت اطلاع‌رسانی خواهد شد.</p>
          </div>
          <div className='opening-actions'>
            <Link href='/landing'>
              <a className='opening-button'>آشنایی با بیمارستان</a>
            </Link>
          </div>
        </section>
        <br />
        <div className='lg:mx-20 sm:mx-5'>
          <SimpleGrid spacing={15} columns={[1, 2, 2]}>
            <Link href={'/page/contact-us'}>
              <MDBCard className={'bg-neutral-100 fst-box hover:bg-neutral-200  cursor-pointer hover:shadow-2xl'}>
                <MDBCardBody className={'flex justify-content-center'}>ارتباط با ما</MDBCardBody>
              </MDBCard>
            </Link>
            {/* <Link href={'/page/sales'}>
              <MDBCard className={'bg-neutral-100 fst-box hover:bg-neutral-200  cursor-pointer hover:shadow-2xl'}>
                <MDBCardBody className={'flex justify-content-center'}> مشاوره سرمایه گذاری </MDBCardBody>
              </MDBCard>
            </Link> */}
            <Link href={'/questions'}>
              <MDBCard className={'bg-neutral-100 fst-box hover:bg-neutral-200  cursor-pointer hover:shadow-2xl'}>
                <MDBCardBody className={'flex justify-content-center'}>سوالات متداول</MDBCardBody>
              </MDBCard>
            </Link>
            {/* <Link href={'/stock-unit'}>
              <MDBCard className={'bg-neutral-100 fst-box hover:bg-neutral-200  cursor-pointer hover:shadow-2xl'}>
                <MDBCardBody className={'flex justify-content-center'}> واحد امور سهام</MDBCardBody>
              </MDBCard>
            </Link> */}
          </SimpleGrid>
          {/* <div className={'mt-5'}>
            <OnlineSales />
          </div> */}
        </div>

        <Accessgrid />

        <SalesTeam />
        <News data={data_NEWS}>
          <div style={{ cursor: 'pointer' }} className=' mt-3 d-flex  align-items-center justify-content-center'>
            <Link
              style={{ cursor: 'pointer' }}
              className={'text-white'}
              href={{ pathname: '/News', query: { list: 'list' } }}
            >
              <MDBBtn style={{ cursor: 'pointer' }} className='mx-2 RTL bg-dark shadow-1-strong' color=''>
                <MDBIcon className='ms-1 ' icon='plus' size='sm' />
                <span style={{ cursor: 'pointer !important' }} className={'text-white '}>
                  {' '}
                  بیشتر
                </span>
              </MDBBtn>
            </Link>
          </div>
        </News>

        <Service />
        {/*<Doctors>*/}
        {/*    <div  style={{cursor: 'pointer'}} className=" mt-3 d-flex align-items-center justify-content-center">*/}
        {/*        <Link style={{cursor: 'pointer'}} className={'text-white'} href={{ pathname: '/News', query: { list: 'list' } }}>*/}
        {/*            <MDBBtn style={{cursor: 'pointer'}} className='mx-2 RTL bg-dark shadow-1-strong' color=''>*/}
        {/*                <MDBIcon  className='ms-1 ' icon='plus' size='sm' />*/}
        {/*                <span style={{cursor: 'pointer !important'}} className={'text-white '}>  بیشتر ..</span>*/}
        {/*            </MDBBtn>*/}

        {/*        </Link>*/}
        {/*    </div>*/}
        {/*</Doctors>*/}
        <Paralax />
        <Brands />
        {/* <Connect /> */}
        <Sales />
        {/*phoneCall item */}

        {/*end phoneCall item */}
        <br />
      </AppContainer>
    </div>
  )
}

export const getServerSideProps = async context => {
  // const allPostsData = await axios.get(AppUrl('news'))
  // const data_NEWS = await allPostsData.data.slice(0, 6)

  return {
    props: { data_NEWS: null, fallback: false } // will be passed to the page component as props
  }
}