Profile page UI and functionality implemented

app/components/type/HeaderLockup/HeaderLockup.container.tsx

@@ -11,6 +11,7 @@ const HeaderLockupContainer = memo<HeaderLockupProps>(
     justification: justificationProp = "left",
     size: sizeProp = "L",
     palette: paletteProp = "default",
+    titleId,
   }) => {
     const justification = justificationProp;
     const size = sizeProp;
@@ -23,6 +24,7 @@ const HeaderLockupContainer = memo<HeaderLockupProps>(
         justification={justification}
         size={size}
         palette={palette}
+        titleId={titleId}
       />
     );
   },

app/components/type/HeaderLockup/HeaderLockup.types.ts

@@ -25,6 +25,10 @@ export interface HeaderLockupProps {
    * Palette. default = light text (dark bg); inverse = dark text (light bg).
    */
   palette?: HeaderLockupPaletteValue;
+  /**
+   * Optional DOM id for the title `h1` (e.g. skip-link / `aria-labelledby` targets).
+   */
+  titleId?: string;
 }
 
 export interface HeaderLockupViewProps {
@@ -33,4 +37,5 @@ export interface HeaderLockupViewProps {
   justification: "left" | "center";
   size: "L" | "M";
   palette: "default" | "inverse";
+  titleId?: string;
 }

app/components/type/HeaderLockup/HeaderLockup.view.tsx

@@ -9,6 +9,7 @@ function HeaderLockupView({
   justification,
   size,
   palette,
+  titleId,
 }: HeaderLockupViewProps) {
   const isL = size === "L";
   const isLeft = justification === "left";
@@ -30,6 +31,7 @@ function HeaderLockupView({
       {/* Title */}
       <div className="flex items-center relative shrink-0 w-full">
         <h1
+          id={titleId}
           className={`flex-[1_0_0] min-h-px min-w-px overflow-hidden relative ${titleColorClass} text-ellipsis whitespace-pre-wrap ${
             isLeft ? "text-left" : "text-center"
           } ${