feat(docs): refine product showcase and branding

docs/components/brand.tsx

@@ -1,64 +1,43 @@
 import Link from "next/link";
+import Image from "next/image";
 
-type BrandMarkProps = {
+type BrandAssetProps = {
   className?: string;
   title?: string;
 };
 
-export function BrandMark({ className, title }: BrandMarkProps) {
+export function BrandMark({ className, title }: BrandAssetProps) {
   return (
-    <svg
+    <Image
       className={className}
-      viewBox="0 0 64 64"
-      fill="none"
-      role={title ? "img" : undefined}
+      src="/brand-mark.svg"
+      width={1024}
+      height={1024}
+      alt={title ?? ""}
       aria-hidden={title ? undefined : true}
-      aria-label={title}
-    >
-      <path
-        d="M11 8h10.6a4.8 4.8 0 0 1 4.8 4.8v25.4c0 8.7 6.1 15.2 14.5 15.2 8.3 0 14.1-6.5 14.1-15.2V12.8A4.8 4.8 0 0 1 59.8 8H62v30.4C62 52.5 53.3 61 40.9 61 28.3 61 19 52.5 19 38.4V23h-3.5v-6.4H11V8Z"
-        fill="url(#brand-mark-gradient)"
-      />
-      <path
-        d="M40.8 25.9c-3.1 4.1-8.2 10.8-8.2 15.5 0 5.1 3.6 8.9 8.2 8.9 4.8 0 8.3-3.8 8.3-8.9 0-4.7-5.2-11.4-8.3-15.5Z"
-        fill="url(#brand-drop-gradient)"
-      />
-      <path d="M54.9 8h7v7l-7-7Z" fill="#E8CDFF" />
-      <defs>
-        <linearGradient
-          id="brand-mark-gradient"
-          x1="11"
-          y1="8"
-          x2="64"
-          y2="55"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#B45CFA" />
-          <stop offset="0.5" stopColor="#9D4DF4" />
-          <stop offset="1" stopColor="#7828ED" />
-        </linearGradient>
-        <linearGradient
-          id="brand-drop-gradient"
-          x1="32"
-          y1="26"
-          x2="51"
-          y2="47"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#C06CFF" />
-          <stop offset="1" stopColor="#7828ED" />
-        </linearGradient>
-      </defs>
-    </svg>
+      unoptimized
+    />
+  );
+}
+
+export function AppIcon({ className, title }: BrandAssetProps) {
+  return (
+    <Image
+      className={className}
+      src="/icon.svg"
+      width={1024}
+      height={1024}
+      alt={title ?? ""}
+      aria-hidden={title ? undefined : true}
+      unoptimized
+    />
   );
 }
 
 export function Brand({ compact = false }: { compact?: boolean }) {
   return (
     <Link className="brand" href="/" aria-label="VniDrop home">
-      <span className="brand-mark-shell">
-        <BrandMark />
-      </span>
+      <BrandMark className="brand-mark-image" />
       {!compact && <span className="brand-name">VniDrop</span>}
     </Link>
   );