105 lines
5.2 KiB
JavaScript
105 lines
5.2 KiB
JavaScript
import React, { useState } from 'react';
|
|
import AppContainer from "../appContainer";
|
|
import Image from "next/image";
|
|
import { MDBCol, MDBContainer, MDBIcon, MDBInputGroupText, MDBRow, MDBTypography } from "mdb-react-ui-kit";
|
|
import Connect from "../components/connect";
|
|
import { Map, Marker, ZoomControl } from "pigeon-maps"
|
|
import { osm } from 'pigeon-maps/providers'
|
|
|
|
import { maptiler } from 'pigeon-maps/providers'
|
|
|
|
const ContactUs = () => {
|
|
const Parallax = ({ quality }) => {
|
|
return `/resource/parallax/contact-us.jpg `;
|
|
}
|
|
|
|
const maptilerProvider = maptiler('tWRA4K0zge6W26KAmgBX', 'streets')
|
|
const [hue, setHue] = useState(0)
|
|
const color = `hsl(${hue % 490}deg 80% 30%)`
|
|
|
|
return (
|
|
<>
|
|
<AppContainer title={'درباره ما'}>
|
|
<div className="parallax-container">
|
|
<h2 className={'center-align text-white header_back service-text dana font-weight-bold'}> تماس با ما </h2>
|
|
<Image
|
|
loader={Parallax}
|
|
src="Parallax.png"
|
|
className={'responsive-img shadow-5'}
|
|
alt="Picture of the author"
|
|
width={2050}
|
|
height={950}
|
|
/>
|
|
</div>
|
|
|
|
<br />
|
|
<div className='lg:mx-20 sm:mx-5'>
|
|
<br />
|
|
<h3 className={'right-align'}>
|
|
آدرس
|
|
<MDBIcon style={{ paddingLeft: 5 }} className='ms-1' icon='map-marker-alt' size='xl' />
|
|
</h3>
|
|
<br />
|
|
<MDBTypography style={{ borderLeft: 'none', borderRight: '6px solid ', backgroundColor: '#F0F0F0' }} note noteColor='dark' className='mb-0'>
|
|
<MDBRow>
|
|
<MDBTypography className={'dana right-align'} >
|
|
تهران - شهر پرند - فاز 5 - بلوار شهید قاسم سلیمانی - بلوار رسوال اکرم - بیمارستان مهر پرند
|
|
</MDBTypography>
|
|
</MDBRow>
|
|
</MDBTypography>
|
|
<br /><br />
|
|
<h3 className={'right-align'}>
|
|
تماس با ما
|
|
<MDBIcon style={{ paddingLeft: 5 }} className='ms-1' icon='phone-square' size='xl' />
|
|
</h3>
|
|
<br />
|
|
<MDBTypography style={{ backgroundColor: '#F0F0F0' }} note noteColor='dark' className='mb-0'>
|
|
<MDBRow>
|
|
{/*<MDBTypography className={'dana'} >*/}
|
|
{/* <MDBIcon style={{ paddingRight: 5 }} className='ms-1' icon='phone-alt' size='sm' />*/}
|
|
{/* <a style={{ color: 'black' }} href={'tel:02153457000'}>021 5345 7000 </a>*/}
|
|
{/*</MDBTypography>*/}
|
|
|
|
<MDBTypography className={'dana'} href={'tel:02153457000'}>
|
|
<MDBIcon style={{ paddingRight: 5 }} className='ms-1' icon='phone-alt' size='sm' />
|
|
<a style={{ color: 'black' }} href={'tel:02153457000'}>021-53457000</a>
|
|
</MDBTypography>
|
|
<MDBTypography className={'dana'} href={'tel:09367529435'}>
|
|
<MDBIcon style={{ paddingRight: 5 }} className='ms-1' icon='envelope-square' size='sm' />
|
|
contact-us@miphospital.ir
|
|
</MDBTypography>
|
|
|
|
<MDBTypography className={'dana'} href={'tel:09367529435'}>
|
|
<MDBIcon style={{ paddingRight: 5 }} className='ms-1' fab icon="instagram" size='sm' />
|
|
<a target={'_blank'} style={{ color: 'black' }} href={'https://www.instagram.com/miphospital/'}>miphospital</a>
|
|
</MDBTypography>
|
|
</MDBRow>
|
|
</MDBTypography>
|
|
<br />
|
|
<div>
|
|
<Map
|
|
provider={maptilerProvider}
|
|
provider={osm}
|
|
dprs={[1, 2]} // this provider supports HiDPI tiles
|
|
height={400}
|
|
defaultCenter={[35.48787, 50.92102]}
|
|
defaultZoom={15}
|
|
>
|
|
<Marker
|
|
width={50}
|
|
anchor={[35.48787, 50.92102]}
|
|
color={color}
|
|
onClick={() => setHue(hue + 20)}
|
|
/>
|
|
<ZoomControl />
|
|
</Map>
|
|
</div>
|
|
<Connect />
|
|
<br />
|
|
</div>
|
|
</AppContainer>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ContactUs; |