docs: replace README with Next.js boilerplate template

Updated README.md from a detailed OllaHub project description to the standard Next.js getting started template, likely to initialize or reset the project as a Next.js application.

components/model/ModelCard.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { Cpu, CircuitBoard, Info } from "lucide-react";
+import type { ModelInfo } from "@/lib/models";
+import { useState } from "react";
+
+export function ModelCard({ model }: { model: ModelInfo }) {
+  const [hover, setHover] = useState(false);
+  const isGpu = model.device === "GPU";
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      onFocus={() => setHover(true)}
+      onBlur={() => setHover(false)}
+      className="group relative rounded-lg border border-[var(--border)] bg-[var(--background)] p-4 shadow-sm transition-all hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)]"
+    >
+      <div className="mb-2 flex items-center justify-between">
+        <h3 className="text-[16px] font-semibold tracking-tight">
+          {model.name}
+        </h3>
+        <span className="inline-flex items-center gap-1 rounded-md border border-[var(--border)] px-2 py-0.5 text-xs text-[var(--foreground)]/80">
+          {isGpu ? (
+            <CircuitBoard className="h-3.5 w-3.5" />
+          ) : (
+            <Cpu className="h-3.5 w-3.5" />
+          )}
+          {model.device}
+        </span>
+      </div>
+      <div className="flex items-center gap-2 text-sm text-[var(--foreground)]/80">
+        <span className="rounded-md bg-[var(--surface)] px-2 py-0.5">
+          {model.quantization}
+        </span>
+        <span className="rounded-md bg-[var(--surface)] px-2 py-0.5">
+          {model.sizeGB} GB
+        </span>
+      </div>
+
+      <div className="pointer-events-none absolute right-3 top-3 opacity-60">
+        <Info className="h-4 w-4" />
+      </div>
+
+      {hover && (
+        <div className="absolute left-0 top-full z-10 mt-2 w-72 rounded-md border border-[var(--border)] bg-[var(--background)] p-3 text-sm shadow-lg">
+          <div className="mb-2 font-medium">Detalhes (estimativa)</div>
+          <div className="flex items-center justify-between">
+            <span>Uso de CPU</span>
+            <span className="font-medium">{model.estCpuUsagePct ?? "—"}%</span>
+          </div>
+          <div className="mt-1 flex items-center justify-between">
+            <span>Uso de VRAM</span>
+            <span className="font-medium">{model.estVramGB ?? 0} GB</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}