feat: improve hero image UX and live preview (#163, #158)

- Update hero photo help text to mention category override capability
- Add hint in category manager about default hero photo fallback
- Add placeholder text in gallery preview for hero section
- Ensure live preview updates correctly for header/divider style changes

frontend/src/components/admin/EventCategoryManager.tsx

@@ -123,6 +123,11 @@ export const EventCategoryManager: React.FC<EventCategoryManagerProps> = ({ even
         )}
       </div>
 
+      {/* Hint about hero photo fallback */}
+      <p className="text-xs text-neutral-500 dark:text-neutral-400 italic">
+        {t('categories.categoryHeroHint')}
+      </p>
+
       {/* Add new category form */}
       {isAdding && (
         <div className="flex gap-2">

frontend/src/components/admin/GalleryPreview.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import { Camera, Calendar } from 'lucide-react';
 import { ThemeConfig, GalleryLayoutType, HeroDividerStyle } from '../../types/theme.types';
 import { buildResourceUrl } from '../../utils/url';
+import { useTranslation } from 'react-i18next';
 
 interface GalleryPreviewBranding {
   company_name?: string;
@@ -64,12 +65,13 @@ const PreviewPhoto: React.FC<{
   </div>
 );
 
-export const GalleryPreview: React.FC<GalleryPreviewProps> = ({ 
+export const GalleryPreview: React.FC<GalleryPreviewProps> = ({
-  theme, 
+  theme,
   branding,
   layoutType,
-  className = '' 
+  className = ''
 }) => {
+  const { t } = useTranslation();
   const mockPhotos = useMemo(() => generateMockPhotos(12), []);
   
   // Use the provided layoutType or fallback to theme's gallery layout
@@ -252,6 +254,11 @@ export const GalleryPreview: React.FC<GalleryPreviewProps> = ({
                 <Calendar className="w-4 h-4 mr-1" />
                 <span>January 15, 2026</span>
               </div>
+              {/* Hero photo placeholder hint */}
+              <div className="mt-3 flex items-center justify-center gap-1.5 text-white/60 text-xs">
+                <Camera className="w-3 h-3" />
+                <span>{t('branding.heroPlaceholderText')}</span>
+              </div>
             </div>
           </div>
           <div className="absolute bottom-0 left-0 right-0">

frontend/src/i18n/locales/de.json

@@ -719,7 +719,8 @@
     "removeCoverPhoto": "Titelbild entfernen",
     "coverPhotoSet": "Titelbild erfolgreich festgelegt",
     "coverPhotoRemoved": "Titelbild entfernt",
-    "failedToSetCoverPhoto": "Titelbild konnte nicht festgelegt werden"
+    "failedToSetCoverPhoto": "Titelbild konnte nicht festgelegt werden",
+    "categoryHeroHint": "Wenn kein Titelbild für eine Kategorie festgelegt ist, wird das Standard-Hero-Foto verwendet."
   },
   "events": {
     "noStatisticsAvailableYet": "Noch keine Statistiken verfügbar",
@@ -882,7 +883,7 @@
     "heroLogoPositionLabel": "Position",
     "heroLogoHidden": "Logo ausgeblendet",
     "heroPhoto": "Hero-Foto",
-    "heroPhotoHelp": "Wählen Sie ein hervorgehobenes Foto für das Hero-Galerie-Layout",
+    "heroPhotoHelp": "Wählen Sie ein Standard-Hero-Foto für die Galerie. Sie können dies pro Kategorie überschreiben.",
     "selectHeroPhoto": "Hero-Foto auswählen",
     "noHeroPhotoSelected": "Kein Hero-Foto ausgewählt",
     "heroPhotoSelected": "Hero-Foto ausgewählt",
@@ -1432,6 +1433,7 @@
     "saveTheme": "Design speichern",
     "previewLayout": "Vorschau-Layout",
     "livePreview": "Live-Vorschau",
+    "heroPlaceholderText": "Das Hero-Foto Ihrer Veranstaltung wird hier angezeigt",
     "whiteLabel": "White Label",
     "hidePoweredBy": "\"Powered by PicPeak\" Branding ausblenden",
     "hidePoweredByHelp": "Entfernen Sie die PicPeak-Kennzeichnung aus Galerie-Fußzeilen für ein vollständig personalisiertes Erscheinungsbild",

frontend/src/i18n/locales/en.json

@@ -332,7 +332,8 @@
     "removeCoverPhoto": "Remove Cover Photo",
     "coverPhotoSet": "Cover photo set successfully",
     "coverPhotoRemoved": "Cover photo removed",
-    "failedToSetCoverPhoto": "Failed to set cover photo"
+    "failedToSetCoverPhoto": "Failed to set cover photo",
+    "categoryHeroHint": "If no cover photo is set for a category, the default hero photo will be used."
   },
   "events": {
     "title": "Events",
@@ -508,7 +509,7 @@
     "heroLogoPositionLabel": "Position",
     "heroLogoHidden": "Logo hidden",
     "heroPhoto": "Hero Photo",
-    "heroPhotoHelp": "Select a featured photo for the hero gallery layout",
+    "heroPhotoHelp": "Select a default hero photo for the gallery. You can override this per category.",
     "selectHeroPhoto": "Select Hero Photo",
     "noHeroPhotoSelected": "No hero photo selected",
     "heroPhotoSelected": "Hero photo selected",
@@ -1147,6 +1148,7 @@
     "saveTheme": "Save Theme",
     "previewLayout": "Preview Layout",
     "livePreview": "Live Preview",
+    "heroPlaceholderText": "Your event's hero photo will appear here",
     "whiteLabel": "White Label",
     "hidePoweredBy": "Hide \"Powered by PicPeak\" branding",
     "hidePoweredByHelp": "Remove the PicPeak attribution from gallery footers for a fully white-labeled experience",