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> = ({ 
-  theme, 
+export const GalleryPreview: React.FC<GalleryPreviewProps> = ({
+  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">