add jwt wordmark and rotating animation

Author: christiansamaniego-okta

src/features/common/assets/jwt-text-logo.component.tsx

@@ -0,0 +1,30 @@
+export const JwtWordmarkComponent: React.FC = () => {
+  return (
+    <svg
+      width="51"
+      height="20"
+      viewBox="0 0 51 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7 0V12C7 15.3137 4.31371 18 1 18V18"
+        stroke="black"
+        style={{ stroke: 'black', strokeOpacity: 1 }}
+        strokeWidth="4"
+      />
+      <path
+        d="M13.8932 0V14.5C13.8932 16.433 15.4602 18 17.3932 18V18C19.3262 18 20.8932 16.433 20.8932 14.5V5C20.8932 3.34315 22.2363 2 23.8932 2V2C25.55 2 26.8932 3.34315 26.8932 5V14.5C26.8932 16.433 28.4602 18 30.3932 18V18C32.3262 18 33.8932 16.433 33.8932 14.5V0"
+        stroke="black"
+        style={{ stroke: 'black', strokeOpacity: 1 }}
+        strokeWidth="4"
+      />
+      <path
+        d="M38.8932 2H44.8932M44.8932 2V20M44.8932 2H50.8932"
+        stroke="black"
+        style={{ stroke: 'black', strokeOpacity: 1 }}
+        strokeWidth="4"
+      />
+    </svg>
+  );
+};

src/features/common/assets/jwt-wordmark.component.tsx

@@ -5,6 +5,7 @@ import { getImageDictionary } from "@/features/localization/services/images-dict
 import { SecondaryFont } from "@/libs/theme/fonts";
 import clsx from "clsx";
 import { JwtLogoComponent } from "../../assets/jwt-logo.component";
+import { JwtWordmarkComponent } from "../../assets/jwt-wordmark.component";
 
 interface SiteBrandComponentProps extends PropsWithChildren {
   path: string;
@@ -23,7 +24,7 @@ export const SiteBrandComponent: React.FC<SiteBrandComponentProps> = ({
         <JwtLogoComponent />
       </div>
       <div className={styles.brand__logoText}>
-
+        <JwtWordmarkComponent />
       </div>
       <div className={clsx(SecondaryFont.className, styles.brand__headline)}>
         <span className={styles.brand__subtitle}>Debugger</span>

src/features/common/components/site-brand/site-brand.component.tsx

@@ -1,8 +1,11 @@
 .brand {
-  display: flex;
-  align-items: center;
-  height: 2rem;
-  position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    height: 1.5rem;
+    gap: .5rem;
+    position: relative;
+    cursor: pointer;
 
   svg {
     height: inherit;
@@ -24,9 +27,20 @@
 }
 
 .brand__logo {
-  position: relative;
-  display: flex;
-  align-items: center;
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 1.5rem;
+    animation: rotate 10s linear infinite;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(1turn);
+  }
 }
 
 .brand__headline {