update home

src/pages/Home.jsx

@@ -124,58 +124,29 @@ function Hero() {
 
       <Container maxWidth="lg" sx={{ position: 'relative', zIndex: 10 }}>
         <Box sx={{ maxWidth: 640 }}>
-          <Stack direction="row" spacing={1.5} sx={{ mb: 3 }}>
-            <Box
+          <Stack direction="row" spacing={1} alignItems="center" sx={{ mb: 2 }}>
+            <Typography
               sx={{
-                display: 'inline-flex',
-                alignItems: 'center',
-                gap: 1,
-                px: 2,
-                py: 0.75,
-                borderRadius: 50,
-                backgroundColor: 'rgba(255,255,255,0.1)',
-                border: '1px solid rgba(255,255,255,0.15)',
-                backdropFilter: 'blur(10px)',
+                color: 'rgba(255,255,255,0.6)',
+                fontSize: 13,
+                fontWeight: 500,
               }}
             >
-              <Typography
-                variant="caption"
-                sx={{
-                  color: 'rgba(255,255,255,0.9)',
-                  fontWeight: 600,
-                  letterSpacing: '0.05em',
-                  textTransform: 'uppercase',
-                  fontSize: 11,
-                }}
-              >
-                Open Source Robot
-              </Typography>
-            </Box>
-            <Box
+              Open Source Robot
+            </Typography>
+            <Box sx={{ width: 4, height: 4, borderRadius: '50%', bgcolor: 'rgba(255,255,255,0.3)' }} />
+            <Typography
               sx={{
-                display: 'inline-flex',
+                color: 'rgba(255,255,255,0.6)',
+                fontSize: 13,
+                fontWeight: 500,
+                display: 'flex',
                 alignItems: 'center',
-                gap: 0.75,
-                px: 2,
-                py: 0.75,
-                borderRadius: 50,
-                backgroundColor: 'rgba(255,255,255,0.1)',
-                border: '1px solid rgba(255,255,255,0.15)',
-                backdropFilter: 'blur(10px)',
+                gap: 0.5,
               }}
             >
-              <Typography
-                variant="caption"
-                sx={{
-                  color: 'rgba(255,255,255,0.7)',
-                  fontWeight: 500,
-                  fontSize: 11,
-                }}
-              >
-                Powered by
-              </Typography>
-              <Box component="img" src="/assets/hf-logo.svg" alt="Hugging Face" sx={{ height: 14 }} />
-            </Box>
+              Powered by <Box component="img" src="/assets/hf-logo.svg" alt="Hugging Face" sx={{ height: 14 }} />
+            </Typography>
           </Stack>
 
           <Typography
@@ -183,7 +154,7 @@ function Hero() {
             component="h1"
             sx={{
               color: 'white',
-              mb: 3,
+              mb: 2,
               background: 'linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.85) 100%)',
               backgroundClip: 'text',
               WebkitBackgroundClip: 'text',
@@ -199,7 +170,7 @@ function Hero() {
             sx={{
               color: 'rgba(255,255,255,0.75)',
               fontWeight: 400,
-              mb: 2,
+              mb: 4,
               lineHeight: 1.6,
               maxWidth: 520,
             }}
@@ -219,7 +190,7 @@ function Hero() {
             .
           </Typography>
 
-          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} sx={{ mt: 2 }}>
+          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
             <Button
               component={RouterLink}
               to="/#pricing"