Select Git revision
index.blade.php 7.63 KiB
@extends('layouts.public')
@section('content')
<section class="HeroSection position-relative w-100">
<div class="container mx-auto px-4">
<x-public.navbar :socialMediaLinks="$socialMediaLinks"/>
<!-- Hero Content -->
<div class="flex w-full justify-center gap-16 items-center py-8">
<div class="MetaContainer flex flex-col shrink-0 w-full xl:w-[36rem] h-[38rem]">
<div class="flex flex-col grow shrink-0 basis-0 justify-center items-start">
<div class="flex relative flex-col justify-start items-start gap-24">
<x-public.star
class="absolute hidden 2xl:block left-[-120px] top-[-96px] origin-top-left rotate-[6deg] w-12"/>
<x-public.star
class="absolute hidden 2xl:block left-[-96px] top-[-26px] origin-top-left rotate-[-22deg] w-16"/>
<h1 class="flex flex-col justify-start items-start">
<span class="flex justify-start items-center gap-4">
<span class="text-xl xl:text-3xl font-normal">
{{ __('home.hero.first_row') }}
</span>
<x-public.arrow class="hidden xl:block w-28 h-9"/>
</span>
<span class="text-5xl xl:text-6xl font-bold">
{{ __('home.hero.second_row') }}
</span>
</h1>
<x-public.button size="large" tag="a" href="{{ route('contact') }}"
class="flex items-center gap-8">
<img class="w-10 h-10" src="{{Vite::asset("resources/images/public/waving-hand.avif")}}"
alt="{{ __('home.img_alt.waving_hand') }}" loading="eager"/>
<div class="flex flex-col justify-center items-start">
<div class="font-bold leading-6">
{{ __('home.hero.btn.title') }}
</div>
<div class="font-normal">
{{ __('home.hero.btn.description') }}
</div>
</div>
</x-public.button>
</div>
</div>
<div class="relative flex flex-col gap-4">
<x-public.star
class="absolute hidden xl:block left-[552px] top-[50px] origin-top-left rotate-[-2deg] w-20"/>
<div class="flex flex-col">
<div class="text-2xl font-bold">
{{ __('home.hero.my_specialities') }}
</div>
</div>
<div class="flex flex-wrap items-center gap-2">
@foreach($categories as $category)
<x-public.button :variant="$category->color" tag="a" name="{{ $category->slug }}"
:href="route('portfolio', ['category_id' => $category->id])">
{{ $category->nameTranslationKey->getTranslation() }}
</x-public.button>
@endforeach
</div>
</div>
</div>
<x-public.creation-masonry :creations="$creations" :target-height="1.5" :columns-count="3"
:allow-overflow="true" with-links
class="Creations relative hidden xl:grid grow w-full aspect-[885/622]"/>
</div>
</div>
<img class="HeroGrid absolute -z-10 left-0 top-0 w-100" alt="Image de fond"
src="{{Vite::asset("resources/images/public/hero-grid.avif")}}"/>
</section>