website/app/gallery/page.tsx

// app/gallery/page.tsx

import fs from 'fs';
import path from 'path';
import sharp from 'sharp';
import PhotoGallery from '@/app/components/PhotoGallery';

async function getImages() {
    const galleryDir = path.join(process.cwd(), 'public/gallery');
    const files = fs.readdirSync(galleryDir);
    const imagePromises = files
        .filter((file) => file.match(/\.(jpg|jpeg|png)$/i))
        .map(async (file) => {
            const filePath = path.join(galleryDir, file);
            const metadata = await sharp(filePath).metadata();
            return {
                src: `/gallery/${file}`,
                width: metadata.width || 1000,
                height: metadata.height || 1000,
                name: file,
            };
        });
    return Promise.all(imagePromises);
}

export default async function GalleryPage() {
    const images = await getImages();

    return (
        <main className="flex flex-col flex-1 relative bg-slate-50 dark:bg-[#0d1117] overflow-hidden transition-colors duration-300">

            {/* 1. Background Ambient Glow */}
            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-150 h-150 bg-[#84c0a0]/10 blur-[150px] rounded-full pointer-events-none z-0"></div>

            <div className="h-25 shrink-0"></div>

            {/* 2. Modernized Header */}
            <section className="relative z-10 flex flex-col justify-center items-center py-20 px-6">
                <div className="text-center">
                    <h1 className="text-slate-900 dark:text-white text-[40px] md:text-[55px] uppercase font-black tracking-tighter drop-shadow-lg mb-4 transition-colors">
                        Gallery
                    </h1>

                    <div className="flex items-center justify-center gap-4 mb-6">
                        <div className="w-12 h-px bg-[#84c0a0]"></div>
                        <p className="text-[#84c0a0] font-mono font-bold tracking-widest uppercase text-sm">
                            Photography Collection
                        </p>
                        <div className="w-12 h-px bg-[#84c0a0]"></div>
                    </div>

                    <p className="text-slate-600 dark:text-gray-400 font-light max-w-2xl mx-auto text-lg leading-relaxed transition-colors">
                        A curated collection of photograps. Finding the best subjects to capture, from natural landscapes to the night sky.
                    </p>
                </div>
            </section>

            {/* 3. The Gallery Grid */}
            <div className="relative z-10 w-full">
                <PhotoGallery images={images} />
            </div>
        </main>
    );
}