feat(console): cloud preview about page (#3111)

2025-03-10 22:22:45 -05:00 · 2023-02-16 13:33:43 +08:00 · 2023-02-16 13:33:43 +08:00 · 06f98b6dc9
commit 06f98b6dc9
parent 66441b2197
28 changed files with 448 additions and 18 deletions
--- a/packages/console/src/App.tsx
+++ b/packages/console/src/App.tsx
@ -52,6 +52,7 @@ import AppEndpointsProvider, { AppEndpointsContext } from './containers/AppEndpo
 import ApiResourcePermissions from './pages/ApiResourceDetails/ApiResourcePermissions';
 import ApiResourceSettings from './pages/ApiResourceDetails/ApiResourceSettings';
 import CloudPreview from './pages/CloudPreview';
+import CloudPreviewAbout from './pages/CloudPreview/pages/About';
 import CloudPreviewWelcome from './pages/CloudPreview/pages/Welcome';
 import { CloudPreviewPage } from './pages/CloudPreview/types';
 import Profile from './pages/Profile';
@ -85,6 +86,7 @@ const Main = () => {
              <Route path="cloud-preview" element={<CloudPreview />}>
                <Route index element={<Navigate replace to={CloudPreviewPage.Welcome} />} />
                <Route path={CloudPreviewPage.Welcome} element={<CloudPreviewWelcome />} />
+                <Route path={CloudPreviewPage.About} element={<CloudPreviewAbout />} />
              </Route>
              <Route element={<AppContent />}>
                <Route path="*" element={<NotFound />} />
--- a/packages/console/src/assets/images/case.svg
+++ b/packages/console/src/assets/images/case.svg
@ -0,0 +1,20 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 17C7 14.7909 8.79086 13 11 13L37 13C39.2091 13 41 14.7909 41 17V35C41 37.2091 39.2091 39 37 39H11C8.79086 39 7 37.2091 7 35L7 17Z" fill="url(#paint0_linear_331_73558)"/>
+<path d="M37.6 13H10.4C8.52223 13 7 14.7909 7 17V23C7 25.2091 8.52223 27 10.4 27H17.2H18H19H20H20.6H27.4H28H29H30H30.8H37.6C39.4778 27 41 25.2091 41 23V17C41 14.7909 39.4778 13 37.6 13Z" fill="url(#paint1_linear_331_73558)"/>
+<rect opacity="0.6" x="17" y="22" width="3" height="8" rx="1.5" fill="#7B0093"/>
+<rect opacity="0.6" x="28" y="22" width="3" height="8" rx="1.5" fill="#7B0093"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 12C15 10.3431 16.3431 9 18 9H30C31.6569 9 33 10.3431 33 12V13C33 13.5523 32.5523 14 32 14C31.4477 14 31 13.5523 31 13V12C31 11.4477 30.5523 11 30 11H18C17.4477 11 17 11.4477 17 12V13C17 13.5523 16.5523 14 16 14C15.4477 14 15 13.5523 15 13V12Z" fill="#34353F"/>
+<circle cx="7" cy="19" r="1.5" stroke="#FFD5FF"/>
+<rect x="36.879" y="7" width="3" height="3" rx="0.5" transform="rotate(-45 36.879 7)" stroke="#E6DEFF"/>
+<rect x="18.7071" y="44.8284" width="3" height="3" rx="0.5" transform="rotate(-45 18.7071 44.8284)" stroke="#E6DEFF"/>
+<defs>
+<linearGradient id="paint0_linear_331_73558" x1="35.5104" y1="15.9792" x2="20.4222" y2="40.5618" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F07EFF"/>
+<stop offset="1" stop-color="#FFF480"/>
+</linearGradient>
+<linearGradient id="paint1_linear_331_73558" x1="32.5" y1="27" x2="14.3879" y2="10.0847" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5D34F2"/>
+<stop offset="1" stop-color="#FAABFF"/>
+</linearGradient>
+</defs>
+</svg>
--- a/packages/console/src/pages/CloudPreview/components/CardSelector/CardSelector.tsx
+++ b/packages/console/src/pages/CloudPreview/components/CardSelector/CardSelector.tsx
@ -7,12 +7,19 @@ type Props = {
  value: string;
  options: Option[];
  onChange: (value: string) => void;
+  optionClassName?: string;
 };

-const CardSelector = ({ name, value, options, onChange }: Props) => (
+const CardSelector = ({ name, value, options, onChange, optionClassName }: Props) => (
  <RadioGroup type="compact" value={value} name={name} onChange={onChange}>
    {options.map(({ value: optionValue, title, icon }) => (
-      <Radio key={optionValue} icon={icon} title={title} value={optionValue} />
+      <Radio
+        key={optionValue}
+        icon={icon}
+        title={title}
+        value={optionValue}
+        className={optionClassName}
+      />
    ))}
  </RadioGroup>
 );
--- a/packages/console/src/pages/CloudPreview/components/CardSelector/MultiCardSelector/index.tsx
+++ b/packages/console/src/pages/CloudPreview/components/CardSelector/MultiCardSelector/index.tsx
@ -10,9 +10,17 @@ type Props = {
  options: Option[];
  value: string[];
  onChange: (value: string[]) => void;
+  className?: string;
+  optionClassName?: string;
 };

-const MultiCardSelector = ({ options, value: selectedValues, onChange }: Props) => {
+const MultiCardSelector = ({
+  options,
+  value: selectedValues,
+  onChange,
+  className,
+  optionClassName,
+}: Props) => {
  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });

  const onToggle = (value: string) => {
@ -24,13 +32,17 @@ const MultiCardSelector = ({ options, value: selectedValues, onChange }: Props)
  };

  return (
-    <div className={styles.selector}>
+    <div className={classNames(styles.selector, className)}>
      {options.map(({ icon, title, value }) => (
        <div
          key={value}
          role="button"
          tabIndex={0}
-          className={classNames(styles.option, selectedValues.includes(value) && styles.selected)}
+          className={classNames(
+            styles.option,
+            selectedValues.includes(value) && styles.selected,
+            optionClassName
+          )}
          onClick={() => {
            onToggle(value);
          }}
--- a/packages/console/src/pages/CloudPreview/layout.module.scss
+++ b/packages/console/src/pages/CloudPreview/layout.module.scss
@ -1,3 +1,6 @@
+@use '@/scss/underscore' as _;
+@use './cloud-page-size.scss' as size;
+
 .page {
  height: 100%;
  display: flex;
@ -9,3 +12,14 @@
  flex: 1;
  overflow-y: auto;
 }
+
+.content {
+  margin: 0 auto;
+  max-width: size.$questionnaire-content-width;
+  border-radius: 16px;
+  padding: _.unit(12);
+  background-color: var(--color-layer-1);
+  margin-bottom: _.unit(4);
+  display: flex;
+  flex-direction: column;
+}
--- a/packages/console/src/pages/CloudPreview/pages/About/index.module.scss
+++ b/packages/console/src/pages/CloudPreview/pages/About/index.module.scss
@ -0,0 +1,31 @@
+@use '@/scss/underscore' as _;
+
+.title {
+  font: var(--font-title-1);
+  margin-top: _.unit(6);
+}
+
+.description {
+  font: var(--font-body-2);
+  margin-top: _.unit(3);
+}
+
+.form {
+  width: 100%;
+  margin-top: _.unit(6);
+
+  .titleSelector {
+    grid-template-columns: repeat(6, 1fr);
+    align-items: center;
+  }
+
+  .option {
+    display: flex;
+    justify-content: center;
+    min-height: 60px;
+  }
+
+  .cardFieldHeadline {
+    margin-bottom: _.unit(2);
+  }
+}
--- a/packages/console/src/pages/CloudPreview/pages/About/index.tsx
+++ b/packages/console/src/pages/CloudPreview/pages/About/index.tsx
@ -0,0 +1,115 @@
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+import Case from '@/assets/images/case.svg';
+import Button from '@/components/Button';
+import FormField from '@/components/FormField';
+import OverlayScrollbar from '@/components/OverlayScrollbar';
+import TextInput from '@/components/TextInput';
+import * as pageLayout from '@/pages/CloudPreview/layout.module.scss';
+
+import ActionBar from '../../components/ActionBar';
+import { CardSelector, MultiCardSelector } from '../../components/CardSelector';
+import type { Questionnaire } from '../../types';
+import { CloudPreviewPage } from '../../types';
+import { getPreviewPagePathname } from '../../utils';
+import * as styles from './index.module.scss';
+import { titleOptions, companySizeOptions, reasonOptions } from './options';
+
+const About = () => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const navigate = useNavigate();
+  const { control, register, handleSubmit } = useForm<Questionnaire>({
+    mode: 'onChange',
+  });
+
+  const onSubmit = handleSubmit(async (formData) => {
+    console.log(formData);
+  });
+
+  const onNext = async () => {
+    await onSubmit();
+    navigate(getPreviewPagePathname(CloudPreviewPage.SignInExperience));
+  };
+
+  const onBack = async () => {
+    navigate(getPreviewPagePathname(CloudPreviewPage.Welcome));
+  };
+
+  return (
+    <div className={pageLayout.page}>
+      <OverlayScrollbar className={pageLayout.contentContainer}>
+        <div className={pageLayout.content}>
+          <Case />
+          <div className={styles.title}>{t('cloud_preview.about.title')}</div>
+          <div className={styles.description}>{t('cloud_preview.about.description')}</div>
+          <form className={styles.form}>
+            <FormField
+              title="cloud_preview.about.title_field"
+              headlineClassName={styles.cardFieldHeadline}
+            >
+              <Controller
+                control={control}
+                name="titles"
+                defaultValue={[]}
+                render={({ field: { onChange, value } }) => (
+                  <MultiCardSelector
+                    className={styles.titleSelector}
+                    optionClassName={styles.option}
+                    value={value}
+                    options={titleOptions}
+                    onChange={onChange}
+                  />
+                )}
+              />
+            </FormField>
+            <FormField title="cloud_preview.about.company_name_field">
+              <TextInput
+                placeholder={t('cloud_preview.about.company_name_placeholder')}
+                {...register('companyName')}
+              />
+            </FormField>
+            <FormField
+              title="cloud_preview.about.company_size_field"
+              headlineClassName={styles.cardFieldHeadline}
+            >
+              <Controller
+                control={control}
+                name="companySize"
+                render={({ field: { onChange, value, name } }) => (
+                  <CardSelector
+                    name={name}
+                    value={value}
+                    options={companySizeOptions}
+                    optionClassName={styles.option}
+                    onChange={onChange}
+                  />
+                )}
+              />
+            </FormField>
+            <FormField
+              title="cloud_preview.about.reason_field"
+              headlineClassName={styles.cardFieldHeadline}
+            >
+              <Controller
+                control={control}
+                name="reasons"
+                defaultValue={[]}
+                render={({ field: { onChange, value } }) => (
+                  <MultiCardSelector value={value} options={reasonOptions} onChange={onChange} />
+                )}
+              />
+            </FormField>
+          </form>
+        </div>
+      </OverlayScrollbar>
+      <ActionBar>
+        <Button title="general.next" type="primary" onClick={onNext} />
+        <Button title="general.back" onClick={onBack} />
+      </ActionBar>
+    </div>
+  );
+};
+
+export default About;
--- a/packages/console/src/pages/CloudPreview/pages/About/options.tsx
+++ b/packages/console/src/pages/CloudPreview/pages/About/options.tsx
@ -0,0 +1,29 @@
+import type { Option as SelectorOption } from '@/pages/CloudPreview/components/CardSelector';
+
+import { CompanySize, Reason, Title } from '../../types';
+
+export const titleOptions: SelectorOption[] = [
+  { title: 'cloud_preview.about.title_developer', value: Title.Developer },
+  { title: 'cloud_preview.about.title_team_lead', value: Title.TeamLead },
+  { title: 'cloud_preview.about.title_ceo', value: Title.Ceo },
+  { title: 'cloud_preview.about.title_cto', value: Title.Cto },
+  { title: 'cloud_preview.about.title_product', value: Title.Product },
+  { title: 'cloud_preview.about.title_others', value: Title.Others },
+];
+
+export const companySizeOptions: SelectorOption[] = [
+  { title: 'cloud_preview.about.company_size_1', value: CompanySize.Scale1 },
+  { title: 'cloud_preview.about.company_size_1_49', value: CompanySize.Scale2 },
+  { title: 'cloud_preview.about.company_size_50_199', value: CompanySize.Scale3 },
+  { title: 'cloud_preview.about.company_size_200_999', value: CompanySize.Scale4 },
+  { title: 'cloud_preview.about.company_size_1000_plus', value: CompanySize.Scale5 },
+];
+
+export const reasonOptions: SelectorOption[] = [
+  { title: 'cloud_preview.about.reason_adoption', value: Reason.Adoption },
+  { title: 'cloud_preview.about.reason_replacement', value: Reason.Replacement },
+  { title: 'cloud_preview.about.reason_evaluation', value: Reason.Evaluation },
+  { title: 'cloud_preview.about.reason_experimentation', value: Reason.Experimentation },
+  { title: 'cloud_preview.about.reason_aesthetics', value: Reason.Aesthetics },
+  { title: 'cloud_preview.about.reason_others', value: Reason.Others },
+];
--- a/packages/console/src/pages/CloudPreview/pages/Welcome/index.module.scss
+++ b/packages/console/src/pages/CloudPreview/pages/Welcome/index.module.scss
@ -1,15 +1,6 @@
@use '@/scss/underscore' as _;
-@use '@/pages/CloudPreview/cloud-page-size.scss' as size;

 .content {
-  margin: 0 auto;
-  max-width: size.$questionnaire-content-width;
-  border-radius: 16px;
-  padding: _.unit(12);
-  background-color: var(--color-layer-1);
-  margin-bottom: _.unit(4);
-  display: flex;
-  flex-direction: column;
  align-items: center;
 }

--- a/packages/console/src/pages/CloudPreview/pages/Welcome/index.tsx
+++ b/packages/console/src/pages/CloudPreview/pages/Welcome/index.tsx
@ -1,5 +1,7 @@
+import classNames from 'classnames';
 import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';

 import Congrats from '@/assets/images/congrats.svg';
 import Button from '@/components/Button';
@ -10,11 +12,14 @@ import * as pageLayout from '@/pages/CloudPreview/layout.module.scss';
 import ActionBar from '../../components/ActionBar';
 import { CardSelector } from '../../components/CardSelector';
 import type { Questionnaire } from '../../types';
+import { CloudPreviewPage } from '../../types';
+import { getPreviewPagePathname } from '../../utils';
 import * as styles from './index.module.scss';
 import { deploymentTypeOptions, projectOptions } from './options';

 const Welcome = () => {
  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const navigate = useNavigate();
  const {
    control,
    handleSubmit,
@ -24,14 +29,17 @@ const Welcome = () => {
  const onSubmit = handleSubmit(async (formData) => {
    // TODO @xiaoyijun send data to the backend
    console.log(formData);
-
-    // TODO @xiaoyijun navigate to the about users page
  });

+  const onNext = async () => {
+    await onSubmit();
+    navigate(getPreviewPagePathname(CloudPreviewPage.About));
+  };
+
  return (
    <div className={pageLayout.page}>
      <OverlayScrollbar className={pageLayout.contentContainer}>
-        <div className={styles.content}>
+        <div className={classNames(pageLayout.content, styles.content)}>
          <Congrats className={styles.congrats} />
          <div className={styles.title}>{t('cloud_preview.welcome.title')}</div>
          <div className={styles.description}>{t('cloud_preview.welcome.description')}</div>
@ -80,7 +88,7 @@ const Welcome = () => {
          title="general.next"
          type="primary"
          disabled={isSubmitting || !isValid}
-          onClick={onSubmit}
+          onClick={onNext}
        />
      </ActionBar>
    </div>
--- a/packages/console/src/pages/CloudPreview/types.ts
+++ b/packages/console/src/pages/CloudPreview/types.ts
@ -14,7 +14,37 @@ export enum DeploymentType {
  Cloud = 'cloud',
 }

+export enum Title {
+  Developer = 'developer',
+  TeamLead = 'team-lead',
+  Ceo = 'ceo',
+  Cto = 'cto',
+  Product = 'product',
+  Others = 'others',
+}
+
+export enum CompanySize {
+  Scale1 = '1',
+  Scale2 = '1-49',
+  Scale3 = '50-199',
+  Scale4 = '200-999',
+  Scale5 = '1000+',
+}
+
+export enum Reason {
+  Adoption = 'adoption',
+  Replacement = 'replacement',
+  Evaluation = 'evaluation',
+  Experimentation = 'experimentation',
+  Aesthetics = 'aesthetics',
+  Others = 'others',
+}
+
 export type Questionnaire = {
  project: Project;
  deploymentType: DeploymentType;
+  titles: string[];
+  companyName: string;
+  companySize: string;
+  reasons: string[];
 };
--- a/packages/console/src/pages/CloudPreview/utils.ts
+++ b/packages/console/src/pages/CloudPreview/utils.ts
@ -0,0 +1,3 @@
+import type { CloudPreviewPage } from './types';
+
+export const getPreviewPagePathname = (page: CloudPreviewPage) => `/cloud-preview/${page}`;
--- a/packages/phrases/src/locales/de/translation/admin-console/cloud-preview.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/cloud-preview.ts
@ -9,6 +9,26 @@ const cloud_preview = {
    deployment_type_field: 'Prefer open-source or cloud?', // UNTRANSLATED
    deployment_type_opensource: 'Opensource', // UNTRANSLATED
    deployment_type_cloud: 'Cloud', // UNTRANSLATED
+  },
+  about: {
+    title: 'A little bit about you', // UNTRANSLATED
+    description:
+      'Let‘s make your Logto experience unique to you by getting to know you better. Your information is safe with us.', // UNTRANSLATED
+    title_field: 'Your title', // UNTRANSLATED
+    title_developer: 'Developer', // UNTRANSLATED
+    title_team_lead: 'Team Lead', // UNTRANSLATED
+    title_ceo: 'CEO', // UNTRANSLATED
+    title_cto: 'CTO', // UNTRANSLATED
+    title_product: 'Product', // UNTRANSLATED
+    title_others: 'Others', // UNTRANSLATED
+    company_name_field: 'Company name', // UNTRANSLATED
+    company_name_placeholder: 'Acme.co', // UNTRANSLATED
+    company_size_field: 'How’s your company size?', // UNTRANSLATED
+    company_size_1: '1', // UNTRANSLATED
+    company_size_1_49: '1-49', // UNTRANSLATED
+    company_size_50_199: '50-199', // UNTRANSLATED
+    company_size_200_999: '200-999', // UNTRANSLATED
+    company_size_1000_plus: '1000+', // UNTRANSLATED
    reason_field: 'I’m signing up because', // UNTRANSLATED
    reason_adoption: 'Implementing new tech infra for early projects', // UNTRANSLATED
    reason_replacement: 'Seeking a replacement for the current authentication system', // UNTRANSLATED
--- a/packages/phrases/src/locales/de/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/general.ts
@ -2,6 +2,7 @@ const general = {
  placeholder: 'Platzhalter',
  skip: 'Überspringen',
  next: 'Weiter',
+  back: 'Back', // UNTRANSLATED
  retry: 'Erneut versuchen',
  done: 'Fertig',
  search: 'Suche',
--- a/packages/phrases/src/locales/en/translation/admin-console/cloud-preview.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/cloud-preview.ts
@ -9,6 +9,26 @@ const cloud_preview = {
    deployment_type_field: 'Prefer open-source or cloud?',
    deployment_type_opensource: 'Opensource',
    deployment_type_cloud: 'Cloud',
+  },
+  about: {
+    title: 'A little bit about you',
+    description:
+      'Let‘s make your Logto experience unique to you by getting to know you better. Your information is safe with us.',
+    title_field: 'Your title',
+    title_developer: 'Developer',
+    title_team_lead: 'Team Lead',
+    title_ceo: 'CEO',
+    title_cto: 'CTO',
+    title_product: 'Product',
+    title_others: 'Others',
+    company_name_field: 'Company name',
+    company_name_placeholder: 'Acme.co',
+    company_size_field: 'How’s your company size?',
+    company_size_1: '1',
+    company_size_1_49: '1-49',
+    company_size_50_199: '50-199',
+    company_size_200_999: '200-999',
+    company_size_1000_plus: '1000+',
    reason_field: 'I’m signing up because',
    reason_adoption: 'Implementing new tech infra for early projects',
    reason_replacement: 'Seeking a replacement for the current authentication system',
--- a/packages/phrases/src/locales/en/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/general.ts
@ -2,6 +2,7 @@ const general = {
  placeholder: 'Placeholder',
  skip: 'Skip',
  next: 'Next',
+  back: 'Back',
  retry: 'Try Again',
  done: 'Done',
  search: 'Search',
--- a/packages/phrases/src/locales/fr/translation/admin-console/cloud-preview.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/cloud-preview.ts
@ -9,6 +9,26 @@ const cloud_preview = {
    deployment_type_field: 'Prefer open-source or cloud?', // UNTRANSLATED
    deployment_type_opensource: 'Opensource', // UNTRANSLATED
    deployment_type_cloud: 'Cloud', // UNTRANSLATED
+  },
+  about: {
+    title: 'A little bit about you', // UNTRANSLATED
+    description:
+      'Let‘s make your Logto experience unique to you by getting to know you better. Your information is safe with us.', // UNTRANSLATED
+    title_field: 'Your title', // UNTRANSLATED
+    title_developer: 'Developer', // UNTRANSLATED
+    title_team_lead: 'Team Lead', // UNTRANSLATED
+    title_ceo: 'CEO', // UNTRANSLATED
+    title_cto: 'CTO', // UNTRANSLATED
+    title_product: 'Product', // UNTRANSLATED
+    title_others: 'Others', // UNTRANSLATED
+    company_name_field: 'Company name', // UNTRANSLATED
+    company_name_placeholder: 'Acme.co', // UNTRANSLATED
+    company_size_field: 'How’s your company size?', // UNTRANSLATED
+    company_size_1: '1', // UNTRANSLATED
+    company_size_1_49: '1-49', // UNTRANSLATED
+    company_size_50_199: '50-199', // UNTRANSLATED
+    company_size_200_999: '200-999', // UNTRANSLATED
+    company_size_1000_plus: '1000+', // UNTRANSLATED
    reason_field: 'I’m signing up because', // UNTRANSLATED
    reason_adoption: 'Implementing new tech infra for early projects', // UNTRANSLATED
    reason_replacement: 'Seeking a replacement for the current authentication system', // UNTRANSLATED
--- a/packages/phrases/src/locales/fr/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/general.ts
@ -2,6 +2,7 @@ const general = {
  placeholder: 'Placeholder',
  skip: 'Passer',
  next: 'Suivant',
+  back: 'Back', // UNTRANSLATED
  retry: 'Essayez à nouveau',
  done: 'Terminé',
  search: 'Rechercher',
--- a/packages/phrases/src/locales/ko/translation/admin-console/cloud-preview.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/cloud-preview.ts
@ -9,6 +9,26 @@ const cloud_preview = {
    deployment_type_field: 'Prefer open-source or cloud?', // UNTRANSLATED
    deployment_type_opensource: 'Opensource', // UNTRANSLATED
    deployment_type_cloud: 'Cloud', // UNTRANSLATED
+  },
+  about: {
+    title: 'A little bit about you', // UNTRANSLATED
+    description:
+      'Let‘s make your Logto experience unique to you by getting to know you better. Your information is safe with us.', // UNTRANSLATED
+    title_field: 'Your title', // UNTRANSLATED
+    title_developer: 'Developer', // UNTRANSLATED
+    title_team_lead: 'Team Lead', // UNTRANSLATED
+    title_ceo: 'CEO', // UNTRANSLATED
+    title_cto: 'CTO', // UNTRANSLATED
+    title_product: 'Product', // UNTRANSLATED
+    title_others: 'Others', // UNTRANSLATED
+    company_name_field: 'Company name', // UNTRANSLATED
+    company_name_placeholder: 'Acme.co', // UNTRANSLATED
+    company_size_field: 'How’s your company size?', // UNTRANSLATED
+    company_size_1: '1', // UNTRANSLATED
+    company_size_1_49: '1-49', // UNTRANSLATED
+    company_size_50_199: '50-199', // UNTRANSLATED
+    company_size_200_999: '200-999', // UNTRANSLATED
+    company_size_1000_plus: '1000+', // UNTRANSLATED
    reason_field: 'I’m signing up because', // UNTRANSLATED
    reason_adoption: 'Implementing new tech infra for early projects', // UNTRANSLATED
    reason_replacement: 'Seeking a replacement for the current authentication system', // UNTRANSLATED
--- a/packages/phrases/src/locales/ko/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/general.ts
@ -2,6 +2,7 @@ const general = {
  placeholder: '플레이스홀더',
  skip: '건너뛰기',
  next: '다음',
+  back: 'Back', // UNTRANSLATED
  retry: '재시도',
  done: '완료',
  search: '검색',
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/cloud-preview.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/cloud-preview.ts
@ -9,6 +9,26 @@ const cloud_preview = {
    deployment_type_field: 'Prefer open-source or cloud?', // UNTRANSLATED
    deployment_type_opensource: 'Opensource', // UNTRANSLATED
    deployment_type_cloud: 'Cloud', // UNTRANSLATED
+  },
+  about: {
+    title: 'A little bit about you', // UNTRANSLATED
+    description:
+      'Let‘s make your Logto experience unique to you by getting to know you better. Your information is safe with us.', // UNTRANSLATED
+    title_field: 'Your title', // UNTRANSLATED
+    title_developer: 'Developer', // UNTRANSLATED
+    title_team_lead: 'Team Lead', // UNTRANSLATED
+    title_ceo: 'CEO', // UNTRANSLATED
+    title_cto: 'CTO', // UNTRANSLATED
+    title_product: 'Product', // UNTRANSLATED
+    title_others: 'Others', // UNTRANSLATED
+    company_name_field: 'Company name', // UNTRANSLATED
+    company_name_placeholder: 'Acme.co', // UNTRANSLATED
+    company_size_field: 'How’s your company size?', // UNTRANSLATED
+    company_size_1: '1', // UNTRANSLATED
+    company_size_1_49: '1-49', // UNTRANSLATED
+    company_size_50_199: '50-199', // UNTRANSLATED
+    company_size_200_999: '200-999', // UNTRANSLATED
+    company_size_1000_plus: '1000+', // UNTRANSLATED
    reason_field: 'I’m signing up because', // UNTRANSLATED
    reason_adoption: 'Implementing new tech infra for early projects', // UNTRANSLATED
    reason_replacement: 'Seeking a replacement for the current authentication system', // UNTRANSLATED
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/general.ts
@ -2,6 +2,7 @@ const general = {
  placeholder: 'Placeholder',
  skip: 'Pular',
  next: 'Próximo',
+  back: 'Back', // UNTRANSLATED
  retry: 'Tente novamente',
  done: 'Feito',
  search: 'Buscar',
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/cloud-preview.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/cloud-preview.ts
@ -9,6 +9,26 @@ const cloud_preview = {
    deployment_type_field: 'Prefer open-source or cloud?', // UNTRANSLATED
    deployment_type_opensource: 'Opensource', // UNTRANSLATED
    deployment_type_cloud: 'Cloud', // UNTRANSLATED
+  },
+  about: {
+    title: 'A little bit about you', // UNTRANSLATED
+    description:
+      'Let‘s make your Logto experience unique to you by getting to know you better. Your information is safe with us.', // UNTRANSLATED
+    title_field: 'Your title', // UNTRANSLATED
+    title_developer: 'Developer', // UNTRANSLATED
+    title_team_lead: 'Team Lead', // UNTRANSLATED
+    title_ceo: 'CEO', // UNTRANSLATED
+    title_cto: 'CTO', // UNTRANSLATED
+    title_product: 'Product', // UNTRANSLATED
+    title_others: 'Others', // UNTRANSLATED
+    company_name_field: 'Company name', // UNTRANSLATED
+    company_name_placeholder: 'Acme.co', // UNTRANSLATED
+    company_size_field: 'How’s your company size?', // UNTRANSLATED
+    company_size_1: '1', // UNTRANSLATED
+    company_size_1_49: '1-49', // UNTRANSLATED
+    company_size_50_199: '50-199', // UNTRANSLATED
+    company_size_200_999: '200-999', // UNTRANSLATED
+    company_size_1000_plus: '1000+', // UNTRANSLATED
    reason_field: 'I’m signing up because', // UNTRANSLATED
    reason_adoption: 'Implementing new tech infra for early projects', // UNTRANSLATED
    reason_replacement: 'Seeking a replacement for the current authentication system', // UNTRANSLATED
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/general.ts
@ -2,6 +2,7 @@ const general = {
  placeholder: 'Placeholder',
  skip: 'Saltar',
  next: 'Seguine',
+  back: 'Back', // UNTRANSLATED
  retry: 'Tente novamente',
  done: 'Feito',
  search: 'Pesquisar',
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/cloud-preview.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/cloud-preview.ts
@ -9,6 +9,26 @@ const cloud_preview = {
    deployment_type_field: 'Prefer open-source or cloud?', // UNTRANSLATED
    deployment_type_opensource: 'Opensource', // UNTRANSLATED
    deployment_type_cloud: 'Cloud', // UNTRANSLATED
+  },
+  about: {
+    title: 'A little bit about you', // UNTRANSLATED
+    description:
+      'Let‘s make your Logto experience unique to you by getting to know you better. Your information is safe with us.', // UNTRANSLATED
+    title_field: 'Your title', // UNTRANSLATED
+    title_developer: 'Developer', // UNTRANSLATED
+    title_team_lead: 'Team Lead', // UNTRANSLATED
+    title_ceo: 'CEO', // UNTRANSLATED
+    title_cto: 'CTO', // UNTRANSLATED
+    title_product: 'Product', // UNTRANSLATED
+    title_others: 'Others', // UNTRANSLATED
+    company_name_field: 'Company name', // UNTRANSLATED
+    company_name_placeholder: 'Acme.co', // UNTRANSLATED
+    company_size_field: 'How’s your company size?', // UNTRANSLATED
+    company_size_1: '1', // UNTRANSLATED
+    company_size_1_49: '1-49', // UNTRANSLATED
+    company_size_50_199: '50-199', // UNTRANSLATED
+    company_size_200_999: '200-999', // UNTRANSLATED
+    company_size_1000_plus: '1000+', // UNTRANSLATED
    reason_field: 'I’m signing up because', // UNTRANSLATED
    reason_adoption: 'Implementing new tech infra for early projects', // UNTRANSLATED
    reason_replacement: 'Seeking a replacement for the current authentication system', // UNTRANSLATED
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/general.ts
@ -2,6 +2,7 @@ const general = {
  placeholder: 'Placeholder',
  skip: 'Geç',
  next: 'Sonraki',
+  back: 'Back', // UNTRANSLATED
  retry: 'Tekrar Deneyin',
  done: 'Bitti',
  search: 'Ara',
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/cloud-preview.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/cloud-preview.ts
@ -9,6 +9,26 @@ const cloud_preview = {
    deployment_type_field: 'Prefer open-source or cloud?', // UNTRANSLATED
    deployment_type_opensource: 'Opensource', // UNTRANSLATED
    deployment_type_cloud: 'Cloud', // UNTRANSLATED
+  },
+  about: {
+    title: 'A little bit about you', // UNTRANSLATED
+    description:
+      'Let‘s make your Logto experience unique to you by getting to know you better. Your information is safe with us.', // UNTRANSLATED
+    title_field: 'Your title', // UNTRANSLATED
+    title_developer: 'Developer', // UNTRANSLATED
+    title_team_lead: 'Team Lead', // UNTRANSLATED
+    title_ceo: 'CEO', // UNTRANSLATED
+    title_cto: 'CTO', // UNTRANSLATED
+    title_product: 'Product', // UNTRANSLATED
+    title_others: 'Others', // UNTRANSLATED
+    company_name_field: 'Company name', // UNTRANSLATED
+    company_name_placeholder: 'Acme.co', // UNTRANSLATED
+    company_size_field: 'How’s your company size?', // UNTRANSLATED
+    company_size_1: '1', // UNTRANSLATED
+    company_size_1_49: '1-49', // UNTRANSLATED
+    company_size_50_199: '50-199', // UNTRANSLATED
+    company_size_200_999: '200-999', // UNTRANSLATED
+    company_size_1000_plus: '1000+', // UNTRANSLATED
    reason_field: 'I’m signing up because', // UNTRANSLATED
    reason_adoption: 'Implementing new tech infra for early projects', // UNTRANSLATED
    reason_replacement: 'Seeking a replacement for the current authentication system', // UNTRANSLATED
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/general.ts
@ -2,6 +2,7 @@ const general = {
  placeholder: '占位符',
  skip: '跳过',
  next: '下一步',
+  back: '上一步',
  retry: '重试',
  done: '完成',
  search: '搜索',