QR code added to the getting started page

src/pages/GettingStarted.jsx

@@ -464,14 +464,34 @@ export default function GettingStarted() {
                     <Typography fontWeight={600}>Connect to the robot's Wi-Fi</Typography>
                   </StepLabel>
                   <StepContent>
-                    <Box sx={{ bgcolor: 'background.alt', p: 2, borderRadius: 2, mb: 1 }}>
-                      <Typography variant="body2">
-                        <strong>Network:</strong> <code>reachy-mini-ap</code>
-                      </Typography>
-                      <Typography variant="body2">
-                        <strong>Password:</strong> <code>reachy-mini</code>
-                      </Typography>
-                    </Box>
+                    <Grid container columnSpacing={2.5} rowSpacing={2} alignItems="center">
+                      <Grid
+                        size={{ xs: 12, md: 6 }}
+                        sx={{
+                          flexBasis: { md: '110px', xs: '100%' },
+                          maxWidth: { md: '110px', xs: '100%' },
+                          display: 'flex',
+                          alignItems: 'center',
+                        }}
+                      >
+                        <Box
+                          component="img"
+                          src="/assets/reachy-mini-access-point-QR-code.png"
+                          alt="Reachy Mini access point QR code"
+                          sx={{ height: 100, width: 'auto', display: 'block' }}
+                        />
+                      </Grid>
+                      <Grid size={{ xs: 12, md: 6 }} sx={{ display: 'flex', alignItems: 'center' }}>
+                        <Box sx={{ bgcolor: 'background.alt', p: 2, borderRadius: 2, mb: 1 }}>
+                          <Typography variant="body2">
+                            <strong>Network:</strong> <code>reachy-mini-ap</code>
+                          </Typography>
+                          <Typography variant="body2">
+                            <strong>Password:</strong> <code>reachy-mini</code>
+                          </Typography>
+                        </Box>
+                      </Grid>
+                    </Grid>
                   </StepContent>
                 </Step>
                 <Step active completed={false}>