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/di-tich/[slug]/page.tsx

@@ -42,9 +42,9 @@ export default async function HeritageDetailPage({
       <SiteHeader />
 
       <section className="public-subpage-hero relative isolate overflow-hidden border-b border-[var(--surface-border)]">
-        <Image src={site.image} alt={site.name} 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">
-          <Link href="/di-tich" className="inline-flex items-center gap-2 text-sm font-bold text-[var(--tour-ink)] transition hover:text-[var(--primary)]">
+        <Image src={site.image} alt={site.name} fill preload sizes="100vw" className="public-subpage-hero-image public-parallax-bg object-cover" />
+        <div className="public-subpage-hero-content mx-auto flex min-h-[inherit] max-w-7xl flex-col justify-end px-4 py-16 sm:px-6 lg:py-22">
+          <Link href="/di-tich" className="inline-flex w-fit items-center gap-2 text-sm font-bold text-[rgb(243_236_221_/_0.86)] transition hover:text-[var(--tour-gold-light)]">
             <ArrowLeft className="h-4 w-4" strokeWidth={1.8} />
             Tất cả di tích
           </Link>
@@ -54,12 +54,12 @@ export default async function HeritageDetailPage({
               <span className="public-chip">{site.type}</span>
               <span className="public-chip">{site.status}</span>
             </div>
-            <h1 className="public-gradient-text public-heading-safe mt-4 text-[clamp(2.4rem,5.4vw,4.6rem)] font-extrabold">
+            <h1 className="public-hero-display public-heading-safe mt-5 text-[clamp(2.4rem,5.4vw,4.6rem)] font-extrabold">
               {site.name}
             </h1>
             {site.location ? (
-              <p className="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-[var(--foreground)]/82">
-                <MapPin className="h-4 w-4 text-[var(--primary)]" strokeWidth={1.8} />
+              <p className="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-[rgb(243_236_221_/_0.86)]">
+                <MapPin className="h-4 w-4 text-[var(--tour-gold-light)]" strokeWidth={1.8} />
                 {site.location}
               </p>
             ) : null}
@@ -68,9 +68,12 @@ export default async function HeritageDetailPage({
       </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">
+        <p className="public-kicker">Về di tích</p>
+        <div className="mt-5 grid gap-5 text-base leading-8 text-[var(--foreground)]/82">
           {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>