prestation.blade.php

@extends('layouts.public', ['title' => $prestation->nameTransKey->getTranslation()])

@section('content')
    <x-public.navbar class="container mx-auto px-4"/>
    <div class="container mx-auto px-4 py-24 flex flex-col lg:flex-row gap-16">
        <div class="flex flex-col gap-8 lg:grow">
            <div class="relative flex flex-col gap-4">
                <x-public.star
                        class="absolute hidden xl:block left-[-96px] top-[-34px] origin-top-left rotate-[-21deg] w-16"/>
                <div class="flex gap-2 items-center">
                    <div class="w-12">
                        {!! $prestation->icon_svg !!}
                    </div>
                    <h1 class="text-5xl xl:text-6xl">
                        {{ $prestation->nameTransKey->getTranslation() }}
                    </h1>
                </div>
                <div class="text-2xl max-w-xl">
                    {{ $prestation->attractDescTransKey->getTranslation() }}
                </div>
            </div>

            <x-markdown class="markdown">
                {{ $prestation->contentDescTransKey->getTranslation() }}
            </x-markdown>
        </div>

        <div class="hidden lg:block max-w-md w-full">
            @if($prestation->uploadedPicture()->exists())
                <img src="{{ $prestation->uploadedPicture->getMediumSizeUrl() }}"
                     alt="{{ $prestation->nameTransKey->getTranslation() }}" loading="eager"/>
            @else
                <x-public.creation-masonry :creations="$prestation->category->creations" :target-height="2"
                                           :columns-count="3"
                                           :allow-overflow="true" :gap="2"
                                           class="w-full relative aspect-square"/>
            @endif
        </div>
    </div>

    <div class="container mx-auto px-4 py-24 flex flex-col items-center gap-8">
        <div class="flex flex-col items-center gap-3">
            <div class="text-center text-4xl">{{ __('generic.custom_needs') }}</div>
            <div class="text-center text-muted text-xl">
                {{ __('generic.custom_needs_desc') }}
            </div>
        </div>
        <x-public.button size="medium" tag="a" href="{{ route('contact') }}">
            <div class="text-xl font-bold">{{ __('navbar.contact_me') }}</div>
        </x-public.button>
    </div>

    <x-public.footer/>
@endsection