home page

src/components/TitleLine.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react'
+
+type Props = {
+    title: string,
+}
+
+const TitleLine: FC<Props> = (props: Props) => {
+    return (
+        <div className='w-full text-sm flex items-center gap-4'>
+            <div className='whitespace-nowrap'>{props.title}</div>
+            <svg style={{ width: '100%', height: 1 }} xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
+                <line x1="0" y1="0" x2="100%" y2="0" stroke="#aaa" strokeWidth="1" strokeDasharray="5 3" />
+            </svg>
+        </div>
+    )
+}
+
+export default TitleLine

src/config/Const.ts

@@ -0,0 +1 @@
+export const SIDEBAR_SIZE_LEFT = 300;

src/index.css

@@ -62,3 +62,9 @@ textarea::placeholder {
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
+
+.borderDashed {
+  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' rx='24' ry='24' stroke='%238C90A3' stroke-width='2' stroke-dasharray='6%2C 14' stroke-dashoffset='25' stroke-linecap='square'/%3E%3C/svg%3E");
+  border-radius: 24px; /* تطابق با rx و ry */
+  overflow: hidden; /* برای رفع مشکلات برش */
+}

src/langs/fa.json

@@ -57,5 +57,21 @@
   },
   "header": {
     "search": "جستجو"
+  },
+  "home": {
+    "new": "جدید",
+    "study": "مطالعه",
+    "myservice": "سرویس های من",
+    "active_service": "سرویس های فعال",
+    "ticket": "تیکت ها",
+    "unread_messages": "پیام خوانده نشده دارید ",
+    "announcement": "اطلاعیه ها",
+    "unread_announcement": "اطلاعیه خوانده نشده دارید",
+    "learnings": "آموزش ها",
+    "learning": "آموزش",
+    "access": "دسترسی سریع",
+    "add_access": "دسترسی سریع تازه ایجاد کنید.",
+    "danak_learning": "آموزش داناک",
+    "see_all": "دیدن همه"
   }
 }

src/pages/auth/Login.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import LogoImage from '../../assets/images/logo.svg'
 import LogoSmallImage from '../../assets/images/logo-small.svg'
-import { useAuthStore } from '../store/AuthStore'
+import { useAuthStore } from './store/AuthStore'
 import LoginStep1 from './components/LoginStep1'
 import LoginStep2 from './components/LoginStep2'
 import LoginStep3 from './components/LoginStep3'

src/pages/auth/components/LoginStep1.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { LoginType } from '../types/AuthTypes'
 import { useFormik } from 'formik'
 import * as Yup from 'yup'
-import { useAuthStore } from '../../store/AuthStore'
+import { useAuthStore } from '../store/AuthStore'
 import Error from '../../../components/Error'
 import Button from '../../../components/Button'
 import { Link } from 'react-router-dom'

src/pages/auth/components/LoginStep2.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { LoginType } from '../types/AuthTypes'
 import { useFormik } from 'formik'
 import * as Yup from 'yup'
-import { useAuthStore } from '../../store/AuthStore'
+import { useAuthStore } from '../store/AuthStore'
 import Button from '../../../components/Button'
 import OTPInput from 'react-otp-input'
 import { useCountDown } from '../../../hooks/useCountDown'

src/pages/auth/components/LoginStep3.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { LoginPasswordType } from '../types/AuthTypes'
 import { useFormik } from 'formik'
 import * as Yup from 'yup'
-import { useAuthStore } from '../../store/AuthStore'
+import { useAuthStore } from '../store/AuthStore'
 import Error from '../../../components/Error'
 import Button from '../../../components/Button'
 import { Link } from 'react-router-dom'

src/pages/home/Home.tsx

@@ -0,0 +1,98 @@
+import { FC } from 'react'
+import BannerImage from '../../assets/images/banner.png'
+import { useTranslation } from 'react-i18next'
+import { ArrowLeft, Element3, Messages3, NotificationStatus, Teacher } from 'iconsax-react'
+import ItemDashboard from './components/ItemDashboard'
+import TitleLine from '../../components/TitleLine'
+import AccessbilityImage from '../../assets/images/accessbility.jpg'
+import BoxNewAccessbility from './components/BoxNewAccessbility'
+import DanakLearning from './components/DanakLearning'
+
+const Home: FC = () => {
+
+    const { t } = useTranslation('global')
+
+    return (
+        <div className='w-full flex gap-6'>
+            <div className='flex-1'>
+                <div className='relative'>
+                    <img src={BannerImage} className='w-full rounded-3xl' />
+                    <div className='absolute  size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
+                        <button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
+                            {t('home.new')}
+                        </button>
+
+                        <div className='max-w-[340px] font-medium text-white text-lg leading-10'>
+                            <div>
+                                سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
+                            </div>
+                            <div className='mt-3 text-border text-xs'>
+                                ۸ دقیقه مطالعه
+                            </div>
+                            <button className='mt-3 px-4 h-9 flex gap-2 items-center text-xs rounded-2.5 bg-black text-white'>
+                                <div>
+                                    {t('home.study')}
+                                </div>
+                                <ArrowLeft size={14} color='white' />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='mt-8 text-sm flex gap-6 items-center'>
+                    <ItemDashboard
+                        title={t('home.myservice')}
+                        icon={<Element3 size={20} color='black' />}
+                        color='#00D16C'
+                        count={4}
+                        description={t('home.active_service')}
+                    />
+
+                    <ItemDashboard
+                        title={t('home.ticket')}
+                        icon={<Messages3 size={20} color='black' />}
+                        color='#FF7B00'
+                        count={4}
+                        description={t('home.unread_messages')}
+                    />
+
+                    <ItemDashboard
+                        title={t('home.announcement')}
+                        icon={<NotificationStatus size={20} color='black' />}
+                        color='#FF0000'
+                        count={4}
+                        description={t('home.unread_announcement')}
+                    />
+
+                    <ItemDashboard
+                        title={t('home.learnings')}
+                        icon={<Teacher size={20} color='black' />}
+                        color='#0047FF'
+                        count={4}
+                        description={t('home.learning')}
+                    />
+
+                </div>
+
+                <div className='w-full mt-8'>
+                    <TitleLine title={t('home.access')} />
+                </div>
+
+                <div className='mt-8 flex gap-6 items-center'>
+                    <div className='flex-1 h-[160px] rounded-3xl bg-white flex flex-col gap-4 justify-center items-center'>
+                        <img src={AccessbilityImage} className='w-10' />
+                        <div className='text-xs'>
+                            {t('home.add_access')}
+                        </div>
+                    </div>
+                    <BoxNewAccessbility />
+                    <BoxNewAccessbility />
+                    <BoxNewAccessbility />
+                </div>
+            </div>
+            <DanakLearning />
+        </div>
+    )
+}
+
+export default Home

src/pages/home/components/BoxNewAccessbility.tsx

@@ -0,0 +1,43 @@
+import { Add } from 'iconsax-react'
+import { FC } from 'react'
+
+const BoxNewAccessbility: FC = () => {
+    return (
+        <div
+            className="flex-1 flex justify-center items-center h-[160px]"
+            style={{
+                position: 'relative',
+            }}
+        >
+            <svg
+                width="100%"
+                height="100%"
+                xmlns="http://www.w3.org/2000/svg"
+                style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    zIndex: -1,
+                    borderRadius: '22px',
+                }}
+            >
+                <rect
+                    width="100%"
+                    height="100%"
+                    fill="none"
+                    // rx="22"
+                    ry="22"
+                    stroke="#8C90A3"
+                    strokeWidth="2"
+                    strokeDasharray="6,14"
+                // strokeDashoffset="25"
+                />
+            </svg>
+            <div style={{ zIndex: 1 }}>
+                <Add size={38} color="#8C90A3" />
+            </div>
+        </div>
+    )
+}
+
+export default BoxNewAccessbility

src/pages/home/components/DanakLearning.tsx

@@ -0,0 +1,69 @@
+import { FC } from 'react'
+import { SIDEBAR_SIZE_LEFT } from '../../../config/Const'
+import { useTranslation } from 'react-i18next'
+import { ArrowLeft } from 'iconsax-react'
+import CoverImage from '../../../assets/images/banner.png'
+
+const DanakLearning: FC = () => {
+
+    const { t } = useTranslation('global')
+
+    return (
+        <div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white text-xs hidden xl:block h-fit px-5 py-7 rounded-3xl'>
+            <div className='flex justify-between items-center'>
+                <div>
+                    {t('home.danak_learning')}
+                </div>
+                <div className='flex gap-2 items-center text-[10px]'>
+                    <div>{t('home.see_all')}</div>
+                    <ArrowLeft size={12} color='black' />
+                </div>
+            </div>
+
+            <div className='mt-7'>
+                <div className='flex gap-3 mt-6'>
+                    <div>
+                        <img src={CoverImage} alt='danak-learning-1' className='w-36 h-24 object-cover rounded-2xl' />
+                    </div>
+
+                    <div className='text-xs'>
+                        <div className='leading-5'>
+                            لورم ایپسوم متن ساختگی با تولید سادگی
+                        </div>
+                        <div className='text-[10px] text-description'>
+                            <div className='flex gap-1 mt-2'>
+                                <div>دیزاین ,</div>
+                                <div>۲۴ دقیقه</div>
+                            </div>
+                            <div className=' mt-2'>
+                                آذر ماه 1403
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className='flex gap-3 mt-6'>
+                    <div>
+                        <img src={CoverImage} alt='danak-learning-1' className='w-36 h-24 object-cover rounded-2xl' />
+                    </div>
+
+                    <div className='text-xs'>
+                        <div className='leading-5'>
+                            لورم ایپسوم متن ساختگی با تولید سادگی
+                        </div>
+                        <div className='text-[10px] text-description'>
+                            <div className='flex gap-1 mt-2'>
+                                <div>دیزاین ,</div>
+                                <div>۲۴ دقیقه</div>
+                            </div>
+                            <div className=' mt-2'>
+                                آذر ماه 1403
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default DanakLearning

src/pages/home/components/ItemDashboard.tsx

@@ -0,0 +1,35 @@
+import { FC, ReactNode } from 'react'
+
+type Props = {
+    title: string
+    icon: ReactNode,
+    color: string,
+    count: number,
+    description: string
+}
+
+const ItemDashboard: FC<Props> = (props: Props) => {
+
+    return (
+        <div className='p-6 flex-1 h-[178px] bg-white rounded-3xl'>
+            <div className='size-10 rounded-full bg-[#EEF0F7] flex justify-center items-center'>
+                {props.icon}
+            </div>
+            <div className='mt-5'>
+                {props.title}
+            </div>
+
+            <div className='mt-5 text-xs text-description flex gap-1.5 items-center'>
+                <div style={{ background: props.color }} className='size-1.5 rounded-full'></div>
+                <div className='flex gap-0.5'>
+                    <div>{props.count}</div>
+                    <div className='whitespace-nowrap'>
+                        {props.description}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ItemDashboard

src/router/Main.tsx

@@ -1,12 +1,22 @@
 import { FC } from 'react'
 import SideBar from '../shared/SideBar'
 import Header from '../shared/Header'
+import { Route, Routes } from 'react-router-dom'
+import { Pages } from '../config/Pages'
+import Home from '../pages/home/Home'
 
 const MainRouter: FC = () => {
     return (
         <div className='p-4'>
             <SideBar />
             <Header />
+            <div className='flex-1 ms-[269px] mt-[66px]'>
+                <div className='pt-8'>
+                    <Routes>
+                        <Route path={Pages.dashboard} element={<Home />} />
+                    </Routes>
+                </div>
+            </div>
         </div>
     )
 }

src/shared/Header.tsx

@@ -9,7 +9,7 @@ const Header: FC = () => {
     const { t } = useTranslation('global')
 
     return (
-        <div className='fixed left-4 right-[285px] top-4 h-16 flex items-center px-6 bg-white justify-between rounded-[32px] w-[calc(100%-305px)]'>
+        <div className='fixed z-10 left-4 right-[285px] top-4 h-16 flex items-center px-6 bg-white justify-between rounded-[32px] w-[calc(100%-305px)]'>
 
             <div className='min-w-[270px]'>
                 <Input

tailwind.config.js

@@ -11,7 +11,8 @@ export default {
         secondary: '#F4F5F9',
         border: '#D0D0D0',
         description: '#888888',
-        header: "#C3C7DD"
+        header: "#C3C7DD",
+        success: "#00BA4B"
       },
       borderRadius: {
         '2.5': '10px'