feat: redesign landing pages — bố cục giàu hơn, mượt & cao cấp hơn

- Trang chủ: thêm thẻ trải nghiệm Cổ vật 3D, khu "sắp ra mắt" dạng thẻ gọn
  (bỏ ảnh lặp), bo góc mềm, badge vuông có chấm trạng thái
- Giới thiệu: bố cục editorial bất đối xứng, dải thống kê, 4 trụ giá trị di sản,
  hành trình số hóa 4 bước, thẻ CTA tour nổi bật
- Liên hệ: 2 cột (hướng dẫn đóng góp + thẻ liên hệ), nhúng bản đồ
- CTA: sửa màu chữ tương phản trên nền xanh/nền sáng

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/app/gioi-thieu/page.tsx

@@ -1,9 +1,22 @@
 import type { Metadata } from "next";
 import Image from "next/image";
+import Link from "next/link";
+import {
+  ArrowRight,
+  BookOpenText,
+  Building2,
+  Compass,
+  FileText,
+  Landmark,
+  PlayCircle,
+  ScanLine,
+  Sparkles,
+  Users,
+} from "lucide-react";
 import { BackToTopButton } from "@/app/components/landing/BackToTopButton";
 import { SiteFooter } from "@/app/components/landing/SiteFooter";
 import { SiteHeader } from "@/app/components/landing/SiteHeader";
-import { activeTour, heritageSites } from "@/app/content";
+import { activeTour, antiquities, heritageSites, img } from "@/app/content";
 
 export const metadata: Metadata = {
   title: "Giới thiệu | VR360 Như Quỳnh",
@@ -15,9 +28,10 @@ const nationalCount = heritageSites.filter((s) => s.level === "Cấp quốc gia"
 const provincialCount = heritageSites.filter((s) => s.level === "Cấp tỉnh").length;
 
 const stats = [
-  { value: String(nationalCount), label: "di tích xếp hạng cấp quốc gia" },
+  { value: String(nationalCount), label: "di tích cấp quốc gia" },
   { value: String(provincialCount), label: "di tích cấp tỉnh" },
-  { value: activeTour.sceneCount, label: "điểm 360° trong tour đầu tiên" },
+  { value: activeTour.sceneCount, label: "điểm ảnh 360°" },
+  { value: String(antiquities.length), label: "cổ vật số hóa 3D" },
 ];
 
 const paragraphs = [
@@ -26,6 +40,20 @@ const paragraphs = [
   "Mỗi không gian được giới thiệu bằng hình ảnh thật, điểm tương tác, chú thích tiếng Việt và cấu trúc nội dung dễ theo dõi, hướng tới mục tiêu chuyển đổi số di sản giai đoạn 2026–2030.",
 ];
 
+const values = [
+  { icon: Landmark, title: "Không gian tín ngưỡng", detail: "Đình, chùa, đền, văn miếu — nơi gìn giữ kiến trúc và đời sống tâm linh của cộng đồng làng quê." },
+  { icon: BookOpenText, title: "Vùng đất khoa bảng", detail: "Truyền thống hiếu học được tôn vinh qua hệ thống văn miếu và các bậc danh nhân của quê hương." },
+  { icon: Building2, title: "Kiến trúc nghệ thuật", detail: "Những mảng chạm khắc, đồ thờ tự và hiện vật mang giá trị mỹ thuật cổ tiêu biểu." },
+  { icon: Users, title: "Ký ức cộng đồng", detail: "Lễ hội, phong tục và câu chuyện dân gian gắn liền với từng di tích qua nhiều thế hệ." },
+];
+
+const steps = [
+  { icon: Compass, title: "Khảo sát", detail: "Xác định danh mục di tích, tuyến tham quan và đầu mối duyệt nội dung tại địa phương." },
+  { icon: ScanLine, title: "Số hóa", detail: "Ghi nhận ảnh 360°, mô hình 3D cổ vật và dữ liệu không gian độ phân giải cao." },
+  { icon: FileText, title: "Biên tập", detail: "Tổ chức nội dung thành trải nghiệm dễ hiểu cho người dân, học sinh và du khách." },
+  { icon: Sparkles, title: "Vận hành", detail: "Đưa lên nền tảng trực tuyến, sẵn sàng mở rộng thêm các tuyến di sản mới." },
+];
+
 export default function AboutPage() {
   return (
     <main className="public-page min-h-[100dvh] bg-[var(--background)] text-[var(--foreground)]">
@@ -34,34 +62,139 @@ export default function AboutPage() {
       <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 max-w-7xl px-4 py-16 sm:px-6 lg:py-22">
-          <div className="public-rise max-w-4xl">
+          <div className="public-rise public-hero-rule max-w-4xl">
             <p className="public-kicker">Giới thiệu</p>
             <h1 className="public-gradient-text public-heading-safe mt-4 text-[clamp(2.55rem,5.8vw,5rem)] font-extrabold">
               Di sản văn hóa Xã Như Quỳnh
             </h1>
+            <p className="public-subpage-copy mt-6 max-w-[60ch] text-base leading-8 text-[var(--foreground)]/82 sm:text-lg">
+              Một vùng đất văn hiến với hệ thống di tích trải dài nhiều thế kỷ, nay được gìn giữ và lan tỏa
+              bằng công nghệ số.
+            </p>
           </div>
         </div>
       </section>
 
-      <section className="mx-auto max-w-3xl px-4 py-14 sm:px-6 lg:py-20">
-        <div className="grid gap-4 text-base leading-8 text-[var(--foreground)]/82">
+      {/* Intro — bố cục bất đối xứng: nhãn dính bên trái, nội dung bên phải */}
+      <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:grid lg:grid-cols-[0.42fr_0.58fr] lg:gap-12 lg:py-24">
+        <div className="lg:sticky lg:top-28 lg:self-start">
+          <p className="public-kicker">Về vùng đất</p>
+          <h2 className="public-display public-heading-safe mt-3 text-[clamp(1.9rem,3.2vw,2.8rem)] font-bold text-[var(--tour-ink)]">
+            Nơi lịch sử và tín ngưỡng cùng hội tụ
+          </h2>
+        </div>
+        <div className="mt-6 grid max-w-[65ch] gap-5 text-base leading-8 text-[var(--foreground)]/82 lg:mt-0">
           {paragraphs.map((text, i) => (
-            <p key={i}>{text}</p>
+            <p key={i} className={i === 0 ? "text-lg leading-9 text-[var(--tour-ink)]" : undefined}>
+              {text}
+            </p>
           ))}
         </div>
       </section>
 
+      {/* Stats */}
       <section className="border-y 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 sm:grid-cols-3 lg:py-20">
+        <div className="mx-auto grid max-w-7xl gap-4 px-4 py-14 sm:px-6 sm:grid-cols-2 lg:grid-cols-4 lg:py-18">
           {stats.map((s) => (
-            <div key={s.label} className="public-panel rounded-[8px] p-6 text-center">
-              <p className="public-gradient-text text-4xl font-extrabold">{s.value}</p>
-              <p className="mt-2 text-sm leading-6 text-[var(--muted-foreground)]">{s.label}</p>
+            <div key={s.label} className="public-panel public-stagger-item rounded-[14px] p-6 text-center">
+              <p className="public-gradient-text font-display-vn text-[2.6rem] font-extrabold leading-none [font-variant-numeric:tabular-nums]">
+                {s.value}
+              </p>
+              <p className="mt-3 text-sm leading-6 text-[var(--muted-foreground)]">{s.label}</p>
             </div>
           ))}
         </div>
       </section>
 
+      {/* Heritage values */}
+      <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:py-24">
+        <div className="max-w-3xl">
+          <p className="public-kicker">Giá trị di sản</p>
+          <h2 className="public-display public-heading-safe mt-3 text-[clamp(1.9rem,3.4vw,3rem)] font-bold text-[var(--tour-ink)]">
+            Bốn lớp giá trị được gìn giữ
+          </h2>
+        </div>
+        <div className="mt-10 grid gap-4 md:grid-cols-2">
+          {values.map((value, index) => {
+            const Icon = value.icon;
+            return (
+              <article
+                key={value.title}
+                className={`public-panel public-stagger-item rounded-[16px] p-7 ${index % 2 === 1 ? "md:mt-8" : ""}`}
+              >
+                <span className="grid h-12 w-12 place-items-center rounded-[12px] bg-[rgb(200_164_106_/_0.14)]">
+                  <Icon className="h-6 w-6 text-[var(--primary)]" strokeWidth={1.7} />
+                </span>
+                <h3 className="mt-5 text-xl font-bold text-[var(--tour-ink)]">{value.title}</h3>
+                <p className="mt-2.5 text-sm leading-7 text-[var(--muted-foreground)]">{value.detail}</p>
+              </article>
+            );
+          })}
+        </div>
+      </section>
+
+      {/* Digitization journey */}
+      <section className="border-y border-[var(--surface-border)] bg-[var(--surface-band)]">
+        <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:py-24">
+          <div className="max-w-3xl">
+            <p className="public-kicker">Hành trình số hóa</p>
+            <h2 className="public-display public-heading-safe mt-3 text-[clamp(1.9rem,3.4vw,3rem)] font-bold text-[var(--tour-ink)]">
+              Từ tư liệu đến trải nghiệm số
+            </h2>
+          </div>
+          <ol className="mt-10 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+            {steps.map((step, index) => {
+              const Icon = step.icon;
+              return (
+                <li key={step.title} className="public-panel public-stagger-item relative rounded-[16px] p-6">
+                  <span className="font-display-vn text-sm font-extrabold tracking-[0.2em] text-[var(--primary)]">
+                    {String(index + 1).padStart(2, "0")}
+                  </span>
+                  <Icon className="mt-4 h-7 w-7 text-[var(--tour-jade)]" strokeWidth={1.7} />
+                  <h3 className="mt-4 text-lg font-bold text-[var(--tour-ink)]">{step.title}</h3>
+                  <p className="mt-2 text-sm leading-6 text-[var(--muted-foreground)]">{step.detail}</p>
+                </li>
+              );
+            })}
+          </ol>
+        </div>
+      </section>
+
+      {/* Featured tour CTA */}
+      <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:py-20">
+        <div className="public-card group grid overflow-hidden rounded-[18px] lg:grid-cols-[1.05fr_0.95fr]">
+          <div className="relative min-h-[20rem]">
+            <Image
+              src={img("11.jpg")}
+              alt="Chùa Thái Lạc (Pháp Vân tự)"
+              fill
+              sizes="(max-width: 1024px) 100vw, 50vw"
+              className="object-cover transition-transform duration-700 group-hover:scale-[1.03]"
+            />
+          </div>
+          <div className="flex flex-col justify-center p-7 sm:p-10">
+            <p className="public-kicker">Điểm đến tiêu biểu</p>
+            <h2 className="public-display public-heading-safe mt-3 text-[clamp(1.8rem,3vw,2.6rem)] font-bold text-[var(--tour-ink)]">
+              {activeTour.title}
+            </h2>
+            <p className="mt-4 max-w-[52ch] text-sm leading-7 text-[var(--foreground)]/80 sm:text-base">
+              Ngôi chùa cổ thờ Pháp Vân, nổi tiếng với mảng chạm khắc gỗ thời Trần — di tích đầu tiên
+              được số hóa thành tour VR360 hoàn chỉnh.
+            </p>
+            <div className="mt-7 flex flex-wrap gap-3">
+              <Link href={activeTour.href} className="public-cta">
+                <PlayCircle className="h-4 w-4" strokeWidth={1.8} />
+                Tham quan VR360
+              </Link>
+              <Link href="/co-vat" className="public-cta-secondary">
+                Xem cổ vật 3D
+                <ArrowRight className="h-4 w-4" strokeWidth={1.8} />
+              </Link>
+            </div>
+          </div>
+        </div>
+      </section>
+
       <SiteFooter />
       <BackToTopButton />
     </main>