Enhance UI and functionality: Update main page layout, add contribution options in join form, and improve member dashboard display. Refactor API endpoints for member creation and login.

app/pages/index.vue

@@ -2,29 +2,47 @@
 <template>
   <div>
     <UContainer>
-      <UHero>
-        <template #title>
+      <div class="py-24 text-center">
+        <h1 class="text-4xl font-bold mb-4">
           Pay what you can, take what you need, build what we dream
-        </template>
-        <template #description>
+        </h1>
+        <p class="text-xl text-gray-600 dark:text-gray-400 mb-8">
           Ghost Guild: A solidarity-based community for game developers
           exploring cooperative models
-        </template>
-        <template #actions>
-          <UButton to="/join" size="lg" color="purple">
-            Join Ghost Guild
-          </UButton>
-        </template>
-      </UHero>
+        </p>
+        <UButton to="/join" size="lg" color="primary">
+          Join Ghost Guild
+        </UButton>
+      </div>
 
-      <UGrid :cols="3" class="mt-16 gap-8">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16">
         <UCard v-for="circle in circles" :key="circle.id">
           <template #header>
             <h3>{{ circle.name }}</h3>
           </template>
           {{ circle.description }}
         </UCard>
-      </UGrid>
+      </div>
     </UContainer>
   </div>
 </template>
+
+<script setup>
+const circles = [
+  {
+    id: 1,
+    name: 'Community Circle',
+    description: 'Join our community for $15/month. Perfect for indie developers and students looking to connect with like-minded creators.'
+  },
+  {
+    id: 2,
+    name: 'Support Circle',
+    description: 'Support the community at $25/month. Get access to additional resources and help sustain solidarity memberships.'
+  },
+  {
+    id: 3,
+    name: 'Sustaining Circle',
+    description: 'Champion our mission at $50/month. Your contribution helps us provide more solidarity spots and expand our programs.'
+  }
+];
+</script>

app/pages/join.vue

@@ -3,9 +3,9 @@
   <UContainer class="py-12">
     <UForm :state="form" @submit="handleSubmit">
       <!-- Step 1: Basic Info -->
-      <UFormGroup label="Email" name="email">
+      <UFormField label="Email" name="email">
         <UInput v-model="form.email" type="email" />
-      </UFormGroup>
+      </UFormField>
 
       <!-- Step 2: Choose Circle -->
       <URadioGroup
@@ -28,6 +28,8 @@
 </template>
 
 <script setup>
+import { reactive, onMounted } from 'vue';
+
 const form = reactive({
   email: "",
   name: "",
@@ -35,6 +37,23 @@ const form = reactive({
   contribution: "15",
 });
 
+const circleOptions = [
+  { value: 'community', label: 'Community Circle - $15/month' },
+  { value: 'support', label: 'Support Circle - $25/month' },
+  { value: 'sustaining', label: 'Sustaining Circle - $50/month' }
+];
+
+const contributionOptions = [
+  { value: '15', label: '$15/month' },
+  { value: '25', label: '$25/month' },
+  { value: '50', label: '$50/month' },
+  { value: 'custom', label: 'Custom amount' }
+];
+
+const handleSubmit = () => {
+  console.log('Form submitted:', form);
+};
+
 // Load Helcim.js
 onMounted(() => {
   const script = document.createElement("script");

app/pages/members/index.vue

@@ -6,7 +6,7 @@
         <template #title> Welcome back, {{ member?.name }}! </template>
       </UDashboardHeader>
 
-      <UGrid :cols="2" class="gap-4">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
         <UCard>
           <template #header>Your Circle</template>
           <p class="text-xl font-semibold">{{ member?.circle }}</p>
@@ -25,7 +25,7 @@
             Adjust Contribution
           </UButton>
         </UCard>
-      </UGrid>
+      </div>
 
       <UCard class="mt-6">
         <template #header>Quick Links</template>