Initial commit

app/pages/join.vue

@@ -0,0 +1,44 @@
+<!-- pages/join.vue -->
+<template>
+  <UContainer class="py-12">
+    <UForm :state="form" @submit="handleSubmit">
+      <!-- Step 1: Basic Info -->
+      <UFormGroup label="Email" name="email">
+        <UInput v-model="form.email" type="email" />
+      </UFormGroup>
+
+      <!-- Step 2: Choose Circle -->
+      <URadioGroup
+        v-model="form.circle"
+        :options="circleOptions"
+        name="circle" />
+
+      <!-- Step 3: Choose Contribution -->
+      <URadioGroup
+        v-model="form.contribution"
+        :options="contributionOptions"
+        name="contribution" />
+
+      <!-- Step 4: Helcim Checkout -->
+      <div id="helcim-payment"></div>
+
+      <UButton type="submit" block> Complete Membership </UButton>
+    </UForm>
+  </UContainer>
+</template>
+
+<script setup>
+const form = reactive({
+  email: "",
+  name: "",
+  circle: "community",
+  contribution: "15",
+});
+
+// Load Helcim.js
+onMounted(() => {
+  const script = document.createElement("script");
+  script.src = "https://secure.helcim.app/helcim-pay.js";
+  document.head.appendChild(script);
+});
+</script>