feat: refactor Product page to match prototype design

Redesigned ProductCard and Product page based on original prototype:

ProductCard Component:
- Added gradient background matching prototype style
- Copied all SVG icons from prototype (US flags, HK flag, etc.)
- Implemented proper icon display with white background container
- Added category color variants (blue, green, purple)
- Risk level indicators with accurate colors
- Styled progress bar matching prototype
- Proper spacing and typography from CSS

Visual Elements:
- Radial gradient backgrounds on cards
- Glass-morphism effect with transparency
- Shadow and border effects from prototype
- Icon container with white background and shadow ring
- Category badges with colored backgrounds

Assets Added:
- frame-9230.svg, frame-9231.svg (US flag icons)
- hk0.svg (HK flag icon)
- chart-square1.svg
- All component SVG files from prototype
- View toggle icons

Styling:
- Followed prototype's style.css specifications
- Maintained exact color values and gradients
- Proper border radius and spacing
- Typography matching prototype

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-30 05:35:08 +00:00
parent 4c86b7cce1
commit b98500e61f
66 changed files with 443 additions and 291 deletions

View File

@@ -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() {
</div>
{/* Product Cards Grid */}
<div className="grid grid-cols-1 gap-6">
<div className="flex flex-col gap-6">
{products.map((product) => (
<ProductCard
key={product.id}
name={product.name}
category={product.category}
icon={product.icon}
categoryColor={product.categoryColor}
iconType={product.iconType}
yieldAPY={product.yieldAPY}
poolCap={product.poolCap}
maturity={product.maturity}

View File

@@ -1,12 +1,12 @@
"use client";
import Image from "next/image";
import { Button } from "@heroui/react";
interface ProductCardProps {
name: string;
category: string;
icon?: string;
categoryColor: "blue" | "green" | "purple";
iconType: "us-flag-1" | "hk-flag" | "us-flag-2";
yieldAPY: string;
poolCap: string;
maturity: string;
@@ -21,7 +21,8 @@ interface ProductCardProps {
export default function ProductCard({
name,
category,
icon,
categoryColor,
iconType,
yieldAPY,
poolCap,
maturity,
@@ -32,153 +33,196 @@ export default function ProductCard({
poolCapacityPercent,
onInvest,
}: ProductCardProps) {
const getRiskColor = (level: number) => {
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 (
<div className="bg-bg-surface dark:bg-gray-800 rounded-2xl border border-border-gray dark:border-gray-700 p-6 flex flex-col gap-6 hover:shadow-lg transition-shadow">
<div
className="rounded-3xl border border-[rgba(255,255,255,0.6)] p-6 flex-1 relative overflow-hidden"
style={{
background: `
radial-gradient(closest-side, rgba(186, 230, 253, 0.15) 0%, rgba(0, 0, 0, 0) 50%),
radial-gradient(closest-side, rgba(199, 210, 254, 0.15) 0%, rgba(0, 0, 0, 0) 50%),
linear-gradient(to left, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4))
`,
boxShadow: "0px 8px 32px 0px rgba(0, 0, 0, 0.03)",
}}
>
{/* Product Header */}
<div className="flex items-start gap-4">
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center flex-shrink-0">
{icon ? (
<Image src={icon} alt={name} width={32} height={32} />
) : (
<span className="text-2xl">🏛</span>
)}
<div className="pb-6 border-b-0">
<div className="flex items-center gap-4">
{/* Icon Container */}
<div
className="flex items-center justify-center w-16 h-16 rounded-2xl border border-[rgba(255,255,255,0.8)]"
style={{
background: "rgba(255, 255, 255, 0.4)",
boxShadow: "0px 0px 0px 4px rgba(255, 255, 255, 0.1)",
}}
>
<div className="relative w-12 h-12">
<Image
src={getIconSrc()}
alt={name}
width={48}
height={48}
className="w-full h-full object-contain"
/>
</div>
<div className="flex flex-col gap-2 flex-1">
<h3 className="text-body-large font-bold text-text-primary dark:text-white leading-tight">
</div>
{/* Title and Category */}
<div className="flex flex-col gap-0">
<h3 className="text-lg font-bold text-[#111827] dark:text-white leading-[150%]">
{name}
</h3>
<div
className={`inline-flex self-start px-3 py-1 rounded-full border text-caption-tiny font-medium ${getCategoryColor(
category
)}`}
className={`inline-flex self-start px-3 py-1 rounded-full border mt-1 ${getCategoryStyle()}`}
>
<span className="text-xs font-medium text-[#111827] dark:text-white">
{category}
</span>
</div>
</div>
</div>
</div>
{/* Product Metrics - Two Columns */}
<div className="grid grid-cols-2 gap-x-8 gap-y-4">
{/* Column 1 */}
<div className="flex flex-col gap-4">
{/* Metrics Section */}
<div className="py-6 flex gap-8">
<div className="flex flex-col gap-1">
<span className="text-body-small text-text-tertiary dark:text-gray-400">
<span className="text-sm text-[#6b7280] dark:text-gray-400">
Yield APY
</span>
<span className="text-body-large font-bold text-green-600 dark:text-green-400">
<span className="text-base font-bold text-[#111827] dark:text-white">
{yieldAPY}
</span>
</div>
<div className="flex flex-col gap-1">
<span className="text-body-small text-text-tertiary dark:text-gray-400">
<span className="text-sm text-[#6b7280] dark:text-gray-400">
Pool CaP
</span>
<span className="text-base font-bold text-[#111827] dark:text-white">
{poolCap}
</span>
</div>
</div>
{/* Details Grid */}
<div className="flex gap-6 pb-6">
<div className="flex flex-col gap-4 flex-1">
<div className="flex flex-col gap-1">
<span className="text-sm text-[#6b7280] dark:text-gray-400">
Maturity
</span>
<span className="text-body-default font-medium text-text-primary dark:text-white">
<span className="text-sm font-medium text-[#111827] dark:text-white">
{maturity}
</span>
</div>
<div className="flex flex-col gap-1">
<span className="text-body-small text-text-tertiary dark:text-gray-400">
<span className="text-sm text-[#6b7280] dark:text-gray-400">
Lock-Up
</span>
<span className="text-body-default font-medium text-text-primary dark:text-white">
<span className="text-sm font-medium text-[#111827] dark:text-white">
{lockUp}
</span>
</div>
</div>
{/* Column 2 */}
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-4 flex-1">
<div className="flex flex-col gap-1">
<span className="text-body-small text-text-tertiary dark:text-gray-400">
Pool CaP
</span>
<span className="text-body-large font-bold text-text-primary dark:text-white">
{poolCap}
</span>
</div>
<div className="flex flex-col gap-1">
<span className="text-body-small text-text-tertiary dark:text-gray-400">
<span className="text-sm text-[#6b7280] dark:text-gray-400">
Risk
</span>
<div className="flex items-center gap-2">
<span className="text-body-default font-medium text-text-primary dark:text-white">
<span className="text-sm font-medium text-[#111827] dark:text-white">
{risk}
</span>
<div className="flex items-center gap-1">
{[1, 2, 3].map((level) => (
<div
key={level}
className={`w-1.5 h-4 rounded-sm transition-colors ${
level <= riskLevel
? getRiskColor(riskLevel)
: "bg-gray-300 dark:bg-gray-600"
}`}
className="w-1 h-3 rounded-sm"
style={{
backgroundColor:
level <= riskLevel ? getRiskBarColor() : "#d1d5db",
}}
/>
))}
</div>
</div>
</div>
<div className="flex flex-col gap-1">
<span className="text-body-small text-text-tertiary dark:text-gray-400">
<span className="text-sm text-[#6b7280] dark:text-gray-400">
Circulating supply
</span>
<span className="text-body-default font-medium text-text-primary dark:text-white">
<span className="text-sm font-medium text-[#111827] dark:text-white">
{circulatingSupply}
</span>
</div>
</div>
</div>
{/* Divider */}
<div className="border-t border-border-gray dark:border-gray-700" />
{/* Pool Capacity & Invest Button */}
<div className="flex items-end justify-between gap-6">
{/* Pool Capacity & Button */}
<div className="pt-6 border-t border-[rgba(0,0,0,0.05)]">
<div className="flex items-end gap-6">
<div className="flex-1 flex flex-col gap-2">
<div className="flex items-center justify-between">
<span className="text-body-small text-text-tertiary dark:text-gray-400">
<span className="text-sm text-[#6b7280] dark:text-gray-400">
Pool Capacity
</span>
<span className="text-body-small font-bold text-text-primary dark:text-white">
<span className="text-sm font-medium text-[#111827] dark:text-white">
{poolCapacityPercent}% Filled
</span>
</div>
<div className="w-full h-2.5 bg-bg-subtle dark:bg-gray-700 rounded-full overflow-hidden">
<div className="w-full h-2 bg-[#e5e7eb] dark:bg-gray-700 rounded-full overflow-hidden">
<div
className="h-full bg-gradient-to-r from-blue-500 to-purple-600 rounded-full transition-all duration-300"
className="h-full bg-[#111827] dark:bg-blue-500 rounded-full transition-all"
style={{ width: `${poolCapacityPercent}%` }}
/>
</div>
</div>
<Button
onPress={onInvest}
className="px-8 py-3 bg-text-primary dark:bg-blue-600 text-white font-bold text-body-default rounded-xl h-auto min-w-[120px]"
<button
onClick={onInvest}
className="px-6 py-3 bg-[#111827] dark:bg-blue-600 text-white font-bold text-sm rounded-xl hover:bg-gray-800 dark:hover:bg-blue-700 transition-colors whitespace-nowrap"
>
Invest
</Button>
</button>
</div>
</div>
</div>
);

6
public/chart-square1.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.83844 10.2212C6.26094 10.2212 5.79346 10.6886 5.79346 11.2661V15.9595H9.2676V10.2212V10.2212H6.83844Z" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.3048 6.05029C9.72725 6.05029 9.25977 6.51781 9.25977 7.09531V15.9503H12.7339V7.09531C12.7339 6.51781 12.2756 6.05029 11.6981 6.05029H10.3048Z" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.7402 11.7793V15.9502H16.2144V12.8243C16.2052 12.2468 15.7377 11.7793 15.1694 11.7793H12.7402Z" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.7502 20.1668C18.3335 20.1668 20.1668 18.3335 20.1668 13.7502V8.25016C20.1668 3.66683 18.3335 1.8335 13.7502 1.8335H8.25016C3.66683 1.8335 1.8335 3.66683 1.8335 8.25016V13.7502C1.8335 18.3335 3.66683 20.1668 8.25016 20.1668H13.7502Z" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

7
public/component-10.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.272 14.7103V19.3169L15.9654 11.2942L10.272 14.7103ZM15.7585 9.79297L10.272 0.683594V7.30859L15.7585 9.79297Z" fill="#3B3735"/>
<path d="M10.272 7.82422V13.4659L15.7067 10.3086L10.272 7.82422Z" fill="#1F1D19"/>
<path d="M4.26758 9.79297L9.75398 0.683594V7.30859L4.26758 9.79297Z" fill="#959190"/>
<path d="M9.75353 7.82422V13.4659L4.31885 10.3086L9.75353 7.82422Z" fill="#403C3A"/>
<path d="M9.75398 14.71V19.3166L4.06055 11.2939L9.75398 14.71Z" fill="#959190"/>
</svg>

After

Width:  |  Height:  |  Size: 578 B

11
public/frame-9230.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.0 KiB

11
public/frame-9231.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.0 KiB

10
public/hk0.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="69" height="49" viewBox="0 0 69 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="68.3994" height="48.8567" rx="1.71429" fill="white"/>
<mask id="mask0_4_5494" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="69" height="49">
<rect width="68.3994" height="48.8567" rx="1.71429" fill="white"/>
</mask>
<g mask="url(#mask0_4_5494)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 48.8567H68.3994V0H0V48.8567Z" fill="#F0371D"/>
<path d="M37.8003 25.5918C39.5109 25.0367 41.7999 27.3594 42.9116 30.7803C44.023 34.2012 43.5368 37.4259 41.8267 37.9824C40.1161 38.5376 37.8281 36.2147 36.7163 32.7939C35.6049 29.373 36.0902 26.1484 37.8003 25.5918ZM27.6128 29.835C30.5229 27.7209 33.7398 27.186 34.7974 28.6406C35.8539 30.096 34.3509 32.9901 31.4409 35.1045C28.5307 37.2186 25.3139 37.7535 24.2563 36.2988C23.1998 34.8434 24.7028 31.9494 27.6128 29.835ZM29.4126 32.3125C29.1482 31.9491 28.6386 31.8678 28.2749 32.1318C27.9117 32.3962 27.8314 32.9059 28.0952 33.2695C28.3595 33.6329 28.8692 33.7131 29.2329 33.4492C29.596 33.1849 29.6764 32.6761 29.4126 32.3125ZM40.6558 32.3691C40.5167 31.9421 40.0567 31.7074 39.6294 31.8457C39.2022 31.9848 38.9684 32.4447 39.1069 32.8721C39.246 33.2993 39.705 33.533 40.1323 33.3945C40.5594 33.2554 40.7941 32.7964 40.6558 32.3691ZM20.4282 19.0674C21.4858 17.6127 24.7026 18.1475 27.6128 20.2617C30.523 22.3762 32.0252 25.2702 30.9683 26.7256C29.9108 28.1807 26.6942 27.6458 23.7837 25.5312C20.8735 23.4166 19.371 20.5226 20.4282 19.0674ZM42.3433 18.5342C45.9398 18.5345 48.8559 19.9928 48.8569 21.791C48.8564 23.5895 45.9402 25.0486 42.3433 25.0488C38.7461 25.0487 35.8291 23.5896 35.8286 21.791C35.8297 19.9927 38.7465 18.5343 42.3433 18.5342ZM25.6323 21.6016C25.2686 21.3376 24.7589 21.4187 24.4946 21.7822C24.2307 22.1458 24.3113 22.6545 24.6743 22.9189C25.0381 23.1831 25.5477 23.1029 25.812 22.7393C26.0761 22.3755 25.9959 21.8659 25.6323 21.6016ZM43.1567 21.1719C42.7076 21.1724 42.3436 21.5372 42.3433 21.9863C42.3437 22.4353 42.7077 22.7993 43.1567 22.7998C43.6059 22.7994 43.9707 22.4354 43.9712 21.9863C43.9709 21.5371 43.606 21.1722 43.1567 21.1719ZM30.521 15.291C31.6326 11.8697 33.9206 9.54633 35.6313 10.1016C37.3421 10.6575 37.828 13.8822 36.7163 17.3037C35.6046 20.7251 33.3167 23.0486 31.606 22.4932C29.8952 21.9373 29.4093 18.7126 30.521 15.291ZM34.3071 14.8086C33.8794 14.6696 33.4197 14.9043 33.2808 15.332C33.142 15.7595 33.3759 16.2183 33.8032 16.3574C34.2309 16.4964 34.6906 16.2627 34.8296 15.835C34.9686 15.4073 34.7348 14.9476 34.3071 14.8086Z" fill="white"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

6
public/icon0.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.6665 2.75L18.3332 6.41667L14.6665 10.0833" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18.3332 6.4165H3.6665" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.33317 19.2498L3.6665 15.5832L7.33317 11.9165" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.6665 15.5835H18.3332" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 628 B

14
public/icon1.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4_5317)">
<path d="M19.2498 14.6665H15.5832C15.0769 14.6665 14.6665 15.0769 14.6665 15.5832V19.2498C14.6665 19.7561 15.0769 20.1665 15.5832 20.1665H19.2498C19.7561 20.1665 20.1665 19.7561 20.1665 19.2498V15.5832C20.1665 15.0769 19.7561 14.6665 19.2498 14.6665Z" stroke="#9CA1AF" stroke-width="1.83333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.41683 14.6665H2.75016C2.2439 14.6665 1.8335 15.0769 1.8335 15.5832V19.2498C1.8335 19.7561 2.2439 20.1665 2.75016 20.1665H6.41683C6.92309 20.1665 7.3335 19.7561 7.3335 19.2498V15.5832C7.3335 15.0769 6.92309 14.6665 6.41683 14.6665Z" stroke="#9CA1AF" stroke-width="1.83333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.8333 1.8335H9.16667C8.66041 1.8335 8.25 2.2439 8.25 2.75016V6.41683C8.25 6.92309 8.66041 7.3335 9.16667 7.3335H12.8333C13.3396 7.3335 13.75 6.92309 13.75 6.41683V2.75016C13.75 2.2439 13.3396 1.8335 12.8333 1.8335Z" stroke="#9CA1AF" stroke-width="1.83333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.5835 14.6667V11.9167C4.5835 11.6736 4.68007 11.4404 4.85198 11.2685C5.02389 11.0966 5.25705 11 5.50016 11H16.5002C16.7433 11 16.9764 11.0966 17.1483 11.2685C17.3203 11.4404 17.4168 11.6736 17.4168 11.9167V14.6667" stroke="#9CA1AF" stroke-width="1.83333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11 11.0002V7.3335" stroke="#9CA1AF" stroke-width="1.83333" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_4_5317">
<rect width="22" height="22" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

3
public/icon2.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.25 10.5L8.75 7L5.25 3.5" stroke="#9CA1AF" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 229 B

3
public/icon3.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.5 5.25L7 8.75L3.5 5.25" stroke="#9CA1AF" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 229 B

4
public/icon4.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.6667 4.66667V2.66667C12.6667 2.48986 12.5964 2.32029 12.4714 2.19526C12.3464 2.07024 12.1768 2 12 2H3.33333C2.97971 2 2.64057 2.14048 2.39052 2.39052C2.14048 2.64057 2 2.97971 2 3.33333C2 3.68696 2.14048 4.02609 2.39052 4.27614C2.64057 4.52619 2.97971 4.66667 3.33333 4.66667H13.3333C13.5101 4.66667 13.6797 4.7369 13.8047 4.86193C13.9298 4.98695 14 5.15652 14 5.33333V8M14 8H12C11.6464 8 11.3072 8.14048 11.0572 8.39052C10.8071 8.64057 10.6667 8.97971 10.6667 9.33333C10.6667 9.68696 10.8071 10.0261 11.0572 10.2761C11.3072 10.5262 11.6464 10.6667 12 10.6667H14C14.1768 10.6667 14.3464 10.5964 14.4714 10.4714C14.5964 10.3464 14.6667 10.1768 14.6667 10V8.66667C14.6667 8.48986 14.5964 8.32029 14.4714 8.19526C14.3464 8.07024 14.1768 8 14 8Z" stroke="#FCFCFD" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 3.3335V12.6668C2 13.0205 2.14048 13.3596 2.39052 13.6096C2.64057 13.8597 2.97971 14.0002 3.33333 14.0002H13.3333C13.5101 14.0002 13.6797 13.9299 13.8047 13.8049C13.9298 13.6799 14 13.5103 14 13.3335V10.6668" stroke="#FCFCFD" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

0
public/icon5.svg Normal file
View File

4
public/icon6.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 3.5H11V6.5" stroke="#10B981" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11 3.5L6.75 7.75L4.25 5.25L1 8.5" stroke="#10B981" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 303 B

View File

@@ -1,4 +0,0 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 3.5V2C9.5 1.86739 9.44732 1.74021 9.35355 1.64645C9.25979 1.55268 9.13261 1.5 9 1.5H2.5C2.23478 1.5 1.98043 1.60536 1.79289 1.79289C1.60536 1.98043 1.5 2.23478 1.5 2.5C1.5 2.76522 1.60536 3.01957 1.79289 3.20711C1.98043 3.39464 2.23478 3.5 2.5 3.5H10C10.1326 3.5 10.2598 3.55268 10.3536 3.64645C10.4473 3.74021 10.5 3.86739 10.5 4V6M10.5 6H9C8.73478 6 8.48043 6.10536 8.29289 6.29289C8.10536 6.48043 8 6.73478 8 7C8 7.26522 8.10536 7.51957 8.29289 7.70711C8.48043 7.89464 8.73478 8 9 8H10.5C10.6326 8 10.7598 7.94732 10.8536 7.85355C10.9473 7.75979 11 7.63261 11 7.5V6.5C11 6.36739 10.9473 6.24021 10.8536 6.14645C10.7598 6.05268 10.6326 6 10.5 6Z" stroke="#4B5563" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.5 2.5V9.5C1.5 9.76522 1.60536 10.0196 1.79289 10.2071C1.98043 10.3946 2.23478 10.5 2.5 10.5H10C10.1326 10.5 10.2598 10.4473 10.3536 10.3536C10.4473 10.2598 10.5 10.1326 10.5 10V8" stroke="#4B5563" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 0 B

View File

@@ -1,4 +0,0 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.83333 5.8335H14.1667V14.1668" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.83333 14.1668L14.1667 5.8335" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 361 B

After

Width:  |  Height:  |  Size: 0 B

BIN
public/image-260.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 753 B

9
public/logo0.svg Normal file
View File

@@ -0,0 +1,9 @@
<svg width="208" height="40" viewBox="0 0 208 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M64.5039 27.4229H61.3193L55.4033 16.8848L49.4717 27.4229H46.2861L55.4053 11.2412L64.5039 27.4229ZM82.6846 14.7344H71.8057C71.2937 14.7345 70.8758 14.9071 70.5107 15.2715C70.1459 15.6358 69.9727 16.0526 69.9727 16.5635C69.9727 17.0728 70.1443 17.4891 70.5068 17.8525C70.87 18.2058 71.289 18.3759 71.8057 18.376H78.1533C79.3949 18.3762 80.4742 18.8246 81.3457 19.7041C82.2326 20.5757 82.6844 21.6559 82.6846 22.8994C82.6846 24.1427 82.2325 25.2259 81.3496 26.1074C80.4756 26.9799 79.3951 27.4228 78.1533 27.4229H67.2734V24.7295H78.1533C78.6651 24.7294 79.0823 24.5566 79.4473 24.1924C79.8124 23.8279 79.9863 23.4106 79.9863 22.8994C79.9862 22.3889 79.8133 21.9813 79.4541 21.6309L79.4473 21.624C79.0823 21.26 78.665 21.088 78.1533 21.0879H71.8057C70.5641 21.0879 69.4796 20.6456 68.5957 19.7773L68.5918 19.7715L68.5869 19.7686C67.7168 18.8861 67.2734 17.803 67.2734 16.5635C67.2735 15.324 67.7178 14.2454 68.5918 13.373C69.4749 12.4917 70.5602 12.0401 71.8057 12.04H82.6846V14.7344ZM101.412 14.7344H90.5332C90.0215 14.7345 89.6042 14.9074 89.2393 15.2715C88.8743 15.6357 88.7003 16.0526 88.7002 16.5635C88.7002 17.0728 88.873 17.4891 89.2354 17.8525C89.5986 18.2055 90.017 18.3758 90.5332 18.376H96.8809C98.1225 18.3761 99.2018 18.8247 100.073 19.7041C100.96 20.5757 101.412 21.6559 101.412 22.8994C101.412 24.1426 100.961 25.226 100.078 26.1074C99.2041 26.9799 98.1227 27.4228 96.8809 27.4229H86.001V24.7295H96.8809C97.3928 24.7294 97.8107 24.5568 98.1758 24.1924C98.541 23.8279 98.7139 23.4106 98.7139 22.8994C98.7137 22.3888 98.5411 21.9814 98.1816 21.6309L98.1758 21.624C97.8107 21.2598 97.3928 21.088 96.8809 21.0879H90.5332C89.2919 21.0877 88.2081 20.6454 87.3242 19.7773L87.3154 19.7686C86.4452 18.8861 86.001 17.803 86.001 16.5635C86.001 15.3241 86.4456 14.2454 87.3193 13.373C88.2024 12.4917 89.2879 12.0402 90.5332 12.04H101.412V14.7344ZM120.143 14.7344H112.438C111.139 14.7344 110.028 15.1657 109.071 16.04C108.343 16.7054 107.861 17.4793 107.617 18.376H120.143V21.0879H107.617C107.861 21.9868 108.343 22.7676 109.072 23.4424C110.027 24.3037 111.138 24.7295 112.438 24.7295H120.143V27.4229H112.438C110.316 27.4229 108.484 26.6672 106.986 25.1729C105.489 23.6783 104.732 21.8496 104.732 19.7314C104.733 17.6133 105.489 15.7854 106.986 14.291C108.484 12.7964 110.316 12.04 112.438 12.04H120.143V14.7344ZM138.874 14.7344H132.525V27.4229H129.81V14.7344H123.463V12.04H138.874V14.7344ZM149.896 17.6377L154.839 12.04H158.538L151.737 19.7314L158.538 27.4229H154.839L149.896 21.8271L144.955 27.4229H141.257L148.058 19.7314L141.257 12.04H144.955L149.896 17.6377Z" fill="#111827"/>
<path d="M22.7595 21.1203C18.5742 26.4404 19.4882 25.3226 15.8872 29.3075C12.2862 33.2924 10.8695 34.122 7.84473 35.6161C10.6589 38.3532 17.6613 39.5414 20.5777 39.6614C31.9067 39.6614 37.8658 29.0974 39.4293 23.8154L34.6487 28.5872C26.8272 34.5505 27.5173 27.1545 27.8281 21.4701C28.139 15.7856 26.9448 15.8001 22.7595 21.1203Z" fill="#111827"/>
<path opacity="0.1" d="M21.2095 26.2439C25.3136 20.8326 24.7563 22.5015 24.807 24.7774C24.8519 26.7963 26.5315 36.6559 33.1007 34.301C30.0469 37.3255 25.907 39.662 20.5793 39.662C18.3122 39.5687 13.8577 38.9891 10.6646 37.45C13.017 35.3088 18.0422 30.4203 21.2095 26.2439Z" fill="#111827"/>
<path d="M25.6931 9.41385C31.7064 4.99711 33.3042 12.2451 33.3513 16.4212V23.1454C33.3513 27.4346 39.8398 20.9512 39.8398 18.7215C39.8398 17.7209 37.2516 0 21.084 0C4.91616 0 -1.11093 13.0945 0.165453 22.2252C1.44185 31.356 4.92273 29.6112 7.25637 28.1708C10.731 26.9675 18.1765 14.9347 25.6931 9.41385Z" fill="#111827"/>
<path d="M21.0861 0C30.6554 4.75569e-06 35.4673 6.20837 37.8012 11.4831C34.1121 7.97614 30.7616 7.54956 28.4579 8.08875C27.6616 8.22689 26.7457 8.64219 25.6951 9.41381C18.1786 14.9347 10.2903 26.9881 7.36901 28.3181C4.44771 29.6479 0.986264 31.1565 0.167397 22.2252C-0.674318 13.0444 4.91822 0 21.0861 0Z" fill="#111827"/>
<path opacity="0.1" d="M18.7258 33.5267C22.0192 29.4302 22.2606 26.9637 23.3365 30.9474C24.2891 34.4746 26.7076 36.2162 29.1681 37.3452C26.7482 38.7572 23.8932 39.6621 20.5782 39.6621C18.8803 39.5922 15.9554 39.2493 13.2524 38.4351C15.0305 37.2144 17.1293 35.5124 18.7258 33.5267Z" fill="#111827"/>
<path d="M21.088 0C21.3164 0 21.5422 0.00350863 21.7652 0.0104881C23.9447 0.0786729 25.8683 0.475476 27.565 1.11005C27.7725 1.18767 27.9766 1.26895 28.1773 1.35352C28.2003 1.36323 28.2235 1.37276 28.2464 1.38255C28.3196 1.41379 28.3923 1.44574 28.4646 1.47788C28.5163 1.50086 28.5677 1.52413 28.619 1.54755C28.7651 1.61432 28.9095 1.68267 29.052 1.75301C29.1196 1.7864 29.1867 1.82035 29.2534 1.85452C29.3449 1.90133 29.4356 1.9488 29.5257 1.99705C30.6339 2.5913 31.6275 3.29283 32.5172 4.06639C32.6232 4.15858 32.7278 4.25182 32.831 4.346C32.9697 4.4727 33.1057 4.60121 33.2392 4.73125C33.2839 4.77477 33.3283 4.81848 33.3725 4.86235C33.434 4.92356 33.4949 4.98514 33.5554 5.04702C33.5739 5.06596 33.5924 5.08494 33.6107 5.10395C33.6736 5.16883 33.7359 5.23394 33.7974 5.29948C34.0164 5.53248 34.2277 5.76965 34.4318 6.01023C34.5281 6.12388 34.6225 6.23863 34.7157 6.35372C34.8215 6.48444 34.9255 6.61579 35.0271 6.74814C36.1938 8.2668 37.0918 9.88565 37.7782 11.4271C37.7864 11.4456 37.7946 11.4641 37.8028 11.4826C34.7535 8.5841 31.9355 7.79003 29.749 7.90634C27.2573 7.13785 23.2106 7.96321 17.9463 13.2178C5.91446 25.2275 -1.8284 26.8444 2.06022 12.1741C2.44117 10.7369 2.97053 9.45623 3.62937 8.31499C4.6146 6.90895 5.80945 5.60385 7.22473 4.46399C7.35114 4.36217 7.47942 4.26178 7.60937 4.16264C9.16188 2.97822 10.9663 1.98826 13.036 1.27149C13.3319 1.169 13.6333 1.07212 13.9402 0.98101C16.0584 0.352059 18.4368 2.0529e-05 21.088 0Z" fill="#111827"/>
</svg>

After

Width:  |  Height:  |  Size: 5.6 KiB

View File

@@ -0,0 +1,3 @@
<svg width="77" height="4" viewBox="0 0 77 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H76.6493V3.92876H0V0Z" fill="#D72E20"/>
</svg>

After

Width:  |  Height:  |  Size: 154 B

View File

@@ -0,0 +1,3 @@
<svg width="77" height="4" viewBox="0 0 77 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H76.6493V3.92876H0V0Z" fill="#D72E20"/>
</svg>

After

Width:  |  Height:  |  Size: 154 B

View File

@@ -0,0 +1,5 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.2083 13.7502C14.0525 13.7502 13.8875 13.741 13.7317 13.7318C13.5025 10.826 11.1742 8.49765 8.26832 8.26849C8.25916 8.11265 8.25 7.94766 8.25 7.79183C8.25 4.501 10.9175 1.8335 14.2083 1.8335C17.4992 1.8335 20.1667 4.501 20.1667 7.79183C20.1667 11.0827 17.4992 13.7502 14.2083 13.7502Z" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.79183 20.1667C4.501 20.1667 1.8335 17.4992 1.8335 14.2083C1.8335 10.9175 4.501 8.25 7.79183 8.25C7.94766 8.25 8.11265 8.25916 8.26849 8.26832C11.1743 8.49749 13.5027 10.8258 13.7318 13.7317C13.741 13.8875 13.7502 14.0525 13.7502 14.2083C13.7502 17.4992 11.0827 20.1667 7.79183 20.1667Z" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.79167 11.9165L8.59834 13.4015L10.0833 14.2082L8.59834 15.0148L7.79167 16.4998L6.985 15.0148L5.5 14.2082L6.985 13.4015L7.79167 11.9165Z" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -0,0 +1,5 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.1668 11.9168V8.25016C20.1668 3.66683 18.3335 1.8335 13.7502 1.8335H8.25016C3.66683 1.8335 1.8335 3.66683 1.8335 8.25016V13.7502C1.8335 18.3335 3.66683 20.1668 8.25016 20.1668H11.9168" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.71924 13.2823L8.90091 10.4498C9.21258 10.0465 9.79008 9.97312 10.1934 10.2848L11.8709 11.6048C12.2743 11.9165 12.8517 11.8431 13.1634 11.449L15.2809 8.71729" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18.1131 15.0243C18.2415 15.281 18.5623 15.5193 18.8464 15.5743L19.1948 15.6293C20.2398 15.8035 20.4873 16.5735 19.7356 17.3343L19.4148 17.6551C19.2039 17.8751 19.0848 18.2968 19.149 18.5901L19.1948 18.7826C19.479 20.0476 18.8098 20.5335 17.7098 19.8735L17.4714 19.736C17.1873 19.571 16.729 19.571 16.4448 19.736L16.2064 19.8735C15.0973 20.5426 14.4281 20.0476 14.7214 18.7826L14.7673 18.5901C14.8314 18.2968 14.7123 17.8751 14.5015 17.6551L14.1806 17.3343C13.429 16.5735 13.6764 15.8035 14.7214 15.6293L15.0698 15.5743C15.3448 15.5285 15.6748 15.281 15.8031 15.0243L16.0598 14.5018C16.5548 13.5026 17.3615 13.5026 17.8565 14.5018L18.1131 15.0243Z" stroke="#9CA1AF" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@@ -0,0 +1,5 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.32766 6.45316C2.50266 7.09482 1.8335 8.46066 1.8335 9.49649V16.289C1.8335 18.4157 3.566 20.1573 5.69266 20.1573H16.3077C18.4343 20.1573 20.1668 18.4157 20.1668 16.2982V9.62482C20.1668 8.51566 19.4243 7.09482 18.5168 6.46232L12.8518 2.49316C11.5685 1.59482 9.506 1.64066 8.2685 2.60316L3.32766 6.45316Z" stroke="#FCFCFD" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.125 10.5415L11.275 14.3915L9.80833 12.1915L6.875 15.1248" stroke="#FCFCFD" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.2915 10.5415H15.1248V12.3748" stroke="#FCFCFD" stroke-width="1.83" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 790 B

View File

@@ -0,0 +1,3 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.7498 8.25L10.0832 11.9167L8.24984 10.0833M18.3332 9.31796C18.3332 15.3389 13.7791 18.0382 11.8485 18.9121L11.846 18.9132C11.643 19.0051 11.5412 19.0512 11.3105 19.0908C11.1643 19.1158 10.8363 19.1158 10.6901 19.0908C10.4585 19.051 10.3556 19.0048 10.151 18.9121C8.22032 18.0382 3.6665 15.3389 3.6665 9.31795V5.68351C3.6665 4.65675 3.6665 4.14299 3.86633 3.75081C4.04209 3.40585 4.32235 3.12559 4.66732 2.94982C5.05949 2.75 5.57325 2.75 6.60002 2.75H15.4C16.4268 2.75 16.9394 2.75 17.3316 2.94982C17.6766 3.12559 17.9578 3.40585 18.1335 3.75081C18.3332 4.1426 18.3332 4.65574 18.3332 5.6805V9.31796Z" stroke="#9CA1AF" stroke-width="1.83333" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 805 B