add colors and error components

This commit is contained in:
2026-02-03 10:57:11 +03:30
parent e0eef542de
commit ae697df0b2
10 changed files with 176 additions and 6 deletions

View File

@@ -0,0 +1,3 @@
export default async function RootLayout({ children }: { children: React.ReactNode }) {
return <div className={"bg-bg"}>{children}</div>;
}

View File

@@ -0,0 +1,11 @@
"use client";
import { useDeviceStore } from "@/stores/useDeviceStore";
import dynamic from "next/dynamic";
const HomeMobile = dynamic(() => import("@/components/Home/Mobile"), { ssr: false });
const HomeDesktop = dynamic(() => import("@/components/Home/Desktop"), { ssr: false });
export default function HomePage() {
const isMobile = useDeviceStore((state) => state.isMobile);
return isMobile ? <HomeMobile /> : <HomeDesktop />;
}

42
src/app/global-error.tsx Normal file
View File

@@ -0,0 +1,42 @@
"use client";
export default function GlobalError() {
return (
<html>
<body className="bg-bg text-text-primary flex min-h-screen items-center justify-center">
<div className="bg-card mx-4 w-full max-w-md rounded-xl p-8 text-center shadow-lg">
{/* آیکون هشدار */}
<div className="mb-4 flex justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
className="text-warning h-16 w-16"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
{/* متن خطا */}
<h2 className="mb-3 text-2xl font-bold">مشکلی در سامانه رخ داده است</h2>
<p className="text-text-secondary mb-8 leading-relaxed">لطفاً ساعاتی بعد مجدد تلاش کنید.</p>
{/* دکمه رفرش */}
<button
onClick={() => window.location.reload()}
className="bg-primary-100 hover:bg-primary-200 focus:ring-primary-300 inline-block rounded-lg px-6 py-3 font-medium text-white shadow-md transition-all duration-200 hover:shadow-lg focus:ring-2 focus:ring-offset-2 focus:outline-none"
>
تلاش مجدد
</button>
</div>
</body>
</html>
);
}

22
src/app/not-found.tsx Normal file
View File

@@ -0,0 +1,22 @@
import Link from "next/link";
export default function NotFound() {
return (
<div className="bg-bg text-text-primary flex min-h-screen items-center justify-center">
<div className="bg-card mx-4 w-full max-w-md rounded-xl p-8 text-center shadow-lg">
<h2 className="mb-2 text-2xl font-bold">صفحه مورد نظر یافت نشد</h2>
<p className="text-text-secondary mb-6 leading-relaxed">
متأسفانه صفحهای که به دنبال آن هستید وجود ندارد.
</p>
<Link
href="/"
className="bg-primary-100 hover:bg-primary-200 inline-block rounded-lg px-6 py-3 font-medium text-white shadow-md transition-all duration-200 hover:shadow-lg"
>
بازگشت به صفحه اصلی
</Link>
</div>
</div>
);
}

View File

@@ -1,6 +0,0 @@
import { useTranslations } from "next-intl";
export default function Home() {
const t = useTranslations("HomePage");
return <h1>{t("title")}</h1>;
}

View File

@@ -0,0 +1,3 @@
export default function DesktopHeader() {
return <></>;
}

View File

@@ -0,0 +1,3 @@
export default function MobileHeader() {
return <></>;
}

View File

@@ -0,0 +1,3 @@
export default function DesktopHome() {
return <></>;
}

View File

@@ -0,0 +1,3 @@
export default function MobileHome() {
return <></>;
}

View File

@@ -114,3 +114,89 @@ body {
.maplibregl-popup-tip { .maplibregl-popup-tip {
display: none !important; display: none !important;
} }
body {
background-color: var(--color-bg);
color: var(--color-text-primary);
font-family: "Ravi", sans-serif;
}
:root {
--color-map-bg: var(--color-surface);
--color-pwa-primary: var(--color-primary-100);
--color-pwa-text: var(--color-text-primary);
--color-navbar-dot: var(--color-gray-400);
}
@theme {
/* =====================
Primary (Purple)
====================== */
--color-primary-100: #7d34b9;
--color-primary-200: #9a5cff;
--color-primary-300: #b38bff;
--color-primary-400: #d1c2ff;
--color-primary-500: #ede9ff;
/* =====================
Background & Surface
====================== */
--color-bg: #ffffff;
--color-surface: #f8f9fb;
--color-card: #ffffff;
--color-border: #e5e7eb;
/* =====================
Text
====================== */
--color-text-primary: #111827;
--color-text-secondary: #6b7280;
--color-text-muted: #9ca3af;
/* =====================
State colors
====================== */
--color-success: #22c55e;
--color-warning: #facc15;
--color-error: #ef4444;
--color-info: #0ea5e9;
/* =====================
Gray scale
====================== */
--color-gray-50: #fcfcfc;
--color-gray-100: #f5f5f5;
--color-gray-200: #f0f0f0;
--color-gray-300: #d9d9d9;
--color-gray-400: #bfbfbf;
--color-gray-500: #8c8c8c;
--color-gray-600: #595959;
--color-gray-700: #454545;
--color-gray-800: #262626;
--color-gray-900: #1f1f1f;
}
[data-theme="dark"] {
--color-bg: #121212;
--color-surface: #181818;
--color-card: #1f1f1f;
--color-border: #2a2a2a;
--color-text-primary: #ffffff;
--color-text-secondary: #d1d5db;
--color-text-muted: #9ca3af;
--color-primary-100: #b38bff;
--color-primary-200: #9a5cff;
--color-primary-300: #7d34b9;
--color-gray-50: #1f1f1f;
--color-gray-100: #262626;
--color-gray-200: #2a2a2a;
--color-gray-300: #404040;
--color-gray-400: #525252;
--color-gray-500: #737373;
--color-gray-600: #a3a3a3;
--color-gray-700: #d4d4d4;
--color-gray-800: #e5e5e5;
--color-gray-900: #fafafa;
}