{ event.preventDefault(); submit(); }} >

form.setData('enabled', checked === true) } />

Show the holding page to visitors

A visitor is anybody who is not signed in. Staff accounts, and customers with a portal session, are unaffected — there is always a way in.

{line}

form.setData( 'eyebrow', event.target.value, ) } /> form.setData( 'expected_on', event.target.value, ) } /> form.setData( 'headline', event.target.value, ) } />

form.setData(
                                            'message',
                                            event.target.value,
                                        )
                                    }
                                />
                            </Field>
                        </div>
                    </SectionCard>

<SectionCard
                        title="Page background"
                        description="The photograph behind the holding page. Choose one already uploaded in Company profile, or leave it on the plain ground."
                        icon={ImageIcon}
                        tone="info"
                    >
                        <BrandingBackgroundGallery
                            title="Uploaded backgrounds"
                            description="The same library the sign-in screen uses. Choosing one here changes only the holding page."
                            images={background_images}
                            selectedPath={background_path}
                            onSelect={useBackground}
                            onClear={() => useBackground(null)}
                            emptyMessage="No backgrounds saved yet. Upload one in Company profile, then choose it here."
                            divided={false}
                        />
                    </SectionCard>

<SectionCard
                        title="Who to contact"
                        description="Shown beside the message so a customer with a fault knows the office has not disappeared."
                        icon={Phone}
                        tone="teal"
                    >
                        <div className="grid gap-4 sm:grid-cols-2">
                            <Field
                                label="Email"
                                htmlFor="contact_email"
                                hint="Defaults to the company email"
                                error={form.errors.contact_email}
                            >
                                <Input
                                    id="contact_email"
                                    type="email"
                                    value={form.data.contact_email}
                                    placeholder={
                                        launch.contact_email ?? 'office@example.com'
                                    }
                                    onChange={(event) =>
                                        form.setData(
                                            'contact_email',
                                            event.target.value,
                                        )
                                    }
                                />
                            </Field>

<Field
                                label="Phone"
                                htmlFor="contact_phone"
                                hint="Defaults to the company number"
                                error={form.errors.contact_phone}
                            >
                                <Input
                                    id="contact_phone"
                                    value={form.data.contact_phone}
                                    placeholder={
                                        launch.contact_phone ?? '07 0000 0000'
                                    }
                                    onChange={(event) =>
                                        form.setData(
                                            'contact_phone',
                                            event.target.value,
                                        )
                                    }
                                />
                            </Field>
                        </div>

<FormActions
                            note={
                                dirty
                                    ? 'Unsaved changes.'
                                    : 'Everything here is saved already.'
                            }
                        >
                            <Link
                                href={previewUrl}
                                target="_blank"
                                rel="noreferrer"
                                className="text-xs text-muted-foreground underline underline-offset-4 hover:text-foreground"
                            >
                                See the real page
                            </Link>
                            <Button
                                type="submit"
                                disabled={form.processing || !dirty}
                            >
                                {form.processing && <Spinner />}
                                Save
                            </Button>
                        </FormActions>
                    </SectionCard>
                </form>

<aside className="xl:sticky xl:top-6">
                    <div className="overflow-hidden rounded-xl ring-1 ring-hairline">
                        <div className="relative overflow-hidden bg-[#0a1421] px-5 py-6 text-white">
                            {launch.background_url ? (
                                <>
                                    <div
                                        aria-hidden
                                        className="absolute inset-0 bg-cover bg-center"
                                        style={{
                                            backgroundImage: `url(${launch.background_url})`,
                                        }}
                                    />
                                    <div
                                        aria-hidden
                                        className="absolute inset-0 bg-[#0a1421]/70"
                                    />
                                </>
                            ) : null}
                            <div
                                aria-hidden
                                className="pointer-events-none absolute -top-24 -right-16 size-56 rounded-full opacity-25 blur-2xl"
                                style={{
                                    backgroundColor:
                                        branding?.primary_color ?? '#f0a020',
                                }}
                            />
                            <div className="relative">
                                <div className="flex items-center justify-between gap-3">
                                    <span className="truncate text-[11px] font-semibold tracking-tight">
                                        {branding?.name ?? 'Your company'}
                                    </span>
                                    <span className="text-[9px] tracking-[0.12em] text-white/35 uppercase">
                                        Team sign in
                                    </span>
                                </div>

<p className="mt-7 inline-flex items-center gap-1.5 rounded-full border border-white/15 bg-white/[0.07] px-2.5 py-0.5 text-[9px] font-medium tracking-[0.12em] text-white/70 uppercase">
                                    <span className="size-1 rounded-full bg-white/80" />
                                    {previewEyebrow}
                                </p>

<p className="mt-3 text-lg leading-snug font-semibold tracking-tight text-balance">
                                    {previewHeadline}
                                </p>

<p className="mt-2.5 line-clamp-5 text-[11px] leading-relaxed text-white/55">
                                    {previewMessage}
                                </p>

<div className="mt-4 flex flex-wrap gap-1.5 text-[10px] text-white/70">
                                    {previewDate ? (
                                        <span className="inline-flex items-center gap-1 rounded-full border border-white/15 bg-white/[0.06] px-2 py-1">
                                            <CalendarClock className="size-3" />
                                            {previewDate}
                                        </span>
                                    ) : null}
                                    {previewPhone ? (
                                        <span className="inline-flex items-center gap-1 rounded-full border border-white/15 bg-white/[0.06] px-2 py-1">
                                            <Phone className="size-3" />
                                            {previewPhone}
                                        </span>
                                    ) : null}
                                    {previewEmail ? (
                                        <span className="inline-flex max-w-full items-center gap-1 truncate rounded-full border border-white/15 bg-white/[0.06] px-2 py-1">
                                            <Mail className="size-3" />
                                            <span className="truncate">
                                                {previewEmail}
                                            </span>
                                        </span>
                                    ) : null}
                                </div>
                            </div>
                        </div>

<div className="flex items-start gap-2 border-t border-hairline bg-card px-4 py-3 text-[11px] leading-relaxed text-muted-foreground">
                            <Eye className="mt-0.5 size-3.5 shrink-0" />
                            <span>
                                A miniature of the real page, built from what you
                                have typed. The page itself opens from{' '}
                                <span className="whitespace-nowrap">
                                    “Open the page”.
                                </span>
                            </span>
                        </div>
                    </div>

<p className="mt-3 px-1 text-[11px] leading-relaxed text-muted-foreground">
                        {enabled
                            ? 'While this is on, nobody new can reach the portal or an inspection link. That is the point of a holding page — switch it off on launch day. The shared status board is the one exception: a link the office issued still opens it, because its holder has no account to sign in with.'
                            : 'Leave the switch off until the site is ready to be seen. Turning it on needs no deploy, and turning it off restores everything exactly as it was.'}
                    </p>
                </aside>
            </div>
        </>
    );
}

/**
 * "March 2027" from a date input's value. The page does this server-side for
 * the real render; here it is only for the miniature.
 */
function monthLabel(value: string): string | null {
    if (!value) {
        return null;
    }

const date = new Date(`${value}T00:00:00`);

if (Number.isNaN(date.getTime())) {
        return null;
    }

return date.toLocaleDateString('en-AU', {
        month: 'long',
        year: 'numeric',
    });
}

/**
 * The boolean field's error, which the shared Field component cannot show
 * because the checkbox lives beside its own label.
 */
function InputErrorish({ message }: { message?: string }) {
    if (!message) {
        return null;
    }

return (
        <p className="mt-1 text-xs font-medium text-danger" role="alert">
            {message}
        </p>
    );
}