Right rail template

app/components/navigation/Footer.tsx

@@ -66,6 +66,7 @@ const Footer = memo(() => {
                   className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)] hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer group"
                   aria-label={t("social.bluesky.ariaLabel")}
                 >
+                  {/* eslint-disable-next-line @next/next/no-img-element -- social logo */}
                   <img
                     src={getAssetPath(ASSETS.BLUESKY_LOGO)}
                     alt="Bluesky"
@@ -82,6 +83,7 @@ const Footer = memo(() => {
                   className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)] hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer group"
                   aria-label={t("social.gitlab.ariaLabel")}
                 >
+                  {/* eslint-disable-next-line @next/next/no-img-element -- social icon */}
                   <img
                     src={getAssetPath(ASSETS.GITLAB_ICON)}
                     alt="GitLab"

app/components/navigation/TopNav/TopNav.container.tsx

@@ -7,7 +7,6 @@ import MenuBarItem from "../MenuBarItem";
 import Button from "../../buttons/Button";
 import AvatarContainer from "../../utility/AvatarContainer";
 import Avatar from "../../icons/Avatar";
-import Logo from "../../icons/Logo";
 import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
 import { TopNavView } from "./TopNav.view";
 import type { TopNavProps, NavSize } from "./TopNav.types";
@@ -19,12 +18,7 @@ export const avatarImages = [
 ];
 
 const TopNavContainer = memo<TopNavProps>(
-  ({
-    folderTop = false,
-    loggedIn = false,
-    profile = false,
-    logIn = true,
-  }) => {
+  ({ folderTop = false, loggedIn = false, profile = false, logIn = true }) => {
     const pathname = usePathname();
     const t = useTranslation("header");
 
@@ -34,7 +28,9 @@ const TopNavContainer = memo<TopNavProps>(
       "@type": "WebSite",
       name: "CommunityRule",
       url: "https://communityrule.com",
-      ...(folderTop && { description: "Build operating manuals for successful communities" }),
+      ...(folderTop && {
+        description: "Build operating manuals for successful communities",
+      }),
       potentialAction: {
         "@type": "SearchAction",
         target: "https://communityrule.com/search?q={search_term_string}",
@@ -54,7 +50,10 @@ const TopNavContainer = memo<TopNavProps>(
 
     const renderNavigationItems = (size: NavSize) => {
       // Map NavSize to Figma MenuBarItem sizes
-      const sizeMap: Record<NavSize, "X Small" | "Small" | "Medium" | "Large" | "X Large"> = {
+      const sizeMap: Record<
+        NavSize,
+        "X Small" | "Small" | "Medium" | "Large" | "X Large"
+      > = {
         default: "Small",
         xsmall: "X Small",
         xsmallUseCases: "X Small",
@@ -85,7 +84,10 @@ const TopNavContainer = memo<TopNavProps>(
             mode={mode}
             state={pathname === item.href ? "selected" : "default"}
             reducedPadding={isUseCases}
-            ariaLabel={t("ariaLabels.navigateToPage").replace("{text}", item.text)}
+            ariaLabel={t("ariaLabels.navigateToPage").replace(
+              "{text}",
+              item.text,
+            )}
           >
             {item.text}
           </MenuBarItem>
@@ -113,7 +115,10 @@ const TopNavContainer = memo<TopNavProps>(
 
     const renderLoginButton = (size: NavSize) => {
       // Map NavSize to Figma MenuBarItem sizes
-      const sizeMap: Record<NavSize, "X Small" | "Small" | "Medium" | "Large" | "X Large"> = {
+      const sizeMap: Record<
+        NavSize,
+        "X Small" | "Small" | "Medium" | "Large" | "X Large"
+      > = {
         default: "Small",
         xsmall: "X Small",
         xsmallUseCases: "X Small",

app/components/navigation/TopNav/TopNav.view.tsx

@@ -55,18 +55,21 @@ function TopNavView({
               </div>
 
               {/* Decorative Union images for tab appearance */}
+              {/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG, not content */}
               <img
                 src={getAssetPath("assets/Union_xsm.svg")}
                 alt=""
                 role="presentation"
                 className="absolute -bottom-[3px] -right-[52px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] sm:hidden -z-10"
               />
+              {/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG */}
               <img
                 src={getAssetPath("assets/Union_sm_md_lg.svg")}
                 alt=""
                 role="presentation"
                 className="absolute -bottom-[3.7px] -right-[53px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block xl:hidden -z-10"
               />
+              {/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG */}
               <img
                 src={getAssetPath("assets/Union_xlg.svg")}
                 alt=""