diff --git a/src/assets/images/accessbility.jpg b/src/assets/images/accessbility.jpg new file mode 100644 index 0000000..4447c18 Binary files /dev/null and b/src/assets/images/accessbility.jpg differ diff --git a/src/assets/images/banner.png b/src/assets/images/banner.png new file mode 100644 index 0000000..e259ce2 Binary files /dev/null and b/src/assets/images/banner.png differ diff --git a/src/components/TitleLine.tsx b/src/components/TitleLine.tsx new file mode 100644 index 0000000..8c9c9ea --- /dev/null +++ b/src/components/TitleLine.tsx @@ -0,0 +1,18 @@ +import { FC } from 'react' + +type Props = { + title: string, +} + +const TitleLine: FC = (props: Props) => { + return ( +
+
{props.title}
+ + + +
+ ) +} + +export default TitleLine \ No newline at end of file diff --git a/src/config/Const.ts b/src/config/Const.ts new file mode 100644 index 0000000..af5ee98 --- /dev/null +++ b/src/config/Const.ts @@ -0,0 +1 @@ +export const SIDEBAR_SIZE_LEFT = 300; diff --git a/src/index.css b/src/index.css index 6290bbd..b0b8c00 100644 --- a/src/index.css +++ b/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; /* برای رفع مشکلات برش */ +} diff --git a/src/langs/fa.json b/src/langs/fa.json index 80710c5..ed17969 100644 --- a/src/langs/fa.json +++ b/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": "دیدن همه" } } diff --git a/src/pages/auth/Login.tsx b/src/pages/auth/Login.tsx index 8265e20..6236351 100644 --- a/src/pages/auth/Login.tsx +++ b/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' diff --git a/src/pages/auth/components/LoginStep1.tsx b/src/pages/auth/components/LoginStep1.tsx index 14fbb88..2951191 100644 --- a/src/pages/auth/components/LoginStep1.tsx +++ b/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' diff --git a/src/pages/auth/components/LoginStep2.tsx b/src/pages/auth/components/LoginStep2.tsx index 1cd07ad..65d737e 100644 --- a/src/pages/auth/components/LoginStep2.tsx +++ b/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' diff --git a/src/pages/auth/components/LoginStep3.tsx b/src/pages/auth/components/LoginStep3.tsx index dea5cb7..63fbdf2 100644 --- a/src/pages/auth/components/LoginStep3.tsx +++ b/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' diff --git a/src/pages/store/AuthStore.ts b/src/pages/auth/store/AuthStore.ts similarity index 100% rename from src/pages/store/AuthStore.ts rename to src/pages/auth/store/AuthStore.ts diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx new file mode 100644 index 0000000..27f9f50 --- /dev/null +++ b/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 ( +
+
+
+ +
+ + +
+
+ سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟ +
+
+ ۸ دقیقه مطالعه +
+ +
+
+
+ +
+ } + color='#00D16C' + count={4} + description={t('home.active_service')} + /> + + } + color='#FF7B00' + count={4} + description={t('home.unread_messages')} + /> + + } + color='#FF0000' + count={4} + description={t('home.unread_announcement')} + /> + + } + color='#0047FF' + count={4} + description={t('home.learning')} + /> + +
+ +
+ +
+ +
+
+ +
+ {t('home.add_access')} +
+
+ + + +
+
+ +
+ ) +} + +export default Home \ No newline at end of file diff --git a/src/pages/home/components/BoxNewAccessbility.tsx b/src/pages/home/components/BoxNewAccessbility.tsx new file mode 100644 index 0000000..edc9fa3 --- /dev/null +++ b/src/pages/home/components/BoxNewAccessbility.tsx @@ -0,0 +1,43 @@ +import { Add } from 'iconsax-react' +import { FC } from 'react' + +const BoxNewAccessbility: FC = () => { + return ( +
+ + + +
+ +
+
+ ) +} + +export default BoxNewAccessbility \ No newline at end of file diff --git a/src/pages/home/components/DanakLearning.tsx b/src/pages/home/components/DanakLearning.tsx new file mode 100644 index 0000000..1e833bc --- /dev/null +++ b/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 ( +
+
+
+ {t('home.danak_learning')} +
+
+
{t('home.see_all')}
+ +
+
+ +
+
+
+ danak-learning-1 +
+ +
+
+ لورم ایپسوم متن ساختگی با تولید سادگی +
+
+
+
دیزاین ,
+
۲۴ دقیقه
+
+
+ آذر ماه 1403 +
+
+
+
+
+
+ danak-learning-1 +
+ +
+
+ لورم ایپسوم متن ساختگی با تولید سادگی +
+
+
+
دیزاین ,
+
۲۴ دقیقه
+
+
+ آذر ماه 1403 +
+
+
+
+
+
+ ) +} + +export default DanakLearning \ No newline at end of file diff --git a/src/pages/home/components/ItemDashboard.tsx b/src/pages/home/components/ItemDashboard.tsx new file mode 100644 index 0000000..985727e --- /dev/null +++ b/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) => { + + return ( +
+
+ {props.icon} +
+
+ {props.title} +
+ +
+
+
+
{props.count}
+
+ {props.description} +
+
+
+
+ ) +} + +export default ItemDashboard \ No newline at end of file diff --git a/src/router/Main.tsx b/src/router/Main.tsx index 72be757..259c075 100644 --- a/src/router/Main.tsx +++ b/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 (
+
+
+ + } /> + +
+
) } diff --git a/src/shared/Header.tsx b/src/shared/Header.tsx index 362cdae..b05768a 100644 --- a/src/shared/Header.tsx +++ b/src/shared/Header.tsx @@ -9,7 +9,7 @@ const Header: FC = () => { const { t } = useTranslation('global') return ( -
+