updated front page

frontend/src/App.tsx

@@ -7,7 +7,6 @@ import {
   Toolbar, 
   Typography, 
   Button, 
-  Container, 
   Box,
   IconButton,
   Menu,
@@ -300,7 +299,7 @@ const App: React.FC = () => {
           {drawer}
         </Drawer>
 
-        <Container maxWidth={false} sx={{ mt: 4, pb: 4, px: { xs: 2, sm: 4, md: 6 } }}>
+        <Box sx={{ mt: 4, pb: 4 }}>
           <Routes>
             <Route path="/" element={<CategoryList />} />
             <Route path="/category/:slug" element={<CategoryFlavors />} />
@@ -310,7 +309,7 @@ const App: React.FC = () => {
             <Route path="/settings" element={<Settings />} />
             <Route path="/login" element={<Login />} />
           </Routes>
-        </Container>
+        </Box>
       </Router>
     </ThemeProvider>
   );

frontend/src/pages/CategoryList.tsx

@@ -9,7 +9,8 @@ import {
   Avatar,
   Rating as MuiRating,
   Paper,
-  Chip
+  Chip,
+  Container
 } from '@mui/material';
 import { Link, useLocation } from 'react-router-dom';
 import StarIcon from '@mui/icons-material/Star';
@@ -93,7 +94,7 @@ const CategoryList: React.FC = () => {
       );
 
       return (
-          <Box>
+          <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 } }}>
               <Typography variant="h4" gutterBottom>Search Results for "{query}"</Typography>
               <Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
                   Found {filteredFlavors.length} items
@@ -129,29 +130,30 @@ const CategoryList: React.FC = () => {
                       </Box>
                   ))}
               </Box>
-          </Box>
+          </Container>
       );
   }
 
   // --- HOME VIEW ---
   return (
-    <Box sx={{ mx: { xs: -2, sm: -4, md: -6 } }}>
-      {/* Hero Section */}
+    <Box>
+      {/* Hero Section - True Full Width */}
       <Paper 
         elevation={0}
         sx={{ 
-            p: { xs: 4, md: 8 }, 
+            p: { xs: 4, md: 10 }, 
             mb: 8, 
             borderRadius: 0, 
             background: (theme) => theme.palette.mode === 'dark' 
-                ? 'linear-gradient(45deg, #1a1a2e 30%, #16213e 90%)' 
-                : 'linear-gradient(45deg, #fdf6f7 30%, #f8e1e5 90%)',
+                ? 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)' 
+                : 'linear-gradient(135deg, #fdf6f7 0%, #f8e1e5 100%)',
             textAlign: 'center',
             borderBottom: '1px solid rgba(255,255,255,0.1)',
             width: '100%',
+            mt: -4 // Counter the parent Box mt
         }}
       >
-        <Typography variant="h2" component="h1" gutterBottom sx={{ fontWeight: 'bold', fontSize: { xs: '2.5rem', md: '4rem' } }}>
+        <Typography variant="h2" component="h1" gutterBottom sx={{ fontWeight: 'bold', fontSize: { xs: '2.5rem', md: '4.5rem' } }}>
             The Ultimate Holy Archive
         </Typography>
         <Typography variant="h5" color="text.secondary" sx={{ mb: 4, maxWidth: 800, mx: 'auto' }}>
@@ -163,17 +165,18 @@ const CategoryList: React.FC = () => {
             </Button>
             <Button variant="outlined" size="large" onClick={() => {
                 const element = document.getElementById('categories');
-                element?.scrollIntoView({ behavior: 'smooth' });
+                element?.scrollIntoView({ behavior: 'smooth', block: 'start' });
             }} sx={{ px: 4, py: 1.5, borderRadius: 2 }}>
                 Explore Categories
             </Button>
         </Box>
       </Paper>
 
-      <Box sx={{ px: { xs: 2, sm: 4, md: 6 } }}>
+      {/* Main Content inside Container */}
+      <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 } }}>
         {/* Top Rated Flavors */}
         {topFlavors.length > 0 && (
-          <Box sx={{ mb: 8 }}>
+          <Box sx={{ mb: 10 }}>
               <Box sx={{ display: 'flex', alignItems: 'center', mb: 4 }}>
                   <StarIcon color="primary" sx={{ mr: 1, fontSize: '2rem' }} />
                   <Typography variant="h4" sx={{ fontWeight: 'bold' }}>Hall of Fame</Typography>
@@ -205,11 +208,11 @@ const CategoryList: React.FC = () => {
       )}
 
       {/* Categories Grid */}
-      <Box id="categories" sx={{ mb: 8 }}>
+      <Box id="categories" sx={{ mb: 10 }}>
         <Typography variant="h4" sx={{ mb: 4, fontWeight: 'bold' }}>Browse by Category</Typography>
         <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 3 }}>
             {categories.map(category => (
-            <Box key={category.id} sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', lg: '1 1 30%' }, minWidth: 280 }}>
+            <Box key={category.id} sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', lg: '1 1 23%' }, minWidth: 280 }}>
                 <Link to={`/category/${category.slug}`} style={{ textDecoration: 'none' }}>
                 <Card sx={{ 
                     height: 120, 
@@ -274,9 +277,9 @@ const CategoryList: React.FC = () => {
               </Box>
           </Box>
       )}
+      </Container>
     </Box>
-  </Box>
-);
+  );
 };
 
 export default CategoryList;

frontend/src/pages/Dashboard.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Typography, Card, CardContent, Box, Rating as MuiRating, Button, TextField } from '@mui/material';
+import { Typography, Card, CardContent, Box, Rating as MuiRating, Button, TextField, Container, CircularProgress } from '@mui/material';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import api from '../api';
 import { useTitle } from '../hooks/useTitle';
@@ -38,11 +38,11 @@ const Dashboard: React.FC = () => {
     fetchData();
   }, []);
 
-  if (loading) return <Typography>Loading...</Typography>;
+  if (loading) return <Box sx={{ display: 'flex', justifyContent: 'center', mt: 8 }}><CircularProgress /></Box>;
   if (!data) return <Typography>Please login to view dashboard.</Typography>;
 
   return (
-    <Box>
+    <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 } }}>
       <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4, flexWrap: 'wrap', gap: 2 }}>
           <Typography variant="h4">Personal Dashboard</Typography>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
@@ -125,7 +125,7 @@ const Dashboard: React.FC = () => {
             </Box>
         </Box>
       </Box>
-    </Box>
+    </Container>
   );
 };
 

frontend/src/pages/Login.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Typography, TextField, Button, Box, Paper, Tab, Tabs, Alert } from '@mui/material';
+import { Typography, TextField, Button, Box, Paper, Tab, Tabs, Alert, Container } from '@mui/material';
 import api from '../api';
 import { useTitle } from '../hooks/useTitle';
 
@@ -217,7 +217,7 @@ const Login: React.FC<LoginProps> = () => {
   };
 
   return (
-    <Box sx={{ maxWidth: 400, mx: 'auto', mt: 8 }}>
+    <Container maxWidth="xs" sx={{ mt: 8 }}>
       <Paper sx={{ p: 3 }}>
         {message && <Alert severity={message.type} sx={{ mb: 2 }}>{message.text}</Alert>}
         {renderContent()}
@@ -227,7 +227,7 @@ const Login: React.FC<LoginProps> = () => {
               Admin? Use <a href="http://localhost:8000/admin/" target="_blank" rel="noreferrer">Django Admin</a>
           </Typography>
       </Box>
-    </Box>
+    </Container>
   );
 };
 

frontend/src/pages/PublicProfile.tsx

@@ -7,7 +7,9 @@ import {
   CardContent, 
   Rating as MuiRating, 
   Avatar,
-  Chip
+  Chip,
+  Container,
+  CircularProgress
 } from '@mui/material';
 import api from '../api';
 import { useTitle } from '../hooks/useTitle';
@@ -48,14 +50,14 @@ const PublicProfile: React.FC = () => {
 
   useTitle(data ? `${data.username}'s Ratings` : 'Profile');
 
-  if (loading) return <Typography>Loading Profile...</Typography>;
+  if (loading) return <Box sx={{ display: 'flex', justifyContent: 'center', mt: 8 }}><CircularProgress /></Box>;
   if (!data) return <Typography>Profile not found.</Typography>;
 
   const favorites = data.ratings.filter(r => r.score >= 8);
   const others = data.ratings.filter(r => r.score < 8);
 
   return (
-    <Box>
+    <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 } }}>
       <Box sx={{ display: 'flex', alignItems: 'center', mb: 6, gap: 3 }}>
         <Avatar sx={{ width: 80, height: 80, fontSize: '2rem', bgcolor: 'primary.main' }}>
             {data.username.charAt(0).toUpperCase()}
@@ -75,7 +77,7 @@ const PublicProfile: React.FC = () => {
               </Typography>
               <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 3 }}>
                   {favorites.map(rating => (
-                      <Card key={rating.id} sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', md: '1 1 30%' }, minWidth: 280 }}>
+                      <Card key={rating.id} sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', md: '1 1 30%', lg: '1 1 23%', xl: '1 1 18%' }, minWidth: 280 }}>
                           <CardContent sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                               {rating.flavor_image && (
                                   <Box component="img" src={rating.flavor_image} sx={{ width: 80, height: 80, objectFit: 'contain' }} />
@@ -102,7 +104,7 @@ const PublicProfile: React.FC = () => {
               <Typography variant="h4" gutterBottom>Other Ratings</Typography>
               <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
                   {others.map(rating => (
-                      <Card key={rating.id} sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', md: '1 1 23%' }, minWidth: 200 }} variant="outlined">
+                      <Card key={rating.id} sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', md: '1 1 23%', lg: '1 1 18%' }, minWidth: 200 }} variant="outlined">
                           <CardContent>
                               <Typography variant="subtitle1" sx={{ fontWeight: 'bold' }}>{rating.flavor_name}</Typography>
                               <Box sx={{ display: 'flex', alignItems: 'center', my: 1 }}>
@@ -120,7 +122,7 @@ const PublicProfile: React.FC = () => {
               </Box>
           </Box>
       )}
-    </Box>
+    </Container>
   );
 };
 

frontend/src/pages/Settings.tsx

@@ -5,7 +5,8 @@ import {
   TextField, 
   Button, 
   Paper, 
-  Alert
+  Alert,
+  Container
 } from '@mui/material';
 import api from '../api';
 import { useTitle } from '../hooks/useTitle';
@@ -77,8 +78,8 @@ const Settings: React.FC = () => {
   };
 
   return (
-    <Box sx={{ maxWidth: 600, mx: 'auto' }}>
-      <Typography variant="h4" gutterBottom>Account Settings</Typography>
+    <Container maxWidth="sm">
+      <Typography variant="h4" gutterBottom sx={{ mt: 4 }}>Account Settings</Typography>
       
       {message && (
         <Alert severity={message.type} sx={{ mb: 3 }} onClose={() => setMessage(null)}>
@@ -153,7 +154,7 @@ const Settings: React.FC = () => {
           </Button>
         </form>
       </Paper>
-    </Box>
+    </Container>
   );
 };
 

frontend/src/pages/categories/CategoryFlavors.tsx

@@ -6,7 +6,8 @@ import {
   Card, 
   CardContent, 
   Rating as MuiRating,
-  CircularProgress
+  CircularProgress,
+  Container
 } from '@mui/material';
 import api from '../../api';
 import { useTitle } from '../../hooks/useTitle';
@@ -62,7 +63,7 @@ const CategoryFlavors: React.FC = () => {
   if (loading) return <Box sx={{ display: 'flex', justifyContent: 'center', mt: 8 }}><CircularProgress /></Box>;
 
   return (
-    <Box>
+    <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 } }}>
       <Box sx={{ mb: 4 }}>
           <Typography variant="h4" gutterBottom>{categoryName || 'Flavors'}</Typography>
           <Link to="/" style={{ textDecoration: 'none' }}>
@@ -101,7 +102,7 @@ const CategoryFlavors: React.FC = () => {
           </Box>
         ))}
       </Box>
-    </Box>
+    </Container>
   );
 };
 

frontend/src/pages/flavors/FlavorDetail.tsx

@@ -11,7 +11,8 @@ import {
   Avatar,
   Alert,
   Paper,
-  CircularProgress
+  CircularProgress,
+  Container
 } from '@mui/material';
 import api from '../../api';
 import { useTitle } from '../../hooks/useTitle';
@@ -145,7 +146,7 @@ const FlavorDetail: React.FC = () => {
   if (!flavor) return <Typography>Flavor not found</Typography>;
 
   return (
-    <Box>
+    <Container maxWidth={false} sx={{ px: { xs: 2, sm: 4, md: 6 } }}>
       <Button component={Link} to={`/category/${flavor.category_slug}`} sx={{ mb: 2 }}>
         &larr; Back to {flavor.category_name}
       </Button>
@@ -262,7 +263,7 @@ const FlavorDetail: React.FC = () => {
             ))
         )}
       </Box>
-    </Box>
+    </Container>
   );
 };