fix: gỡ đường hairline đè nút CTA hero + marquee di tích cuộn liên tục

- Tắt đường trang trí .public-hero-inner (đè ngang nút "Khám phá ngay/Tìm hiểu dự án")
- Marquee tên di tích: vòng lặp khép kín phải→trái (track <ul> reset, dịch -50%),
  tên bấm được mở trang chi tiết, rê chuột để tạm dừng; tôn trọng prefers-reduced-motion

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
tuyenio
2026-06-23 16:10:16 +07:00
parent dd6dadaa55
commit 224166f1d4
2 changed files with 32 additions and 17 deletions
+26 -15
View File
@@ -1,27 +1,38 @@
import Link from "next/link";
import { heritageSites } from "@/app/content"; import { heritageSites } from "@/app/content";
// Dải tên di tích chạy ngang liên tục, gợi bề dày của hệ thống di sản. // Dải tên di tích cuộn liên tục từ phải sang trái (vòng lặp khép kín).
// Lặp danh sách 2 lần để vòng lặp khép kín; dừng khi prefers-reduced-motion. // Danh sách được lặp 2 lần và track dịch -50% -> điểm nối trùng khít, không giật.
// Rê chuột để tạm dừng và bấm vào tên để mở trang chi tiết.
export function HeritageMarquee() { export function HeritageMarquee() {
const names = heritageSites.map((site) => site.name); const loop = [...heritageSites, ...heritageSites];
const loop = [...names, ...names];
return ( return (
<section <section
className="border-y border-[var(--surface-border)] bg-[var(--surface-band)] py-6" className="relative border-y border-[var(--surface-border)] bg-[var(--surface-band)] py-7"
aria-label="Hệ thống di tích Xã Như Quỳnh" aria-label="Hệ thống di tích Xã Như Quỳnh"
> >
<div className="heritage-marquee"> <div className="heritage-marquee">
<div className="heritage-marquee-track"> <ul className="heritage-marquee-track">
{loop.map((name, index) => ( {loop.map((site, index) => {
<span key={index} className="flex items-center" aria-hidden={index >= names.length}> const duplicate = index >= heritageSites.length;
<span className="public-display text-lg font-semibold text-[var(--tour-ink)]/85 sm:text-xl"> return (
{name} <li key={index} className="flex items-center" aria-hidden={duplicate}>
</span> <Link
<span className="mx-7 inline-block h-1.5 w-1.5 rotate-45 bg-[var(--primary)]/70" /> href={site.detailUrl}
</span> tabIndex={duplicate ? -1 : 0}
))} className="public-display text-lg font-semibold text-[var(--tour-ink)]/80 transition-colors duration-500 hover:text-[var(--primary)] sm:text-xl"
</div> >
{site.name}
</Link>
<span
aria-hidden="true"
className="mx-7 inline-block h-1.5 w-1.5 rotate-45 bg-[var(--primary)]/70"
/>
</li>
);
})}
</ul>
</div> </div>
</section> </section>
); );
+6 -2
View File
@@ -292,7 +292,7 @@ a {
.public-hero-inner::before, .public-hero-inner::before,
.public-hero-inner::after { .public-hero-inner::after {
content: ""; content: none; /* gỡ đường hairline trang trí (đè lên nút CTA) */
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
} }
@@ -1423,14 +1423,18 @@ a {
.heritage-marquee-track { .heritage-marquee-track {
display: inline-flex; display: inline-flex;
width: max-content; width: max-content;
margin: 0;
padding: 0;
list-style: none;
align-items: center; align-items: center;
white-space: nowrap; white-space: nowrap;
will-change: transform; will-change: transform;
transform: translate3d(0, 0, 0);
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
.heritage-marquee-track { .heritage-marquee-track {
animation: heritage-marquee 46s linear infinite; animation: heritage-marquee 42s linear infinite;
} }
.heritage-marquee:hover .heritage-marquee-track { .heritage-marquee:hover .heritage-marquee-track {