You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

81 lines
3.5 KiB

import React, { Component } from "react";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import Input from "./Input/index";
import Select from "./Select/index";
import location from "../../assets/icons/location.png";
import home from "../../assets/icons/home.png";
import contact from "../../assets/icons/contact.png";
import Location from "./Location/Location";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
p : window.innerWidth > maxDesktopSize ? 16: window.innerWidth / 80,
span : window.innerWidth > maxDesktopSize ? 16: window.innerWidth / 80,
}
}
export default class Contact extends Component {
render() {
return (
<>
{window.innerWidth > 1000 ? (
<>
<div className="contact d-flex flex-column align-items-center">
<Navbar page={"contact"} />
<div className="contact__forms d-flex">
<div className="contact__forms--right d-flex flex-column">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>تماس با ما</h1>
<p style={{ fontSize: fontSize.desktop.p }}>
برای ارتباط با دنیای شگفت انگیز دانوین از فرم زیر استفاده
کنید و پس از انتخاب دپارتمان مد نظر پیام خود را ارسال کنید.
</p>
<Input label={"نامونام خانوادگی"} name={"name"} />
<Input label={"شماره تماس"} name={"mobile"} />
<Select options={["همه", "پرفروش"]} />
<Input label={"موضوع پیام"} name={"subject"} />
<textarea
placeholder="متن پیام"
name="description"
rows="5"
></textarea>
<button>ارسال</button>
</div>
<div className="contact__forms--left d-flex flex-column">
<div className="contact__location d-flex align-items-center">
<img src={location} alt="آدرس" className="m-1" />
<p style={{ fontSize: fontSize.desktop.p }}>
تهران خیابان انقلاب اسلامی بن بست سروش پلاک 2 طبقه چهار
</p>
</div>
<div
className="d-flex align-items-center mt-1"
style={{ width: "55%", justifyContent: "space-between" }}
>
<div className="d-flex align-items-center">
<span style={{ fontSize: fontSize.desktop.span }}>02163462405</span>
<img src={contact} alt="تماس" className="m-1" />
</div>
<div className="d-flex align-items-center">
<span style={{ fontSize: fontSize.desktop.span }}>Info@Danovin.ir</span>
<img src={home} alt="خانه" className="m-1" />
</div>
</div>
<div className="contact__map d-flex align-items-center mt-3">
<Location />
</div>
</div>
</div>
</div>
<Footer />
</>
) : null}
</>
);
}
}