89 lines
3.5 KiB
TypeScript
89 lines
3.5 KiB
TypeScript
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>
|
|
)
|
|
}
|