contact us desktio and reponsive

src/app/contact/page.tsx

@@ -0,0 +1,97 @@
+import Button from '@/components/Button'
+import Input from '@/components/Input'
+import Textarea from '@/components/Textarea'
+import { CallCalling, Location, SmsTracking } from 'iconsax-react'
+import { NextPage } from 'next'
+import React from 'react'
+
+const Contact: NextPage = () => {
+    return (
+        <div className='mt-24 max-w-maxWidth mx-auto'>
+            <h1 className='text-2xl font-bold'>
+                تماس با ما
+            </h1>
+
+            <div className='flex xl:flex-row flex-col gap-24 mt-14 items-center'>
+                <div className='xl:max-w-[300px]'>
+                    <div className='font-bold text-lg'>
+                        شماره تماس
+                    </div>
+                    <div className='flex gap-4 mt-4 items-center'>
+                        <CallCalling
+                            size={24}
+                            color='black'
+                        />
+                        <div className='text-sm'>
+                            ۰۲۱-۲۱۲۳۲۱۲۳ | ۰۸۶-۲۱۰۰۲۰۰۱
+                        </div>
+                    </div>
+
+                    <div className='font-bold text-lg mt-8'>
+                        ایمیل
+                    </div>
+                    <div className='flex gap-4 mt-4 items-center'>
+                        <SmsTracking
+                            size={24}
+                            color='black'
+                        />
+                        <div className='text-sm'>
+                            info@danakcorp.com
+                        </div>
+                    </div>
+
+                    <div className='font-bold text-lg mt-8'>
+                        آدرس
+                    </div>
+                    <div className='flex gap-4 mt-4 items-center'>
+                        <Location
+                            size={24}
+                            color='black'
+                        />
+                        <div className='text-sm'>
+                            یوسف آباد، فتجی شقایق، پلاک ۵ ،  واحد ۱۳
+                        </div>
+                    </div>
+                </div>
+
+                <div className='flex-1 w-full  bg-[#F1F3F8] rounded-4xl xl:p-10 p-5 border-2 border-white'>
+                    <div className='text-lg font-bold'>
+                        فرم تماس
+                    </div>
+
+                    <div className='rowTwoInput mt-8'>
+                        <Input
+                            placeholder='نام و نام خانوادگی'
+                        />
+                        <Input
+                            placeholder='نام شرکت '
+                        />
+                    </div>
+                    <div className='rowTwoInput mt-8'>
+                        <Input
+                            placeholder='شماره تماس'
+                        />
+                        <Input
+                            placeholder='ایمیل'
+                        />
+                    </div>
+
+                    <div className='mt-8'>
+                        <Textarea
+                            label='پیام'
+                        />
+                    </div>
+
+                    <div className='mt-8 flex justify-end'>
+                        <Button
+                            label='ارسال'
+                            className='w-fit px-8'
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Contact

src/app/globals.css

@@ -82,3 +82,7 @@ tbody tr {
     #bc1888 100%
   );
 }
+
+.rowTwoInput {
+  @apply flex flex-col sm:flex-row sm:gap-5 gap-5;
+}

src/components/Textarea.tsx

@@ -0,0 +1,39 @@
+import { FC, InputHTMLAttributes } from 'react'
+import Error from './Error'
+import { clx } from '../helpers/utils'
+
+type Props = {
+    label?: string,
+    error_text?: string
+} & InputHTMLAttributes<HTMLTextAreaElement>
+
+const Textarea: FC<Props> = (props: Props) => {
+    return (
+        <div className='w-full relative'>
+            {
+                props.label &&
+                <div className='text-sm' >
+                    {props.label}
+                </div>
+            }
+
+            <textarea
+                {...props}
+                className={clx(
+                    'border border-border leading-7 w-full rounded-xl px-4 py-3 min-h-[100px] mt-1 text-xs',
+                    props.className
+                )}
+            >
+
+            </textarea>
+
+            {
+                props.error_text &&
+                <Error errorText={props.error_text} />
+            }
+
+        </div>
+    )
+}
+
+export default Textarea