initial commit

app/transparency/page.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import Sidebar from "@/components/layout/Sidebar";
+import TopBar from "@/components/layout/TopBar";
+import TransparencyStats from "@/components/transparency/TransparencyStats";
+import HoldingsTable from "@/components/transparency/HoldingsTable";
+import AssetDistribution from "@/components/transparency/AssetDistribution";
+import GeographicAllocation from "@/components/transparency/GeographicAllocation";
+import { useApp } from "@/contexts/AppContext";
+
+export default function TransparencyPage() {
+  const { t } = useApp();
+
+  const breadcrumbItems = [
+    { label: "ASSETX", href: "/" },
+    { label: t("nav.transparency") },
+  ];
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-gray-900 flex">
+      <Sidebar />
+      <div className="flex-1 flex flex-col ml-[222px]">
+        <div className="bg-[#F3F4F6] dark:bg-gray-800 border-b border-border-normal dark:border-gray-700 px-8 py-3">
+          <TopBar breadcrumbItems={breadcrumbItems} />
+        </div>
+
+        <div className="flex-1 px-8 py-8 bg-[#F3F4F6] dark:bg-gray-900 flex flex-col gap-6">
+          {/* Header */}
+          <div className="flex items-center justify-between">
+            <h1 className="text-heading-h2 font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.01em]">
+              {t("transparency.title")}
+            </h1>
+            <p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+              {t("transparency.subtitle")}
+            </p>
+          </div>
+
+          {/* Stats Section */}
+          <TransparencyStats />
+
+          {/* Holdings Table */}
+          <HoldingsTable />
+
+          {/* Distribution Section */}
+          <div className="flex gap-8">
+            <AssetDistribution />
+            <GeographicAllocation />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}