Organize Vertex starter into reusable sections

Use remote logos and avatars, refine landing copy, and document the template structure.

components/shared/brand.tsx

@@ -0,0 +1,27 @@
+import Image from "next/image"
+
+import { cn } from "@/lib/utils"
+
+export function VertexMark({ className }: { className?: string }) {
+  return (
+    <Image
+      src="/logo.svg"
+      alt=""
+      width={24}
+      height={24}
+      className={cn("brightness-0 dark:invert", className)}
+      aria-hidden="true"
+    />
+  )
+}
+
+export function Brand({ compact = false }: { compact?: boolean }) {
+  return (
+    <span className="inline-flex items-center gap-2.5">
+      <VertexMark className="size-8" />
+      {!compact && (
+        <span className="text-[17px] font-semibold tracking-[-0.03em]">Vertex</span>
+      )}
+    </span>
+  )
+}