tuyenio
e081f54bd4
- 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.
149 lines
7.6 KiB
TypeScript
149 lines
7.6 KiB
TypeScript
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, subpageHero } from "@/app/content";
|
|
|
|
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, tỉnh Hưng Yên.",
|
|
};
|
|
|
|
const contacts = [
|
|
{ icon: MapPin, label: "Địa chỉ", value: contact.address, href: undefined, external: false },
|
|
{ icon: Phone, label: "Điện thoại", value: contact.phone, href: contact.phoneHref, external: false },
|
|
{ icon: Globe2, label: "Cổng thông tin", value: contact.websiteLabel, href: contact.website, external: true },
|
|
{ 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", href: undefined, external: false },
|
|
];
|
|
|
|
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() {
|
|
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={subpageHero.lienHe} 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">Liên hệ</p>
|
|
<h1 className="public-hero-display public-heading-safe mt-5 text-[clamp(2.2rem,5vw,4.2rem)] font-extrabold">
|
|
Liên hệ & <span className="public-display-accent">đóng góp tư liệu</span>
|
|
</h1>
|
|
<p className="public-subpage-copy mt-6 max-w-[58ch] text-base leading-8 sm:text-lg">
|
|
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.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:grid lg:grid-cols-[0.56fr_0.44fr] lg:gap-8 lg:py-16">
|
|
{/* Contribution guidance */}
|
|
<div>
|
|
<h2 className="public-display public-heading-safe text-2xl font-bold text-[var(--tour-ink)] sm:text-3xl">
|
|
Cách đóng góp tư liệu
|
|
</h2>
|
|
<ol className="mt-6 grid gap-4">
|
|
{steps.map((step, index) => {
|
|
const Icon = step.icon;
|
|
return (
|
|
<li key={step.title} className="public-panel public-stagger-item flex items-start gap-4 rounded-[14px] p-5">
|
|
<span className="grid h-11 w-11 shrink-0 place-items-center rounded-[10px] bg-[rgb(200_164_106_/_0.14)]">
|
|
<Icon className="h-5 w-5 text-[var(--primary)]" strokeWidth={1.8} />
|
|
</span>
|
|
<span>
|
|
<span className="flex items-center gap-2">
|
|
<span className="font-display-vn text-xs font-extrabold tracking-[0.18em] text-[var(--primary)]">
|
|
{String(index + 1).padStart(2, "0")}
|
|
</span>
|
|
<span className="text-base font-bold text-[var(--tour-ink)]">{step.title}</span>
|
|
</span>
|
|
<span className="mt-1 block text-sm leading-6 text-[var(--muted-foreground)]">{step.detail}</span>
|
|
</span>
|
|
</li>
|
|
);
|
|
})}
|
|
</ol>
|
|
</div>
|
|
|
|
{/* Contact cards */}
|
|
<div className="mt-8 lg:mt-0">
|
|
<h2 className="public-display public-heading-safe text-2xl font-bold text-[var(--tour-ink)] sm:text-3xl">
|
|
Thông tin liên hệ
|
|
</h2>
|
|
<div className="mt-6 grid gap-3">
|
|
{contacts.map((c) => {
|
|
const Icon = c.icon;
|
|
const inner = (
|
|
<>
|
|
<span className="grid h-11 w-11 shrink-0 place-items-center rounded-full bg-[rgb(200_164_106_/_0.18)]">
|
|
<Icon className="h-5 w-5 text-[var(--primary)]" strokeWidth={1.8} />
|
|
</span>
|
|
<span className="min-w-0">
|
|
<span className="block text-xs font-bold uppercase tracking-[0.1em] text-[var(--muted-foreground)]">{c.label}</span>
|
|
<span className="block break-words text-base font-semibold text-[var(--tour-ink)]">{c.value}</span>
|
|
</span>
|
|
</>
|
|
);
|
|
const base = "public-panel flex items-center gap-4 rounded-[14px] p-5";
|
|
return c.href ? (
|
|
<a
|
|
key={c.label}
|
|
href={c.href}
|
|
target={c.external ? "_blank" : undefined}
|
|
rel={c.external ? "noopener noreferrer" : undefined}
|
|
className={`${base} group transition hover:-translate-y-0.5`}
|
|
>
|
|
{inner}
|
|
</a>
|
|
) : (
|
|
<div key={c.label} className={base}>
|
|
{inner}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
<p className="mt-4 inline-flex items-start gap-2 text-xs leading-5 text-[var(--muted-foreground)]">
|
|
<Send className="mt-0.5 h-3.5 w-3.5 shrink-0 text-[var(--primary)]" strokeWidth={1.8} />
|
|
Mọi thông tin, hình ảnh và tư liệu đóng góp xin gửi về Ủy ban nhân dân Xã Như Quỳnh theo địa chỉ và số điện thoại trên.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Map */}
|
|
<section className="mx-auto max-w-7xl px-4 pb-16 sm:px-6 lg:pb-24">
|
|
<div className="mb-6 flex items-center gap-4">
|
|
<HeritageSeal className="h-8 w-8 shrink-0 text-[var(--primary)] opacity-80" />
|
|
<div>
|
|
<p className="public-kicker">Vị trí trên bản đồ</p>
|
|
<h2 className="public-display public-heading-safe mt-1.5 text-xl font-bold text-[var(--tour-ink)] sm:text-2xl">
|
|
{contact.address}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div className="public-map-frame overflow-hidden rounded-[16px] border border-[var(--surface-border)]">
|
|
<iframe
|
|
title="Bản đồ Thôn Đình Dù, Xã Như Quỳnh, tỉnh Hưng Yên"
|
|
src={`https://www.google.com/maps?q=${encodeURIComponent(contact.address)}&output=embed`}
|
|
loading="lazy"
|
|
referrerPolicy="no-referrer-when-downgrade"
|
|
className="h-[360px] w-full sm:h-[440px]"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<SiteFooter />
|
|
<BackToTopButton />
|
|
</main>
|
|
);
|
|
}
|