Improve autobone GUI steps

gui/public/i18n/en/translation.ftl

@@ -817,6 +817,8 @@ onboarding-automatic_proportions-check_height-title = Check your height
 onboarding-automatic_proportions-check_height-description = We use your height as a basis of our measurements by using the headset's (HMD) height as an approximation of your actual height, but it's better to check if they are right yourself!
 # All the text is in bold!
 onboarding-automatic_proportions-check_height-calculation_warning = Please press the button while standing <u>upright</u> to calculate your height. You have 3 seconds after you press the button!
+onboarding-automatic_proportions-check_height-guardian_tip = If you are using a standalone VR headset, make sure to have your guardian/
+    boundary turned on so that your height is correct!
 onboarding-automatic_proportions-check_height-fetch_height = I'm standing!
 # Context is that the height is unknown
 onboarding-automatic_proportions-check_height-unknown = Unknown

gui/src/components/onboarding/pages/body-proportions/AutomaticProportions.tsx

@@ -14,6 +14,7 @@ import { StartRecording } from './autobone-steps/StartRecording';
 import { VerifyResultsStep } from './autobone-steps/VerifyResults';
 import { useCountdown } from '@/hooks/countdown';
 import { CheckHeight } from './autobone-steps/СheckHeight';
+import { PreparationStep } from './autobone-steps/Preparation';
 
 export function AutomaticProportionsPage() {
   const { l10n } = useLocalization();
@@ -50,6 +51,7 @@ export function AutomaticProportionsPage() {
               variant={state.alonePage ? 'alone' : 'onboarding'}
               steps={[
                 { type: 'numbered', component: PutTrackersOnStep },
+                { type: 'numbered', component: PreparationStep },
                 { type: 'numbered', component: RequirementsStep },
                 { type: 'numbered', component: CheckHeight },
                 { type: 'numbered', component: StartRecording },

gui/src/components/onboarding/pages/body-proportions/autobone-steps/Preparation.tsx

@@ -0,0 +1,70 @@
+import { ResetType } from 'solarxr-protocol';
+import { Button } from '@/components/commons/Button';
+import { Typography } from '@/components/commons/Typography';
+import { ResetButton } from '@/components/home/ResetButton';
+import { useLocalization } from '@fluent/react';
+import { useBreakpoint } from '@/hooks/breakpoint';
+
+export function PreparationStep({
+  nextStep,
+  prevStep,
+  variant,
+}: {
+  nextStep: () => void;
+  prevStep: () => void;
+  variant: 'onboarding' | 'alone';
+}) {
+  const { isMobile } = useBreakpoint('mobile');
+  const { l10n } = useLocalization();
+
+  return (
+    <div className="flex mobile:flex-col items-center w-full">
+      <div className="flex flex-col flex-grow justify-between">
+        <div className="flex flex-col gap-4 max-w-sm">
+          <Typography variant="main-title" bold>
+            {l10n.getString('onboarding-automatic_mounting-preparation-title')}
+          </Typography>
+          <div>
+            <Typography color="secondary">
+              {l10n.getString(
+                'onboarding-automatic_mounting-preparation-step-0'
+              )}
+            </Typography>
+            <Typography color="secondary">
+              {l10n.getString(
+                'onboarding-automatic_mounting-preparation-step-1'
+              )}
+            </Typography>
+          </div>
+        </div>
+        {isMobile && (
+          <div className="flex flex-col pt-1 items-center fill-background-50 justify-center px-12">
+            <img
+              src="/images/reset-pose.webp"
+              width={100}
+              alt="Reset position"
+            />
+          </div>
+        )}
+        <div className="flex gap-3 mobile:justify-between">
+          <Button
+            variant={variant === 'onboarding' ? 'secondary' : 'tertiary'}
+            onClick={prevStep}
+          >
+            {l10n.getString('onboarding-automatic_mounting-prev_step')}
+          </Button>
+          <ResetButton
+            variant="small"
+            type={ResetType.Full}
+            onReseted={nextStep}
+          ></ResetButton>
+        </div>
+      </div>
+      {!isMobile && (
+        <div className="flex flex-col pt-1 items-center fill-background-50 justify-center px-12">
+          <img src="/images/reset-pose.webp" width={90} alt="Reset position" />
+        </div>
+      )}
+    </div>
+  );
+}

gui/src/components/onboarding/pages/body-proportions/autobone-steps/СheckHeight.tsx

@@ -18,6 +18,7 @@ import {
 } from '@/components/onboarding/pages/body-proportions/ProportionsChoose';
 import { useLocaleConfig } from '@/i18n/config';
 import { useCountdown } from '@/hooks/countdown';
+import { TipBox } from '@/components/commons/TipBox';
 
 interface HeightForm {
   height: number;
@@ -104,18 +105,24 @@ export function CheckHeight({
               </Typography>
             </Localized>
 
-            <Button
-              variant="primary"
-              className="mt-2"
-              onClick={startCountdown}
-              disabled={isCounting}
-            >
-              {isCounting
-                ? sFormat.format(timer, 'second')
-                : l10n.getString(
-                    'onboarding-automatic_proportions-check_height-fetch_height'
-                  )}
-            </Button>
+            <div className="flex flex-row items-center mt-2 gap-2">
+              <Button
+                variant="primary"
+                onClick={startCountdown}
+                disabled={isCounting}
+              >
+                {isCounting
+                  ? sFormat.format(timer, 'second')
+                  : l10n.getString(
+                      'onboarding-automatic_proportions-check_height-fetch_height'
+                    )}
+              </Button>
+              <TipBox whitespace={true}>
+                {l10n.getString(
+                  'onboarding-automatic_proportions-check_height-guardian_tip'
+                )}
+              </TipBox>
+            </div>
           </div>
           <form className="flex flex-col self-center items-center justify-center">
             <NumberSelector