Initial commit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-26 17:51:31 +07:00
commit 61d0a11dfa
371 changed files with 35836 additions and 0 deletions
@@ -0,0 +1,116 @@
+import { Fragment, type ReactNode } from "react";
+
+import { H5PageHeader } from "@/components/common/h5-page-header";
+import { PageBreadcrumb } from "@/components/seo/page-breadcrumb";
+import { SeoBreadcrumb } from "@/components/seo/seo-breadcrumb";
+
+export type InfoSection = { title: string; content: ReactNode };
+export type Clause = { title: string; text: string };
+
+export function ClausePage({
+  title,
+  subtitle,
+  updatedAt,
+  clauses,
+}: {
+  title: string;
+  subtitle: string;
+  updatedAt: string;
+  clauses: Clause[];
+}) {
+  return (
+    <InfoPageLayout
+      title={title}
+      subtitle={subtitle}
+      updatedAt={updatedAt}
+      sections={clauses.map((clause) => ({ title: clause.title, content: <p>{clause.text}</p> }))}
+      mobile={
+        <div className="flex flex-col gap-2.5 rounded-2xl bg-[#13111C] px-4 py-3.5">
+          {clauses.map((clause) => (
+            <section key={clause.title} className="flex flex-col gap-1.5">
+              <h2 className="text-sm leading-5 font-bold text-[#FAF7FF]">{clause.title}</h2>
+              <p className="text-xs leading-[18px] text-[#9E94AD]">{clause.text}</p>
+            </section>
+          ))}
+        </div>
+      }
+    />
+  );
+}
+
+export function InfoPageLayout({
+  title,
+  subtitle,
+  updatedAt,
+  mobile,
+  sections,
+}: {
+  title: string;
+  subtitle: string;
+  updatedAt: string;
+  mobile: ReactNode;
+  sections: InfoSection[];
+}) {
+  return (
+    <InfoPageShell
+      title={title}
+      subtitle={subtitle}
+      mobile={
+        <>
+          {mobile}
+          <p className="text-right text-xs leading-[18px] text-[#9E94AD]">{updatedAt}</p>
+        </>
+      }
+    >
+      <div className={`${infoCardClass} gap-7 px-8 pt-7 pb-[34px]`}>
+        {sections.map((section, index) => (
+          <Fragment key={section.title}>
+            {index > 0 ? <div className="h-px bg-[#2E293D]" /> : null}
+            <section className="flex flex-col gap-3.5 text-sm leading-5 text-[#948CA8]">
+              <h2 className="text-xl leading-[26px] font-semibold text-[#F5F2FC]">{section.title}</h2>
+              {section.content}
+            </section>
+          </Fragment>
+        ))}
+        <p className="text-xs leading-[18px] text-[#948CA8]">{updatedAt}</p>
+      </div>
+    </InfoPageShell>
+  );
+}
+
+export const infoCardClass = "flex flex-col rounded-2xl bg-[#0E0D17] outline outline-1 -outline-offset-1 outline-[#2E293D]";
+
+export function InfoPageShell({
+  title,
+  subtitle,
+  mobile,
+  children,
+}: {
+  title: string;
+  subtitle: string;
+  mobile?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <main data-component="info-page-shell" className="flex-1 bg-[#07060D] lg:bg-[#06050E]">
+      <H5PageHeader title={title} fallback="/" />
+
+      <div className="mx-auto flex w-full flex-col gap-3 p-4 lg:w-[calc(100%-64px)] lg:max-w-[1700px] lg:gap-7 lg:px-0 lg:pt-[34px] lg:pb-[50px]">
+        <SeoBreadcrumb items={[{ name: "首页", href: "/" }, { name: title }]} />
+        <PageBreadcrumb current={title} />
+        <div className="hidden items-center gap-2 lg:flex">
+          <h1 className="text-[32px] leading-[38px] font-semibold text-[#F5F2FC]">{title}</h1>
+          <p className="text-sm leading-5 text-[#948CA8]">{subtitle}</p>
+        </div>
+        {mobile === undefined ? (
+          children
+        ) : (
+          <>
+            <div className="contents lg:hidden">{mobile}</div>
+            <div className="contents max-lg:hidden">{children}</div>
+          </>
+        )}
+      </div>
+    </main>
+  );
+}