gpt4 whiteboard test

gistfile1.txt

query:
you are an expert software developer

this was my teams whiteboarding session for our onboarding flow

you need to write the code for this in Next.js + Tailwind CSS

Take a deep breath and think step-by-step about how you will do this

Now write complete code for this working one step at a time.

Whiteboard has the following screens:

E-mail

Name

Age with following remarks: should refer to you by name once provided

Then depending if the use is over 18 show site screen or if under 18 show screen for kids 


result:
Based on your description, it seems you are looking to create a multi-step form in Next.js and Tailwind CSS to gather user information such as email, name and age. This is how we can approach it:

Note: This is a high level demonstration of how things directly related to task are achievable in Next.js and Tailwind CSS. Full implementation might require further details and additional code handling.

```jsx
import { useState } from 'react';
import 'tailwindcss/tailwind.css'

function Onboarding() {
  const [step, setStep] = useState(0);
  const [formData, setFormData] = useState({ name: "", email: "", age: "" });

  const handleInputChange = (event) => {
    setFormData({ ...formData, [event.target.name]: event.target.value });
  };

  const handleSubmit = () => {
    if (step < 2) {
      setStep(step + 1);
    }
    else {
      // Process form data or routing.
      // For demonstration, just logging in the console
      console.log(formData);
    }
  };

  return (
    <div className="container mx-auto px-4">
      <form>
        {step === 0 && (
          <div>
            <label>Email:</label>
            <input type="email" name="email" className="border px-2" onChange={handleInputChange} />
          </div>
        )}
        {step === 1 && (
          <div>
            <label>Name:</label>
            <input type="text" name="name" className="border px-2" onChange={handleInputChange} />
          </div>
        )}
        {step === 2 && (
          <div>
            <label>Age:</label>
            <input type="number" name="age" className="border px-2" onChange={handleInputChange} />
          </div>
        )}
        <button type="button" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2" onClick={handleSubmit}>
          Next
        </button>
      </form>
      
      {/* Age-based content showing */}
      {step === 3 && formData.age >= 18 && (
        <div>
          <h1>Welcome {formData.name}, to our site</h1> 
        </div>
      )}
      {step === 3 && formData.age < 18 && (
        <div>
          <h1>Welcome {formData.name}, to our kid's site</h1> 
        </div>
      )}

    </div>
  );
}

export default Onboarding;
```

In the above code, there is an `Onboarding` functional component which uses some local states to track user's current step on the form and the data inputted on the form so far. Per your description, the form is broken down into steps. In each step, a different form input is rendered (email, name, or age). 

The `handleInputChange` function updates the corresponding value in the state whenever the input field is changed.

The `handleSubmit` function advances to the next step when the 'Next' button is clicked provided it is not the last step. Else, it processes the form data. For demonstration, it just logs in the browser's console.

Finally, based on the age criteria, it shows different content. If the user's age is 18 or over, it shows a welcoming message for the main site. And, if it's under 18, it shows a welcoming message for the kid's site. The message using the name the user has provided.