Initial commit: UP Parivaar Dallas site

2026-07-23 20:08:08 +05:30
commit 9a42e8b6e5
128 changed files with 8409 additions and 0 deletions
@@ -0,0 +1,100 @@
+"use client";
+
+import { useState } from "react";
+
+const steps = ["Basic Info", "Family Info", "Professional", "Interests", "Privacy", "Review"];
+
+const fieldsByStep: Record<number, { label: string; type?: string; placeholder?: string; options?: string[]; full?: boolean }[]> = {
+  0: [
+    { label: "Full Name" },
+    { label: "Email Address", type: "email" },
+    { label: "Phone Number" },
+    { label: "City" },
+    { label: "State", type: "select", options: ["select state", "Texas", "Oklahoma", "Arkansas", "Louisiana"] },
+  ],
+  1: [
+    { label: "Spouse Name" },
+    { label: "Number of Family Members" },
+    { label: "Children (ages)", full: true },
+  ],
+  2: [
+    { label: "Profession" },
+    { label: "Company" },
+    { label: "LinkedIn / Website", full: true },
+  ],
+  3: [{ label: "Your Interests", full: true, placeholder: "Community Service, Technology, Cricket…" }],
+  4: [
+    { label: "Profile Visibility", type: "select", options: ["Members Only", "Public", "Circles Only"] },
+    { label: "Contact Visibility", type: "select", options: ["Connections", "Hidden", "All Members"] },
+  ],
+  5: [{ label: "Anything else you'd like us to know?", full: true }],
+};
+
+export default function MembershipForm() {
+  const [step, setStep] = useState(0);
+  const fields = fieldsByStep[step];
+
+  return (
+    <div className="form">
+      <div className="form__card">
+        {/* Steps */}
+        <div className="form__steps no-scrollbar">
+          {steps.map((s, i) => (
+            <button key={s} onClick={() => setStep(i)} className="form__step">
+              <p className={`form__step-num ${i === step ? "form__step-num--active" : ""}`}>
+                Step 0{i + 1}
+              </p>
+              <p className={`form__step-label ${i === step ? "form__step-label--active" : ""}`}>
+                {s}
+              </p>
+              {i === step && <span className="form__step-underline" />}
+            </button>
+          ))}
+        </div>
+
+        {/* Fields */}
+        <div className="form__fields-wrap">
+          <h3 className="form__section-title">
+            Step I <span>{steps[step]}</span>
+          </h3>
+          <div className="form__fields">
+            {fields.map((f) => (
+              <div key={f.label} className={f.full ? "form__field--full" : ""}>
+                <label className="form__label">{f.label}</label>
+                {f.type === "select" ? (
+                  <select className="form__select">
+                    {f.options?.map((o) => (
+                      <option key={o}>{o}</option>
+                    ))}
+                  </select>
+                ) : (
+                  <input
+                    type={f.type ?? "text"}
+                    placeholder={f.placeholder}
+                    className="form__input"
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="form__actions">
+        <button
+          onClick={() => setStep((s) => Math.max(0, s - 1))}
+          disabled={step === 0}
+          className="btn-ghost"
+        >
+          Back
+        </button>
+        <button
+          onClick={() => setStep((s) => Math.min(steps.length - 1, s + 1))}
+          className="btn-primary"
+        >
+          {step === steps.length - 1 ? "Submit" : "Next"}
+        </button>
+      </div>
+    </div>
+  );
+}