diff --git a/src/pages/auth/AuthSideVisual.tsx b/src/pages/auth/AuthSideVisual.tsx new file mode 100644 index 0000000..e59bdde --- /dev/null +++ b/src/pages/auth/AuthSideVisual.tsx @@ -0,0 +1,128 @@ +import { BarChart3, BriefcaseBusiness, Clock3, FileText, Tags, TimerReset } from "lucide-react" +import type { ReactNode } from "react" + +import { useTranslation } from "../../hooks/useTranslation" + +const content = { + en: { + eyebrow: "Workspace time engine", + title: "Track time with context, not clutter.", + description: "Connect every timer to a client, project, tag, and reportable result.", + timer: "02:34:18", + billable: "Billable", + project: "Project", + projectName: "Mobile app", + report: "PDF export", + insight: "Weekly report", + tags: "Design, QA", + points: ["Accurate timers", "Project clarity", "Fast reports"], + }, + fa: { + eyebrow: "موتور زمان ورک‌اسپیس", + title: "زمان را با زمینه‌ی کاری ثبت کنید، نه با شلوغی.", + description: "هر تایمر را به مشتری، پروژه، تگ و خروجی قابل گزارش وصل کنید.", + timer: "۰۲:۳۴:۱۸", + billable: "قابل محاسبه", + project: "پروژه", + projectName: "اپلیکیشن موبایل", + report: "خروجی PDF", + insight: "گزارش هفتگی", + tags: "طراحی، تست", + points: ["تایمر دقیق", "شفافیت پروژه", "گزارش سریع"], + }, +} + +export function AuthSideVisual() { + const { lang } = useTranslation() + const copy = lang === "fa" ? content.fa : content.en + + return ( +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+ + } label={copy.billable} value={copy.timer} accent="blue" /> + } label={copy.project} value={copy.projectName} accent="emerald" /> + } label={copy.tags} value={copy.report} accent="amber" /> + } label={copy.insight} value="+18%" accent="cyan" /> + +
+ + {copy.report} +
+
+ +
+

+ {copy.eyebrow} +

+
+

+ {copy.title} +

+

+ {copy.description} +

+
+
+ {copy.points.map((point) => ( + + {point} + + ))} +
+
+
+
+ ) +} + +interface FloatingCardProps { + className: string + icon: ReactNode + label: string + value: string + accent: "blue" | "emerald" | "amber" | "cyan" +} + +function FloatingCard({ className, icon, label, value, accent }: FloatingCardProps) { + const accentClass = { + blue: "bg-blue-500/10 text-blue-600 dark:bg-blue-400/10 dark:text-blue-300", + emerald: "bg-emerald-500/10 text-emerald-600 dark:bg-emerald-400/10 dark:text-emerald-300", + amber: "bg-amber-500/10 text-amber-700 dark:bg-amber-400/10 dark:text-amber-300", + cyan: "bg-cyan-500/10 text-cyan-600 dark:bg-cyan-400/10 dark:text-cyan-300", + }[accent] + + return ( +
+
+ + {icon} + +
+

{label}

+

{value}

+
+
+
+ ) +}