tfrere HF Staff commited on
Commit
31ecdbe
·
1 Parent(s): 3c6ec2f

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

Files changed (1) hide show
  1. 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 sides, allow top overflow
277
- clipPath: 'inset(-100px 0 0 0 round 16px)',
278
  textDecoration: 'none',
279
  color: 'inherit',
280
  cursor: 'pointer',
@@ -285,21 +285,19 @@ function StatsSection() {
285
  },
286
  }}
287
  >
288
- {/* Hacker illustration - overflows top */}
289
- <Box
290
- component="img"
291
- src="/assets/reachies/plumber.png"
292
- alt=""
293
- sx={{
294
- position: 'absolute',
295
- top: -50,
296
- right: 20,
297
- height: 350,
298
- opacity: 1,
299
- pointerEvents: 'none',
300
- display: { xs: 'none', sm: 'block' },
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 own <br />
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"