User Onboarding

Stepper guiding new users through profile creation, Bluetooth pairing with a partner, and a brief format tutorial.

User Onboarding

Welcome to Cup of Couples

Continue

View DSL Source

section
  stack(gap="xl")
    heading(level="1") Welcome to Cup of Couples

    stepper(orientation="vertical")
      step(label="Create Profile" status="active")
        stack(gap="md")
          input(label="Your name" placeholder="e.g. Alex" required)
          input(label="Partner's name" placeholder="e.g. Sam" required)
          button(id="save-profile-btn" variant="primary" width="full") Continue

      step(label="Pair with Partner" status="pending")
        stack(gap="md")
          text Enable Bluetooth and bring your devices close together.
          row(justify="center")
            placeholder(type="image" label="Bluetooth pairing animation" width="120px" height="120px")
          button(id="start-pairing-btn" variant="primary" width="full") Start Pairing

      step(label="Learn the Basics" status="pending")
        stack(gap="md")
          text You'll take turns speaking. When it's your turn, speak freely. When it's your partner's turn, just listen.
          button(id="start-tutorial-btn" variant="primary" width="full") Try a Practice Round
          button(variant="ghost" width="full") Skip Tutorial