initial commit

components/lending/LendingPlaceholder.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { Button } from "@heroui/react";
+import { useApp } from "@/contexts/AppContext";
+import { buttonStyles } from "@/lib/buttonStyles";
+
+export default function LendingPlaceholder() {
+  const { t } = useApp();
+  const router = useRouter();
+
+  return (
+    <div className="relative rounded-2xl h-[180px] overflow-hidden">
+      {/* Dark Background */}
+      <div className="absolute inset-0 bg-[#0f172b]" />
+
+      {/* Green Glow Effect */}
+      <div
+        className="absolute w-32 h-32 rounded-full right-0 top-[-64px]"
+        style={{
+          background: "rgba(0, 188, 125, 0.2)",
+          filter: "blur(40px)",
+        }}
+      />
+
+      {/* Content - Centered */}
+      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col gap-4 w-[90%]">
+        {/* Your Portfolio Section */}
+        <div className="flex flex-col gap-2">
+          {/* Label Row */}
+          <div className="flex items-center justify-between h-[21px]">
+            <span className="text-[10px] font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+              {t("lending.yourPortfolio")}
+            </span>
+            <span className="text-[10px] font-bold text-[#10b981] dark:text-green-400 leading-[150%] tracking-[0.01em]">
+              +$1,240 {t("lending.earned")}
+            </span>
+          </div>
+
+          {/* Amount */}
+          <div className="flex items-center gap-2">
+            <span className="text-heading-h2 font-bold text-white leading-[130%] tracking-[-0.01em]">
+              $15,500
+            </span>
+          </div>
+        </div>
+
+        {/* Supply USDC Button */}
+        <Button
+          color="default"
+          variant="solid"
+          className="h-11 rounded-xl px-6 text-body-small font-bold bg-[#282E3F] dark:bg-white dark:text-[#282E3F] text-background"
+          onPress={() => router.push("/supply")}
+          endContent={<Image src="/arrow-right-icon.svg" alt="" width={20} height={20} />}
+        >
+          {t("lending.supplyUsdc")}
+        </Button>
+      </div>
+    </div>
+  );
+}