Spaces:
Running
Running
feat(home): update Build your own robot bento with floating reachy builder illustration
Browse files- Replace plumber illustration with reachy-how-to-create-app.svg
- Add floating animation with scroll parallax effect
- Adjust text break: 'Build your' / 'own robot'
- Position illustration with overflow for dynamic effect
- src/pages/Home.jsx +19 -21
src/pages/Home.jsx
CHANGED
|
@@ -257,9 +257,9 @@ function Hero() {
|
|
| 257 |
function StatsSection() {
|
| 258 |
return (
|
| 259 |
<Section id="stats" sx={{ py: { xs: 8, md: 12 }, position: 'relative', overflow: 'visible' }}>
|
| 260 |
-
<Grid container spacing={2}>
|
| 261 |
{/* Big stat - Open Source */}
|
| 262 |
-
<Grid size={{ xs: 12, md: 8 }}>
|
| 263 |
<Box
|
| 264 |
component={RouterLink}
|
| 265 |
to="/getting-started"
|
|
@@ -273,8 +273,8 @@ function StatsSection() {
|
|
| 273 |
display: 'flex',
|
| 274 |
flexDirection: 'column',
|
| 275 |
justifyContent: 'space-between',
|
| 276 |
-
// Clip only bottom and
|
| 277 |
-
clipPath: 'inset(-100px
|
| 278 |
textDecoration: 'none',
|
| 279 |
color: 'inherit',
|
| 280 |
cursor: 'pointer',
|
|
@@ -285,21 +285,19 @@ function StatsSection() {
|
|
| 285 |
},
|
| 286 |
}}
|
| 287 |
>
|
| 288 |
-
{/*
|
| 289 |
-
<Box
|
| 290 |
-
|
| 291 |
-
|
| 292 |
-
|
| 293 |
-
|
| 294 |
-
|
| 295 |
-
|
| 296 |
-
|
| 297 |
-
|
| 298 |
-
|
| 299 |
-
|
| 300 |
-
|
| 301 |
-
}}
|
| 302 |
-
/>
|
| 303 |
<Box sx={{ position: 'relative', zIndex: 1 }}>
|
| 304 |
<Typography
|
| 305 |
sx={{
|
|
@@ -309,8 +307,8 @@ function StatsSection() {
|
|
| 309 |
color: 'white',
|
| 310 |
}}
|
| 311 |
>
|
| 312 |
-
Build your
|
| 313 |
-
robot
|
| 314 |
</Typography>
|
| 315 |
<Typography
|
| 316 |
variant="h4"
|
|
|
|
| 257 |
function StatsSection() {
|
| 258 |
return (
|
| 259 |
<Section id="stats" sx={{ py: { xs: 8, md: 12 }, position: 'relative', overflow: 'visible' }}>
|
| 260 |
+
<Grid container spacing={2} sx={{ overflow: 'visible' }}>
|
| 261 |
{/* Big stat - Open Source */}
|
| 262 |
+
<Grid size={{ xs: 12, md: 8 }} sx={{ overflow: 'visible' }}>
|
| 263 |
<Box
|
| 264 |
component={RouterLink}
|
| 265 |
to="/getting-started"
|
|
|
|
| 273 |
display: 'flex',
|
| 274 |
flexDirection: 'column',
|
| 275 |
justifyContent: 'space-between',
|
| 276 |
+
// Clip only bottom and left, allow top and right overflow
|
| 277 |
+
clipPath: 'inset(-100px -50px 0 0 round 16px)',
|
| 278 |
textDecoration: 'none',
|
| 279 |
color: 'inherit',
|
| 280 |
cursor: 'pointer',
|
|
|
|
| 285 |
},
|
| 286 |
}}
|
| 287 |
>
|
| 288 |
+
{/* How to create app illustration - floating */}
|
| 289 |
+
<Box sx={{ display: { xs: 'none', sm: 'block' } }}>
|
| 290 |
+
<FloatingSticker
|
| 291 |
+
src="/assets/reachy-how-to-create-app.svg"
|
| 292 |
+
size={336}
|
| 293 |
+
top={-60}
|
| 294 |
+
right={10}
|
| 295 |
+
rotation={0}
|
| 296 |
+
floatRange={8}
|
| 297 |
+
floatSpeed={5000}
|
| 298 |
+
scrollFactor={0.03}
|
| 299 |
+
/>
|
| 300 |
+
</Box>
|
|
|
|
|
|
|
| 301 |
<Box sx={{ position: 'relative', zIndex: 1 }}>
|
| 302 |
<Typography
|
| 303 |
sx={{
|
|
|
|
| 307 |
color: 'white',
|
| 308 |
}}
|
| 309 |
>
|
| 310 |
+
Build your<br />
|
| 311 |
+
own robot
|
| 312 |
</Typography>
|
| 313 |
<Typography
|
| 314 |
variant="h4"
|