feat: location.pathname based bar navigation + admin layout + separate

auth routes

web/src/pages/PersonalInfo/index.tsx

@@ -0,0 +1,68 @@
+import Avatar from "@/feature/Avatar";
+import { useAuth } from "@/store/auth";
+import { ChevronRight } from "lucide-react";
+import type { FC } from "react";
+
+const PersonalInfoPage: FC = () => {
+  const profile = useAuth((state) => state.profile);
+
+  return (
+    <>
+      <h1 className="dark:text-gray-200 text-gray-800 text-2xl">
+        Your profile info in Home services
+      </h1>
+
+      <p className="text-gray-500 text-sm mt-2 sm:text-lg">
+        Personal info and options to manage it. You can make some of this info,
+        like your contact details, visible to others so they can reach you
+        easily. You can also see a summary of your profiles.
+      </p>
+
+      <div className="border dark:border-gray-800 border-gray-300 p-4 rounded mt-4">
+        <h3 className="dark:text-gray-300 text-gray-800">Basic info</h3>
+        <p className="text-gray-500 text-sm mt-2 mb-4">
+          Some info may be visible to other services and tools using Home Guard.{" "}
+          <a href="#" className="text-blue-500">
+            Learn more
+          </a>
+        </p>
+
+        {/* Profile Picture */}
+        <div className="flex flex-row items-center justify-between px-2 p-4 border-b gap-2 dark:border-b-gray-800 border-b-gray-100">
+          <div className="flex flex-col items-start gap-2">
+            <p className="text-sm dark:text-gray-400 font-medium text-gray-600">
+              Profile picture
+            </p>
+            <p className="text-sm dark:text-gray-500 text-gray-600">
+              Add a profile picture to personalize your account
+            </p>
+          </div>
+          <div>
+            <div className="w-16 h-16 overflow-hidden rounded-full dark:bg-gray-400 bg-gray-700">
+              <Avatar iconSize={12} />
+            </div>
+          </div>
+        </div>
+
+        {/* Name */}
+        <div className="flex flex-row items-center justify-between px-2 p-4 border-b dark:border-b-gray-800 border-b-gray-100">
+          <div className="flex flex-col items-start gap-2">
+            <p className="text-sm dark:text-gray-400 font-medium text-gray-600">
+              Name
+            </p>
+            <p className="text dark:text-gray-200 text-gray-800">
+              {profile?.full_name}
+            </p>
+          </div>
+          <div>
+            <div className="text-gray-500">
+              <ChevronRight size={26} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default PersonalInfoPage;