redesigned community activity

frontend/src/App.tsx

@@ -268,7 +268,7 @@ const App: React.FC = () => {
         </ListItem>
         
         <ListItemButton onClick={() => setCatOpen(!catOpen)}>
-            <ListItemText primary="Categories" />
+            <ListItemText primary={t('nav.categories')} />
             {catOpen ? <ExpandLess /> : <ExpandMore />}
         </ListItemButton>
         <Collapse in={catOpen} timeout="auto" unmountOnExit>
@@ -281,7 +281,7 @@ const App: React.FC = () => {
                         onClick={() => setDrawerOpen(false)}
                         sx={{ pl: 4 }}
                     >
-                        <ListItemText primary={cat.name} />
+                        <ListItemText primary={t(`categories.${cat.slug}`, { defaultValue: cat.name })} />
                     </ListItemButton>
                 ))}
             </List>
@@ -380,7 +380,7 @@ const App: React.FC = () => {
                         onClick={(e) => setCatAnchorEl(e.currentTarget)}
                         sx={{ fontWeight: 'bold', textTransform: 'none', fontSize: '1rem' }}
                     >
-                        Categories
+                        {t('nav.categories')}
                     </Button>
                     <Menu
                         anchorEl={catAnchorEl}
@@ -396,7 +396,7 @@ const App: React.FC = () => {
                                 to={`/category/${cat.slug}`}
                                 onClick={() => setCatAnchorEl(null)}
                             >
-                                {cat.name}
+                                {t(`categories.${cat.slug}`, { defaultValue: cat.name })}
                             </MenuItem>
                         ))}
                     </Menu>

frontend/src/i18n.ts

@@ -13,7 +13,15 @@ const resources = {
         "settings": "Settings",
         "logout": "Logout",
         "login": "Login / Signup",
-        "following": "Following"
+        "following": "Following",
+        "categories": "Categories"
+      },
+      "categories": {
+        "energy": "Energy",
+        "hydration": "Hydration",
+        "iced-tea": "Iced Tea",
+        "milkshake": "Milkshake",
+        "packs-and-other": "Packs & Other"
       },
       "dashboard": {
         "welcome": "Welcome back, {{username}}!",
@@ -114,7 +122,15 @@ const resources = {
         "settings": "Einstellungen",
         "logout": "Abmelden",
         "login": "Anmelden / Registrieren",
-        "following": "Folge ich"
+        "following": "Folge ich",
+        "categories": "Kategorien"
+      },
+      "categories": {
+        "energy": "Energy",
+        "hydration": "Hydration",
+        "iced-tea": "Eistee",
+        "milkshake": "Milkshake",
+        "packs-and-other": "Bundles & Mehr"
       },
       "dashboard": {
         "welcome": "Willkommen zurück, {{username}}!",

frontend/src/pages/MainPage.tsx

@@ -217,7 +217,7 @@ const MainPage: React.FC = () => {
             borderColor: 'divider',
             mb: 4
         }}>
-            <Container maxWidth="lg">
+            <Container maxWidth={false} sx={{ px: { xs: 0, sm: 2, md: 4 } }}>
                 <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', mb: 4, flexWrap: 'wrap', gap: 2 }}>
                     <Box>
                         <Typography variant="h3" sx={{ fontWeight: 'bold', mb: 1, fontSize: { xs: '2rem', md: '3rem' } }}>{t('home.activity')}</Typography>