feat: Enhance cultural heritage site pages with new components and styling

- Added a new "HeritageSeal" SVG component for branding consistency across the site.
- Updated "CulturalSpaceExplorer" to include a descriptive header and introductory text.
- Modified "SiteHeader" to replace the logo with the new "HeritageSeal".
- Enhanced "HeritageDetailPage" with improved layout and styling for better readability.
- Updated "HeritageListPage" to include new visual elements and improved section layouts.
- Revamped "AboutPage" with new content structure and visual enhancements.
- Improved "ContactPage" with a visually appealing hero section and map integration.
- Updated global styles for better visual consistency and improved accessibility.
- Introduced "SectionDivider" component for decorative separation in content sections.

src/app/co-vat/page.tsx

@@ -3,6 +3,7 @@ import Image from "next/image";
 import { Boxes, ScanLine, Sparkles } from "lucide-react";
 import AntiquityShowcaseClient from "./AntiquityShowcaseClient";
 import { BackToTopButton } from "@/app/components/landing/BackToTopButton";
+import { HeritageSeal } from "@/app/components/landing/HeritageOrnament";
 import { SiteFooter } from "@/app/components/landing/SiteFooter";
 import { SiteHeader } from "@/app/components/landing/SiteHeader";
 import { antiquities, subpageHero } from "@/app/content";
@@ -25,14 +26,14 @@ export default function AntiquityPage() {
       <SiteHeader />
 
       <section className="public-subpage-hero public-subpage-hero--compact relative isolate overflow-hidden border-b border-[var(--surface-border)]">
-        <Image src={subpageHero.coVat} alt="" fill priority sizes="100vw" className="public-subpage-hero-image public-parallax-bg object-cover" />
-        <div className="public-subpage-hero-content mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:py-22">
+        <Image src={subpageHero.coVat} alt="" fill preload sizes="100vw" className="public-subpage-hero-image public-parallax-bg object-cover" />
+        <div className="public-subpage-hero-content mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:py-28">
           <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 className="public-hero-display public-heading-safe mt-5 text-[clamp(2.55rem,5.8vw,5rem)] font-extrabold">
+              Cổ vật &amp; <span className="public-display-accent">hiện vật 3D</span>
             </h1>
-            <p className="public-subpage-copy mt-6 max-w-[60ch] text-base leading-8 text-[var(--foreground)]/82 sm:text-lg">
+            <p className="public-subpage-copy mt-6 max-w-[60ch] text-base leading-8 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>
@@ -43,27 +44,39 @@ export default function AntiquityPage() {
       <AntiquityShowcaseClient 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 className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:py-20">
+          <div className="mx-auto max-w-2xl text-center">
+            <p className="public-kicker public-kicker--center">Vì sao số hóa 3D</p>
+            <h2 className="public-display public-heading-safe mt-3 text-[2rem] font-bold text-[var(--tour-ink)] sm:text-4xl">
+              Giá trị của hiện vật số
+            </h2>
+          </div>
+          <div className="mt-12 grid gap-x-8 gap-y-12 md:grid-cols-3">
+            {highlights.map((item) => {
+              const Icon = item.icon;
+              return (
+                <article key={item.title} className="public-stagger-item flex flex-col items-center text-center">
+                  <span className="relative grid h-16 w-16 place-items-center">
+                    <HeritageSeal className="absolute inset-0 h-full w-full text-[var(--primary)] opacity-35" />
+                    <Icon className="relative h-6 w-6 text-[var(--primary)]" strokeWidth={1.7} />
+                  </span>
+                  <h3 className="mt-6 text-lg font-bold text-[var(--tour-ink)]">{item.title}</h3>
+                  <p className="mt-2.5 max-w-[34ch] text-sm leading-6 text-[var(--muted-foreground)]">{item.detail}</p>
+                </article>
+              );
+            })}
+          </div>
         </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">
+      <section className="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:py-20">
+        <div className="public-panel public-glow rounded-[18px] p-8 text-center sm:p-12">
+          <HeritageSeal className="mx-auto h-10 w-10 text-[var(--primary)] opacity-80" />
+          <p className="public-kicker public-kicker--center mt-5">Mở rộng bộ sưu tập</p>
+          <h2 className="public-display public-heading-safe mx-auto mt-3 max-w-[24ch] 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">
+          <p className="mx-auto mt-4 max-w-[64ch] text-sm leading-7 text-[var(--muted-foreground)] 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>