updated hall of fame

frontend/src/components/ui/BackButton.tsx

@@ -39,9 +39,7 @@ export const BackButton: React.FC<BackButtonProps> = ({ to, sx }) => {
 
   const label = to || !canGoBack ? t('common.backToHome') : t('common.back');
 
-  const linkProps = to
+  const linkProps = to ? { component: Link as React.ElementType, to } : { onClick: handleGoBack };
-    ? { component: Link as React.ElementType, to }
-    : { onClick: handleGoBack };
 
   return (
     <Button

frontend/src/pages/MainPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   Typography,
   Box,
@@ -107,11 +107,11 @@ const MainPage: React.FC = () => {
   const currentTop = topFlavors[safeIndex];
   // Feature the highest-scored review with a comment, not just the first one —
   // a Hall-of-Fame quote should be the most glowing, not whatever loaded first.
-  const featuredReview = useMemo(() => {
+  const featuredReview = (currentTop?.ratings ?? [])
-    const withComment = (currentTop?.ratings ?? []).filter((r) => r.comment);
+    .filter((r) => r.comment)
-    if (withComment.length === 0) return null;
+    .reduce<
-    return withComment.reduce((best, r) => (r.score > best.score ? r : best));
+      (typeof currentTop)['ratings'][number] | null
-  }, [currentTop]);
+    >((best, r) => (best === null || r.score > best.score ? r : best), null);
 
   useTitle(query ? `Search: ${query}` : 'Holy Flavors Archive');
 

frontend/src/pages/categories/CategoryFlavors.tsx

@@ -37,10 +37,7 @@ const CategoryFlavors: React.FC = () => {
       <SectionHeader title={categoryName || t('home.flavorsFallback')} />
 
       {flavors.length === 0 ? (
-        <EmptyState
+        <EmptyState title={t('home.noCategoryFlavors')} subtitle={t('home.noCategoryFlavorsSub')} />
-          title={t('home.noCategoryFlavors')}
-          subtitle={t('home.noCategoryFlavorsSub')}
-        />
       ) : (
         <Box
           sx={{

frontend/src/pages/flavors/FlavorDetail.tsx

@@ -227,7 +227,10 @@ const FlavorDetail: React.FC = () => {
                   </Box>
                 )}
 
-                <Typography variant="body2" sx={{ lineHeight: 1.7, color: 'text.secondary', mb: 4 }}>
+                <Typography
+                  variant="body2"
+                  sx={{ lineHeight: 1.7, color: 'text.secondary', mb: 4 }}
+                >
                   <RichText text={flavor.description} />
                 </Typography>
 

frontend/ux-improvements.md

@@ -19,7 +19,7 @@ Tracking doc from the frontend/UX audit. Items grouped by priority. Check off as
 
 ## 🟡 Medium
 
-- [ ] **#5 Hall of Fame carousel** — no swipe/auto-advance; arrows far from card on mobile; featured quote is arbitrary (first-with-comment).
+- [x] **#5 Hall of Fame carousel** (`MainPage.tsx`) — added 6s auto-advance (stops on manual control, pauses on hover, off for reduced-motion), touch swipe, on-card overlay arrows on mobile (header arrows desktop-only), and featured quote now picks the highest-scored comment instead of the first.
 - [x] **#6 Admin edit leaks into product card** (`FlavorDetail.tsx`) — extracted to `components/AdminFlavorEditDialog.tsx`; card keeps a clean read view, edit opens a focused dialog.
 - [ ] **#7 CommunityFeed duplication** — in-page notifications + following duplicate the nav/global menus.
 - [ ] **#8 Reply Enter-to-submit on multiline** — surprising; blocks newlines.