@extends('layouts.front')
@php $page_title = 'Pipcke Pro'; @endphp
@php $page_cover = asset('img/professionnels-cover.jpg'); @endphp
@php $no_full_title = true; @endphp
@section('meta-title', 'Aménagement espaces de travail | Pipcke – Déco d’intérieur')
@section('meta-keywords', '')
@section('meta-description', '')
@section('body-class', 'professionnels')

@section('meta')

    <meta property="og:url" content="{{ request()->url() }}" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Aménagement espaces de travail | Pipcke – Déco d’intérieur" />
    <meta property="og:description"
        content="Augmentez la productivité de vos équipes et développez vos ventes en optimisant un aménagement espaces de travail sur mesure s'adaptant à votre budget." />
    <meta name="description"
        content="Augmentez la productivité de vos équipes et développez vos ventes en optimisant un aménagement espaces de travail sur mesure s'adaptant à votre budget." />
    <meta property="twitter:image" content="{{ $page_cover }}">
    <meta property="og:image" content="{{ $page_cover }}">
    <meta property="fb:app_id" content="730800570418065">

@endsection
@section('additional-schema')
    <script type="application/ld+json">
        {
            "@context": "https://schema.org/",
            "@type": "Product",
            "name": "Décorateurs et Architectes d'Intérieur en ligne",
            "brand": {
                "@type": "Brand",
                "name": "Pipcke"
            },
            "description": "Collaborez en ligne à partir de 90€ avec un architecte d'intérieur de votre choix sur l'aménagement de vos espaces intérieurs",
            "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": 4.8,
                "reviewCount": 154
            }
        }
    </script>
@endsection
@section('content')
    <div class="loader">
        <div></div>
    </div>

    <section class="vc_row pt-65 pb-30" id="offres">
        @include('front.components.offresPro')
    </section>

    <section class="vc_row pt-65 bg-light">
        <div class="container">
            <div class="row ">
                <div class="col-md-6 col-md-push-6 mb-5 mb-md-0 p-0 border-radius-10 bg-image"
                    style="background: url({{ asset('img/proffesionnels-bureau.jpg') }}) 50% 50%; background-size: cover;">

                </div>

                <div class="col-md-6 col-md-pull-6 pr-md-6 p-0 pt-25 pb-25">
                    <div id="iconbox-linked-1"
                        class="iconbox iconbox-side iconbox-lg iconbox-heading-sm iconbox-icon-linked mb-20"
                        data-animate-icon="true" data-plugin-options='{"color":"rgb(51, 51, 51)","hoverColor":"#35cc61"}'>
                        <div class="contents">
                            <h3 class="font-weight-semibold">{!! lang('Conception et aménagement de bureaux et d’espaces de travail') !!}</h3>
                            <p>
                                {!! lang(
                                    'Pipcke vous offre la possibilité de créer un espace de travail sur mesure qui reflète l’identité de votre entreprise, favorise la productivité de vos équipes et marque vos clients.',
                                ) !!}
                            </p>
                            <br>
                            <p>
                                {!! lang(
                                    'Vous serez surpris par la capacité de nos architectes d’intérieur à créer des espaces uniques, fun et fonctionnels en s’adaptant à tous les budgets.',
                                ) !!}
                            </p>
                            <a href="#offres" class="btn btn2 font-size-16" style="border-radius: 100px"
                                data-localscroll="true">
                                {!! lang('N’attendez pas, Startuppons!') !!}
                            </a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="row pt-20 panel bg-light" style="padding-bottom: 0px !important; margin-bottom: 0px !important;">
            <div class="lqd-column col-md-12 ">
                <header class="fancy-title text-center pt-30" style="margin: 0;">
                    <h2 class="h4" style="font-family: 'Poppins' !important;">{!! lang('Quelques-unes de nos réalisations') !!}</h2>
                </header>
            </div>
            @include('front.components.carrouselPro', ['projects' => $pinnedPro_1])
        </div>
    </section>
    <section class="vc_row pt-65 ">
        <div class="container">
            <div class="row ">
                <div class=" col-md-6 mb-5 mb-md-0 p-0 border-radius-10 bg-image"
                    style="background: url({{ asset('img/professionnels-boutique.jpg') }}) 50% 50%; background-size: cover;">

                </div>
                <div class=" col-md-6 pl-md-6 p-0 pt-25 pb-25">
                    <div id="iconbox-linked-1"
                        class="iconbox iconbox-side iconbox-lg iconbox-heading-sm iconbox-icon-linked mb-20"
                        data-animate-icon="true" data-plugin-options='{"color":"rgb(51, 51, 51)","hoverColor":"#35cc61"}'>
                        <div class="contents">
                            <h3 class="font-weight-semibold">{!! lang('Conception et aménagement de boutiques et de locaux commerciaux') !!}</h3>
                            <p>
                                {!! lang(
                                    'L’aspect esthétique de votre commerce est tout aussi important que les produits ou services que vous offrez. Nous sommes convaincus que chaque espace mérite sa propre identité à mettre en avant pour imposer votre marque.',
                                ) !!}
                            </p>
                            <br>
                            <p>
                                {!! lang(
                                    'Point de vente, restaurant, bar, salon de thé… Faites appel à nos architectes d’intérieur pour faire de votre espace commercial un lieu unique et à votre image, en dénichant le mobilier et les accessoires qui sauront valoriser votre projet.',
                                ) !!}
                            </p>
                            <a href="#offres" class="btn btn2 font-size-16" style="border-radius: 100px"
                                data-localscroll="true">{!! lang('Votre aventure démarre ici !') !!}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row pt-20 panel" style="padding-bottom: 0px !important; margin-bottom: 0px !important;">
                <div class="lqd-column col-md-12">
                    <header class="fancy-title text-center pt-30" style="margin: 0;">
                        <h2 class="h4" style="font-family: 'Poppins' !important;">{!! lang('Quelques-unes de nos réalisations') !!}</h2>
                    </header>
                </div>
                @include('front.components.carrouselPro', ['projects' => $pinnedPro_2])
            </div>
        </div>
    </section>
    <section class="vc_row pt-65 bg-light">
        <div class="container">
            <div class="row">
                <div class="col-md-12 pt-25 pb-25">
                    <div id="iconbox-linked-1"
                        class="iconbox iconbox-side iconbox-lg iconbox-heading-sm iconbox-icon-linked mb-20"
                        data-animate-icon="true" data-plugin-options='{"color":"rgb(51, 51, 51)","hoverColor":"#35cc61"}'>
                        <div class="contents pt-30" style="text-align: center">
                            <h3 class="font-weight-semibold">{!! lang('Conception et aménagement de biens immobiliers') !!}</h3>
                            <p>
                                {!! lang(
                                    'Agent immobilier, propriétaire ou promoteur, nos architectes d’intérieur sont à votre disposition pour maximiser l’attractivité de vos biens.',
                                ) !!}
                            </p>
                            <br>
                            <p>
                                {!! lang(
                                    'Nous serons heureux de discuter avec vous de votre projet et de vous proposer les moyens nécessaires pour convaincre les acheteurs du potentiel de votre bien et en augmenter la valeur.',
                                ) !!}
                            </p>
                            <br>

                            <a href="#contact" class="btn btn2 font-size-16" style="border-radius: 100px"
                                data-localscroll="true">{!! lang('Parlez-nous de votre projet') !!}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid bg-light">
            <div class="row pt-20 panel bg-light" style="padding-bottom: 0px !important; margin-bottom: 0px !important;">
                <div class="lqd-column col-md-12 bg-light">
                    <header class="fancy-title text-center pt-30" style="margin: 0;">
                        <h2 class="h4" style="font-family: 'Poppins' !important;">{!! lang('Quelques-unes de nos réalisations') !!}</h2>
                    </header>
                </div>
                @include('front.components.carrouselPro', ['projects' => $pinnedPro_3])
            </div>
        </div>
    </section>
    <section class="vc_row pt-30 pb-100 bg-light" id="contact">
        <div class="container">
            <div class="row">
                <div class=" col-md-12 px-4 pt-45 pb-30 bg-white box-shadow-1">
                    <div class="row d-flex flex-wrap align-items-center">
                        <div class=" col-md-6 col-md-offset-1">
                            <header class="fancy-title">
                                <h2>{!! lang('Nous vous apporterons les meilleures solutions !') !!}</h2>
                            </header>
                        </div>
                        <div class=" col-md-4 hidden-sm hidden-xs text-right">
                            <div class="iconbox text-right iconbox-xl" data-animate-icon="true"
                                data-plugin-options='{"resetOnHover":true,"color":"rgb(216, 219, 226)","hoverColor":"rgb(0, 0, 0)"}'>
                                <div class="iconbox-icon-wrap">
                                    <span class="iconbox-icon-container">
                                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                                            xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px"
                                            height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64"
                                            xml:space="preserve">
                                            <polygon stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10"
                                                points="1,30 63,1 23,41" />
                                            <polygon stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10"
                                                points="34,63 63,1 23,41" />
                                        </svg>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-10 col-md-offset-1">
                            <div class="contact-professionnels contact-form-inputs-underlined contact-form-button-circle">
                                <form action="{{ route('professionnels.post') }}" method="post"
                                    enctype="multipart/form-data" id="contact-pro-form">
                                    {{ csrf_field() }}
                                    <div class="row d-flex flex-wrap">
                                        <div class=" col-md-6">
                                            <input class="lh-25 mb-30" tabindex="1" type="text" name="prenom"
                                                placeholder="Prénom *" required>
                                        </div>

                                        <div class=" col-md-6">
                                            <input class="lh-25 mb-30" tabindex="2" type="text" name="nom"
                                                placeholder="Nom *" required>
                                        </div>

                                        <div class=" col-md-6">
                                            <input class="lh-25 mb-30" tabindex="3" type="text" name="societe"
                                                placeholder="Société *" required>
                                        </div>

                                        <div class=" col-md-6">
                                            <input class="lh-25 mb-30" tabindex="4" type="text" name="activite"
                                                placeholder="Activité">
                                        </div>

                                        <div class=" col-md-6">
                                            <input class="lh-25 mb-30" tabindex="5" type="email" name="email"
                                                placeholder="Email *" required>

                                        </div>
                                        <div class="col-md-6">
                                            <input class="lh-25 mb-30" tabindex="6" type="tel" name="telephone"
                                                placeholder="Téléphone *" required>
                                        </div>
                                        <div class=" col-md-12">
                                            <textarea cols="10" tabindex="7" style="min-height: 130px" rows="4" name="description"
                                                placeholder="Description du projet *" required></textarea>
                                        </div>

                                        {{-- <div class="col-md-6">
                                    <div class="pt-3"> 
                                        <input type="file" class="inputfile d-none" multiple="" name="files[]" multiple="" id="files">
                                        <label for="files" >
                                            <i class="fa fa-upload"></i> 
                                            <span>{!! lang('Choisir un ou plusieurs fichiers') !!}&hellip;</span>
                                        </label>
                                    </div>
                                </div> --}}

                                        <div class="col-md-6">
                                        </div>
                                        <div class="col-md-6 mt-20">
                                            <p class="font-size-16 opacity-07"><em>* {!! lang('information obligatoire') !!}</em></p>
                                        </div>
                                        <div class=" col-md-6 text-md-right">
                                            <button
                                                class="btn btn-sm btn-formulaire btn2">{!! lang('Envoyer') !!}</button>
                                        </div>
                                    </div>
                                </form>
                                <div class="contact-form-result hidden"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>

    <section class="vc_row pb-80">
        <div class="container-fluid">
            <div class="row pt-20 panel" style="padding-bottom: 0px !important">
                <div class="lqd-column col-md-12">
                    <header class="fancy-title text-center pt-30" style="margin: 0;">
                        <h2 class="h4" style="font-family: 'Poppins' !important;">{!! lang('Ils nous ont fait confiance') !!}</h2>
                    </header>
                </div>
                @include('front.components.carrouselLogo')
            </div>
        </div>
    </section>
@endsection