page about us & page contact us and responsive

2024-08-16 20:41:53 +03:30
parent fd3b82143b
commit d3f967ca67
22 changed files with 297 additions and 4 deletions
@@ -0,0 +1,45 @@
+'use client';
+
+import CallC from "../icons/CallC";
+import EmailC from "../icons/EmailC";
+import WhatsappC from "../icons/WhatsappC";
+import ContentContact from "./ContentContact";
+
+function Call() {
+
+    // const openURL = url => window.open(url);
+
+    return (
+        <div data-aos="flip-left"
+            className="lg:min-w-[calc(50%_+_70px)] bg-[#5559C2] lg:pl-[18%] h-fit pt-[16px] sm:pt-[29px] md:pt-[42px] lg:pt-[55px] 
+        bg-contact rounded-[8px] pb-[30px] sm:pb-[42px] md:pb-[55px] 
+        overflow-hidden lg:pb-[171px] px-[16px] sm:px-[27px] md:px-[39px] lg:px-[48px]">
+            <p className="text-[#FAFAFA] text-[20px] font-bold">تماس با ما</p>
+            <p
+                className="text-[#FAFAFA] leading-[26px] text-[16px] font-normal mt-6"
+            >سامانه نوبت 724 به مردم کمک می کند تا دسترسی آسان تر و سریع تری به خدمات پزشکی و درمانی داشته باشند.</p>
+            <ul className="flex flex-col mt-[68px] justify-start items-start gap-[32px]">
+                <ContentContact
+                    url='tel:900300400'
+                    text='تلفن تماس: ۰۲۱۳۶۳۵۴۵۹۸'
+                >
+                    <CallC />
+                </ContentContact>
+                <ContentContact
+                    url='https://wa.me/09124568794'
+                    text='واتساپ: ۰۹۱۲۴۵۶۸۷۹۴'
+                >
+                    <WhatsappC />
+                </ContentContact>
+                <ContentContact
+                    url='mailto:batome@gmail.com'
+                    text='ایمیل: batome@gmail.com'
+                >
+                    <EmailC />
+                </ContentContact>
+            </ul>
+        </div>
+    )
+}
+
+export default Call
@@ -0,0 +1,37 @@
+import Field from "@/app/component/Field"
+import { Button } from "@mui/material"
+import ArrowLeftC from "../icons/ArrowLeftC"
+
+function Connect() {
+    return (
+        <div
+            className="lg:min-w-[calc(50%_+_70px)] w-full lg:translate-x-[140px] bg-[#FFF] lg:p-[32px]
+                shadow-[0px_0px_28.6px_0px_rgba(147,_147,_147,_0.25)] mt-8 p-[16px] sm:p-[21px] md:p-[27px]"
+        >
+            <div data-aos="zoom-in">
+                <div className="flex flex-col justify-center items-center gap-[10px]">
+                    <p className="text-[#3B3B3B] text-[16px] font-bold">با ما در ارتباط باشید</p>
+                    <p className="text-[#525252] text-[14px] font-normal">نظرات و پیشنهادات خود را با ما در میان بگذارید.</p>
+                </div>
+                <div className="mt-[40px] flex flex-col gap-[20px]">
+                    <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+                        <Field title='نام و نام خانوادگی' type='text' />
+                        <Field title='شماره موبایل' type='text' />
+                    </div>
+                    <div>
+                        <Field title='پیام شما...' type='text' multiline={true} />
+                    </div>
+                </div>
+                <Button
+                    variant="contained"
+                    className="!mt-[40px] !py-[8px] !px-[34px] !flex !items-center !gap-[4px] !mr-auto"
+                >
+                    ارسال پیام
+                    <ArrowLeftC />
+                </Button>
+            </div>
+        </div>
+    )
+}
+
+export default Connect
@@ -0,0 +1,18 @@
+function ContentContact({ text, children, url }) {
+
+    const openURL = url => window.open(url);
+
+    return (
+        <li
+            className="flex cursor-pointer items-center justify-start gap-4"
+            onClick={() => openURL(url)}
+        >
+            <div className="p-2 rounded-[8px] bg-[#EBFAFA] grid place-items-center">
+                {children}
+            </div>
+            <p className="text-[#FFF] text-[14px] md:text-[18px] sm:text-[16px] lg:text-[20px] font-normal">{text}</p>
+        </li>
+    )
+}
+
+export default ContentContact
@@ -0,0 +1,13 @@
+import Call from "./Call"
+import Connect from "./Connect"
+
+function ContactUsPage() {
+    return (
+        <div className="w-full pt-[120px] mt-[56px] padding-responsive flex flex-col lg:flex-row items-center justify-between h-fit">
+            <Call />
+            <Connect />
+        </div>
+    )
+}
+
+export default ContactUsPage