Simple mode and detail mode

[SnoozingJellyfish]

Create a simple mode form with minimum input fields and a detailed mode form with many input fields.
The GUI image is shown in Figma.

First description page

Create two buttons at the bottom on first description page, "かんたん計算" and "くわしく計算".
Transition from each button to each input form. Display a label at the top of the input form to indicate which mode it is.

Input form

The detailed form is the same as the form so far.
The simple form displays only the following items.

• Prefecture/city where "you" are staying (required)
• Your annual income (required)
• Presence of spouse
• Number of your children
• (If there is a spouse, the annual income of the "spouse")
• (If there are children, age of "children" (required))

It's probably desirable to share the same code as much as possible between detailed and simple form.
(For example, there is a way to select different components for each simple and detailed mode in you.tsx).
The child's age need to be converted to date of birth in the frontend and then posted to the backend as in detailed mode. Any date of birth that would be that age on the current date is fine.
Items that are not entered in the simple form are left as defaults such as 0 or null and do not need to be updated.

Result page

Please display a label at the top of the result page so that users can know which mode the result is.
In case of simple mode, please put a "くわしく計算" button at the bottom so that calculation in detailed mode can be done later. When the button is pressed, it transitions to the input form in detail mode.

Design

Teal 500 from chakra.ci is used for "かんたん計算", and Blue 500 is used for "くわしく計算".
If you know a desirable design or UI, please apply it.

[SnoozingJellyfish]

This issue is closed by PR #77.