improvement: update org project templates relocation banner

frontend/src/components/v2/NoticeBannerV2/NoticeBannerV2.tsx

@@ -7,9 +7,10 @@ type Props = {
   title: string;
   children: ReactNode;
   className?: string;
+  titleClassName?: string;
 };
 
-export const NoticeBannerV2 = ({ title, children, className }: Props) => {
+export const NoticeBannerV2 = ({ title, children, className, titleClassName }: Props) => {
   return (
     <div
       className={twMerge(
@@ -17,7 +18,7 @@ export const NoticeBannerV2 = ({ title, children, className }: Props) => {
         className
       )}
     >
-      <div className="mb-1 flex items-center text-sm">
+      <div className={twMerge("mb-1 flex items-center text-sm", titleClassName)}>
         <FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
         {title}
       </div>

frontend/src/pages/organization/SettingsPage/components/OrgTabGroup/OrgTabGroup.tsx

@@ -1,9 +1,11 @@
 import { useState } from "react";
+import { DotLottieReact } from "@lottiefiles/dotlottie-react";
 import { useSearch } from "@tanstack/react-router";
 
 import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
 import { ROUTE_PATHS } from "@app/const/routes";
+import { ProjectType } from "@app/hooks/api/workspace/types";
 
 import { AuditLogStreamsTab } from "../AuditLogStreamTab";
 import { ImportTab } from "../ImportTab";
@@ -36,22 +38,52 @@ export const OrgTabGroup = () => {
       component: () => (
         <div>
           <NoticeBannerV2
-            className="mx-auto mt-10 max-w-4xl"
-            title="Project Templates New Location"
+            className="mx-auto mt-10"
+            titleClassName="text-base"
+            title="Project Templates Relocated"
           >
-            <p className="text-sm text-bunker-200">
-              Project templates have been moved to the Feature Settings page, under the &#34;Project
-              Templates&#34; tab.
+            <p className="mt-1 text-mineshaft-300">
+              Project templates have been relocated and are now product specific:
             </p>
-            <p className="mt-2 text-sm text-bunker-200">
-              Project templates are now product-specific, and can be configured for each project
-              type.
-            </p>
-            <img
-              src="/images/project-templates/project-templates-new-location.png"
-              className="mt-4 w-full max-w-4xl rounded"
-              alt="Project Templates New Location"
-            />
+            <ul className="mb-1 flex gap-x-4 text-mineshaft-200">
+              {[
+                {
+                  type: ProjectType.SecretManager,
+                  label: "Secret Management",
+                  icon: "sliding-carousel"
+                },
+                {
+                  type: ProjectType.CertificateManager,
+                  label: "Certificate Management",
+                  icon: "note"
+                },
+                {
+                  type: ProjectType.KMS,
+                  label: "KMS",
+                  icon: "unlock"
+                },
+                {
+                  type: ProjectType.SSH,
+                  label: "SSH",
+                  icon: "verified"
+                }
+              ].map(({ label, type, icon }) => (
+                <li key={`project-template-${type}`}>
+                  <a
+                    href={`/organization/${type}/settings`}
+                    className="mt-1 flex items-center gap-x-2 hover:text-mineshaft-100"
+                  >
+                    <span className="text-mineshaft-300">•</span>
+                    <DotLottieReact
+                      src={`/lotties/${icon}.json`}
+                      loop
+                      className="mt-0.5 h-5 w-5"
+                    />{" "}
+                    <span className="underline underline-offset-2">{label}</span>
+                  </a>
+                </li>
+              ))}
+            </ul>
           </NoticeBannerV2>
         </div>
       )