大改变

components/transparency/GeographicAllocation.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import Image from "next/image";
+import { useApp } from "@/contexts/AppContext";
+
+export default function GeographicAllocation() {
+  const { t } = useApp();
+
+  const regions = [
+    {
+      countryKey: "transparency.unitedStates",
+      regionKey: "transparency.northAmerica",
+      value: "$305,000,000",
+      percentage: "65.6%",
+      flag: "/lr0.svg",
+    },
+    {
+      countryKey: "transparency.hongKong",
+      regionKey: "transparency.asiaPacific",
+      value: "$160,000,000",
+      percentage: "34.4%",
+      flag: "/container14.svg",
+    },
+  ];
+
+  return (
+    <div className="flex-1 bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-6 flex flex-col gap-6">
+      {/* Header */}
+      <div className="flex flex-col gap-0">
+        <h3 className="text-[20px] font-bold text-text-primary dark:text-white leading-[140%]">
+          {t("transparency.geographicAllocation")}
+        </h3>
+        <p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+          {t("transparency.geographicSubtitle")}
+        </p>
+      </div>
+
+      {/* Region Cards */}
+      <div className="flex flex-col gap-4">
+        {regions.map((region, index) => (
+          <div
+            key={index}
+            className="bg-bg-subtle dark:bg-gray-700 rounded-2xl border border-border-gray dark:border-gray-600 p-4 flex items-center justify-between"
+          >
+            {/* Left - Flag and Location */}
+            <div className="flex items-center gap-3">
+              <div className="w-12 h-12 flex-shrink-0 flex items-center justify-center">
+                <Image
+                  src={region.flag}
+                  alt={t(region.countryKey)}
+                  width={48}
+                  height={48}
+                  className="w-full h-full object-contain"
+                />
+              </div>
+              <div className="flex flex-col">
+                <span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
+                  {t(region.countryKey)}
+                </span>
+                <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+                  {t(region.regionKey)}
+                </span>
+              </div>
+            </div>
+
+            {/* Right - Value and Percentage */}
+            <div className="flex flex-col items-end">
+              <span className="text-body-small font-bold text-text-primary dark:text-white leading-[150%]">
+                {region.value}
+              </span>
+              <span className="text-caption-tiny font-medium text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+                {region.percentage}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}