Merge main into feature/install-modal

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/Download.jsx

@@ -620,7 +620,7 @@ export default function Download() {
                       fontSize: 17,
                     }}
                   >
-                    🚧 {currentPlatform?.name} support coming soon!
+                    🚧 {currentPlatform?.name} desktop app coming soon!
                   </Typography>
                 </Box>
 
@@ -630,13 +630,72 @@ export default function Download() {
                     color: 'rgba(255,255,255,0.5)', 
                     mt: 2,
                     fontSize: 14,
-                    maxWidth: 400,
+                    maxWidth: 500,
                     mx: 'auto',
                   }}
                 >
                   We're working hard to bring Reachy Mini Control to {currentPlatform?.name}. 
-                  In the meantime, Windows and macOS (Apple Silicon) are fully supported!
+                  In the meantime, macOS (Apple Silicon) is fully supported and Windows is in beta!
                 </Typography>
+
+                {/* Alternative for Linux/advanced users - Python SDK */}
+                <Box
+                  sx={{
+                    mt: 3,
+                    p: 3,
+                    borderRadius: 2,
+                    background: 'rgba(16, 185, 129, 0.08)',
+                    border: '1px solid rgba(16, 185, 129, 0.25)',
+                    maxWidth: 520,
+                    mx: 'auto',
+                    textAlign: 'left',
+                  }}
+                >
+                  <Typography 
+                    variant="body2" 
+                    sx={{ 
+                      color: 'rgba(255,255,255,0.9)', 
+                      fontWeight: 600,
+                      mb: 1,
+                      fontSize: 14,
+                    }}
+                  >
+                    🐍 Looking to use the Python SDK directly?
+                  </Typography>
+                  <Typography 
+                    variant="body2" 
+                    sx={{ 
+                      color: 'rgba(255,255,255,0.6)', 
+                      fontSize: 13,
+                      lineHeight: 1.6,
+                      mb: 1.5,
+                    }}
+                  >
+                    {detectedPlatform?.includes('linux') 
+                      ? "Linux users can interact directly with their Reachy Mini using the Python SDK. Run the daemon locally and use the full API for custom applications."
+                      : "Advanced users can interact directly with their Reachy Mini using the Python SDK and daemon."}
+                  </Typography>
+                  <Button
+                    variant="outlined"
+                    size="small"
+                    href="https://github.com/pollen-robotics/reachy_mini"
+                    target="_blank"
+                    endIcon={<OpenInNewIcon sx={{ fontSize: 14 }} />}
+                    sx={{ 
+                      color: '#10b981',
+                      borderColor: 'rgba(16, 185, 129, 0.4)',
+                      fontWeight: 600,
+                      fontSize: 12,
+                      textTransform: 'none',
+                      '&:hover': { 
+                        borderColor: '#10b981',
+                        bgcolor: 'rgba(16, 185, 129, 0.1)',
+                      },
+                    }}
+                  >
+                    View reachy_mini on GitHub
+                  </Button>
+                </Box>
               </>
             )}
 

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
@@ -257,9 +258,9 @@ function Hero() {
 function StatsSection() {
   return (
     <Section id="stats" sx={{ py: { xs: 8, md: 12 }, position: 'relative', overflow: 'visible' }}>
-      <Grid container spacing={2}>
+      <Grid container spacing={2} sx={{ overflow: 'visible' }}>
         {/* Big stat - Open Source */}
-        <Grid size={{ xs: 12, md: 8 }}>
+        <Grid size={{ xs: 12, md: 8 }} sx={{ overflow: 'visible' }}>
           <Box
             component={RouterLink}
             to="/getting-started"
@@ -273,8 +274,8 @@ function StatsSection() {
               display: 'flex',
               flexDirection: 'column',
               justifyContent: 'space-between',
-              // Clip only bottom and sides, allow top overflow
-              clipPath: 'inset(-100px 0 0 0 round 16px)',
+              // Clip only bottom and left, allow top and right overflow
+              clipPath: 'inset(-100px -50px 0 0 round 16px)',
               textDecoration: 'none',
               color: 'inherit',
               cursor: 'pointer',
@@ -285,21 +286,19 @@ function StatsSection() {
               },
             }}
           >
-            {/* Hacker illustration - overflows top */}
-            <Box
-              component="img"
-              src="/assets/reachies/plumber.png"
-              alt=""
-              sx={{
-                position: 'absolute',
-                top: -50,
-                right: 20,
-                height: 350,
-                opacity: 1,
-                pointerEvents: 'none',
-                display: { xs: 'none', sm: 'block' },
-              }}
-            />
+            {/* How to create app illustration - floating */}
+            <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
+              <FloatingSticker
+                src="/assets/reachy-how-to-create-app.svg"
+                size={336}
+                top={-60}
+                right={10}
+                rotation={0}
+                floatRange={8}
+                floatSpeed={5000}
+                scrollFactor={0.03}
+              />
+            </Box>
             <Box sx={{ position: 'relative', zIndex: 1 }}>
               <Typography
                 sx={{
@@ -309,8 +308,8 @@ function StatsSection() {
                   color: 'white',
                 }}
               >
-                Build your own <br />
-                robot
+                Build your<br />
+                own robot
               </Typography>
               <Typography
                 variant="h4"