update

src/components/Footer.jsx

@@ -1,32 +1,9 @@
-import { Box, Container, Typography, Link, Stack, Grid, IconButton, Divider, TextField, Button } from '@mui/material';
-import { Link as RouterLink } from 'react-router-dom';
+import { Box, Container, Typography, Link, Stack, IconButton, Divider } from '@mui/material';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import XIcon from '@mui/icons-material/X';
 import LinkedInIcon from '@mui/icons-material/LinkedIn';
 import YouTubeIcon from '@mui/icons-material/YouTube';
 
-const productLinks = [
-  { label: 'Get Started', href: '/getting-started', external: false },
-  { label: 'Create with Python', href: 'https://github.com/pollen-robotics/reachy_mini', external: true },
-  { label: 'Download App', href: '/download', external: false },
-  { label: 'Browse Apps', href: '/apps', external: false },
-  { label: 'Buy Reachy Mini', href: '/buy', external: false },
-];
-
-const resourceLinks = [
-  { label: 'Assembly Guide', href: 'https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Assembly_Guide', external: true },
-  { label: 'Python SDK', href: 'https://github.com/pollen-robotics/reachy_mini', external: true },
-  { label: 'Documentation', href: 'https://github.com/pollen-robotics/reachy_mini#readme', external: true },
-  { label: 'API Reference', href: 'https://github.com/pollen-robotics/reachy_mini', external: true },
-];
-
-const communityLinks = [
-  { label: 'Discord Server', href: 'https://discord.gg/2bAhWfXme9', external: true },
-  { label: 'Hugging Face Spaces', href: 'https://huggingface.co/spaces?q=reachy_mini', external: true },
-  { label: 'GitHub Discussions', href: 'https://github.com/pollen-robotics/reachy_mini/discussions', external: true },
-  { label: 'Share your Project', href: 'https://discord.gg/2bAhWfXme9', external: true },
-];
-
 const socialLinks = [
   { icon: GitHubIcon, href: 'https://github.com/pollen-robotics', label: 'GitHub' },
   { icon: XIcon, href: 'https://x.com/pollenrobotics', label: 'X (Twitter)' },
@@ -34,58 +11,6 @@ const socialLinks = [
   { icon: YouTubeIcon, href: 'https://www.youtube.com/pollen-robotics', label: 'YouTube' },
 ];
 
-function FooterLink({ link }) {
-  const linkStyles = {
-    color: 'rgba(255, 255, 255, 0.6)',
-    textDecoration: 'none',
-    fontSize: 14,
-    display: 'block',
-    py: 0.5,
-    transition: 'color 0.2s ease',
-    '&:hover': {
-      color: 'white',
-    },
-  };
-
-  if (link.external) {
-    return (
-      <Link href={link.href} target="_blank" rel="noopener noreferrer" sx={linkStyles}>
-        {link.label}
-      </Link>
-    );
-  }
-
-  return (
-    <Link component={RouterLink} to={link.href} sx={linkStyles}>
-      {link.label}
-    </Link>
-  );
-}
-
-function FooterSection({ title, links }) {
-  return (
-    <Box>
-      <Typography
-        variant="overline"
-        sx={{
-          color: 'rgba(255, 255, 255, 0.4)',
-          fontSize: 11,
-          letterSpacing: '0.15em',
-          mb: 2,
-          display: 'block',
-        }}
-      >
-        {title}
-      </Typography>
-      <Stack spacing={0.5}>
-        {links.map((link) => (
-          <FooterLink key={link.label} link={link} />
-        ))}
-      </Stack>
-    </Box>
-  );
-}
-
 export default function Footer() {
   return (
     <Box
@@ -93,13 +18,12 @@ export default function Footer() {
       sx={{
         backgroundColor: '#0a0a0b',
         color: 'white',
-        pt: 10,
-        pb: 4,
+        pt: 4,
+        pb: 2,
         position: 'relative',
         overflow: 'hidden',
       }}
     >
-      {/* Subtle gradient overlay */}
       <Box
         sx={{
           position: 'absolute',
@@ -111,7 +35,6 @@ export default function Footer() {
         }}
       />
 
-      {/* Decorative sleeping Reachy */}
       <Box
         component="img"
         src="/assets/sleeping-reachy.svg"
@@ -128,212 +51,123 @@ export default function Footer() {
       />
 
       <Container maxWidth="lg">
-        {/* Main Footer Content */}
-        <Grid container spacing={6}>
-          {/* Brand Column */}
-          <Grid size={{ xs: 12, md: 4 }}>
-            <Box sx={{ mb: 3 }}>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 2 }}>
-                <Box
-                  component="img"
-                  src="/assets/reachy-icon.svg"
-                  alt=""
-                  sx={{
-                    width: 32,
-                    height: 32,
-                    opacity: 0.9,
-                  }}
-                />
-                <Typography variant="h5" sx={{ fontWeight: 700 }}>
-                  Reachy Mini
-                </Typography>
-              </Box>
-              <Typography
-                variant="body2"
-                sx={{ color: 'rgba(255, 255, 255, 0.6)', lineHeight: 1.7, maxWidth: 300 }}
+        <Stack spacing={3} alignItems="center">
+          <Stack direction="row" spacing={1} justifyContent="center">
+            {socialLinks.map((social) => (
+              <IconButton
+                key={social.label}
+                size="small"
+                href={social.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={social.label}
+                sx={{
+                  color: 'rgba(255, 255, 255, 0.5)',
+                  border: '1px solid rgba(255, 255, 255, 0.1)',
+                  borderRadius: 2,
+                  transition: 'all 0.2s ease',
+                  '&:hover': {
+                    color: 'white',
+                    borderColor: 'rgba(255, 255, 255, 0.3)',
+                    backgroundColor: 'rgba(255, 255, 255, 0.05)',
+                  },
+                }}
               >
-                An expressive open-source companion robot designed for human interaction, 
-                creative coding, and AI experimentation. Build, play, and innovate with robotics.
-              </Typography>
-            </Box>
-
-            {/* Social Links */}
-            <Stack direction="row" spacing={1} sx={{ mt: 3 }}>
-              {socialLinks.map((social) => (
-                <IconButton
-                  key={social.label}
-                  href={social.href}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  aria-label={social.label}
-                  sx={{
-                    color: 'rgba(255, 255, 255, 0.5)',
-                    border: '1px solid rgba(255, 255, 255, 0.1)',
-                    borderRadius: 2,
-                    transition: 'all 0.2s ease',
-                    '&:hover': {
-                      color: 'white',
-                      borderColor: 'rgba(255, 255, 255, 0.3)',
-                      backgroundColor: 'rgba(255, 255, 255, 0.05)',
-                    },
-                  }}
-                >
-                  <social.icon fontSize="small" />
-                </IconButton>
-              ))}
-            </Stack>
-          </Grid>
+                <social.icon fontSize="small" />
+              </IconButton>
+            ))}
+          </Stack>
 
-          {/* Links Columns */}
-          <Grid size={{ xs: 6, sm: 4, md: 2 }}>
-            <FooterSection title="Product" links={productLinks} />
-          </Grid>
+          <Divider sx={{ borderColor: 'rgba(255, 255, 255, 0.08)', my: 0.5 }} />
 
-          <Grid size={{ xs: 6, sm: 4, md: 2 }}>
-            <FooterSection title="Resources" links={resourceLinks} />
-          </Grid>
+          <Stack
+            direction={{ xs: 'column', md: 'row' }}
+            justifyContent="space-between"
+            alignItems={{ xs: 'center', md: 'center' }}
+            spacing={1.5}
+          >
+            <Typography variant="body2" sx={{ color: 'rgba(255, 255, 255, 0.4)', fontSize: 13 }}>
+              © 2025 Reachy Mini. Open source under Apache 2.0 license.
+            </Typography>
 
-          <Grid size={{ xs: 6, sm: 4, md: 2 }}>
-            <FooterSection title="Community" links={communityLinks} />
-          </Grid>
+            <Stack direction="row" spacing={1} alignItems="center">
+              <Typography variant="body2" sx={{ color: 'rgba(255, 255, 255, 0.4)', fontSize: 13 }}>
+                Proudly brought by
+              </Typography>
+              <Link
+                href="https://www.pollen-robotics.com/"
+                target="_blank"
+                rel="noopener noreferrer"
+                sx={{
+                  color: 'rgba(255, 255, 255, 0.7)',
+                  textDecoration: 'none',
+                  fontSize: 13,
+                  fontWeight: 600,
+                  transition: 'color 0.2s',
+                  '&:hover': { color: 'white' },
+                }}
+              >
+                Pollen Robotics
+              </Link>
+              <Typography sx={{ color: 'rgba(255, 255, 255, 0.3)', fontSize: 13 }}>×</Typography>
+              <Link
+                href="https://huggingface.co/"
+                target="_blank"
+                rel="noopener noreferrer"
+                sx={{
+                  color: 'rgba(255, 255, 255, 0.7)',
+                  textDecoration: 'none',
+                  fontSize: 13,
+                  fontWeight: 600,
+                  transition: 'color 0.2s',
+                  '&:hover': { color: 'white' },
+                }}
+              >
+                🤗 Hugging Face
+              </Link>
+            </Stack>
 
-          {/* Newsletter / CTA Column */}
-          <Grid size={{ xs: 12, sm: 8, md: 2 }}>
-            <Box>
-              <Typography
-                variant="overline"
+            <Stack direction="row" spacing={3}>
+              <Link
+                href="https://github.com/pollen-robotics/reachy_mini/blob/main/LICENSE"
+                target="_blank"
+                rel="noopener noreferrer"
                 sx={{
                   color: 'rgba(255, 255, 255, 0.4)',
-                  fontSize: 11,
-                  letterSpacing: '0.15em',
-                  mb: 2,
-                  display: 'block',
+                  textDecoration: 'none',
+                  fontSize: 12,
+                  '&:hover': { color: 'rgba(255, 255, 255, 0.7)' },
                 }}
               >
-                Stay Updated
-              </Typography>
-              <Typography
-                variant="body2"
-                sx={{ color: 'rgba(255, 255, 255, 0.6)', mb: 2, fontSize: 13 }}
+                License
+              </Link>
+              <Link
+                href="https://www.pollen-robotics.com/privacy-policy/"
+                target="_blank"
+                rel="noopener noreferrer"
+                sx={{
+                  color: 'rgba(255, 255, 255, 0.4)',
+                  textDecoration: 'none',
+                  fontSize: 12,
+                  '&:hover': { color: 'rgba(255, 255, 255, 0.7)' },
+                }}
               >
-                Join our Discord to get the latest updates, tutorials, and community projects.
-              </Typography>
-              <Button
-                variant="outlined"
-                size="small"
-                href="https://discord.gg/2bAhWfXme9"
+                Privacy
+              </Link>
+              <Link
+                href="https://www.pollen-robotics.com/terms-of-use/"
                 target="_blank"
-                fullWidth
+                rel="noopener noreferrer"
                 sx={{
-                  borderColor: 'rgba(255, 255, 255, 0.2)',
-                  color: 'white',
-                  fontSize: 13,
-                  '&:hover': {
-                    borderColor: 'rgba(255, 255, 255, 0.5)',
-                    backgroundColor: 'rgba(255, 255, 255, 0.05)',
-                  },
+                  color: 'rgba(255, 255, 255, 0.4)',
+                  textDecoration: 'none',
+                  fontSize: 12,
+                  '&:hover': { color: 'rgba(255, 255, 255, 0.7)' },
                 }}
               >
-                Join Discord
-              </Button>
-            </Box>
-          </Grid>
-        </Grid>
-
-        {/* Divider */}
-        <Divider sx={{ borderColor: 'rgba(255, 255, 255, 0.08)', my: 6 }} />
-
-        {/* Bottom Bar */}
-        <Stack
-          direction={{ xs: 'column', md: 'row' }}
-          justifyContent="space-between"
-          alignItems={{ xs: 'center', md: 'center' }}
-          spacing={2}
-        >
-          {/* Copyright & Credits */}
-          <Typography variant="body2" sx={{ color: 'rgba(255, 255, 255, 0.4)', fontSize: 13 }}>
-            © {new Date().getFullYear()} Reachy Mini. Open source under Apache 2.0 license.
-          </Typography>
-
-          {/* Brought by */}
-          <Stack direction="row" spacing={1} alignItems="center">
-            <Typography variant="body2" sx={{ color: 'rgba(255, 255, 255, 0.4)', fontSize: 13 }}>
-              Proudly brought by
-            </Typography>
-            <Link
-              href="https://www.pollen-robotics.com/"
-              target="_blank"
-              rel="noopener noreferrer"
-              sx={{
-                color: 'rgba(255, 255, 255, 0.7)',
-                textDecoration: 'none',
-                fontSize: 13,
-                fontWeight: 600,
-                transition: 'color 0.2s',
-                '&:hover': { color: 'white' },
-              }}
-            >
-              Pollen Robotics
-            </Link>
-            <Typography sx={{ color: 'rgba(255, 255, 255, 0.3)', fontSize: 13 }}>×</Typography>
-            <Link
-              href="https://huggingface.co/"
-              target="_blank"
-              rel="noopener noreferrer"
-              sx={{
-                color: 'rgba(255, 255, 255, 0.7)',
-                textDecoration: 'none',
-                fontSize: 13,
-                fontWeight: 600,
-                transition: 'color 0.2s',
-                '&:hover': { color: 'white' },
-              }}
-            >
-              🤗 Hugging Face
-            </Link>
-          </Stack>
-
-          {/* Legal Links */}
-          <Stack direction="row" spacing={3}>
-            <Link
-              href="https://github.com/pollen-robotics/reachy_mini/blob/main/LICENSE"
-              target="_blank"
-              rel="noopener noreferrer"
-              sx={{
-                color: 'rgba(255, 255, 255, 0.4)',
-                textDecoration: 'none',
-                fontSize: 12,
-                '&:hover': { color: 'rgba(255, 255, 255, 0.7)' },
-              }}
-            >
-              License
-            </Link>
-            <Link
-              href="https://www.pollen-robotics.com/privacy-policy/"
-              target="_blank"
-              rel="noopener noreferrer"
-              sx={{
-                color: 'rgba(255, 255, 255, 0.4)',
-                textDecoration: 'none',
-                fontSize: 12,
-                '&:hover': { color: 'rgba(255, 255, 255, 0.7)' },
-              }}
-            >
-              Privacy
-            </Link>
-            <Link
-              href="https://www.pollen-robotics.com/terms-of-use/"
-              target="_blank"
-              rel="noopener noreferrer"
-              sx={{
-                color: 'rgba(255, 255, 255, 0.4)',
-                textDecoration: 'none',
-                fontSize: 12,
-                '&:hover': { color: 'rgba(255, 255, 255, 0.7)' },
-              }}
-            >
-              Terms
-            </Link>
+                Terms
+              </Link>
+            </Stack>
           </Stack>
         </Stack>
       </Container>

src/pages/Buy.jsx

@@ -409,57 +409,59 @@ function ComparisonSection() {
           </Typography>
         </Box>
 
-        <TableContainer 
-          component={Paper} 
-          sx={{ 
-            borderRadius: 3, 
-            overflow: 'hidden',
-            boxShadow: '0 4px 24px rgba(0, 0, 0, 0.06)',
-          }}
-        >
-          <Table>
-            <TableHead>
-              <TableRow sx={{ bgcolor: 'background.alt' }}>
-                <TableCell sx={{ fontWeight: 700, fontSize: 15, py: 2.5 }}>
-                  Feature
-                </TableCell>
-                <TableCell align="center" sx={{ fontWeight: 700, fontSize: 15, py: 2.5 }}>
-                  <Stack direction="row" spacing={1} alignItems="center" justifyContent="center">
-                    <Chip label="Wireless" size="small" sx={{ bgcolor: '#0ea5e920', color: '#0ea5e9', fontWeight: 600 }} />
-                    <Typography fontWeight={700}>$449</Typography>
-                  </Stack>
-                </TableCell>
-                <TableCell align="center" sx={{ fontWeight: 700, fontSize: 15, py: 2.5 }}>
-                  <Stack direction="row" spacing={1} alignItems="center" justifyContent="center">
-                    <Chip label="Lite" size="small" sx={{ bgcolor: '#f59e0b20', color: '#f59e0b', fontWeight: 600 }} />
-                    <Typography fontWeight={700}>$299</Typography>
-                  </Stack>
-                </TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {comparisonFeatures.map((feature, index) => (
-                <TableRow 
-                  key={feature.name}
-                  sx={{ 
-                    '&:nth-of-type(odd)': { bgcolor: 'rgba(0, 0, 0, 0.02)' },
-                    '&:last-child td': { borderBottom: 0 },
-                  }}
-                >
-                  <TableCell sx={{ py: 2 }}>
-                    <Typography fontWeight={500}>{feature.name}</Typography>
+        <Box sx={{ overflowX: 'auto' }}>
+          <TableContainer 
+            component={Paper} 
+            sx={{ 
+              borderRadius: 3, 
+              boxShadow: '0 4px 24px rgba(0, 0, 0, 0.06)',
+              minWidth: 720,
+            }}
+          >
+            <Table sx={{ minWidth: 720 }}>
+              <TableHead>
+                <TableRow sx={{ bgcolor: 'background.alt' }}>
+                  <TableCell sx={{ fontWeight: 700, fontSize: 15, py: 2.5 }}>
+                    Feature
                   </TableCell>
-                  <TableCell align="center" sx={{ py: 2 }}>
-                    <FeatureValue value={feature.wireless} />
+                  <TableCell align="center" sx={{ fontWeight: 700, fontSize: 15, py: 2.5 }}>
+                    <Stack direction="row" spacing={1} alignItems="center" justifyContent="center">
+                      <Chip label="Wireless" size="small" sx={{ bgcolor: '#0ea5e920', color: '#0ea5e9', fontWeight: 600 }} />
+                      <Typography fontWeight={700}>$449</Typography>
+                    </Stack>
                   </TableCell>
-                  <TableCell align="center" sx={{ py: 2 }}>
-                    <FeatureValue value={feature.lite} />
+                  <TableCell align="center" sx={{ fontWeight: 700, fontSize: 15, py: 2.5 }}>
+                    <Stack direction="row" spacing={1} alignItems="center" justifyContent="center">
+                      <Chip label="Lite" size="small" sx={{ bgcolor: '#f59e0b20', color: '#f59e0b', fontWeight: 600 }} />
+                      <Typography fontWeight={700}>$299</Typography>
+                    </Stack>
                   </TableCell>
                 </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </TableContainer>
+              </TableHead>
+              <TableBody>
+                {comparisonFeatures.map((feature, index) => (
+                  <TableRow 
+                    key={feature.name}
+                    sx={{ 
+                      '&:nth-of-type(odd)': { bgcolor: 'rgba(0, 0, 0, 0.02)' },
+                      '&:last-child td': { borderBottom: 0 },
+                    }}
+                  >
+                    <TableCell sx={{ py: 2 }}>
+                      <Typography fontWeight={500}>{feature.name}</Typography>
+                    </TableCell>
+                    <TableCell align="center" sx={{ py: 2 }}>
+                      <FeatureValue value={feature.wireless} />
+                    </TableCell>
+                    <TableCell align="center" sx={{ py: 2 }}>
+                      <FeatureValue value={feature.lite} />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </Box>
       </Container>
     </Box>
   );
@@ -661,4 +663,3 @@ export default function Buy() {
     </Layout>
   );
 }
-

src/pages/Home.jsx

@@ -953,10 +953,6 @@ function FinalCTA() {
             Buy Reachy Mini
           </Button>
 
-
-          <Button variant="outlined" size="large" component="a" rel="noopener noreferrer" href="https://github.com/pollen-robotics/reachy_mini/?tab=readme-ov-file#reachy-mini-" sx={{ px: 5, py: 1.75, fontSize: 16 }}>
-            Learn More
-          </Button>
         </Stack>
 
         {/* <Stack direction={{ xs: 'column', sm: 'row' }} spacing={{ xs: 1, sm: 4 }} justifyContent="center" sx={{ mt: 5, color: 'text.secondary' }}>