@extends('layouts.master')

@section('title', 'Accueil du bureau d\'architecture s\'Architecturer')

@section('meta_description', "Découvrez s’Architecturer, un bureau d'architecture en Suisse. Collaborons pour réaliser vos projets. Contactez-nous dès aujourd'hui.")

@section('content')

<!-- section start -->
<section data-speed="1200" data-autoplay-delay="2900" class="sliderMain -type-3 js-sliderMain-type-3 sm:layout-mt-headerBar">
    <!-- container start -->
    <div class="container-fluid h-full px-0 sm:px-20">
        <!-- row start -->
        <div class="row sm:justify-content-center h-full">

            <!-- text slider start -->
            <div class="col-xl-3 offset-xl-2 col-lg-4 offset-lg-1 col-md-5 offset-md-1 col-sm-9">
                <div class="slider__content__wrapper sm:text-center h-full z-3">

                    
                    @foreach ($sliders as $slider)
                    <div class="slider__content is-active js-slider-content">
                        <div data-split="lines">
                            <p class="slider__subtitle text-sm uppercase tracking-md leading-md mb-32 js-subtitle">
                                {{ $slider['category'] }}
                            </p>
                        </div>
                        <div data-split="lines" class="mr-minus-col-2 sm:mr-0">
                            <h1 class="slider__title fw-700 leading-xs js-title">
                                {{ $slider['title'] }}
                            </h1>
                        </div>
                        <div class="slider__button overflow-hidden mt-32">
                            <div class="js-button py-4">
                                <a href="{{ route($slider['url_button']) }}" class="button -md -black text-white">
                                    {{ $slider['text_button'] }}
                                </a>
                            </div>
                        </div>
                    </div>
                    @endforeach
                                    </div>
            </div>
            <!-- text slider end -->

            <!-- image slider start -->
            <div class="col layout-pr-headerBar lg:pr-0 col-lg-7 col-md-6 swiper-col">
                <div class="swiper-container h-100vh">
                    <div class="swiper-wrapper z-2">

                                                @foreach ($sliders as $slider)
                        <div class="swiper-slide overflow-hidden">
                            <div class="slider__img" data-swiper-parallax="150" data-parallax="0.7" data-swiper-parallax-opacity="0">
                                <div data-parallax-target class="bg-image swiper-lazy js-image" data-background="{{ $slider['image'] }}"></div>
                            </div>

                            <div class='slider__img__cover js-image-cover'></div>
                            <div class="slider__img__bg bg-dark-1"></div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <!-- image slider end -->

        </div>
        <!-- row end -->

        <!-- slider nav start -->
        <div class="slider__navs js-slider-nav js-ui">
            <div class="navButton">
                <button type="button" class="navButton__item button -outline-black text-black js-prev">
                    <i class="icon" data-feather="arrow-left"></i>
                </button>
                <button type="button" class="navButton__item button -outline-black text-black mt-12 js-next">
                    <i class="icon" data-feather="arrow-right"></i>
                </button>
            </div>
        </div>
        <!-- slider nav end -->
    </div>
    <!-- container end -->

    <!-- ui-element start -->
    <div class="ui-element -bottom-left sm:d-none js-ui">
        <button type="button" class="ui-element__scroll text-black js-ui-scroll-button">
            Glisser vers le bas
            <i class="icon" data-feather="arrow-down"></i>
        </button>
    </div>
    <!-- ui-element end -->
</section>

<!-- section start -->
<section class="layout-pt-xl layout-pb-sm">
    <!-- container start -->
    <div class="container-fluid px-0">
        <!-- row start -->
        <div class="row no-gutters align-items-center">

            <div class="col-lg-6 z-1">
                <div>
                    <div class="ratio ratio-1:1" data-parallax="0.7">
                        <div data-parallax-target class="bg-image js-lazy">
                            <video autoplay muted loop loopcontrols playsinline width="100%" style="margin-top: 135px;">
                                <source src="{{ asset('img/office.mp4') }}" type="video/mp4" />
                            </video>
                        </div>
                    </div>
                </div>
            </div>


            <div class="col-xl-3 col-lg-4 z-2 ml-80 md:ml-0 md:mt-48">
                <div class="sectionHeading -xl md:container pt-16">
                    <div>
                        <p class="sectionHeading__subtitle">
                            Bureau
                        </p>
                    </div>
                    <div class="ml-minus-col-1 lg:ml-minus-lg mr-minus-col-2 md:ml-0 md:mr-0">
                        <h2 class="sectionHeading__title mt-48 md:mt-24">
                            Une raison<br>
                            de construire.
                        </h2>
                    </div>
                    <div>
                        <p class="mt-56 lg:mt-40 md:mt-20">
                            s’Architecturer est un bureau d'architectes où vous collaborez avec des personnes qui s’engagent dans votre projet de vie. Vous ne rejoindrez pas seulement un univers, vous y apporterez le vôtre. Vous êtes la différence, votre projet est le souffle de notre inspiration.
                        </p>
                    </div>
                    <div>
                        <a data-barba href="{{ route('office') }}" class="button -md -outline-black text-black mt-56 lg:mt-48 md:mt-32">
                            En savoir plus
                        </a>
                    </div>
                </div>
            </div>

        </div>
        <!-- row end -->
    </div>
    <!-- container end -->
</section>
<!-- section end -->

<!-- section start -->
<section class="layout-pt-xs layout-pb-xs">
    <!-- container start -->
    <div class="container">

        <!-- row start -->
        <div class="row justify-content-between align-items-end">
            <div class="col-md-4">
                <div class="sectionHeading -md">
                    <p class="sectionHeading__subtitle">
                        Projets
                    </p>
                    <h2 class="sectionHeading__title">
                        Construire, c'est se construire.
                    </h2>
                </div>
            </div>

            <div class="col-md-auto col-sm-12 sm:mt-24">
                <a href="{{ route('projects') }}" class="button -md -outline-black text-black">
                    Projets
                </a>
            </div>
        </div>
        <!-- row end -->

    </div>
    <!-- container end -->
</section>
<!-- section end -->

<!-- section start -->
<section class="layout-pt-xs layout-pb-xl">
    <div class="container">
        <!-- row start -->
        <div class="fancy-grid -col-2 -reverse layout-pt-sm">

            @foreach ($projects as $project)
            <div class="fancy-grid__item">
                <a data-cursor-icon="arrow-right" class="portfolioCard -type-1 -hover" data-barba href="{{ route('project-single', ['single' => $project['slug_project']]) }}">
                    <div class="portfolioCard__img">
                        <div class="portfolioCard__img__inner">
                            <div class="ratio ratio-1:1 bg-image js-lazy" data-bg="{{ asset('img/projects/' . $project['name']) }}"></div>
                        </div>
                    </div>

                    <div class="portfolioCard__content pt-24">
                        <div>
                            <p class="portfolioCard__category leading-md text-dark">
                                {{ $project['category'] }}
                            </p>
                        </div>

                        <div>
                            <h3 class="portfolioCard__title leading-md fw-500 text-2xl mt-8">
                                {{ $project['title'] }}
                            </h3>
                        </div>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
        <!-- row end -->
    </div>
</section>
<!-- section end -->

@endsection