initial commit

src/pages/Terms.tsx

@@ -0,0 +1,88 @@
+import { useNavigate } from "react-router-dom"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+import { Button } from "../components/ui/button"
+import { useTranslation } from "../hooks/useTranslation"
+
+export default function Terms() {
+  const navigate = useNavigate()
+  const { t, lang } = useTranslation()
+  const isFa = lang === "fa"
+
+  return (
+    <div className="min-h-screen bg-slate-50 dark:bg-slate-950 transition-colors py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-3xl mx-auto bg-white dark:bg-slate-900 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 p-8">
+        <Button 
+          variant="ghost" 
+          onClick={() => navigate(-1)} 
+          className={`mb-6 text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-50 ${isFa ? '-mr-4' : '-ml-4'}`}
+        >
+          {isFa ? <ArrowRight className="ml-2 h-4 w-4" /> : <ArrowLeft className="mr-2 h-4 w-4" />}
+          {t.terms?.back || "Back"}
+        </Button>
+
+        <h1 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">
+          {t.terms?.title}
+        </h1>
+        <p className="text-sm text-slate-500 dark:text-slate-400 mb-8">
+          {t.terms?.lastUpdated}
+        </p>
+
+        <div className="space-y-6 text-slate-700 dark:text-slate-300">
+          <section>
+            <h2 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">
+              {t.terms?.sections?.acceptance?.title}
+            </h2>
+            <p>{t.terms?.sections?.acceptance?.content}</p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">
+              {t.terms?.sections?.license?.title}
+            </h2>
+            <ul className="list-disc px-5 space-y-2">
+              {t.terms?.sections?.license?.items?.map((item: string, index: number) => (
+                <li key={index}>{item}</li>
+              ))}
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">
+              {t.terms?.sections?.privacy?.title}
+            </h2>
+            <p className="mb-2">{t.terms?.sections?.privacy?.p1}</p>
+            <ul className="list-disc px-5 space-y-2">
+              <li>
+                <strong className="text-slate-900 dark:text-white font-semibold">
+                  {t.terms?.sections?.privacy?.personalLabel}:{" "}
+                </strong>
+                {t.terms?.sections?.privacy?.personalText}
+              </li>
+              <li>
+                <strong className="text-slate-900 dark:text-white font-semibold">
+                  {t.terms?.sections?.privacy?.usageLabel}:{" "}
+                </strong>
+                {t.terms?.sections?.privacy?.usageText}
+              </li>
+            </ul>
+            <p className="mt-2">{t.terms?.sections?.privacy?.p2}</p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">
+              {t.terms?.sections?.liability?.title}
+            </h2>
+            <p>{t.terms?.sections?.liability?.content}</p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">
+              {t.terms?.sections?.modifications?.title}
+            </h2>
+            <p>{t.terms?.sections?.modifications?.content}</p>
+          </section>
+        </div>
+      </div>
+    </div>
+  )
+}