From ef64cb96944d72adb2e8e01628dcc51ebf23502a Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Thu, 27 Mar 2025 19:35:59 +0330
Subject: [PATCH] footer

---
 public/images/instagram.svg |  12 +++
 public/images/linkedin.svg  |  10 +++
 public/images/telegram.svg  |  10 +++
 public/images/whatsapp.svg  |   3 +
 src/app/globals.css         |   4 +
 src/app/page.tsx            |   3 +
 src/components/Error.tsx    |  15 ++++
 src/components/Input.tsx    | 109 ++++++++++++++++++++++++++
 src/shared/Footer.tsx       | 148 ++++++++++++++++++++++++++++++++++++
 9 files changed, 314 insertions(+)
 create mode 100644 public/images/instagram.svg
 create mode 100644 public/images/linkedin.svg
 create mode 100644 public/images/telegram.svg
 create mode 100644 public/images/whatsapp.svg
 create mode 100644 src/components/Error.tsx
 create mode 100644 src/components/Input.tsx
 create mode 100644 src/shared/Footer.tsx

diff --git a/public/images/instagram.svg b/public/images/instagram.svg
new file mode 100644
index 0000000..e55a4f8
--- /dev/null
+++ b/public/images/instagram.svg
@@ -0,0 +1,12 @@
+<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7014_23917)">
+<path d="M17 3.06133C21.5422 3.06133 22.0801 3.08125 23.8664 3.16094C25.5266 3.23398 26.423 3.51289 27.0207 3.74531C27.8109 4.05078 28.382 4.42266 28.973 5.01367C29.5707 5.61133 29.9359 6.17578 30.2414 6.96602C30.4738 7.56367 30.7527 8.4668 30.8258 10.1203C30.9055 11.9133 30.9254 12.4512 30.9254 16.9867C30.9254 21.5289 30.9055 22.0668 30.8258 23.8531C30.7527 25.5133 30.4738 26.4098 30.2414 27.0074C29.9359 27.7977 29.5641 28.3687 28.973 28.9598C28.3754 29.5574 27.8109 29.9227 27.0207 30.2281C26.423 30.4605 25.5199 30.7395 23.8664 30.8125C22.0734 30.8922 21.5355 30.9121 17 30.9121C12.4578 30.9121 11.9199 30.8922 10.1336 30.8125C8.47344 30.7395 7.57695 30.4605 6.9793 30.2281C6.18906 29.9227 5.61797 29.5508 5.02695 28.9598C4.4293 28.3621 4.06406 27.7977 3.75859 27.0074C3.52617 26.4098 3.24727 25.5066 3.17422 23.8531C3.09453 22.0602 3.07461 21.5223 3.07461 16.9867C3.07461 12.4445 3.09453 11.9066 3.17422 10.1203C3.24727 8.46016 3.52617 7.56367 3.75859 6.96602C4.06406 6.17578 4.43594 5.60469 5.02695 5.01367C5.62461 4.41602 6.18906 4.05078 6.9793 3.74531C7.57695 3.51289 8.48008 3.23398 10.1336 3.16094C11.9199 3.08125 12.4578 3.06133 17 3.06133ZM17 0C12.3848 0 11.807 0.0199219 9.99414 0.0996094C8.18789 0.179297 6.94609 0.471484 5.87031 0.889844C4.74805 1.32812 3.79844 1.90586 2.85547 2.85547C1.90586 3.79844 1.32812 4.74805 0.889844 5.86367C0.471484 6.94609 0.179297 8.18125 0.0996094 9.9875C0.0199219 11.807 0 12.3848 0 17C0 21.6152 0.0199219 22.193 0.0996094 24.0059C0.179297 25.8121 0.471484 27.0539 0.889844 28.1297C1.32812 29.252 1.90586 30.2016 2.85547 31.1445C3.79844 32.0875 4.74805 32.6719 5.86367 33.1035C6.94609 33.5219 8.18125 33.8141 9.9875 33.8937C11.8004 33.9734 12.3781 33.9934 16.9934 33.9934C21.6086 33.9934 22.1863 33.9734 23.9992 33.8937C25.8055 33.8141 27.0473 33.5219 28.123 33.1035C29.2387 32.6719 30.1883 32.0875 31.1313 31.1445C32.0742 30.2016 32.6586 29.252 33.0902 28.1363C33.5086 27.0539 33.8008 25.8188 33.8805 24.0125C33.9602 22.1996 33.9801 21.6219 33.9801 17.0066C33.9801 12.3914 33.9602 11.8137 33.8805 10.0008C33.8008 8.19453 33.5086 6.95273 33.0902 5.87695C32.6719 4.74805 32.0941 3.79844 31.1445 2.85547C30.2016 1.9125 29.252 1.32812 28.1363 0.896484C27.0539 0.478125 25.8188 0.185938 24.0125 0.10625C22.193 0.0199219 21.6152 0 17 0Z" fill="black"/>
+<path d="M17 8.26758C12.1789 8.26758 8.26758 12.1789 8.26758 17C8.26758 21.8211 12.1789 25.7324 17 25.7324C21.8211 25.7324 25.7324 21.8211 25.7324 17C25.7324 12.1789 21.8211 8.26758 17 8.26758ZM17 22.6645C13.8723 22.6645 11.3355 20.1277 11.3355 17C11.3355 13.8723 13.8723 11.3355 17 11.3355C20.1277 11.3355 22.6645 13.8723 22.6645 17C22.6645 20.1277 20.1277 22.6645 17 22.6645Z" fill="black"/>
+<path d="M28.1164 7.92222C28.1164 9.05113 27.2 9.96089 26.0777 9.96089C24.9488 9.96089 24.0391 9.04449 24.0391 7.92222C24.0391 6.79331 24.9555 5.88354 26.0777 5.88354C27.2 5.88354 28.1164 6.79995 28.1164 7.92222Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_7014_23917">
+<rect width="34" height="34" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/linkedin.svg b/public/images/linkedin.svg
new file mode 100644
index 0000000..712bf64
--- /dev/null
+++ b/public/images/linkedin.svg
@@ -0,0 +1,10 @@
+<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7014_23918)">
+<path d="M31.4832 0H2.51016C1.12227 0 0 1.0957 0 2.45039V31.543C0 32.8977 1.12227 34 2.51016 34H31.4832C32.8711 34 34 32.8977 34 31.5496V2.45039C34 1.0957 32.8711 0 31.4832 0ZM10.0871 28.973H5.04023V12.7434H10.0871V28.973ZM7.56367 10.532C5.94336 10.532 4.63516 9.22383 4.63516 7.61016C4.63516 5.99648 5.94336 4.68828 7.56367 4.68828C9.17734 4.68828 10.4855 5.99648 10.4855 7.61016C10.4855 9.21719 9.17734 10.532 7.56367 10.532ZM28.973 28.973H23.9328V21.084C23.9328 19.2047 23.8996 16.7809 21.3098 16.7809C18.6867 16.7809 18.2883 18.8328 18.2883 20.9512V28.973H13.2547V12.7434H18.0891V14.9613H18.1555C18.8262 13.6863 20.473 12.3383 22.9234 12.3383C28.0301 12.3383 28.973 15.6984 28.973 20.068V28.973Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_7014_23918">
+<rect width="34" height="34" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/telegram.svg b/public/images/telegram.svg
new file mode 100644
index 0000000..b13ac25
--- /dev/null
+++ b/public/images/telegram.svg
@@ -0,0 +1,10 @@
+<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7014_23920)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34 17C34 26.3888 26.3888 34 17 34C7.61116 34 0 26.3888 0 17C0 7.61116 7.61116 0 17 0C26.3888 0 34 7.61116 34 17ZM17.6092 12.5501C15.9557 13.2379 12.651 14.6614 7.69518 16.8205C6.89043 17.1406 6.46886 17.4536 6.43049 17.7598C6.36563 18.2771 7.01351 18.4808 7.89575 18.7583C8.01576 18.796 8.1401 18.8351 8.26758 18.8765C9.13557 19.1587 10.3032 19.4888 10.9102 19.5019C11.4608 19.5138 12.0753 19.2868 12.7537 18.8209C17.3841 15.6953 19.7744 14.1154 19.9244 14.0813C20.0303 14.0573 20.177 14.0271 20.2764 14.1154C20.3758 14.2038 20.366 14.3711 20.3555 14.416C20.2913 14.6896 17.7482 17.054 16.4321 18.2775C16.0218 18.659 15.7308 18.9295 15.6713 18.9913C15.538 19.1297 15.4022 19.2607 15.2716 19.3865C14.4653 20.1639 13.8605 20.7468 15.3051 21.6988C15.9993 22.1563 16.5548 22.5346 17.109 22.912C17.7143 23.3241 18.3179 23.7352 19.099 24.2472C19.2979 24.3776 19.488 24.5131 19.6731 24.6451C20.3774 25.1472 21.0102 25.5983 21.792 25.5264C22.2463 25.4846 22.7155 25.0574 22.9538 23.7835C23.517 20.7728 24.624 14.2495 24.8798 11.5614C24.9022 11.3259 24.874 11.0245 24.8514 10.8921C24.8287 10.7598 24.7814 10.5713 24.6094 10.4318C24.4058 10.2665 24.0913 10.2316 23.9507 10.2341C23.3113 10.2454 22.3303 10.5865 17.6092 12.5501Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_7014_23920">
+<rect width="34" height="34" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/whatsapp.svg b/public/images/whatsapp.svg
new file mode 100644
index 0000000..770403e
--- /dev/null
+++ b/public/images/whatsapp.svg
@@ -0,0 +1,3 @@
+<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 34L2.38991 25.2691C0.915165 22.7134 0.14025 19.8163 0.141666 16.8456C0.145916 7.55792 7.70382 0 16.99 0C21.4965 0.00141667 25.7266 1.75667 28.9084 4.94133C32.0888 8.126 33.8398 12.359 33.8384 16.8612C33.8342 26.1502 26.2763 33.7082 16.99 33.7082C14.1709 33.7067 11.3928 32.9998 8.93206 31.6568L0 34ZM9.34573 28.6068C11.7201 30.0163 13.9867 30.8607 16.9844 30.8621C24.7024 30.8621 30.9895 24.5806 30.9938 16.8583C30.9966 9.1205 24.7392 2.8475 16.9957 2.84467C9.27206 2.84467 2.98916 9.12617 2.98633 16.847C2.98491 19.9991 3.90857 22.3592 5.45982 24.8285L4.04457 29.9965L9.34573 28.6068ZM25.4773 20.8661C25.3724 20.6904 25.0919 20.5856 24.6698 20.3745C24.249 20.1634 22.1793 19.1448 21.7925 19.0046C21.4072 18.8643 21.1267 18.7935 20.8448 19.2157C20.5643 19.6364 19.7568 20.5856 19.5117 20.8661C19.2666 21.1466 19.0201 21.182 18.5994 20.9709C18.1786 20.7598 16.8215 20.3164 15.2135 18.8813C13.9626 17.765 13.1169 16.3866 12.8718 15.9644C12.6267 15.5437 12.8463 15.3156 13.056 15.1059C13.2458 14.9175 13.4767 14.6143 13.6878 14.3678C13.9017 14.1242 13.9711 13.9485 14.1128 13.6666C14.2531 13.3861 14.1836 13.1396 14.0774 12.9285C13.9711 12.7188 13.1296 10.6462 12.7797 9.80333C12.4369 8.98308 12.0898 9.09358 11.832 9.08083L11.0245 9.06667C10.744 9.06667 10.2878 9.1715 9.90248 9.59367C9.51715 10.0158 8.42915 11.033 8.42915 13.1056C8.42915 15.1782 9.93789 17.1799 10.1476 17.4604C10.3586 17.7409 13.1155 21.9937 17.3385 23.817C18.343 24.2505 19.1278 24.5097 19.7384 24.7038C20.747 25.024 21.665 24.9787 22.3904 24.871C23.1993 24.7506 24.8809 23.8524 25.2322 22.8692C25.5835 21.8847 25.5835 21.0417 25.4773 20.8661Z" fill="black"/>
+</svg>
diff --git a/src/app/globals.css b/src/app/globals.css
index 4c5bccb..3100edf 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -67,3 +67,7 @@ tbody tr {
 
   backdrop-filter: blur(44px);
 }
+
+.dltr {
+  direction: ltr;
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 862c654..ecfe395 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,6 +6,7 @@ import WhyDanak from './home/WhyDanak'
 import DanakServices from './home/DanakServices'
 import Blog from './home/Blog'
 import Collaboration from './home/Collaboration'
+import Footer from '@/shared/Footer'
 
 const Home: NextPage = () => {
   return (
@@ -24,6 +25,8 @@ const Home: NextPage = () => {
 
       <Collaboration />
 
+      <Footer />
+
     </div>
   )
 }
diff --git a/src/components/Error.tsx b/src/components/Error.tsx
new file mode 100644
index 0000000..7fec2e7
--- /dev/null
+++ b/src/components/Error.tsx
@@ -0,0 +1,15 @@
+import { FC } from 'react'
+
+type Props = {
+    errorText: string
+}
+
+const Error: FC<Props> = (props: Props) => {
+    return (
+        <div className='mt-1.5 font-normal text-red-500 text-[11px]'>
+            {props.errorText}
+        </div>
+    )
+}
+
+export default Error
\ No newline at end of file
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
new file mode 100644
index 0000000..e067e55
--- /dev/null
+++ b/src/components/Input.tsx
@@ -0,0 +1,109 @@
+'use client'
+import { FC, InputHTMLAttributes, useEffect, useState } from 'react'
+import { clx } from '../helpers/utils';
+import { SearchNormal } from 'iconsax-react';
+import Error from './Error';
+
+type Variant = "floating_outlined" | "primary" | "search";
+
+type Props = {
+    label?: string;
+    className?: string;
+    variant?: Variant;
+    error_text?: string;
+    onEnter?: () => void;
+    unit?: string;
+    seprator?: boolean;
+    isNotRequired?: boolean;
+    onChangeSearchFinal?: (value: string) => void;
+} & InputHTMLAttributes<HTMLInputElement>
+
+const formatNumber = (value: string | number): string => {
+    if (!value) return '';
+    const inputValue = String(value).replace(/,/g, '');
+    return inputValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+};
+
+const Input: FC<Props> = (props: Props) => {
+
+    const [formattedValue, setFormattedValue] = useState<string>(
+        props.value ? formatNumber(props.value as string) : ''
+    );
+
+    const [search, setSearch] = useState<string>('')
+
+    const inputClass = clx(
+        'w-full h-10 text-black block px-4 text-xs rounded-xl border border-border',
+        props.readOnly && 'bg-gray-100 border-0 text-description',
+        props.variant === 'search' && 'bg-[#EEF0F7] border-0 ps-10',
+        props.className
+    );
+
+    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (props.seprator) {
+            const inputValue = event.target.value.replace(/,/g, ''); // حذف کاماها
+            const formatted = formatNumber(inputValue);
+
+            // به‌روزرسانی مقدار قالب‌بندی‌شده
+            setFormattedValue(formatted);
+
+            // ارسال مقدار خام به `onChange` والد
+            props.onChange?.({
+                ...event,
+                target: {
+                    ...event.target,
+                    value: inputValue,
+                },
+            });
+        } else {
+            props.onChange?.(event);
+        }
+    };
+
+    useEffect(() => {
+        if (props.value) {
+            setFormattedValue(formatNumber(props.value as string));
+        } else {
+            setFormattedValue('');
+        }
+    }, [props.value])
+
+    useEffect(() => {
+        if (props.variant === 'search' && props.onChangeSearchFinal) {
+            const timeout = setTimeout(() => {
+                props.onChangeSearchFinal?.(search)
+            }, 1000)
+            return () => clearTimeout(timeout)
+        }
+    }, [search, props])
+
+
+    return (
+        <div className='w-full'>
+            <label className='text-sm'>
+                {props.label}
+            </label>
+
+            <div className='w-full relative mt-1'>
+                <input {...props} onChange={(e) => {
+                    setSearch(e.target.value)
+                    handleInputChange(e)
+                }} value={props.seprator ? formattedValue : props.value} type={props.type} className={inputClass} />
+
+                {
+                    props.variant === 'search' &&
+                    <SearchNormal size={20} color='#8C90A3' className='absolute top-0 w-5 bottom-0 my-auto right-3' />
+                }
+
+                {
+                    props.error_text &&
+                    <Error
+                        errorText={props.error_text}
+                    />
+                }
+            </div>
+        </div>
+    )
+}
+
+export default Input
\ No newline at end of file
diff --git a/src/shared/Footer.tsx b/src/shared/Footer.tsx
new file mode 100644
index 0000000..1d98778
--- /dev/null
+++ b/src/shared/Footer.tsx
@@ -0,0 +1,148 @@
+import Input from '@/components/Input'
+import { ArrowLeft } from 'iconsax-react'
+import Image from 'next/image'
+import { FC } from 'react'
+
+const Footer: FC = () => {
+    return (
+        <div className='w-full border-4 border-white rounded-4xl bg-white/26 px-4 min-h-[550px] mt-24 flex flex-col'>
+            <div className='max-w-maxWidth mx-auto flex flex-col flex-1 w-full'>
+                <div className='flex-1 flex items-center'>
+
+                    <div className='flex gap-24 w-full'>
+
+                        <div className='max-w-[203px]'>
+                            <Image
+                                src={'/images/logo.svg'}
+                                width={140}
+                                height={58}
+                                alt='لوگو داناک'
+                            />
+
+                            <p className='mt-6 text-sm text-justify'>
+                                ما در داناک هم تولیدکننده نرم‌افزارهای پیشرفته هستیم و هم بستری برای فروش محصولات نرم‌افزاری دیگران فراهم کرده‌ایم. با ما هوشمندانه بسازید و حرفه‌ای بفروشید.
+                            </p>
+                        </div>
+
+                        <div>
+                            <h6 className='font-bold'>
+                                داناک
+                            </h6>
+                            <ul className='text-sm mt-4 flex flex-col gap-4'>
+                                <li>
+                                    محصولات
+                                </li>
+                                <li>
+                                    خدمات
+                                </li>
+                                <li>
+                                    مجله
+                                </li>
+                            </ul>
+                        </div>
+
+                        <div>
+                            <h6 className='font-bold'>
+                                سرویس ها محبوب
+                            </h6>
+                            <ul className='text-sm mt-4 flex flex-col gap-4'>
+                                <li>
+                                    دی منو
+                                </li>
+                                <li>
+                                    دی میل
+                                </li>
+                                <li>
+                                    دی پیج
+                                </li>
+                            </ul>
+                        </div>
+
+                        <div>
+                            <h6 className='font-bold'>
+                                همکاری با داناک
+                            </h6>
+                            <ul className='text-sm mt-4 flex flex-col gap-4'>
+                                <li>
+                                    توسعه دهندگان
+                                </li>
+                                <li>
+                                    نمایندگان
+                                </li>
+                            </ul>
+                        </div>
+
+                        <div className='w-full flex-1'>
+                            <h6 className='font-bold'>
+                                خبرنامه
+                            </h6>
+
+                            <div className='mt-4 relative'>
+                                <Input
+                                    className='bg-[#ECEFF6] border-none shadow-inner'
+                                />
+                                <div className='absolute left-1 top-1 rounded-xl size-8 bg-white flex justify-center items-center'>
+                                    <ArrowLeft
+                                        size={18}
+                                        color='black'
+                                    />
+                                </div>
+                            </div>
+
+                            <div className='mt-10 flex gap-4 items-center'>
+                                <Image
+                                    src={'/images/linkedin.svg'}
+                                    width={24}
+                                    height={24}
+                                    alt='داناک لینکداین'
+                                />
+                                <Image
+                                    src={'/images/instagram.svg'}
+                                    width={24}
+                                    height={24}
+                                    alt='داناک ایسنتاگرام'
+                                />
+                                <Image
+                                    src={'/images/whatsapp.svg'}
+                                    width={24}
+                                    height={24}
+                                    alt='داناک واتساپ'
+                                />
+                                <Image
+                                    src={'/images/telegram.svg'}
+                                    width={24}
+                                    height={24}
+                                    alt='داناک تلگرام'
+                                />
+                            </div>
+                        </div>
+
+                    </div>
+
+                </div>
+                <div className='h-14 border-t border-[#DADDE6] flex justify-between items-center'>
+                    <ul className='flex gap-4 text-sm'>
+                        <li className='pl-4 border-l border-[#DADDE6]'>
+                            درباره ی ما
+                        </li>
+                        <li className='pl-4 border-l border-[#DADDE6]'>
+                            حریم خصوصی
+                        </li>
+                        <li className='pl-4 border-l border-[#DADDE6]'>
+                            قوانین و مقررات
+                        </li>
+                        <li>
+                            تماس با ما
+                        </li>
+                    </ul>
+
+                    <div className='text-sm dltr'>
+                        © 2025 Danak. All rights reserved.
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Footer
\ No newline at end of file