feat: trang trưng bày cổ vật 3D + nâng cấp typography/độ tương phản

- Trình xem mô hình .glb (three GLTFLoader + OrbitControls): xoay/zoom/tự xoay, môi trường studio, trạng thái tải & lỗi; trang /co-vat với 2 cổ vật chuông đồng - Đổi tên file .glb Unicode -> ASCII (chuong-1/2.glb) tránh lỗi đường dẫn - Thêm font serif hiển thị (Noto Serif Display) cho tiêu đề - Sửa độ tương phản chữ trên bề mặt sáng (header, ô tìm kiếm, bộ lọc), badge vuông Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-23 14:45:41 +07:00
parent 17a7866cd2
commit f518c07763
10 changed files with 507 additions and 19 deletions
@@ -0,0 +1,77 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+import { Boxes, ScanLine, Sparkles } from "lucide-react";
+import { AntiquityShowcase } from "@/app/components/antiquity/AntiquityShowcase";
+import { BackToTopButton } from "@/app/components/landing/BackToTopButton";
+import { SiteFooter } from "@/app/components/landing/SiteFooter";
+import { SiteHeader } from "@/app/components/landing/SiteHeader";
+import { activeTour, antiquities } from "@/app/content";
+
+export const metadata: Metadata = {
+  title: "Cổ vật 3D | VR360 Như Quỳnh",
+  description:
+    "Phòng trưng bày số các cổ vật, hiện vật tiêu biểu của hệ thống di tích Xã Như Quỳnh được số hóa thành mô hình 3D xem được mọi góc.",
+};
+
+const highlights = [
+  { icon: ScanLine, title: "Số hóa 3D độ chi tiết cao", detail: "Hiện vật được quét và dựng mô hình ba chiều, lưu giữ hình khối và hoa văn nguyên bản." },
+  { icon: Boxes, title: "Xem mọi góc, mọi lúc", detail: "Xoay, phóng to và quan sát từng chi tiết ngay trên trình duyệt, không cần tiếp xúc hiện vật gốc." },
+  { icon: Sparkles, title: "Bảo tồn cho mai sau", detail: "Tư liệu số phục vụ trưng bày, giáo dục và nghiên cứu di sản lâu dài." },
+];
+
+export default function AntiquityPage() {
+  return (
+    <main className="public-page min-h-[100dvh] bg-[var(--background)] text-[var(--foreground)]">
+      <SiteHeader />
+
+      <section className="public-subpage-hero public-subpage-hero--compact relative isolate overflow-hidden border-b border-[var(--surface-border)]">
+        <Image src={activeTour.shrineImage} alt="" fill priority sizes="100vw" className="public-subpage-hero-image object-cover" />
+        <div className="public-subpage-hero-content mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:py-22">
+          <div className="public-rise public-hero-rule max-w-4xl">
+            <p className="public-kicker">Phòng trưng bày số</p>
+            <h1 className="public-gradient-text public-heading-safe mt-4 text-[clamp(2.55rem,5.8vw,5rem)] font-extrabold">
+              Cổ vật & hiện vật 3D
+            </h1>
+            <p className="public-subpage-copy mt-6 max-w-[60ch] text-base leading-8 text-[var(--foreground)]/82 sm:text-lg">
+              Bộ sưu tập số các cổ vật tiêu biểu thuộc hệ thống di tích Xã Như Quỳnh. Mỗi hiện vật được
+              dựng thành mô hình ba chiều để chiêm ngưỡng trọn vẹn từ mọi góc nhìn.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <AntiquityShowcase items={antiquities} />
+
+      <section className="border-t border-[var(--surface-border)] bg-[var(--surface-band)]">
+        <div className="mx-auto grid max-w-7xl gap-4 px-4 py-14 sm:px-6 md:grid-cols-3 lg:py-18">
+          {highlights.map((item) => {
+            const Icon = item.icon;
+            return (
+              <article key={item.title} className="public-panel public-stagger-item rounded-[14px] p-6">
+                <Icon className="h-7 w-7 text-[var(--primary)]" strokeWidth={1.7} />
+                <h3 className="mt-4 text-lg font-bold text-[var(--tour-ink)]">{item.title}</h3>
+                <p className="mt-2 text-sm leading-6 text-[var(--muted-foreground)]">{item.detail}</p>
+              </article>
+            );
+          })}
+        </div>
+      </section>
+
+      <section className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:py-16">
+        <div className="public-panel public-glow rounded-[16px] p-6 text-center sm:p-9">
+          <p className="public-kicker justify-center">Mở rộng bộ sưu tập</p>
+          <h2 className="public-display mt-3 text-2xl font-bold text-[var(--tour-ink)] sm:text-3xl">
+            Hiện vật từ các di tích khác đang được số hóa
+          </h2>
+          <p className="mx-auto mt-3 max-w-[64ch] text-sm leading-7 text-[var(--foreground)]/76 sm:text-base">
+            Phòng trưng bày sẽ tiếp tục bổ sung các cổ vật, sắc phong, bia đá và đồ thờ tự tiêu biểu
+            của toàn bộ hệ thống di tích Xã Như Quỳnh trong giai đoạn 2026–2030.
+          </p>
+        </div>
+      </section>
+
+      <SiteFooter />
+      <BackToTopButton />
+    </main>
+  );
+}