refactor: rename project from wedding-photo-sharing to PicPeak

- Update Docker image names and network configurations
- Rename package.json project names to picpeak-backend/frontend
- Update CI/CD configurations (Drone CI and GitHub Actions)
- Update documentation and setup scripts
- Update application branding in source code
- Change default database name to picpeak
- Update PM2 ecosystem config

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

frontend/src/components/gallery/layouts/HeroGalleryLayout.tsx

@@ -31,24 +31,49 @@ export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
   const { format } = useLocalizedDate();
   const { theme } = useTheme();
   const [heroPhoto, setHeroPhoto] = useState<Photo | null>(null);
+  const [hasInitialized, setHasInitialized] = useState(false);
   const gallerySettings = theme.gallerySettings || {};
   const overlayOpacity = gallerySettings.heroOverlayOpacity || 0.3;
 
-  // Select hero photo (first photo or specified one)
+  // Reset initialization when heroImageId changes
+  useEffect(() => {
+    if (gallerySettings.heroImageId) {
+      setHasInitialized(false);
+    }
+  }, [gallerySettings.heroImageId]);
+
+  // Select hero photo (admin-selected or first photo only if gallery was empty)
   useEffect(() => {
     if (photos.length > 0) {
       const heroId = gallerySettings.heroImageId;
-      const hero = heroId ? photos.find(p => p.id === heroId) : photos[0];
-      setHeroPhoto(hero || photos[0]);
+      console.log('HeroGalleryLayout - heroImageId:', heroId, 'photos:', photos.length);
+      
+      // If admin has selected a specific hero image, always use it
+      if (heroId) {
+        const adminSelectedHero = photos.find(p => p.id === heroId);
+        console.log('Looking for hero photo with ID:', heroId, 'Found:', adminSelectedHero?.filename);
+        if (adminSelectedHero) {
+          setHeroPhoto(adminSelectedHero);
+          setHasInitialized(true);
+          return;
+        }
+      }
+      
+      // Only auto-select first photo on initial load when gallery was empty
+      // This prevents changing the hero when new photos are uploaded
+      if (!hasInitialized) {
+        setHeroPhoto(photos[0]);
+        setHasInitialized(true);
+      }
     }
-  }, [photos, gallerySettings.heroImageId]);
+  }, [photos, gallerySettings.heroImageId, hasInitialized]);
 
   if (!heroPhoto) return null;
 
   const remainingPhotos = photos.filter(p => p.id !== heroPhoto.id);
 
   return (
-    <div className="relative">
+    <div className="relative -mt-6">
       {/* Hero Section */}
       <div className="relative h-[60vh] sm:h-[70vh] lg:h-[80vh] -mx-4 sm:-mx-6 lg:-mx-8 mb-8">
         <AuthenticatedImage
@@ -67,17 +92,20 @@ export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
         {/* Hero Content */}
         <div className="absolute inset-0 flex items-center justify-center">
           <div className="text-center px-4">
-            {/* Logo */}
-            {eventLogo && (
-              <div className="mb-6">
-                <img 
-                  src={eventLogo} 
-                  alt="Event logo" 
-                  className="h-20 sm:h-24 lg:h-32 mx-auto drop-shadow-lg filter brightness-0 invert"
-                  style={{ filter: 'drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5))' }}
-                />
-              </div>
-            )}
+            {/* Logo - Show custom logo or fallback to PicPeak logo */}
+            <div className="mb-6">
+              <img 
+                src={eventLogo ? 
+                  `${import.meta.env.VITE_API_URL || 'http://localhost:3001'}${eventLogo}` : 
+                  '/picpeak-logo-transparent.png'
+                } 
+                alt="Event logo" 
+                className="h-20 sm:h-24 lg:h-32 mx-auto"
+                style={{ 
+                  filter: 'brightness(0) invert(1) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5))'
+                }}
+              />
+            </div>
             
             {/* Event Title */}
             {eventName && (