1

app/components/home/GallerySection.tsx

@@ -1,5 +1,8 @@
 "use client";
 
+import Link from "next/link";
+import { useTranslation } from "@/app/hooks/useTranslation";
+
 const BASE = process.env.NEXT_PUBLIC_BASE_PATH || "";
 
 type GalleryItem = {
@@ -32,6 +35,10 @@ const heightClass: Record<string, string> = {
 };
 
 export default function GallerySection({ data }: Props) {
+  const { lang } = useTranslation();
+  const isVi = lang === "vi";
+  const btnLabel = isVi ? "Xem Toàn Bộ Thư Viện" : "View Full Event Gallery";
+
   return (
     <section
       className="py-16 lg:py-32 max-w-hd mx-auto px-[var(--spacing-gutter)]"
@@ -52,7 +59,7 @@ export default function GallerySection({ data }: Props) {
 
       {/* Grid masonry-style */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6">
-        {data.items.map((item, i) => (
+        {data.items.slice(0, 6).map((item, i) => (
           <div
             key={i}
             className={[
@@ -75,6 +82,17 @@ export default function GallerySection({ data }: Props) {
           </div>
         ))}
       </div>
+
+      {/* Button to full gallery */}
+      <div className="flex justify-center mt-12 lg:mt-16">
+        <Link
+          href="/gallery"
+          className="inline-flex items-center gap-2 gold-gradient-bg text-on-primary px-8 py-4 font-[var(--font-body-base)] text-sm lg:text-base font-bold uppercase tracking-wider rounded-xl hover:scale-105 active:scale-95 transition-all duration-300 shadow-xl shadow-primary/20 hover:shadow-primary/30"
+        >
+          <span>{btnLabel}</span>
+          <span className="material-symbols-outlined text-sm font-bold">arrow_forward</span>
+        </Link>
+      </div>
     </section>
   );
 }