Merge pull request #4 from DavronNabijonv/dev

Dev
2026-04-01 12:14:01 +05:00
parent e8c4bd7bd1 011845571f
commit 1efb97e4c9
42 changed files with 1885 additions and 122 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,9 +27,9 @@
        "@radix-ui/react-toggle-group": "^1.1.7",
        "@radix-ui/react-tooltip": "^1.2.4",
        "@tabler/icons-react": "^3.31.0",
-        "@tanstack/react-query": "^5.76.0",
+        "@tanstack/react-query": "^5.96.0",
        "@tanstack/react-table": "^8.21.3",
-        "axios": "^1.12.2",
+        "axios": "^1.14.0",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "dayjs": "^1.11.13",
@@ -40,6 +40,7 @@
        "next-themes": "^0.4.6",
        "react": "^19.1.2",
        "react-dom": "^19.1.2",
+        "react-toastify": "^11.0.5",
        "recharts": "^2.15.3",
        "sonner": "^2.0.3",
        "tailwind-merge": "^3.2.0",
@@ -3208,9 +3209,9 @@
      }
    },
    "node_modules/@tanstack/query-core": {
-      "version": "5.90.16",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.16.tgz",
-      "integrity": "sha512-MvtWckSVufs/ja463/K4PyJeqT+HMlJWtw6PrCpywznd2NSgO3m4KwO9RqbFqGg6iDE8vVMFWMeQI4Io3eEYww==",
+      "version": "5.96.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.96.0.tgz",
+      "integrity": "sha512-sfO3uQeol1BU7cRP6NYY7nAiX3GiNY20lI/dtSbKLwcIkYw/X+w/tEsQAkc544AfIhBX/IvH/QYtPHrPhyAKGw==",
      "license": "MIT",
      "funding": {
        "type": "github",
@@ -3218,12 +3219,12 @@
      }
    },
    "node_modules/@tanstack/react-query": {
-      "version": "5.90.16",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.16.tgz",
-      "integrity": "sha512-bpMGOmV4OPmif7TNMteU/Ehf/hoC0Kf98PDc0F4BZkFrEapRMEqI/V6YS0lyzwSV6PQpY1y4xxArUIfBW5LVxQ==",
+      "version": "5.96.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.96.0.tgz",
+      "integrity": "sha512-6qbjdm1K5kizVKv9TNqhIN3doq2anRhdF2XaFMFSn4m8L22S69RV+FilvlyVT4RoJyMxtPU5rs4RpdFa/PEC7A==",
      "license": "MIT",
      "dependencies": {
-        "@tanstack/query-core": "5.90.16"
+        "@tanstack/query-core": "5.96.0"
      },
      "funding": {
        "type": "github",
@@ -4240,14 +4241,14 @@
      }
    },
    "node_modules/axios": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
-      "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.14.0.tgz",
+      "integrity": "sha512-3Y8yrqLSwjuzpXuZ0oIYZ/XGgLwUIBU3uLvbcpb0pidD9ctpShJd43KSlEEkVQg6DS0G9NKyzOvBfUtDKEyHvQ==",
      "license": "MIT",
      "dependencies": {
-        "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.4",
-        "proxy-from-env": "^1.1.0"
+        "follow-redirects": "^1.15.11",
+        "form-data": "^4.0.5",
+        "proxy-from-env": "^2.1.0"
      }
    },
    "node_modules/axobject-query": {
@@ -7829,10 +7830,13 @@
      }
    },
    "node_modules/proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "license": "MIT"
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
    },
    "node_modules/punycode": {
      "version": "2.3.1",
@@ -7976,6 +7980,19 @@
        }
      }
    },
+    "node_modules/react-toastify": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",
+      "integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19",
+        "react-dom": "^18 || ^19"
+      }
+    },
    "node_modules/react-transition-group": {
      "version": "4.4.5",
      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
--- a/package.json
+++ b/package.json
@@ -30,9 +30,9 @@
    "@radix-ui/react-toggle-group": "^1.1.7",
    "@radix-ui/react-tooltip": "^1.2.4",
    "@tabler/icons-react": "^3.31.0",
-    "@tanstack/react-query": "^5.76.0",
+    "@tanstack/react-query": "^5.96.0",
    "@tanstack/react-table": "^8.21.3",
-    "axios": "^1.12.2",
+    "axios": "^1.14.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "dayjs": "^1.11.13",
@@ -43,6 +43,7 @@
    "next-themes": "^0.4.6",
    "react": "^19.1.2",
    "react-dom": "^19.1.2",
+    "react-toastify": "^11.0.5",
    "recharts": "^2.15.3",
    "sonner": "^2.0.3",
    "tailwind-merge": "^3.2.0",
--- a/src/app/[locale]/layout.tsx
+++ b/src/app/[locale]/layout.tsx
@@ -11,6 +11,7 @@ import { setRequestLocale } from 'next-intl/server';
 import QueryProvider from '@/shared/config/react-query/QueryProvider';
 import Script from 'next/script';
 import Provider from '@/features/providers/provider';
+import { ToastContainer } from 'react-toastify';

 type Props = {
  children: ReactNode;
@@ -45,6 +46,7 @@ export default async function RootLayout({ children, params }: Props) {
                <Navbar />
                {children}
                <Footer />
+                <ToastContainer position="top-center" />
              </Provider>
            </QueryProvider>
          </ThemeProvider>
--- a/src/app/[locale]/page.tsx
+++ b/src/app/[locale]/page.tsx
@@ -1,11 +1,9 @@
-import { PlagiarismCheckForm } from '@/widgets/fileUpload/ui/Plagiraismcheckform';
-import { HistoryPage } from '@/widgets/history';
+import PlagiarismLanding from '@/widgets/home';

 export default function Home() {
  return (
    <div className="bg-[#f4f5ffec]">
-      <PlagiarismCheckForm />
-      <HistoryPage />
+      <PlagiarismLanding />
    </div>
  );
 }
--- a/src/app/[locale]/plagat/page.tsx
+++ b/src/app/[locale]/plagat/page.tsx
@@ -0,0 +1,11 @@
+import { PlagiarismCheckForm } from '@/widgets/fileUpload/ui/Plagiraismcheckform';
+import { HistoryPage } from '@/widgets/history';
+
+export default function Page() {
+  return (
+    <div>
+      <PlagiarismCheckForm />
+      <HistoryPage />
+    </div>
+  );
+}
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,6 +1,10 @@
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,400&family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500&display=swap');
@import 'tailwindcss';
@import 'tw-animate-css';

+*, *::before, *::after { box-sizing: border-box;}
+html { scroll-behavior: smooth; }
+
@custom-variant dark (&:is(.dark *));

@theme inline {
--- a/src/features/auth/login/lib/useLoginForm.ts
+++ b/src/features/auth/login/lib/useLoginForm.ts
@@ -2,10 +2,35 @@

 import React, { useState } from 'react';
 import { useTranslations } from 'next-intl';
+import { useMutation } from '@tanstack/react-query';
+import { apiRequest } from '@/shared/request/apiRequest';
+import { links } from '@/shared/request/links';
+import { useLoginModal } from '@/shared/zustand/auth';
+import { toast } from 'react-toastify';
+
+interface LoginData {
+  phone: string;
+}

 export function useLoginForm() {
  const [phone, setPhone] = useState('');
  const [error, setError] = useState('');
+  const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
+  const loginReqest = useMutation({
+    mutationKey: ['login'],
+    mutationFn: (data: LoginData) => apiRequest('POST', links.login, data),
+    onSuccess: (data) => {
+      console.log('Login successful:', data);
+      toggleLoginModal();
+      toast.success('Kirish muvaffaqiyatli!');
+    },
+    onError: (err) => {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+      // toggleLoginModal();
+      console.error('Login failed:', err);
+      toast.error(err instanceof Error ? err.message : 'Unknown error');
+    },
+  });

  const t = useTranslations();

@@ -18,6 +43,7 @@ export function useLoginForm() {
      return;
    }

+    loginReqest.mutate({ phone: `+998${phone}` });
    sessionStorage.setItem('prev_page', 'login');
  };

--- a/src/features/auth/login/ui/form.tsx
+++ b/src/features/auth/login/ui/form.tsx
@@ -9,14 +9,19 @@ import {
 import PhonePrefix from '../../../../shared/ui/phonePrefix';
 import { MotionWrapper } from '../../../../shared/ui/motion';
 import { useLoginForm } from '../lib/useLoginForm';
-import { useLoginModal } from '@/shared/zustand/auth';
-import Link from 'next/link';
+import { useLoginModal, useRegisterModal } from '@/shared/zustand/auth';
+import { useTranslations } from 'next-intl';

 export function LoginForm() {
  const [isFocused, setIsFocused] = useState(false);
+  const t = useTranslations('Auth.Login');
+  const tCommon = useTranslations('Common');

  const { phone, setPhone, submit, error, loading } = useLoginForm();
  const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
+  const toggleRegisterModal = useRegisterModal(
+    (state) => state.toggleRegisterModal,
+  );

  const handlePhoneChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -49,14 +54,12 @@ export function LoginForm() {

            {/* Header */}
            <p className="mb-1 text-[0.65rem] font-semibold uppercase tracking-[0.16em] text-stone-400">
-              Xush kelibsiz
+              {t('welcome')}
            </p>
            <h1 className="mb-1 font-serif text-3xl leading-tight text-stone-900">
-              Kirish
+              {t('title')}
            </h1>
-            <p className="mb-8 text-sm text-stone-400">
-              Telefon raqamingizni kiriting.
-            </p>
+            <p className="mb-8 text-sm text-stone-400">{t('description')}</p>

            <form onSubmit={submit} noValidate className="flex flex-col gap-5">
              {/* Phone field */}
@@ -65,7 +68,7 @@ export function LoginForm() {
                  htmlFor="phone"
                  className="text-[0.7rem] font-medium tracking-widest uppercase text-stone-500"
                >
-                  Telefon raqam
+                  {t('phoneLabel')}
                </label>

                <div
@@ -75,7 +78,7 @@ export function LoginForm() {
                  <input
                    id="phone"
                    type="tel"
-                    placeholder="90 123 45 67"
+                    placeholder={t('phonePlaceholder')}
                    value={formatPhone(phone)}
                    onChange={handlePhoneChange}
                    onFocus={() => setIsFocused(true)}
@@ -98,11 +101,12 @@ export function LoginForm() {
                {/* Digit counter / complete hint */}
                <div className="flex items-center justify-between px-0.5">
                  <span className="text-[0.7rem] text-stone-400">
-                    {phone.length > 0 && `${phone.length} ta raqam kiritildi`}
+                    {phone.length > 0 &&
+                      t('digitsEntered', { count: phone.length })}
                  </span>
                  {phone.length === 9 && (
                    <span className="text-[0.7rem] font-medium text-emerald-600">
-                      ✓ To&lsquo;liq
+                      {tCommon('complete')}
                    </span>
                  )}
                </div>
@@ -130,10 +134,10 @@ export function LoginForm() {
                {loading ? (
                  <span className="flex items-center justify-center gap-2">
                    <span className="h-3.5 w-3.5 rounded-full border-2 border-stone-500 border-t-stone-100 animate-spin" />
-                    Yuborilmoqda…
+                    {t('sending')}
                  </span>
                ) : (
-                  'Kodni yuborish'
+                  t('sendCode')
                )}
              </button>

@@ -141,20 +145,23 @@ export function LoginForm() {
              <div className="relative flex items-center gap-3 py-1">
                <span className="h-px flex-1 bg-stone-200" />
                <span className="text-[0.65rem] font-medium uppercase tracking-widest text-stone-400">
-                  yoki
+                  {tCommon('or')}
                </span>
                <span className="h-px flex-1 bg-stone-200" />
              </div>

              {/* Register hint */}
-              <p className="text-center text-[0.78rem] text-stone-400">
-                Hisobingiz yo&lsquo;qmi?
-                <Link
-                  href="/register"
-                  className="text-stone-800 underline underline-offset-2 hover:text-stone-600 transition-colors"
+              <p className="text-center text-[0.78rem] text-stone-400 flex items-center justify-center gap-2">
+                {t('registerPrompt')}
+                <p
+                  onClick={() => {
+                    toggleLoginModal();
+                    toggleRegisterModal();
+                  }}
+                  className="text-stone-800 hover:cursor-pointer underline underline-offset-2 hover:text-stone-600 transition-colors"
                >
-                  Ro&lsquo;yxatdan o&lsquo;tish
-                </Link>
+                  {t('registerLink')}
+                </p>
              </p>
            </form>
          </div>
--- a/src/features/auth/register/lib/useRegisterForm.ts
+++ b/src/features/auth/register/lib/useRegisterForm.ts
@@ -3,13 +3,43 @@
 import { useCallback, useState } from 'react';
 import { useRegisterZustand } from './registerZustand';
 import { validateRegister, RegisterErrors } from './validateRegister';
+import { useRegisterModal } from '@/shared/zustand/auth';
+import { useMutation } from '@tanstack/react-query';
+import { apiRequest } from '@/shared/request/apiRequest';
+import { links } from '@/shared/request/links';
+import { toast } from 'react-toastify';
+
+interface RegisterData {
+  name: string;
+  surname: string;
+  phone: string;
+}

 export function useRegisterForm() {
  const { registerData, setItem, setOferta, clearRegisterData } =
    useRegisterZustand();
  const [errors, setErrors] = useState<RegisterErrors>({});
-  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);
+  const toggleRegisterModal = useRegisterModal(
+    (state) => state.toggleRegisterModal,
+  );
+
+  const registerRequest = useMutation({
+    mutationKey: ['register'],
+    mutationFn: (data: RegisterData) =>
+      apiRequest('POST', links.register, data),
+    onSuccess: (data) => {
+      console.log('Register successful:', data);
+      toggleRegisterModal();
+      setSuccess(true);
+      toast.success("Ro'yxatdan o'tish muvaffaqiyatli!");
+    },
+    onError: (err) => {
+      // toggleLoginModal();
+      console.error('Register failed:', err);
+      toast.error(err instanceof Error ? err.message : 'Unknown error');
+    },
+  });

  const handleChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -33,23 +63,12 @@ export function useRegisterForm() {
    async (e: React.FormEvent) => {
      e.preventDefault();
      const validationErrors = validateRegister(registerData);
+      console.log('register data on submit:', registerData);
      if (Object.keys(validationErrors).length > 0) {
        setErrors(validationErrors);
        return;
      }
-
-      setLoading(true);
-      try {
-        // Replace with your real API call:
-        // await api.post('/register', registerData);
-        await new Promise((r) => setTimeout(r, 1200)); // simulated delay
-        setSuccess(true);
-        clearRegisterData();
-      } catch {
-        setErrors({ name: 'Something went wrong. Please try again.' });
-      } finally {
-        setLoading(false);
-      }
+      registerRequest.mutate(registerData);
    },
    [registerData, clearRegisterData],
  );
@@ -57,10 +76,11 @@ export function useRegisterForm() {
  return {
    registerData,
    errors,
-    loading,
+    loading: registerRequest.isPending,
    success,
    handleChange,
    handleOferta,
    handleSubmit,
+    setItem,
  };
 }
--- a/src/features/auth/register/lib/validateRegister.ts
+++ b/src/features/auth/register/lib/validateRegister.ts
@@ -28,8 +28,8 @@ export function validateRegister(data: {
  const digits = data.phone.replace(/\D/g, '');
  if (!digits) {
    errors.phone = 'Phone is required';
-  } else if (digits.length !== 9) {
-    errors.phone = 'Enter a valid 9-digit phone number';
+  } else if (digits.length !== 9 && digits.length !== 12) {
+    errors.phone = 'Enter a valid 9-digit or 13-digit phone number';
  }

  if (!data.oferta) {
--- a/src/features/auth/register/ui/form.tsx
+++ b/src/features/auth/register/ui/form.tsx
@@ -4,6 +4,8 @@ import React, { useCallback } from 'react';
 import { useRegisterForm } from '../lib/useRegisterForm';
 import { formatPhone, normalizeDigits } from '@/shared/lib/formatPhone';
 import PhonePrefix from '@/shared/ui/phonePrefix';
+import { useTranslations } from 'next-intl';
+import { useLoginModal, useRegisterModal } from '@/shared/zustand/auth';

 function Field({
  id,
@@ -63,6 +65,10 @@ function Field({
 }

 export function RegisterFormUI() {
+  const [phone, setPhone] = React.useState('');
+  const t = useTranslations('Auth.Register');
+  const t_login = useTranslations('Auth.Login');
+  const tCommon = useTranslations('Common');
  const {
    registerData,
    errors,
@@ -71,16 +77,26 @@ export function RegisterFormUI() {
    handleChange,
    handleOferta,
    handleSubmit,
+    setItem,
  } = useRegisterForm();
-  const [phone, setPhone] = React.useState(registerData.phone || '');
+  const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
+  const toggleRegisterModal = useRegisterModal(
+    (state) => state.toggleRegisterModal,
+  );
  const [isFocused, setIsFocused] = React.useState(false);
  const handlePhoneChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      setPhone(normalizeDigits(e.target.value));
+      if (normalizeDigits(e.target.value).length === 9)
+        setItem('phone', `998${phone}`);
    },
    [setPhone],
  );

+  if (errors) {
+    console.log('Validation errors:', errors);
+  }
+
  // ── Success state ──────────────────────────────────────
  if (success) {
    return (
@@ -90,11 +106,9 @@ export function RegisterFormUI() {
            ✓
          </div>
          <h2 className="mb-1 font-serif text-2xl text-stone-900">
-            You&lsquo;re registered
+            {t('successTitle')}
          </h2>
-          <p className="text-sm text-stone-400">
-            We&lsquo;ll be in touch shortly.
-          </p>
+          <p className="text-sm text-stone-400">{t('successMessage')}</p>
        </div>
      </div>
    );
@@ -105,14 +119,12 @@ export function RegisterFormUI() {
    <div className="w-full">
      {/* Header */}
      <p className="mb-1 text-[0.65rem] font-semibold uppercase tracking-[0.16em] text-stone-400">
-        Create account
+        {t('headerLabel')}
      </p>
      <h1 className="mb-1 font-serif text-3xl leading-tight text-stone-900">
-        Register
+        {t('title')}
      </h1>
-      <p className="mb-8 text-sm text-stone-400">
-        Fill in your details to get started.
-      </p>
+      <p className="mb-8 text-sm text-stone-400">{t('description')}</p>

      <form onSubmit={handleSubmit} noValidate className="flex flex-col gap-5">
        {/* Name + Surname row */}
@@ -121,7 +133,7 @@ export function RegisterFormUI() {
            id="name"
            name="name"
            label="Name"
-            placeholder="Ali"
+            placeholder={t('namePlaceholder')}
            value={registerData.name}
            onChange={handleChange}
            error={errors.name}
@@ -130,7 +142,7 @@ export function RegisterFormUI() {
            id="surname"
            name="surname"
            label="Surname"
-            placeholder="Karimov"
+            placeholder={t('surnamePlaceholder')}
            value={registerData.surname}
            onChange={handleChange}
            error={errors.surname}
@@ -143,7 +155,7 @@ export function RegisterFormUI() {
            htmlFor="phone"
            className="text-[0.7rem] font-medium tracking-widest uppercase text-stone-500"
          >
-            Telefon raqam
+            {t('phoneLabel')}
          </label>
          <div
            className={`relative transition-transform duration-200 ${isFocused ? 'scale-[1.01]' : ''}`}
@@ -152,7 +164,7 @@ export function RegisterFormUI() {
            <input
              id="phone"
              type="tel"
-              placeholder="90 123 45 67"
+              placeholder={t('phonePlaceholder')}
              value={formatPhone(phone)}
              onChange={handlePhoneChange}
              onFocus={() => setIsFocused(true)}
@@ -173,11 +185,11 @@ export function RegisterFormUI() {
          {/* Digit counter / complete hint */}
          <div className="flex items-center justify-between px-0.5">
            <span className="text-[0.7rem] text-stone-400">
-              {phone.length > 0 && `${phone.length} ta raqam kiritildi`}
+              {phone.length > 0 && t('digitsEntered', { count: phone.length })}
            </span>
            {phone.length === 9 && (
              <span className="text-[0.7rem] font-medium text-emerald-600">
-                ✓ To&lsquo;liq
+                {tCommon('complete')}
              </span>
            )}
          </div>
@@ -197,24 +209,7 @@ export function RegisterFormUI() {
              htmlFor="oferta"
              className="cursor-pointer text-[0.78rem] leading-relaxed text-stone-500"
            >
-              I agree to the
-              <a
-                href="/terms"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-stone-800 underline underline-offset-2 hover:text-stone-600"
-              >
-                Terms of Service
-              </a>
-              and
-              <a
-                href="/privacy"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-stone-800 underline underline-offset-2 hover:text-stone-600"
-              >
-                Privacy Policy
-              </a>
+              {t('terms')}
            </label>
          </div>
          {errors.oferta && (
@@ -237,13 +232,36 @@ export function RegisterFormUI() {
          {loading ? (
            <span className="flex items-center justify-center gap-2">
              <span className="h-3.5 w-3.5 rounded-full border-2 border-stone-500 border-t-stone-100 animate-spin" />
-              Submitting…
+              {tCommon('submitting')}
            </span>
          ) : (
-            'Create account'
+            t('submitButton')
          )}
        </button>
      </form>
+
+      {/* Divider */}
+      <div className="relative flex items-center gap-3 py-1">
+        <span className="h-px flex-1 bg-stone-200" />
+        <span className="text-[0.65rem] font-medium uppercase tracking-widest text-stone-400">
+          {tCommon('or')}
+        </span>
+        <span className="h-px flex-1 bg-stone-200" />
+      </div>
+
+      {/* Register hint */}
+      <p className="text-center text-[0.78rem] text-stone-400 flex items-center justify-center gap-2">
+        {t('loginPrompt')}
+        <p
+          onClick={() => {
+            toggleLoginModal();
+            toggleRegisterModal();
+          }}
+          className="text-stone-800 hover:cursor-pointer underline underline-offset-2 hover:text-stone-600 transition-colors"
+        >
+          {t_login('title')}
+        </p>
+      </p>
    </div>
  );
 }
--- a/src/shared/config/i18n/messages/en.json
+++ b/src/shared/config/i18n/messages/en.json
@@ -100,5 +100,109 @@
    "downloadCertificate": "Download Certificate",
    "unknownError": "Unknown error",
    "words": "words"
+  },
+  "Hero": {
+    "badge": "Academic Integrity Platform",
+    "mainHeading": "Is Your Work",
+    "mainHeadingItalic": "Truly Original?",
+    "description": "Plagiarism is presenting someone else's ideas or words as your own. In academia and professional life, it carries serious consequences. Our platform detects it in seconds — so you can submit with full confidence.",
+    "certificateNote": "Certificate issued within 24h"
+  },
+  "Common": {
+    "startButton": "Start Checking →",
+    "complete": "✓ Complete",
+    "or": "or",
+    "submitting": "Submitting…",
+    "autoFilled": "Auto-filled",
+    "removeFile": "Remove file"
+  },
+  "InfoSection": {
+    "label": "Why It Matters",
+    "heading": "Understanding Plagiarism"
+  },
+  "StepsSection": {
+    "label": "Process",
+    "heading": "How It Works",
+    "description": "Six simple steps from upload to certified report.",
+    "ctaHeading": "Ready to verify your document?",
+    "ctaDescription": "Get your originality certificate in under 24 hours."
+  },
+  "Steps": {
+    "step1Title": "Click Start",
+    "step1Desc": "Begin your plagiarism check journey",
+    "step2Title": "Register or Log In",
+    "step2Desc": "Create an account or sign in to your existing one",
+    "step3Title": "Upload Document",
+    "step3Desc": "Upload your PDF, DOC, DOCX, or TXT file (max 20MB)",
+    "step4Title": "Send for Check",
+    "step4Desc": "Submit your document for comprehensive analysis",
+    "step5Title": "Complete Payment",
+    "step5Desc": "Pay securely for your plagiarism check service",
+    "step6Title": "Get Your Report",
+    "step6Desc": "Receive detailed results and certificate within 24 hours"
+  },
+  "Stats": {
+    "accuracy": "Detection accuracy",
+    "documents": "Documents checked",
+    "formats": "Supported formats",
+    "turnaround": "Report turnaround"
+  },
+  "InfoCards": {
+    "card1Title": "What is Plagiarism?",
+    "card1Desc": "Plagiarism occurs when someone uses another person's ideas, words, or work without proper credit. It can be intentional or unintentional.",
+    "card2Title": "Why Check Your Document?",
+    "card2Desc": "Ensure academic integrity, avoid penalties, and maintain your reputation. Our service provides comprehensive plagiarism detection.",
+    "card3Title": "What You Get",
+    "card3Desc": "Detailed plagiarism report, similarity percentage, matched sources, and an official certificate of originality."
+  },
+  "Ticker": {
+    "item1": "Originality Verified",
+    "item2": "Academic Integrity",
+    "item3": "Trusted Reports",
+    "item4": "Deep Analysis",
+    "item5": "Fast Results",
+    "item6": "Official Certificate"
+  },
+  "Auth": {
+    "Login": {
+      "welcome": "Welcome back",
+      "title": "Login",
+      "description": "Enter your phone number to continue.",
+      "phoneLabel": "Phone number",
+      "phonePlaceholder": "90 123 45 67",
+      "digitsEntered": "{count} digits entered",
+      "sending": "Sending…",
+      "sendCode": "Send code",
+      "registerPrompt": "Don't have an account?",
+      "registerLink": "Register"
+    },
+    "Register": {
+      "successTitle": "You're registered",
+      "successMessage": "We'll be in touch shortly.",
+      "headerLabel": "Create account",
+      "title": "Register",
+      "description": "Fill in your details to get started.",
+      "phoneLabel": "Phone number",
+      "phonePlaceholder": "90 123 45 67",
+      "digitsEntered": "{count} digits entered",
+      "namePlaceholder": "Ali",
+      "surnamePlaceholder": "Karimov",
+      "terms": "I agree to the Terms of Service and Privacy Policy",
+      "submitButton": "Create account",
+      "loginPrompt": "Already have an account?"
+    }
+  },
+  "Payment": {
+    "title": "Payment",
+    "description": "Review your order and pay securely",
+    "orderSummary": "Order Summary",
+    "certificateIncluded": "Certificate of completion included",
+    "paymentMethod": "Payment Method",
+    "security": "Secured by Payme · SSL encrypted",
+    "serviceFee": "Service fee",
+    "certificateLabel": "Certificate",
+    "total": "Total",
+    "connecting": "Connecting to Payme…",
+    "payButton": "Pay with Payme"
  }
 }
--- a/src/shared/config/i18n/messages/ru.json
+++ b/src/shared/config/i18n/messages/ru.json
@@ -100,5 +100,109 @@
    "downloadCertificate": "Скачать сертификат",
    "unknownError": "Неизвестная ошибка",
    "words": "слов"
+  },
+  "Hero": {
+    "badge": "Платформа академической честности",
+    "mainHeading": "Ваша работа",
+    "mainHeadingItalic": "Действительно оригинальна?",
+    "description": "Плагиат - это представление идей или слов другого человека как своих собственных. В академической и профессиональной жизни это несет серьезные последствия. Наша платформа обнаруживает его за секунды — чтобы вы могли отправлять с полной уверенностью.",
+    "certificateNote": "Сертификат выдается в течение 24 часов"
+  },
+  "Common": {
+    "startButton": "Начать проверку →",
+    "complete": "✓ Завершено",
+    "or": "или",
+    "submitting": "Отправка…",
+    "autoFilled": "Автозаполнено",
+    "removeFile": "Удалить файл"
+  },
+  "InfoSection": {
+    "label": "Почему это важно",
+    "heading": "Понимание плагиата"
+  },
+  "StepsSection": {
+    "label": "Процесс",
+    "heading": "Как это работает",
+    "description": "Шесть простых шагов от загрузки до сертифицированного отчета.",
+    "ctaHeading": "Готовы проверить ваш документ?",
+    "ctaDescription": "Получите сертификат оригинальности менее чем за 24 часа."
+  },
+  "Steps": {
+    "step1Title": "Нажмите Начать",
+    "step1Desc": "Начните ваше путешествие по проверке на плагиат",
+    "step2Title": "Зарегистрируйтесь или войдите",
+    "step2Desc": "Создайте аккаунт или войдите в существующий",
+    "step3Title": "Загрузите документ",
+    "step3Desc": "Загрузите ваш PDF, DOC, DOCX или TXT файл (макс 20МБ)",
+    "step4Title": "Отправьте на проверку",
+    "step4Desc": "Отправьте ваш документ на комплексный анализ",
+    "step5Title": "Завершите оплату",
+    "step5Desc": "Оплатите безопасно услугу проверки на плагиат",
+    "step6Title": "Получите ваш отчет",
+    "step6Desc": "Получите подробные результаты и сертификат в течение 24 часов"
+  },
+  "Stats": {
+    "accuracy": "Точность обнаружения",
+    "documents": "Проверено документов",
+    "formats": "Поддерживаемые форматы",
+    "turnaround": "Время выполнения отчета"
+  },
+  "InfoCards": {
+    "card1Title": "Что такое плагиат?",
+    "card1Desc": "Плагиат происходит, когда кто-то использует идеи, слова или работу другого человека без надлежащего указания. Это может быть преднамеренным или непреднамеренным.",
+    "card2Title": "Почему проверять ваш документ?",
+    "card2Desc": "Обеспечьте академическую честность, избегайте штрафов и поддерживайте вашу репутацию. Наш сервис предоставляет комплексное обнаружение плагиата.",
+    "card3Title": "Что вы получаете",
+    "card3Desc": "Подробный отчет о плагиате, процент схожести, найденные источники и официальный сертификат оригинальности."
+  },
+  "Ticker": {
+    "item1": "Оригинальность подтверждена",
+    "item2": "Академическая честность",
+    "item3": "Надежные отчеты",
+    "item4": "Глубокий анализ",
+    "item5": "Быстрые результаты",
+    "item6": "Официальный сертификат"
+  },
+  "Auth": {
+    "Login": {
+      "welcome": "Добро пожаловать обратно",
+      "title": "Вход",
+      "description": "Введите ваш номер телефона для продолжения.",
+      "phoneLabel": "Номер телефона",
+      "phonePlaceholder": "90 123 45 67",
+      "digitsEntered": "Введено {count} цифр",
+      "sending": "Отправка…",
+      "sendCode": "Отправить код",
+      "registerPrompt": "Нет аккаунта?",
+      "registerLink": "Зарегистрироваться"
+    },
+    "Register": {
+      "successTitle": "Вы зарегистрированы",
+      "successMessage": "Мы свяжемся с вами в ближайшее время.",
+      "headerLabel": "Создать аккаунт",
+      "title": "Регистрация",
+      "description": "Заполните ваши данные, чтобы начать.",
+      "phoneLabel": "Номер телефона",
+      "phonePlaceholder": "90 123 45 67",
+      "digitsEntered": "Введено {count} цифр",
+      "namePlaceholder": "Али",
+      "surnamePlaceholder": "Каримов",
+      "terms": "Я согласен с Условиями обслуживания и Политикой конфиденциальности",
+      "submitButton": "Создать аккаунт",
+      "loginPrompt": "Уже есть аккаунт?"
+    }
+  },
+  "Payment": {
+    "title": "Оплата",
+    "description": "Просмотрите ваш заказ и оплатите безопасно",
+    "orderSummary": "Сводка заказа",
+    "certificateIncluded": "Включен сертификат завершения",
+    "paymentMethod": "Способ оплаты",
+    "security": "Защищено Payme · SSL шифрование",
+    "serviceFee": "Стоимость услуги",
+    "certificateLabel": "Сертификат",
+    "total": "Итого",
+    "connecting": "Подключение к Payme…",
+    "payButton": "Оплатить через Payme"
  }
 }
--- a/src/shared/config/i18n/messages/uz.d.json.ts
+++ b/src/shared/config/i18n/messages/uz.d.json.ts
@@ -95,7 +95,7 @@ declare const messages: {
    processedAt: 'Qayta ishlangan';
    certificate: 'Sertifikat';
    noCertificate: 'Bu tekshiruv uchun sertifikat berilmagan.';
-    noCertificateHighSimilarity: "Yuoqori o'xshashlik natijasida sertifikatlar berilmaydi.";
+    noCertificateHighSimilarity: "Yuqori o'xshashlik natijasida sertifikatlar berilmaydi.";
    issued: 'Berilgan';
    expires: 'Muddati tugaydi';
    issuer: 'Beruvchi';
@@ -104,5 +104,109 @@ declare const messages: {
    unknownError: "Noma'lum xato";
    words: "so'z";
  };
+  Hero: {
+    badge: 'Akademik halollik platformasi';
+    mainHeading: 'Sizning ishingiz';
+    mainHeadingItalic: 'Haqiqatan ham originalmi?';
+    description: "Plagiat - bu boshqa birovning g'oyalarini yoki so'zlarini o'z g'oyalar yoki so'zlari sifatida taqdim etish. Akademik va professional hayotda bu jiddiy oqibatlarga olib keladi. Bizning platformamiz buni soniyalar ichida aniqlaydi — shuning uchun siz to'liq ishonch bilan yuborishingiz mumkin.";
+    certificateNote: 'Sertifikat 24 soat ichida beriladi';
+  };
+  Common: {
+    startButton: 'Tekshirishni boshlash →';
+    complete: "✓ To'liq";
+    or: 'yoki';
+    submitting: 'Yuborilmoqda…';
+    autoFilled: "Avto-to'ldirilgan";
+    removeFile: 'Faylni olib tashlash';
+  };
+  InfoSection: {
+    label: 'Nima uchun bu muhim';
+    heading: 'Plagiatni tushunish';
+  };
+  StepsSection: {
+    label: 'Jarayon';
+    heading: 'Bu qanday ishlaydi';
+    description: 'Yuklashdan sertifikatlangan hisobotgacha oltita oddiy qadam.';
+    ctaHeading: 'Hujjatingizni tekshirishga tayyormisiz?';
+    ctaDescription: '24 soat ichida orijinallik sertifikatini oling.';
+  };
+  Steps: {
+    step1Title: 'Boshlash tugmasini bosing';
+    step1Desc: 'Plagiat tekshiruvi sayohatini boshlang';
+    step2Title: "Ro'yxatdan o'ting yoki kiring";
+    step2Desc: 'Hisob yarating yoki mavjud hisobingizga kiring';
+    step3Title: 'Hujjatni yuklang';
+    step3Desc: 'PDF, DOC, DOCX yoki TXT faylingizni yuklang (maks 20MB)';
+    step4Title: 'Tekshirish uchun yuboring';
+    step4Desc: 'Hujjatingizni kompleks tahlil uchun yuboring';
+    step5Title: "To'lovni amalga oshiring";
+    step5Desc: "Plagiat tekshiruvi xizmatini xavfsiz to'lang";
+    step6Title: 'Hisobotingizni oling';
+    step6Desc: '24 soat ichida batafsil natijalar va sertifikatni oling';
+  };
+  Stats: {
+    accuracy: 'Aniqlash aniqligi';
+    documents: 'Tekshirilgan hujjatlar';
+    formats: "Qo'llab-quvvatlangan formatlar";
+    turnaround: 'Hisobot tayyorlanish vaqti';
+  };
+  InfoCards: {
+    card1Title: 'Plagiat nima?';
+    card1Desc: "Plagiat - bu kimdir boshqa birovning g'oyalarini, so'zlarini yoki ishini tegishli kredit bermay ishlatganda yuzaga keladi. Bu qasddan yoki qasdsiz bo'lishi mumkin.";
+    card2Title: 'Nima uchun hujjatingizni tekshirish kerak?';
+    card2Desc: "Akademik halollikni ta'minlang, jarimalardan qoching va obro'ingizni saqlang. Bizning xizmatimiz kompleks plagiat aniqlashni taqdim etadi.";
+    card3Title: 'Siz nima olasiz';
+    card3Desc: "Batafsil plagiat hisoboti, o'xshashlik foizi, topilgan manbalar va orijinallikning rasmiy sertifikati.";
+  };
+  Ticker: {
+    item1: 'Orijinallik tasdiqlangan';
+    item2: 'Akademik halollik';
+    item3: 'Ishonchli hisobotlar';
+    item4: 'Chuqur tahlil';
+    item5: 'Tez natijalar';
+    item6: 'Rasmiy sertifikat';
+  };
+  Auth: {
+    Login: {
+      welcome: 'Xush kelibsiz';
+      title: 'Kirish';
+      description: 'Davomini davom ettirish uchun telefon raqamingizni kiriting.';
+      phoneLabel: 'Telefon raqami';
+      phonePlaceholder: '90 123 45 67';
+      digitsEntered: '{count} ta raqam kiritildi';
+      sending: 'Yuborilmoqda…';
+      sendCode: 'Kodni yuborish';
+      registerPrompt: "Hisobingiz yo'qmi?";
+      registerLink: "Ro'yxatdan o'tish";
+    };
+    Register: {
+      successTitle: "Siz ro'yxatdan o'tdingiz";
+      successMessage: "Tez orada siz bilan bog'lanamiz.";
+      headerLabel: 'Hisob yaratish';
+      title: "Ro'yxatdan o'tish";
+      description: "Boshlash uchun ma'lumotlaringizni to'ldiring.";
+      phoneLabel: 'Telefon raqami';
+      phonePlaceholder: '90 123 45 67';
+      digitsEntered: '{count} ta raqam kiritildi';
+      namePlaceholder: 'Ali';
+      surnamePlaceholder: 'Karimov';
+      terms: "Men Xizmat ko'rsatish shartlari va Maxfiylik siyosatiga roziman";
+      submitButton: 'Hisob yaratish';
+      loginPrompt: 'Hisobingiz bormi?';
+    };
+  };
+  Payment: {
+    title: "To'lov";
+    description: "Buyurtmangizni ko'rib chiqing va xavfsiz to'lang";
+    orderSummary: "Buyurtma umumiy ko'rinishi";
+    certificateIncluded: 'Tugallanish sertifikati kiritilgan';
+    paymentMethod: "To'lov usuli";
+    security: 'Payme tomonidan himoyalangan · SSL shifrlash';
+    serviceFee: "Xizmat to'lovi";
+    certificateLabel: 'Sertifikat';
+    total: 'Jami';
+    connecting: 'Paymega ulanmoqda…';
+    payButton: "Payme orqali to'lash";
+  };
 };
 export default messages;
--- a/src/shared/config/i18n/messages/uz.json
+++ b/src/shared/config/i18n/messages/uz.json
@@ -92,7 +92,7 @@
    "processedAt": "Qayta ishlangan",
    "certificate": "Sertifikat",
    "noCertificate": "Bu tekshiruv uchun sertifikat berilmagan.",
-    "noCertificateHighSimilarity": "Yuoqori o'xshashlik natijasida sertifikatlar berilmaydi.",
+    "noCertificateHighSimilarity": "Yuqori o'xshashlik natijasida sertifikatlar berilmaydi.",
    "issued": "Berilgan",
    "expires": "Muddati tugaydi",
    "issuer": "Beruvchi",
@@ -100,5 +100,109 @@
    "downloadCertificate": "Sertifikatni yuklab olish",
    "unknownError": "Noma'lum xato",
    "words": "so'z"
+  },
+  "Hero": {
+    "badge": "Akademik halollik platformasi",
+    "mainHeading": "Sizning ishingiz",
+    "mainHeadingItalic": "Haqiqatan ham originalmi?",
+    "description": "Plagiat - bu boshqa birovning g'oyalarini yoki so'zlarini o'z g'oyalar yoki so'zlari sifatida taqdim etish. Akademik va professional hayotda bu jiddiy oqibatlarga olib keladi. Bizning platformamiz buni soniyalar ichida aniqlaydi — shuning uchun siz to'liq ishonch bilan yuborishingiz mumkin.",
+    "certificateNote": "Sertifikat 24 soat ichida beriladi"
+  },
+  "Common": {
+    "startButton": "Tekshirishni boshlash →",
+    "complete": "✓ To'liq",
+    "or": "yoki",
+    "submitting": "Yuborilmoqda…",
+    "autoFilled": "Avto-to'ldirilgan",
+    "removeFile": "Faylni olib tashlash"
+  },
+  "InfoSection": {
+    "label": "Nima uchun bu muhim",
+    "heading": "Plagiatni tushunish"
+  },
+  "StepsSection": {
+    "label": "Jarayon",
+    "heading": "Bu qanday ishlaydi",
+    "description": "Yuklashdan sertifikatlangan hisobotgacha oltita oddiy qadam.",
+    "ctaHeading": "Hujjatingizni tekshirishga tayyormisiz?",
+    "ctaDescription": "24 soat ichida orijinallik sertifikatini oling."
+  },
+  "Steps": {
+    "step1Title": "Boshlash tugmasini bosing",
+    "step1Desc": "Plagiat tekshiruvi sayohatini boshlang",
+    "step2Title": "Ro'yxatdan o'ting yoki kiring",
+    "step2Desc": "Hisob yarating yoki mavjud hisobingizga kiring",
+    "step3Title": "Hujjatni yuklang",
+    "step3Desc": "PDF, DOC, DOCX yoki TXT faylingizni yuklang (maks 20MB)",
+    "step4Title": "Tekshirish uchun yuboring",
+    "step4Desc": "Hujjatingizni kompleks tahlil uchun yuboring",
+    "step5Title": "To'lovni amalga oshiring",
+    "step5Desc": "Plagiat tekshiruvi xizmatini xavfsiz to'lang",
+    "step6Title": "Hisobotingizni oling",
+    "step6Desc": "24 soat ichida batafsil natijalar va sertifikatni oling"
+  },
+  "Stats": {
+    "accuracy": "Aniqlash aniqligi",
+    "documents": "Tekshirilgan hujjatlar",
+    "formats": "Qo'llab-quvvatlangan formatlar",
+    "turnaround": "Hisobot tayyorlanish vaqti"
+  },
+  "InfoCards": {
+    "card1Title": "Plagiat nima?",
+    "card1Desc": "Plagiat - bu kimdir boshqa birovning g'oyalarini, so'zlarini yoki ishini tegishli kredit bermay ishlatganda yuzaga keladi. Bu qasddan yoki qasdsiz bo'lishi mumkin.",
+    "card2Title": "Nima uchun hujjatingizni tekshirish kerak?",
+    "card2Desc": "Akademik halollikni ta'minlang, jarimalardan qoching va obro'ingizni saqlang. Bizning xizmatimiz kompleks plagiat aniqlashni taqdim etadi.",
+    "card3Title": "Siz nima olasiz",
+    "card3Desc": "Batafsil plagiat hisoboti, o'xshashlik foizi, topilgan manbalar va orijinallikning rasmiy sertifikati."
+  },
+  "Ticker": {
+    "item1": "Orijinallik tasdiqlangan",
+    "item2": "Akademik halollik",
+    "item3": "Ishonchli hisobotlar",
+    "item4": "Chuqur tahlil",
+    "item5": "Tez natijalar",
+    "item6": "Rasmiy sertifikat"
+  },
+  "Auth": {
+    "Login": {
+      "welcome": "Xush kelibsiz",
+      "title": "Kirish",
+      "description": "Davomini davom ettirish uchun telefon raqamingizni kiriting.",
+      "phoneLabel": "Telefon raqami",
+      "phonePlaceholder": "90 123 45 67",
+      "digitsEntered": "{count} ta raqam kiritildi",
+      "sending": "Yuborilmoqda…",
+      "sendCode": "Kodni yuborish",
+      "registerPrompt": "Hisobingiz yo'qmi?",
+      "registerLink": "Ro'yxatdan o'tish"
+    },
+    "Register": {
+      "successTitle": "Siz ro'yxatdan o'tdingiz",
+      "successMessage": "Tez orada siz bilan bog'lanamiz.",
+      "headerLabel": "Hisob yaratish",
+      "title": "Ro'yxatdan o'tish",
+      "description": "Boshlash uchun ma'lumotlaringizni to'ldiring.",
+      "phoneLabel": "Telefon raqami",
+      "phonePlaceholder": "90 123 45 67",
+      "digitsEntered": "{count} ta raqam kiritildi",
+      "namePlaceholder": "Ali",
+      "surnamePlaceholder": "Karimov",
+      "terms": "Men Xizmat ko'rsatish shartlari va Maxfiylik siyosatiga roziman",
+      "submitButton": "Hisob yaratish",
+      "loginPrompt": "Hisobingiz bormi?"
+    }
+  },
+  "Payment": {
+    "title": "To'lov",
+    "description": "Buyurtmangizni ko'rib chiqing va xavfsiz to'lang",
+    "orderSummary": "Buyurtma umumiy ko'rinishi",
+    "certificateIncluded": "Tugallanish sertifikati kiritilgan",
+    "paymentMethod": "To'lov usuli",
+    "security": "Payme tomonidan himoyalangan · SSL shifrlash",
+    "serviceFee": "Xizmat to'lovi",
+    "certificateLabel": "Sertifikat",
+    "total": "Jami",
+    "connecting": "Paymega ulanmoqda…",
+    "payButton": "Payme orqali to'lash"
  }
 }
--- a/src/shared/request/apiRequest.ts
+++ b/src/shared/request/apiRequest.ts
@@ -0,0 +1,29 @@
+import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
+
+import { getRouteLang } from './getLanguage';
+
+const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
+
+const api = axios.create({
+  baseURL: baseUrl,
+});
+
+export const apiRequest = async <T>(
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE',
+  url: string,
+  data?: unknown,
+  config?: Omit<AxiosRequestConfig, 'method' | 'url' | 'data'>,
+): Promise<T> => {
+  const response: AxiosResponse<T> = await api.request<T>({
+    method,
+    url,
+    data,
+    ...config,
+    headers: {
+      'Accept-Language': getRouteLang(), // evaluated per-request
+      ...config?.headers,
+    },
+  });
+
+  return response.data;
+};
--- a/src/shared/request/getLanguage.ts
+++ b/src/shared/request/getLanguage.ts
@@ -0,0 +1,30 @@
+const defaultLocale = 'uz';
+const locales = ['uz', 'ru', 'en'] as const;
+
+export function getRouteLang(): string {
+  if (typeof window === 'undefined') return defaultLocale;
+
+  // 1)Fall back to the first non-empty pathname segment
+  const rawSegments = window.location.pathname.split('/'); // e.g. ['', 'uz', 'path', ...]
+  const segments = rawSegments.filter(Boolean); // removes empty strings
+  if (segments.length > 0) {
+    const candidate = segments[0]; // first segment after root
+    if (locales.includes(candidate as (typeof locales)[number]))
+      return candidate;
+  }
+
+  // 2) Try cookie NEXT_LOCALE first (language switcher sets it)
+  const cookieMatch = document.cookie
+    .split(';')
+    .map((c) => c.trim())
+    .find((c) => c.startsWith('NEXT_LOCALE='));
+
+  if (cookieMatch) {
+    const cookieLang = cookieMatch.split('=')[1];
+    if (locales.includes(cookieLang as (typeof locales)[number]))
+      return cookieLang;
+  }
+
+  // 3) final fallback
+  return defaultLocale;
+}
--- a/src/shared/request/links.ts
+++ b/src/shared/request/links.ts
@@ -0,0 +1,4 @@
+export const links = {
+  login: '/users/login/',
+  register: '/users/register/',
+};
--- a/src/shared/request/plagiarismapi.ts
+++ b/src/shared/request/plagiarismapi.ts
--- a/src/widgets/detail/index.tsx
+++ b/src/widgets/detail/index.tsx
@@ -15,7 +15,7 @@ interface InfoRowProps {

 export const InfoRow: React.FC<InfoRowProps> = ({ label, value, icon }) => (
  <div className="flex items-start justify-between gap-4 py-3 border-b border-slate-100 last:border-0">
-    <span className="flex items-center gap-2 text-sm font-medium text-slate-500 min-w-[140px]">
+    <span className="flex items-center gap-2 text-sm font-medium text-slate-500 min-w-35">
      {icon && <span className="text-slate-400">{icon}</span>}
      {label}
    </span>
@@ -150,7 +150,7 @@ export const SimilarityMeter: React.FC<SimilarityMeterProps> = ({
    {/* Track */}
    <div className="relative h-3 bg-slate-100 rounded-full overflow-hidden">
      <div
-        className={`absolute inset-y-0 left-0 rounded-full bg-gradient-to-r ${levelColors[level]} transition-all duration-700`}
+        className={`absolute inset-y-0 left-0 rounded-full bg-linear-to-r ${levelColors[level]} transition-all duration-700`}
        style={{ width: `${percentage}%` }}
      />
      {/* Threshold markers */}
@@ -211,7 +211,7 @@ export const Avatar: React.FC<AvatarProps> = ({

  return (
    <div
-      className={`${sizeMap[size]} rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 flex items-center justify-center text-white font-bold ring-2 ring-white`}
+      className={`${sizeMap[size]} rounded-full bg-linear-to-br from-violet-500 to-indigo-600 flex items-center justify-center text-white font-bold ring-2 ring-white`}
    >
      {initials}
    </div>
--- a/src/widgets/fileUpload/lib/usePlagiraism.ts
+++ b/src/widgets/fileUpload/lib/usePlagiraism.ts
@@ -7,7 +7,7 @@ import {
 } from './types';
 import { selectFullName, useUserStore } from './userStore';
 import { isFormValid, validatePlagiarismForm } from './validation';
-import { submitPlagiarismCheck } from '@/request/plagiarismapi';
+import { submitPlagiarismCheck } from '@/shared/request/plagiarismapi';

 // ─── Initial States ──────────────────────────────────────────────────────────

--- a/src/widgets/home/animations.ts
+++ b/src/widgets/home/animations.ts
@@ -0,0 +1,15 @@
+import type { Variants } from 'framer-motion';
+
+export const fadeUp = (delay = 0): Variants => ({
+  hidden: { opacity: 0, y: 28 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.65, delay, ease: [0.22, 1, 0.36, 1] },
+  },
+});
+
+export const stagger: Variants = {
+  hidden: {},
+  visible: { transition: { staggerChildren: 0.1 } },
+};
--- a/src/widgets/home/components/Badge.tsx
+++ b/src/widgets/home/components/Badge.tsx
@@ -0,0 +1,43 @@
+import type { FC, ReactNode } from 'react';
+import { motion } from 'framer-motion';
+import { C } from '../tokens';
+
+interface BadgeProps {
+  children: ReactNode;
+}
+
+const Badge: FC<BadgeProps> = ({ children }) => (
+  <motion.span
+    initial={{ opacity: 0, scale: 0.88 }}
+    animate={{ opacity: 1, scale: 1 }}
+    transition={{ delay: 0.15, duration: 0.5, ease: 'backOut' }}
+    style={{
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 7,
+      padding: '5px 14px',
+      borderRadius: 999,
+      border: `1px solid ${C.accent}33`,
+      background: C.accentLight,
+      color: C.accent,
+      fontSize: 11,
+      fontFamily: "'DM Mono', monospace",
+      letterSpacing: '0.12em',
+      textTransform: 'uppercase',
+      marginBottom: 24,
+    }}
+  >
+    <span
+      style={{
+        width: 6,
+        height: 6,
+        borderRadius: '50%',
+        background: C.accent,
+        display: 'inline-block',
+      }}
+    />
+    {children}
+  </motion.span>
+);
+
+export default Badge;
--- a/src/widgets/home/components/DocIllustration.tsx
+++ b/src/widgets/home/components/DocIllustration.tsx
@@ -0,0 +1,137 @@
+import type { FC } from 'react';
+import { motion } from 'framer-motion';
+import { C } from '../tokens';
+import { DOC_LINE_WIDTHS } from '../constants';
+
+const DocIllustration: FC = () => (
+  <motion.div
+    initial={{ opacity: 0, x: 40, rotate: 2 }}
+    animate={{ opacity: 1, x: 0, rotate: 0 }}
+    transition={{ delay: 0.5, duration: 0.9, ease: [0.22, 1, 0.36, 1] }}
+    style={{ position: 'relative', width: 300, flexShrink: 0 }}
+  >
+    {/* Shadow card behind */}
+    <div
+      style={{
+        position: 'absolute',
+        top: 18,
+        left: 18,
+        width: 240,
+        height: 300,
+        background: C.border,
+        borderRadius: 10,
+        transform: 'rotate(4deg)',
+      }}
+    />
+
+    {/* Main document card */}
+    <div
+      style={{
+        position: 'relative',
+        width: 240,
+        background: C.surface,
+        borderRadius: 10,
+        border: `1px solid ${C.border}`,
+        boxShadow: `0 12px 40px ${C.shadowMd}`,
+        padding: 28,
+      }}
+    >
+      {/* Card header */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 10,
+          marginBottom: 20,
+        }}
+      >
+        <div
+          style={{
+            width: 32,
+            height: 32,
+            borderRadius: 8,
+            background: C.accentLight,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: 16,
+          }}
+        >
+          📄
+        </div>
+        <div>
+          <div
+            style={{
+              height: 8,
+              width: 80,
+              background: C.border,
+              borderRadius: 4,
+              marginBottom: 5,
+            }}
+          />
+          <div
+            style={{
+              height: 6,
+              width: 50,
+              background: C.border,
+              borderRadius: 4,
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Skeleton lines */}
+      {DOC_LINE_WIDTHS.map((w, i) => (
+        <div
+          key={i}
+          style={{
+            height: 7,
+            width: `${w}%`,
+            background: i === 2 ? `${C.accent}18` : C.surfaceWarm,
+            borderRadius: 4,
+            marginBottom: 8,
+          }}
+        />
+      ))}
+
+      {/* Similarity warning */}
+      <div
+        style={{
+          marginTop: 16,
+          padding: '8px 12px',
+          background: '#FFF8E1',
+          borderLeft: `3px solid ${C.gold}`,
+          borderRadius: '0 4px 4px 0',
+          fontSize: 11,
+          color: C.gold,
+          fontFamily: "'DM Mono', monospace",
+          letterSpacing: '0.05em',
+        }}
+      >
+        ⚠ 12% similarity found
+      </div>
+
+      {/* Verified badge */}
+      <div
+        style={{
+          position: 'absolute',
+          top: -12,
+          right: -12,
+          background: C.green,
+          color: '#fff',
+          borderRadius: 999,
+          padding: '4px 12px',
+          fontSize: 10,
+          fontFamily: "'DM Mono', monospace",
+          letterSpacing: '0.06em',
+          fontWeight: 500,
+          boxShadow: `0 4px 12px ${C.green}44`,
+        }}
+      >
+        ✓ VERIFIED
+      </div>
+    </div>
+  </motion.div>
+);
+
+export default DocIllustration;
--- a/src/widgets/home/components/Hero.tsx
+++ b/src/widgets/home/components/Hero.tsx
@@ -0,0 +1,202 @@
+'use client';
+import {
+  motion,
+  useScroll,
+  useTransform,
+  type MotionStyle,
+} from 'framer-motion';
+import { fadeUp, stagger } from '../animations';
+import { C } from '../tokens';
+import { STATS } from '../constants';
+import { useIsMobile } from '../hooks/useIsMobile';
+import Badge from './Badge';
+import DocIllustration from './DocIllustration';
+import Section from './Section';
+import Stat from './Stat';
+import StartButton from './StartButton';
+import { useTranslations } from 'next-intl';
+import { useLoginModal } from '@/shared/zustand/auth';
+
+const Hero = () => {
+  const isMobile = useIsMobile();
+  const t = useTranslations('Hero');
+  const tStats = useTranslations('Stats');
+  const { scrollY } = useScroll();
+  const blobY = useTransform(scrollY, [0, 600], [0, 80]);
+  const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
+
+  const getTranslatedLabel = (label: string) => {
+    switch (label) {
+      case 'Detection accuracy':
+        return tStats('accuracy');
+      case 'Documents checked':
+        return tStats('documents');
+      case 'Supported formats':
+        return tStats('formats');
+      case 'Report turnaround':
+        return tStats('turnaround');
+      default:
+        return label;
+    }
+  };
+
+  return (
+    <div style={{ position: 'relative', overflow: 'hidden', background: C.bg }}>
+      {/* Dot grid background */}
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          pointerEvents: 'none',
+          backgroundImage: `radial-gradient(circle, ${C.borderDark} 1px, transparent 1px)`,
+          backgroundSize: '28px 28px',
+          opacity: 0.4,
+          maskImage:
+            'radial-gradient(ellipse 70% 60% at 65% 40%, black, transparent)',
+        }}
+      />
+
+      {/* Ambient glow blob */}
+      <motion.div
+        style={
+          {
+            position: 'absolute',
+            width: 700,
+            height: 500,
+            borderRadius: '50%',
+            background: `radial-gradient(circle, ${C.accentLight} 0%, transparent 70%)`,
+            right: -100,
+            top: -60,
+            pointerEvents: 'none',
+            y: blobY,
+          } as MotionStyle
+        }
+      />
+
+      <Section
+        style={{
+          paddingTop: 88,
+          paddingBottom: 96,
+          position: 'relative',
+          zIndex: 1,
+        }}
+      >
+        {/* Main row */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 48,
+            flexDirection: isMobile ? 'column' : 'row',
+          }}
+        >
+          {/* Text block */}
+          <div style={{ maxWidth: 600, flex: 1 }}>
+            <Badge>{t('badge')}</Badge>
+
+            <motion.div variants={stagger} initial="hidden" animate="visible">
+              <motion.h1
+                variants={fadeUp(0)}
+                style={{
+                  fontFamily: "'Playfair Display', serif",
+                  fontSize: 'clamp(42px, 5.5vw, 70px)',
+                  fontWeight: 700,
+                  lineHeight: 1.09,
+                  letterSpacing: '-0.025em',
+                  color: C.text,
+                  marginBottom: 4,
+                }}
+              >
+                {t('mainHeading')}
+              </motion.h1>
+              <motion.h1
+                variants={fadeUp(0.1)}
+                style={{
+                  fontFamily: "'Playfair Display', serif",
+                  fontStyle: 'italic',
+                  fontSize: 'clamp(42px, 5.5vw, 70px)',
+                  fontWeight: 600,
+                  lineHeight: 1.09,
+                  letterSpacing: '-0.025em',
+                  color: C.accent,
+                  marginBottom: 28,
+                }}
+              >
+                {t('mainHeadingItalic')}
+              </motion.h1>
+            </motion.div>
+
+            <motion.p
+              variants={fadeUp(0.25)}
+              initial="hidden"
+              animate="visible"
+              style={{
+                fontSize: 16,
+                color: C.textMid,
+                lineHeight: 1.85,
+                maxWidth: 520,
+                marginBottom: 40,
+              }}
+            >
+              {t('description')}
+            </motion.p>
+
+            <motion.div
+              variants={fadeUp(0.38)}
+              initial="hidden"
+              animate="visible"
+              style={{
+                display: 'flex',
+                gap: 16,
+                alignItems: 'center',
+                flexWrap: 'wrap',
+              }}
+            >
+              <StartButton onClick={() => toggleLoginModal()} />
+              <span
+                style={{
+                  color: C.textMuted,
+                  fontSize: 12,
+                  fontFamily: "'DM Mono', monospace",
+                }}
+              >
+                {t('certificateNote')}
+              </span>
+            </motion.div>
+          </div>
+
+          {/* Illustration (hidden on mobile) */}
+          {!isMobile && <DocIllustration />}
+        </div>
+
+        {/* Stats row */}
+        <motion.div
+          variants={fadeUp(0.52)}
+          initial="hidden"
+          animate="visible"
+          style={{
+            display: 'flex',
+            gap: isMobile ? 28 : 56,
+            flexWrap: 'wrap',
+            marginTop: 72,
+            paddingTop: 36,
+            borderTop: `1px solid ${C.border}`,
+          }}
+        >
+          {STATS.map((s) => {
+            return (
+              <Stat
+                key={s.label}
+                value={s.value}
+                label={getTranslatedLabel(s.label)}
+              />
+            );
+          })}
+        </motion.div>
+      </Section>
+    </div>
+  );
+};
+
+export default Hero;
--- a/src/widgets/home/components/InfoCard.tsx
+++ b/src/widgets/home/components/InfoCard.tsx
@@ -0,0 +1,87 @@
+import { useRef, type FC } from 'react';
+import { motion, useInView } from 'framer-motion';
+import { fadeUp } from '../animations';
+import { C } from '../tokens';
+import type { InfoCardData } from '../types';
+
+const InfoCard: FC<InfoCardData> = ({
+  title,
+  text,
+  icon,
+  accent,
+  bg,
+  delay,
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const inView = useInView(ref, { once: true, margin: '-40px' });
+
+  return (
+    <motion.div
+      ref={ref}
+      variants={fadeUp(delay)}
+      initial="hidden"
+      animate={inView ? 'visible' : 'hidden'}
+      style={{
+        flex: '1 1 280px',
+        background: C.surface,
+        border: `1px solid ${C.border}`,
+        borderRadius: 12,
+        padding: 32,
+        boxShadow: `0 2px 12px ${C.shadow}`,
+        position: 'relative',
+        overflow: 'hidden',
+      }}
+    >
+      {/* Top accent bar */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          height: 3,
+          background: accent,
+        }}
+      />
+
+      {/* Icon */}
+      <div
+        style={{
+          width: 44,
+          height: 44,
+          borderRadius: 10,
+          background: bg,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: 20,
+          marginBottom: 18,
+        }}
+      >
+        {icon}
+      </div>
+
+      <h3
+        style={{
+          fontFamily: "'Playfair Display', serif",
+          fontSize: 18,
+          fontWeight: 700,
+          color: C.text,
+          marginBottom: 12,
+          marginTop: 0,
+          lineHeight: 1.3,
+        }}
+      >
+        {title}
+      </h3>
+
+      <p
+        style={{ color: C.textMuted, fontSize: 14, lineHeight: 1.8, margin: 0 }}
+      >
+        {text}
+      </p>
+    </motion.div>
+  );
+};
+
+export default InfoCard;
--- a/src/widgets/home/components/InfoSection.tsx
+++ b/src/widgets/home/components/InfoSection.tsx
@@ -0,0 +1,86 @@
+import type { FC } from 'react';
+import { motion } from 'framer-motion';
+import { fadeUp } from '../animations';
+import { C } from '../tokens';
+import { INFO_CARDS } from '../constants';
+import InfoCard from './InfoCard';
+import Section from './Section';
+import { useTranslations } from 'next-intl';
+
+const InfoSection: FC = () => {
+  const t = useTranslations('InfoSection');
+  const tCards = useTranslations('InfoCards');
+
+  const getTranslatedCard = (card: (typeof INFO_CARDS)[0]) => {
+    switch (card.title) {
+      case 'What is Plagiarism?':
+        return {
+          ...card,
+          title: tCards('card1Title'),
+          text: tCards('card1Desc'),
+        };
+      case 'Why Check Your Document?':
+        return {
+          ...card,
+          title: tCards('card2Title'),
+          text: tCards('card2Desc'),
+        };
+      case 'What You Get':
+        return {
+          ...card,
+          title: tCards('card3Title'),
+          text: tCards('card3Desc'),
+        };
+      default:
+        return card;
+    }
+  };
+
+  return (
+    <div style={{ background: C.surfaceWarm }}>
+      <Section style={{ paddingTop: 96, paddingBottom: 96 }}>
+        {/* Heading */}
+        <motion.div
+          variants={fadeUp()}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true }}
+          style={{ marginBottom: 48 }}
+        >
+          <p
+            style={{
+              fontFamily: "'DM Mono', monospace",
+              fontSize: 11,
+              color: C.accent,
+              letterSpacing: '0.14em',
+              textTransform: 'uppercase',
+              marginBottom: 10,
+            }}
+          >
+            {t('label')}
+          </p>
+          <h2
+            style={{
+              fontFamily: "'Playfair Display', serif",
+              fontSize: 'clamp(26px, 3.5vw, 40px)',
+              fontWeight: 700,
+              color: C.text,
+              lineHeight: 1.2,
+            }}
+          >
+            {t('heading')}
+          </h2>
+        </motion.div>
+
+        {/* Cards */}
+        <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
+          {INFO_CARDS.map((card) => (
+            <InfoCard key={card.title} {...getTranslatedCard(card)} />
+          ))}
+        </div>
+      </Section>
+    </div>
+  );
+};
+
+export default InfoSection;
--- a/src/widgets/home/components/Section.tsx
+++ b/src/widgets/home/components/Section.tsx
@@ -0,0 +1,16 @@
+import type { CSSProperties, FC, ReactNode } from 'react';
+
+interface SectionProps {
+  children: ReactNode;
+  style?: CSSProperties;
+}
+
+const Section: FC<SectionProps> = ({ children, style = {} }) => (
+  <section
+    style={{ maxWidth: 1120, margin: '0 auto', padding: '0 24px', ...style }}
+  >
+    {children}
+  </section>
+);
+
+export default Section;
--- a/src/widgets/home/components/StartButton.tsx
+++ b/src/widgets/home/components/StartButton.tsx
@@ -0,0 +1,45 @@
+'use client';
+import { useState, type FC } from 'react';
+import { motion } from 'framer-motion';
+import { C } from '../tokens';
+import { useTranslations } from 'next-intl';
+
+interface StartButtonProps {
+  onClick: () => void;
+  small?: boolean;
+}
+
+const StartButton: FC<StartButtonProps> = ({ onClick, small = false }) => {
+  const [hovered, setHovered] = useState(false);
+  const t = useTranslations('Common');
+
+  return (
+    <motion.button
+      whileTap={{ scale: 0.97 }}
+      onHoverStart={() => setHovered(true)}
+      onHoverEnd={() => setHovered(false)}
+      onClick={onClick}
+      style={{
+        padding: small ? '10px 28px' : '15px 44px',
+        borderRadius: 6,
+        border: 'none',
+        background: hovered ? C.accentHover : C.accent,
+        color: '#fff',
+        fontFamily: "'DM Mono', monospace",
+        fontSize: small ? 11 : 13,
+        fontWeight: 500,
+        letterSpacing: '0.07em',
+        textTransform: 'uppercase',
+        cursor: 'pointer',
+        transition: 'background 0.2s, box-shadow 0.25s',
+        boxShadow: hovered
+          ? `0 8px 28px ${C.accent}44, 0 2px 8px ${C.accent}22`
+          : `0 2px 8px ${C.accent}22`,
+      }}
+    >
+      {t('startButton')}
+    </motion.button>
+  );
+};
+
+export default StartButton;
--- a/src/widgets/home/components/Stat.tsx
+++ b/src/widgets/home/components/Stat.tsx
@@ -0,0 +1,32 @@
+import type { FC } from 'react';
+import { C } from '../tokens';
+import type { StatItem } from '../types';
+
+const Stat: FC<StatItem> = ({ value, label }) => (
+  <div>
+    <div
+      style={{
+        fontFamily: "'Playfair Display', serif",
+        fontSize: 32,
+        fontWeight: 700,
+        color: C.accent,
+        lineHeight: 1,
+      }}
+    >
+      {value}
+    </div>
+    <div
+      style={{
+        color: C.textMuted,
+        fontSize: 12,
+        marginTop: 5,
+        fontFamily: "'DM Mono', monospace",
+        letterSpacing: '0.05em',
+      }}
+    >
+      {label}
+    </div>
+  </div>
+);
+
+export default Stat;
--- a/src/widgets/home/components/StepCard.tsx
+++ b/src/widgets/home/components/StepCard.tsx
@@ -0,0 +1,148 @@
+import { useRef, type FC } from 'react';
+import { motion, useInView } from 'framer-motion';
+import { fadeUp } from '../animations';
+import { C } from '../tokens';
+import { STEPS } from '../constants';
+import type { Step } from '../types';
+import { useTranslations } from 'next-intl';
+
+interface StepCardProps {
+  step: Step;
+  index: number;
+}
+
+const StepCard: FC<StepCardProps> = ({ step, index }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const inView = useInView(ref, { once: true, margin: '-50px' });
+  const isLast = index === STEPS.length - 1;
+  const t = useTranslations('Steps');
+
+  const getStepTitle = (num: string) => {
+    switch (num) {
+      case '01':
+        return t('step1Title');
+      case '02':
+        return t('step2Title');
+      case '03':
+        return t('step3Title');
+      case '04':
+        return t('step4Title');
+      case '05':
+        return t('step5Title');
+      case '06':
+        return t('step6Title');
+      default:
+        return step.title;
+    }
+  };
+
+  const getStepDesc = (num: string) => {
+    switch (num) {
+      case '01':
+        return t('step1Desc');
+      case '02':
+        return t('step2Desc');
+      case '03':
+        return t('step3Desc');
+      case '04':
+        return t('step4Desc');
+      case '05':
+        return t('step5Desc');
+      case '06':
+        return t('step6Desc');
+      default:
+        return step.desc;
+    }
+  };
+
+  return (
+    <motion.div
+      ref={ref}
+      variants={fadeUp(index * 0.09)}
+      initial="hidden"
+      animate={inView ? 'visible' : 'hidden'}
+      style={{
+        display: 'flex',
+        gap: 20,
+        alignItems: 'flex-start',
+        position: 'relative',
+      }}
+    >
+      {/* Vertical connector line */}
+      {!isLast && (
+        <div
+          style={{
+            position: 'absolute',
+            left: 21,
+            top: 48,
+            width: 2,
+            height: 'calc(100% + 16px)',
+            background: `linear-gradient(to bottom, ${C.border}, transparent)`,
+          }}
+        />
+      )}
+
+      {/* Step number badge */}
+      <div
+        style={{
+          flexShrink: 0,
+          width: 44,
+          height: 44,
+          borderRadius: 8,
+          border: `1.5px solid ${C.border}`,
+          background: C.surface,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontFamily: "'DM Mono', monospace",
+          fontSize: 11,
+          fontWeight: 500,
+          color: C.accent,
+          letterSpacing: '0.06em',
+          position: 'relative',
+          zIndex: 1,
+          boxShadow: `0 2px 8px ${C.shadow}`,
+        }}
+      >
+        {step.num}
+      </div>
+
+      {/* Step content */}
+      <div style={{ paddingBottom: 28, flex: 1 }}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 9,
+            marginBottom: 7,
+          }}
+        >
+          <span style={{ fontSize: 16 }}>{step.icon}</span>
+          <h3
+            style={{
+              fontFamily: "'Playfair Display', serif",
+              fontSize: 17,
+              color: C.text,
+              margin: 0,
+              fontWeight: 700,
+            }}
+          >
+            {getStepTitle(step.num)}
+          </h3>
+        </div>
+        <p
+          style={{
+            color: C.textMuted,
+            fontSize: 13.5,
+            lineHeight: 1.75,
+            margin: 0,
+          }}
+        >
+          {getStepDesc(step.num)}
+        </p>
+      </div>
+    </motion.div>
+  );
+};
+
+export default StepCard;
--- a/src/widgets/home/components/StepsSection.tsx
+++ b/src/widgets/home/components/StepsSection.tsx
@@ -0,0 +1,130 @@
+'use client';
+import { useRef } from 'react';
+import { motion } from 'framer-motion';
+import { fadeUp } from '../animations';
+import { C } from '../tokens';
+import { STEPS } from '../constants';
+import { useIsMobile } from '../hooks/useIsMobile';
+import Section from './Section';
+import StartButton from './StartButton';
+import StepCard from './StepCard';
+import { useTranslations } from 'next-intl';
+import { useLoginModal } from '@/shared/zustand/auth';
+
+const StepsSection = () => {
+  const isMobile = useIsMobile();
+  const t = useTranslations('StepsSection');
+  const stepsRef = useRef<HTMLDivElement>(null);
+  const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
+
+  return (
+    <div
+      style={{
+        background: C.surface,
+        borderTop: `1px solid ${C.border}`,
+        borderBottom: `1px solid ${C.border}`,
+      }}
+    >
+      <Section style={{ paddingTop: 96, paddingBottom: 96 }}>
+        <div ref={stepsRef} style={{ scrollMarginTop: 72 }}>
+          {/* Heading */}
+          <motion.div
+            variants={fadeUp()}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true }}
+            style={{ marginBottom: 60 }}
+          >
+            <p
+              style={{
+                fontFamily: "'DM Mono', monospace",
+                fontSize: 11,
+                color: C.accent,
+                letterSpacing: '0.14em',
+                textTransform: 'uppercase',
+                marginBottom: 10,
+              }}
+            >
+              {t('label')}
+            </p>
+            <h2
+              style={{
+                fontFamily: "'Playfair Display', serif",
+                fontSize: 'clamp(26px, 3.5vw, 40px)',
+                fontWeight: 700,
+                color: C.text,
+                lineHeight: 1.2,
+              }}
+            >
+              {t('heading')}
+            </h2>
+            <p
+              style={{
+                color: C.textMuted,
+                fontSize: 14,
+                marginTop: 10,
+                lineHeight: 1.75,
+              }}
+            >
+              {t('description')}
+            </p>
+          </motion.div>
+
+          {/* Steps grid */}
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)',
+              gap: '0 72px',
+            }}
+          >
+            {STEPS.map((step, i) => (
+              <StepCard key={step.num} step={step} index={i} />
+            ))}
+          </div>
+
+          {/* CTA banner */}
+          <motion.div
+            variants={fadeUp()}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true }}
+            style={{
+              marginTop: 64,
+              padding: isMobile ? '28px 24px' : '36px 40px',
+              background: C.accentLight,
+              border: `1px solid ${C.accent}22`,
+              borderRadius: 12,
+              display: 'flex',
+              alignItems: isMobile ? 'flex-start' : 'center',
+              flexDirection: isMobile ? 'column' : 'row',
+              justifyContent: 'space-between',
+              gap: 24,
+              boxShadow: `0 4px 24px ${C.accent}10`,
+            }}
+          >
+            <div>
+              <h3
+                style={{
+                  fontFamily: "'Playfair Display', serif",
+                  fontSize: 22,
+                  color: C.text,
+                  marginBottom: 6,
+                  fontWeight: 700,
+                }}
+              >
+                {t('ctaHeading')}
+              </h3>
+              <p style={{ color: C.textMuted, fontSize: 13 }}>
+                {t('ctaDescription')}
+              </p>
+            </div>
+            <StartButton onClick={() => toggleLoginModal()} />
+          </motion.div>
+        </div>
+      </Section>
+    </div>
+  );
+};
+
+export default StepsSection;
--- a/src/widgets/home/components/Ticker.tsx
+++ b/src/widgets/home/components/Ticker.tsx
@@ -0,0 +1,73 @@
+import type { FC } from 'react';
+import { motion } from 'framer-motion';
+import { C } from '../tokens';
+import { TICKER_ITEMS } from '../constants';
+import { useTranslations } from 'next-intl';
+
+const Ticker: FC = () => {
+  const t = useTranslations('Ticker');
+  const doubled = [...TICKER_ITEMS, ...TICKER_ITEMS];
+
+  const getTranslatedItem = (item: string, index: number) => {
+    const itemIndex = index % TICKER_ITEMS.length;
+    switch (itemIndex) {
+      case 0:
+        return t('item1');
+      case 1:
+        return t('item2');
+      case 2:
+        return t('item3');
+      case 3:
+        return t('item4');
+      case 4:
+        return t('item5');
+      case 5:
+        return t('item6');
+      default:
+        return item;
+    }
+  };
+
+  return (
+    <div
+      style={{
+        overflow: 'hidden',
+        borderTop: `1px solid ${C.border}`,
+        borderBottom: `1px solid ${C.border}`,
+        padding: '11px 0',
+        background: C.surfaceWarm,
+      }}
+    >
+      <motion.div
+        animate={{ x: ['0%', '-50%'] }}
+        transition={{ duration: 20, repeat: Infinity, ease: 'linear' }}
+        style={{
+          display: 'flex',
+          gap: 56,
+          whiteSpace: 'nowrap',
+          width: 'max-content',
+        }}
+      >
+        {doubled.map((item, i) => (
+          <span
+            key={i}
+            style={{
+              fontFamily: "'DM Mono', monospace",
+              fontSize: 11,
+              letterSpacing: '0.13em',
+              textTransform: 'uppercase',
+              color: i % 3 === 0 ? C.textMid : C.textMuted,
+            }}
+          >
+            {getTranslatedItem(item, i)}
+            <span style={{ marginLeft: 56, color: C.accent, opacity: 0.3 }}>
+              ✦
+            </span>
+          </span>
+        ))}
+      </motion.div>
+    </div>
+  );
+};
+
+export default Ticker;
--- a/src/widgets/home/constants.ts
+++ b/src/widgets/home/constants.ts
@@ -0,0 +1,86 @@
+import { C } from './tokens';
+import type { InfoCardData, StatItem, Step } from './types';
+
+export const STEPS: Step[] = [
+  {
+    num: '01',
+    icon: '▶',
+    title: 'Click Start',
+    desc: 'Hit the Start button on the homepage to kick off the process.',
+  },
+  {
+    num: '02',
+    icon: '🔐',
+    title: 'Register or Log In',
+    desc: 'Create a free account or sign in to access the checking platform.',
+  },
+  {
+    num: '03',
+    icon: '📄',
+    title: 'Upload Document',
+    desc: "Upload your file and enter the document's topic or theme.",
+  },
+  {
+    num: '04',
+    icon: '📤',
+    title: 'Send for Check',
+    desc: 'Submit your document for deep plagiarism analysis.',
+  },
+  {
+    num: '05',
+    icon: '💳',
+    title: 'Complete Payment',
+    desc: 'Pay securely for the plagiarism checking service.',
+  },
+  {
+    num: '06',
+    icon: '📜',
+    title: 'Get Your Report',
+    desc: 'Receive your official certificate and full plagiarism report.',
+  },
+];
+
+export const STATS: StatItem[] = [
+  { value: '98.7%', label: 'Detection accuracy' },
+  { value: '50K+', label: 'Documents checked' },
+  { value: '12+', label: 'Supported formats' },
+  { value: '24h', label: 'Report turnaround' },
+];
+
+export const INFO_CARDS: InfoCardData[] = [
+  {
+    delay: 0,
+    accent: C.accent,
+    bg: C.accentLight,
+    icon: '📖',
+    title: 'What is Plagiarism?',
+    text: "Plagiarism is presenting another person's ideas, words, or creative work without proper attribution. It ranges from direct copy-paste to subtle paraphrasing — both are equally problematic in academic or professional writing.",
+  },
+  {
+    delay: 0.1,
+    accent: C.red,
+    bg: C.redLight,
+    icon: '🛡️',
+    title: 'Why Check Your Document?',
+    text: 'Unintentional plagiarism is more common than you think. Checking before submission protects your reputation, ensures proper citation, meets institutional requirements, and gives you peace of mind.',
+  },
+  {
+    delay: 0.2,
+    accent: C.green,
+    bg: C.greenLight,
+    icon: '📜',
+    title: 'What You Get',
+    text: 'A comprehensive originality report with matched sources, similarity percentages, and an official signed certificate — accepted by universities, publishers, and institutions worldwide.',
+  },
+];
+
+export const TICKER_ITEMS: string[] = [
+  'Originality Verified',
+  'Academic Integrity',
+  'Trusted Reports',
+  'Deep Analysis',
+  'Fast Results',
+  'Official Certificate',
+];
+
+export const DOC_LINE_WIDTHS: number[] = [100, 88, 95, 72, 90, 60];
--- a/src/widgets/home/hooks/useIsMobile.ts
+++ b/src/widgets/home/hooks/useIsMobile.ts
@@ -0,0 +1,16 @@
+'use client';
+import { useEffect, useState } from 'react';
+
+export function useIsMobile(breakpoint = 768): boolean {
+  const [isMobile, setIsMobile] = useState(
+    typeof window !== 'undefined' ? window.innerWidth <= breakpoint : false,
+  );
+
+  useEffect(() => {
+    const handler = () => setIsMobile(window.innerWidth <= breakpoint);
+    window.addEventListener('resize', handler);
+    return () => window.removeEventListener('resize', handler);
+  }, [breakpoint]);
+
+  return isMobile;
+}
--- a/src/widgets/home/index.tsx
+++ b/src/widgets/home/index.tsx
@@ -0,0 +1,18 @@
+'use client';
+import Hero from './components/Hero';
+import InfoSection from './components/InfoSection';
+import StepsSection from './components/StepsSection';
+import Ticker from './components/Ticker';
+
+const PlagiarismLanding = () => {
+  return (
+    <>
+      <Hero />
+      <Ticker />
+      <InfoSection />
+      <StepsSection />
+    </>
+  );
+};
+
+export default PlagiarismLanding;
--- a/src/widgets/home/tokens.ts
+++ b/src/widgets/home/tokens.ts
@@ -0,0 +1,20 @@
+export const C = {
+  bg: '#F7F5F0',
+  surface: '#FFFFFF',
+  surfaceWarm: '#F0EDE6',
+  border: '#E2DDD6',
+  borderDark: '#C8C2B8',
+  accent: '#1A4FD6',
+  accentLight: '#EEF2FD',
+  accentHover: '#1240B8',
+  text: '#1A1814',
+  textMid: '#4A4640',
+  textMuted: '#8A8680',
+  green: '#1A7A4A',
+  greenLight: '#E8F5EE',
+  red: '#C0392B',
+  redLight: '#FDF0EE',
+  gold: '#B8860B',
+  shadow: 'rgba(26,22,16,0.07)',
+  shadowMd: 'rgba(26,22,16,0.13)',
+} as const;
--- a/src/widgets/home/types.ts
+++ b/src/widgets/home/types.ts
@@ -0,0 +1,20 @@
+export interface Step {
+  num: string;
+  icon: string;
+  title: string;
+  desc: string;
+}
+
+export interface StatItem {
+  value: string;
+  label: string;
+}
+
+export interface InfoCardData {
+  delay: number;
+  accent: string;
+  bg: string;
+  icon: string;
+  title: string;
+  text: string;
+}
--- a/src/widgets/navbar/ui/index.tsx
+++ b/src/widgets/navbar/ui/index.tsx
@@ -20,8 +20,8 @@ const Navbar = () => {
  const menu = getMenu(t);

  return (
-    <section className="py-4">
-      <div className="custom-container">
+    <section className="py-4 flex items-center justify-center w-full ">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
        {/* Desktop Menu */}
        <nav className="justify-between flex max-sm:flex-col gap-5">
          <div className="flex items-center gap-6">
--- a/src/widgets/paymentModal/ui/Paymebutton.tsx
+++ b/src/widgets/paymentModal/ui/Paymebutton.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { PaymentStatus } from '../lib/types';
+import { useTranslations } from 'next-intl';

 // ─── Payme Logo SVG ────────────────────────────────────────────────────────────

@@ -64,13 +65,14 @@ export const PaymeButton: React.FC<PaymeButtonProps> = ({
  status,
 }) => {
  const isLoading = status === 'loading';
+  const t = useTranslations('Payment');

  return (
    <button
      onClick={onClick}
      disabled={isLoading}
      aria-busy={isLoading}
-      aria-label="Pay with Payme"
+      aria-label={t('payButton')}
      className={`
        w-full flex items-center justify-center gap-3
        rounded-xl px-6 py-4
@@ -87,7 +89,7 @@ export const PaymeButton: React.FC<PaymeButtonProps> = ({
      {isLoading ? (
        <>
          <Spinner />
-          <span>Connecting to Payme…</span>
+          <span>{t('connecting')}</span>
        </>
      ) : (
        <>
--- a/src/widgets/paymentModal/ui/Paymentmodal.tsx
+++ b/src/widgets/paymentModal/ui/Paymentmodal.tsx
@@ -4,6 +4,7 @@ import { PaymentModalProps } from '../lib/types';
 import { getPricing } from '../lib/utils';
 import { PriceSummary } from './Pricesummary';
 import { PaymeButton } from './Paymebutton';
+import { useTranslations } from 'next-intl';

 // ─── Close Button ──────────────────────────────────────────────────────────────

@@ -68,12 +69,14 @@ const CloseButton: React.FC<{ onClick: () => void }> = ({ onClick }) => (

 // ─── Security Badge ────────────────────────────────────────────────────────────

-const SecurityBadge: React.FC = () => (
+const SecurityBadge: React.FC<{ securityText: string }> = ({
+  securityText,
+}) => (
  <div className="flex items-center justify-center gap-1.5 text-xs text-slate-400">
    <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z" />
    </svg>
-    <span>Secured by Payme · SSL encrypted</span>
+    <span>{securityText}</span>
  </div>
 );

@@ -89,6 +92,7 @@ export const PaymentModal: React.FC<PaymentModalProps> = ({
  const dialogRef = useRef<HTMLDivElement>(null);
  const pricing = getPricing();
  const status = isLoading ? 'loading' : 'idle';
+  const t = useTranslations('Payment');

  // ── Close on Escape ──────────────────────────────────────────────────────────
  useEffect(() => {
@@ -157,11 +161,9 @@ export const PaymentModal: React.FC<PaymentModalProps> = ({
              id="payment-modal-title"
              className="text-lg font-semibold text-slate-900"
            >
-              Payment
+              {t('title')}
            </h2>
-            <p className="mt-0.5 text-sm text-slate-500">
-              Review your order and pay securely
-            </p>
+            <p className="mt-0.5 text-sm text-slate-500">{t('description')}</p>
          </div>
        </div>

@@ -170,7 +172,7 @@ export const PaymentModal: React.FC<PaymentModalProps> = ({
          {/* Order details */}
          <div>
            <h3 className="text-xs font-semibold uppercase tracking-widest text-slate-400 mb-3">
-              Order Summary
+              {t('orderSummary')}
            </h3>
            <PriceSummary hasCertificate={hasCertificate} pricing={pricing} />
          </div>
@@ -187,20 +189,20 @@ export const PaymentModal: React.FC<PaymentModalProps> = ({
              >
                <path d="M12 1l2.753 5.527 6.247.907-4.5 4.385 1.063 6.181L12 15.027l-5.563 2.973 1.063-6.181L3 7.434l6.247-.907z" />
              </svg>
-              <span>Certificate of completion included</span>
+              <span>{t('certificateIncluded')}</span>
            </div>
          )}

          {/* Payment method label */}
          <div>
            <h3 className="text-xs font-semibold uppercase tracking-widest text-slate-400 mb-3">
-              Payment Method
+              {t('paymentMethod')}
            </h3>
            <PaymeButton onClick={onConfirmPayment} status={status} />
          </div>

          {/* Security note */}
-          <SecurityBadge />
+          <SecurityBadge securityText={t('security')} />
        </div>
      </div>
    </div>
--- a/src/widgets/paymentModal/ui/Pricesummary.tsx
+++ b/src/widgets/paymentModal/ui/Pricesummary.tsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import { formatPrice } from '../lib/utils';
 import { PriceSummaryProps } from '../lib/types';
+import { useTranslations } from 'next-intl';

 // ─── Price Row ─────────────────────────────────────────────────────────────────

@@ -53,25 +54,26 @@ export const PriceSummary: React.FC<PriceSummaryProps> = ({
  const total = hasCertificate
    ? pricing.serviceFee + pricing.certificateFee
    : pricing.serviceFee;
+  const t = useTranslations('Payment');

  return (
    <div className="rounded-xl bg-slate-50 border border-slate-100 px-5 py-2 space-y-0">
      <PriceRow
-        label="Service fee"
+        label={t('serviceFee')}
        amount={pricing.serviceFee}
        currency={pricing.currency}
      />

      {hasCertificate && (
        <PriceRow
-          label="Certificate"
+          label={t('certificateLabel')}
          amount={pricing.certificateFee}
          currency={pricing.currency}
        />
      )}

      <PriceRow
-        label="Total"
+        label={t('total')}
        amount={total}
        currency={pricing.currency}
        highlight