Neura UI

{{--
    Auth split — brand panel left, credentials form right (ReUI-style).
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="7xl" class="py-10 lg:py-16">
        <div class="grid min-h-[32rem] overflow-hidden rounded-2xl border border-dashed border-edge lg:grid-cols-2">
            <div class="relative flex flex-col justify-between border-b border-dashed border-edge p-8 sm:p-10 lg:border-b-0 lg:border-r lg:p-12">
                <div aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10">
                    <div class="neura-dots !opacity-35 dark:!opacity-20"></div>
                </div>
                <neura::brand href="#" name="Neura" align="left" />
                <div class="mt-12 lg:mt-0">
                    <neura::heading level="h2" size="3xl" class="tracking-tight text-balance">
                        {{ __('Ship interfaces your team can own') }}
                    </neura::heading>
                    <neura::text size="sm" class="mt-4 max-w-sm text-fg-secondary text-pretty">
                        {{ __('One kit for marketing pages and signed-in product — tokens, atoms and pasteable blocks.') }}
                    </neura::text>
                </div>
                <neura::text size="xs" class="mt-10 font-mono uppercase tracking-[0.14em] text-fg-muted lg:mt-0">
                    {{ __('Trusted by product teams') }}
                </neura::text>
            </div>

            <div class="flex flex-col justify-center p-8 sm:p-10 lg:p-12">
                <neura::heading level="h1" size="2xl" class="tracking-tight">
                    {{ __('Sign in') }}
                </neura::heading>
                <neura::text size="sm" class="mt-2 text-fg-secondary">
                    {{ __('Enter your work email to continue.') }}
                </neura::text>

                <form class="mt-8 space-y-5" action="#" method="POST" onsubmit="return false;">
                    <neura::field>
                        <neura::label for="split-email">{{ __('Email') }}</neura::label>
                        <neura::input id="split-email" type="email" name="email" autocomplete="username"
                            placeholder="you@company.com" />
                    </neura::field>
                    <neura::field>
                        <div class="flex items-center justify-between gap-3">
                            <neura::label for="split-password">{{ __('Password') }}</neura::label>
                            <a href="#forgot" class="text-xs text-fg-muted hover:text-fg">{{ __('Forgot?') }}</a>
                        </div>
                        <neura::input id="split-password" type="password" name="password"
                            autocomplete="current-password" placeholder="••••••••" />
                    </neura::field>
                    <neura::button type="submit" variant="primary" class="w-full" size="lg">
                        {{ __('Continue') }}
                    </neura::button>
                </form>
            </div>
        </div>
    </neura::container>
</section>

{{--
    Contact form — two-column sales / support intake.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="5xl" class="py-16 lg:py-24">
        <div class="grid gap-10 lg:grid-cols-12 lg:gap-14">
            <div class="lg:col-span-5">
                <neura::badge variant="soft" pill class="w-fit">{{ __('Contact') }}</neura::badge>
                <neura::heading level="h1" size="3xl" class="mt-4 tracking-tight text-balance">
                    {{ __('Talk to the team') }}
                </neura::heading>
                <neura::text size="sm" class="mt-4 text-fg-secondary text-pretty">
                    {{ __('Questions about Neura Kit, docs or partnerships — we usually reply within one business day.') }}
                </neura::text>

                <dl class="mt-8 space-y-4">
                    @foreach ([
                        ['label' => __('Hello'), 'value' => 'hello@neuraui.dev'],
                        ['label' => __('Support'), 'value' => 'support@neuraui.dev'],
                        ['label' => __('HQ'), 'value' => __('Paris · Remote-first')],
                    ] as $row)
                        <div>
                            <dt class="font-mono text-[11px] uppercase tracking-[0.14em] text-fg-muted">
                                {{ $row['label'] }}
                            </dt>
                            <dd class="mt-1 text-sm text-fg">{{ $row['value'] }}</dd>
                        </div>
                    @endforeach
                </dl>
            </div>

            <div class="lg:col-span-7">
                <neura::card class="p-6 sm:p-8">
                    <form class="space-y-5" action="#" method="POST" onsubmit="return false;">
                        <div class="grid gap-5 sm:grid-cols-2">
                            <neura::field>
                                <neura::label for="contact-name">{{ __('Name') }}</neura::label>
                                <neura::input id="contact-name" name="name" autocomplete="name" />
                            </neura::field>
                            <neura::field>
                                <neura::label for="contact-email">{{ __('Email') }}</neura::label>
                                <neura::input id="contact-email" type="email" name="email" autocomplete="email" />
                            </neura::field>
                        </div>

                        <neura::field>
                            <neura::label for="contact-company">{{ __('Company') }}</neura::label>
                            <neura::input id="contact-company" name="company" autocomplete="organization" />
                        </neura::field>

                        <neura::field>
                            <neura::label for="contact-message">{{ __('How can we help?') }}</neura::label>
                            <neura::textarea id="contact-message" name="message" rows="5"
                                placeholder="{{ __('Tell us about your stack and timeline…') }}" />
                        </neura::field>

                        <neura::button type="submit" variant="primary" size="lg" icon="paper-airplane">
                            {{ __('Send message') }}
                        </neura::button>
                    </form>
                </neura::card>
            </div>
        </div>
    </neura::container>
</section>

{{--
    Forgot password — recovery email form with left-aligned brand.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="md" class="py-16 lg:py-20">
        <div class="mx-auto max-w-md">
            <div class="mb-8">
                <neura::brand href="#" name="Neura" align="left" />
                <neura::heading level="h1" size="2xl" class="mt-6 tracking-tight">
                    {{ __('Reset your password') }}
                </neura::heading>
                <neura::text size="sm" class="mt-2 text-fg-secondary">
                    {{ __('Enter the email on your account. We will send a reset link.') }}
                </neura::text>
            </div>

            <neura::card class="p-6 sm:p-8">
                <form class="space-y-5" action="#" method="POST" onsubmit="return false;">
                    <neura::field>
                        <neura::label for="forgot-email">{{ __('Email') }}</neura::label>
                        <neura::input id="forgot-email" type="email" name="email" autocomplete="email"
                            placeholder="you@company.com" />
                    </neura::field>
                    <neura::button type="submit" variant="primary" class="w-full" size="lg">
                        {{ __('Send reset link') }}
                    </neura::button>
                </form>

                <neura::separator class="my-6" />

                <neura::text size="sm" class="text-fg-secondary">
                    <a href="#signin" class="font-medium text-fg underline-offset-4 hover:underline">
                        {{ __('Back to sign in') }}
                    </a>
                </neura::text>
            </neura::card>
        </div>
    </neura::container>
</section>

{{--
    Multi-column company settings — company, tax and address fields.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="5xl" class="py-12 lg:py-16">
        <div class="grid gap-10 lg:grid-cols-12">
            <div class="lg:col-span-4">
                <neura::heading level="h2" size="xl" class="tracking-tight">
                    {{ __('Company settings') }}
                </neura::heading>
                <neura::text size="sm" class="mt-2 text-fg-secondary text-pretty">
                    {{ __('Legal identity used on invoices, receipts and tax documents.') }}
                </neura::text>
            </div>

            <div class="lg:col-span-8">
                <neura::card class="p-6 sm:p-8">
                    <form class="space-y-8" action="#" method="POST" onsubmit="return false;">
                        <div>
                            <neura::text size="xs" class="font-mono uppercase tracking-[0.14em] text-fg-muted">
                                {{ __('Company') }}
                            </neura::text>
                            <div class="mt-4 grid gap-5 sm:grid-cols-2">
                                <neura::field class="sm:col-span-2">
                                    <neura::label for="company-name">{{ __('Legal name') }}</neura::label>
                                    <neura::input id="company-name" name="company_name" value="Northline SAS"
                                        autocomplete="organization" />
                                </neura::field>
                                <neura::field>
                                    <neura::label for="company-website">{{ __('Website') }}</neura::label>
                                    <neura::input id="company-website" type="url" name="website"
                                        value="https://northline.io" autocomplete="url" />
                                </neura::field>
                                <neura::field>
                                    <neura::label for="company-phone">{{ __('Phone') }}</neura::label>
                                    <neura::input id="company-phone" type="tel" name="phone"
                                        value="+33 1 84 00 00 00" autocomplete="tel" />
                                </neura::field>
                            </div>
                        </div>

                        <neura::separator />

                        <div>
                            <neura::text size="xs" class="font-mono uppercase tracking-[0.14em] text-fg-muted">
                                {{ __('Tax') }}
                            </neura::text>
                            <div class="mt-4 grid gap-5 sm:grid-cols-2">
                                <neura::field>
                                    <neura::label for="company-vat">{{ __('VAT number') }}</neura::label>
                                    <neura::input id="company-vat" name="vat" value="FR12345678901" />
                                </neura::field>
                                <neura::field>
                                    <neura::label for="company-tax-id">{{ __('Tax ID') }}</neura::label>
                                    <neura::input id="company-tax-id" name="tax_id" value="812 345 678" />
                                </neura::field>
                            </div>
                        </div>

                        <neura::separator />

                        <div>
                            <neura::text size="xs" class="font-mono uppercase tracking-[0.14em] text-fg-muted">
                                {{ __('Address') }}
                            </neura::text>
                            <div class="mt-4 grid gap-5 sm:grid-cols-2">
                                <neura::field class="sm:col-span-2">
                                    <neura::label for="company-line1">{{ __('Street address') }}</neura::label>
                                    <neura::input id="company-line1" name="address_line1"
                                        value="12 Rue de la Paix" autocomplete="address-line1" />
                                </neura::field>
                                <neura::field>
                                    <neura::label for="company-city">{{ __('City') }}</neura::label>
                                    <neura::input id="company-city" name="city" value="Paris"
                                        autocomplete="address-level2" />
                                </neura::field>
                                <neura::field>
                                    <neura::label for="company-postal">{{ __('Postal code') }}</neura::label>
                                    <neura::input id="company-postal" name="postal_code" value="75002"
                                        autocomplete="postal-code" />
                                </neura::field>
                                <neura::field class="sm:col-span-2">
                                    <neura::label for="company-country">{{ __('Country') }}</neura::label>
                                    <neura::input id="company-country" name="country" value="France"
                                        autocomplete="country-name" />
                                </neura::field>
                            </div>
                        </div>

                        <div class="flex flex-wrap justify-end gap-2 pt-2">
                            <neura::button type="button" variant="ghost">{{ __('Cancel') }}</neura::button>
                            <neura::button type="submit" variant="primary">{{ __('Save changes') }}</neura::button>
                        </div>
                    </form>
                </neura::card>
            </div>
        </div>
    </neura::container>
</section>

{{--
    Survey form — NPS-style scale buttons with optional comment.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="md" class="py-16 lg:py-20">
        <div class="mx-auto max-w-lg">
            <neura::badge variant="soft" pill class="w-fit">{{ __('Feedback') }}</neura::badge>
            <neura::heading level="h1" size="2xl" class="mt-4 tracking-tight text-balance">
                {{ __('How likely are you to recommend Neura?') }}
            </neura::heading>
            <neura::text size="sm" class="mt-2 text-fg-secondary text-pretty">
                {{ __('0 means not at all likely. 10 means extremely likely.') }}
            </neura::text>

            <neura::card class="mt-8 p-6 sm:p-8">
                <form class="space-y-6" action="#" method="POST" onsubmit="return false;">
                    <fieldset>
                        <legend class="sr-only">{{ __('Recommendation score') }}</legend>
                        <div class="flex flex-wrap gap-2">
                            @for ($score = 0; $score <= 10; $score++)
                                <button type="button"
                                    @class([
                                        'flex size-10 items-center justify-center rounded-xl border border-dashed text-sm font-medium tabular-nums transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50',
                                        'border-fg bg-surface-raised text-fg shadow-sm' => $score === 9,
                                        'border-edge text-fg-secondary hover:bg-hover/40' => $score !== 9,
                                    ])>
                                    {{ $score }}
                                </button>
                            @endfor
                        </div>
                        <div class="mt-2 flex justify-between gap-3">
                            <neura::text size="xs" class="text-fg-muted">{{ __('Not likely') }}</neura::text>
                            <neura::text size="xs" class="text-fg-muted">{{ __('Extremely likely') }}</neura::text>
                        </div>
                    </fieldset>

                    <neura::field>
                        <neura::label for="survey-comment">{{ __('Anything else?') }}</neura::label>
                        <neura::textarea id="survey-comment" name="comment" rows="4"
                            placeholder="{{ __('What worked well, or what should we improve?') }}" />
                    </neura::field>

                    <neura::button type="submit" variant="primary" class="w-full" size="lg">
                        {{ __('Submit feedback') }}
                    </neura::button>
                </form>
            </neura::card>
        </div>
    </neura::container>
</section>

{{--
    OTP verify — six-digit code confirmation with left-aligned brand.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="md" class="py-16 lg:py-20">
        <div class="mx-auto max-w-md">
            <div class="mb-8">
                <neura::brand href="#" name="Neura" align="left" />
                <neura::heading level="h1" size="2xl" class="mt-6 tracking-tight">
                    {{ __('Check your email') }}
                </neura::heading>
                <neura::text size="sm" class="mt-2 text-fg-secondary">
                    {{ __('We sent a 6-digit code to you@company.com') }}
                </neura::text>
            </div>

            <neura::card class="p-6 sm:p-8">
                <form class="space-y-6" action="#" method="POST" onsubmit="return false;">
                    <neura::field>
                        <neura::label>{{ __('Verification code') }}</neura::label>
                        <neura::otp name="code" length="6" />
                    </neura::field>

                    <neura::button type="submit" variant="primary" class="w-full" size="lg">
                        {{ __('Verify and continue') }}
                    </neura::button>
                </form>

                <neura::text size="sm" class="mt-6 text-fg-secondary">
                    {{ __('Didn’t get a code?') }}
                    <button type="button" class="font-medium text-fg underline-offset-4 hover:underline">
                        {{ __('Resend') }}
                    </button>
                </neura::text>
            </neura::card>
        </div>
    </neura::container>
</section>

{{--
    Settings profile — account details form for application settings screens.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="5xl" class="py-12 lg:py-16">
        <div class="grid gap-10 lg:grid-cols-12">
            <div class="lg:col-span-4">
                <neura::heading level="h2" size="xl" class="tracking-tight">
                    {{ __('Profile') }}
                </neura::heading>
                <neura::text size="sm" class="mt-2 text-fg-secondary text-pretty">
                    {{ __('Public identity used across workspaces and invitations.') }}
                </neura::text>
            </div>

            <div class="lg:col-span-8">
                <neura::card class="p-6 sm:p-8">
                    <form class="space-y-6" action="#" method="POST" onsubmit="return false;">
                        <div class="flex flex-wrap items-center gap-4">
                            <neura::avatar name="Alex Martin" color="auto" size="xl" />
                            <div class="space-y-2">
                                <neura::button type="button" variant="outline" size="sm">
                                    {{ __('Change photo') }}
                                </neura::button>
                                <neura::text size="xs" class="text-fg-muted">
                                    {{ __('JPG or PNG · max 2 MB') }}
                                </neura::text>
                            </div>
                        </div>

                        <neura::separator />

                        <div class="grid gap-5 sm:grid-cols-2">
                            <neura::field>
                                <neura::label for="profile-first">{{ __('First name') }}</neura::label>
                                <neura::input id="profile-first" name="first_name" value="Alex" autocomplete="given-name" />
                            </neura::field>
                            <neura::field>
                                <neura::label for="profile-last">{{ __('Last name') }}</neura::label>
                                <neura::input id="profile-last" name="last_name" value="Martin" autocomplete="family-name" />
                            </neura::field>
                        </div>

                        <neura::field>
                            <neura::label for="profile-email">{{ __('Email') }}</neura::label>
                            <neura::input id="profile-email" type="email" name="email"
                                value="alex@company.com" autocomplete="email" />
                        </neura::field>

                        <neura::field>
                            <neura::label for="profile-title">{{ __('Job title') }}</neura::label>
                            <neura::input id="profile-title" name="title" value="Product Engineer" />
                        </neura::field>

                        <div class="flex flex-wrap justify-end gap-2 pt-2">
                            <neura::button type="button" variant="ghost">{{ __('Cancel') }}</neura::button>
                            <neura::button type="submit" variant="primary">{{ __('Save changes') }}</neura::button>
                        </div>
                    </form>
                </neura::card>
            </div>
        </div>
    </neura::container>
</section>

{{--
    Sign-in card — centered auth form ready for Livewire / Fortify wiring.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="md" class="py-16 lg:py-20">
        <div class="mx-auto max-w-md">
            <div class="mb-8">
                <neura::brand href="#" name="Neura" align="left" />
                <neura::heading level="h1" size="2xl" class="mt-6 tracking-tight">
                    {{ __('Sign in to your account') }}
                </neura::heading>
                <neura::text size="sm" class="mt-2 text-fg-secondary">
                    {{ __('Welcome back. Enter your credentials to continue.') }}
                </neura::text>
            </div>

            <neura::card class="p-6 sm:p-8">
                <form class="space-y-5" action="#" method="POST" onsubmit="return false;">
                    <neura::field>
                        <neura::label for="email">{{ __('Email') }}</neura::label>
                        <neura::input id="email" type="email" name="email" autocomplete="username"
                            placeholder="you@company.com" />
                    </neura::field>

                    <neura::field>
                        <div class="flex items-center justify-between gap-3">
                            <neura::label for="password">{{ __('Password') }}</neura::label>
                            <a href="#forgot"
                                class="text-xs text-fg-muted transition-colors hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50 rounded">
                                {{ __('Forgot password?') }}
                            </a>
                        </div>
                        <neura::input id="password" type="password" name="password"
                            autocomplete="current-password" placeholder="••••••••" />
                    </neura::field>

                    <neura::checkbox name="remember" label="{{ __('Remember me') }}" />

                    <neura::button type="submit" variant="primary" class="w-full" size="lg">
                        {{ __('Sign in') }}
                    </neura::button>
                </form>

                <neura::separator class="my-6" />

                <neura::text size="sm" align="center" class="text-fg-secondary">
                    {{ __('No account yet?') }}
                    <a href="#register"
                        class="font-medium text-fg underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50 rounded">
                        {{ __('Create one') }}
                    </a>
                </neura::text>
            </neura::card>
        </div>
    </neura::container>
</section>

{{--
    Sign-up card — registration form with terms acknowledgement.
--}}
<section class="border-b border-dashed border-edge">
    <neura::container size="md" class="py-16 lg:py-20">
        <div class="mx-auto max-w-md">
            <div class="mb-8">
                <neura::brand href="#" name="Neura" align="left" />
                <neura::heading level="h1" size="2xl" class="mt-6 tracking-tight">
                    {{ __('Create your account') }}
                </neura::heading>
                <neura::text size="sm" class="mt-2 text-fg-secondary">
                    {{ __('Start free. Upgrade when your team is ready.') }}
                </neura::text>
            </div>

            <neura::card class="p-6 sm:p-8">
                <form class="space-y-5" action="#" method="POST" onsubmit="return false;">
                    <neura::field>
                        <neura::label for="signup-name">{{ __('Full name') }}</neura::label>
                        <neura::input id="signup-name" type="text" name="name" autocomplete="name"
                            placeholder="Alex Martin" />
                    </neura::field>

                    <neura::field>
                        <neura::label for="signup-email">{{ __('Work email') }}</neura::label>
                        <neura::input id="signup-email" type="email" name="email" autocomplete="username"
                            placeholder="you@company.com" />
                    </neura::field>

                    <neura::field>
                        <neura::label for="signup-password">{{ __('Password') }}</neura::label>
                        <neura::input id="signup-password" type="password" name="password"
                            autocomplete="new-password" placeholder="••••••••" />
                        <neura::description>{{ __('At least 8 characters.') }}</neura::description>
                    </neura::field>

                    <neura::checkbox name="terms" :label="__('I agree to the Terms and Privacy Policy')" />

                    <neura::button type="submit" variant="primary" class="w-full" size="lg">
                        {{ __('Create account') }}
                    </neura::button>
                </form>

                <neura::separator class="my-6" />

                <neura::text size="sm" align="center" class="text-fg-secondary">
                    {{ __('Already have an account?') }}
                    <a href="#signin"
                        class="font-medium text-fg underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50 rounded">
                        {{ __('Sign in') }}
                    </a>
                </neura::text>
            </neura::card>
        </div>
    </neura::container>
</section>