From 35bc25cdc0304feafe9db14ec11d4fcc181236e2 Mon Sep 17 00:00:00 2001
From: tuyenio <tt98tuyen@gmail.com>
Date: Tue, 23 Jun 2026 11:27:35 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20trang=20danh=20m=E1=BB=A5c=2015=20di=20?=
 =?UTF-8?q?t=C3=ADch=20Nh=C6=B0=20Qu=E1=BB=B3nh=20c=C3=B3=20b=E1=BB=99=20l?=
 =?UTF-8?q?=E1=BB=8Dc=20theo=20c=E1=BA=A5p?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/di-tich/page.tsx | 89 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 src/app/di-tich/page.tsx

diff --git a/src/app/di-tich/page.tsx b/src/app/di-tich/page.tsx
new file mode 100644
index 0000000..c019312
--- /dev/null
+++ b/src/app/di-tich/page.tsx
@@ -0,0 +1,89 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import { Mail, MapPinned } from "lucide-react";
+import { BackToTopButton } from "@/app/components/landing/BackToTopButton";
+import { CulturalSpaceExplorer } from "@/app/components/landing/CulturalSpaceExplorer";
+import { SiteFooter } from "@/app/components/landing/SiteFooter";
+import { SiteHeader } from "@/app/components/landing/SiteHeader";
+import { activeTour, heritageSites } from "@/app/content";
+
+export const metadata: Metadata = {
+  title: "Di tích | VR360 Như Quỳnh",
+  description:
+    "Danh sách toàn bộ di tích lịch sử — văn hóa và tour VR360 của Xã Như Quỳnh, tỉnh Hưng Yên.",
+};
+
+export default function HeritageListPage() {
+  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.gateImage}
+          alt=""
+          fill
+          priority
+          sizes="100vw"
+          className="public-subpage-hero-image object-cover"
+        />
+
+        <div className="public-subpage-hero-content mx-auto grid max-w-7xl gap-10 px-4 py-16 sm:px-6 lg:min-h-[580px] lg:grid-cols-[0.95fr_0.7fr] lg:items-center lg:py-22">
+          <div className="public-rise public-hero-rule w-full min-w-0 max-w-4xl">
+            <p className="public-kicker">Danh sách di tích và tour VR360</p>
+            <h1 className="public-gradient-text public-heading-safe public-subpage-title mt-4 text-[clamp(2.55rem,5.8vw,5.35rem)] font-extrabold">
+              Hệ thống di tích Xã Như Quỳnh
+            </h1>
+            <p className="public-subpage-copy mt-6 text-base leading-8 text-[var(--foreground)]/82 sm:text-lg">
+              Khám phá 15 di tích lịch sử — văn hóa của Xã Như Quỳnh: 9 di tích xếp hạng cấp quốc gia và 6 di tích cấp tỉnh.
+            </p>
+            <div className="mt-7 flex flex-wrap gap-3">
+              <span className="public-chip">
+                <MapPinned className="h-4 w-4" strokeWidth={1.8} />
+                {heritageSites.length} địa điểm
+              </span>
+              <span className="public-chip">
+                <MapPinned className="h-4 w-4" strokeWidth={1.8} />
+                {heritageSites.filter((site) => site.isAvailable).length} tour đang mở
+              </span>
+            </div>
+          </div>
+
+          <div className="public-image-stage public-hero-photo public-stagger-item hidden lg:block">
+            <Image
+              src={activeTour.coverImage}
+              alt="Di sản văn hóa Xã Như Quỳnh"
+              fill
+              sizes="38vw"
+              className="object-cover"
+            />
+          </div>
+        </div>
+      </section>
+
+      <CulturalSpaceExplorer sites={heritageSites} />
+
+      <section className="px-4 py-14 sm:px-6 lg:py-20">
+        <div className="public-panel public-glow mx-auto grid max-w-7xl gap-5 rounded-[8px] p-6 lg:grid-cols-[1fr_auto] lg:items-center lg:p-8">
+          <div>
+            <p className="public-kicker">Đề xuất địa điểm</p>
+            <h2 className="public-heading-safe mt-2 text-3xl font-bold text-[var(--tour-ink)] sm:text-4xl">
+              Bạn muốn đề xuất thêm địa điểm văn hóa?
+            </h2>
+            <p className="mt-3 max-w-[66ch] text-sm leading-6 text-[var(--foreground)]/76 sm:text-base">
+              Gửi thông tin, hình ảnh hoặc câu chuyện liên quan để cùng hoàn thiện kho tư liệu số của Xã Như Quỳnh.
+            </p>
+          </div>
+          <Link href="/lien-he" className="public-cta w-fit">
+            <Mail className="h-4 w-4" strokeWidth={1.8} />
+            Liên hệ với chúng tôi
+          </Link>
+        </div>
+      </section>
+
+      <SiteFooter />
+      <BackToTopButton />
+    </main>
+  );
+}