@extends('layouts.app')
@section('content')
+
<div x-data="{ ready: true }"
:class="{ 'opacity-0': !ready }" {{-- opacity-0 will be removed as soon as Alpine fires --}}
class="flex flex-col flex-1 -mx-22 -mt-22 opacity-0">
{{-- Link blocks --}}
<div class="grid grid-cols-3 gap-6 text-center lg:text-left" x-data="{ shown: false }"
x-intersect="shown = true">
- @foreach($home->get('raccourcis') as $shortcut)
- <x-link :href="$shortcut['link']"
- class="group relative
+ @if(null!==$home->get('raccourcis'))
+ @foreach($home->get('raccourcis') as $shortcut)
+ <x-link :href="$shortcut['link']"
+ class="group relative
flex flex-col lg:flex-row items-center
bg-blue text-white p-6 rounded-lg overflow-hidden">
- <img class="flex-shrink lg:mr-8 max-h-30 lg:max-h-none lg:w-[40%]" src="{{ $home->getImageURLbyCollection($shortcut['image']) }}"
- alt="">
- <div class="lg:flex-1 lg:flex-shrink-0 space-y-2">
- <h3 class="font-semibold uppercase">{{ $shortcut['title'] }}</h3>
- <p>{{ $shortcut['content'] }}</p>
- <div class="circle-arrow transition transform group-hover:scale-110"></div>
- </div>
- {{-- Initial Mask --}}
- <div
- class="absolute top-0 left-0 w-full h-full bg-white z-1 transition-transform transform origin-top ease-out duration-500"
- :class="{ 'scale-y-0': shown }"
- style="transition-delay: {{ 300 + $loop->index * 100 }}ms"
- >
- </div>
- </x-link>
- @endforeach
+ <img class="flex-shrink lg:mr-8 max-h-30 lg:max-h-none lg:w-[40%]"
+ src="{{ $home->getImageURLbyCollection($shortcut['image']) }}"
+ alt="">
+ <div class="lg:flex-1 lg:flex-shrink-0 space-y-2">
+ <h3 class="font-semibold uppercase">{{ $shortcut['title'] }}</h3>
+ <p>{{ $shortcut['content'] }}</p>
+ <div class="circle-arrow transition transform group-hover:scale-110"></div>
+ </div>
+ {{-- Initial Mask --}}
+ <div
+ class="absolute top-0 left-0 w-full h-full bg-white z-1 transition-transform transform origin-top ease-out duration-500"
+ :class="{ 'scale-y-0': shown }"
+ style="transition-delay: {{ 300 + $loop->index * 100 }}ms"
+ >
+ </div>
+ </x-link>
+ @endforeach
+ @endif
</div>
</div>