diff --git a/README.md b/README.md index 0e84e9f..d418f2b 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # Doctor Man +Visit [Demo](https://doctorman.vercel.app/) page. + This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). ## Getting Started diff --git a/src/app/error.module.css b/src/app/error.module.css new file mode 100644 index 0000000..244f7da --- /dev/null +++ b/src/app/error.module.css @@ -0,0 +1,70 @@ +.error { + display: grid; + grid-template-areas: "writings visuals" "actions actions" "trace trace"; + grid-template-columns: repeat(2, minmax(0, auto)); + place-content: center; + column-gap: 4rem; + row-gap: 1rem; + + min-block-size: 100%; + + .writings { + grid-area: writings; + + .status-code { + font-size: var(--fz-800); + font-weight: 700; + } + + h1 { + margin-block-end: 1rem; + + font-size: var(--fz-600); + } + } + + .visuals { + grid-area: visuals; + } + + .actions { + grid-area: actions; + grid-column: 1 / -1; + + button { + background-color: var(--color-primary); + color: var(--color-primary-opposite); + + padding: 0.5rem 2rem; + + border: none; + border-radius: var(--border-radius); + + font-size: 1rem; + font-weight: 900; + + cursor: pointer; + } + } + + .trace { + grid-area: trace; + + min-inline-size: 100%; + inline-size: 0; + + margin-block-start: 2rem; + + details { + summary { + cursor: pointer; + } + + pre { + overflow: auto; + + max-block-size: 12rem; + } + } + } +} diff --git a/src/app/error.tsx b/src/app/error.tsx new file mode 100644 index 0000000..eed68e0 --- /dev/null +++ b/src/app/error.tsx @@ -0,0 +1,38 @@ +"use client"; + +import { ReactElement } from "react"; + +import Image from "next/image"; + +import errorImage from "@/assets/illustrations/error.svg"; + +import styles from "./error.module.css"; + +type Props = { + error: Error & { digest?: string }; + reset: () => void; +}; + +export default function Error({ error, reset }: Props): ReactElement { + return ( +
+
+
بدبخت شدیم!
+

یک خطای غیرمنتظره رخ داده است.

+

با عرض پوزش، لطفاً با تیم پشتیبانی تماس بگیرید.

+
+
+ +
+
+ +
+
+
+ لاگ خطا + 
{error.stack}
+
+
+
+ ); +} diff --git a/src/app/globals.css b/src/app/globals.css index fdca90f..a58948f 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -79,6 +79,8 @@ body { min-block-size: 100vh; min-block-size: 100dvh; + font-size: var(--fz-400); + > * { padding-inline: var(--full-width-padding-inline); } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index c9c45b6..fb00c97 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -6,6 +6,7 @@ import { Vazirmatn } from "next/font/google"; import FooterComponent from "@/components/footer/footer.component"; import HeaderComponent from "@/components/header/header.component"; +import "@/styles/typography.css"; import "./globals.css"; const vazirmatn = Vazirmatn({ diff --git a/src/app/not-found.module.css b/src/app/not-found.module.css new file mode 100644 index 0000000..542608e --- /dev/null +++ b/src/app/not-found.module.css @@ -0,0 +1,44 @@ +.not-found { + display: grid; + grid-template-areas: "writings visuals" "search visuals"; + place-content: center; + gap: 1rem; + + min-block-size: 100%; + + .writings { + grid-area: writings; + + .status-code { + font-size: var(--fz-800); + font-weight: 300; + + line-height: 0.8; + } + + h1 { + margin-block-end: 1rem; + + font-size: var(--fz-600); + } + + p { + max-inline-size: 50ch; + } + } + + .visuals { + grid-area: visuals; + + min-block-size: 100%; + block-size: 0; + + img { + block-size: 100%; + } + } + + .search { + grid-area: search; + } +} diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx new file mode 100644 index 0000000..19a1f34 --- /dev/null +++ b/src/app/not-found.tsx @@ -0,0 +1,30 @@ +import { ReactElement } from "react"; + +import Image from "next/image"; + +import notFoundImage from "@/assets/illustrations/not-found.svg"; + +import GlobalSearchBoxComponent from "@/components/global-search-box/global-search-box.component"; + +import styles from "./not-found.module.css"; + +export default function NotFound(): ReactElement { + return ( +
+
+
404
+

صفحه‌ی مورد نظر پیدا نشد!

+

+ با عرض پوزش، لطفاً از طریق کادر جستجو، پزشک یا مرکز درمانی مورد نظر + خود را جستجو کنید. +

+
+
+ +
+
+ +
+
+ ); +} diff --git a/src/app/page.module.css b/src/app/page.module.css index e837406..8dd4f0a 100644 --- a/src/app/page.module.css +++ b/src/app/page.module.css @@ -13,7 +13,7 @@ align-items: center; gap: 1rem; - font-size: 2.5rem; + font-size: var(--fz-700); svg { font-size: 1.5em; diff --git a/src/assets/illustrations/error.svg b/src/assets/illustrations/error.svg new file mode 100644 index 0000000..ee83b77 --- /dev/null +++ b/src/assets/illustrations/error.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/illustrations/not-found.svg b/src/assets/illustrations/not-found.svg new file mode 100644 index 0000000..9fc829e --- /dev/null +++ b/src/assets/illustrations/not-found.svg @@ -0,0 +1 @@ +? diff --git a/src/components/footer/footer.module.css b/src/components/footer/footer.module.css index dd67f40..addd0f2 100644 --- a/src/components/footer/footer.module.css +++ b/src/components/footer/footer.module.css @@ -14,7 +14,7 @@ .logo { margin-block-end: 0.25rem; - font-size: 2rem; + font-size: var(--fz-600); font-weight: 700; } } @@ -37,7 +37,7 @@ > li { a { - font-size: 1.5rem; + font-size: var(--fz-500); } } } diff --git a/src/components/global-search-box/global-search-box.module.css b/src/components/global-search-box/global-search-box.module.css index ca1269f..7122154 100644 --- a/src/components/global-search-box/global-search-box.module.css +++ b/src/components/global-search-box/global-search-box.module.css @@ -14,7 +14,7 @@ display: grid; align-items: center; - font-size: 1.5rem; + font-size: var(--fz-500); } input { diff --git a/src/styles/typography.css b/src/styles/typography.css new file mode 100644 index 0000000..0ca2f2a --- /dev/null +++ b/src/styles/typography.css @@ -0,0 +1,11 @@ +:root { + --fz-100: ; + --fz-200: ; + --fz-300: clamp(0.75rem, 0.6429rem + 0.4762vw, 1rem); + --fz-400: clamp(1rem, 1rem + 0vw, 1rem); + --fz-500: clamp(1.25rem, 1.1429rem + 0.4762vw, 1.5rem); + --fz-600: clamp(1.5rem, 1.2857rem + 0.9524vw, 2rem); + --fz-700: clamp(1.75rem, 1.4286rem + 1.4286vw, 2.5rem); + --fz-800: clamp(2.5rem, 1.8571rem + 2.8571vw, 4rem); + --fz-900: clamp(3rem, 1.7143rem + 5.7143vw, 6rem); +}