feat: update UI to glassmorphic design and copper theme

2026-09-08 01:40:00 +03:30
commit 1e68a84879
100 changed files with 15553 additions and 0 deletions
@@ -0,0 +1,140 @@
+import React, { useEffect } from 'react';
+import { BrowserRouter, Route, Routes, useLocation } from 'react-router-dom';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Preloader } from './components/Preloader';
+import { Header } from './components/Header';
+import { Footer } from './components/Footer';
+import { FloatingContact } from './components/FloatingContact';
+import { Home } from './pages/Home';
+import { About } from './pages/About';
+import { ServicesPage } from './pages/ServicesPage';
+import { Projects } from './pages/Projects';
+import { ProjectDetail } from './pages/ProjectDetail';
+import { Investment } from './pages/Investment';
+import { Blog } from './pages/Blog';
+import { ArticleDetail } from './pages/ArticleDetail';
+import { FaqPage } from './pages/FaqPage';
+import { ContactPage } from './pages/ContactPage';
+import { SiteProvider, useSiteData } from './api';
+import { applySeo, seoKeyForPath } from './seo';
+import { AdminProvider, useAdmin } from './admin/AdminContext';
+import { AdminBar } from './admin/AdminBar';
+import { AdminLoginPage } from './admin/AdminLoginPage';
+import { ArticleWritePage } from './admin/ArticleWritePage';
+
+function ScrollToTop() {
+  const { pathname } = useLocation();
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: 'auto' });
+  }, [pathname]);
+  return null;
+}
+
+function AnimatedRoutes() {
+  const location = useLocation();
+  return (
+    <AnimatePresence mode="wait">
+      <motion.main
+        key={location.pathname}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 0.28, ease: [0.23, 1, 0.32, 1] }}>
+
+        <Routes location={location}>
+          <Route path="/admin/login" element={<AdminLoginPage />} />
+          <Route path="/admin/write" element={<ArticleWritePage />} />
+          <Route path="/admin/write/:id" element={<ArticleWritePage />} />
+          <Route path="/" element={<Home />} />
+          <Route path="/about" element={<About />} />
+          <Route path="/services" element={<ServicesPage />} />
+          <Route path="/projects" element={<Projects />} />
+          <Route path="/projects/:slug" element={<ProjectDetail />} />
+          <Route path="/investment" element={<Investment />} />
+          <Route path="/blog" element={<Blog />} />
+          <Route path="/blog/:slug" element={<ArticleDetail />} />
+          <Route path="/faq" element={<FaqPage />} />
+          <Route path="/contact" element={<ContactPage />} />
+          <Route path="*" element={<Home />} />
+        </Routes>
+      </motion.main>
+    </AnimatePresence>);
+
+}
+
+function AppChrome() {
+  const { pathname } = useLocation();
+  const { isAuthenticated } = useAdmin();
+  const { data } = useSiteData();
+  const isAdminPage = pathname.startsWith('/admin');
+
+  // عنوان و توضیح متای هر صفحه از دیتابیس (سئو) — جز صفحه‌های جزئیات که خودشان ست می‌کنند
+  useEffect(() => {
+    if (isAdminPage || !data) return;
+    const key = seoKeyForPath(pathname);
+    if (!key) return;
+    const meta = data.seo_meta?.find((s) => s.page_key === key);
+    const brand = data.brand.name;
+    const navLabel = data.nav.find((n) => n.href === `/${key}`)?.label;
+    applySeo({
+      title: meta?.title || (key === 'home' ? brand : navLabel ? `${navLabel} | ${brand}` : brand),
+      description: meta?.description ?? '',
+      path: pathname,
+    });
+  }, [pathname, data, isAdminPage]);
+
+  return (
+    <>
+      {!isAdminPage && <Header />}
+      <AnimatedRoutes />
+      {!isAdminPage && <Footer />}
+      {!isAdminPage && <FloatingContact />}
+      {isAuthenticated && !isAdminPage && <AdminBar />}
+    </>
+  );
+}
+
+function AppShell() {
+  const { data, error, reload } = useSiteData();
+
+  return (
+    <div dir="rtl" lang="fa" className="min-h-screen w-full overflow-x-hidden bg-ink font-pinar text-ivory">
+      <Preloader />
+      {error ? (
+        <div className="flex min-h-screen flex-col items-center justify-center px-6 text-center">
+          <h1 className="text-2xl font-bold text-ivory">اتصال به سرور برقرار نشد</h1>
+          <p className="mt-4 max-w-md text-sm font-light leading-8 text-ivory/70">
+            محتوای سایت از سرور بارگذاری می‌شود؛ لطفاً اتصال اینترنت یا وضعیت سرور را بررسی کنید.
+          </p>
+          <button
+            type="button"
+            onClick={reload}
+            className="mt-8 bg-copper px-10 py-3 text-sm font-bold text-char transition-transform duration-300 hover:scale-105"
+          >
+            تلاش دوباره
+          </button>
+        </div>
+      ) : data ? (
+        <BrowserRouter>
+          <ScrollToTop />
+          <AppChrome />
+        </BrowserRouter>
+      ) : null}
+    </div>
+  );
+}
+
+export function App() {
+  useEffect(() => {
+    document.documentElement.setAttribute('dir', 'rtl');
+    document.documentElement.setAttribute('lang', 'fa');
+  }, []);
+
+  return (
+    <SiteProvider>
+      <AdminProvider>
+        <AppShell />
+      </AdminProvider>
+    </SiteProvider>
+  );
+}