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/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");