大更新

components/points/DepositCard.tsx

@@ -0,0 +1,117 @@
+import Image from "next/image";
+import { Button } from "@heroui/react";
+
+interface DepositCardProps {
+  logo?: string;
+  title: string;
+  subtitle: string;
+  badge: string;
+  lockPeriod: string;
+  progressPercent: number;
+  pointsBoost: string;
+  onDeposit?: () => void;
+}
+
+export default function DepositCard({
+  logo,
+  title,
+  subtitle,
+  badge,
+  lockPeriod,
+  progressPercent,
+  pointsBoost,
+  onDeposit,
+}: DepositCardProps) {
+  return (
+    <div className="w-full bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-8 flex flex-col gap-6">
+      {/* Top Section */}
+      <div className="flex items-center justify-between">
+        {/* Left - Logo and Title */}
+        <div className="flex items-center gap-6">
+          {/* Logo */}
+          {logo ? (
+            <Image src={logo} alt={title} width={40} height={40} className="rounded-full" />
+          ) : (
+            <div
+              className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0"
+              style={{
+                background: "linear-gradient(135deg, rgba(0, 187, 167, 1) 0%, rgba(0, 122, 85, 1) 100%)"
+              }}
+            >
+              <span className="text-[10px] font-bold text-white leading-[125%] tracking-[-0.11px]">
+                LOGO
+              </span>
+            </div>
+          )}
+
+          {/* Title and Subtitle */}
+          <div className="flex flex-col gap-1">
+            <div className="flex items-center gap-3">
+              <h3 className="text-heading-h4 font-bold text-text-primary dark:text-white leading-[140%]">
+                {title}
+              </h3>
+              <div
+                className="rounded-full px-3 py-1 flex items-center justify-center"
+                style={{
+                  background: "#ff6900",
+                  boxShadow: "0px 4px 6px -4px rgba(255, 105, 0, 0.2), 0px 10px 15px -3px rgba(255, 105, 0, 0.2)"
+                }}
+              >
+                <span className="text-[10px] font-bold text-white leading-[150%] tracking-[0.01em]">
+                  {badge}
+                </span>
+              </div>
+            </div>
+            <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[133%]">
+              {subtitle}
+            </span>
+          </div>
+        </div>
+
+        {/* Right - Lock Period and Button */}
+        <div className="flex items-center gap-12">
+          <div className="flex flex-col gap-1">
+            <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+              LOCK PERIOD
+            </span>
+            <span className="text-body-default font-bold text-text-primary dark:text-white leading-[150%]">
+              {lockPeriod}
+            </span>
+          </div>
+
+          <Button
+            onClick={onDeposit}
+            className="bg-text-primary dark:bg-white rounded-xl h-11 px-4 text-body-small font-bold text-white dark:text-gray-900 flex items-center gap-1"
+            style={{ width: '163px' }}
+          >
+            Start LOOP
+            <Image src="/icon-arrow-right.svg" alt="" width={16} height={16} />
+          </Button>
+        </div>
+      </div>
+
+      {/* Bottom Section - Progress Bar */}
+      <div className="flex items-center justify-between border-t border-[#f1f5f9] dark:border-gray-600 pt-6">
+        {/* Progress Bar */}
+        <div className="relative flex-1 h-2 bg-[#f1f5f9] dark:bg-gray-700 rounded-full overflow-hidden max-w-[447px]">
+          <div
+            className="absolute left-0 top-0 h-full rounded-full"
+            style={{
+              width: `${progressPercent}%`,
+              background: "#00bc7d",
+              boxShadow: "0px 0px 15px 0px rgba(16, 185, 129, 0.4)"
+            }}
+          />
+        </div>
+
+        {/* Points Badge */}
+        <span
+          className="text-[10px] font-black leading-[150%] tracking-[1.12px] ml-4"
+          style={{ color: "#00bc7d" }}
+        >
+          {pointsBoost}
+        </span>
+      </div>
+    </div>
+  );
+}