profile page ui complated

src/widgets/cabinet/ui/CabinetNav.tsx

@@ -0,0 +1,43 @@
+'use client';
+import React from 'react';
+import { Menu } from 'lucide-react';
+import type { CabinetSection } from '../lib/types';
+
+// ─── Labels ────────────────────────────────────────────────────────────────────
+
+const SECTION_LABELS: Record<CabinetSection, string> = {
+  dashboard: 'Dashboard',
+  plagiat: 'Plagiat tekshiruvlar',
+  si: 'SI detektor',
+  payments: "To'lovlar tarixi",
+  profile: 'Profil',
+};
+
+// ─── Props ─────────────────────────────────────────────────────────────────────
+
+interface CabinetNavProps {
+  activeSection: CabinetSection;
+  onMenuClick: () => void;
+}
+
+// ─── Component ─────────────────────────────────────────────────────────────────
+
+export const CabinetNav: React.FC<CabinetNavProps> = ({
+  activeSection,
+  onMenuClick,
+}) => (
+  <header className="h-14 px-4 md:px-6 flex lg:hidden items-center justify-between border-b border-slate-100 bg-white/80 backdrop-blur-sm sticky top-0 z-20">
+    <div className="flex items-center gap-3">
+      <button
+        onClick={onMenuClick}
+        className="lg:hidden p-2 rounded-lg text-slate-500 hover:bg-slate-100 transition-colors"
+        aria-label="Menu"
+      >
+        <Menu size={18} />
+      </button>
+      <h1 className="text-sm font-semibold text-slate-800">
+        {SECTION_LABELS[activeSection]}
+      </h1>
+    </div>
+  </header>
+);

src/widgets/cabinet/ui/Sidebar.tsx

@@ -140,6 +140,13 @@ export const Sidebar: React.FC<SidebarProps> = ({
           );
         })}
       </nav>
+
+      {/* Footer */}
+      <div className="px-4 py-4 border-t border-slate-100">
+        <p className="text-[11px] text-slate-400 text-center">
+          © 2026 Plagat.uz
+        </p>
+      </div>
     </aside>
   </>
 );

src/widgets/cabinet/ui/dashboard/CtaCards.tsx

@@ -1,49 +1,33 @@
 import React from 'react';
-import { FileSearch, BrainCircuit, ArrowRight } from 'lucide-react';
-import type { CabinetSection } from '../../lib/types';
+import { FileSearch, ArrowRight } from 'lucide-react';
+import Link from 'next/link';
+import SiCTACard from '@/features/modals/siModal/page';
 
-interface CtaCardsProps {
-  onNavigate: (section: CabinetSection) => void;
-}
+export const CtaCards = () => (
+  <>
+    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+      {/* Plagiat */}
+      <Link
+        href={'/plagat'}
+        className="group relative overflow-hidden rounded-2xl bg-linear-to-br from-blue-500 to-blue-600 p-6 text-left shadow-md hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 active:translate-y-0 active:shadow-md"
+      >
+        <div className="absolute right-3 top-3 opacity-10 pointer-events-none">
+          <FileSearch size={72} className="text-white" />
+        </div>
+        <FileSearch size={26} className="text-white mb-4" />
+        <h3 className="text-white font-semibold text-base mb-1">
+          Plagiat tekshiruvi
+        </h3>
+        <p className="text-blue-100 text-sm mb-4 leading-relaxed">
+          Hujjatingizni originallik uchun tekshiring
+        </p>
+        <span className="inline-flex items-center gap-1.5 text-white text-xs font-medium bg-white/20 rounded-lg px-3 py-1.5 group-hover:bg-white/30 transition-colors">
+          Yuborish <ArrowRight size={12} />
+        </span>
+      </Link>
 
-export const CtaCards: React.FC<CtaCardsProps> = ({ onNavigate }) => (
-  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-    {/* Plagiat */}
-    <button
-      onClick={() => onNavigate('plagiat')}
-      className="group relative overflow-hidden rounded-2xl bg-linear-to-br from-blue-500 to-blue-600 p-6 text-left shadow-md hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 active:translate-y-0 active:shadow-md"
-    >
-      <div className="absolute right-3 top-3 opacity-10 pointer-events-none">
-        <FileSearch size={72} className="text-white" />
-      </div>
-      <FileSearch size={26} className="text-white mb-4" />
-      <h3 className="text-white font-semibold text-base mb-1">
-        Plagiat tekshiruvi
-      </h3>
-      <p className="text-blue-100 text-sm mb-4 leading-relaxed">
-        Hujjatingizni originallik uchun tekshiring
-      </p>
-      <span className="inline-flex items-center gap-1.5 text-white text-xs font-medium bg-white/20 rounded-lg px-3 py-1.5 group-hover:bg-white/30 transition-colors">
-        Yuborish <ArrowRight size={12} />
-      </span>
-    </button>
-
-    {/* SI */}
-    <button
-      onClick={() => onNavigate('si')}
-      className="group relative overflow-hidden rounded-2xl bg-linear-to-br from-violet-500 to-violet-600 p-6 text-left shadow-md hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 active:translate-y-0 active:shadow-md"
-    >
-      <div className="absolute right-3 top-3 opacity-10 pointer-events-none">
-        <BrainCircuit size={72} className="text-white" />
-      </div>
-      <BrainCircuit size={26} className="text-white mb-4" />
-      <h3 className="text-white font-semibold text-base mb-1">SI detektor</h3>
-      <p className="text-violet-100 text-sm mb-4 leading-relaxed">
-        Matnni sun&apos;iy intellekt uchun tekshiring
-      </p>
-      <span className="inline-flex items-center gap-1.5 text-white text-xs font-medium bg-white/20 rounded-lg px-3 py-1.5 group-hover:bg-white/30 transition-colors">
-        Yuborish <ArrowRight size={12} />
-      </span>
-    </button>
-  </div>
+      {/* SI */}
+      <SiCTACard />
+    </div>
+  </>
 );

src/widgets/cabinet/ui/index.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import dynamic from 'next/dynamic';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Sidebar } from './Sidebar';
+import { CabinetNav } from './CabinetNav';
 import { Dashboard } from './dashboard';
 import { useCabinet } from '../lib/hooks/useCabinet';
 import {
@@ -91,7 +92,7 @@ export const CabinetLayout: React.FC = () => {
   const fullName = `${MOCK_USER.name} ${MOCK_USER.surname}`;
 
   return (
-    <div className="flex border-t min-h-screen">
+    <div className="flex bg-slate-50 min-h-screen">
       <Sidebar
         active={activeSection}
         onNavigate={navigate}
@@ -101,6 +102,8 @@ export const CabinetLayout: React.FC = () => {
       />
 
       <div className="flex-1 flex flex-col min-w-0">
+        <CabinetNav activeSection={activeSection} onMenuClick={toggleSidebar} />
+
         <main className="flex-1 p-4 md:p-6 lg:p-8 max-w-6xl mx-auto w-full">
           <AnimatePresence mode="wait">
             <motion.div key={activeSection} {...FADE}>