Cta Footer code

@props([
    'brand' => null,
    'contact' => [],
    'groups' => [],
    'title' => 'Put the next step in reach.',
    'description' => 'Give visitors one clear reason to continue, then let the rest of the footer stay out of their way.',
    'ctaLabel' => 'Get started',
    'ctaHref' => '#',
    'copyright' => null,
])

@php
    /*
    | A straightforward marketing footer: a focused call to action followed by
    | contact details and small, scannable link groups.
    |
    | Usage:
    |   <x-ui.cta-footer title="Ready when you are" cta-href="/register">
    |       <x-slot:brand><x-ui.brand name="Harbour" /></x-slot:brand>
    |   </x-ui.cta-footer>
    */
    $brand ??= config('app.name', 'Harbour');
    $copyright ??= '© '.date('Y').' '.$brand.'. All rights reserved.';
    $contact = $contact ?: ['hello@example.com', '+1 (555) 010-2040'];
    $groups = $groups ?: [
        'Company' => ['About' => '#', 'Careers' => '#', 'Journal' => '#'],
        'Product' => ['Overview' => '#', 'Pricing' => '#', 'Changelog' => '#'],
        'Resources' => ['Help center' => '#', 'Contact' => '#', 'Status' => '#'],
        'Legal' => ['Privacy' => '#', 'Terms' => '#', 'Security' => '#'],
    ];
@endphp

<footer {{ $attributes->merge(['class' => 'border-t border-gray-200 bg-white text-gray-950 dark:border-gray-800 dark:bg-gray-950 dark:text-white']) }}>
    <div class="mx-auto max-w-7xl px-5 sm:px-8 lg:px-10">
        <section class="grid gap-8 border-b border-gray-200 py-14 sm:py-16 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-end lg:gap-16 dark:border-gray-800">
            <div class="max-w-2xl">
                <p class="text-xs font-semibold uppercase tracking-[0.16em] text-gray-500 dark:text-gray-400">Start here</p>
                <h2 class="mt-4 text-4xl font-semibold tracking-[-0.045em] text-balance sm:text-5xl">{{ $title }}</h2>
                @if ($description)
                    <p class="mt-4 max-w-xl text-base leading-7 text-gray-600 dark:text-gray-300">{{ $description }}</p>
                @endif
            </div>

            <a href="{{ $ctaHref }}" class="inline-flex h-12 shrink-0 items-center justify-center gap-2 rounded-full bg-brand-600 px-5 text-sm font-semibold text-white shadow-sm transition hover:-translate-y-0.5 hover:bg-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 active:translate-y-0 dark:bg-brand-500 dark:hover:bg-brand-400 dark:focus:ring-brand-400 dark:focus:ring-offset-gray-950">
                {{ $ctaLabel }}
                <x-ui.icon name="arrow-up-right" weight="bold" size="sm" />
            </a>
        </section>

        <div class="grid gap-12 py-12 sm:py-14 lg:grid-cols-[minmax(0,0.8fr)_minmax(0,1.7fr)] lg:gap-20">
            <div>
                @isset($brandSlot)
                    {{ $brandSlot }}
                @else
                    <a href="{{ url('/') }}" class="text-xl font-semibold tracking-tight focus:outline-none focus:ring-2 focus:ring-gray-950 dark:focus:ring-white">{{ $brand }}</a>
                @endisset

                <address class="mt-5 space-y-1.5 text-sm not-italic text-gray-600 dark:text-gray-300">
                    @foreach ($contact as $item)
                        <p>{{ $item }}</p>
                    @endforeach
                </address>
            </div>

            <nav class="grid grid-cols-2 gap-x-8 gap-y-10 sm:grid-cols-4 sm:gap-x-10" aria-label="Footer navigation">
                @foreach ($groups as $heading => $items)
                    <div>
                        <h3 class="text-sm font-semibold">{{ $heading }}</h3>
                        <ul class="mt-4 space-y-3">
                            @foreach ($items as $label => $href)
                                <li>
                                    <a href="{{ $href }}" class="text-sm text-gray-600 transition hover:text-gray-950 focus:outline-none focus:ring-2 focus:ring-gray-950 dark:text-gray-300 dark:hover:text-white dark:focus:ring-white">{{ $label }}</a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endforeach
            </nav>
        </div>

        <div class="flex flex-col gap-4 border-t border-gray-200 py-6 text-sm text-gray-500 sm:flex-row sm:items-center sm:justify-between dark:border-gray-800 dark:text-gray-400">
            <p>{{ $copyright }}</p>
            @isset($social)
                <div class="flex items-center gap-1">{{ $social }}</div>
            @endisset
        </div>
    </div>
</footer>