From 25772c9c25916b780a50c32d2c149aa74cf4b5b3 Mon Sep 17 00:00:00 2001 From: tuyenio Date: Tue, 23 Jun 2026 15:07:03 +0700 Subject: [PATCH] =?UTF-8?q?feat:=20redesign=20landing=20pages=20=E2=80=94?= =?UTF-8?q?=20b=E1=BB=91=20c=E1=BB=A5c=20gi=C3=A0u=20h=C6=A1n,=20m=C6=B0?= =?UTF-8?q?=E1=BB=A3t=20&=20cao=20c=E1=BA=A5p=20h=C6=A1n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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) --- src/app/gioi-thieu/page.tsx | 155 +++++++++++++++++++++++++++++++++--- src/app/globals.css | 10 +-- src/app/lien-he/page.tsx | 114 ++++++++++++++++++++------ src/app/page.tsx | 90 ++++++++++++++++----- 4 files changed, 308 insertions(+), 61 deletions(-) diff --git a/src/app/gioi-thieu/page.tsx b/src/app/gioi-thieu/page.tsx index 3d4285b..170554b 100644 --- a/src/app/gioi-thieu/page.tsx +++ b/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 (
@@ -34,34 +62,139 @@ export default function AboutPage() {
-
+

Giới thiệu

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

-
-
+ {/* Intro — bố cục bất đối xứng: nhãn dính bên trái, nội dung bên phải */} +
+
+

Về vùng đất

+

+ Nơi lịch sử và tín ngưỡng cùng hội tụ +

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

{text}

+

+ {text} +

))}
+ {/* Stats */}
-
+
{stats.map((s) => ( -
-

{s.value}

-

{s.label}

+
+

+ {s.value} +

+

{s.label}

))}
+ {/* Heritage values */} +
+
+

Giá trị di sản

+

+ Bốn lớp giá trị được gìn giữ +

+
+
+ {values.map((value, index) => { + const Icon = value.icon; + return ( +
+ + + +

{value.title}

+

{value.detail}

+
+ ); + })} +
+
+ + {/* Digitization journey */} +
+
+
+

Hành trình số hóa

+

+ Từ tư liệu đến trải nghiệm số +

+
+
    + {steps.map((step, index) => { + const Icon = step.icon; + return ( +
  1. + + {String(index + 1).padStart(2, "0")} + + +

    {step.title}

    +

    {step.detail}

    +
    2. + ); + })} +
+
+
+ + {/* Featured tour CTA */} +
+
+
+ Chùa Thái Lạc (Pháp Vân tự) +
+
+

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

+

+ {activeTour.title} +

+

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

+
+ + + Tham quan VR360 + + + Xem cổ vật 3D + + +
+
+
+
+
diff --git a/src/app/globals.css b/src/app/globals.css index 82fe3af..30bfe01 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -890,7 +890,7 @@ a { background: linear-gradient(180deg, rgb(35 95 74), rgb(13 55 41)), #123a2c; - color: var(--primary-foreground); + color: #f7f0e0; box-shadow: 0 18px 44px rgb(14 52 39 / 0.22), inset 0 1px 0 rgb(255 255 255 / 0.2), @@ -960,17 +960,17 @@ a { .public-cta-secondary { border: 1px solid rgb(14 52 39 / 0.18); - background: rgb(255 255 255 / 0.78); - color: var(--tour-ink); + background: rgb(255 255 255 / 0.82); + color: var(--ink-on-light); box-shadow: 0 14px 32px rgb(37 75 54 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.82); } .public-cta-secondary:hover { - background: var(--surface-glass-strong); + background: rgb(255 255 255 / 0.95); transform: translateY(-2px); - border-color: rgb(142 95 11 / 0.28); + border-color: rgb(142 95 11 / 0.4); box-shadow: 0 18px 40px rgb(37 75 54 / 0.12), inset 0 1px 0 rgb(255 255 255 / 0.92); diff --git a/src/app/lien-he/page.tsx b/src/app/lien-he/page.tsx index 106f05e..4e24306 100644 --- a/src/app/lien-he/page.tsx +++ b/src/app/lien-he/page.tsx @@ -1,18 +1,25 @@ import type { Metadata } from "next"; -import { MapPin, Mail, Phone } from "lucide-react"; +import { Clock, ImagePlus, Landmark, Mail, MapPin, MessageSquareText, Phone, Send } from "lucide-react"; import { BackToTopButton } from "@/app/components/landing/BackToTopButton"; import { SiteFooter } from "@/app/components/landing/SiteFooter"; import { SiteHeader } from "@/app/components/landing/SiteHeader"; export const metadata: Metadata = { title: "Liên hệ | VR360 Như Quỳnh", - description: "Thông tin liên hệ và đầu mối cung cấp tư liệu cho dự án số hóa di sản Xã Như Quỳnh.", + description: "Thông tin liên hệ và đầu mối cung cấp tư liệu cho dự án số hóa di sản Xã Như Quỳnh, tỉnh Hưng Yên.", }; const contacts = [ { icon: MapPin, label: "Địa chỉ", value: "Xã Như Quỳnh, tỉnh Hưng Yên" }, { icon: Phone, label: "Điện thoại", value: "Đang cập nhật" }, { icon: Mail, label: "Email", value: "Đang cập nhật" }, + { icon: Clock, label: "Thời gian tiếp nhận", value: "Trong giờ hành chính các ngày làm việc" }, +]; + +const steps = [ + { icon: MessageSquareText, title: "Gửi thông tin", detail: "Mô tả ngắn về di tích, cổ vật hoặc câu chuyện bạn muốn đóng góp." }, + { icon: ImagePlus, title: "Kèm hình ảnh, tư liệu", detail: "Hình ảnh, tài liệu hoặc nguồn tham khảo giúp xác minh và biên tập nội dung." }, + { icon: Landmark, title: "Cùng hoàn thiện", detail: "Ban quản lý sẽ rà soát, đối chiếu và đưa nội dung phù hợp lên nền tảng số." }, ]; export default function ContactPage() { @@ -20,31 +27,86 @@ 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. +

+
+
-
- {contacts.map((c) => { - const Icon = c.icon; - return ( -
- - - - - {c.label} - {c.value} - -
- ); - })} +
+ {/* Contribution guidance */} +
+

+ Cách đóng góp tư liệu +

+
    + {steps.map((step, index) => { + const Icon = step.icon; + return ( +
  1. + + + + + + + {String(index + 1).padStart(2, "0")} + + {step.title} + + {step.detail} + +
    2. + ); + })} +
+
+ + {/* Contact cards */} +
+

+ Thông tin liên hệ +

+
+ {contacts.map((c) => { + const Icon = c.icon; + return ( +
+ + + + + {c.label} + {c.value} + +
+ ); + })} +
+

+ + Thông tin số điện thoại và email chính thức sẽ được cập nhật khi sẵn sàng. +

+
+
+ + {/* Map */} +
+
+