landing page added

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",
+      "version": "5.96.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.16.tgz",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.96.0.tgz",
-      "integrity": "sha512-MvtWckSVufs/ja463/K4PyJeqT+HMlJWtw6PrCpywznd2NSgO3m4KwO9RqbFqGg6iDE8vVMFWMeQI4Io3eEYww==",
+      "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",
+      "version": "5.96.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.16.tgz",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.96.0.tgz",
-      "integrity": "sha512-bpMGOmV4OPmif7TNMteU/Ehf/hoC0Kf98PDc0F4BZkFrEapRMEqI/V6YS0lyzwSV6PQpY1y4xxArUIfBW5LVxQ==",
+      "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",
+      "version": "1.14.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.14.0.tgz",
-      "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
+      "integrity": "sha512-3Y8yrqLSwjuzpXuZ0oIYZ/XGgLwUIBU3uLvbcpb0pidD9ctpShJd43KSlEEkVQg6DS0G9NKyzOvBfUtDKEyHvQ==",
       "license": "MIT",
       "dependencies": {
-        "follow-redirects": "^1.15.6",
+        "follow-redirects": "^1.15.11",
-        "form-data": "^4.0.4",
+        "form-data": "^4.0.5",
-        "proxy-from-env": "^1.1.0"
+        "proxy-from-env": "^2.1.0"
       }
     },
     "node_modules/axobject-query": {
@@ -7829,10 +7830,13 @@
       }
     },
     "node_modules/proxy-from-env": {
-      "version": "1.1.0",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
-      "license": "MIT"
+      "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",

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",

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>

src/app/[locale]/page.tsx

@@ -1,11 +1,9 @@
-import { PlagiarismCheckForm } from '@/widgets/fileUpload/ui/Plagiraismcheckform';
+import PlagiarismLanding from '@/widgets/home';
-import { HistoryPage } from '@/widgets/history';
 
 export default function Home() {
   return (
     <div className="bg-[#f4f5ffec]">
-      <PlagiarismCheckForm />
+      <PlagiarismLanding />
-      <HistoryPage />
     </div>
   );
 }

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>
+  );
+}

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 {

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');
   };
 

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;
       }
-
+      registerRequest.mutate(registerData);
-      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);
-      }
     },
     [registerData, clearRegisterData],
   );
@@ -57,10 +76,11 @@ export function useRegisterForm() {
   return {
     registerData,
     errors,
-    loading,
+    loading: registerRequest.isPending,
     success,
     handleChange,
     handleOferta,
     handleSubmit,
+    setItem,
   };
 }

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) {
+  } else if (digits.length !== 9 && digits.length !== 12) {
-    errors.phone = 'Enter a valid 9-digit phone number';
+    errors.phone = 'Enter a valid 9-digit or 13-digit phone number';
   }
 
   if (!data.oferta) {

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 (

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;
+};

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;
+}

src/shared/request/links.ts

@@ -0,0 +1,4 @@
+export const links = {
+  login: '/users/login/',
+  register: '/users/register/',
+};

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>

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 ──────────────────────────────────────────────────────────
 

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 } },
+};

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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];

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;
+}

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;

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;

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;
+}

src/widgets/navbar/ui/index.tsx

@@ -20,8 +20,8 @@ const Navbar = () => {
   const menu = getMenu(t);
 
   return (
-    <section className="py-4">
+    <section className="py-4 flex items-center justify-center w-full ">
-      <div className="custom-container">
+      <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">