bugfix: site renamed. Name component created.

frontend/src/components/ui/shared/BrandWordmark.tsx

@@ -0,0 +1,44 @@
+import type { CSSProperties } from 'react';
+
+export const BRAND_NAME = 'Nudentic';
+
+/** Light-theme primary — use in print/PDF where theme tokens are unsafe. */
+export const BRAND_PRIMARY_HEX = '#009cae';
+
+type BrandWordmarkProps = {
+  className?: string;
+  style?: CSSProperties;
+  /**
+   * i-dot color. Omit to use the theme primary token.
+   * Pass a hex (e.g. `BRAND_PRIMARY_HEX`) for print/PDF capture.
+   */
+  dotColor?: string;
+};
+
+function BrandI({ fill }: { fill: string }) {
+  return (
+    <svg
+      aria-hidden
+      viewBox="0 0 24 80"
+      className="inline-block h-[0.78em] w-[0.26em] overflow-visible align-baseline ms-[0.05em] me-[0.04em]"
+    >
+      <circle cx="12" cy="10" r="8" fill={fill} />
+      <rect x="6" y="28" width="12" height="52" rx="1.2" fill="currentColor" />
+    </svg>
+  );
+}
+
+export function BrandWordmark({ className, style, dotColor }: BrandWordmarkProps) {
+  const tittleFill = dotColor ?? 'var(--color-primary)';
+
+  return (
+    <span dir="ltr" className={className} style={style}>
+      <span className="sr-only">{BRAND_NAME}</span>
+      <span aria-hidden>
+        Nudent
+        <BrandI fill={tittleFill} />
+        c
+      </span>
+    </span>
+  );
+}