From d5810c0b50def661ae2598d62b8c9d6c51345d94 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Fri, 31 Jul 2026 14:12:36 +0000
Subject: [PATCH] Deploy

---
 src/app/account/register/page.tsx | 68 +++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 src/app/account/register/page.tsx

diff --git a/src/app/account/register/page.tsx b/src/app/account/register/page.tsx
new file mode 100644
index 0000000..bcdb1ef
--- /dev/null
+++ b/src/app/account/register/page.tsx
@@ -0,0 +1,68 @@
+'use client'
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+import { useCustomerAuth } from '@/hooks/useCustomerAuth'
+
+export default function AccountRegisterPage() {
+  const { register, loading, error } = useCustomerAuth()
+  const router = useRouter()
+  const [form, setForm] = useState({ first_name: '', last_name: '', email: '', password: '' })
+
+  const set = (k: string) => (e: React.ChangeEvent<HTMLInputElement>) =>
+    setForm(p => ({ ...p, [k]: e.target.value }))
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    try {
+      await register(form)
+      router.push('/account/orders')
+    } catch {}
+  }
+
+  return (
+    <main className="min-h-screen flex items-center justify-center px-4 py-20 bg-background">
+      <div className="w-full max-w-md">
+        <h1 className="text-2xl font-bold mb-2 text-foreground">Create account</h1>
+        <p className="text-muted-foreground mb-8">Track your orders and save your details</p>
+        {error && <div className="mb-4 p-3 rounded-lg bg-destructive/10 text-destructive text-sm">{error}</div>}
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="block text-sm font-medium mb-1.5 text-foreground">First name</label>
+              <input type="text" required value={form.first_name} onChange={set('first_name')}
+                className="w-full px-3 py-2.5 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary text-sm"
+                placeholder="Jane" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-1.5 text-foreground">Last name</label>
+              <input type="text" required value={form.last_name} onChange={set('last_name')}
+                className="w-full px-3 py-2.5 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary text-sm"
+                placeholder="Doe" />
+            </div>
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-1.5 text-foreground">Email</label>
+            <input type="email" required value={form.email} onChange={set('email')}
+              className="w-full px-3 py-2.5 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary text-sm"
+              placeholder="you@example.com" />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-1.5 text-foreground">Password</label>
+            <input type="password" required minLength={6} value={form.password} onChange={set('password')}
+              className="w-full px-3 py-2.5 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary text-sm"
+              placeholder="Min. 6 characters" />
+          </div>
+          <button type="submit" disabled={loading}
+            className="w-full bg-primary text-primary-foreground py-2.5 rounded-lg font-medium hover:opacity-90 transition-opacity disabled:opacity-50 text-sm">
+            {loading ? 'Creating account...' : 'Create account'}
+          </button>
+        </form>
+        <p className="mt-6 text-center text-sm text-muted-foreground">
+          Already have an account?{' '}
+          <Link href="/account/login" className="text-primary hover:underline font-medium">Sign in</Link>
+        </p>
+      </div>
+    </main>
+  )
+}