enhancements of the homepage in the guest pwa

resources/js/guest/pages/GalleryPage.tsx

@@ -322,7 +322,7 @@ export default function GalleryPage() {
         styleOverride={{ borderRadius: radius, fontFamily: headingFont }}
       />
       {loading && <p className="px-4" style={bodyFont ? { fontFamily: bodyFont } : undefined}>{t('galleryPage.loading', 'Lade…')}</p>}
-      <div className="grid gap-3 px-4 pb-16 sm:grid-cols-2 lg:grid-cols-3">
+      <div className="grid grid-cols-3 gap-2 px-4 pb-16 sm:grid-cols-3 md:grid-cols-4">
         {list.map((p: GalleryPhoto) => {
           const imageUrl = normalizeImageUrl(p.thumbnail_path || p.file_path);
           const createdLabel = p.created_at
@@ -357,7 +357,7 @@ export default function GalleryPage() {
               <img
                 src={imageUrl}
                 alt={altText}
-                className="h-64 w-full object-cover transition duration-500 group-hover:scale-105"
+                className="aspect-[3/4] w-full object-cover transition duration-500 group-hover:scale-105"
                 onError={(e) => {
                   (e.target as HTMLImageElement).src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjNGNEY2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg==';
                 }}
@@ -425,6 +425,20 @@ export default function GalleryPage() {
             </div>
           );
         })}
+        {list.length === 0 && Array.from({ length: 6 }).map((_, idx) => (
+          <div
+            key={`placeholder-${idx}`}
+            className="relative overflow-hidden border border-muted/40 bg-[var(--guest-surface,#f7f7f7)] shadow-sm"
+            style={{ borderRadius: radius }}
+          >
+            <div className="absolute inset-0 bg-gradient-to-br from-white/60 via-white/30 to-transparent dark:from-white/5 dark:via-white/0" aria-hidden />
+            <div className="flex aspect-[3/4] items-center justify-center gap-2 p-4 text-muted-foreground/70">
+              <ImageIcon className="h-6 w-6" aria-hidden />
+              <div className="h-2 w-10 rounded-full bg-muted/40" />
+            </div>
+            <div className="absolute inset-0 animate-pulse bg-white/30 dark:bg-white/5" aria-hidden />
+          </div>
+        ))}
       </div>
       {currentPhotoIndex !== null && list.length > 0 && (
         <PhotoLightbox