initial commit

components/lending/LendingHeader.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useApp } from "@/contexts/AppContext";
+
+export default function LendingHeader() {
+  const { t } = useApp();
+
+  const stats = [
+    {
+      label: t("lending.totalUsdcSupply"),
+      value: "$200.4M",
+      valueColor: "text-text-primary dark:text-white",
+    },
+    {
+      label: t("lending.utilization"),
+      value: "65%",
+      valueColor: "text-[#10b981] dark:text-green-400",
+    },
+    {
+      label: t("lending.activeLoans"),
+      value: "3",
+      valueColor: "text-text-primary dark:text-white",
+    },
+  ];
+
+  return (
+    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-8 flex flex-col gap-6">
+      {/* Title Section */}
+      <div className="flex flex-col gap-0">
+        <h1 className="text-heading-h2 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.01em]">
+          {t("lending.title")}
+        </h1>
+        <p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+          {t("lending.subtitle")}
+        </p>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="flex gap-4 w-full">
+        {stats.map((stat, index) => (
+          <div
+            key={index}
+            className="flex-1 bg-bg-subtle dark:bg-gray-700 rounded-2xl border border-border-gray dark:border-gray-600 p-4 flex flex-col gap-2"
+          >
+            <span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+              {stat.label}
+            </span>
+            <span className={`text-heading-h2 font-bold leading-[130%] tracking-[-0.01em] ${stat.valueColor}`}>
+              {stat.value}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}