From e081f54bd499badc16180d650daef014620f7a1f Mon Sep 17 00:00:00 2001 From: tuyenio Date: Fri, 26 Jun 2026 16:17:24 +0700 Subject: [PATCH] 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 | 55 +++++--- .../landing/CulturalSpaceExplorer.tsx | 10 ++ .../components/landing/HeritageOrnament.tsx | 37 ++++++ src/app/components/landing/SiteFooter.tsx | 1 + src/app/components/landing/SiteHeader.tsx | 5 +- src/app/content.ts | 1 + src/app/di-tich/[slug]/page.tsx | 19 +-- src/app/di-tich/page.tsx | 32 +++-- src/app/gioi-thieu/page.tsx | 31 +++-- src/app/globals.css | 125 +++++++++++++++--- src/app/lien-he/page.tsx | 36 +++-- src/app/page.tsx | 80 ++++++++--- 12 files changed, 327 insertions(+), 105 deletions(-) create mode 100644 src/app/components/landing/HeritageOrnament.tsx diff --git a/src/app/co-vat/page.tsx b/src/app/co-vat/page.tsx index 0449f83..c652be7 100644 --- a/src/app/co-vat/page.tsx +++ b/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() {
- -
+ +

Phòng trưng bày số

-

- Cổ vật & hiện vật 3D +

+ Cổ vật & hiện vật 3D

-

+

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.

@@ -43,27 +44,39 @@ export default function AntiquityPage() {
-
- {highlights.map((item) => { - const Icon = item.icon; - return ( -
- -

{item.title}

-

{item.detail}

-
- ); - })} +
+
+

Vì sao số hóa 3D

+

+ Giá trị của hiện vật số +

+
+
+ {highlights.map((item) => { + const Icon = item.icon; + return ( +
+ + + + +

{item.title}

+

{item.detail}

+
+ ); + })} +
-
-
-

Mở rộng bộ sưu tập

-

+
+
+ +

Mở rộng bộ sưu tập

+

Hiện vật từ các di tích khác đang được số hóa

-

+

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.

diff --git a/src/app/components/landing/CulturalSpaceExplorer.tsx b/src/app/components/landing/CulturalSpaceExplorer.tsx index 52b72bd..353358b 100644 --- a/src/app/components/landing/CulturalSpaceExplorer.tsx +++ b/src/app/components/landing/CulturalSpaceExplorer.tsx @@ -55,6 +55,16 @@ export function CulturalSpaceExplorer({ sites }: { sites: HeritageSite[] }) { return (
+
+

Tra cứu di tích

+

+ Tìm theo loại hình & cấp xếp hạng +

+

+ Lọc nhanh toàn bộ hệ thống di tích để chọn không gian bạn muốn khám phá. +

+
+
{/* Hàng tìm kiếm + tóm tắt kết quả */}
diff --git a/src/app/components/landing/HeritageOrnament.tsx b/src/app/components/landing/HeritageOrnament.tsx new file mode 100644 index 0000000..4640862 --- /dev/null +++ b/src/app/components/landing/HeritageOrnament.tsx @@ -0,0 +1,37 @@ +// Hệ motif "triện di sản" — dấu triện hình hoa thị (hai hình vuông lồng nhau tạo sao tám +// cánh) gợi con dấu sắc phong & hoa văn chạm khắc. Dùng làm dấu hiệu thương hiệu xuyên suốt: +// nhãn mục, đường phân cách trang trí, điểm nhấn ở hero và chân trang. Thuần SVG (server +// component), kế thừa màu qua currentColor nên đặt màu bằng class text-* ở nơi sử dụng. + +export function HeritageSeal({ className }: { className?: string }) { + return ( + + ); +} + +// Đường phân cách trang trí: dấu triện ở giữa, hai sợi chỉ vàng mảnh tan dần hai bên. +// Tĩnh, an toàn với prefers-reduced-motion; tạo nhịp nghỉ giữa các mục lớn. +export function SectionDivider({ className = "" }: { className?: string }) { + return ( + + ); +} diff --git a/src/app/components/landing/SiteFooter.tsx b/src/app/components/landing/SiteFooter.tsx index c203e73..74aa569 100644 --- a/src/app/components/landing/SiteFooter.tsx +++ b/src/app/components/landing/SiteFooter.tsx @@ -1,5 +1,6 @@ import Link from "next/link"; import { Globe2, Mail, MapPin, Phone } from "lucide-react"; +import { HeritageSeal } from "@/app/components/landing/HeritageOrnament"; import { contact, navigation } from "@/app/content"; export function SiteFooter() { diff --git a/src/app/components/landing/SiteHeader.tsx b/src/app/components/landing/SiteHeader.tsx index da6beae..6277918 100644 --- a/src/app/components/landing/SiteHeader.tsx +++ b/src/app/components/landing/SiteHeader.tsx @@ -1,9 +1,10 @@ "use client"; import Link from "next/link"; -import { Landmark, Menu, PlayCircle, X } from "lucide-react"; +import { Menu, PlayCircle, X } from "lucide-react"; import { usePathname } from "next/navigation"; import { useState } from "react"; +import { HeritageSeal } from "@/app/components/landing/HeritageOrnament"; import { activeTour, navigation } from "@/app/content"; export function SiteHeader() { @@ -19,7 +20,7 @@ export function SiteHeader() { aria-label="VR360 Di sản Như Quỳnh" > - + diff --git a/src/app/content.ts b/src/app/content.ts index 1860e1a..433dc55 100644 --- a/src/app/content.ts +++ b/src/app/content.ts @@ -149,6 +149,7 @@ export const subpageHero = { diTich: leHoi("nghi-thuc-san-chua.jpg"), diTichFeature: leHoi("kieu-long-vang.jpg"), coVat: leHoi("tru-tri-le-hoi.jpg"), + lienHe: leHoi("le-cau-an-ban-dem.jpg"), // Đêm cầu an — trầm lắng, mời gọi, hợp trang liên hệ } as const; export const navigation = [ diff --git a/src/app/di-tich/[slug]/page.tsx b/src/app/di-tich/[slug]/page.tsx index f26b316..69772e9 100644 --- a/src/app/di-tich/[slug]/page.tsx +++ b/src/app/di-tich/[slug]/page.tsx @@ -42,9 +42,9 @@ export default async function HeritageDetailPage({
- {site.name} -
- + {site.name} +
+ Tất cả di tích @@ -54,12 +54,12 @@ export default async function HeritageDetailPage({ {site.type} {site.status}
-

+

{site.name}

{site.location ? ( -

- +

+ {site.location}

) : null} @@ -68,9 +68,12 @@ export default async function HeritageDetailPage({
-
+

Về di tích

+
{paragraphs.map((text, i) => ( -

{text}

+

+ {text} +

))}
diff --git a/src/app/di-tich/page.tsx b/src/app/di-tich/page.tsx index d1a9da8..06dae0b 100644 --- a/src/app/di-tich/page.tsx +++ b/src/app/di-tich/page.tsx @@ -4,6 +4,7 @@ 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 { HeritageSeal } from "@/app/components/landing/HeritageOrnament"; import { SiteFooter } from "@/app/components/landing/SiteFooter"; import { SiteHeader } from "@/app/components/landing/SiteHeader"; import { heritageSites, subpageHero } from "@/app/content"; @@ -24,18 +25,18 @@ export default function HeritageListPage() { src={subpageHero.diTich} alt="" fill - priority + preload sizes="100vw" className="public-subpage-hero-image public-parallax-bg object-cover" /> -
+

Danh sách di tích và tour VR360

-

- Hệ thống di tích Xã Như Quỳnh +

+ Hệ thống di tích Xã Như Quỳnh

-

+

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.

@@ -50,7 +51,7 @@ export default function HeritageListPage() {
-
+
Kiệu rước dưới tán lọng vàng trong lễ hội Chùa Pháp Vân (Thái Lạc) +
-
-
-
+
+
+ +

Đề xuất địa điểm

-

- Bạn muốn đề xuất thêm địa điểm văn hóa? +

+ Bạn muốn đề xuất thêm địa điểm văn hóa?

-

+

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.

- + Liên hệ với chúng tôi diff --git a/src/app/gioi-thieu/page.tsx b/src/app/gioi-thieu/page.tsx index c674247..6ed2759 100644 --- a/src/app/gioi-thieu/page.tsx +++ b/src/app/gioi-thieu/page.tsx @@ -15,6 +15,7 @@ import { } from "lucide-react"; import { BackToTopButton } from "@/app/components/landing/BackToTopButton"; import { CountUp } from "@/app/components/landing/CountUp"; +import { HeritageSeal, SectionDivider } from "@/app/components/landing/HeritageOrnament"; import { SiteFooter } from "@/app/components/landing/SiteFooter"; import { SiteHeader } from "@/app/components/landing/SiteHeader"; import { activeTour, antiquities, heritageSites, img, subpageHero } from "@/app/content"; @@ -61,14 +62,14 @@ export default function AboutPage() {
- -
+ +

Giới thiệu

-

- Di sản văn hóa Xã Như Quỳnh +

+ Di sản văn hóa Xã Như Quỳnh

-

+

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ố.

@@ -95,13 +96,17 @@ export default function AboutPage() { {/* Stats */}
-
+
{stats.map((s) => ( -
-

+

+

-

{s.label}

+ +

{s.label}

))}
@@ -165,7 +170,8 @@ export default function AboutPage() {
{/* Featured tour CTA */} -
+
+
+ +

Điểm đến tiêu biểu

diff --git a/src/app/globals.css b/src/app/globals.css index 1511a35..42ce41d 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -315,8 +315,12 @@ a { max-width: min(15ch, 100%); } +/* Hero trang con — bản ĐIỆN ẢNH: ảnh thật chiếm sáng, phủ lớp sẫm xanh rêu để chữ ngà + nổi bật. Tạo "mảng sẫm" tương phản với thân trang sáng, cảm giác triển lãm cao cấp. */ .public-subpage-hero { min-height: min(760px, calc(100dvh - 72px)); + background: #0a261d; + color: #f3ecdd; } .public-subpage-hero--compact { @@ -324,8 +328,30 @@ a { } .public-subpage-hero-image { - opacity: 0.62; - filter: saturate(1.08) contrast(1.05) brightness(1.02); + opacity: 0.96; + filter: saturate(1.12) contrast(1.06) brightness(0.86); +} + +/* Trong hero điện ảnh: nhãn triện sáng hơn, chữ phụ màu ngà mờ. */ +.public-subpage-hero .public-kicker { + color: var(--tour-gold-light); +} + +.public-subpage-hero .public-kicker::before { + border-color: color-mix(in oklab, var(--tour-gold-light) 70%, transparent); + background: radial-gradient(circle, var(--tour-gold-light) 0 26%, transparent 30%); +} + +.public-subpage-hero .public-chip { + border-color: rgb(224 207 159 / 0.32); + background: rgb(10 38 29 / 0.5); + color: #f3ecdd; + -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(8px); +} + +.public-subpage-hero .public-chip svg { + color: var(--tour-gold-light); } .public-subpage-hero::before, @@ -339,16 +365,29 @@ a { .public-subpage-hero::before { z-index: 1; background: - radial-gradient(ellipse at 24% 48%, rgb(243 247 240 / 0.98) 0%, rgb(243 247 240 / 0.88) 36%, rgb(243 247 240 / 0.48) 58%, transparent 78%), - linear-gradient(90deg, rgb(243 247 240 / 0.98) 0%, rgb(243 247 240 / 0.9) 40%, rgb(243 247 240 / 0.36) 72%, rgb(243 247 240 / 0.12) 100%), - linear-gradient(180deg, rgb(243 247 240 / 0.18), rgb(243 247 240 / 0.96) 100%); + linear-gradient(90deg, rgb(7 25 19 / 0.94) 0%, rgb(8 30 23 / 0.78) 34%, rgb(9 34 26 / 0.32) 66%, transparent 100%), + linear-gradient(0deg, rgb(6 22 16 / 0.88) 0%, rgb(7 26 20 / 0.34) 38%, transparent 66%), + radial-gradient(125% 130% at 28% 26%, transparent 38%, rgb(5 19 14 / 0.62) 100%); } +/* Mép dưới hòa nhẹ vào thân trang sáng + một sợi chỉ vàng mảnh phân tách tinh tế. */ .public-subpage-hero::after { z-index: 2; inset: auto 0 0 0; - height: 44%; - background: linear-gradient(180deg, transparent, rgb(243 247 240 / 0.98)); + height: 30%; + background: linear-gradient(180deg, transparent 0%, transparent 58%, rgb(243 247 240 / 0.14) 86%, rgb(243 247 240 / 0.32) 100%); +} + +.public-subpage-hero .public-subpage-copy { + color: rgb(243 236 221 / 0.84); +} + +.public-subpage-hero .public-hero-rule::before { + background: linear-gradient(90deg, transparent, rgb(224 207 159 / 0.5), transparent); +} + +.public-subpage-hero .public-hero-rule::after { + background: linear-gradient(90deg, rgb(224 207 159 / 0.46), rgb(141 146 118 / 0.32), transparent); } .public-subpage-hero-content { @@ -562,13 +601,13 @@ a { @media (max-width: 640px) { .public-subpage-hero-image { - opacity: 0.44; + opacity: 0.9; } .public-subpage-hero::before { background: - linear-gradient(180deg, rgb(243 247 240 / 0.84) 0%, rgb(243 247 240 / 0.78) 52%, rgb(243 247 240 / 0.96) 100%), - linear-gradient(90deg, rgb(243 247 240 / 0.94), rgb(243 247 240 / 0.64)); + linear-gradient(180deg, rgb(7 25 19 / 0.46) 0%, rgb(7 25 19 / 0.34) 30%, rgb(6 22 16 / 0.82) 100%), + linear-gradient(90deg, rgb(7 25 19 / 0.6), rgb(7 25 19 / 0.28) 80%); } } @@ -850,12 +889,44 @@ a { transform: translateX(22%); } +/* Nhãn "triện di sản" — thay cho eyebrow chữ hoa lặp lại (vốn là dấu hiệu AI rõ rệt). + Một dấu triện vàng hình thoi + chữ thường, đọc như bảng tên hiện vật trong bảo tàng; + là một thành tố thương hiệu CÓ CHỦ ĐÍCH, không phải khung sườn phản xạ. */ .public-kicker { + display: inline-flex; + align-items: center; + gap: 0.6rem; color: var(--primary); font-size: 0.8rem; - font-weight: 700; - letter-spacing: 0; - text-transform: uppercase; + font-weight: 800; + letter-spacing: 0.005em; + line-height: 1.25; + text-transform: none; +} + +.public-kicker::before { + content: ""; + flex: 0 0 auto; + width: 0.82rem; + height: 0.82rem; + transform: rotate(45deg); + border: 1.5px solid color-mix(in oklab, var(--primary) 70%, transparent); + border-radius: 2px; + background: radial-gradient(circle, var(--primary) 0 26%, transparent 30%); +} + +.public-kicker--center { + justify-content: center; +} + +/* Trên nền sẫm (panel điện ảnh, CTA tối): nhãn triện chuyển sang vàng sáng cho dễ đọc. */ +.public-on-dark .public-kicker { + color: var(--tour-gold-light); +} + +.public-on-dark .public-kicker::before { + border-color: color-mix(in oklab, var(--tour-gold-light) 70%, transparent); + background: radial-gradient(circle, var(--tour-gold-light) 0 26%, transparent 30%); } .public-cta, @@ -978,13 +1049,29 @@ a { padding-top: 0.9rem; } +/* Tiêu đề hiển thị: màu mực xanh rêu đậm ĐẶC (bỏ gradient-clip để tránh "tell" AI và + tăng tương phản, độ nét). Nhấn nhá chuyển sang từ điểm nhấn .public-display-accent. */ .public-gradient-text { - color: transparent; - background: linear-gradient(90deg, #0e3427, #8e5f0b 54%, #245f4b); - background-size: 180% 100%; - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; + color: var(--tour-ink); +} + +/* Từ/cụm nhấn trong tiêu đề: serif nghiêng, màu vàng đồng — sang, có nhịp, đặc một màu. */ +.public-display-accent { + color: var(--primary); + font-style: italic; + font-weight: 600; +} + +/* Tiêu đề hero trên nền ảnh sẫm (điện ảnh): chữ sáng ngà, viền sáng nhẹ cho dễ đọc. */ +.public-hero-display { + color: #f8f1e2; + font-family: var(--font-serif); + letter-spacing: -0.02em; + text-shadow: 0 1px 28px rgb(6 22 16 / 0.5); +} + +.public-hero-display .public-display-accent { + color: var(--tour-gold-light); } .public-shimmer::after { diff --git a/src/app/lien-he/page.tsx b/src/app/lien-he/page.tsx index 498adce..da36d8d 100644 --- a/src/app/lien-he/page.tsx +++ b/src/app/lien-he/page.tsx @@ -1,9 +1,11 @@ import type { Metadata } from "next"; +import Image from "next/image"; import { Clock, Globe2, ImagePlus, Landmark, MapPin, MessageSquareText, Phone, Send } from "lucide-react"; 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 { contact } from "@/app/content"; +import { contact, subpageHero } from "@/app/content"; export const metadata: Metadata = { title: "Liên hệ | VR360 Như Quỳnh", @@ -28,16 +30,19 @@ export default function ContactPage() {
-
-
-

Liên hệ

-

- Liên hệ & đóng góp tư liệu -

-

- Người dân, tổ chức có tư liệu, hình ảnh hoặc câu chuyện về các di tích của Xã Như Quỳnh - vui lòng liên hệ để cùng hoàn thiện kho dữ liệu số di sản. -

+
+ +
+
+

Liên hệ

+

+ Liên hệ & đóng góp tư liệu +

+

+ Người dân, tổ chức có tư liệu, hình ảnh hoặc câu chuyện về các di tích của Xã Như Quỳnh + vui lòng liên hệ để cùng hoàn thiện kho dữ liệu số di sản. +

+
@@ -116,6 +121,15 @@ export default function ContactPage() { {/* Map */}
+
+ +
+

Vị trí trên bản đồ

+

+ {contact.address} +

+
+