From 57f25e6b04b59d7156826997067420acdd2bf8b9 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Tue, 5 Aug 2025 22:48:07 +0000
Subject: [PATCH] Create user type selection component

cgen-f8deaeb010b542c5858aaf2833d0656c
---
 .../onboarding/UserTypeSelection.tsx          | 133 ++++++++++++++++++
 1 file changed, 133 insertions(+)
 create mode 100644 client/components/onboarding/UserTypeSelection.tsx

diff --git a/client/components/onboarding/UserTypeSelection.tsx b/client/components/onboarding/UserTypeSelection.tsx
new file mode 100644
index 00000000..78854ef0
--- /dev/null
+++ b/client/components/onboarding/UserTypeSelection.tsx
@@ -0,0 +1,133 @@
+import { UserType, OnboardingData } from "@/pages/Onboarding";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { GamepadIcon, BriefcaseIcon, UsersIcon, ShoppingCartIcon } from "lucide-react";
+
+interface UserTypeSelectionProps {
+  data: OnboardingData;
+  updateData: (data: Partial<OnboardingData>) => void;
+  nextStep: () => void;
+}
+
+const userTypes = [
+  {
+    id: 'game-developer' as UserType,
+    title: 'Game Developer',
+    description: 'Join our development community, access tools, mentorship, and collaborate on cutting-edge game projects.',
+    icon: GamepadIcon,
+    benefits: [
+      'Access to development tools and frameworks',
+      'Mentorship from industry veterans',
+      'Collaborative project opportunities',
+      'Technical workshops and boot camps'
+    ],
+    color: 'from-neon-purple to-aethex-500'
+  },
+  {
+    id: 'client' as UserType,
+    title: 'Client',
+    description: 'Partner with us for custom game development, consulting services, and technical solutions.',
+    icon: BriefcaseIcon,
+    benefits: [
+      'Custom game development services',
+      'Technical consulting and strategy',
+      'Project management expertise',
+      'End-to-end solution delivery'
+    ],
+    color: 'from-neon-blue to-aethex-400'
+  },
+  {
+    id: 'member' as UserType,
+    title: 'Community Member',
+    description: 'Be part of our innovation community with access to research, networking, and exclusive content.',
+    icon: UsersIcon,
+    benefits: [
+      'Access to research and publications',
+      'Networking with industry professionals',
+      'Exclusive community events',
+      'Early access to new technologies'
+    ],
+    color: 'from-neon-green to-aethex-600'
+  },
+  {
+    id: 'customer' as UserType,
+    title: 'Customer',
+    description: 'Explore our games, tools, and products designed to enhance your gaming and development experience.',
+    icon: ShoppingCartIcon,
+    benefits: [
+      'Access to premium games and tools',
+      'Customer support and documentation',
+      'Regular updates and new releases',
+      'Community forums and discussions'
+    ],
+    color: 'from-neon-yellow to-aethex-700'
+  }
+];
+
+export default function UserTypeSelection({ data, updateData, nextStep }: UserTypeSelectionProps) {
+  const handleSelectType = (userType: UserType) => {
+    updateData({ userType });
+    setTimeout(() => {
+      nextStep();
+    }, 300);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="text-center space-y-2">
+        <p className="text-muted-foreground">
+          Choose the option that best describes your relationship with AeThex
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {userTypes.map((type) => {
+          const Icon = type.icon;
+          const isSelected = data.userType === type.id;
+          
+          return (
+            <Card 
+              key={type.id}
+              className={`cursor-pointer transition-all duration-300 hover:scale-105 border-2 ${
+                isSelected 
+                  ? 'border-aethex-500 glow-purple' 
+                  : 'border-border/50 hover:border-aethex-400/50'
+              }`}
+              onClick={() => handleSelectType(type.id)}
+            >
+              <CardHeader className="pb-3">
+                <div className="flex items-center space-x-3">
+                  <div className={`p-2 rounded-lg bg-gradient-to-r ${type.color}`}>
+                    <Icon className="h-6 w-6 text-white" />
+                  </div>
+                  <div>
+                    <CardTitle className="text-lg">{type.title}</CardTitle>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <CardDescription className="mb-4 text-sm">
+                  {type.description}
+                </CardDescription>
+                <ul className="space-y-1">
+                  {type.benefits.map((benefit, index) => (
+                    <li key={index} className="text-xs text-muted-foreground flex items-start">
+                      <span className="text-aethex-400 mr-2">•</span>
+                      {benefit}
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+
+      <div className="flex justify-center pt-6">
+        <p className="text-sm text-muted-foreground text-center max-w-lg">
+          Don't worry - you can always change your preferences later or access multiple areas of our platform.
+        </p>
+      </div>
+    </div>
+  );
+}