@extends('base_html')
@push('GA')
    @vite(['resources/js/gaManager.js'])
@endpush
@section('title', 'Notre entreprise')
@section('meta_content_description',
    'Découvrez Atelier Steel Art, spécialiste des créations en acier sur mesure :
    ameublement, pergolas, escaliers et autres réalisations robustes et élégantes.')
@section('meta_robots', 'index, follow')

@section('content')
    @include('partial.titlebanner', [
        'firstPartTitle' => 'Notre',
        'secondPartTitle' => 'entreprise',
    ])
    @include('partial.navigation.breadcrumb', [
        'pages' => [
            ['name' => 'Atelier Steel Art', 'url' => '/', 'disabled' => false],
            ['name' => 'Notre entreprise', 'url' => '/notre-entreprise', 'disabled' => false],
        ],
    ])

    <section>
        <div class="flex flex-col md:flex-row items-center py-5">
            <img src="{{ asset('images/entreprise/entreprise_1200x900.webp') }}"
                srcset="{{ asset('images/entreprise/entreprise_480x360.webp') }} 480w,
                        {{ asset('images/entreprise/entreprise_800x600.webp') }} 800w,
                        {{ asset('images/entreprise/entreprise_1200x900.webp') }} 1200w,
                        {{ asset('images/entreprise/entreprise_1600x1200.webp') }} 1600w,
                        {{ asset('images/entreprise/entreprise_2000x1500.webp') }} 2000w"
                sizes="(min-width: 768px) 25vw, 100vw"
                width="2000" height="1500" fetchpriority="high" decoding="async"
                alt="Alexis Luciani, artisan métallier de l'Atelier Steel Art, dans son atelier devant une table en bois présentant ses créations en acier"
                class="object-cover object-center w-full h-80 sm:h-96 md:h-auto md:w-1/4 md:self-stretch rounded-r-lg">
            <div class="flex flex-col p-5">
                @include('partial.pageSubTitle', [
                    'smallTextPart' => 'Atelier Steel Art',
                    'titleFirstPart' => 'Artisan créateur',
                    'titleSecondPart' => 'Loire 42',
                    'textFirstPart' => 'Alexis',
                    'textSecondPart' => 'LUCIANI',
                ])
                <p class="tracking-widest font-bold 5xl:text-xl">
                    <span class="text-accent">Atelier Steel Art</span>
                    est une entreprise artisanale spécialisée dans la conception et la fabrication
                    d’ouvrages métalliques personnalisés.

                    Fort de 15 ans d’expérience en atelier, sur chantier et en bureau d’étude, je mets mon savoir-faire au
                    service de projets alliant technicité, esthétisme et durabilité.

                    Mobilier, escaliers, garde-corps, verrières ou pergolas : chaque réalisation est pensée avec précision
                    pour donner du caractère à vos espaces, en intérieur comme en extérieur
                </p>
                <div class="py-5 flex justify-around">
                    <a href="{{ route('actualities') }}"
                        class="text-dark border border-primary py-2 px-6 gap-2 rounded inline-flex items-center transition-colors duration-1000 hover:bg-primary
                         hover:text-white 5xl:text-xl">
                        <span class="uppercase">
                            projets réalisés
                        </span>
                        <i class="fa-solid fa-clipboard-check"></i>
                    </a>
                    <a href="{{ route('gallery') }}"
                        class="text-dark border border-primary py-2 px-6 gap-2 rounded inline-flex items-center transition-colors duration-1000 hover:bg-primary
                        hover:text-white 5xl:text-xl">
                        <span class="uppercase">
                            Galerie photo
                        </span>
                        <i class="fa-solid fa-eye"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <section class="bg-primary">
        <div class="flex justify-center p-5">
            <h3 class="text-ultraLight uppercase text-xl font-extralight tracking-widest p-5 border-l">
                Réalisation sur mesure
            </h3>
        </div>
        <div class="container relative z-40 mx-auto py-12">
            <div>
                <div class="flex flex-wrap justify-center mx-auto lg:w-full md:w-5/6 xl:shadow-small-blue">
                    <a href="{{ route('stairs') }}"
                        class="block w-1/2 py-10 text-center lg:w-1/4 rounded shadow-2xl
                transition-all duration-300 ease-in-out hover:scale-110 text-ultraLight hover:border hover:text-primary hover:border-ultraLight hover:bg-ultraLight">
                        <div class="flex flex-col items-center">
                            <div class="rounded-full bg-ultraLight">
                                <img src="{{ asset('images/icons/stair.webp') }}" alt="" width="100" height="100"
                                    loading="lazy">
                            </div>
                            <p class="pt-4 text-sm font-medium capitalize font-body lg:text-lg md:text-base md:pt-6">
                                Escaliers
                            </p>
                        </div>
                    </a>
                    <a href="{{ route('pergolas') }}"
                        class="block w-1/2 py-10 text-center lg:w-1/4 rounded shadow-2xl
                transition-all duration-300 ease-in-out hover:scale-110 text-ultraLight hover:border hover:text-primary hover:border-ultraLight hover:bg-ultraLight">
                        <div class="flex flex-col items-center">
                            <div class="rounded-full bg-ultraLight">
                                <img src="{{ asset('images/icons/pergola.webp') }}" alt="" width="100" height="100"
                                    loading="lazy">
                            </div>
                            <p class="pt-4 text-sm font-medium capitalize font-body lg:text-lg md:text-base md:pt-6">
                                Pergolas
                            </p>
                        </div>
                    </a>
                    <a href="{{ route('guardrails') }}"
                        class="block w-1/2 py-10 text-center lg:w-1/4 rounded shadow-2xl
                transition-all duration-300 ease-in-out hover:scale-110 text-ultraLight hover:border hover:text-primary hover:border-ultraLight hover:bg-ultraLight">
                        <div class="flex flex-col items-center">
                            <div class="rounded-full bg-ultraLight">
                                <img src="{{ asset('images/icons/guardrail.webp') }}" alt="" width="100" height="100"
                                    loading="lazy">
                            </div>
                            <p class="pt-4 text-sm font-medium capitalize font-body lg:text-lg md:text-base md:pt-6">
                                Garde-corps
                            </p>
                        </div>
                    </a>
                </div>
                <p class="text-center py-10 text-ultraLight text-lg tracking-widest">Et bien plus encore...</p>
            </div>
        </div>
    </section>
    <section class="bg-ultraLight">
        <div class="flex justify-center p-5">
            <h3 class="text-dark uppercase text-xl font-extralight tracking-widest p-5 border-l">
                Demander un devis
            </h3>
        </div>
        <div class="flex justify-center py-5">
            <div class="w-1/2">
                <div>
                    <p>
                        <span class="text-accent">Vous avez un projet</span> de
                        Structure, aménagement, mobilier, extérieur, intérieur…
                        Parlez-nous de vos idées et obtenez une estimation claire, gratuite et sans engagement.
                        Nous réalisons tous types d’ouvrages en acier, entièrement sur mesure.
                        Du plus simple au plus technique, chaque projet est étudié avec soin pour vous proposer une solution
                        adaptée.
                    </p>
                </div>
                <div class="py-10">
                    <div class="flex flex-col items-center lg:flex-row lg:items-start justify-around">
                        <div class="group flex flex-col text-center p-3">
                            <i
                                class="group-hover:text-accent transition-colors duration-1000 ease-in-out fa-regular fa-circle-check fa-2x text-dark p-2"></i>
                            <span class="tracking-widest uppercase">étude technique de votre projet</span>
                        </div>
                        <div class="group flex flex-col text-center p-3">
                            <i
                                class="group-hover:text-accent transition-colors duration-1000 ease-in-out fa-regular fa-circle-check fa-2x text-dark p-2"></i>
                            <span class="tracking-widest uppercase">Conseils</span>
                        </div>
                        <div class="group flex flex-col text-center p-3">
                            <i
                                class="group-hover:text-accent transition-colors duration-1000 ease-in-out fa-regular fa-circle-check fa-2x text-dark p-2"></i>
                            <span class="tracking-widest uppercase">choix des matériaux et finitions</span>
                        </div>
                        <div class="group flex flex-col text-center p-3">
                            <i
                                class="group-hover:text-accent transition-colors duration-1000 ease-in-out fa-regular fa-circle-check fa-2x text-dark p-2"></i>
                            <span class="tracking-widest uppercase">adaptation aux contraintes de votre espace</span>
                        </div>
                    </div>
                    <div class="flex justify-around">
                        <a href="{{ route('contact') }}"
                            class="text-dark border border-primary py-2 px-6 gap-2 rounded inline-flex items-center transition-colors duration-1000
                            hover:bg-primary hover:text-white 5xl:text-xl">
                            <span class="uppercase">
                                Devis gratuit et sans engagement
                            </span>
                            <i class="fa-regular fa-circle-question"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection