@extends('layouts.app')
@section('seo')
    <meta name="description"
          content="Diffusions Aromatiques source et distribue des matières premières pour les arômes">
    <meta name="title" content="Diffusions aromatiques - Arômes">
@endsection

@section('pageTitle',  __("Arômes"))

@section('menu')
    <x-menu></x-menu>
@endsection

@section('content')
    <div class="w-full relative text-red border-red">
        <div class="absolute top-0 left-0 w-full h-full overflow-x-hidden"
             style="background:radial-gradient(58.74% 81.51% at 58.57% 69.99%, #FFFFFF 0%, #FFE0DA 100%); ">
            {{--            <img class="slider__primary__image" src="/images/HomePage/piment.png" alt="Flavor" >--}}
            <div class="w-full h-full w-screen min-w-screen hidden xl:block"
                 style="background: url('/images/HomePage/piment.png') no-repeat; background-position: left 60% bottom 35%; background-size: 65%"></div>
            <div class="w-full h-full w-screen min-w-screen hidden lg:block xl:hidden"
                 style="background: url('/images/HomePage/piment.png') no-repeat; background-position: right -20% top;background-size: 85%"></div>
            <div class="w-full h-full w-screen min-w-screen hidden md:block lg:hidden"
                 style="background: url('/images/HomePage/piment.png') no-repeat; background-position: right -50% top; background-size: 600px"></div>
            <div class="w-full h-full w-screen min-w-screen block md:hidden"
                 style="background: url('/images/HomePage/piment.png') no-repeat; background-position: right -50px top 10%; background-size: 450px"></div>
        </div>
        <x-container class="z-10 pt-20 relative">
            <img
                class="absolute w-1/2 lg:w-auto -bottom-30 md:-bottom-60 lg:-bottom-80 left-0 md:-left-40 lg:left-0 z-50"
                src="/images/HomePage/Grenades.png"
                alt="diffusions-aromatiques - feuilles de menthe">
            <div class="slide active pt-10 lg:pt-20">
                <span class="title-outline-red text-10xl font-bold mb-8 lg:mb-16 block lg:ml-14"
                      style="line-height: 8rem">02</span>
                <div
                    class="text-6xl lg:text-7xl font-bold leading-none mb-5 uppercase">@lang('activity.flavor_title')</div>
                <p class="max-w-md text-opacity-70 leading-6">@lang('activity.flavor_subtitle')</p>
                {{--                <div class="flex items-center space-x-4 z-50 lg:absolute bottom-32 right-16 mt-10 lg:mt-0">--}}
                {{--                    <svg class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"--}}
                {{--                         fill="none">--}}
                {{--                        <circle cx="20" cy="20" r="19.5" transform="rotate(90 20 20)" stroke="currentColor"/>--}}
                {{--                        <path d="M20 12L20 27" stroke="currentColor" stroke-width="2" stroke-linecap="round"--}}
                {{--                              stroke-linejoin="round"/>--}}
                {{--                        <path d="M20 27L23.5832 23.4168" stroke="currentColor" stroke-width="2" stroke-linecap="round"--}}
                {{--                              stroke-linejoin="round"/>--}}
                {{--                        <path d="M20 27L16.4168 23.4168" stroke="currentColor" stroke-width="2" stroke-linecap="round"--}}
                {{--                              stroke-linejoin="round"/>--}}
                {{--                    </svg>--}}
                {{--                    <span class="text-sm uppercase text-current">scroll</span>--}}
                {{--                </div>--}}
            </div>
        </x-container>
    </div>
    <section class="my-16">
        <x-container>
            <div class="flex justify-end border-r-2 border-red pr-12 py-5 mb-20 lg:mb-40">
                <p class="max-w-lg text-right text-gray text-xl">@lang('activity.flavor_intro')</p>
            </div>
            <div class="grid lg:grid-cols-2 gap-x-12 gap-y-32">
                <x-activity-card title="{!! __('activity.mat_for_arome_title') !!}"
                                 img="/images/activity/feuilles.png"
                                 alt="feuilles naturels"
                                 url="/documents/Catalogues/Catalogue_Alimentaire.pdf"
                                 border="border-green-light"
                                 hover="bg-green-light"
                                 color="text-green-light">
                    @lang('activity.mat_for_arome_content')
                </x-activity-card>
            </div>
        </x-container>
    </section>
@endsection