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:
@@ -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
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user