@extends('layouts.app')
@section('seo')
    <meta name="description" content="Diffusions Aromatiques source et distribue des matières premières pour l'aromathérapie">
    <meta name="title" content="Diffusions aromatiques - Aromathérapie">
@endsection

@section('pageTitle', __("Aromathérapie"))

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

@section('content')
    <div class="w-full relative text-green border-green">
        <div class="absolute top-0 left-0 w-full h-full overflow-x-hidden"
             style="background: radial-gradient(65.33% 93.23% at 50% 50%, #E6FDF0 0%, #B0D5C0 100%);">
            <div class="w-full h-full w-screen min-w-screen hidden xl:block"
                 style="background: url('/images/HomePage/Aroma.png') no-repeat; background-position: left 60% center; background-size: 55%"></div>
            <div class="w-full h-full w-screen min-w-screen hidden lg:block xl:hidden"
                 style="background: url('/images/HomePage/Aroma.png') no-repeat; background-position: right -20% bottom 0;background-size: 75%"></div>
            <div class="w-full h-full w-screen min-w-screen hidden md:block lg:hidden"
                 style="background: url('/images/HomePage/Aroma.png') no-repeat; background-position: right 50% bottom 0; background-size: 600px"></div>
            <div class="w-full h-full w-screen min-w-screen block md:hidden"
                 style="background: url('/images/HomePage/Aroma.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/feuilles_aroma.png"
                alt="diffusions-aromatiques - feuilles de menthe">
            <div class="slide active pt-10 lg:pt-20">
                <span class="title-outline-green text-10xl font-bold mb-8 lg:mb-16 block lg:ml-14"
                      style="line-height: 8rem">03</span>
                <div class="text-6xl lg:text-7xl font-bold leading-none mb-5 uppercase">@lang('activity.aroma_title')</div>
                <p class="max-w-md text-opacity-70 leading-6">@lang('activity.aroma_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-green pr-12 py-5 mb-20 lg:mb-40">
                <p class="max-w-lg text-right text-gray text-xl">@lang('activity.aroma_intro')</p>
            </div>
            <div class="grid lg:grid-cols-2 gap-x-12 gap-y-32">
                <x-activity-card title="{{ __('Naturels') }}"
                                 img="/images/activity/feuilles.png"
                                 alt="feuilles naturels"
                                 url="/documents/Catalogues/Catalogue_Natural_ingredient.pdf"
                                 border="border-green-light"
                                 hover="bg-green-light"
                                 color="text-green-light">
                    @lang('activity.naturels_content')
                </x-activity-card>
                <x-activity-card title="{{ __('Bio') }}"
                                 img="/images/activity/feuille_bio.png"
                                 alt="bio"
                                 url="/documents/Catalogues/Catalogue_Organic_ingredients_v2.pdf"
                                 border="border-green"
                                 hover="bg-green"
                                 color="text-green">
                    @lang('activity.bio_content')
                </x-activity-card>
            </div>
        </x-container>
    </section>
@endsection