Update application features and add scripts (core changes)

app/[locale]/galeri/page.tsx

@@ -6,68 +6,34 @@ import Image from 'next/image'
 import BougainvilleaMotif from '@/components/BougainvilleaMotif'
 import { useTranslations } from 'next-intl'
 import { X } from 'lucide-react'
+import openinaryLoader from '@/lib/openinary-loader'
 
 export default function GalleryPage() {
   const t = useTranslations('gallery')
-  const [activeFilter, setActiveFilter] = useState('all')
   const [selectedImage, setSelectedImage] = useState<string | null>(null)
 
-  const filters = [
-    { id: 'all', label: t('filters.all') },
-    { id: 'rooms', label: t('filters.rooms') },
-    { id: 'exterior', label: t('filters.exterior') },
-    { id: 'view', label: t('filters.view') },
-    { id: 'balcony', label: t('filters.balcony') },
+  const galleryImages = [
+    'DSC01477.jpg',
+    'DSC01478.jpg',
+    'DSC01479.jpg',
+    'DSC01480.jpg',
+    'DSC01481.jpg',
+    'DSC01482.jpg',
+    'DSC01483.jpg',
+    'DSC01487.jpg',
+    'DSC01535.jpg',
+    'DSC01544.jpg',
+    'DSC01554.jpg',
+    'DSC01560.jpg',
+    'DSC01563.jpg'
   ]
 
-  const galleryItems = [
-    {
-      id: 1,
-      category: 'rooms',
-      title: t('items.1'),
-      src: 'https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?auto=format&fit=crop&q=80',
-      colSpan: 'col-span-1',
-    },
-    {
-      id: 2,
-      category: 'exterior',
-      title: t('items.2'),
-      src: 'https://images.unsplash.com/photo-1596394516093-501ba68a0ba6?auto=format&fit=crop&q=80',
-      colSpan: 'col-span-1 md:col-span-2 lg:col-span-1',
-    },
-    {
-      id: 3,
-      category: 'view',
-      title: t('items.3'),
-      src: 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&q=80',
-      colSpan: 'col-span-1',
-    },
-    {
-      id: 4,
-      category: 'balcony',
-      title: t('items.4'),
-      src: 'https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?auto=format&fit=crop&q=80',
-      colSpan: 'col-span-1 md:col-span-2',
-    },
-    {
-      id: 5,
-      category: 'rooms',
-      title: t('items.5'),
-      src: 'https://images.unsplash.com/photo-1631049307264-da0ec9d70304?auto=format&fit=crop&q=80',
-      colSpan: 'col-span-1',
-    },
-    {
-      id: 6,
-      category: 'view',
-      title: t('items.6'),
-      src: 'https://images.unsplash.com/photo-1582719508461-905c673771fd?auto=format&fit=crop&q=80',
-      colSpan: 'col-span-1 md:col-span-2 lg:col-span-1',
-    },
-  ]
-
-  const filteredItems = galleryItems.filter(item => 
-    activeFilter === 'all' || item.category === activeFilter
-  )
+  const galleryItems = galleryImages.map((file, idx) => ({
+    id: idx + 1,
+    title: t('items.' + ((idx % 6) + 1)), // Use existing translations just to not break them
+    src: `https://media.ayris.tech/t/starapart/gallery/${file}`,
+    colSpan: idx % 4 === 1 ? 'col-span-1 md:col-span-2 lg:col-span-1' : 'col-span-1'
+  }))
 
   return (
     <div className="bg-background min-h-screen text-on-surface pt-32 pb-section-gap container mx-auto px-4">
@@ -84,27 +50,10 @@ export default function GalleryPage() {
         </p>
       </header>
 
-      {/* Filter Bar */}
-      <div className="flex flex-wrap items-center gap-4 mb-12">
-        {filters.map((filter) => (
-          <button
-            key={filter.id}
-            onClick={() => setActiveFilter(filter.id)}
-            className={`px-6 py-2 rounded-full font-sans font-bold text-[14px] uppercase tracking-wider transition-all duration-300 border-2 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
-              activeFilter === filter.id
-                ? 'border-primary text-primary bg-primary/10'
-                : 'border-transparent text-secondary hover:border-primary/30'
-            }`}
-          >
-            {filter.label}
-          </button>
-        ))}
-      </div>
-
       {/* Masonry-like Grid */}
       <motion.div layout className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         <AnimatePresence>
-          {filteredItems.map((item) => (
+          {galleryItems.map((item) => (
             <motion.div
               key={item.id}
               layout
@@ -127,14 +76,10 @@ export default function GalleryPage() {
                   src={item.src}
                   alt={item.title}
                   fill
+                  loader={openinaryLoader}
                   sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                   className="object-cover transform group-hover:scale-105 transition-transform duration-700"
                 />
-                <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
-                  <span className="text-white font-serif text-[24px] font-medium drop-shadow-md">
-                    {item.title}
-                  </span>
-                </div>
               </div>
             </motion.div>
           ))}
@@ -169,6 +114,7 @@ export default function GalleryPage() {
                 src={selectedImage} 
                 alt="Enlarged view" 
                 fill 
+                loader={openinaryLoader}
                 className="object-contain"
                 sizes="100vw"
                 quality={90}