website refactor

apps/website/components/onboarding/OnboardingNavigation.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@/ui/Button';
+import { ButtonGroup } from '@/ui/ButtonGroup';
 
 interface OnboardingNavigationProps {
   onBack: () => void;
@@ -10,16 +11,14 @@ interface OnboardingNavigationProps {
 
 export function OnboardingNavigation({ onBack, onNext, isLastStep, canSubmit, loading }: OnboardingNavigationProps) {
   return (
-    <div className="mt-8 flex items-center justify-between">
+    <ButtonGroup alignment="between" marginTop={8}>
       <Button
         type="button"
         variant="secondary"
         onClick={onBack}
         disabled={loading}
-        className="flex items-center gap-2"
       >
-        <span>←</span>
-        Back
+        ← Back
       </Button>
 
       {!isLastStep ? (
@@ -28,31 +27,19 @@ export function OnboardingNavigation({ onBack, onNext, isLastStep, canSubmit, lo
           variant="primary"
           onClick={onNext}
           disabled={loading}
-          className="flex items-center gap-2"
         >
-          Continue
-          <span>→</span>
+          Continue →
         </Button>
       ) : (
         <Button
           type="submit"
           variant="primary"
           disabled={loading || !canSubmit}
-          className="flex items-center gap-2"
+          isLoading={loading}
         >
-          {loading ? (
-            <>
-              <span className="animate-spin">⟳</span>
-              Creating Profile...
-            </>
-          ) : (
-            <>
-              <span>✓</span>
-              Complete Setup
-            </>
-          )}
+          {loading ? 'Creating Profile...' : '✓ Complete Setup'}
         </Button>
       )}
-    </div>
+    </ButtonGroup>
   );
 }