@push('scripts')
    @vite(['resources/js/mainpage_scroll_trigger_animation.js'])
@endpush
<div class="absolute inset-0 bg-dark pointer-events-none"></div>
<div class="relative flex justify-center my-20">
    <div class="w-1/2">
        @include('partial.textWrapedBorder', [
            'text' => 'Nos réalisations phares',
            'color' => 'text-ultraLight',
        ])
    </div>
</div>
<div class="absolute w-full">
    <!-- Contenu -->
    <div class="relative z-10 max-w-3/4 mx-auto px-6 grid md:grid-cols-2 gap-12 h-1/2 items-start">
        <!-- Image secondaire -->
        <div class="relative flex w-full">
            <!--Image1-->
            <div class="right-0 relative w-full max-w-full aspect-1067/800">
                <img src="{{ asset('images/realisations/ameublement_acier/ameublement-acier-4_1067x800.webp') }}"
                    alt="Ameublement acier" class="rounded-xl w-full" width="1067" height="800" id="slideImage"
                    loading="eager" decoding="sync" fetchpriority="high">
            </div>
            <!--Image2-->
            <div class="absolute right-0 w-full max-w-full aspect-400/400">
                <img src="{{ asset('images/realisations/escaliers/escalier_400x400.webp') }}" alt="Escalier"
                    class="aspect-auto rounded-xl w-full" width="400" height="400" id="slideImage2" loading="lazy"
                    decoding="async">
            </div>
            <!--Image3-->
            <div class="absolute right-0 w-full max-w-full aspect-1067/800">
                <img src="{{ asset('images/realisations/pergolas/pergolas-1_1067x800.webp') }}"
                    class="aspect-auto rounded-xl w-full" width="1067" height="800" alt="pergolas" id="slideImage3" loading="lazy"
                    decoding="async">
            </div>
        </div>
        <div class="flex w-full">
            <!-- Texte 1 -->
            <div class="relative" id="slideText">
                <h2 class="text-4xl 4xl:text-6xl 5xl:text-8xl font-bold mb-6 border-l border-ultraLight text-ultraLight"><span
                        class="text-accent">A</span>meublements acier</h2>
                <p class="text-lg 4xl:text-4xl 5xl:text-6xl text-ultraLight py-10">
                    Affirmez votre style avec du mobilier métallique unique.
                    Des créations <span class="font-bold border-b border-accent">robustes</span> et design qui apportent
                    <span class="font-bold border-b border-accent">caractère</span> et <span
                        class="font-bold border-b border-accent">modernité</span> à vos espaces.
                </p>
                <a href="{{ route('steelFurnitures') }}"
                    class="text-ultraLight border border-ultraLight py-2 4xl:py-5 5xl:py-5 px-6 gap-2 rounded bg-transparent inline-flex items-center transition-colors duration-1000
                    hover:bg-primary hover:text-white hover:border-secondary 4xl:text-2xl 5xl:text-4xl">
                    <span class="uppercase">
                        Le mobilier acier
                    </span>
                    <i class="fa-solid fa-chair"></i>
                </a>
            </div>
            <!-- Texte 2 -->
            <div class="text-ultraLight absolute" id="slideText2">
                <h2 class="text-4xl 4xl:text-6xl 5xl:text-8xl font-bold mb-6 border-l border-ultraLight">
                    <span class="text-accent">E</span>scaliers
                </h2>
                <p class="text-lg 4xl:text-4xl 5xl:text-6xl text-ultraLight py-10">
                    Bien plus qu’un simple accès, l’escalier devient la <span class="font-bold border-b border-accent">pièce
                        maîtresse</span> de votre intérieur.
                    En acier, il allie <span class="font-bold border-b border-accent">solidité</span>, <span
                        class="font-bold border-b border-accent">finesse</span> et <span
                        class="font-bold border-b border-accent">esthétique</span> contemporaine pour sublimer votre
                    espace
                </p>
                <a href="{{ route('stairs') }}"
                    class="text-ultraLight border border-ultraLight py-2 4xl:py-5 5xl:py-5 px-6 gap-2 rounded bg-transparent inline-flex items-center transition-colors duration-1000
                     hover:bg-primary hover:text-white hover:border-secondary 4xl:text-2xl 5xl:text-4xl">
                    <span class="uppercase">
                        Les escaliers
                    </span>
                    <i class="fa-solid fa-stairs"></i>
                </a>
            </div>
            <!-- Texte 3 -->
            <div class="text-ultraLight absolute" id="slideText3">
                <h2 class="text-4xl 4xl:text-6xl 5xl:text-8xl font-bold mb-6 border-l border-ultraLight"><span class="text-accent">P</span>ergolas
                </h2>
                <p class="text-lg 4xl:text-4xl 5xl:text-6xl text-ultraLight py-10">
                    Transformez votre extérieur en véritable espace de vie.
                    La pergola en acier <span class="font-bold border-b border-accent">structure</span>,
                    <span class="font-bold border-b border-accent">protège</span> et
                    <span class="font-bold border-b border-accent">valorise</span> votre terrasse avec une finition
                    élégante et
                    <span class="font-bold border-b border-accent">durable</span>.
                </p>
                <a href="{{ route('pergolas') }}"
                    class="text-ultraLight border border-ultraLight py-2 4xl:py-5 5xl:py-5 px-6 gap-2 rounded bg-transparent inline-flex items-center transition-colors duration-1000
                     hover:bg-primary hover:text-white hover:border-secondary 4xl:text-2xl 5xl:text-4xl">
                    <span class="uppercase">
                        Les pergolas
                    </span>
                    <i class="fa-solid fa-person-shelter"></i>
                </a>
            </div>
        </div>
    </div>
    <div class="absolute top-1/2 right-10 text-accent" aria-label="Scroller la page" title="Scroller la page">
        <div class="transform -translate-x-1/2 z-20">
            <div class="flex flex-col items-center animate-bounce">
                <span class="text-xs 4xl:text-lg 5xl:text-2xl font-sans text-moss-dark opacity-80 mb-2 tracking-widest">Scroll</span>
                <div class="w-6 h-10 4xl:w-8 4xl:h-14 5xl:w-12 5xl:h-19 rounded-full border-2 border-moss border-opacity-50 flex justify-center p-1">
                    <div class="w-0.75 h-2 rounded bg-accent"></div>
                </div>
            </div>
        </div>
    </div>
</div>