Ai powered form builder

I'd like to build a product like Typeform but powered by Ai, rather than multi step surveys/forms, one Ai text input and the Ai will render the form/survey pre-filled with answers extracted from the single text input.

Build a landing page for this, make sure to include some demos

I'll create a landing page for your AI-powered form builder, including a demo section. Let's call this product "FormAI" for now. Here's the implementation:

This landing page for FormAI includes:

A hero section with a catchy headline and a call-to-action button.
A demo section that simulates AI-powered form filling. Users can input a description, and the "AI" will generate a pre-filled form based on that input.
A features section highlighting the key benefits of FormAI.
A final call-to-action section encouraging users to sign up.

The demo section provides a simple illustration of how the AI-powered form filling might work. In a real implementation, you'd need to integrate with an actual AI service to process the user's input and generate appropriate form fields and values.

To further enhance this landing page, you could consider adding:

Customer testimonials or case studies
Pricing information
A FAQ section
Integration with an email capture system for the CTA buttons
More detailed examples or use cases in the demo section

Let me know if you'd like any changes or additions to this landing page!

In the demo, let me edit the age

I'll modify the Demo component to allow editing of the age field in the generated form. This will make the demo more interactive and showcase the flexibility of the AI-generated form.

Let's update the Demo component to allow editing of the age field:

Now, let me explain the changes:

We've added a new state variable editableAge to manage the editable age input separately from the main form data.
In the handleSubmit function, we now set the initial value of editableAge when the form is generated.
We've created a new handleAgeChange function that updates both the editableAge state and the age field in the formData state when the user modifies the age input.
In the rendering part, we've added a condition to render a different input for the age field. This input is editable and uses the editableAge state, while other fields remain read-only.
We've also added some accessibility improvements by associating labels with inputs using the htmlFor attribute and id on inputs.

These changes allow users to edit the age field in the generated form while keeping other fields read-only. This demonstrates how the AI-generated form can be interactive and adjustable, providing a more realistic representation of how FormAI might work in practice.

Is there anything else you'd like to modify or add to the demo or any other part of the landing page?

app

components

Demo.tsx