Bangun workspace CRM perusahaan Anda.

Daftarkan perusahaan sekali, lalu kelola tim, klien, dan seluruh aktivitas bisnis dari satu platform terpusat yang profesional.

Platform CRM Enterprise v2.4 • Secure Multi-Tenant

{/* Kolom Kanan: Formulir Registrasi (Dibuat Lebih Luas & Nyaman) */}

Buat akun perusahaan

Lengkapi informasi perusahaan dan data administrator untuk memulai workspace baru Anda.

setData( "company_name", e.target.value, ) } required className="h-11 shadow-xs" placeholder="PT Nama Perusahaan Indonesia" /> setData( "company_email", e.target.value, ) } className="h-11 shadow-xs" placeholder="info@perusahaan.com" /> setData( "company_phone", e.target.value, ) } className="h-11 shadow-xs" placeholder="0812xxxxxxxx" />

setData(
                                                        "company_address",
                                                        e.target.value,
                                                    )
                                                }
                                                placeholder="Masukkan alamat operasional lengkap perusahaan..."
                                                className="min-h-28 shadow-xs resize-none"
                                            />
                                        </Field>
                                    </div>
                                </Section>

<Section title="Akun Administrator Utama">
                                    <div className="grid gap-5 sm:grid-cols-2">
                                        <Field
                                            label="Nama Administrator *"
                                            error={errors.name}
                                            icon={UserRound}
                                            className="sm:col-span-2"
                                        >
                                            <Input
                                                value={data.name}
                                                onChange={(e) =>
                                                    setData(
                                                        "name",
                                                        e.target.value,
                                                    )
                                                }
                                                required
                                                className="h-11 shadow-xs"
                                                placeholder="Nama lengkap pengelola utama"
                                            />
                                        </Field>
                                        <Field
                                            label="Email Login *"
                                            error={errors.email}
                                            icon={Mail}
                                            className="sm:col-span-2"
                                        >
                                            <Input
                                                type="email"
                                                value={data.email}
                                                onChange={(e) =>
                                                    setData(
                                                        "email",
                                                        e.target.value,
                                                    )
                                                }
                                                required
                                                autoComplete="email"
                                                className="h-11 shadow-xs"
                                                placeholder="admin@perusahaan.com"
                                            />
                                        </Field>
                                        <Field
                                            label="Password *"
                                            error={errors.password}
                                            icon={ShieldCheck}
                                        >
                                            <div className="relative">
                                                <Input
                                                    type={
                                                        showPassword
                                                            ? "text"
                                                            : "password"
                                                    }
                                                    value={data.password}
                                                    onChange={(e) =>
                                                        setData(
                                                            "password",
                                                            e.target.value,
                                                        )
                                                    }
                                                    required
                                                    autoComplete="new-password"
                                                    placeholder="Minimal 8 karakter"
                                                    className="h-11 pr-10 shadow-xs"
                                                />
                                                <button
                                                    type="button"
                                                    onClick={() =>
                                                        setShowPassword(
                                                            (v) => !v,
                                                        )
                                                    }
                                                    className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-700 transition-colors"
                                                    aria-label={
                                                        showPassword
                                                            ? "Sembunyikan password"
                                                            : "Tampilkan password"
                                                    }
                                                >
                                                    {showPassword ? (
                                                        <EyeOff className="size-4" />
                                                    ) : (
                                                        <Eye className="size-4" />
                                                    )}
                                                </button>
                                            </div>
                                        </Field>
                                        <Field
                                            label="Konfirmasi Password *"
                                            error={errors.password_confirmation}
                                        >
                                            <Input
                                                type={
                                                    showPassword
                                                        ? "text"
                                                        : "password"
                                                }
                                                value={
                                                    data.password_confirmation
                                                }
                                                onChange={(e) =>
                                                    setData(
                                                        "password_confirmation",
                                                        e.target.value,
                                                    )
                                                }
                                                required
                                                autoComplete="new-password"
                                                placeholder="Ulangi password"
                                                className="h-11 shadow-xs"
                                            />
                                        </Field>
                                    </div>
                                </Section>

<div className="rounded-2xl border border-blue-100 bg-blue-50/60 p-4 sm:p-5">
                                    <div className="flex gap-3.5 items-start">
                                        <div className="p-2 rounded-xl bg-primary/10 text-primary shrink-0 mt-0.5">
                                            <ShieldCheck className="size-5" />
                                        </div>
                                        <div>
                                            <p className="text-sm font-semibold text-slate-900">
                                                Trial Eksklusif 14 Hari Gratis
                                            </p>
                                            <p className="mt-1 text-xs sm:text-sm leading-relaxed text-slate-600">
                                                Workspace perusahaan Anda akan
                                                langsung diinisialisasi
                                                otomatis, dan Anda bisa langsung
                                                masuk ke panel CRM setelah
                                                pendaftaran berhasil tanpa kartu
                                                kredit.
                                            </p>
                                        </div>
                                    </div>
                                </div>

<Button
                                    type="submit"
                                    disabled={processing}
                                    className="h-12 w-full rounded-xl bg-primary font-semibold text-base shadow-lg shadow-primary/25 hover:bg-primary/90 transition-all gap-2"
                                >
                                    {processing
                                        ? "Memproses pembuatan workspace..."
                                        : "Buat akun perusahaan"}
                                    {!processing && (
                                        <ArrowRight className="size-4" />
                                    )}
                                </Button>
                            </form>
                        </div>
                    </div>
                    <p className="mt-6 text-center text-xs text-slate-400">
                        Dengan mendaftar, Anda menyetujui syarat, ketentuan,
                        serta kebijakan privasi penggunaan platform kami.
                    </p>
                </div>
            </div>
        </>
    );
}

function UsersIcon({ className }: { className?: string }) {
    return (
        <svg
            className={className}
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.8"
        >
            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
            <circle cx="9" cy="7" r="4" />
            <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
        </svg>
    );
}