diff --git a/app/product/page.tsx b/app/product/page.tsx index 5210669..c0ccb9c 100644 --- a/app/product/page.tsx +++ b/app/product/page.tsx @@ -43,12 +43,13 @@ export default function ProductPage() { id: 1, name: "High-Yield US Equity", category: "Quant Strategy", - icon: "/product-us-equity.svg", + categoryColor: "blue" as const, + iconType: "us-flag-1" as const, yieldAPY: "22.0%", poolCap: "10M", maturity: "05 Feb 2026", risk: "Medium", - riskLevel: 2, + riskLevel: 2 as const, lockUp: "12 Months", circulatingSupply: "$2.5M", poolCapacityPercent: 75, @@ -57,12 +58,13 @@ export default function ProductPage() { id: 2, name: "HK Commercial RE", category: "Real Estate", - icon: "/product-hk-re.svg", + categoryColor: "green" as const, + iconType: "hk-flag" as const, yieldAPY: "22.0%", poolCap: "10M", maturity: "05 Feb 2026", risk: "LOW", - riskLevel: 1, + riskLevel: 1 as const, lockUp: "12 Months", circulatingSupply: "$2.5M", poolCapacityPercent: 75, @@ -71,12 +73,13 @@ export default function ProductPage() { id: 3, name: "High-Yield US Equity", category: "Quant Strategy", - icon: "/product-us-equity-2.svg", + categoryColor: "purple" as const, + iconType: "us-flag-2" as const, yieldAPY: "22.0%", poolCap: "10M", maturity: "05 Feb 2026", risk: "High", - riskLevel: 3, + riskLevel: 3 as const, lockUp: "12 Months", circulatingSupply: "$2.5M", poolCapacityPercent: 75, @@ -132,13 +135,14 @@ export default function ProductPage() { {/* Product Cards Grid */} -
+
{products.map((product) => ( { - switch (level) { - case 1: - return "bg-green-500"; - case 2: - return "bg-yellow-500"; - case 3: - return "bg-red-500"; + const getCategoryStyle = () => { + switch (categoryColor) { + case "blue": + return "bg-[rgba(59,130,246,0.1)] border-[rgba(59,130,246,0.3)]"; + case "green": + return "bg-[rgba(34,197,94,0.1)] border-[rgba(34,197,94,0.3)]"; + case "purple": + return "bg-[rgba(168,85,247,0.1)] border-[rgba(168,85,247,0.3)]"; default: - return "bg-gray-300"; + return "bg-[rgba(59,130,246,0.1)] border-[rgba(59,130,246,0.3)]"; } }; - const getCategoryColor = (cat: string) => { - if (cat.includes("Quant")) { - return "bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300"; - } else if (cat.includes("Real Estate")) { - return "bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-700 dark:text-green-300"; + const getRiskBarColor = () => { + switch (riskLevel) { + case 1: + return "#10b981"; // green + case 2: + return "#f59e0b"; // yellow/orange + case 3: + return "#ef4444"; // red + default: + return "#9ca3af"; + } + }; + + const getIconSrc = () => { + switch (iconType) { + case "us-flag-1": + return "/frame-9230.svg"; + case "hk-flag": + return "/hk0.svg"; + case "us-flag-2": + return "/frame-9231.svg"; + default: + return "/frame-9230.svg"; } - return "bg-bg-subtle dark:bg-gray-700 border-border-normal dark:border-gray-600 text-text-tertiary dark:text-gray-400"; }; return ( -
+
{/* Product Header */} -
-
- {icon ? ( - {name} - ) : ( - 🏛️ - )} -
-
-

- {name} -

+
+
+ {/* Icon Container */}
- {category} +
+ {name} +
+
+ + {/* Title and Category */} +
+

+ {name} +

+
+ + {category} + +
- {/* Product Metrics - Two Columns */} -
- {/* Column 1 */} -
+ {/* Metrics Section */} +
+
+ + Yield APY + + + {yieldAPY} + +
+
+ + Pool CaP + + + {poolCap} + +
+
+ + {/* Details Grid */} +
+
- - Yield APY - - - {yieldAPY} - -
-
- + Maturity - + {maturity}
- + Lock-Up - + {lockUp}
- {/* Column 2 */} -
+
- - Pool CaP - - - {poolCap} - -
-
- + Risk
- + {risk}
{[1, 2, 3].map((level) => (
))}
- + Circulating supply - + {circulatingSupply}
- {/* Divider */} -
- - {/* Pool Capacity & Invest Button */} -
-
-
- - Pool Capacity - - - {poolCapacityPercent}% Filled - -
-
-
+ {/* Pool Capacity & Button */} +
+
+
+
+ + Pool Capacity + + + {poolCapacityPercent}% Filled + +
+
+
+
+
-
); diff --git a/public/chart-square1.svg b/public/chart-square1.svg new file mode 100644 index 0000000..be9e02d --- /dev/null +++ b/public/chart-square1.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/component-10.svg b/public/component-10.svg new file mode 100644 index 0000000..46de9b8 --- /dev/null +++ b/public/component-10.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/component-11.svg b/public/component-11.svg index fefc2b3..b3ce8bd 100644 --- a/public/component-11.svg +++ b/public/component-11.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/component-110.svg b/public/component-110.svg index 09f0969..023cc48 100644 --- a/public/component-110.svg +++ b/public/component-110.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/component-111.svg b/public/component-111.svg index b6ced2c..39b34fd 100644 --- a/public/component-111.svg +++ b/public/component-111.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/component-112.svg b/public/component-112.svg index 09f0969..023cc48 100644 --- a/public/component-112.svg +++ b/public/component-112.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/component-113.svg b/public/component-113.svg index 520e38c..e962aff 100644 --- a/public/component-113.svg +++ b/public/component-113.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/component-114.svg b/public/component-114.svg index 7e39d5e..1ca5e14 100644 --- a/public/component-114.svg +++ b/public/component-114.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/component-115.svg b/public/component-115.svg index 89e1f81..796d405 100644 --- a/public/component-115.svg +++ b/public/component-115.svg @@ -1,4 +1,4 @@ - - - - + + + + diff --git a/public/component-116.svg b/public/component-116.svg index 8cc5761..469dae5 100644 --- a/public/component-116.svg +++ b/public/component-116.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/component-117.svg b/public/component-117.svg index 9c72712..44bc22b 100644 --- a/public/component-117.svg +++ b/public/component-117.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/component-118.svg b/public/component-118.svg index 45410ce..a734555 100644 --- a/public/component-118.svg +++ b/public/component-118.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/component-119.svg b/public/component-119.svg index 1c9d327..aced695 100644 --- a/public/component-119.svg +++ b/public/component-119.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/component-12.svg b/public/component-12.svg index 2c64ed5..59dad17 100644 --- a/public/component-12.svg +++ b/public/component-12.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/component-120.svg b/public/component-120.svg index 45410ce..a734555 100644 --- a/public/component-120.svg +++ b/public/component-120.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/component-121.svg b/public/component-121.svg index ea013dd..00b7aba 100644 --- a/public/component-121.svg +++ b/public/component-121.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/component-122.svg b/public/component-122.svg index 43ea902..99c4beb 100644 --- a/public/component-122.svg +++ b/public/component-122.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/component-123.svg b/public/component-123.svg index 27f0c59..dfb27d1 100644 --- a/public/component-123.svg +++ b/public/component-123.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/component-124.svg b/public/component-124.svg index 27f0c59..dfb27d1 100644 --- a/public/component-124.svg +++ b/public/component-124.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/component-125.svg b/public/component-125.svg index b843904..0eb7587 100644 --- a/public/component-125.svg +++ b/public/component-125.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/component-13.svg b/public/component-13.svg index 07e1990..d503331 100644 --- a/public/component-13.svg +++ b/public/component-13.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/component-14.svg b/public/component-14.svg index aa2b5c2..c904c07 100644 --- a/public/component-14.svg +++ b/public/component-14.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/component-15.svg b/public/component-15.svg index 5f0d767..7ae8b6f 100644 --- a/public/component-15.svg +++ b/public/component-15.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/component-16.svg b/public/component-16.svg index a71fb8e..eacc920 100644 --- a/public/component-16.svg +++ b/public/component-16.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/component-17.svg b/public/component-17.svg index b4beb3d..5aa61d3 100644 --- a/public/component-17.svg +++ b/public/component-17.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/component-18.svg b/public/component-18.svg index 09f0969..023cc48 100644 --- a/public/component-18.svg +++ b/public/component-18.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/component-19.svg b/public/component-19.svg index b12479c..a46e36c 100644 --- a/public/component-19.svg +++ b/public/component-19.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/frame-9230.svg b/public/frame-9230.svg new file mode 100644 index 0000000..5a8e647 --- /dev/null +++ b/public/frame-9230.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/frame-9231.svg b/public/frame-9231.svg new file mode 100644 index 0000000..c7d1685 --- /dev/null +++ b/public/frame-9231.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/group-9270.svg b/public/group-9270.svg index c226711..4e45d53 100644 --- a/public/group-9270.svg +++ b/public/group-9270.svg @@ -1,4 +1,4 @@ - - - - + + + + diff --git a/public/hk0.svg b/public/hk0.svg new file mode 100644 index 0000000..4ed4845 --- /dev/null +++ b/public/hk0.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/icon-alp.svg b/public/icon-alp.svg index d3ef25b..a7b3add 100644 --- a/public/icon-alp.svg +++ b/public/icon-alp.svg @@ -1,6 +1,6 @@ - - - - - - + + + + + + diff --git a/public/icon-assets.svg b/public/icon-assets.svg index 51ce783..fb18473 100644 --- a/public/icon-assets.svg +++ b/public/icon-assets.svg @@ -1,5 +1,5 @@ - - - - - + + + + + diff --git a/public/icon-chevron-right.svg b/public/icon-chevron-right.svg index fd3b7fa..c6cd6d4 100644 --- a/public/icon-chevron-right.svg +++ b/public/icon-chevron-right.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/icon-copy.svg b/public/icon-copy.svg index fdbf40d..21b3d40 100644 --- a/public/icon-copy.svg +++ b/public/icon-copy.svg @@ -1,4 +1,4 @@ - - - - + + + + diff --git a/public/icon-ecosystem.svg b/public/icon-ecosystem.svg index c1ab91c..4f25340 100644 --- a/public/icon-ecosystem.svg +++ b/public/icon-ecosystem.svg @@ -1,14 +1,14 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/public/icon-lending.svg b/public/icon-lending.svg index 20a37d8..bb5a352 100644 --- a/public/icon-lending.svg +++ b/public/icon-lending.svg @@ -1,5 +1,5 @@ - - - - - + + + + + diff --git a/public/icon-notification.svg b/public/icon-notification.svg index 5b6fdc7..3ed9523 100644 --- a/public/icon-notification.svg +++ b/public/icon-notification.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/icon-points.svg b/public/icon-points.svg index c50d8b9..21b8b6e 100644 --- a/public/icon-points.svg +++ b/public/icon-points.svg @@ -1,5 +1,5 @@ - - - - - + + + + + diff --git a/public/icon-swap.svg b/public/icon-swap.svg index 3f2c697..3c2fffc 100644 --- a/public/icon-swap.svg +++ b/public/icon-swap.svg @@ -1,6 +1,6 @@ - - - - - - + + + + + + diff --git a/public/icon-transparency.svg b/public/icon-transparency.svg index e61ec57..d9c7d35 100644 --- a/public/icon-transparency.svg +++ b/public/icon-transparency.svg @@ -1,4 +1,4 @@ - - - - + + + + diff --git a/public/icon-wallet.svg b/public/icon-wallet.svg index 8151333..e9a2595 100644 --- a/public/icon-wallet.svg +++ b/public/icon-wallet.svg @@ -1,7 +1,7 @@ - - - - - - - + + + + + + + diff --git a/public/icon0.svg b/public/icon0.svg new file mode 100644 index 0000000..c214a0c --- /dev/null +++ b/public/icon0.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/icon1.svg b/public/icon1.svg new file mode 100644 index 0000000..28d8b64 --- /dev/null +++ b/public/icon1.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/icon10.svg b/public/icon10.svg index 57f0c97..2e7233b 100644 --- a/public/icon10.svg +++ b/public/icon10.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/icon2.svg b/public/icon2.svg new file mode 100644 index 0000000..fd3b7fa --- /dev/null +++ b/public/icon2.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icon3.svg b/public/icon3.svg new file mode 100644 index 0000000..5b6fdc7 --- /dev/null +++ b/public/icon3.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icon4.svg b/public/icon4.svg new file mode 100644 index 0000000..fdbf40d --- /dev/null +++ b/public/icon4.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/icon5.svg b/public/icon5.svg new file mode 100644 index 0000000..e69de29 diff --git a/public/icon6.svg b/public/icon6.svg new file mode 100644 index 0000000..e636ecc --- /dev/null +++ b/public/icon6.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/icon7.svg b/public/icon7.svg index 7efe8f2..e69de29 100644 --- a/public/icon7.svg +++ b/public/icon7.svg @@ -1,4 +0,0 @@ - - - - diff --git a/public/icon8.svg b/public/icon8.svg index ef68606..e69de29 100644 --- a/public/icon8.svg +++ b/public/icon8.svg @@ -1,4 +0,0 @@ - - - - diff --git a/public/icon9.svg b/public/icon9.svg index 7af8854..bc76ee9 100644 --- a/public/icon9.svg +++ b/public/icon9.svg @@ -1,3 +1,3 @@ - - - + + + diff --git a/public/image-260.png b/public/image-260.png new file mode 100644 index 0000000..79c9f45 Binary files /dev/null and b/public/image-260.png differ diff --git a/public/logo.svg b/public/logo.svg index 3cc5e6f..ac17584 100644 --- a/public/logo.svg +++ b/public/logo.svg @@ -1,9 +1,9 @@ - - - - - - - - - + + + + + + + + + diff --git a/public/logo0.svg b/public/logo0.svg new file mode 100644 index 0000000..c85be55 --- /dev/null +++ b/public/logo0.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/lr0.svg b/public/lr0.svg index 23deccf..36814bb 100644 --- a/public/lr0.svg +++ b/public/lr0.svg @@ -1,11 +1,11 @@ - - - - - - - - - - - + + + + + + + + + + + diff --git a/public/rectangle-14290.svg b/public/rectangle-14290.svg new file mode 100644 index 0000000..6393806 --- /dev/null +++ b/public/rectangle-14290.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/rectangle-14291.svg b/public/rectangle-14291.svg new file mode 100644 index 0000000..6393806 --- /dev/null +++ b/public/rectangle-14291.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/usd-coin-usdc-logo-10.svg b/public/usd-coin-usdc-logo-10.svg index dce60f8..a4cf763 100644 --- a/public/usd-coin-usdc-logo-10.svg +++ b/public/usd-coin-usdc-logo-10.svg @@ -1,12 +1,12 @@ - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/public/vuesax-linear-buy-crypto1.svg b/public/vuesax-linear-buy-crypto1.svg new file mode 100644 index 0000000..d6d33c1 --- /dev/null +++ b/public/vuesax-linear-buy-crypto1.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/vuesax-linear-favorite-chart1.svg b/public/vuesax-linear-favorite-chart1.svg new file mode 100644 index 0000000..81501d9 --- /dev/null +++ b/public/vuesax-linear-favorite-chart1.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/vuesax-linear-home-trend-up1.svg b/public/vuesax-linear-home-trend-up1.svg new file mode 100644 index 0000000..a458e16 --- /dev/null +++ b/public/vuesax-linear-home-trend-up1.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/warning-shield-check0.svg b/public/warning-shield-check0.svg new file mode 100644 index 0000000..7730f28 --- /dev/null +++ b/public/warning-shield-check0.svg @@ -0,0 +1,3 @@ + + +