@extends('layouts.app')
@section('seo')
    <meta name="description" content="Diffusions Aromatiques fournis des matières premières de qualités à des prix compétitif.">
    <meta name="title" content="Diffusions Aromatiques - A propos">
@endsection

@section('pageTitle', __("A propos"))

@section('menu')
    <x-menu background="bg-white"></x-menu>
@endsection

@section('content')
    <div>
        <div class="relative overflow-hidden flex flex-col-reverse text-blue h-110">
            <img class="self-start" src="/images/about/header_about.png" alt="Diffusions aromatiques - a propos">
            {{\Diglactic\Breadcrumbs\Breadcrumbs::render('about')}}
            <h1 class="absolute left-30 top-30 md:top-40 md:left-1/3 lg:left-1/3 title-outline-green-light text-6xl md:text-8xl lg:text-10xl">
                @lang('about.title')</h1>
        </div>
        <section class="bg-blue-pastel text-blue bg-opacity-8 py-20 md:py-40">
            <div class="max-w-3xl mx-auto flex flex-col items-center px-5">
                <p class="text-center text-xl mb-10">
                    @lang('about.intro')
                </p>
                <x-simple-logo></x-simple-logo>

            </div>
        </section>
        <section class="py-26">
            <div class="max-w-3xl mx-auto flex justify-center">
                <x-application-logo class="block w-2/3 lg:w-full text-blue-contrast"></x-application-logo>
            </div>
        </section>
        <section class="relative mb-26">
            <img class="lg:hidden absolute z-10 right-0 -bottom-20 md:-bottom-52 w-1/3 md:w-auto"
                 src="/images/about/feuille.png"
                 alt="Diffusions Aromatiques - Feuilles">
            <x-container class="xl:flex items-center space-y-13 lg:space-y-0 lg:space-x-13">
                <div class="w-full lg:pl-28" id="engagements">
                    <h2 class="text-green-light uppercase text-5xl leading-none font-bold mb-10">@lang('Nos valeurs')</h2>
                    <h3 class="text-green-light mb-2 font-semibold">@lang('about.transparence_title')</h3>
                    <p class="text-gray text-xl mb-4">
                        @lang('about.transparence_content')
                    </p>
                    <h3 class="text-green-light mb-2 font-semibold">@lang('about.dynamisme_title')</h3>
                    <p class="text-gray text-xl mb-4">
                        @lang('about.dynamisme_content')
                    </p>
                </div>
                <img class="w-full" src="/images/about/valeurs.jpg" alt="">
            </x-container>
            <x-container class="relative lg:flex items-center space-y-13 lg:space-y-0 lg:space-x-13">
                <img class="hidden lg:block z-10 transform md:-bottom-52 w-1/4 absolute -left-32 -top-52"
                     src="/images/about/feuille.png"
                     alt="Diffusions Aromatiques - Feuilles" style="transform: scaleX(-1) rotate(60deg);">
                <div class="w-full lg:pl-72 lg:max-w-4xl">
                    <h3 class="text-green-light mb-2 font-semibold">@lang('about.reactivite_title')</h3>
                    <p class="text-gray text-xl mb-4">
                        @lang('about.reactivite_content')
                    </p>
                    <h3 class="text-green-light mb-2 font-semibold">@lang('about.environnement_title')</h3>
                    <p class="text-gray text-xl mb-4">
                        @lang('about.environnement_content')
                    </p>
                </div>
            </x-container>
        </section>
        <section class="relative mb-26">
            <x-container class="lg:flex items-center space-y-13 lg:space-y-0 lg:space-x-13" id="qualite">
                <div class="w-full">
                    <h2 class="text-blue-pastel uppercase text-5xl leading-none font-bold mb-10">@lang('Notre contrat qualité')</h2>
                    @lang('about.qualite')
                </div>
                <img class="w-full xl:max-w-screen-sm" src="/images/about/contratqualite.jpg" alt="contrat qualite - diffusions aromatiques">
            </x-container>
        </section>
        <section class="relative mb-26">
            <x-container class="lg:flex items-center space-y-13 lg:space-y-0 lg:space-x-13" id="qualite">
                <img class="w-full xl:max-w-screen-sm" src="/images/about/sniaa.png" alt="sniaa - diffusions aromatiques">
                <div class="w-full">
                    <h2 class="text-green-aroma uppercase text-5xl leading-none font-bold mb-10">@lang('about.sniaa_title')</h2>
                    <p class="text-gray text-xl">@lang('about.sniaa')</p>
                </div>
            </x-container>
        </section>
        <section class="relative bg-blue-contrast bg-opacity-10 py-20 md:py-30">
            <x-container class="lg:flex items-center space-y-13 lg:space-y-0 lg:space-x-13" id="patrimoine">
                <img class="w-full" src="/images/about/patrimoine.png" alt="patrimoine - diffusions aromatiques">
                <div class="w-full lg:pr-28">
                    <h2 class="text-blue-contrast uppercase text-4xl md:text-5xl leading-none font-bold mb-10">@lang('Un patrimoine vivant')</h2>
                    <p class="text-gray text-xl">@lang('about.patrimoine')</p>
                </div>
            </x-container>
        </section>
    </div>
@endsection