Header improvements: compact mode with animation, larger logo, orange CTA on scroll + Hero mobile alignment

src/components/Header.jsx

@@ -15,7 +15,6 @@ import {
   useMediaQuery,
   useTheme,
   Link,
-  Container,
 } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseIcon from '@mui/icons-material/Close';
@@ -37,17 +36,18 @@ export default function Header({ transparent = false }) {
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const location = useLocation();
 
-  // Track scroll position for transparent header
+  // Track scroll position for header compacting
   useEffect(() => {
-    if (!transparent) return;
-
     const handleScroll = () => {
-      setScrolled(window.scrollY > 80);
+      setScrolled(window.scrollY > 50);
     };
 
+    // Check initial position
+    handleScroll();
+
     window.addEventListener('scroll', handleScroll);
     return () => window.removeEventListener('scroll', handleScroll);
-  }, [transparent]);
+  }, []);
 
   const handleDrawerToggle = () => {
     setMobileOpen(!mobileOpen);
@@ -146,13 +146,13 @@ export default function Header({ transparent = false }) {
           transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
         }}
       >
-        <Container maxWidth="xl">
           <Toolbar 
-            disableGutters
             sx={{ 
               justifyContent: 'space-between', 
-              py: { xs: 2, md: 2.5 },
-              minHeight: { xs: 64, md: 80 },
+              px: scrolled ? { xs: 1, md: 1.5, lg: 2 } : { xs: 2, md: 3, lg: 4 },
+              py: scrolled ? { xs: 1, md: 1.5 } : { xs: 2, md: 3.5 },
+              minHeight: scrolled ? { xs: 56, md: 64 } : { xs: 64, md: 88 },
+              transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
             }}
           >
             {/* Logo */}
@@ -162,9 +162,9 @@ export default function Header({ transparent = false }) {
               sx={{
                 display: 'flex',
                 alignItems: 'center',
-                gap: 1.5,
+                gap: scrolled ? 1 : 1.5,
                 textDecoration: 'none',
-                transition: 'opacity 0.2s',
+                transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
                 '&:hover': {
                   opacity: 0.8,
                 },
@@ -175,8 +175,9 @@ export default function Header({ transparent = false }) {
                 src="/assets/reachy-icon.svg"
                 alt="Reachy Mini"
                 sx={{
-                  width: 32,
-                  height: 32,
+                  width: scrolled ? 52 : 60,
+                  height: scrolled ? 52 : 60,
+                  transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
                 }}
               />
               <Typography
@@ -185,7 +186,8 @@ export default function Header({ transparent = false }) {
                   fontWeight: 700,
                   color: textColor,
                   letterSpacing: '-0.03em',
-                  fontSize: { xs: 20, md: 22 },
+                  fontSize: scrolled ? { xs: 18, md: 19 } : { xs: 20, md: 22 },
+                  transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
                 }}
               >
                 Reachy Mini
@@ -268,7 +270,7 @@ export default function Header({ transparent = false }) {
                 <Button
                   component={RouterLink}
                   to="/buy"
-                  variant="outlined"
+                  variant={scrolled ? 'contained' : 'outlined'}
                   color="primary"
                   sx={{
                     px: 3,
@@ -276,6 +278,7 @@ export default function Header({ transparent = false }) {
                     fontSize: 14,
                     fontWeight: 600,
                     borderRadius: 2,
+                    transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
                     ...(isTransparentMode && {
                       borderColor: 'primary.main',
                       color: 'primary.main',
@@ -291,7 +294,6 @@ export default function Header({ transparent = false }) {
               </Box>
             )}
           </Toolbar>
-        </Container>
       </AppBar>
 
       {/* Mobile Drawer */}
@@ -311,7 +313,7 @@ export default function Header({ transparent = false }) {
       </Drawer>
 
       {/* Spacer for fixed AppBar - only show if not transparent */}
-      {!transparent && <Toolbar sx={{ minHeight: { xs: 64, md: 80 } }} />}
+      {!transparent && <Toolbar sx={{ minHeight: { xs: 64, md: 88 } }} />}
     </>
   );
 }

src/pages/Home.jsx

@@ -83,7 +83,8 @@ function Hero() {
         position: 'relative',
         minHeight: { xs: '85vh', md: '80vh' },
         display: 'flex',
-        alignItems: 'center',
+        alignItems: { xs: 'flex-end', md: 'center' },
+        pb: { xs: 12, md: 0 },
         backgroundColor: '#000',
         overflow: 'hidden',
         // Curved bottom edge