96dc23b74b
- Convert all 40+ public/images/figma assets from raw PNG/JPG to WebP at max 1920px, 82% quality: 397 MB → 13 MB total (96.7% reduction) - Update all component image references to .webp - Add 1-year Cache-Control headers for /images/* and /_next/static/* - Fix GallerySlider initial scroll offset (first card no longer clipped by mask) - Fix arrow2.svg missing explicit width/height (Lighthouse unsized-images) - Hero, LocationsSlider: aspect-ratio height + seamless infinite loop (prior session) - Add drizzle-kit to dependencies for production schema push (prior session) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
56 lines
2.5 KiB
TypeScript
56 lines
2.5 KiB
TypeScript
import { GallerySlider } from './GallerySlider'
|
|
import type { GalleryImage } from './GallerySlider'
|
|
import type { HomePageGalleryImage, Media } from '@/types/globals'
|
|
|
|
function getMediaUrl(img: Media | string | null | undefined): string | null {
|
|
if (!img) return null
|
|
if (typeof img === 'string') return img
|
|
return img.url ?? null
|
|
}
|
|
|
|
const STATIC_IMAGES: GalleryImage[] = [
|
|
{ src: '/images/figma/gallery-1.webp', alt: 'Шуміленд — фото 1', width: 320, height: 420, radius: 20 },
|
|
{ src: '/images/figma/why-parents-1.webp', alt: 'Шуміленд — сімейні враження', width: 380, height: 420, radius: 20 },
|
|
{ src: '/images/figma/gallery-2.webp', alt: 'Шуміленд — фото 2', width: 320, height: 420, radius: 20 },
|
|
{ src: '/images/figma/gallery-3.webp', alt: 'Шуміленд — фото 3', width: 380, height: 420, radius: 20 },
|
|
{ src: '/images/figma/why-parents-2.webp', alt: 'Шуміленд — прогулянка', width: 320, height: 420, radius: 20 },
|
|
{ src: '/images/figma/gallery-4.webp', alt: 'Шуміленд — фото 4', width: 380, height: 420, radius: 20 },
|
|
{ src: '/images/figma/gallery-6.webp', alt: 'Шуміленд — атракціони', width: 320, height: 420, radius: 20 },
|
|
{ src: '/images/figma/gallery-7.webp', alt: 'Шуміленд — фото 5', width: 380, height: 420, radius: 20 },
|
|
{ src: '/images/figma/gallery-8.webp', alt: 'Шуміленд — фото 6', width: 320, height: 420, radius: 20 },
|
|
]
|
|
|
|
interface GalleryProps {
|
|
images?: HomePageGalleryImage[]
|
|
title?: string
|
|
}
|
|
|
|
export function Gallery({ images, title }: GalleryProps) {
|
|
const items: GalleryImage[] =
|
|
images && images.length > 0
|
|
? images.map((img, i) => ({
|
|
src: getMediaUrl(img.image) ?? '/images/figma/gallery-1.webp',
|
|
alt: img.alt ?? `Шуміленд — фото ${i + 1}`,
|
|
width: i % 2 === 0 ? 320 : 380,
|
|
height: 420,
|
|
radius: 20,
|
|
}))
|
|
: STATIC_IMAGES
|
|
|
|
return (
|
|
<section className="py-[20px] md:py-[60px] lg:py-[40px]">
|
|
<div className="mx-auto mb-[40px] max-w-[1204px] px-8 md:mb-[60px]">
|
|
<h2
|
|
className="text-[24px] font-bold text-[#272727] uppercase md:text-[32px]"
|
|
style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
|
|
>
|
|
{title ?? 'Фотогалерея'}
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="relative mx-auto max-w-[1204px] px-8">
|
|
<GallerySlider images={items} speed={60} />
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|