added multi language features

2026-03-31 19:45:21 +05:00
parent 4f3d73443f
commit 291375ce02
19 changed files with 728 additions and 246 deletions
--- a/src/widgets/detail/ui/detailPage.tsx
+++ b/src/widgets/detail/ui/detailPage.tsx
@@ -3,6 +3,7 @@
 // ─────────────────────────────────────────────────────────────
 'use client';
 import React from 'react';
+import { useTranslations } from 'next-intl';
 import { PlagiarismCheck } from '../lib/types';
 import {
  getFileExtension,
@@ -166,81 +167,101 @@ interface CheckDetailViewProps {
  check: PlagiarismCheck;
 }

-const CheckHeader: React.FC<CheckDetailViewProps> = ({ check }) => (
-  <div className="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
-    <div className="flex flex-wrap items-center justify-between gap-4">
-      <div className="flex items-center gap-4">
-        <Avatar
-          name={check.sender.name}
-          avatarUrl={check.sender.avatarUrl}
-          size="lg"
-        />
-        <div>
-          <h1 className="text-xl font-bold text-slate-900">
-            {check.sender.name}
-          </h1>
-          <p className="text-sm text-slate-500">{check.sender.email}</p>
-          <p className="text-xs text-slate-400 mt-1 font-mono">
-            ID: {check.id}
-          </p>
-        </div>
-      </div>
-      <StatusBadge status={check.status} />
-    </div>
-  </div>
-);
+const CheckHeader: React.FC<CheckDetailViewProps> = ({ check }) => {
+  const t = useTranslations('DetailPage');

-const SubmissionInfoCard: React.FC<CheckDetailViewProps> = ({ check }) => (
-  <SectionCard title="Submission Details" icon={<IconFile />} accent="blue">
-    <InfoRow
-      label="Sender"
-      icon={<IconUser />}
-      value={
-        <span className="flex items-center gap-2 justify-end">
-          <Avatar name={check.sender.name} size="sm" />
-          {check.sender.name}
-        </span>
-      }
-    />
-    <InfoRow
-      label="File Name"
+  return (
+    <div className="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <div className="flex items-center gap-4">
+          <Avatar
+            name={check.sender.name}
+            avatarUrl={check.sender.avatarUrl}
+            size="lg"
+          />
+          <div>
+            <h1 className="text-xl font-bold text-slate-900">
+              {check.sender.name}
+            </h1>
+            <p className="text-sm text-slate-500">{check.sender.email}</p>
+            <p className="text-xs text-slate-400 mt-1 font-mono">
+              {t('id')}: {check.id}
+            </p>
+          </div>
+        </div>
+        <StatusBadge status={check.status} />
+      </div>
+    </div>
+  );
+};
+
+const SubmissionInfoCard: React.FC<CheckDetailViewProps> = ({ check }) => {
+  const t = useTranslations('DetailPage');
+
+  return (
+    <SectionCard
+      title={t('submissionDetails')}
      icon={<IconFile />}
-      value={
-        <span className="flex items-center gap-2 justify-end flex-wrap">
-          <FileTypeBadge extension={getFileExtension(check.fileName)} />
-          <span className="font-mono text-xs text-slate-700 break-all max-w-60 text-right">
-            {check.fileName}
+      accent="blue"
+    >
+      <InfoRow
+        label={t('sender')}
+        icon={<IconUser />}
+        value={
+          <span className="flex items-center gap-2 justify-end">
+            <Avatar name={check.sender.name} size="sm" />
+            {check.sender.name}
          </span>
-        </span>
-      }
-    />
-    <InfoRow
-      label="File Size"
-      value={
-        <span className="text-slate-600">{formatFileSize(check.fileSize)}</span>
-      }
-    />
-    <InfoRow
-      label="Submitted"
-      icon={<IconCalendar />}
-      value={formatDate(check.submittedAt)}
-    />
-    <InfoRow
-      label="Payment"
-      icon={<IconPayment />}
-      value={
-        <span className="text-emerald-600 font-bold">
-          {formatCurrency(check.paymentAmount, check.currency)}
-        </span>
-      }
-    />
-  </SectionCard>
-);
+        }
+      />
+      <InfoRow
+        label={t('fileName')}
+        icon={<IconFile />}
+        value={
+          <span className="flex items-center gap-2 justify-end flex-wrap">
+            <FileTypeBadge extension={getFileExtension(check.fileName)} />
+            <span className="font-mono text-xs text-slate-700 break-all max-w-60 text-right">
+              {check.fileName}
+            </span>
+          </span>
+        }
+      />
+      <InfoRow
+        label={t('fileSize')}
+        value={
+          <span className="text-slate-600">
+            {formatFileSize(check.fileSize)}
+          </span>
+        }
+      />
+      <InfoRow
+        label={t('submitted')}
+        icon={<IconCalendar />}
+        value={formatDate(check.submittedAt)}
+      />
+      <InfoRow
+        label={t('payment')}
+        icon={<IconPayment />}
+        value={
+          <span className="text-emerald-600 font-bold">
+            {formatCurrency(check.paymentAmount, check.currency)}
+          </span>
+        }
+      />
+    </SectionCard>
+  );
+};

 const ResultCard: React.FC<CheckDetailViewProps> = ({ check }) => {
+  const t = useTranslations('DetailPage');
+
  if (check.status === 'processing' || check.status === 'pending') {
    return (
-      <SectionCard title="Result" icon={<IconShield />} accent="violet">
+      <SectionCard
+        title={t('resultTitle')}
+        icon={<IconShield />}
+        accent="violet"
+      >
        <div className="flex flex-col items-center justify-center py-10 text-center space-y-3">
          <div className="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center">
            <svg
@@ -264,10 +285,10 @@ const ResultCard: React.FC<CheckDetailViewProps> = ({ check }) => {
            </svg>
          </div>
          <p className="text-sm font-semibold text-slate-600">
-            Analysis in progress
+            {t('analysisInProgress')}
          </p>
          <p className="text-xs text-slate-400">
-            Results will appear once processing is complete.
+            {t('resultsReadyAfterProcessing')}
          </p>
        </div>
      </SectionCard>
@@ -276,8 +297,12 @@ const ResultCard: React.FC<CheckDetailViewProps> = ({ check }) => {

  if (!check.result) {
    return (
-      <SectionCard title="Result" icon={<IconShield />} accent="violet">
-        <p className="text-sm text-slate-500 py-4">No result available.</p>
+      <SectionCard
+        title={t('resultTitle')}
+        icon={<IconShield />}
+        accent="violet"
+      >
+        <p className="text-sm text-slate-500 py-4">{t('noResultAvailable')}</p>
      </SectionCard>
    );
  }
@@ -286,7 +311,7 @@ const ResultCard: React.FC<CheckDetailViewProps> = ({ check }) => {

  return (
    <SectionCard
-      title="Plagiarism Result"
+      title={t('plagiarismResult')}
      icon={<IconShield />}
      accent={
        result.similarityLevel === 'low'
@@ -309,13 +334,13 @@ const ResultCard: React.FC<CheckDetailViewProps> = ({ check }) => {
            <p className="text-2xl font-bold text-slate-800 tabular-nums">
              {result.checkedWords.toLocaleString()}
            </p>
-            <p className="text-xs text-slate-500 mt-1">Words Checked</p>
+            <p className="text-xs text-slate-500 mt-1">{t('wordsChecked')}</p>
          </div>
          <div className="bg-slate-50 rounded-xl p-4 text-center">
            <p className="text-2xl font-bold text-slate-800 tabular-nums">
              {result.matchedWords.toLocaleString()}
            </p>
-            <p className="text-xs text-slate-500 mt-1">Words Matched</p>
+            <p className="text-xs text-slate-500 mt-1">{t('wordsMatched')}</p>
          </div>
        </div>

@@ -323,7 +348,7 @@ const ResultCard: React.FC<CheckDetailViewProps> = ({ check }) => {
        {result.sources.length > 0 && (
          <div>
            <h3 className="text-xs font-semibold text-slate-500 uppercase tracking-widest mb-3">
-              Matched Sources
+              {t('matchedSources')}
            </h3>
            <div className="space-y-2">
              {result.sources.map((src, i) => (
@@ -352,7 +377,7 @@ const ResultCard: React.FC<CheckDetailViewProps> = ({ check }) => {
                      {src.matchPercentage}%
                    </span>
                    <p className="text-xs text-slate-400">
-                      {src.matchedWords.toLocaleString()} words
+                      {src.matchedWords.toLocaleString()} {t('words')}
                    </p>
                  </div>
                </div>
@@ -362,7 +387,7 @@ const ResultCard: React.FC<CheckDetailViewProps> = ({ check }) => {
        )}

        <InfoRow
-          label="Processed At"
+          label={t('processedAt')}
          icon={<IconCalendar />}
          value={formatDate(result.processedAt)}
        />
@@ -372,19 +397,19 @@ const ResultCard: React.FC<CheckDetailViewProps> = ({ check }) => {
 };

 const CertificateCard: React.FC<CheckDetailViewProps> = ({ check }) => {
+  const t = useTranslations('DetailPage');
+
  if (!check.certificate) {
    return (
-      <SectionCard title="Certificate" icon={<IconCert />} accent="violet">
+      <SectionCard title={t('certificate')} icon={<IconCert />} accent="violet">
        <div className=" flex flex-col items-center justify-center py-8 text-center space-y-2">
          <div className="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center">
            <IconCert />
          </div>
-          <p className="text-sm text-slate-500">
-            No certificate issued for this check.
-          </p>
+          <p className="text-sm text-slate-500">{t('noCertificate')}</p>
          {check.result?.similarityLevel === 'high' && (
            <p className="text-xs text-red-500">
-              Certificates are not issued for high-similarity results.
+              {t('noCertificateHighSimilarity')}
            </p>
          )}
        </div>
@@ -395,7 +420,7 @@ const CertificateCard: React.FC<CheckDetailViewProps> = ({ check }) => {
  const { certificate } = check;

  return (
-    <SectionCard title="Certificate" icon={<IconCert />} accent="green">
+    <SectionCard title={t('certificate')} icon={<IconCert />} accent="green">
      {/* Certificate visual */}
      <div className="relative rounded-xl border-2 border-dashed border-emerald-200 bg-linear-to-br from-emerald-50 to-white p-5 mb-4 overflow-hidden">
        <div className="absolute top-2 right-2 opacity-10">
@@ -414,21 +439,21 @@ const CertificateCard: React.FC<CheckDetailViewProps> = ({ check }) => {
          {certificate.verificationCode}
        </p>
        <p className="text-xs text-slate-500 mt-1">
-          Certificate ID: {certificate.id}
+          {t('certificateId')}: {certificate.id}
        </p>
      </div>

      <InfoRow
-        label="Issued"
+        label={t('issued')}
        icon={<IconCalendar />}
        value={formatDate(certificate.issuedAt)}
      />
      <InfoRow
-        label="Expires"
+        label={t('expires')}
        icon={<IconCalendar />}
        value={formatDate(certificate.expiresAt)}
      />
-      <InfoRow label="Issuer" value={certificate.issuerName} />
+      <InfoRow label={t('issuer')} value={certificate.issuerName} />

      <div className="mt-4">
        <a
@@ -436,7 +461,7 @@ const CertificateCard: React.FC<CheckDetailViewProps> = ({ check }) => {
          className="flex items-center justify-center gap-2 py-2.5 px-4 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold rounded-xl transition-colors"
        >
          <IconDownload />
-          Download Certificate
+          {t('downloadCertificate')}
        </a>
      </div>
    </SectionCard>
@@ -466,6 +491,7 @@ interface PlagiarismDetailPageProps {
 export const PlagiarismDetailPage: React.FC<PlagiarismDetailPageProps> = ({
  checkId,
 }) => {
+  const t = useTranslations('DetailPage');
  const { check, loadingState, error, reload } = usePlagiarismDetail(checkId);

  return (
@@ -473,7 +499,7 @@ export const PlagiarismDetailPage: React.FC<PlagiarismDetailPageProps> = ({
      <main className="max-w-300 mx-auto px-4 py-6">
        {loadingState === 'loading' && <SkeletonLoader />}
        {loadingState === 'error' && (
-          <ErrorState message={error ?? 'Unknown error'} onRetry={reload} />
+          <ErrorState message={error ?? t('unknownError')} onRetry={reload} />
        )}
        {loadingState === 'success' && check && (
          <CheckDetailView check={check} />
--- a/src/widgets/fileUpload/ui/Plagiraismcheckform.tsx
+++ b/src/widgets/fileUpload/ui/Plagiraismcheckform.tsx
@@ -11,6 +11,7 @@ import {
 } from './Plagiraismui';
 import { usePlagiarismForm } from '../lib/usePlagiraism';
 import { PaymentModal } from '@/widgets/paymentModal/ui/Paymentmodal';
+import { useTranslations } from 'next-intl';

 // ─── UserIcon (inline) ───────────────────────────────────────────────────────

@@ -35,6 +36,8 @@ function UserIcon() {
 // ─── Component ───────────────────────────────────────────────────────────────

 export function PlagiarismCheckForm() {
+  const t = useTranslations('PlagiarismCheck');
+
  const {
    form,
    errors,
@@ -59,14 +62,13 @@ export function PlagiarismCheckForm() {
          <div className="mb-8">
            <div className="inline-flex items-center gap-2 bg-blue-100 text-blue-700 text-xs font-bold uppercase tracking-widest px-3 py-1.5 rounded-full mb-4">
              <span className="w-1.5 h-1.5 rounded-full bg-blue-500" />
-              Originality Check
+              {t('badge')}
            </div>
            <h1 className="text-3xl font-black text-stone-900 leading-tight">
-              Submit Your Document
+              {t('title')}
            </h1>
            <p className="text-stone-500 mt-2 text-sm leading-relaxed">
-              Upload a document to verify its originality. Results are typically
-              ready within a few minutes.
+              {t('description')}
            </p>
          </div>

@@ -86,6 +88,7 @@ export function PlagiarismCheckForm() {
                  status="success"
                  message={`Submission successful! ID: ${submission.response.submissionId}. ${submission.response.message}`}
                  onDismiss={resetSubmission}
+                  dismissText={t('dismiss')}
                />
              )}
              {submission.status === 'error' && submission.error && (
@@ -93,6 +96,7 @@ export function PlagiarismCheckForm() {
                  status="error"
                  message={submission.error}
                  onDismiss={resetSubmission}
+                  dismissText={t('dismiss')}
                />
              )}

@@ -100,7 +104,7 @@ export function PlagiarismCheckForm() {
              <div className="flex flex-col gap-6 md:max-w-[50%] w-full">
                {/* Topic */}
                <FieldWrapper
-                  label="Document Topic"
+                  label={t('documentTopic')}
                  htmlFor="topic"
                  error={errors.topic}
                  required
@@ -108,7 +112,7 @@ export function PlagiarismCheckForm() {
                  <TextInput
                    id="topic"
                    type="text"
-                    placeholder="e.g. The Impact of Artificial Intelligence on Education"
+                    placeholder={t('topicPlaceholder')}
                    value={form.topic}
                    onChange={(e) => setTopic(e.target.value)}
                    hasError={!!errors.topic}
@@ -118,21 +122,24 @@ export function PlagiarismCheckForm() {
                </FieldWrapper>

                {/* Sender Full Name (read-only) */}
-                <FieldWrapper label="Sender Full Name">
+                <FieldWrapper label={t('senderFullName')}>
                  <ReadonlyField
-                    value={senderFullName || 'Not logged in'}
+                    value={senderFullName || t('notLoggedIn')}
                    icon={<UserIcon />}
+                    autoFilledText={t('autoFilled')}
                  />
                </FieldWrapper>

                {/* Certificate Option */}
                <div>
                  <p className="text-sm font-semibold tracking-wide text-stone-700 uppercase mb-2">
-                    Certificate Option
+                    {t('certificateOption')}
                  </p>
                  <CertificateCheckbox
                    checked={form.withCertificate}
                    onChange={toggleCertificate}
+                    title={t('certificateTitle')}
+                    description={t('certificateDescription')}
                  />
                </div>
              </div>
@@ -141,7 +148,7 @@ export function PlagiarismCheckForm() {
              <div className="flex flex-col gap-6 md:max-w-[50%] w-full">
                {/* File Upload */}
                <FieldWrapper
-                  label="Document File"
+                  label={t('documentFile')}
                  error={errors.file}
                  required
                >
@@ -149,6 +156,9 @@ export function PlagiarismCheckForm() {
                    file={form.file}
                    onFileChange={setFile}
                    hasError={!!errors.file}
+                    clickToUploadText={t('clickToUpload')}
+                    fileTypesText={t('fileTypes')}
+                    removeFileAriaLabel={t('removeFile')}
                  />
                </FieldWrapper>

@@ -156,7 +166,11 @@ export function PlagiarismCheckForm() {
                <div className="border-t border-stone-100" />

                {/* Submit */}
-                <SubmitButton isLoading={isLoading} />
+                <SubmitButton
+                  isLoading={isLoading}
+                  submittingText={t('submitting')}
+                  submitText={t('submitButton')}
+                />
              </div>
            </form>
          </div>
--- a/src/widgets/fileUpload/ui/Plagiraismui.tsx
+++ b/src/widgets/fileUpload/ui/Plagiraismui.tsx
@@ -71,15 +71,20 @@ export function TextInput({
 interface ReadonlyFieldProps {
  value: string;
  icon?: React.ReactNode;
+  autoFilledText?: string;
 }

-export function ReadonlyField({ value, icon }: ReadonlyFieldProps) {
+export function ReadonlyField({
+  value,
+  icon,
+  autoFilledText = 'Auto-filled',
+}: ReadonlyFieldProps) {
  return (
    <div className="flex items-center gap-3 px-4 py-3 rounded-xl bg-stone-100 border-2 border-stone-200">
      {icon && <span className="text-stone-500 shrink-0">{icon}</span>}
      <span className="text-sm font-semibold text-stone-700">{value}</span>
      <span className="ml-auto text-xs text-stone-400 italic font-medium">
-        Auto-filled
+        {autoFilledText}
      </span>
    </div>
  );
@@ -92,6 +97,9 @@ interface FileUploadFieldProps {
  onFileChange: (file: File | null) => void;
  hasError?: boolean;
  accept?: string;
+  clickToUploadText?: string;
+  fileTypesText?: string;
+  removeFileAriaLabel?: string;
 }

 export function FileUploadField({
@@ -99,6 +107,9 @@ export function FileUploadField({
  onFileChange,
  hasError,
  accept = '.pdf,.doc,.docx,.txt',
+  clickToUploadText = 'Click to upload document',
+  fileTypesText = 'PDF, DOC, DOCX, TXT · Max 20 MB',
+  removeFileAriaLabel = 'Remove file',
 }: FileUploadFieldProps) {
  const inputRef = React.useRef<HTMLInputElement>(null);

@@ -163,11 +174,9 @@ export function FileUploadField({
            <p
              className={`text-sm font-semibold transition-colors ${hasError ? 'text-rose-600' : 'text-stone-600 group-hover:text-blue-700'}`}
            >
-              Click to upload document
-            </p>
-            <p className="text-xs text-stone-400 mt-0.5">
-              PDF, DOC, DOCX, TXT · Max 20 MB
+              {clickToUploadText}
            </p>
+            <p className="text-xs text-stone-400 mt-0.5">{fileTypesText}</p>
          </div>
        </label>
      ) : (
@@ -185,7 +194,7 @@ export function FileUploadField({
            type="button"
            onClick={handleRemove}
            className="w-7 h-7 rounded-lg flex items-center justify-center text-stone-400 hover:text-rose-500 hover:bg-rose-100 transition-colors shrink-0"
-            aria-label="Remove file"
+            aria-label={removeFileAriaLabel}
          >
            <XIcon />
          </button>
@@ -200,11 +209,15 @@ export function FileUploadField({
 interface CertificateCheckboxProps {
  checked: boolean;
  onChange: () => void;
+  title?: string;
+  description?: string;
 }

 export function CertificateCheckbox({
  checked,
  onChange,
+  title = 'Return result with certificate',
+  description = 'An official certificate will be attached to your originality report.',
 }: CertificateCheckboxProps) {
  return (
    <label
@@ -246,12 +259,8 @@ export function CertificateCheckbox({
        </div>
      </div>
      <div>
-        <p className="text-sm font-semibold text-stone-800">
-          Return result with certificate
-        </p>
-        <p className="text-xs text-stone-500 mt-0.5">
-          An official certificate will be attached to your originality report.
-        </p>
+        <p className="text-sm font-semibold text-stone-800">{title}</p>
+        <p className="text-xs text-stone-500 mt-0.5">{description}</p>
      </div>
    </label>
  );
@@ -261,9 +270,15 @@ export function CertificateCheckbox({

 interface SubmitButtonProps {
  isLoading: boolean;
+  submittingText?: string;
+  submitText?: string;
 }

-export function SubmitButton({ isLoading }: SubmitButtonProps) {
+export function SubmitButton({
+  isLoading,
+  submittingText = 'Submitting…',
+  submitText = 'Submit for Originality Check',
+}: SubmitButtonProps) {
  return (
    <button
      type="submit"
@@ -282,12 +297,12 @@ export function SubmitButton({ isLoading }: SubmitButtonProps) {
      {isLoading ? (
        <>
          <SpinnerIcon />
-          Submitting…
+          {submittingText}
        </>
      ) : (
        <>
          <ShieldIcon />
-          Submit for Originality Check
+          {submitText}
        </>
      )}
    </button>
@@ -300,12 +315,14 @@ interface StatusBannerProps {
  status: 'success' | 'error';
  message: string;
  onDismiss: () => void;
+  dismissText?: string;
 }

 export function StatusBanner({
  status,
  message,
  onDismiss,
+  dismissText = 'Dismiss',
 }: StatusBannerProps) {
  const isSuccess = status === 'success';
  useEffect(() => {
@@ -334,7 +351,7 @@ export function StatusBanner({
        onClick={onDismiss}
        className={`text-xs font-bold uppercase ${isSuccess ? 'text-emerald-600 hover:text-emerald-800' : 'text-rose-600 hover:text-rose-800'}`}
      >
-        Dismiss
+        {dismissText}
      </button>
    </div>
  );
--- a/src/widgets/footer/lib/data.ts
+++ b/src/widgets/footer/lib/data.ts
@@ -1,31 +1,31 @@
-const sections = [
+const getSections = (t: (key: string) => string) => [
  {
-    title: 'Product',
+    title: t('product'),
    links: [
-      { name: 'Overview', href: '#' },
-      { name: 'Pricing', href: '#' },
-      { name: 'Marketplace', href: '#' },
-      { name: 'Features', href: '#' },
+      { name: t('overview'), href: '#' },
+      { name: t('pricing'), href: '#' },
+      { name: t('marketplace'), href: '#' },
+      { name: t('features'), href: '#' },
    ],
  },
  {
-    title: 'Company',
+    title: t('company'),
    links: [
-      { name: 'About', href: '#' },
-      { name: 'Team', href: '#' },
-      { name: 'Blog', href: '#' },
-      { name: 'Careers', href: '#' },
+      { name: t('about'), href: '#' },
+      { name: t('team'), href: '#' },
+      { name: t('blog'), href: '#' },
+      { name: t('careers'), href: '#' },
    ],
  },
  {
-    title: 'Resources',
+    title: t('resources'),
    links: [
-      { name: 'Help', href: '#' },
-      { name: 'Sales', href: '#' },
-      { name: 'Advertise', href: '#' },
-      { name: 'Privacy', href: '#' },
+      { name: t('help'), href: '#' },
+      { name: t('sales'), href: '#' },
+      { name: t('advertise'), href: '#' },
+      { name: t('privacy'), href: '#' },
    ],
  },
 ];

-export { sections };
+export { getSections };
--- a/src/widgets/footer/ui/index.tsx
+++ b/src/widgets/footer/ui/index.tsx
@@ -1,4 +1,8 @@
+import { useTranslations } from 'next-intl';
+
 const Footer = () => {
+  const t = useTranslations('Footer');
+
  // const shortLinks = [
  //   { name: 'About', href: '/about' },
  //   { name: 'Contact', href: '/contact' },
@@ -7,13 +11,10 @@ const Footer = () => {
    <section className="py-10">
      <div className="custom-container">
        <div className=" flex flex-col justify-between gap-4 border-t pt-8 text-center text-sm font-medium text-muted-foreground lg:flex-row lg:items-center lg:text-left">
-          <p>
-            © {new Date().getFullYear()} Felix IT Solutions. All rights
-            reserved.
-          </p>
+          <p>{t('copyright', { year: new Date().getFullYear() })}</p>
          <ul className="flex justify-center gap-4 lg:justify-start">
            <li className="hover:text-primary">
-              <a href="#">Terms and Conditions</a>
+              <a href="#">{t('terms')}</a>
            </li>
          </ul>
        </div>
--- a/src/widgets/history/lib/constants.ts
+++ b/src/widgets/history/lib/constants.ts
@@ -3,34 +3,34 @@
 import { CheckResult } from './types';

 export const TABLE_COLUMNS = [
-  { key: 'senderFullName', label: 'Sender' },
-  { key: 'fileName', label: 'File' },
-  { key: 'date', label: 'Date' },
-  { key: 'paymentAmount', label: 'Amount' },
-  { key: 'result', label: 'Result' },
-  { key: 'actions', label: '' },
+  { key: 'senderFullName', labelKey: 'sender' },
+  { key: 'fileName', labelKey: 'file' },
+  { key: 'date', labelKey: 'date' },
+  { key: 'paymentAmount', labelKey: 'amount' },
+  { key: 'result', labelKey: 'result' },
+  { key: 'actions', labelKey: 'actions' },
 ] as const;

 // ─── Result Labels & Styles ────────────────────────────────────────────────────

 export const RESULT_CONFIG: Record<
  CheckResult,
-  { label: string; className: string }
+  { labelKey: string; className: string }
 > = {
  clean: {
-    label: 'Clean',
+    labelKey: 'resultClean',
    className: 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200',
  },
  plagiarism_found: {
-    label: 'Plagiarism Found',
+    labelKey: 'resultPlagiarismFound',
    className: 'bg-red-50 text-red-700 ring-1 ring-red-200',
  },
  pending: {
-    label: 'Pending',
+    labelKey: 'resultPending',
    className: 'bg-amber-50 text-amber-700 ring-1 ring-amber-200',
  },
  failed: {
-    label: 'Failed',
+    labelKey: 'resultFailed',
    className: 'bg-slate-100 text-slate-500 ring-1 ring-slate-200',
  },
 };
--- a/src/widgets/history/ui/historyPage.tsx
+++ b/src/widgets/history/ui/historyPage.tsx
@@ -1,21 +1,24 @@
 'use client';
 import React from 'react';
+import { useTranslations } from 'next-intl';
 import { useHistory } from '../lib/useHistory';
 import { HistoryTable } from './historyTable';
 import { Pagination } from './pagination';

 // ─── Page Header ───────────────────────────────────────────────────────────────

-const PageHeader: React.FC = () => (
-  <div className="mb-6">
-    <h1 className="text-2xl font-semibold text-slate-900 tracking-tight">
-      Check History
-    </h1>
-    <p className="mt-1 text-sm text-slate-500">
-      All plagiarism checks submitted by you
-    </p>
-  </div>
-);
+const PageHeader: React.FC = () => {
+  const t = useTranslations('HistoryPage');
+
+  return (
+    <div className="mb-6">
+      <h1 className="text-2xl font-semibold text-slate-900 tracking-tight">
+        {t('title')}
+      </h1>
+      <p className="mt-1 text-sm text-slate-500">{t('description')}</p>
+    </div>
+  );
+};

 // ─── HistoryPage ───────────────────────────────────────────────────────────────

--- a/src/widgets/history/ui/historyTable.tsx
+++ b/src/widgets/history/ui/historyTable.tsx
@@ -1,5 +1,6 @@
 'use client';
 import React from 'react';
+import { useTranslations } from 'next-intl';
 import { TABLE_COLUMNS } from '../lib/constants';
 import { EmptyState, ErrorState, SkeletonRow } from './tableStates';
 import { HistoryTableRow } from './historyTableRow';
@@ -12,23 +13,27 @@ interface HistoryTableFullProps extends HistoryTableProps {

 // ─── Table Header ──────────────────────────────────────────────────────────────

-const TableHead: React.FC = () => (
-  <thead>
-    <tr className="border-b border-slate-200 bg-slate-50/80">
-      {TABLE_COLUMNS.map((col) => (
-        <th
-          key={col.key}
-          scope="col"
-          className={`px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider whitespace-nowrap ${
-            col.key === 'actions' ? 'text-right' : ''
-          }`}
-        >
-          {col.label}
-        </th>
-      ))}
-    </tr>
-  </thead>
-);
+const TableHead: React.FC = () => {
+  const t = useTranslations('HistoryPage');
+
+  return (
+    <thead>
+      <tr className="border-b border-slate-200 bg-slate-50/80">
+        {TABLE_COLUMNS.map((col) => (
+          <th
+            key={col.key}
+            scope="col"
+            className={`px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider whitespace-nowrap ${
+              col.key === 'actions' ? 'text-right' : ''
+            }`}
+          >
+            {col.labelKey ? t(col.labelKey) : ''}
+          </th>
+        ))}
+      </tr>
+    </thead>
+  );
+};

 // ─── Table Body ────────────────────────────────────────────────────────────────

@@ -48,7 +53,7 @@ const TableBody: React.FC<HistoryTableFullProps> = ({
    );
  }

-  if (false) {
+  if (error) {
    return (
      <tbody>
        <ErrorState message={error} onRetry={onRetry ?? (() => {})} />
@@ -56,7 +61,7 @@ const TableBody: React.FC<HistoryTableFullProps> = ({
    );
  }

-  if (false) {
+  if (items.length === 0) {
    return (
      <tbody>
        <EmptyState />
--- a/src/widgets/history/ui/historyTableRow.tsx
+++ b/src/widgets/history/ui/historyTableRow.tsx
@@ -1,5 +1,6 @@
 'use client';
 import React from 'react';
+import { useTranslations } from 'next-intl';
 import { HistoryTableRowProps } from '../lib/types';
 import { formatDate, truncateFileName } from '../lib/utils';
 import { ResultBadge } from './resultBadge';
@@ -7,6 +8,8 @@ import { useRouter } from '@/shared/config/i18n/navigation';

 export const HistoryTableRow: React.FC<HistoryTableRowProps> = ({ item }) => {
  const router = useRouter();
+  const t = useTranslations('HistoryPage');
+
  return (
    <tr className="border-b border-slate-100 hover:bg-slate-50/70 transition-colors duration-100 group">
      {/* Sender */}
@@ -62,7 +65,7 @@ export const HistoryTableRow: React.FC<HistoryTableRowProps> = ({ item }) => {
      <td className="px-4 py-3.5 text-right">
        <button
          onClick={() => router.push(`/${item.id}`)}
-          aria-label={`View details for ${item.senderFullName}`}
+          aria-label={t('viewDetails', { sender: item.senderFullName })}
          className="
          inline-flex items-center gap-1.5 px-3 py-1.5
          text-xs font-medium text-slate-600
@@ -73,7 +76,7 @@ export const HistoryTableRow: React.FC<HistoryTableRowProps> = ({ item }) => {
          focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-300
        "
        >
-          View
+          {t('view')}
          <svg
            width="11"
            height="11"
--- a/src/widgets/history/ui/pagination.tsx
+++ b/src/widgets/history/ui/pagination.tsx
@@ -1,5 +1,6 @@
 'use client';
 import React from 'react';
+import { useTranslations } from 'next-intl';

 interface PaginationProps {
  currentPage: number;
@@ -33,6 +34,8 @@ export const Pagination: React.FC<PaginationProps> = ({
  totalPages,
  onPageChange,
 }) => {
+  const t = useTranslations('HistoryPage');
+
  if (totalPages <= 1) return null;

  // Build visible page numbers with ellipsis
@@ -60,7 +63,7 @@ export const Pagination: React.FC<PaginationProps> = ({
  return (
    <div className="flex items-center justify-between px-4 py-3 border-t border-slate-100">
      <span className="text-xs text-slate-400">
-        Page {currentPage} of {totalPages}
+        {t('pagination', { current: currentPage, total: totalPages })}
      </span>

      <div className="flex items-center gap-1">
@@ -68,7 +71,7 @@ export const Pagination: React.FC<PaginationProps> = ({
        <button
          onClick={() => onPageChange(currentPage - 1)}
          disabled={currentPage === 1}
-          aria-label="Previous page"
+          aria-label={t('previousPage')}
          className={`${btnBase} border-slate-200 text-slate-500 hover:bg-slate-50 hover:text-slate-800 disabled:opacity-30 disabled:cursor-not-allowed`}
        >
          <ChevronIcon direction="left" />
@@ -87,7 +90,7 @@ export const Pagination: React.FC<PaginationProps> = ({
            <button
              key={p}
              onClick={() => onPageChange(p as number)}
-              aria-label={`Page ${p}`}
+              aria-label={t('page', { page: p })}
              aria-current={p === currentPage ? 'page' : undefined}
              className={`${btnBase} ${
                p === currentPage
@@ -104,7 +107,7 @@ export const Pagination: React.FC<PaginationProps> = ({
        <button
          onClick={() => onPageChange(currentPage + 1)}
          disabled={currentPage === totalPages}
-          aria-label="Next page"
+          aria-label={t('nextPage')}
          className={`${btnBase} border-slate-200 text-slate-500 hover:bg-slate-50 hover:text-slate-800 disabled:opacity-30 disabled:cursor-not-allowed`}
        >
          <ChevronIcon direction="right" />
--- a/src/widgets/history/ui/resultBadge.tsx
+++ b/src/widgets/history/ui/resultBadge.tsx
@@ -1,16 +1,18 @@
 'use client';
 import React from 'react';
+import { useTranslations } from 'next-intl';
 import { ResultBadgeProps } from '../lib/types';
 import { RESULT_CONFIG } from '../lib/constants';

 export const ResultBadge: React.FC<ResultBadgeProps> = ({ result }) => {
-  const { label, className } = RESULT_CONFIG[result];
+  const t = useTranslations('HistoryPage');
+  const { labelKey, className } = RESULT_CONFIG[result];

  return (
    <span
      className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium whitespace-nowrap ${className}`}
    >
-      {label}
+      {t(labelKey)}
    </span>
  );
 };
--- a/src/widgets/history/ui/tableStates.tsx
+++ b/src/widgets/history/ui/tableStates.tsx
@@ -1,31 +1,36 @@
 'use client';
 import React from 'react';
+import { useTranslations } from 'next-intl';
 import { EmptyStateProps, SkeletonRowProps } from '../lib/types';

 // ─── Empty State ───────────────────────────────────────────────────────────────

-export const EmptyState: React.FC<EmptyStateProps> = ({
-  message = 'No plagiarism checks found.',
-}) => (
-  <tr>
-    <td colSpan={6}>
-      <div className="flex flex-col items-center justify-center py-16 text-slate-400 gap-3">
-        <svg
-          width="40"
-          height="40"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          className="text-slate-300"
-        >
-          <path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-        </svg>
-        <span className="text-sm font-medium">{message}</span>
-      </div>
-    </td>
-  </tr>
-);
+export const EmptyState: React.FC<EmptyStateProps> = ({ message }) => {
+  const t = useTranslations('HistoryPage');
+
+  return (
+    <tr>
+      <td colSpan={6}>
+        <div className="flex flex-col items-center justify-center py-16 text-slate-400 gap-3">
+          <svg
+            width="40"
+            height="40"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            className="text-slate-300"
+          >
+            <path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+          </svg>
+          <span className="text-sm font-medium">
+            {message || t('emptyMessage')}
+          </span>
+        </div>
+      </td>
+    </tr>
+  );
+};

 // ─── Skeleton Row ──────────────────────────────────────────────────────────────

@@ -53,23 +58,27 @@ interface ErrorStateProps {
  onRetry: () => void;
 }

-export const ErrorState: React.FC<ErrorStateProps> = ({ message, onRetry }) => (
-  <tr>
-    <td colSpan={6}>
-      <div className="flex flex-col items-center justify-center py-14 gap-3">
-        <div className="flex items-center gap-2 text-red-600 text-sm font-medium">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
-          </svg>
-          {message}
+export const ErrorState: React.FC<ErrorStateProps> = ({ message, onRetry }) => {
+  const t = useTranslations('HistoryPage');
+
+  return (
+    <tr>
+      <td colSpan={6}>
+        <div className="flex flex-col items-center justify-center py-14 gap-3">
+          <div className="flex items-center gap-2 text-red-600 text-sm font-medium">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
+            </svg>
+            {message}
+          </div>
+          <button
+            onClick={onRetry}
+            className="text-xs text-slate-500 underline underline-offset-2 hover:text-slate-800 transition-colors"
+          >
+            {t('tryAgain')}
+          </button>
        </div>
-        <button
-          onClick={onRetry}
-          className="text-xs text-slate-500 underline underline-offset-2 hover:text-slate-800 transition-colors"
-        >
-          Try again
-        </button>
-      </div>
-    </td>
-  </tr>
-);
+      </td>
+    </tr>
+  );
+};
--- a/src/widgets/navbar/lib/data.ts
+++ b/src/widgets/navbar/lib/data.ts
@@ -1,8 +1,8 @@
 import { MenuItem } from './model';
 import { LanguageRoutes } from '@/shared/config/i18n/types';

-const menu: MenuItem[] = [
-  { title: 'About Site', url: '/about' },
+const getMenu = (t: (key: string) => string): MenuItem[] => [
+  { title: t('aboutSite'), url: '/about' },
  // {
  //   title: 'Products',
  //   url: '#',
@@ -16,7 +16,7 @@ const menu: MenuItem[] = [
  //   ],
  // },
  {
-    title: 'Contact',
+    title: t('contact'),
    url: '/contact',
  },
 ];
@@ -36,4 +36,4 @@ const languages: { name: string; key: LanguageRoutes }[] = [
  },
 ];

-export { menu, languages };
+export { getMenu, languages };
--- a/src/widgets/navbar/ui/authButtons.tsx
+++ b/src/widgets/navbar/ui/authButtons.tsx
@@ -11,16 +11,19 @@ import {
 import SubMenuLink from './SubMenuLink';
 import { ChangeLang } from './ChangeLang';
 import { useLoginModal, useRegisterModal } from '@/shared/zustand/auth';
+import { useTranslations } from 'next-intl';

 function AuthButtons() {
+  const t = useTranslations('Navbar');
+
  const auth = {
-    login: { title: 'Login', url: '#' },
-    signup: { title: 'Sign up', url: '#' },
+    login: { title: t('login'), url: '#' },
+    signup: { title: t('signup'), url: '#' },
  };

  const userItem = [
-    { title: 'Profile', url: '/profile' },
-    { title: 'Logout', url: '#' },
+    { title: t('profile'), url: '/profile' },
+    { title: t('logout'), url: '#' },
  ];

  const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
--- a/src/widgets/navbar/ui/index.tsx
+++ b/src/widgets/navbar/ui/index.tsx
@@ -8,13 +8,17 @@ import {
  SheetTrigger,
 } from '@/shared/ui/sheet';
 import { Menu } from 'lucide-react';
-import { menu } from '../lib/data';
+import { getMenu } from '../lib/data';
 import RenderMobileMenuItem from './RenderMobileMenuItem';
 import { ChangeLang } from './ChangeLang';
 import Link from 'next/link';
 import { AuthButtons } from './authButtons';
+import { useTranslations } from 'next-intl';

 const Navbar = () => {
+  const t = useTranslations('Navbar');
+  const menu = getMenu(t);
+
  return (
    <section className="py-4">
      <div className="custom-container">
@@ -26,7 +30,7 @@ const Navbar = () => {
              href={'/'}
              className="flex items-center gap-2 text-2xl font-bold "
            >
-              Plagat
+              {t('logo')}
            </Link>
            {/* <div className="flex items-center">
              <NavigationMenu>
@@ -44,7 +48,7 @@ const Navbar = () => {
          <div className="flex items-center justify-between">
            {/* Logo */}
            <Link href={'/'} className="flex items-center gap-2">
-              Plagat
+              {t('logo')}
            </Link>
            <Sheet>
              <div className="space-x-2">
@@ -59,7 +63,7 @@ const Navbar = () => {
                <SheetHeader>
                  <SheetTitle>
                    <Link href={'/'} className="flex items-center gap-2">
-                      Plagat
+                      {t('logo')}
                    </Link>
                  </SheetTitle>
                </SheetHeader>