🧹 chore(www): Update the onboarding (#207)

## Description
<!-- Briefly describe the purpose and scope of your changes -->

## Related Issues
<!-- List any related issues (e.g., "Closes #123", "Fixes #456") -->

## Type of Change

- [x] Bug fix (non-breaking change)
- [ ] New feature (non-breaking change)
- [ ] Breaking change (fix or feature that changes existing
functionality)
- [ ] Documentation update
- [ ] Other (please describe):

## Checklist

- [ ] I have updated relevant documentation
- [ ] My code follows the project's coding style
- [ ] My changes generate no new warnings/errors

## Notes for Reviewers
<!-- Point out areas you'd like reviewers to focus on, questions you
have, or decisions that need discussion -->

## Screenshots/Demo
<!-- If applicable, add screenshots or a GIF demo of your changes
(especially for UI changes) -->

## Additional Context
<!-- Add any other context about the pull request here -->

packages/www/src/pages/new.tsx

@@ -28,13 +28,14 @@ const Hr = styled("hr", {
 })
 
 const Plan = {
-    Pro: 'Pro',
-    Basic: 'Basic',
+    Pro: 'BYOG',
+    Basic: 'Hosted',
 } as const;
 
 const schema = v.object({
     plan: v.pipe(
         v.enum(Plan),
+        v.minLength(2,"Please choose a plan"),
     ),
     display_name: v.pipe(
         v.string(),
@@ -48,6 +49,39 @@ const schema = v.object({
     )
 })
 
+// const Details = styled("details", {
+//     base: {
+//         overflow: "hidden",
+//         transition: "max-height .2s ease"
+//     }
+// })
+
+// const Summary = styled("summary", {
+//     base: {
+//         userSelect: "none",
+//         cursor: "pointer",
+//         listStyle: "none"
+//     }
+// })
+
+// const SVG = styled("svg", {
+//     base: {
+//         color: theme.color.gray.d900,
+//         width: 20,
+//         height: 20,
+//         marginRight: theme.space[2]
+//     }
+// })
+
+// const Subtitle = styled("p", {
+//     base: {
+//         color: theme.color.gray.d900,
+//         fontSize: theme.font.size.sm,
+//         fontWeight: theme.font.weight.regular,
+//         lineHeight: "1rem"
+//     }
+// })
+
 export function CreateTeamComponent() {
     const [form, { Form, Field }] = createForm({
         validate: valiForm(schema),
@@ -56,7 +90,7 @@ export function CreateTeamComponent() {
     return (
         <FullScreen>
             <Container horizontal="center" style={{ width: "100%", padding: "1rem", }} space="1" >
-                <Container style={{ "width": "100%","max-width": "380px" }} horizontal="start" space="3" >
+                <Container style={{ "width": "100%", "max-width": "380px" }} horizontal="start" space="3" >
                     <Text font="heading" spacing="none" size="3xl" weight="semibold">
                         Create a Team
                     </Text>
@@ -101,17 +135,27 @@ export function CreateTeamComponent() {
                                         {...props}
                                         value={field.value}
                                         badges={[
-                                            { label: "Basic", color: "gray" },
-                                            { label: "Pro", color: "blue" }
+                                            { label: "BYOG", color: "purple" },
+                                            { label: "Hosted", color: "blue" },
                                         ]}
                                         options={[
-                                            { label: "I'll be playing all by myself", value: 'Basic' },
-                                            { label: "I'll be playing with friends and family", value: 'Pro' },
+                                            { label: "I'll be playing on my machine", value: 'BYOG' },
+                                            { label: "I'll be playing on the cloud", value: 'Hosted' },
                                         ]}
                                     />
                                 </FormField>
                             )}
                         </Field>
+                        {/* <Details>
+                            <Summary>
+                                <div style={{ "display": "flex", "align-items": "center" }}>
+                                    <SVG xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M8.59 16.59L13.17 12L8.59 7.41L10 6l6 6l-6 6z" /></SVG>
+                                    <Subtitle>
+                                        Continuing will start a 14-day Pro plan trial.
+                                    </Subtitle>
+                                </div>
+                            </Summary>
+                        </Details> */}
                         <Button color="brand">
                             Continue
                         </Button>