update ui update and fix layout issue

src/shared/components/brand/BrandLogo.tsx

@@ -0,0 +1,62 @@
+import Image from 'next/image';
+
+/**
+ * The two official Loyaly.ai assets — and the only place in the product where
+ * brand colour is allowed to appear. Everything around them stays monochrome.
+ *
+ * Both render at their own intrinsic ratio: a caller sizes ONE axis and the
+ * other is derived, so neither mark can be letterboxed or stretched. There is
+ * deliberately no `fill` / `objectFit` escape hatch — that is how logos end up
+ * distorted. Recolouring is likewise not a prop: the PNGs carry the mark.
+ */
+
+// Intrinsic pixel dimensions of the shipped files, alpha-trimmed so the
+// wordmark optically centres (the supplied original carried 44px of dead
+// transparent space on its trailing edge).
+const LOGO = {src: '/white-logo.png', width: 1489, height: 248};
+const MARK = {src: '/brand/loyaly-mark.png', width: 285, height: 256};
+
+interface BrandProps {
+  /** Alternative text. Pass '' where a sibling element already names the brand. */
+  alt?: string;
+  /** Set on marks that paint above the fold, so Next preloads them. */
+  priority?: boolean;
+}
+
+/** Full horizontal Loyaly.ai lockup. Sized by height; width follows. */
+export function BrandLogo({
+  height = 28,
+  alt = 'Loyaly.ai',
+  priority = false,
+}: BrandProps & {height?: number}) {
+  return (
+    <Image
+      src={LOGO.src}
+      alt={alt}
+      height={height}
+      width={Math.round((height * LOGO.width) / LOGO.height)}
+      priority={priority}
+      // Block display keeps the anchor that usually wraps this from painting a
+      // hover underline in the leftover line box.
+      className="block"
+    />
+  );
+}
+
+/** Heart symbol alone, for spaces too narrow for the lockup. Sized by width. */
+export function BrandMark({
+  size = 28,
+  alt = 'Loyaly.ai',
+  priority = false,
+}: BrandProps & {size?: number}) {
+  return (
+    <Image
+      src={MARK.src}
+      alt={alt}
+      width={size}
+      height={Math.round((size * MARK.height) / MARK.width)}
+      priority={priority}
+      className="block"
+    />
+  );
+}