initial commit

components/lending/repay/RepayBorrowDebt.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { Button } from "@heroui/react";
+import { useApp } from "@/contexts/AppContext";
+import { buttonStyles } from "@/lib/buttonStyles";
+
+export default function RepayBorrowDebt() {
+  const { t } = useApp();
+
+  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-8 flex-1 shadow-md">
+      {/* Title */}
+      <h3 className="text-body-large font-bold text-text-primary dark:text-white leading-[150%]">
+        {t("repay.borrowDebt")}
+      </h3>
+
+      {/* Token Info and APR */}
+      <div className="flex items-center justify-between h-[50px]">
+        {/* Left - Token Info */}
+        <div className="flex items-center gap-4">
+          {/* Token Icon */}
+          <div
+            className="w-10 h-10 rounded-full flex items-center justify-center text-white text-[10px] font-bold shadow-md"
+            style={{ background: "linear-gradient(135deg, #00BBA7 0%, #007A55 100%)" }}
+          >
+            LOGO
+          </div>
+
+          {/* Amount */}
+          <div className="flex flex-col">
+            <span className="text-heading-h3 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.005em]">
+              1,000 USDC
+            </span>
+            <span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+              $1,000.00
+            </span>
+          </div>
+        </div>
+
+        {/* Right - APR */}
+        <div className="flex flex-col items-end">
+          <span className="text-heading-h3 font-bold text-[#10b981] dark:text-green-400 leading-[130%] tracking-[-0.005em]">
+            6.1%
+          </span>
+          <span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+            {t("repay.apr")}
+          </span>
+        </div>
+      </div>
+
+      {/* Buttons */}
+      <div className="grid grid-cols-2 gap-3">
+        <Button className={buttonStyles({ intent: "theme" })}>
+          {t("repay.borrow")}
+        </Button>
+        <Button className="rounded-xl h-11 w-full px-6 text-body-small font-bold bg-content2 text-foreground">
+          {t("repay.repay")}
+        </Button>
+      </div>
+    </div>
+  );
+}

components/lending/repay/RepayHeader.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import Image from "next/image";
+import { useApp } from "@/contexts/AppContext";
+
+export default function RepayHeader() {
+  const { t } = useApp();
+
+  return (
+    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 px-6 py-8 flex items-center justify-between">
+      {/* Left Section - Token Icons and Title */}
+      <div className="flex items-center gap-2">
+        {/* Overlapping Token Icons */}
+        <div className="flex items-center relative">
+          <Image
+            src="/component-70.svg"
+            alt="YTGY"
+            width={52}
+            height={52}
+            className="relative z-10"
+          />
+          <Image
+            src="/usd-coin-usdc-logo-10.svg"
+            alt="USDC"
+            width={52}
+            height={52}
+            className="relative -ml-3"
+          />
+        </div>
+
+        {/* Title and Subtitle */}
+        <div className="flex flex-col gap-1">
+          <h1 className="text-heading-h2 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.01em]">
+            GY / USDC
+          </h1>
+          <p className="text-body-small font-regular text-text-tertiary dark:text-gray-400 leading-[150%]">
+            {t("repay.supplyToBorrow")}
+          </p>
+        </div>
+      </div>
+
+      {/* Right Section - Stats */}
+      <div className="flex items-center justify-between w-[262px]">
+        {/* Price */}
+        <div className="flex flex-col gap-1">
+          <span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+            {t("repay.price")}
+          </span>
+          <span className="text-heading-h3 font-bold text-[#10b981] dark:text-green-400 leading-[130%] tracking-[-0.005em]">
+            $1.29
+          </span>
+        </div>
+
+        {/* Available */}
+        <div className="flex flex-col gap-1">
+          <span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+            {t("repay.available")}
+          </span>
+          <span className="text-heading-h3 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.005em]">
+            14.2M
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

components/lending/repay/RepayPoolStats.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useApp } from "@/contexts/AppContext";
+
+export default function RepayPoolStats() {
+  const { t } = useApp();
+
+  return (
+    <div className="grid grid-cols-2 gap-6">
+      {/* Left Card - Total Value Locked and Utilization */}
+      <div className="bg-white/50 dark:bg-gray-800/50 rounded-2xl border border-border-normal dark:border-gray-700 px-6 flex items-center justify-between h-[98px]">
+        {/* Total Value Locked */}
+        <div className="flex flex-col gap-1">
+          <span className="text-[12px] font-bold text-[#90a1b9] dark:text-gray-400 leading-4 uppercase">
+            {t("repay.totalValueLocked")}
+          </span>
+          <span className="text-[20px] font-bold text-[#0f172b] dark:text-white leading-7 tracking-[-0.45px]">
+            $124,592,102
+          </span>
+        </div>
+
+        {/* Utilization */}
+        <div className="flex flex-col gap-1">
+          <span className="text-[12px] font-bold text-[#90a1b9] dark:text-gray-400 leading-4 uppercase text-right">
+            {t("repay.utilization")}
+          </span>
+          <span className="text-[20px] font-bold text-[#0f172b] dark:text-white leading-7 tracking-[-0.45px] text-right">
+            42.8%
+          </span>
+        </div>
+      </div>
+
+      {/* Right Card - Reward Multiplier */}
+      <div className="bg-white/50 dark:bg-gray-800/50 rounded-2xl border border-border-normal dark:border-gray-700 px-6 flex items-center justify-between h-[98px]">
+        {/* Reward Multiplier */}
+        <div className="flex flex-col gap-1">
+          <span className="text-[12px] font-bold text-[#90a1b9] dark:text-gray-400 leading-4 uppercase">
+            {t("repay.rewardMultiplier")}
+          </span>
+          <span className="text-[20px] font-bold text-[#0f172b] dark:text-white leading-7 tracking-[-0.45px]">
+            2.5x
+          </span>
+        </div>
+
+        {/* Overlapping Circles */}
+        <div className="relative w-20 h-8">
+          {/* Green Circle */}
+          <div className="absolute left-0 top-0 w-8 h-8 rounded-full bg-[#00bc7d] border-2 border-white dark:border-gray-900" />
+
+          {/* Blue Circle */}
+          <div className="absolute left-6 top-0 w-8 h-8 rounded-full bg-[#2b7fff] border-2 border-white dark:border-gray-900" />
+
+          {/* Gray Circle with +3 */}
+          <div className="absolute left-12 top-0 w-8 h-8 rounded-full bg-[#e2e8f0] dark:bg-gray-600 border-2 border-white dark:border-gray-900 flex items-center justify-center">
+            <span className="text-[10px] font-bold text-[#45556c] dark:text-gray-300 leading-[15px] tracking-[0.12px]">
+              +3
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/lending/repay/RepayStats.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import Image from "next/image";
+import { useApp } from "@/contexts/AppContext";
+
+export default function RepayStats() {
+  const { t } = useApp();
+
+  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-8 flex-1 h-[249px] shadow-md">
+      {/* Stats Info */}
+      <div className="flex flex-col gap-6 h-[120px]">
+        {/* NET APR */}
+        <div className="flex items-center justify-between h-7">
+          <div className="flex items-center gap-2">
+            <Image src="/icon0.svg" alt="" width={18} height={18} />
+            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400 leading-[150%]">
+              {t("repay.netApr")}
+            </span>
+          </div>
+          <span className="text-body-small font-bold text-[#10b981] dark:text-green-400 leading-[150%]">
+            3%
+          </span>
+        </div>
+
+        {/* Liq.price/offset */}
+        <div className="flex items-center justify-between h-7">
+          <div className="flex items-center gap-2">
+            <Image src="/icon1.svg" alt="" width={18} height={18} />
+            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400 leading-[150%]">
+              {t("repay.liqPriceOffset")}
+            </span>
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
+              $0.938
+            </span>
+            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400 leading-[150%]">
+              / 20%
+            </span>
+          </div>
+        </div>
+
+        {/* Position Health */}
+        <div className="flex items-center justify-between h-7">
+          <div className="flex items-center gap-2">
+            <Image src="/icon2.svg" alt="" width={18} height={18} />
+            <span className="text-body-small font-regular text-text-tertiary dark:text-gray-400 leading-[150%]">
+              {t("repay.positionHealth")}
+            </span>
+          </div>
+          <span className="text-body-small font-bold text-[#10b981] dark:text-green-400 leading-[150%]">
+            Safe 50%
+          </span>
+        </div>
+      </div>
+
+      {/* Progress Bar */}
+      <div className="w-full">
+        <div className="w-full h-2 bg-fill-secondary-click dark:bg-gray-700 rounded-full overflow-hidden">
+          <div
+            className="h-full bg-[#10b981] dark:bg-green-500 rounded-full"
+            style={{ width: "50%" }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

components/lending/repay/RepaySupplyCollateral.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { Button } from "@heroui/react";
+import { useApp } from "@/contexts/AppContext";
+import { buttonStyles } from "@/lib/buttonStyles";
+
+export default function RepaySupplyCollateral() {
+  const { t } = useApp();
+
+  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-8 flex-1 shadow-md">
+      {/* Title */}
+      <h3 className="text-body-large font-bold text-text-primary dark:text-white leading-[150%]">
+        {t("repay.supplyCollateral")}
+      </h3>
+
+      {/* Token Info and APR */}
+      <div className="flex items-center justify-between h-[50px]">
+        {/* Left - Token Info */}
+        <div className="flex items-center gap-4">
+          {/* Token Icon */}
+          <div
+            className="w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-bold shadow-md"
+            style={{ background: "linear-gradient(135deg, #FF8904 0%, #F54900 100%)" }}
+          >
+            GY
+          </div>
+
+          {/* Amount */}
+          <div className="flex flex-col">
+            <span className="text-heading-h3 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.005em]">
+              1,000 YTGY
+            </span>
+            <span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+              $10,000.00
+            </span>
+          </div>
+        </div>
+
+        {/* Right - APR */}
+        <div className="flex flex-col items-end">
+          <span className="text-heading-h3 font-bold text-[#10b981] dark:text-green-400 leading-[130%] tracking-[-0.005em]">
+            9.1%
+          </span>
+          <span className="text-caption-tiny font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+            {t("repay.apr")}
+          </span>
+        </div>
+      </div>
+
+      {/* Buttons */}
+      <div className="grid grid-cols-2 gap-3">
+        <Button className={buttonStyles({ intent: "theme" })}>
+          {t("repay.deposit")}
+        </Button>
+        <Button className="rounded-xl h-11 w-full px-6 text-body-small font-bold bg-content2 text-foreground">
+          {t("repay.withdraw")}
+        </Button>
+      </div>
+    </div>
+  );
+}