first commit

apps/frontend/components/id/brand-logo.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import { usePublicSettings } from '@/components/id/public-settings-provider';
+
+function splitProjectName(projectName: string) {
+  const trimmed = projectName.trim();
+  const match = trimmed.match(/^(.+?)\s+ID$/i);
+  if (match) {
+    return { brand: match[1].trim(), suffix: 'ID' };
+  }
+  return { brand: trimmed || 'MVK', suffix: 'ID' };
+}
+
+export function BrandLogo({
+  className,
+  size = 'md',
+  variant = 'dark'
+}: {
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'dark' | 'light';
+}) {
+  const { projectName } = usePublicSettings();
+  const { brand, suffix } = splitProjectName(projectName);
+
+  const sizeClass = size === 'lg' ? 'text-2xl' : size === 'sm' ? 'text-lg' : 'text-xl';
+  const badgeClass =
+    variant === 'light'
+      ? 'rounded-full border border-white px-1 text-base'
+      : 'rounded-full bg-black px-1 text-sm text-white';
+
+  return (
+    <div className={cn('font-bold tracking-tight', sizeClass, className)}>
+      {brand} <span className={badgeClass}>{suffix}</span>
+    </div>
+  );
+}
+
+export function ProjectTagline({ className }: { className?: string }) {
+  const { projectTagline } = usePublicSettings();
+  return <p className={className}>{projectTagline}</p>;
+}