feat(ui):Created setting page for personal details and minor changes on layout

src/app/(protected)/settings/page.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import React, { useState } from "react";
+import { User, Lock, Trash2, X, Settings as SettingsIcon } from "lucide-react";
+import AccountDeletion from "~/modules/settings/ui/accountDeletion";
+import PasswordReset from "~/modules/settings/ui/passwordChange";
+import PersonalSettings from "~/modules/settings/ui/personalDetails";
+
+type PersonalDetails = {
+    name: string;
+    email: string;
+    bio: string;
+};
+
+interface SettingsPageProps {
+    onClose?: () => void;
+}
+
+export default function SettingsPage({ onClose }: SettingsPageProps) {
+    const [activeTab, setActiveTab] = useState<
+        "personal" | "password" | "danger"
+    >("personal");
+
+    const tabs = [
+        {
+            id: "personal" as const,
+            label: "Personal Info",
+            icon: User,
+            description: "Manage your profile and preferences",
+        },
+        {
+            id: "password" as const,
+            label: "Password",
+            icon: Lock,
+            description: "Update your password",
+        },
+        {
+            id: "danger" as const,
+            label: "Account",
+            icon: Trash2,
+            description: "Delete your account",
+        },
+    ];
+
+    // FIX: Changed 'any' to 'PersonalDetails'
+    const handleSavePersonalInfo = (data: PersonalDetails) => {
+        console.log("Saving personal info:", data);
+        // Add your API call here
+    };
+
+    const handlePasswordChange = async (data: {
+        currentPassword: string;
+        newPassword: string;
+    }) => {
+        console.log("Changing password");
+        return true; 
+    };
+
+    const handleDeleteAccount = async () => {
+        console.log("Deleting account");
+        return true; 
+    };
+
+    const handleExportData = () => {
+        console.log("Exporting user data");
+    };
+
+    return (
+        <div className="min-h-screen bg-gradient-to-br from-slate-950 via-indigo-950/30 to-slate-900 p-4 md:p-8">
+            <div className="mx-auto max-w-6xl">
+                {/* Header Section */}
+                <div className="mb-8 flex items-start justify-between">
+                    <div>
+                        <div className="mb-2 flex items-center gap-3">
+                            <div className="rounded-xl bg-gradient-to-br from-indigo-600 to-purple-600 p-2.5 shadow-lg shadow-indigo-500/20">
+                                <SettingsIcon className="h-6 w-6 text-white" />
+                            </div>
+                            <h1 className="text-3xl font-bold text-white md:text-4xl">
+                                Settings
+                            </h1>
+                        </div>
+                        <p className="ml-1 text-sm text-slate-400">
+                            Manage your account settings and preferences
+                        </p>
+                    </div>
+                    {onClose && (
+                        <button
+                            onClick={onClose}
+                            className="rounded-xl border border-slate-700/30 bg-slate-800/50 p-2.5 text-slate-300 transition-all hover:bg-slate-700/50 hover:text-white"
+                        >
+                            <X className="h-5 w-5" />
+                        </button>
+                    )}
+                </div>
+
+                <div className="grid grid-cols-1 gap-6 lg:grid-cols-4">
+                    {/* Sidebar Navigation */}
+                    <div className="lg:col-span-1">
+                        <div className="space-y-1 rounded-2xl border border-slate-800/50 bg-slate-900/50 p-2 backdrop-blur-sm lg:sticky lg:top-8">
+                            {tabs.map((tab) => {
+                                const Icon = tab.icon;
+                                const isActive = activeTab === tab.id;
+                                const isDanger = tab.id === "danger";
+
+                                return (
+                                    <button
+                                        key={tab.id}
+                                        onClick={() => setActiveTab(tab.id)}
+                                        className={`group flex w-full items-start gap-3 rounded-xl px-4 py-3.5 text-left transition-all duration-200 ${
+                                            isActive
+                                                ? isDanger
+                                                    ? "border border-red-500/30 bg-red-500/10"
+                                                    : "bg-gradient-to-r from-indigo-600 to-purple-600 shadow-lg"
+                                                : isDanger
+                                                  ? "text-red-400/60 hover:bg-red-500/5"
+                                                  : "text-slate-400 hover:bg-slate-800/50 hover:text-white"
+                                        }`}
+                                    >
+                                        <Icon className={`mt-0.5 h-5 w-5 flex-shrink-0 ${isActive ? "text-white" : ""}`} />
+                                        <div className="min-w-0 flex-1">
+                                            <div className={`text-sm font-semibold ${isActive ? "text-white" : ""}`}>
+                                                {tab.label}
+                                            </div>
+                                            <div className={`text-xs ${isActive ? "text-white/70" : "text-slate-500"}`}>
+                                                {tab.description}
+                                            </div>
+                                        </div>
+                                    </button>
+                                );
+                            })}
+                        </div>
+                    </div>
+
+                    {/* Main Content Area */}
+                    <div className="lg:col-span-3">
+                        {activeTab === "personal" && (
+                            <PersonalSettings onSave={handleSavePersonalInfo} />
+                        )}
+
+                        {activeTab === "password" && (
+                            <PasswordReset onPasswordChange={handlePasswordChange} />
+                        )}
+
+                        {activeTab === "danger" && (
+                            <AccountDeletion
+                                onDelete={handleDeleteAccount}
+                                onExportData={handleExportData}
+                            />
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

src/app/layout.tsx

@@ -11,7 +11,7 @@ import { cn } from "~/lib/utils";
 const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
 
 export const metadata: Metadata = {
-    title: "Create T3 App",
+    title: "ShikShya",
     description: "Generated by create-t3-app",
     icons: [{ rel: "icon", url: "/favicon.ico" }],
 };

src/components/layout/navbar.tsx

@@ -16,6 +16,7 @@ import { cn } from "~/lib/utils";
 import ProfileSidebar from "./sidebar";
 import { useSession } from "~/lib/auth-client";
 import { UserAvatar } from "../user-avatar";
+import Image from "next/image";
 
 const navItems = [
     { name: "Dashboard", path: "/dashboard", icon: LayoutDashboard },
@@ -60,15 +61,22 @@ export default function Navbar() {
                         {/* Logo */}
                         <Link
                             href="/dashboard"
-                            className="group flex items-center gap-2"
+                            className="group flex items-center gap-3 select-none"
                         >
-                            <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-600 shadow-lg shadow-indigo-500/30 transition-transform group-hover:rotate-12">
-                                <span className="text-lg font-bold text-white">
-                                    शि
-                                </span>
+                            {/* Logo Icon */}
+                            <div className="relative flex h-10 w-10 items-center justify-center overflow-hidden shadow-lg shadow-indigo-500/30 transition-all duration-300 group-hover:scale-105 group-hover:rotate-12">
+                                <Image
+                                    src="/logo.png"
+                                    alt="Shikshya logo"
+                                    fill
+                                    className="object-cover"
+                                    priority
+                                />
                             </div>
-                            <span className="text-xl font-bold tracking-tight text-white">
-                                Shik<span className="text-xl">क्ष</span>ya
+
+                            {/* Brand Text */}
+                            <span className="text-xl font-extrabold tracking-tight text-white">
+                                ShikShya
                             </span>
                         </Link>
 

src/components/layout/sidebar.tsx

@@ -110,23 +110,7 @@ export default function ProfileSidebar({
                                     Account Settings
                                 </p>
                                 <Link
-                                    href="/profile/details"
-                                    className="flex w-full items-center justify-between rounded-xl p-4 text-slate-300 transition-all hover:bg-white/5 hover:text-white"
-                                >
-                                    <div className="flex items-center gap-3">
-                                        <User
-                                            size={18}
-                                            className="text-indigo-400"
-                                        />
-                                        <span>Personal Details</span>
-                                    </div>
-                                    <ChevronRight
-                                        size={16}
-                                        className="text-slate-600"
-                                    />
-                                </Link>
-                                <Link
-                                    href="/profile/settings"
+                                    href="/settings"
                                     className="flex w-full items-center justify-between rounded-xl p-4 text-slate-300 transition-all hover:bg-white/5 hover:text-white"
                                 >
                                     <div className="flex items-center gap-3">

src/modules/dashboard/ui/components/calendar-widget.tsx

@@ -120,7 +120,7 @@ export default function CalendarWidget() {
                             </div>
                         </div>
                         <div className="rounded-xl border border-slate-700/30 bg-slate-800/30 p-3 text-center">
-                            <Flame className="mx-auto mb-1.5 h-4 w-4 text-orange-400" />
+                            <Flame className="mx-auto mb-1.5 h-4 w-4 text-pink-400" />
                             <div className="text-xl font-bold text-pink-400">
                                 {highestStreak}
                             </div>

src/modules/dashboard/ui/components/mini-todo.tsx

@@ -76,23 +76,23 @@ export const MiniTodo = () => {
     if (!isMounted) return null;
 
     return (
-        <section className="w-full space-y-4">
+        <section className="mt-10 w-full space-y-4">
             <div className="flex items-center gap-2 px-1">
                 <ListTodo className="size-4 text-indigo-400" />
                 <h2 className="text-[11px] font-black tracking-[0.2em] text-slate-200 uppercase">
                     Quick Tasks
                 </h2>
             </div>
 
-            <div className="rounded-2xl border-2 border-[#24283b] bg-[#16161e]/60 p-5 backdrop-blur-xl">
+            <div className="rounded-2xl border-2 border-indigo-500/50 bg-[#16161e]/60 p-5 backdrop-blur-xl">
                 <div className="relative mb-6 flex gap-2">
                     <input
                         type="text"
                         value={inputValue}
                         onChange={(e) => setInputValue(e.target.value)}
                         onKeyDown={(e) => e.key === "Enter" && addTodo()}
                         placeholder="Plan your next move..."
-                        className="flex-1 rounded-xl border border-[#24283b] bg-[#0a0a0c] px-4 py-3 text-xs text-white placeholder-slate-600 transition-all focus:border-indigo-500/50 focus:outline-none"
+                        className="flex-1 rounded-xl border border-[#24283b] bg-[#0a0a0c] px-4 py-3 text-base text-white placeholder-slate-600 transition-all focus:border-indigo-500/50 focus:outline-none"
                     />
                     <button
                         onClick={addTodo}

src/modules/dashboard/ui/views/dashboard-view.tsx

@@ -15,23 +15,18 @@ export const DashboardView = () => {
                 <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
                     <div className="lg:col-span-2">
                         <StreakCard />
+                        <div className="w-full">
+                            <MiniTodo />
+                        </div>
                     </div>
                     <div className="lg:col-span-1">
                         <CalendarWidget />
                     </div>
                 </div>
 
-                {/* Bottom Row: 30/70 Split for Todo and Pinned Courses */}
-                <div className="flex flex-col gap-8 lg:flex-row">
-                    {/* Left: Mini Todo (30%) */}
-                    <div className="w-full lg:w-[30%]">
-                        <MiniTodo />
-                    </div>
-
-                    {/* Right: Pinned Courses (70%) */}
-                    <div className="w-full lg:w-[70%]">
-                        <PinnedCourses />
-                    </div>
+                {/* Right: Pinned Courses (70%) */}
+                <div className="w-full lg:w-[70%]">
+                    <PinnedCourses />
                 </div>
             </main>
         </div>

src/modules/settings/type.ts

@@ -0,0 +1,6 @@
+export interface Data {
+  firstName: string;
+  lastName: string;
+  email: string;
+  bio?: string;
+}