design and responsive page 404 in dashboard and home

2024-09-06 21:16:12 +03:30
parent c45a161fcb
commit cb41f926e2
9 changed files with 172 additions and 10 deletions
@@ -0,0 +1,12 @@
+import Layout from '@/components/layout'
+import NotFoundPage from '@/components/notFound'
+
+function NotFound() {
+  return (
+    <Layout title='404' disableFooter={true}>
+      <NotFoundPage />
+    </Layout>
+  )
+}
+
+export default NotFound
@@ -0,0 +1,12 @@
+import Layout from '@/components/layout'
+import NotFoundPage from '@/components/notFound'
+
+function NotFound() {
+  return (
+    <Layout title='404' disableFooter={true}>
+      <NotFoundPage />
+    </Layout>
+  )
+}
+
+export default NotFound
@@ -12,6 +12,7 @@ import Transactions from "./tabs/transactions";
 import IsTurnsDetails from "./tabs/turns/isTurnsDetails";
 import ArrowRightD from "@/components/icons/ArrowRightD";
 import { Button } from "@mui/material";
+import NotfoundDashboard from "./NotfoundDashboard";

 const listTab = ['حساب کاربری', 'نوبت های من', 'تراکنش های من', 'نظرات من', 'پیام ها'];

@@ -23,7 +24,7 @@ function ContentTabs({ user, value, setValue, isOpenSide, setIsOpenSide }) {

    useEffect(() => {
        setTimeout(() => {
-            setLoading(true);
+            setLoading(false);
        }, 2000);
    }, []);

@@ -33,7 +34,8 @@ function ContentTabs({ user, value, setValue, isOpenSide, setIsOpenSide }) {
        <Turns user={user} loading={loading} setIsTurnsDetails={setIsTurnsDetails} />,
        <Transactions user={user} loading={loading} />,
        <Comments user={user} loading={loading} />,
-        <Messages user={user} loading={loading} />
+        <Messages user={user} loading={loading} />,
+        <NotfoundDashboard />
    ];

    return (
@@ -0,0 +1,35 @@
+import NumberNotFound from "@/components/icons/NumberNotFound"
+import { Button } from "@mui/material"
+import Image from "next/image"
+
+function NotfoundDashboard() {
+    return (
+        <div className='flex flex-col-reverse items-center justify-between gap-[50px]'>
+            <div className='flex w-full md:w-fit flex-col justify-center items-center'>
+                <div className='flex mt-[72px] md:hidden
+                w-[136px] sm:w-[163px] md:w-[190px] lg:w-[218px]
+                h-[51px] sm:h-[61px] md:h-[71px] lg:h-[82px]'>
+                    <NumberNotFound />
+                </div>
+                <Image
+                    className=' mt-[24px]
+                        w-[200px] sm:w-[212px] md:w-[223px] lg:w-[235px]
+                        h-[200px] sm:h-[212px] md:h-[223px] lg:h-[235px]
+                    '
+                    src='/assets/images/notfound-cover.png'
+                    alt='notfound-cover'
+                    height={405}
+                    width={411}
+                />
+                <p className='text-[#3B3B3B] text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold mt-[24px] sm:mt-[30px] md:mt-[35px] lg:mt-[40px] mb-[12px] sm:mb-[16px] md:mb-[20px] lg:mb-[24px] text-center'>صفحه مورد نظر یافت نشد!</p>
+                <p className='text-[#525252] text-[14px] md:text-[16px] font-normal text-center'>متاسفانه صفحه ای که به دنبال آن هستید وجود ندارد یا پاک شده است.</p>
+                <Button
+                    className='!h-[43px] md:!h-[45px] lg:!h-[46px] !mt-[20px] sm:!mt-[29px] md:!mt-[39px] lg:!mt-[48px] !px-[12px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium'
+                    variant='contained'
+                >بازگشت به صفحه اصلی</Button>
+            </div>
+        </div>
+    )
+}
+
+export default NotfoundDashboard
@@ -1,17 +1,24 @@
 import ContentTabs from "./ContentTabs"
 import Head from "./Head"
+import NotfoundDashboard from "./NotfoundDashboard"

 function UserAccountPage({ user, value, setValue, isOpenSide, setIsOpenSide }) {
    return (
        <div className='w-full md:w-[68%] lg:w-[72%]'>
-            <Head user={user} />
-            <ContentTabs
-                user={user}
-                value={value}
-                setValue={setValue}
-                isOpenSide={isOpenSide}
-                setIsOpenSide={setIsOpenSide}
-            />
+            {value === 5 ? (
+                <NotfoundDashboard />
+            ) : (
+                <>
+                    <Head user={user} />
+                    <ContentTabs
+                        user={user}
+                        value={value}
+                        setValue={setValue}
+                        isOpenSide={isOpenSide}
+                        setIsOpenSide={setIsOpenSide}
+                    />
+                </>
+            )}
        </div>
    )
 }
@@ -0,0 +1,36 @@
+function NotFoundCover() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="235" height="235" viewBox="0 0 235 235" fill="none">
+            <g clip-path="url(#clip0_2643_16677)">
+                <path d="M135.859 3.67188H121.172C95.852 3.67188 71.5691 13.7302 53.6653 31.634C35.7614 49.5379 25.7031 73.8207 25.7031 99.1406C25.7031 124.461 35.7614 148.743 53.6653 166.647C71.5691 184.551 95.852 194.609 121.172 194.609H135.859C161.179 194.609 185.462 184.551 203.366 166.647C221.27 148.743 231.328 124.461 231.328 99.1406C231.328 73.8207 221.27 49.5379 203.366 31.634C185.462 13.7302 161.179 3.67188 135.859 3.67188Z" fill="#DDDDFB" stroke="black" stroke-width="6.25" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M56.6245 152.409H41.937L10.168 184.244C8.09338 186.27 6.44888 188.695 5.3328 191.372C4.21673 194.049 3.652 196.923 3.67241 199.823C3.6695 202.721 4.23882 205.591 5.34772 208.268C6.45662 210.945 8.08326 213.377 10.1343 215.424C12.1853 217.471 14.6204 219.093 17.2998 220.196C19.9791 221.3 22.85 221.863 25.7477 221.855H31.5713C33.9826 221.857 36.3706 221.384 38.5982 220.46C40.8257 219.537 42.8489 218.183 44.5514 216.475L82.592 178.372C72.3476 171.47 63.5317 162.656 56.6282 152.412L56.6245 152.409Z" fill="#DDDDFB" stroke="black" stroke-width="6.25" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M41.9372 152.409H56.6247C63.5291 162.654 72.3462 171.469 82.5922 178.372L72.0539 188.911C62.0157 181.76 53.2418 172.983 46.0938 162.943H31.4062L41.9372 152.409Z" fill="#DDDDFB" stroke="black" stroke-width="6.25" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M18.5868 190.512L56.6274 152.409C63.5297 162.653 72.3443 171.469 82.5876 178.372L44.5543 216.475C41.1114 219.917 36.4425 221.851 31.5742 221.851C26.706 221.851 22.037 219.917 18.5941 216.475C15.1523 213.033 13.2188 208.364 13.2188 203.495C13.2187 198.627 15.1523 193.958 18.5941 190.515L18.5868 190.512Z" fill="white" stroke="black" stroke-width="6.25" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M121.172 179.922C165.785 179.922 201.953 143.754 201.953 99.1406C201.953 54.5273 165.785 18.3594 121.172 18.3594C76.5586 18.3594 40.3906 54.5273 40.3906 99.1406C40.3906 143.754 76.5586 179.922 121.172 179.922Z" fill="white" stroke="black" stroke-width="6.25" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M135.859 194.609C188.587 194.609 231.328 151.869 231.328 99.1406C231.328 46.4125 188.587 3.67188 135.859 3.67188C83.1313 3.67188 40.3906 46.4125 40.3906 99.1406C40.3906 151.869 83.1313 194.609 135.859 194.609Z" fill="white" stroke="black" stroke-width="6.25" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M18.5879 190.512L56.6286 152.409C63.5308 162.653 72.3454 171.469 82.5887 178.372L44.5554 216.475C41.1129 219.918 36.4438 221.852 31.5754 221.852C26.7069 221.852 22.0378 219.918 18.5953 216.475C15.1527 213.033 13.2188 208.364 13.2188 203.495C13.2188 198.627 15.1527 193.958 18.5953 190.515L18.5879 190.512Z" fill="white" stroke="black" stroke-width="6.25" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M56.6247 152.409C63.5291 162.654 72.3462 171.469 82.5922 178.372L72.0539 188.911C62.0157 181.76 53.2418 172.983 46.0938 162.943L56.6247 152.409Z" fill="white" stroke="black" stroke-width="6.25" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M135.859 179.922C180.473 179.922 216.641 143.754 216.641 99.1406C216.641 54.5273 180.473 18.3594 135.859 18.3594C91.2461 18.3594 55.0781 54.5273 55.0781 99.1406C55.0781 143.754 91.2461 179.922 135.859 179.922Z" fill="#DDDDFB" stroke="black" stroke-width="6.25" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M165.234 73.4375H179.922C180.896 73.4375 181.83 73.0506 182.518 72.362C183.207 71.6734 183.594 70.7395 183.594 69.7656V55.0781C183.594 54.1043 183.207 53.1703 182.518 52.4817C181.83 51.7931 180.896 51.4062 179.922 51.4062H165.234C164.261 51.4062 163.327 51.7931 162.638 52.4817C161.949 53.1703 161.562 54.1043 161.562 55.0781V69.7656C161.562 70.7395 161.949 71.6734 162.638 72.362C163.327 73.0506 164.261 73.4375 165.234 73.4375Z" fill="#5559CE" />
+                <path d="M88.125 150.547H110.156C111.13 150.547 112.064 150.16 112.753 149.471C113.441 148.783 113.828 147.849 113.828 146.875V124.844C113.828 123.87 113.441 122.936 112.753 122.247C112.064 121.559 111.13 121.172 110.156 121.172H88.125C87.1512 121.172 86.2172 121.559 85.5286 122.247C84.84 122.936 84.4531 123.87 84.4531 124.844V146.875C84.4531 147.849 84.84 148.783 85.5286 149.471C86.2172 150.16 87.1512 150.547 88.125 150.547Z" fill="#5559CE" />
+                <path d="M91.7969 99.1406C91.7969 89.0026 111.526 80.7812 135.859 80.7812C160.193 80.7812 179.922 89.0026 179.922 99.1406" stroke="white" stroke-width="6.25" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M135.859 143.203C125.721 143.203 117.5 123.474 117.5 99.1406C117.5 74.8071 125.721 55.0781 135.859 55.0781" stroke="white" stroke-width="6.25" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M179.922 99.1406C179.922 109.279 160.193 117.5 135.859 117.5C111.526 117.5 91.7969 109.279 91.7969 99.1406" stroke="black" stroke-width="6.25" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M135.859 55.0781C145.997 55.0781 154.219 74.8071 154.219 99.1406C154.219 123.474 145.997 143.203 135.859 143.203" stroke="black" stroke-width="6.25" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M135.859 143.203C160.193 143.203 179.922 123.474 179.922 99.1406C179.922 74.8071 160.193 55.0781 135.859 55.0781C111.526 55.0781 91.7969 74.8071 91.7969 99.1406C91.7969 123.474 111.526 143.203 135.859 143.203Z" stroke="black" stroke-width="6.25" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M143.203 231.328H223.984C225.932 231.328 227.8 230.554 229.177 229.177C230.554 227.8 231.328 225.932 231.328 223.984V157.891C231.328 155.943 230.554 154.075 229.177 152.698C227.8 151.321 225.932 150.547 223.984 150.547H143.203C141.255 150.547 139.388 151.321 138.01 152.698C136.633 154.075 135.859 155.943 135.859 157.891V223.984C135.859 225.932 136.633 227.8 138.01 229.177C139.388 230.554 141.255 231.328 143.203 231.328Z" fill="white" stroke="black" stroke-width="6.25" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M183.594 203.789C185.055 203.789 186.455 203.209 187.488 202.176C188.521 201.143 189.102 199.742 189.102 198.281C189.102 196.82 188.521 195.42 187.488 194.387C186.455 193.354 185.055 192.773 183.594 192.773C182.133 192.773 180.732 193.354 179.699 194.387C178.666 195.42 178.086 196.82 178.086 198.281C178.086 199.742 178.666 201.143 179.699 202.176C180.732 203.209 182.133 203.789 183.594 203.789Z" fill="#5559CE" />
+                <path d="M165.234 203.789C166.695 203.789 168.096 203.209 169.129 202.176C170.162 201.143 170.742 199.742 170.742 198.281C170.742 196.82 170.162 195.42 169.129 194.387C168.096 193.354 166.695 192.773 165.234 192.773C163.774 192.773 162.373 193.354 161.34 194.387C160.307 195.42 159.727 196.82 159.727 198.281C159.727 199.742 160.307 201.143 161.34 202.176C162.373 203.209 163.774 203.789 165.234 203.789Z" fill="#5559CE" />
+                <path d="M201.953 203.789C203.414 203.789 204.815 203.209 205.848 202.176C206.881 201.143 207.461 199.742 207.461 198.281C207.461 196.82 206.881 195.42 205.848 194.387C204.815 193.354 203.414 192.773 201.953 192.773C200.492 192.773 199.091 193.354 198.059 194.387C197.026 195.42 196.445 196.82 196.445 198.281C196.445 199.742 197.026 201.143 198.059 202.176C199.091 203.209 200.492 203.789 201.953 203.789Z" fill="#5559CE" />
+                <path d="M231.328 165.234H135.859V157.891C135.859 155.943 136.633 154.075 138.01 152.698C139.388 151.321 141.255 150.547 143.203 150.547H223.984C225.932 150.547 227.8 151.321 229.177 152.698C230.554 154.075 231.328 155.943 231.328 157.891V165.234Z" fill="#5559CE" stroke="black" stroke-width="6.25" stroke-linecap="round" stroke-linejoin="round" />
+            </g>
+            <defs>
+                <clipPath id="clip0_2643_16677">
+                    <rect width="235" height="235" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+    )
+}
+
+export default NotFoundCover
@@ -0,0 +1,11 @@
+function NumberNotFound() {
+  return (
+    <svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg" width="219" height="83" viewBox="0 0 219 83" fill="none">
+      <path d="M40.4843 66.4181H0V48.142L40.4843 0.0132523H59.8582V49.1799H69.8977V66.4181H59.8582V81.3743H40.4843V66.4181ZM40.4843 49.1799V24.0044L19.0878 49.1799H40.4843Z" fill="#FCB08B" />
+      <path d="M76.8228 41.0498C76.8228 25.8407 79.5594 15.1957 85.0327 9.11478C90.506 3.03383 98.8468 -0.00443057 110.055 4.84922e-06C115.435 4.84922e-06 119.855 0.665317 123.315 1.99594C126.458 3.12838 129.335 4.89219 131.771 7.17873C133.824 9.13871 135.563 11.4029 136.927 13.8917C138.277 16.4903 139.294 19.2487 139.954 22.1017C141.458 28.1965 142.209 34.4528 142.19 40.7304C142.19 55.2431 139.735 65.8637 134.825 72.5923C129.915 79.3208 121.459 82.6873 109.456 82.6917C102.723 82.6917 97.2834 81.6183 93.1362 79.4716C88.9558 77.29 85.4345 74.0305 82.937 70.0308C81.0076 67.0857 79.5062 63.0561 78.4328 57.9421C77.3185 52.3814 76.779 46.7209 76.8228 41.0498ZM98.8712 41.103C98.8712 51.3045 99.7694 58.2614 101.566 61.9739C103.362 65.6863 105.972 67.5514 109.396 67.5691C110.483 67.5813 111.561 67.3776 112.569 66.9699C113.576 66.5622 114.492 65.9585 115.265 65.194C116.923 63.6105 118.143 61.109 118.924 57.6892C119.704 54.2695 120.095 48.9471 120.095 41.7218C120.095 31.1034 119.194 23.9646 117.394 20.3053C115.593 16.6461 112.892 14.8187 109.29 14.8232C105.618 14.8232 102.956 16.6883 101.306 20.4184C99.6563 24.1486 98.8446 31.0435 98.8712 41.103Z" fill="#FCB08B" />
+      <path d="M189.547 66.418H149.062V48.1419L189.547 0.0131836H208.921V49.1798H218.993V66.418H208.921V81.3743H189.547V66.418ZM189.547 49.1798V24.0044L168.157 49.1798H189.547Z" fill="#FCB08B" />
+    </svg>
+  )
+}
+
+export default NumberNotFound
@@ -0,0 +1,47 @@
+import Image from 'next/image'
+import React from 'react'
+import NumberNotFound from '../icons/NumberNotFound'
+import { Button } from '@mui/material'
+
+function NotFoundPage() {
+    return (
+        <div className='pt-[105px] padding-responsive sm:pt-[135px] md:pt-[165px] lg:pt-[201px] flex flex-col md:flex-row items-center justify-between gap-[50px]'>
+            <div className='flex w-full md:w-fit flex-col justify-center items-center'>
+                <div className='w-[136px] sm:w-[163px] md:w-[190px] lg:w-[218px]
+                h-[51px] sm:h-[61px] md:h-[71px] lg:h-[82px]'>
+                    <NumberNotFound />
+                </div>
+                <Image
+                    className=' 
+                        flex md:hidden mt-[20px]
+                        w-[200px] sm:w-[270px] md:w-[340px] lg:w-[411px]
+                        h-[200px] sm:h-[270px] md:h-[340px] lg:h-[405px]
+                    '
+                    src='/assets/images/notfound-cover.png'
+                    alt='notfound-cover'
+                    height={405}
+                    width={411}
+                />
+                <p className='text-[#3B3B3B] text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold mt-[24px] sm:mt-[30px] md:mt-[35px] lg:mt-[40px] mb-[12px] sm:mb-[16px] md:mb-[20px] lg:mb-[24px] text-center'>صفحه مورد نظر یافت نشد!</p>
+                <p className='text-[#525252] text-[14px] md:text-[16px] font-normal text-center'>متاسفانه صفحه ای که به دنبال آن هستید وجود ندارد یا پاک شده است.</p>
+                <Button
+                    className='!h-[43px] md:!h-[45px] lg:!h-[46px] !mt-[20px] sm:!mt-[29px] md:!mt-[39px] lg:!mt-[48px] !px-[12px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium'
+                    variant='contained'
+                >بازگشت به صفحه اصلی</Button>
+            </div>
+            <Image
+                className=' 
+                    hidden md:flex
+                    w-[200px] sm:w-[270px] md:w-[340px] lg:w-[411px]
+                    h-[200px] sm:h-[270px] md:h-[340px] lg:h-[405px]
+                '
+                src='/assets/images/notfound-cover.png'
+                alt='notfound-cover'
+                height={405}
+                width={411}
+            />
+        </div>
+    )
+}
+
+export default NotFoundPage