workflow-tutorial-step1-screen.hbs

<div class="flex flex-col items-center w-full" ...attributes>
  <div class="w-12 h-12 rounded-full bg-gray-50 border border-gray-200 dark:bg-gray-925 dark:border-gray-700 flex items-center justify-center mb-4">
    <span class="text-gray-700 dark:text-gray-300 font-semibold">1</span>
  </div>

  <div class="px-3 sm:px-6 py-6 bg-gray-50 dark:bg-gray-925 rounded-sm border border-gray-200 dark:border-gray-700 mb-6">
    <div class="mb-4 font-bold text-lg text-gray-700 dark:text-gray-100 text-center text-pretty">
      Write code in your repo
    </div>

    <div class="prose prose-sm dark:prose-invert mb-4 text-center text-pretty">
      <p>
        The Git repository you cloned in the last step is where you will make all your changes.
      </p>
    </div>

    <div
      class="w-full h-48 mb-4 bg-white dark:bg-gray-925 border border-gray-200 dark:border-gray-700 rounded-sm flex flex-col items-stretch justify-center p-4"
    >
      <FileTreePreview @rootFolder={{this.rootFolderForfileTreePreview}} />
    </div>

    <div class="prose prose-sm dark:prose-invert text-center text-pretty">
      <p>
        It contains some basic
        {{@step.repository.language.name}}
        code to get you started.
      </p>
    </div>
  </div>

  <PrimaryButton data-test-next-button class="mb-6" {{on "click" @onNextButtonClick}}>
    Continue →
  </PrimaryButton>

  <CoursePage::SetupStepCompleteModal::StepSwitcher @currentStep={{1}} @totalSteps={{2}} @onStepSelect={{@onStepSelect}} />
</div>