first commit

2026-06-03 18:31:41 +03:30
commit 01f87cc461
71 changed files with 10802 additions and 0 deletions
--- a/backend/ClientApp/.gitignore
+++ b/backend/ClientApp/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/backend/ClientApp/Dockerfile
+++ b/backend/ClientApp/Dockerfile
@@ -0,0 +1,16 @@
+FROM node:20-alpine AS build
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci
+
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine AS runtime
+COPY --from=build /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
--- a/backend/ClientApp/README.md
+++ b/backend/ClientApp/README.md
@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
--- a/backend/ClientApp/eslint.config.js
+++ b/backend/ClientApp/eslint.config.js
@@ -0,0 +1,22 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+    },
+  },
+])
--- a/backend/ClientApp/index.html
+++ b/backend/ClientApp/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="fa" dir="rtl">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>مسابقه بزرگ غدیر</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/backend/ClientApp/nginx.conf
+++ b/backend/ClientApp/nginx.conf
@@ -0,0 +1,38 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Gzip compression
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript image/svg+xml;
+    gzip_min_length 1000;
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN";
+    add_header X-Content-Type-Options "nosniff";
+    add_header X-XSS-Protection "1; mode=block";
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /api/ {
+        proxy_pass http://backend:8080;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    # Cache static assets
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+        expires 30d;
+        add_header Cache-Control "public, no-transform";
+    }
+}
--- a/backend/ClientApp/package-lock.json
+++ b/backend/ClientApp/package-lock.json
--- a/backend/ClientApp/package.json
+++ b/backend/ClientApp/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@tailwindcss/vite": "^4.3.0",
+    "axios": "^1.17.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.17.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-router-dom": "^7.16.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.3.0",
+    "tslib": "^2.8.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^24.12.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^4.7.0",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.6.0",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.59.2",
+    "vite": "^5.4.21"
+  }
+}
--- a/backend/ClientApp/public/favicon.svg
+++ b/backend/ClientApp/public/favicon.svg
--- a/backend/ClientApp/public/icons.svg
+++ b/backend/ClientApp/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
--- a/backend/ClientApp/src/App.tsx
+++ b/backend/ClientApp/src/App.tsx
@@ -0,0 +1,47 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { Toaster } from 'sonner';
+import { UserProvider, useUser } from '@/context/UserContext';
+import LandingPage from '@/pages/LandingPage';
+import DashboardPage from '@/pages/DashboardPage';
+import AdminPage from '@/pages/AdminPage';
+
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const { user } = useUser();
+  if (!user.userId) {
+    return <Navigate to="/" replace />;
+  }
+  return <>{children}</>;
+}
+
+function App() {
+  return (
+    <BrowserRouter>
+      <UserProvider>
+        <Routes>
+          <Route path="/" element={<LandingPage />} />
+          <Route
+            path="/dashboard"
+            element={
+              <ProtectedRoute>
+                <DashboardPage />
+              </ProtectedRoute>
+            }
+          />
+          <Route path="/admin" element={<AdminPage />} />
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+        <Toaster
+          position="top-center"
+          toastOptions={{
+            style: {
+              direction: 'rtl',
+              fontFamily: 'inherit',
+            },
+          }}
+        />
+      </UserProvider>
+    </BrowserRouter>
+  );
+}
+
+export default App;
--- a/backend/ClientApp/src/assets/hero.png
+++ b/backend/ClientApp/src/assets/hero.png
--- a/backend/ClientApp/src/assets/react.svg
+++ b/backend/ClientApp/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/backend/ClientApp/src/assets/vite.svg
+++ b/backend/ClientApp/src/assets/vite.svg
--- a/backend/ClientApp/src/components/ui/button.tsx
+++ b/backend/ClientApp/src/components/ui/button.tsx
@@ -0,0 +1,51 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-gradient-primary text-white hover:opacity-90 shadow-md hover:shadow-lg",
+        secondary: "bg-gradient-secondary text-white hover:opacity-90 shadow-md hover:shadow-lg",
+        outline: "border-2 border-primary text-primary hover:bg-primary hover:text-white",
+        ghost: "text-primary hover:bg-primary/10",
+        destructive: "bg-error text-white hover:bg-error/90",
+      },
+      size: {
+        default: "h-10 px-5 py-2",
+        sm: "h-9 rounded-md px-3 text-xs",
+        lg: "h-12 rounded-lg px-8 text-base",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
--- a/backend/ClientApp/src/components/ui/card.tsx
+++ b/backend/ClientApp/src/components/ui/card.tsx
@@ -0,0 +1,69 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "rounded-xl border border-border bg-surface shadow-card transition-all duration-200 hover:shadow-card-hover",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      {...props}
+    />
+  )
+)
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn("text-xl font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  )
+)
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p
+      ref={ref}
+      className={cn("text-sm text-text-light", className)}
+      {...props}
+    />
+  )
+)
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  )
+)
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("flex items-center p-6 pt-0", className)}
+      {...props}
+    />
+  )
+)
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
--- a/backend/ClientApp/src/components/ui/checkbox.tsx
+++ b/backend/ClientApp/src/components/ui/checkbox.tsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-5 w-5 shrink-0 rounded-md border-2 border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-white",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-3.5 w-3.5" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
--- a/backend/ClientApp/src/components/ui/dialog.tsx
+++ b/backend/ClientApp/src/components/ui/dialog.tsx
@@ -0,0 +1,116 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+const DialogTrigger = DialogPrimitive.Trigger
+const DialogPortal = DialogPrimitive.Portal
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-surface p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-xl",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute left-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-right",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-reverse sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-text-light", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
--- a/backend/ClientApp/src/components/ui/input.tsx
+++ b/backend/ClientApp/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-text-light focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
--- a/backend/ClientApp/src/components/ui/label.tsx
+++ b/backend/ClientApp/src/components/ui/label.tsx
@@ -0,0 +1,20 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cn } from "@/lib/utils"
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className
+    )}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
--- a/backend/ClientApp/src/components/ui/radio-group.tsx
+++ b/backend/ClientApp/src/components/ui/radio-group.tsx
@@ -0,0 +1,41 @@
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-5 w-5 rounded-full border-2 border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }
--- a/backend/ClientApp/src/components/ui/table.tsx
+++ b/backend/ClientApp/src/components/ui/table.tsx
@@ -0,0 +1,105 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table
+        ref={ref}
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+)
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <thead ref={ref} className={cn("[&_tr]:border-b border-border", className)} {...props} />
+  )
+)
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody
+      ref={ref}
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+)
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tfoot
+      ref={ref}
+      className={cn("border-t border-border bg-secondary/10 font-medium", className)}
+      {...props}
+    />
+  )
+)
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn(
+        "border-b border-border transition-colors hover:bg-secondary/5 data-[state=selected]:bg-secondary/10",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={cn(
+        "h-12 px-4 text-right align-middle font-medium text-text-light [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td
+      ref={ref}
+      className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+      {...props}
+    />
+  )
+)
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => (
+    <caption
+      ref={ref}
+      className={cn("mt-4 text-sm text-text-light", className)}
+      {...props}
+    />
+  )
+)
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
--- a/backend/ClientApp/src/components/ui/tabs.tsx
+++ b/backend/ClientApp/src/components/ui/tabs.tsx
@@ -0,0 +1,52 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-12 items-center justify-center rounded-lg bg-secondary/10 p-1 text-text-light",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-surface data-[state=active]:text-primary data-[state=active]:shadow-sm cursor-pointer",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-4 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
--- a/backend/ClientApp/src/context/UserContext.tsx
+++ b/backend/ClientApp/src/context/UserContext.tsx
@@ -0,0 +1,53 @@
+import { createContext, useContext, useState, type ReactNode } from 'react';
+
+interface UserState {
+  userId: number | null;
+  fullName: string;
+  contact: string;
+  isQuizCompleted: boolean;
+  khatmSelections: number[];
+  totalScore: number;
+}
+
+interface UserContextType {
+  user: UserState;
+  setUser: (user: Partial<UserState>) => void;
+  resetUser: () => void;
+}
+
+const initialState: UserState = {
+  userId: null,
+  fullName: '',
+  contact: '',
+  isQuizCompleted: false,
+  khatmSelections: [],
+  totalScore: 0,
+};
+
+const UserContext = createContext<UserContextType | undefined>(undefined);
+
+export function UserProvider({ children }: { children: ReactNode }) {
+  const [user, setUserState] = useState<UserState>(initialState);
+
+  const setUser = (partial: Partial<UserState>) => {
+    setUserState(prev => ({ ...prev, ...partial }));
+  };
+
+  const resetUser = () => {
+    setUserState(initialState);
+  };
+
+  return (
+    <UserContext.Provider value={{ user, setUser, resetUser }}>
+      {children}
+    </UserContext.Provider>
+  );
+}
+
+export function useUser() {
+  const context = useContext(UserContext);
+  if (!context) {
+    throw new Error('useUser must be used within a UserProvider');
+  }
+  return context;
+}
--- a/backend/ClientApp/src/index.css
+++ b/backend/ClientApp/src/index.css
@@ -0,0 +1,78 @@
+@import "tailwindcss";
+
+@theme {
+  --color-primary: #b8860b;
+  --color-primary-light: #daa520;
+  --color-primary-dark: #8b6914;
+  --color-secondary: #2d6a4f;
+  --color-secondary-light: #40916c;
+  --color-secondary-dark: #1b4332;
+  --color-accent: #f59e0b;
+  --color-background: #fefcf3;
+  --color-surface: #ffffff;
+  --color-text: #1a1a2e;
+  --color-text-light: #6b7280;
+  --color-border: #e5e7eb;
+  --color-error: #dc2626;
+  --color-success: #16a34a;
+}
+
+@layer base {
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  body {
+    font-family: 'Vazirmatn', 'Tahoma', system-ui, sans-serif;
+    background-color: var(--color-background);
+    color: var(--color-text);
+    direction: rtl;
+    min-height: 100vh;
+  }
+
+  #root {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+@layer utilities {
+  .text-gradient {
+    background: linear-gradient(135deg, #b8860b, #daa520, #8b6914);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .bg-gradient-primary {
+    background: linear-gradient(135deg, #b8860b, #daa520);
+  }
+
+  .bg-gradient-secondary {
+    background: linear-gradient(135deg, #2d6a4f, #40916c);
+  }
+
+  .shadow-card {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  }
+
+  .shadow-card-hover {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  }
+
+  .animate-bounce-gentle {
+    animation: bounce-gentle 2s ease-in-out infinite;
+  }
+}
+
+@keyframes bounce-gentle {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+}
--- a/backend/ClientApp/src/lib/api.ts
+++ b/backend/ClientApp/src/lib/api.ts
@@ -0,0 +1,123 @@
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: '/api',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+export interface SiteConfig {
+  siteTitle: string;
+  subtitle: string;
+  channels: { name: string; url: string }[];
+  shortText: string;
+  quizParticipationPoints: number;
+  quizCorrectAnswerPoints: number;
+}
+
+export interface RegisterResponse {
+  userId: number;
+  trackingCode: string;
+}
+
+export interface LoginResponse {
+  userId: number;
+  fullName: string;
+  contact: string;
+  isQuizCompleted: boolean;
+  khatmSelections: number[];
+}
+
+export interface Question {
+  id: number;
+  questionText: string;
+  options: string[];
+}
+
+export interface QuizSubmitResponse {
+  participationPoints: number;
+  correctCount: number;
+  totalQuizPoints: number;
+  totalScore: number;
+}
+
+export interface UserQuizResponse {
+  questions: UserQuestion[];
+  participationPoints: number;
+  correctCount: number;
+  totalQuizPoints: number;
+}
+
+export interface UserQuestion {
+  id: number;
+  questionText: string;
+  options: string[];
+  selectedOption: number;
+  isCorrect: boolean;
+}
+
+export interface KhatmItem {
+  id: number;
+  title: string;
+  url?: string;
+  points: number;
+}
+
+export interface KhatmSaveResponse {
+  success: boolean;
+  totalScore: number;
+}
+
+export interface UserScore {
+  totalScore: number;
+}
+
+export interface AdminReportItem {
+  userId: number;
+  fullName: string;
+  contact: string;
+  trackingCode: string;
+  hasTakenQuiz: boolean;
+  participationPoints: number;
+  correctCount: number;
+  totalQuizPoints: number;
+  khatmTitles: string;
+  totalScore: number;
+}
+
+// Config
+export const getConfig = () => api.get<SiteConfig>('/config').then(r => r.data);
+
+// User
+export const registerUser = (fullName: string, contact: string) =>
+  api.post<RegisterResponse>('/user/register', { fullName, contact }).then(r => r.data);
+
+export const loginUser = (trackingCode: string) =>
+  api.post<LoginResponse>('/user/login', { trackingCode }).then(r => r.data);
+
+export const getUserScore = (userId: number) =>
+  api.get<UserScore>(`/user/${userId}/score`).then(r => r.data);
+
+// Quiz
+export const getQuestions = () =>
+  api.get<Question[]>('/quiz/questions').then(r => r.data);
+
+export const submitQuiz = (userId: number, answers: { questionId: number; selectedOption: number }[]) =>
+  api.post<QuizSubmitResponse>('/quiz/submit', { userId, answers }).then(r => r.data);
+
+export const getUserQuiz = (userId: number) =>
+  api.get<UserQuizResponse>(`/quiz/user/${userId}`).then(r => r.data);
+
+// Khatm
+export const getKhatmItems = () =>
+  api.get<KhatmItem[]>('/khatm/items').then(r => r.data);
+
+export const saveKhatmSelections = (userId: number, selections: { khatmItemId: number; isSelected: boolean }[]) =>
+  api.post<KhatmSaveResponse>('/khatm/save', { userId, selections }).then(r => r.data);
+
+// Admin
+export const getAdminReport = (password: string) =>
+  api.get<AdminReportItem[]>('/admin/report', { params: { password } }).then(r => r.data);
+
+export default api;
--- a/backend/ClientApp/src/lib/utils.ts
+++ b/backend/ClientApp/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/backend/ClientApp/src/main.tsx
+++ b/backend/ClientApp/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/backend/ClientApp/src/pages/AdminPage.tsx
+++ b/backend/ClientApp/src/pages/AdminPage.tsx
@@ -0,0 +1,211 @@
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { Shield, Eye, EyeOff, Download } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { getAdminReport, type AdminReportItem } from '@/lib/api';
+
+export default function AdminPage() {
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [authenticated, setAuthenticated] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [report, setReport] = useState<AdminReportItem[]>([]);
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!password.trim()) {
+      toast.error('لطفاً رمز عبور را وارد کنید.');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const data = await getAdminReport(password);
+      setReport(data);
+      setAuthenticated(true);
+      toast.success('ورود موفقیت‌آمیز');
+    } catch (err: any) {
+      if (err.response?.status === 403) {
+        toast.error('رمز عبور اشتباه است.');
+      } else {
+        toast.error('خطا در ارتباط با سرور');
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const exportCSV = () => {
+    const headers = ['ردیف', 'نام', 'شناسه', 'کد رهگیری', 'شرکت در مسابقه', 'امتیاز شرکت', 'پاسخ صحیح', 'امتیاز مسابقه', 'ختم‌ها', 'مجموع امتیاز'];
+    const rows = report.map((item, index) => [
+      index + 1,
+      item.fullName,
+      item.contact,
+      item.trackingCode,
+      item.hasTakenQuiz ? 'بله' : 'خیر',
+      item.participationPoints,
+      item.correctCount,
+      item.totalQuizPoints,
+      item.khatmTitles,
+      item.totalScore,
+    ]);
+
+    const csvContent = [headers.join(','), ...rows.map(r => r.join(','))].join('\n');
+    const BOM = '\uFEFF';
+    const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'گزارش-مسابقه-غدیر.csv';
+    a.click();
+    URL.revokeObjectURL(url);
+    toast.success('گزارش با موفقیت دانلود شد.');
+  };
+
+  if (!authenticated) {
+    return (
+      <div className="min-h-screen bg-gradient-to-b from-background via-primary/5 to-background flex items-center justify-center p-4">
+        <Card className="w-full max-w-md border-primary/20">
+          <CardHeader className="text-center">
+            <div className="flex justify-center mb-4">
+              <div className="p-3 rounded-full bg-primary/10">
+                <Shield className="h-8 w-8 text-primary" />
+              </div>
+            </div>
+            <CardTitle className="text-2xl text-gradient">پنل مدیریت</CardTitle>
+            <CardDescription>
+              برای دسترسی به گزارش کاربران، رمز عبور را وارد کنید
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleLogin} className="space-y-4">
+              <div className="relative">
+                <Input
+                  type={showPassword ? 'text' : 'password'}
+                  placeholder="رمز عبور"
+                  value={password}
+                  onChange={e => setPassword(e.target.value)}
+                  className="pl-10 text-center"
+                  autoFocus
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute left-3 top-1/2 -translate-y-1/2 text-text-light hover:text-text transition-colors"
+                >
+                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                </button>
+              </div>
+              <Button type="submit" className="w-full" disabled={loading}>
+                {loading ? 'در حال بررسی...' : 'ورود به پنل مدیریت'}
+              </Button>
+            </form>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-background via-primary/5 to-background">
+      <header className="border-b border-border/50 bg-surface/80 backdrop-blur-sm sticky top-0 z-40">
+        <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <Shield className="h-6 w-6 text-primary" />
+            <span className="font-semibold text-lg text-gradient">پنل مدیریت</span>
+          </div>
+          <div className="flex items-center gap-3">
+            <span className="text-sm text-text-light">
+              تعداد کاربران: {report.length}
+            </span>
+            <Button variant="outline" size="sm" onClick={exportCSV} className="gap-2">
+              <Download className="h-4 w-4" />
+              خروجی CSV
+            </Button>
+            <Button variant="ghost" size="sm" onClick={() => setAuthenticated(false)}>
+              خروج
+            </Button>
+          </div>
+        </div>
+      </header>
+
+      <main className="max-w-7xl mx-auto px-4 py-8">
+        <Card className="border-primary/20">
+          <CardHeader>
+            <CardTitle className="text-gradient">گزارش کامل کاربران</CardTitle>
+            <CardDescription>
+              اطلاعات تمام کاربران به همراه وضعیت مسابقه و ختم‌ها
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>ردیف</TableHead>
+                    <TableHead>نام</TableHead>
+                    <TableHead>شناسه</TableHead>
+                    <TableHead>کد رهگیری</TableHead>
+                    <TableHead>مسابقه</TableHead>
+                    <TableHead>امتیاز شرکت</TableHead>
+                    <TableHead>پاسخ صحیح</TableHead>
+                    <TableHead>امتیاز مسابقه</TableHead>
+                    <TableHead>ختم‌ها</TableHead>
+                    <TableHead>مجموع امتیاز</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {report.map((item, index) => (
+                    <TableRow key={item.userId}>
+                      <TableCell className="font-medium">{index + 1}</TableCell>
+                      <TableCell>{item.fullName}</TableCell>
+                      <TableCell dir="ltr" className="text-left">{item.contact}</TableCell>
+                      <TableCell>
+                        <span className="font-mono text-xs bg-primary/5 px-2 py-1 rounded" dir="ltr">
+                          {item.trackingCode}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${
+                          item.hasTakenQuiz
+                            ? 'bg-success/10 text-success'
+                            : 'bg-error/10 text-error'
+                        }`}>
+                          {item.hasTakenQuiz ? 'شرکت کرده' : 'شرکت نکرده'}
+                        </span>
+                      </TableCell>
+                      <TableCell>{item.participationPoints}</TableCell>
+                      <TableCell>{item.correctCount}</TableCell>
+                      <TableCell className="font-medium">{item.totalQuizPoints}</TableCell>
+                      <TableCell className="max-w-[200px] truncate" title={item.khatmTitles}>
+                        {item.khatmTitles || '—'}
+                      </TableCell>
+                      <TableCell className="font-bold text-primary">{item.totalScore}</TableCell>
+                    </TableRow>
+                  ))}
+                  {report.length === 0 && (
+                    <TableRow>
+                      <TableCell colSpan={10} className="text-center py-8 text-text-light">
+                        هیچ کاربری یافت نشد.
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </CardContent>
+        </Card>
+      </main>
+    </div>
+  );
+}
--- a/backend/ClientApp/src/pages/DashboardPage.tsx
+++ b/backend/ClientApp/src/pages/DashboardPage.tsx
@@ -0,0 +1,481 @@
+import { useState, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+import { Award, BookOpen, CheckCircle, ClipboardList, ExternalLink, LogOut, Trophy, Sparkles } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import {
+  getQuestions,
+  submitQuiz,
+  getUserQuiz,
+  getKhatmItems,
+  saveKhatmSelections,
+  getUserScore,
+  type Question,
+  type UserQuizResponse,
+  type KhatmItem,
+} from '@/lib/api';
+import { useUser } from '@/context/UserContext';
+
+export default function DashboardPage() {
+  const navigate = useNavigate();
+  const { user, setUser, resetUser } = useUser();
+
+  // Quiz state
+  const [questions, setQuestions] = useState<Question[]>([]);
+  const [userQuiz, setUserQuiz] = useState<UserQuizResponse | null>(null);
+  const [answers, setAnswers] = useState<Record<number, number>>({});
+  const [quizLoading, setQuizLoading] = useState(false);
+  const [showQuizDialog, setShowQuizDialog] = useState(false);
+  const [quizResult, setQuizResult] = useState<{
+    participationPoints: number;
+    correctCount: number;
+    totalQuizPoints: number;
+  } | null>(null);
+  const [submittingQuiz, setSubmittingQuiz] = useState(false);
+
+  // Khatm state
+  const [khatmItems, setKhatmItems] = useState<KhatmItem[]>([]);
+  const [khatmSelections, setKhatmSelections] = useState<Record<number, boolean>>({});
+  const [khatmLoading, setKhatmLoading] = useState(false);
+  const [savingKhatm, setSavingKhatm] = useState(false);
+
+  // Score
+  const [totalScore, setTotalScore] = useState(0);
+
+  // Section refs for scroll navigation
+  const quizSectionRef = useRef<HTMLDivElement>(null);
+  const khatmSectionRef = useRef<HTMLDivElement>(null);
+
+  const scrollToSection = (ref: React.RefObject<HTMLDivElement | null>) => {
+    if (ref.current) {
+      const headerOffset = 140; // account for sticky header + nav
+      const elementPosition = ref.current.getBoundingClientRect().top;
+      const offsetPosition = elementPosition + window.scrollY - headerOffset;
+      window.scrollTo({ top: offsetPosition, behavior: 'smooth' });
+    }
+  };
+
+  useEffect(() => {
+    if (!user.userId) {
+      navigate('/');
+      return;
+    }
+
+    loadDashboard();
+  }, [user.userId]);
+
+  const loadDashboard = async () => {
+    setQuizLoading(true);
+    setKhatmLoading(true);
+
+    try {
+      // Load score
+      const scoreData = await getUserScore(user.userId!);
+      setTotalScore(scoreData.totalScore);
+      setUser({ totalScore: scoreData.totalScore });
+
+      // Load khatm items
+      const items = await getKhatmItems();
+      setKhatmItems(items);
+
+      // Initialize selections from user context
+      const selections: Record<number, boolean> = {};
+      items.forEach(item => {
+        selections[item.id] = user.khatmSelections.includes(item.id);
+      });
+      setKhatmSelections(selections);
+
+      // Load quiz data
+      if (user.isQuizCompleted) {
+        const quizData = await getUserQuiz(user.userId!);
+        setUserQuiz(quizData);
+      } else {
+        const qs = await getQuestions();
+        setQuestions(qs);
+      }
+    } catch (err: any) {
+      toast.error('خطا در بارگذاری اطلاعات');
+    } finally {
+      setQuizLoading(false);
+      setKhatmLoading(false);
+    }
+  };
+
+  const handleStartQuiz = () => {
+    setShowQuizDialog(true);
+  };
+
+  const handleSubmitQuiz = async () => {
+    const answeredCount = Object.keys(answers).length;
+    if (answeredCount < questions.length) {
+      toast.error(`لطفاً به تمام ${questions.length} سوال پاسخ دهید.`);
+      return;
+    }
+
+    setSubmittingQuiz(true);
+    try {
+      const result = await submitQuiz(
+        user.userId!,
+        Object.entries(answers).map(([questionId, selectedOption]) => ({
+          questionId: Number(questionId),
+          selectedOption,
+        }))
+      );
+
+      setQuizResult({
+        participationPoints: result.participationPoints,
+        correctCount: result.correctCount,
+        totalQuizPoints: result.totalQuizPoints,
+      });
+      setTotalScore(result.totalScore);
+      setUser({ isQuizCompleted: true, totalScore: result.totalScore });
+
+      // Load the completed quiz
+      const quizData = await getUserQuiz(user.userId!);
+      setUserQuiz(quizData);
+    } catch (err: any) {
+      toast.error(err.response?.data?.message || 'خطا در ثبت پاسخ‌ها');
+    } finally {
+      setSubmittingQuiz(false);
+    }
+  };
+
+  const handleSaveKhatm = async () => {
+    setSavingKhatm(true);
+    try {
+      const selections = Object.entries(khatmSelections).map(([khatmItemId, isSelected]) => ({
+        khatmItemId: Number(khatmItemId),
+        isSelected,
+      }));
+
+      const result = await saveKhatmSelections(user.userId!, selections);
+      setTotalScore(result.totalScore);
+      setUser({ totalScore: result.totalScore, khatmSelections: Object.entries(khatmSelections).filter(([, v]) => v).map(([k]) => Number(k)) });
+      toast.success('تغییرات با موفقیت ذخیره شد.');
+    } catch (err: any) {
+      toast.error('خطا در ذخیره تغییرات');
+    } finally {
+      setSavingKhatm(false);
+    }
+  };
+
+  const handleLogout = () => {
+    resetUser();
+    navigate('/');
+  };
+
+  if (!user.userId) return null;
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-background via-primary/5 to-background">
+      {/* Header */}
+      <header className="border-b border-border/50 bg-surface/80 backdrop-blur-sm sticky top-0 z-40">
+        <div className="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <Trophy className="h-6 w-6 text-primary" />
+            <span className="font-semibold text-lg text-gradient">داشبورد</span>
+          </div>
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2 bg-primary/10 rounded-full px-4 py-1.5">
+              <Award className="h-5 w-5 text-primary" />
+              <span className="font-bold text-primary">{totalScore}</span>
+              <span className="text-xs text-text-light">امتیاز</span>
+            </div>
+            <Button variant="ghost" size="sm" onClick={handleLogout} className="gap-2">
+              <LogOut className="h-4 w-4" />
+              خروج
+            </Button>
+          </div>
+        </div>
+      </header>
+
+      {/* Section Navigation */}
+      <nav className="sticky top-16 z-30 bg-surface/90 backdrop-blur-sm border-b border-border/50">
+        <div className="max-w-6xl mx-auto px-4 h-14 flex items-center justify-center gap-3">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => scrollToSection(quizSectionRef)}
+            className="gap-2.5 text-sm font-medium rounded-xl border-primary/20 bg-primary/5 hover:bg-primary/10 hover:border-primary/40 transition-all duration-200 shadow-sm px-5 py-2.5"
+          >
+            <BookOpen className="h-4 w-4 text-primary" />
+            <span className="text-primary">مسابقه</span>
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => scrollToSection(khatmSectionRef)}
+            className="gap-2.5 text-sm font-medium rounded-xl border-secondary/20 bg-secondary/5 hover:bg-secondary/10 hover:border-secondary/40 transition-all duration-200 shadow-sm px-5 py-2.5"
+          >
+            <ClipboardList className="h-4 w-4 text-secondary" />
+            <span className="text-secondary">ختم</span>
+          </Button>
+        </div>
+      </nav>
+
+      <main className="max-w-6xl mx-auto px-4 py-8">
+        {/* Welcome */}
+        <div className="mb-8">
+          <h2 className="text-2xl font-bold text-gradient mb-1">
+            {user.fullName} خوش آمدی،
+          </h2>
+          <p className="text-text-light">امتیاز کل شما: {totalScore}</p>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Quiz Card */}
+          <div ref={quizSectionRef}>
+            <Card className="border-primary/20 scroll-mt-36">
+            <CardHeader>
+              <div className="flex items-center gap-3">
+                <div className="p-2 rounded-lg bg-primary/10">
+                  <BookOpen className="h-6 w-6 text-primary" />
+                </div>
+                <div>
+                  <CardTitle>مسابقه</CardTitle>
+                  <CardDescription>
+                    {user.isQuizCompleted
+                      ? 'شما قبلاً در مسابقه شرکت کرده‌اید'
+                      : 'به سوالات چهارگزینه‌ای پاسخ دهید'}
+                  </CardDescription>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent>
+              {quizLoading ? (
+                <div className="animate-pulse h-20 bg-secondary/10 rounded-lg" />
+              ) : user.isQuizCompleted && userQuiz ? (
+                <div className="space-y-4">
+                  <div className="grid grid-cols-3 gap-3 mb-4">
+                    <div className="bg-primary/5 rounded-lg p-3 text-center">
+                      <p className="text-xs text-text-light">امتیاز شرکت</p>
+                      <p className="text-lg font-bold text-primary">{userQuiz.participationPoints}</p>
+                    </div>
+                    <div className="bg-success/5 rounded-lg p-3 text-center">
+                      <p className="text-xs text-text-light">پاسخ صحیح</p>
+                      <p className="text-lg font-bold text-success">{userQuiz.correctCount}</p>
+                    </div>
+                    <div className="bg-secondary/5 rounded-lg p-3 text-center">
+                      <p className="text-xs text-text-light">امتیاز کل</p>
+                      <p className="text-lg font-bold text-secondary">{userQuiz.totalQuizPoints}</p>
+                    </div>
+                  </div>
+
+                  <div className="space-y-4">
+                    {userQuiz.questions.map((q, index) => (
+                      <div key={q.id} className="border border-border rounded-lg p-4">
+                        <p className="font-medium mb-3">
+                          {index + 1}. {q.questionText}
+                        </p>
+                        <div className="space-y-2">
+                          {q.options.map((opt, optIndex) => (
+                            <div
+                              key={optIndex}
+                              className={`flex items-center gap-2 p-2 rounded-md ${
+                                q.selectedOption === optIndex + 1
+                                  ? q.isCorrect
+                                    ? 'bg-success/10 text-success'
+                                    : 'bg-error/10 text-error'
+                                  : ''
+                              }`}
+                            >
+                              <span className="text-sm flex-1">{opt}</span>
+                              <div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0 ${
+                                q.selectedOption === optIndex + 1
+                                  ? q.isCorrect
+                                    ? 'border-success'
+                                    : 'border-error'
+                                  : 'border-border'
+                              }`}>
+                                {q.selectedOption === optIndex + 1 && (
+                                  <div className={`w-2.5 h-2.5 rounded-full ${
+                                    q.isCorrect ? 'bg-success' : 'bg-error'
+                                  }`} />
+                                )}
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ) : (
+                <div className="text-center py-6">
+                  <Sparkles className="h-12 w-12 text-primary/40 mx-auto mb-3" />
+                  <p className="text-text-light mb-4">
+                    آماده شرکت در مسابقه هستید؟ {questions.length} سوال چهارگزینه‌ای منتظر شماست.
+                  </p>
+                  <Button onClick={handleStartQuiz} className="gap-2">
+                    <CheckCircle className="h-4 w-4" />
+                    شروع مسابقه
+                  </Button>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          </div>
+
+          {/* Khatm Card */}
+          <div ref={khatmSectionRef}>
+            <Card className="border-secondary/20 scroll-mt-36">
+            <CardHeader>
+              <div className="flex items-center gap-3">
+                <div className="p-2 rounded-lg bg-secondary/10">
+                  <ClipboardList className="h-6 w-6 text-secondary" />
+                </div>
+                <div>
+                  <CardTitle>ثبت ختم‌ها</CardTitle>
+                  <CardDescription>
+                    ختم‌های مورد نظر خود را انتخاب کنید
+                  </CardDescription>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent>
+              {khatmLoading ? (
+                <div className="animate-pulse space-y-3">
+                  {[1, 2, 3].map(i => (
+                    <div key={i} className="h-12 bg-secondary/10 rounded-lg" />
+                  ))}
+                </div>
+              ) : (
+                <div className="space-y-3">
+                  {khatmItems.map(item => (
+                    <div
+                      key={item.id}
+                      className={`flex items-center justify-between p-3 rounded-lg border transition-all duration-200 ${
+                        khatmSelections[item.id]
+                          ? 'border-secondary/50 bg-secondary/5'
+                          : 'border-border hover:border-secondary/30'
+                      }`}
+                    >
+                      <div className="flex items-center gap-3">
+                        <Checkbox
+                          id={`khatm-${item.id}`}
+                          checked={khatmSelections[item.id] || false}
+                          onCheckedChange={(checked) => {
+                            setKhatmSelections(prev => ({
+                              ...prev,
+                              [item.id]: checked === true,
+                            }));
+                          }}
+                        />
+                        <Label htmlFor={`khatm-${item.id}`} className="cursor-pointer text-sm font-medium">
+                          {item.title}
+                        </Label>
+                        {item.url && (
+                          <a
+                            href={item.url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-text-light hover:text-primary transition-colors"
+                          >
+                            <ExternalLink className="h-4 w-4" />
+                          </a>
+                        )}
+                      </div>
+                      <span className="text-xs bg-secondary/10 text-secondary px-2 py-1 rounded-full font-medium">
+                        {item.points} امتیاز
+                      </span>
+                    </div>
+                  ))}
+                  <Button
+                    onClick={handleSaveKhatm}
+                    variant="secondary"
+                    className="w-full mt-4"
+                    disabled={savingKhatm}
+                  >
+                    {savingKhatm ? 'در حال ذخیره...' : 'ثبت تغییرات'}
+                  </Button>
+                </div>
+              )}
+            </CardContent>
+            </Card>
+          </div>
+        </div>
+      </main>
+
+      {/* Quiz Dialog */}
+      <Dialog open={showQuizDialog} onOpenChange={(open) => {
+        if (!open && !quizResult) setShowQuizDialog(false);
+      }}>
+        <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
+          {quizResult ? (
+            <>
+              <DialogHeader>
+                <DialogTitle className="text-center text-2xl text-gradient">نتیجه مسابقه</DialogTitle>
+                <DialogDescription className="text-center">
+                  پاسخ‌های شما با موفقیت ثبت شد
+                </DialogDescription>
+              </DialogHeader>
+              <div className="grid grid-cols-3 gap-4 py-4">
+                <div className="bg-primary/5 rounded-xl p-4 text-center">
+                  <p className="text-xs text-text-light mb-1">امتیاز شرکت</p>
+                  <p className="text-2xl font-bold text-primary">{quizResult.participationPoints}</p>
+                </div>
+                <div className="bg-success/5 rounded-xl p-4 text-center">
+                  <p className="text-xs text-text-light mb-1">پاسخ‌های صحیح</p>
+                  <p className="text-2xl font-bold text-success">{quizResult.correctCount}</p>
+                </div>
+                <div className="bg-secondary/5 rounded-xl p-4 text-center">
+                  <p className="text-xs text-text-light mb-1">امتیاز مسابقه</p>
+                  <p className="text-2xl font-bold text-secondary">{quizResult.totalQuizPoints}</p>
+                </div>
+              </div>
+              <Button onClick={() => { setShowQuizDialog(false); setQuizResult(null); }} className="w-full">
+                بازگشت به داشبورد
+              </Button>
+            </>
+          ) : (
+            <>
+              <DialogHeader>
+                <DialogTitle className="text-xl text-gradient">سوالات مسابقه</DialogTitle>
+                <DialogDescription>
+                  به تمام سوالات پاسخ دهید و سپس دکمه ثبت را بزنید
+                </DialogDescription>
+              </DialogHeader>
+              <div className="space-y-6 py-4">
+                {questions.map((q, index) => (
+                  <div key={q.id} className="border border-border rounded-lg p-4">
+                    <p className="font-medium mb-3">
+                      {index + 1}. {q.questionText}
+                    </p>
+                    <RadioGroup
+                      value={String(answers[q.id] || '')}
+                      onValueChange={(value) => {
+                        setAnswers(prev => ({ ...prev, [q.id]: Number(value) }));
+                      }}
+                    >
+                      {q.options.map((opt, optIndex) => (
+                        <div key={optIndex} className="flex items-center gap-2 p-2 rounded-md hover:bg-secondary/5">
+                          <Label htmlFor={`q${q.id}-o${optIndex}`} className="cursor-pointer text-sm flex-1 order-1">
+                            {opt}
+                          </Label>
+                          <RadioGroupItem value={String(optIndex + 1)} id={`q${q.id}-o${optIndex}`} className="order-2" />
+                        </div>
+                      ))}
+                    </RadioGroup>
+                  </div>
+                ))}
+              </div>
+              <Button
+                onClick={handleSubmitQuiz}
+                className="w-full"
+                disabled={submittingQuiz}
+              >
+                {submittingQuiz ? 'در حال ثبت...' : 'ثبت پاسخ‌ها'}
+              </Button>
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
--- a/backend/ClientApp/src/pages/LandingPage.tsx
+++ b/backend/ClientApp/src/pages/LandingPage.tsx
@@ -0,0 +1,298 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Copy, Check, UserPlus, LogIn, ExternalLink, Award, Gamepad2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { getConfig, registerUser, loginUser, type SiteConfig } from '@/lib/api';
+import { useUser } from '@/context/UserContext';
+
+export default function LandingPage() {
+  const navigate = useNavigate();
+  const { setUser } = useUser();
+  const [config, setConfig] = useState<SiteConfig | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [showAuthDialog, setShowAuthDialog] = useState(false);
+
+  // Register form
+  const [regName, setRegName] = useState('');
+  const [regContact, setRegContact] = useState('');
+  const [regSubmitting, setRegSubmitting] = useState(false);
+
+  // Login form
+  const [loginCode, setLoginCode] = useState('');
+  const [loginSubmitting, setLoginSubmitting] = useState(false);
+
+  // Tracking code dialog
+  const [showTrackingDialog, setShowTrackingDialog] = useState(false);
+  const [trackingCode, setTrackingCode] = useState('');
+  const [copied, setCopied] = useState(false);
+
+  // Active tab
+  const [activeTab, setActiveTab] = useState('register');
+
+  useEffect(() => {
+    getConfig()
+      .then(setConfig)
+      .catch(() => toast.error('خطا در دریافت اطلاعات سایت'))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const handleRegister = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!regName.trim() || !regContact.trim()) {
+      toast.error('لطفاً نام و شناسه خود را وارد کنید.');
+      return;
+    }
+    if (regContact.trim().length < 5) {
+      toast.error('شناسه باید حداقل ۵ کاراکتر باشد.');
+      return;
+    }
+
+    setRegSubmitting(true);
+    try {
+      const result = await registerUser(regName.trim(), regContact.trim());
+      setTrackingCode(result.trackingCode);
+      setShowTrackingDialog(true);
+      setUser({ userId: result.userId, fullName: regName.trim(), contact: regContact.trim() });
+    } catch (err: any) {
+      if (err.response?.status === 409) {
+        toast.error('این شناسه قبلاً ثبت شده است. لطفاً با کد رهگیری وارد شوید.');
+        setActiveTab('login');
+      } else {
+        toast.error(err.response?.data?.message || 'خطا در ثبت‌نام');
+      }
+    } finally {
+      setRegSubmitting(false);
+    }
+  };
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!loginCode.trim()) {
+      toast.error('لطفاً کد رهگیری را وارد کنید.');
+      return;
+    }
+
+    setLoginSubmitting(true);
+    try {
+      const result = await loginUser(loginCode.trim());
+      setUser({
+        userId: result.userId,
+        fullName: result.fullName,
+        contact: result.contact,
+        isQuizCompleted: result.isQuizCompleted,
+        khatmSelections: result.khatmSelections,
+      });
+      navigate('/dashboard');
+    } catch (err: any) {
+      if (err.response?.status === 404) {
+        toast.error('کد رهگیری نامعتبر است.');
+      } else {
+        toast.error('خطا در ورود');
+      }
+    } finally {
+      setLoginSubmitting(false);
+    }
+  };
+
+  const copyTrackingCode = () => {
+    navigator.clipboard.writeText(trackingCode);
+    setCopied(true);
+    toast.success('کد رهگیری کپی شد.');
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const goToDashboard = () => {
+    setShowTrackingDialog(false);
+    navigate('/dashboard');
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="animate-pulse text-primary text-lg">در حال بارگذاری...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-background via-primary/5 to-background">
+      {/* Hero Section */}
+      <div className="relative overflow-hidden">
+        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiM5OTc1M2QiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDM0djItSDI0di0yaDEyek0zNiAyNHYySDI0di0yaDEyeiIvPjwvZz48L2c+PC9zdmc+')] opacity-30" />
+        <div className="relative max-w-4xl mx-auto px-4 py-12 md:py-20">
+          {/* Decorative top border */}
+          <div className="flex justify-center mb-8">
+            <div className="h-1 w-32 bg-gradient-primary rounded-full" />
+          </div>
+
+          {/* Title */}
+          <h1 className="text-4xl md:text-6xl font-bold text-center mb-4">
+            <span className="text-gradient">{config?.siteTitle || 'مسابقه بزرگ غدیر'}</span>
+          </h1>
+
+          {/* Subtitle */}
+          <p className="text-lg md:text-xl text-center text-text-light mb-8">
+            {config?.subtitle}
+          </p>
+
+          {/* Channel Links */}
+          {config?.channels && (
+            <div className="flex flex-wrap justify-center gap-4 mb-8">
+              {config.channels.map((channel, index) => (
+                <a
+                  key={index}
+                  href={channel.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-gradient-secondary text-white hover:opacity-90 transition-all duration-200 shadow-md hover:shadow-lg text-sm font-medium"
+                >
+                  <ExternalLink className="h-4 w-4" />
+                  {channel.name}
+                </a>
+              ))}
+            </div>
+          )}
+
+          {/* Short Text */}
+          {config?.shortText && (
+            <p className="text-center text-text-light max-w-2xl mx-auto mb-10 leading-relaxed">
+              {config.shortText}
+            </p>
+          )}
+
+          {/* Decorative divider */}
+          <div className="flex items-center justify-center gap-3 mb-10">
+            <div className="h-px w-16 bg-gradient-primary" />
+            <Award className="h-6 w-6 text-primary" />
+            <div className="h-px w-16 bg-gradient-primary" />
+          </div>
+
+          {/* CTA Button - Enter Contest */}
+          <div className="flex justify-center">
+            <Button
+              onClick={() => setShowAuthDialog(true)}
+              size="lg"
+              className="text-lg px-10 py-6 rounded-2xl shadow-2xl hover:shadow-primary/25 animate-bounce-gentle"
+            >
+              <Gamepad2 className="h-6 w-6 ml-2" />
+              ورود به مسابقه
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Auth Dialog */}
+      <Dialog open={showAuthDialog} onOpenChange={setShowAuthDialog}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader className="text-center pb-2">
+            <DialogTitle className="text-2xl text-gradient">ورود به مسابقه</DialogTitle>
+            <DialogDescription>
+              برای شرکت در مسابقه، ثبت‌نام کنید یا با کد رهگیری وارد شوید
+            </DialogDescription>
+          </DialogHeader>
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+            <TabsList className="grid w-full grid-cols-2 mb-6">
+              <TabsTrigger value="register" className="flex items-center gap-2">
+                <UserPlus className="h-4 w-4" />
+                ثبت‌نام جدید
+              </TabsTrigger>
+              <TabsTrigger value="login" className="flex items-center gap-2">
+                <LogIn className="h-4 w-4" />
+                ورود با کد رهگیری
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="register">
+              <form onSubmit={handleRegister} className="space-y-4">
+                <div className="space-y-2 text-center">
+                  <Label htmlFor="regName" className="block">نام و نام‌خانوادگی</Label>
+                  <Input
+                    id="regName"
+                    placeholder="مثال: علی محمدی"
+                    value={regName}
+                    onChange={e => setRegName(e.target.value)}
+                    required
+                    className="text-center"
+                    dir="rtl"
+                  />
+                </div>
+                <div className="space-y-2 text-center">
+                  <Label htmlFor="regContact" className="block">شناسه (شماره موبایل یا ID ایتا)</Label>
+                  <Input
+                    id="regContact"
+                    placeholder="مثال: 09123456789"
+                    value={regContact}
+                    onChange={e => setRegContact(e.target.value)}
+                    required
+                    minLength={5}
+                    className="text-center"
+                    dir="ltr"
+                  />
+                </div>
+                <Button type="submit" className="w-full" disabled={regSubmitting}>
+                  {regSubmitting ? 'در حال ثبت‌نام...' : 'شرکت در مسابقه'}
+                </Button>
+              </form>
+            </TabsContent>
+
+            <TabsContent value="login">
+              <form onSubmit={handleLogin} className="space-y-4">
+                <div className="space-y-2 text-center">
+                  <Label htmlFor="loginCode" className="block">کد رهگیری</Label>
+                  <Input
+                    id="loginCode"
+                    placeholder="کد ۴ رقمی خود را وارد کنید"
+                    value={loginCode}
+                    onChange={e => setLoginCode(e.target.value)}
+                    required
+                    maxLength={4}
+                    className="text-center font-mono text-lg tracking-widest"
+                    dir="ltr"
+                  />
+                </div>
+                <Button type="submit" className="w-full" variant="secondary" disabled={loginSubmitting}>
+                  {loginSubmitting ? 'در حال ورود...' : 'ورود'}
+                </Button>
+              </form>
+            </TabsContent>
+          </Tabs>
+        </DialogContent>
+      </Dialog>
+
+      {/* Tracking Code Dialog */}
+      <Dialog open={showTrackingDialog} onOpenChange={setShowTrackingDialog}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle className="text-center text-2xl text-gradient">ثبت‌نام با موفقیت انجام شد!</DialogTitle>
+            <DialogDescription className="text-center">
+              کد رهگیری خود را حتماً یادداشت کنید. این تنها راه دسترسی مجدد به حساب شماست.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col items-center gap-4 py-4">
+            <div className="bg-primary/5 border-2 border-primary/30 rounded-xl p-6 text-center w-full">
+              <p className="text-sm text-text-light mb-2">کد رهگیری شما:</p>
+              <p className="text-3xl font-bold tracking-[0.3em] text-primary font-mono" dir="ltr">
+                {trackingCode}
+              </p>
+            </div>
+            <Button onClick={copyTrackingCode} variant="outline" className="w-full gap-2">
+              {copied ? (
+                <><Check className="h-4 w-4 text-success" /> کپی شد</>
+              ) : (
+                <><Copy className="h-4 w-4" /> کپی کد رهگیری</>
+              )}
+            </Button>
+            <Button onClick={goToDashboard} className="w-full">
+              ورود به داشبورد
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
--- a/backend/ClientApp/tsconfig.app.json
+++ b/backend/ClientApp/tsconfig.app.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
--- a/backend/ClientApp/tsconfig.json
+++ b/backend/ClientApp/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/backend/ClientApp/tsconfig.node.json
+++ b/backend/ClientApp/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "module": "esnext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/backend/ClientApp/vite.config.ts
+++ b/backend/ClientApp/vite.config.ts
@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 5173,
+    strictPort: true,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:5000',
+        changeOrigin: true,
+      },
+    },
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+  },
+})
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>