From 80343c9ca880a7ab6d8136bb57978a65bd84b9ce Mon Sep 17 00:00:00 2001
From: "nabijonovdavronbek619@gmail.com" <nabijonovdavronbek619@gmail.com>
Date: Wed, 1 Apr 2026 01:22:31 +0500
Subject: [PATCH 1/3] landing page added

---
 package-lock.json                             |  55 ++++--
 package.json                                  |   5 +-
 src/app/[locale]/layout.tsx                   |   2 +
 src/app/[locale]/page.tsx                     |   6 +-
 src/app/[locale]/plagat/page.tsx              |  11 ++
 src/app/globals.css                           |   4 +
 src/features/auth/login/lib/useLoginForm.ts   |  26 +++
 .../auth/register/lib/useRegisterForm.ts      |  50 +++--
 .../auth/register/lib/validateRegister.ts     |   4 +-
 src/features/auth/register/ui/form.tsx        |   9 +-
 src/shared/request/apiRequest.ts              |  29 +++
 src/shared/request/getLanguage.ts             |  30 +++
 src/shared/request/links.ts                   |   4 +
 src/{ => shared}/request/plagiarismapi.ts     |   0
 src/widgets/detail/index.tsx                  |   6 +-
 src/widgets/fileUpload/lib/usePlagiraism.ts   |   2 +-
 src/widgets/home/animations.ts                |  15 ++
 src/widgets/home/components/Badge.tsx         |  43 +++++
 .../home/components/DocIllustration.tsx       | 137 ++++++++++++++
 src/widgets/home/components/Hero.tsx          | 177 ++++++++++++++++++
 src/widgets/home/components/InfoCard.tsx      |  87 +++++++++
 src/widgets/home/components/InfoSection.tsx   |  55 ++++++
 src/widgets/home/components/Section.tsx       |  16 ++
 src/widgets/home/components/StartButton.tsx   |  43 +++++
 src/widgets/home/components/Stat.tsx          |  32 ++++
 src/widgets/home/components/StepCard.tsx      | 108 +++++++++++
 src/widgets/home/components/StepsSection.tsx  | 129 +++++++++++++
 src/widgets/home/components/Ticker.tsx        |  51 +++++
 src/widgets/home/constants.ts                 |  86 +++++++++
 src/widgets/home/hooks/useIsMobile.ts         |  16 ++
 src/widgets/home/index.tsx                    |  29 +++
 src/widgets/home/tokens.ts                    |  20 ++
 src/widgets/home/types.ts                     |  20 ++
 src/widgets/navbar/ui/index.tsx               |   4 +-
 34 files changed, 1262 insertions(+), 49 deletions(-)
 create mode 100644 src/app/[locale]/plagat/page.tsx
 create mode 100644 src/shared/request/apiRequest.ts
 create mode 100644 src/shared/request/getLanguage.ts
 create mode 100644 src/shared/request/links.ts
 rename src/{ => shared}/request/plagiarismapi.ts (100%)
 create mode 100644 src/widgets/home/animations.ts
 create mode 100644 src/widgets/home/components/Badge.tsx
 create mode 100644 src/widgets/home/components/DocIllustration.tsx
 create mode 100644 src/widgets/home/components/Hero.tsx
 create mode 100644 src/widgets/home/components/InfoCard.tsx
 create mode 100644 src/widgets/home/components/InfoSection.tsx
 create mode 100644 src/widgets/home/components/Section.tsx
 create mode 100644 src/widgets/home/components/StartButton.tsx
 create mode 100644 src/widgets/home/components/Stat.tsx
 create mode 100644 src/widgets/home/components/StepCard.tsx
 create mode 100644 src/widgets/home/components/StepsSection.tsx
 create mode 100644 src/widgets/home/components/Ticker.tsx
 create mode 100644 src/widgets/home/constants.ts
 create mode 100644 src/widgets/home/hooks/useIsMobile.ts
 create mode 100644 src/widgets/home/index.tsx
 create mode 100644 src/widgets/home/tokens.ts
 create mode 100644 src/widgets/home/types.ts

diff --git a/package-lock.json b/package-lock.json
index 1ff4093..49ef2d3 100644
--- 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",
diff --git a/package.json b/package.json
index ea0c581..cd5bc6d 100644
--- 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",
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
index 229166b..298e695 100644
--- 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>
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
index 09d434c..330b1c1 100644
--- 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>
   );
 }
diff --git a/src/app/[locale]/plagat/page.tsx b/src/app/[locale]/plagat/page.tsx
new file mode 100644
index 0000000..130c2f5
--- /dev/null
+++ 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>
+  );
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index 70fb346..f7a5f68 100644
--- 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 {
diff --git a/src/features/auth/login/lib/useLoginForm.ts b/src/features/auth/login/lib/useLoginForm.ts
index f7f26b1..5e1b5c6 100644
--- 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');
   };
 
diff --git a/src/features/auth/register/lib/useRegisterForm.ts b/src/features/auth/register/lib/useRegisterForm.ts
index 5121d52..07026fb 100644
--- 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,
   };
 }
diff --git a/src/features/auth/register/lib/validateRegister.ts b/src/features/auth/register/lib/validateRegister.ts
index 898b29a..8063b42 100644
--- 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) {
diff --git a/src/features/auth/register/ui/form.tsx b/src/features/auth/register/ui/form.tsx
index 9db4a5f..0269f5f 100644
--- a/src/features/auth/register/ui/form.tsx
+++ b/src/features/auth/register/ui/form.tsx
@@ -63,6 +63,7 @@ function Field({
 }
 
 export function RegisterFormUI() {
+  const [phone, setPhone] = React.useState('');
   const {
     registerData,
     errors,
@@ -71,16 +72,22 @@ export function RegisterFormUI() {
     handleChange,
     handleOferta,
     handleSubmit,
+    setItem,
   } = useRegisterForm();
-  const [phone, setPhone] = React.useState(registerData.phone || '');
   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 (
diff --git a/src/shared/request/apiRequest.ts b/src/shared/request/apiRequest.ts
new file mode 100644
index 0000000..6e84250
--- /dev/null
+++ 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;
+};
diff --git a/src/shared/request/getLanguage.ts b/src/shared/request/getLanguage.ts
new file mode 100644
index 0000000..3e47b53
--- /dev/null
+++ 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;
+}
diff --git a/src/shared/request/links.ts b/src/shared/request/links.ts
new file mode 100644
index 0000000..a1859f4
--- /dev/null
+++ b/src/shared/request/links.ts
@@ -0,0 +1,4 @@
+export const links = {
+  login: '/users/login/',
+  register: '/users/register/',
+};
diff --git a/src/request/plagiarismapi.ts b/src/shared/request/plagiarismapi.ts
similarity index 100%
rename from src/request/plagiarismapi.ts
rename to src/shared/request/plagiarismapi.ts
diff --git a/src/widgets/detail/index.tsx b/src/widgets/detail/index.tsx
index 690c30b..d830519 100644
--- 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>
diff --git a/src/widgets/fileUpload/lib/usePlagiraism.ts b/src/widgets/fileUpload/lib/usePlagiraism.ts
index 6956277..f488db8 100644
--- 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 ──────────────────────────────────────────────────────────
 
diff --git a/src/widgets/home/animations.ts b/src/widgets/home/animations.ts
new file mode 100644
index 0000000..9470812
--- /dev/null
+++ 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 } },
+};
diff --git a/src/widgets/home/components/Badge.tsx b/src/widgets/home/components/Badge.tsx
new file mode 100644
index 0000000..9985a40
--- /dev/null
+++ 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;
diff --git a/src/widgets/home/components/DocIllustration.tsx b/src/widgets/home/components/DocIllustration.tsx
new file mode 100644
index 0000000..a72358e
--- /dev/null
+++ 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;
diff --git a/src/widgets/home/components/Hero.tsx b/src/widgets/home/components/Hero.tsx
new file mode 100644
index 0000000..3b88a6a
--- /dev/null
+++ b/src/widgets/home/components/Hero.tsx
@@ -0,0 +1,177 @@
+import type { FC } from 'react';
+import { motion, type MotionStyle, type MotionValue } 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';
+
+interface HeroProps {
+  onStart: () => void;
+  blobY: MotionValue<number>;
+}
+
+const Hero: FC<HeroProps> = ({ onStart, blobY }) => {
+  const isMobile = useIsMobile();
+
+  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>Academic Integrity Platform</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,
+                }}
+              >
+                Is Your Work
+              </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,
+                }}
+              >
+                Truly Original?
+              </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,
+              }}
+            >
+              Plagiarism is presenting someone else&lsquo;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.
+            </motion.p>
+
+            <motion.div
+              variants={fadeUp(0.38)}
+              initial="hidden"
+              animate="visible"
+              style={{
+                display: 'flex',
+                gap: 16,
+                alignItems: 'center',
+                flexWrap: 'wrap',
+              }}
+            >
+              <StartButton onClick={onStart} />
+              <span
+                style={{
+                  color: C.textMuted,
+                  fontSize: 12,
+                  fontFamily: "'DM Mono', monospace",
+                }}
+              >
+                Certificate issued within 24h
+              </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) => (
+            <Stat key={s.label} value={s.value} label={s.label} />
+          ))}
+        </motion.div>
+      </Section>
+    </div>
+  );
+};
+
+export default Hero;
diff --git a/src/widgets/home/components/InfoCard.tsx b/src/widgets/home/components/InfoCard.tsx
new file mode 100644
index 0000000..9454283
--- /dev/null
+++ 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;
diff --git a/src/widgets/home/components/InfoSection.tsx b/src/widgets/home/components/InfoSection.tsx
new file mode 100644
index 0000000..35ca690
--- /dev/null
+++ b/src/widgets/home/components/InfoSection.tsx
@@ -0,0 +1,55 @@
+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';
+
+const InfoSection: FC = () => (
+  <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,
+          }}
+        >
+          Why It Matters
+        </p>
+        <h2
+          style={{
+            fontFamily: "'Playfair Display', serif",
+            fontSize: 'clamp(26px, 3.5vw, 40px)',
+            fontWeight: 700,
+            color: C.text,
+            lineHeight: 1.2,
+          }}
+        >
+          Understanding Plagiarism
+        </h2>
+      </motion.div>
+
+      {/* Cards */}
+      <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
+        {INFO_CARDS.map((card) => (
+          <InfoCard key={card.title} {...card} />
+        ))}
+      </div>
+    </Section>
+  </div>
+);
+
+export default InfoSection;
diff --git a/src/widgets/home/components/Section.tsx b/src/widgets/home/components/Section.tsx
new file mode 100644
index 0000000..a6bb7ed
--- /dev/null
+++ 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;
diff --git a/src/widgets/home/components/StartButton.tsx b/src/widgets/home/components/StartButton.tsx
new file mode 100644
index 0000000..4d2bde4
--- /dev/null
+++ b/src/widgets/home/components/StartButton.tsx
@@ -0,0 +1,43 @@
+'use client';
+import { useState, type FC } from 'react';
+import { motion } from 'framer-motion';
+import { C } from '../tokens';
+
+interface StartButtonProps {
+  onClick: () => void;
+  small?: boolean;
+}
+
+const StartButton: FC<StartButtonProps> = ({ onClick, small = false }) => {
+  const [hovered, setHovered] = useState(false);
+
+  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`,
+      }}
+    >
+      Start Checking →
+    </motion.button>
+  );
+};
+
+export default StartButton;
diff --git a/src/widgets/home/components/Stat.tsx b/src/widgets/home/components/Stat.tsx
new file mode 100644
index 0000000..9adfe52
--- /dev/null
+++ 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;
diff --git a/src/widgets/home/components/StepCard.tsx b/src/widgets/home/components/StepCard.tsx
new file mode 100644
index 0000000..2fc7b39
--- /dev/null
+++ b/src/widgets/home/components/StepCard.tsx
@@ -0,0 +1,108 @@
+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';
+
+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;
+
+  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,
+            }}
+          >
+            {step.title}
+          </h3>
+        </div>
+        <p
+          style={{
+            color: C.textMuted,
+            fontSize: 13.5,
+            lineHeight: 1.75,
+            margin: 0,
+          }}
+        >
+          {step.desc}
+        </p>
+      </div>
+    </motion.div>
+  );
+};
+
+export default StepCard;
diff --git a/src/widgets/home/components/StepsSection.tsx b/src/widgets/home/components/StepsSection.tsx
new file mode 100644
index 0000000..f203ff7
--- /dev/null
+++ b/src/widgets/home/components/StepsSection.tsx
@@ -0,0 +1,129 @@
+import type { FC } 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';
+
+interface StepsSectionProps {
+  stepsRef: React.RefObject<HTMLDivElement | null>;
+  onScrollTop: () => void;
+}
+
+const StepsSection: FC<StepsSectionProps> = ({ stepsRef, onScrollTop }) => {
+  const isMobile = useIsMobile();
+
+  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,
+              }}
+            >
+              Process
+            </p>
+            <h2
+              style={{
+                fontFamily: "'Playfair Display', serif",
+                fontSize: 'clamp(26px, 3.5vw, 40px)',
+                fontWeight: 700,
+                color: C.text,
+                lineHeight: 1.2,
+              }}
+            >
+              How It Works
+            </h2>
+            <p
+              style={{
+                color: C.textMuted,
+                fontSize: 14,
+                marginTop: 10,
+                lineHeight: 1.75,
+              }}
+            >
+              Six simple steps from upload to certified report.
+            </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,
+                }}
+              >
+                Ready to verify your document?
+              </h3>
+              <p style={{ color: C.textMuted, fontSize: 13 }}>
+                Get your originality certificate in under 24 hours.
+              </p>
+            </div>
+            <StartButton onClick={onScrollTop} />
+          </motion.div>
+        </div>
+      </Section>
+    </div>
+  );
+};
+
+export default StepsSection;
diff --git a/src/widgets/home/components/Ticker.tsx b/src/widgets/home/components/Ticker.tsx
new file mode 100644
index 0000000..688396b
--- /dev/null
+++ b/src/widgets/home/components/Ticker.tsx
@@ -0,0 +1,51 @@
+import type { FC } from 'react';
+import { motion } from 'framer-motion';
+import { C } from '../tokens';
+import { TICKER_ITEMS } from '../constants';
+
+const Ticker: FC = () => {
+  const doubled = [...TICKER_ITEMS, ...TICKER_ITEMS];
+
+  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,
+            }}
+          >
+            {item}
+            <span style={{ marginLeft: 56, color: C.accent, opacity: 0.3 }}>
+              ✦
+            </span>
+          </span>
+        ))}
+      </motion.div>
+    </div>
+  );
+};
+
+export default Ticker;
diff --git a/src/widgets/home/constants.ts b/src/widgets/home/constants.ts
new file mode 100644
index 0000000..764ff44
--- /dev/null
+++ 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];
diff --git a/src/widgets/home/hooks/useIsMobile.ts b/src/widgets/home/hooks/useIsMobile.ts
new file mode 100644
index 0000000..43597f6
--- /dev/null
+++ 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;
+}
diff --git a/src/widgets/home/index.tsx b/src/widgets/home/index.tsx
new file mode 100644
index 0000000..51c310a
--- /dev/null
+++ b/src/widgets/home/index.tsx
@@ -0,0 +1,29 @@
+'use client';
+import { useRef, type FC } from 'react';
+import { useScroll, useTransform } from 'framer-motion';
+import Hero from './components/Hero';
+import InfoSection from './components/InfoSection';
+import StepsSection from './components/StepsSection';
+import Ticker from './components/Ticker';
+
+const PlagiarismLanding: FC = () => {
+  const stepsRef = useRef<HTMLDivElement>(null);
+  const { scrollY } = useScroll();
+  const blobY = useTransform(scrollY, [0, 600], [0, 80]);
+
+  const scrollToSteps = () =>
+    stepsRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+  const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });
+
+  return (
+    <>
+      <Hero onStart={scrollToSteps} blobY={blobY} />
+      <Ticker />
+      <InfoSection />
+      <StepsSection stepsRef={stepsRef} onScrollTop={scrollToTop} />
+    </>
+  );
+};
+
+export default PlagiarismLanding;
diff --git a/src/widgets/home/tokens.ts b/src/widgets/home/tokens.ts
new file mode 100644
index 0000000..c824688
--- /dev/null
+++ 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;
diff --git a/src/widgets/home/types.ts b/src/widgets/home/types.ts
new file mode 100644
index 0000000..36369fc
--- /dev/null
+++ 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;
+}
diff --git a/src/widgets/navbar/ui/index.tsx b/src/widgets/navbar/ui/index.tsx
index 6f1abb8..ec0da6f 100644
--- 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">

From 6041e6a719a4b044085561f1412cf2d862a32ecd Mon Sep 17 00:00:00 2001
From: "nabijonovdavronbek619@gmail.com" <nabijonovdavronbek619@gmail.com>
Date: Wed, 1 Apr 2026 10:53:42 +0500
Subject: [PATCH 2/3] translation added

---
 src/features/auth/login/ui/form.tsx          |  30 ++---
 src/features/auth/register/ui/form.tsx       |  52 +++-----
 src/shared/config/i18n/messages/en.json      | 103 ++++++++++++++++
 src/shared/config/i18n/messages/ru.json      | 103 ++++++++++++++++
 src/shared/config/i18n/messages/uz.d.json.ts | 105 +++++++++++++++-
 src/shared/config/i18n/messages/uz.json      | 105 +++++++++++++++-
 src/widgets/home/components/Hero.tsx         |  43 +++++--
 src/widgets/home/components/InfoSection.tsx  | 119 ++++++++++++-------
 src/widgets/home/components/StartButton.tsx  |   4 +-
 src/widgets/home/components/StepCard.tsx     |  44 ++++++-
 src/widgets/home/components/StepsSection.tsx |  12 +-
 src/widgets/home/components/Ticker.tsx       |  24 +++-
 src/widgets/paymentModal/ui/Paymebutton.tsx  |   6 +-
 src/widgets/paymentModal/ui/Paymentmodal.tsx |  22 ++--
 src/widgets/paymentModal/ui/Pricesummary.tsx |   8 +-
 15 files changed, 650 insertions(+), 130 deletions(-)

diff --git a/src/features/auth/login/ui/form.tsx b/src/features/auth/login/ui/form.tsx
index ab00bd1..67d567a 100644
--- a/src/features/auth/login/ui/form.tsx
+++ b/src/features/auth/login/ui/form.tsx
@@ -11,9 +11,12 @@ import { MotionWrapper } from '../../../../shared/ui/motion';
 import { useLoginForm } from '../lib/useLoginForm';
 import { useLoginModal } from '@/shared/zustand/auth';
 import Link from 'next/link';
+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);
@@ -49,14 +52,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 +66,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 +76,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 +99,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 +132,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,19 +143,19 @@ 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?
+                {t('registerPrompt')}
                 <Link
                   href="/register"
                   className="text-stone-800 underline underline-offset-2 hover:text-stone-600 transition-colors"
                 >
-                  Ro&lsquo;yxatdan o&lsquo;tish
+                  {t('registerLink')}
                 </Link>
               </p>
             </form>
diff --git a/src/features/auth/register/ui/form.tsx b/src/features/auth/register/ui/form.tsx
index 0269f5f..61a3b7d 100644
--- a/src/features/auth/register/ui/form.tsx
+++ b/src/features/auth/register/ui/form.tsx
@@ -4,6 +4,7 @@ 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';
 
 function Field({
   id,
@@ -64,6 +65,8 @@ function Field({
 
 export function RegisterFormUI() {
   const [phone, setPhone] = React.useState('');
+  const t = useTranslations('Auth.Register');
+  const tCommon = useTranslations('Common');
   const {
     registerData,
     errors,
@@ -97,11 +100,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>
     );
@@ -112,14 +113,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 */}
@@ -128,7 +127,7 @@ export function RegisterFormUI() {
             id="name"
             name="name"
             label="Name"
-            placeholder="Ali"
+            placeholder={t('namePlaceholder')}
             value={registerData.name}
             onChange={handleChange}
             error={errors.name}
@@ -137,7 +136,7 @@ export function RegisterFormUI() {
             id="surname"
             name="surname"
             label="Surname"
-            placeholder="Karimov"
+            placeholder={t('surnamePlaceholder')}
             value={registerData.surname}
             onChange={handleChange}
             error={errors.surname}
@@ -150,7 +149,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]' : ''}`}
@@ -159,7 +158,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)}
@@ -180,11 +179,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>
@@ -204,24 +203,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 && (
@@ -244,10 +226,10 @@ 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>
diff --git a/src/shared/config/i18n/messages/en.json b/src/shared/config/i18n/messages/en.json
index 49410a8..86f1d54 100644
--- a/src/shared/config/i18n/messages/en.json
+++ b/src/shared/config/i18n/messages/en.json
@@ -100,5 +100,108 @@
     "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"
+    }
+  },
+  "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"
   }
 }
diff --git a/src/shared/config/i18n/messages/ru.json b/src/shared/config/i18n/messages/ru.json
index 13ae46a..ee3c5ce 100644
--- a/src/shared/config/i18n/messages/ru.json
+++ b/src/shared/config/i18n/messages/ru.json
@@ -100,5 +100,108 @@
     "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": "Создать аккаунт"
+    }
+  },
+  "Payment": {
+    "title": "Оплата",
+    "description": "Просмотрите ваш заказ и оплатите безопасно",
+    "orderSummary": "Сводка заказа",
+    "certificateIncluded": "Включен сертификат завершения",
+    "paymentMethod": "Способ оплаты",
+    "security": "Защищено Payme · SSL шифрование",
+    "serviceFee": "Стоимость услуги",
+    "certificateLabel": "Сертификат",
+    "total": "Итого",
+    "connecting": "Подключение к Payme…",
+    "payButton": "Оплатить через Payme"
   }
 }
diff --git a/src/shared/config/i18n/messages/uz.d.json.ts b/src/shared/config/i18n/messages/uz.d.json.ts
index 7b0caa8..709d3f1 100644
--- 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,108 @@ 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';
+    };
+  };
+  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;
diff --git a/src/shared/config/i18n/messages/uz.json b/src/shared/config/i18n/messages/uz.json
index c6aecb0..bf1078e 100644
--- 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,108 @@
     "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"
+    }
+  },
+  "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"
   }
 }
diff --git a/src/widgets/home/components/Hero.tsx b/src/widgets/home/components/Hero.tsx
index 3b88a6a..612be62 100644
--- a/src/widgets/home/components/Hero.tsx
+++ b/src/widgets/home/components/Hero.tsx
@@ -9,6 +9,7 @@ import DocIllustration from './DocIllustration';
 import Section from './Section';
 import Stat from './Stat';
 import StartButton from './StartButton';
+import { useTranslations } from 'next-intl';
 
 interface HeroProps {
   onStart: () => void;
@@ -17,6 +18,23 @@ interface HeroProps {
 
 const Hero: FC<HeroProps> = ({ onStart, blobY }) => {
   const isMobile = useIsMobile();
+  const t = useTranslations('Hero');
+  const tStats = useTranslations('Stats');
+
+  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 }}>
@@ -71,7 +89,7 @@ const Hero: FC<HeroProps> = ({ onStart, blobY }) => {
         >
           {/* Text block */}
           <div style={{ maxWidth: 600, flex: 1 }}>
-            <Badge>Academic Integrity Platform</Badge>
+            <Badge>{t('badge')}</Badge>
 
             <motion.div variants={stagger} initial="hidden" animate="visible">
               <motion.h1
@@ -86,7 +104,7 @@ const Hero: FC<HeroProps> = ({ onStart, blobY }) => {
                   marginBottom: 4,
                 }}
               >
-                Is Your Work
+                {t('mainHeading')}
               </motion.h1>
               <motion.h1
                 variants={fadeUp(0.1)}
@@ -101,7 +119,7 @@ const Hero: FC<HeroProps> = ({ onStart, blobY }) => {
                   marginBottom: 28,
                 }}
               >
-                Truly Original?
+                {t('mainHeadingItalic')}
               </motion.h1>
             </motion.div>
 
@@ -117,10 +135,7 @@ const Hero: FC<HeroProps> = ({ onStart, blobY }) => {
                 marginBottom: 40,
               }}
             >
-              Plagiarism is presenting someone else&lsquo;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.
+              {t('description')}
             </motion.p>
 
             <motion.div
@@ -142,7 +157,7 @@ const Hero: FC<HeroProps> = ({ onStart, blobY }) => {
                   fontFamily: "'DM Mono', monospace",
                 }}
               >
-                Certificate issued within 24h
+                {t('certificateNote')}
               </span>
             </motion.div>
           </div>
@@ -165,9 +180,15 @@ const Hero: FC<HeroProps> = ({ onStart, blobY }) => {
             borderTop: `1px solid ${C.border}`,
           }}
         >
-          {STATS.map((s) => (
-            <Stat key={s.label} value={s.value} label={s.label} />
-          ))}
+          {STATS.map((s) => {
+            return (
+              <Stat
+                key={s.label}
+                value={s.value}
+                label={getTranslatedLabel(s.label)}
+              />
+            );
+          })}
         </motion.div>
       </Section>
     </div>
diff --git a/src/widgets/home/components/InfoSection.tsx b/src/widgets/home/components/InfoSection.tsx
index 35ca690..eaffb4a 100644
--- a/src/widgets/home/components/InfoSection.tsx
+++ b/src/widgets/home/components/InfoSection.tsx
@@ -5,51 +5,82 @@ 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 = () => (
-  <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,
-          }}
-        >
-          Why It Matters
-        </p>
-        <h2
-          style={{
-            fontFamily: "'Playfair Display', serif",
-            fontSize: 'clamp(26px, 3.5vw, 40px)',
-            fontWeight: 700,
-            color: C.text,
-            lineHeight: 1.2,
-          }}
-        >
-          Understanding Plagiarism
-        </h2>
-      </motion.div>
+const InfoSection: FC = () => {
+  const t = useTranslations('InfoSection');
+  const tCards = useTranslations('InfoCards');
 
-      {/* Cards */}
-      <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
-        {INFO_CARDS.map((card) => (
-          <InfoCard key={card.title} {...card} />
-        ))}
-      </div>
-    </Section>
-  </div>
-);
+  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;
diff --git a/src/widgets/home/components/StartButton.tsx b/src/widgets/home/components/StartButton.tsx
index 4d2bde4..8e796c3 100644
--- a/src/widgets/home/components/StartButton.tsx
+++ b/src/widgets/home/components/StartButton.tsx
@@ -2,6 +2,7 @@
 import { useState, type FC } from 'react';
 import { motion } from 'framer-motion';
 import { C } from '../tokens';
+import { useTranslations } from 'next-intl';
 
 interface StartButtonProps {
   onClick: () => void;
@@ -10,6 +11,7 @@ interface StartButtonProps {
 
 const StartButton: FC<StartButtonProps> = ({ onClick, small = false }) => {
   const [hovered, setHovered] = useState(false);
+  const t = useTranslations('Common');
 
   return (
     <motion.button
@@ -35,7 +37,7 @@ const StartButton: FC<StartButtonProps> = ({ onClick, small = false }) => {
           : `0 2px 8px ${C.accent}22`,
       }}
     >
-      Start Checking →
+      {t('startButton')}
     </motion.button>
   );
 };
diff --git a/src/widgets/home/components/StepCard.tsx b/src/widgets/home/components/StepCard.tsx
index 2fc7b39..e874d34 100644
--- a/src/widgets/home/components/StepCard.tsx
+++ b/src/widgets/home/components/StepCard.tsx
@@ -4,6 +4,7 @@ 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;
@@ -14,6 +15,45 @@ 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
@@ -87,7 +127,7 @@ const StepCard: FC<StepCardProps> = ({ step, index }) => {
               fontWeight: 700,
             }}
           >
-            {step.title}
+            {getStepTitle(step.num)}
           </h3>
         </div>
         <p
@@ -98,7 +138,7 @@ const StepCard: FC<StepCardProps> = ({ step, index }) => {
             margin: 0,
           }}
         >
-          {step.desc}
+          {getStepDesc(step.num)}
         </p>
       </div>
     </motion.div>
diff --git a/src/widgets/home/components/StepsSection.tsx b/src/widgets/home/components/StepsSection.tsx
index f203ff7..6872a92 100644
--- a/src/widgets/home/components/StepsSection.tsx
+++ b/src/widgets/home/components/StepsSection.tsx
@@ -7,6 +7,7 @@ import { useIsMobile } from '../hooks/useIsMobile';
 import Section from './Section';
 import StartButton from './StartButton';
 import StepCard from './StepCard';
+import { useTranslations } from 'next-intl';
 
 interface StepsSectionProps {
   stepsRef: React.RefObject<HTMLDivElement | null>;
@@ -15,6 +16,7 @@ interface StepsSectionProps {
 
 const StepsSection: FC<StepsSectionProps> = ({ stepsRef, onScrollTop }) => {
   const isMobile = useIsMobile();
+  const t = useTranslations('StepsSection');
 
   return (
     <div
@@ -44,7 +46,7 @@ const StepsSection: FC<StepsSectionProps> = ({ stepsRef, onScrollTop }) => {
                 marginBottom: 10,
               }}
             >
-              Process
+              {t('label')}
             </p>
             <h2
               style={{
@@ -55,7 +57,7 @@ const StepsSection: FC<StepsSectionProps> = ({ stepsRef, onScrollTop }) => {
                 lineHeight: 1.2,
               }}
             >
-              How It Works
+              {t('heading')}
             </h2>
             <p
               style={{
@@ -65,7 +67,7 @@ const StepsSection: FC<StepsSectionProps> = ({ stepsRef, onScrollTop }) => {
                 lineHeight: 1.75,
               }}
             >
-              Six simple steps from upload to certified report.
+              {t('description')}
             </p>
           </motion.div>
 
@@ -112,10 +114,10 @@ const StepsSection: FC<StepsSectionProps> = ({ stepsRef, onScrollTop }) => {
                   fontWeight: 700,
                 }}
               >
-                Ready to verify your document?
+                {t('ctaHeading')}
               </h3>
               <p style={{ color: C.textMuted, fontSize: 13 }}>
-                Get your originality certificate in under 24 hours.
+                {t('ctaDescription')}
               </p>
             </div>
             <StartButton onClick={onScrollTop} />
diff --git a/src/widgets/home/components/Ticker.tsx b/src/widgets/home/components/Ticker.tsx
index 688396b..65d9a7b 100644
--- a/src/widgets/home/components/Ticker.tsx
+++ b/src/widgets/home/components/Ticker.tsx
@@ -2,10 +2,32 @@ 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={{
@@ -37,7 +59,7 @@ const Ticker: FC = () => {
               color: i % 3 === 0 ? C.textMid : C.textMuted,
             }}
           >
-            {item}
+            {getTranslatedItem(item, i)}
             <span style={{ marginLeft: 56, color: C.accent, opacity: 0.3 }}>
               ✦
             </span>
diff --git a/src/widgets/paymentModal/ui/Paymebutton.tsx b/src/widgets/paymentModal/ui/Paymebutton.tsx
index 2a0d18a..f22cccc 100644
--- 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>
         </>
       ) : (
         <>
diff --git a/src/widgets/paymentModal/ui/Paymentmodal.tsx b/src/widgets/paymentModal/ui/Paymentmodal.tsx
index ea0f212..ac01019 100644
--- 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>
diff --git a/src/widgets/paymentModal/ui/Pricesummary.tsx b/src/widgets/paymentModal/ui/Pricesummary.tsx
index 975404d..9ac44e5 100644
--- 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

From 011845571f88b7e6f7dac22a220d1ee81a63bd58 Mon Sep 17 00:00:00 2001
From: "nabijonovdavronbek619@gmail.com" <nabijonovdavronbek619@gmail.com>
Date: Wed, 1 Apr 2026 12:12:35 +0500
Subject: [PATCH 3/3] modal location updated

---
 src/features/auth/login/ui/form.tsx          | 19 ++++++++-----
 src/features/auth/register/ui/form.tsx       | 29 ++++++++++++++++++++
 src/shared/config/i18n/messages/en.json      |  3 +-
 src/shared/config/i18n/messages/ru.json      |  3 +-
 src/shared/config/i18n/messages/uz.d.json.ts |  1 +
 src/shared/config/i18n/messages/uz.json      |  3 +-
 src/widgets/home/components/Hero.tsx         | 22 +++++++++------
 src/widgets/home/components/StepsSection.tsx | 15 +++++-----
 src/widgets/home/index.tsx                   | 17 ++----------
 9 files changed, 71 insertions(+), 41 deletions(-)

diff --git a/src/features/auth/login/ui/form.tsx b/src/features/auth/login/ui/form.tsx
index 67d567a..c7becde 100644
--- a/src/features/auth/login/ui/form.tsx
+++ b/src/features/auth/login/ui/form.tsx
@@ -9,8 +9,7 @@ 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() {
@@ -20,6 +19,9 @@ export function LoginForm() {
 
   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>) => {
@@ -149,14 +151,17 @@ export function LoginForm() {
               </div>
 
               {/* Register hint */}
-              <p className="text-center text-[0.78rem] text-stone-400">
+              <p className="text-center text-[0.78rem] text-stone-400 flex items-center justify-center gap-2">
                 {t('registerPrompt')}
-                <Link
-                  href="/register"
-                  className="text-stone-800 underline underline-offset-2 hover:text-stone-600 transition-colors"
+                <p
+                  onClick={() => {
+                    toggleLoginModal();
+                    toggleRegisterModal();
+                  }}
+                  className="text-stone-800 hover:cursor-pointer underline underline-offset-2 hover:text-stone-600 transition-colors"
                 >
                   {t('registerLink')}
-                </Link>
+                </p>
               </p>
             </form>
           </div>
diff --git a/src/features/auth/register/ui/form.tsx b/src/features/auth/register/ui/form.tsx
index 61a3b7d..6e6f89c 100644
--- a/src/features/auth/register/ui/form.tsx
+++ b/src/features/auth/register/ui/form.tsx
@@ -5,6 +5,7 @@ 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,
@@ -66,6 +67,7 @@ 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,
@@ -77,6 +79,10 @@ export function RegisterFormUI() {
     handleSubmit,
     setItem,
   } = useRegisterForm();
+  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>) => {
@@ -233,6 +239,29 @@ export function RegisterFormUI() {
           )}
         </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>
   );
 }
diff --git a/src/shared/config/i18n/messages/en.json b/src/shared/config/i18n/messages/en.json
index 86f1d54..3ed7a48 100644
--- a/src/shared/config/i18n/messages/en.json
+++ b/src/shared/config/i18n/messages/en.json
@@ -188,7 +188,8 @@
       "namePlaceholder": "Ali",
       "surnamePlaceholder": "Karimov",
       "terms": "I agree to the Terms of Service and Privacy Policy",
-      "submitButton": "Create account"
+      "submitButton": "Create account",
+      "loginPrompt": "Already have an account?"
     }
   },
   "Payment": {
diff --git a/src/shared/config/i18n/messages/ru.json b/src/shared/config/i18n/messages/ru.json
index ee3c5ce..5073b39 100644
--- a/src/shared/config/i18n/messages/ru.json
+++ b/src/shared/config/i18n/messages/ru.json
@@ -188,7 +188,8 @@
       "namePlaceholder": "Али",
       "surnamePlaceholder": "Каримов",
       "terms": "Я согласен с Условиями обслуживания и Политикой конфиденциальности",
-      "submitButton": "Создать аккаунт"
+      "submitButton": "Создать аккаунт",
+      "loginPrompt": "Уже есть аккаунт?"
     }
   },
   "Payment": {
diff --git a/src/shared/config/i18n/messages/uz.d.json.ts b/src/shared/config/i18n/messages/uz.d.json.ts
index 709d3f1..95a0d10 100644
--- a/src/shared/config/i18n/messages/uz.d.json.ts
+++ b/src/shared/config/i18n/messages/uz.d.json.ts
@@ -192,6 +192,7 @@ declare const messages: {
       surnamePlaceholder: 'Karimov';
       terms: "Men Xizmat ko'rsatish shartlari va Maxfiylik siyosatiga roziman";
       submitButton: 'Hisob yaratish';
+      loginPrompt: 'Hisobingiz bormi?';
     };
   };
   Payment: {
diff --git a/src/shared/config/i18n/messages/uz.json b/src/shared/config/i18n/messages/uz.json
index bf1078e..7b2462d 100644
--- a/src/shared/config/i18n/messages/uz.json
+++ b/src/shared/config/i18n/messages/uz.json
@@ -188,7 +188,8 @@
       "namePlaceholder": "Ali",
       "surnamePlaceholder": "Karimov",
       "terms": "Men Xizmat ko'rsatish shartlari va Maxfiylik siyosatiga roziman",
-      "submitButton": "Hisob yaratish"
+      "submitButton": "Hisob yaratish",
+      "loginPrompt": "Hisobingiz bormi?"
     }
   },
   "Payment": {
diff --git a/src/widgets/home/components/Hero.tsx b/src/widgets/home/components/Hero.tsx
index 612be62..31ad2d1 100644
--- a/src/widgets/home/components/Hero.tsx
+++ b/src/widgets/home/components/Hero.tsx
@@ -1,5 +1,10 @@
-import type { FC } from 'react';
-import { motion, type MotionStyle, type MotionValue } from 'framer-motion';
+'use client';
+import {
+  motion,
+  useScroll,
+  useTransform,
+  type MotionStyle,
+} from 'framer-motion';
 import { fadeUp, stagger } from '../animations';
 import { C } from '../tokens';
 import { STATS } from '../constants';
@@ -10,16 +15,15 @@ import Section from './Section';
 import Stat from './Stat';
 import StartButton from './StartButton';
 import { useTranslations } from 'next-intl';
+import { useLoginModal } from '@/shared/zustand/auth';
 
-interface HeroProps {
-  onStart: () => void;
-  blobY: MotionValue<number>;
-}
-
-const Hero: FC<HeroProps> = ({ onStart, blobY }) => {
+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) {
@@ -149,7 +153,7 @@ const Hero: FC<HeroProps> = ({ onStart, blobY }) => {
                 flexWrap: 'wrap',
               }}
             >
-              <StartButton onClick={onStart} />
+              <StartButton onClick={() => toggleLoginModal()} />
               <span
                 style={{
                   color: C.textMuted,
diff --git a/src/widgets/home/components/StepsSection.tsx b/src/widgets/home/components/StepsSection.tsx
index 6872a92..ac22875 100644
--- a/src/widgets/home/components/StepsSection.tsx
+++ b/src/widgets/home/components/StepsSection.tsx
@@ -1,4 +1,5 @@
-import type { FC } from 'react';
+'use client';
+import { useRef } from 'react';
 import { motion } from 'framer-motion';
 import { fadeUp } from '../animations';
 import { C } from '../tokens';
@@ -8,15 +9,13 @@ import Section from './Section';
 import StartButton from './StartButton';
 import StepCard from './StepCard';
 import { useTranslations } from 'next-intl';
+import { useLoginModal } from '@/shared/zustand/auth';
 
-interface StepsSectionProps {
-  stepsRef: React.RefObject<HTMLDivElement | null>;
-  onScrollTop: () => void;
-}
-
-const StepsSection: FC<StepsSectionProps> = ({ stepsRef, onScrollTop }) => {
+const StepsSection = () => {
   const isMobile = useIsMobile();
   const t = useTranslations('StepsSection');
+  const stepsRef = useRef<HTMLDivElement>(null);
+  const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
 
   return (
     <div
@@ -120,7 +119,7 @@ const StepsSection: FC<StepsSectionProps> = ({ stepsRef, onScrollTop }) => {
                 {t('ctaDescription')}
               </p>
             </div>
-            <StartButton onClick={onScrollTop} />
+            <StartButton onClick={() => toggleLoginModal()} />
           </motion.div>
         </div>
       </Section>
diff --git a/src/widgets/home/index.tsx b/src/widgets/home/index.tsx
index 51c310a..dc2bc1a 100644
--- a/src/widgets/home/index.tsx
+++ b/src/widgets/home/index.tsx
@@ -1,27 +1,16 @@
 'use client';
-import { useRef, type FC } from 'react';
-import { useScroll, useTransform } from 'framer-motion';
 import Hero from './components/Hero';
 import InfoSection from './components/InfoSection';
 import StepsSection from './components/StepsSection';
 import Ticker from './components/Ticker';
 
-const PlagiarismLanding: FC = () => {
-  const stepsRef = useRef<HTMLDivElement>(null);
-  const { scrollY } = useScroll();
-  const blobY = useTransform(scrollY, [0, 600], [0, 80]);
-
-  const scrollToSteps = () =>
-    stepsRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
-
-  const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });
-
+const PlagiarismLanding = () => {
   return (
     <>
-      <Hero onStart={scrollToSteps} blobY={blobY} />
+      <Hero />
       <Ticker />
       <InfoSection />
-      <StepsSection stepsRef={stepsRef} onScrollTop={scrollToTop} />
+      <StepsSection />
     </>
   );
 };