<div class="w-full flex-col items-start">
    <div class="self-stretch py-16 bg-white border-t border-border lg:justify-center items-center flex">
        <div class="container mx-auto px-4 items-center flex flex-col lg:flex-row lg:justify-between gap-8 lg:gap-0">

            <div class="flex-col gap-8 flex lg:grow lg:max-w-96">
                <div class="self-stretch flex-col justify-start items-start gap-6 flex">
                    <div>
                        <x-public.rann-logo height="4rem" role="image"/>
                    </div>
                    <div class="self-stretch flex-col justify-start items-start gap-2 flex">
                        <div class="self-stretch text-2xl font-bold">Hâte de travailler avec vous !</div>
                        <div class="self-stretch text-muted">N’hésitez pas à me contacter si vous avez besoin de
                            renseignements, ou que vous souhaitez simplement discuter avec moi.
                        </div>
                    </div>
                    <x-public.button size="medium" tag="a" href="#">
                        <div class="text-xl font-bold">Me contacter</div>
                    </x-public.button>
                </div>
            </div>

            <div class="w-full lg:w-auto items-start flex flex-col lg:flex-row gap-8 lg:gap-24">
                <div class="w-full lg:w-56 flex-col gap-8 flex">
                    <div class="self-stretch text-2xl font-bold">Restons en contact</div>
                    <ul class="flex flex-col gap-2">
                        @foreach(\App\Models\SocialMediaLink::all() as $socialMediaLink)
                            <li>
                                <a href="{{ $socialMediaLink['url'] }}" class="text-muted hover:text-primary">
                                    {{ \Illuminate\Support\Str::ucfirst($socialMediaLink['name']) }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
                <div class="w-full lg:w-56 flex-col gap-8 flex">
                    <div class="self-stretch text-2xl font-bold">Informations légales</div>
                    <ul class="flex flex-col gap-2">
                        <li>
                            <a href="{{ route('legal-mentions') }}" class="text-muted hover:text-primary">Mentions
                                légales</a>
                        </li>
                        <li>
                            <a href="#" class="text-muted hover:text-primary">Conditions générales de vente</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="self-stretch py-3 bg-black justify-center items-center gap-2.5 flex">
        <div class="h-5 items-center flex container mx-auto px-4">
            <div class="text-white">© Copyright 2024 - Roxanna Valtre. Tout droits réservés.</div>
        </div>
    </div>
</div>