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

@section('pageTitle', __("Cosmétique"))

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

@section('content')
    <div class="w-full relative text-blue border-blue">
        <div class="absolute top-0 left-0 w-full h-full overflow-x-hidden"
             style="background: radial-gradient(83.4% 119.01% at 50% 50%, rgba(143, 173, 191, 0) 0%, rgba(168, 197, 215, 0) 0.01%, #8DB5CE 100%);">
            <div class="w-full h-full w-screen min-w-screen hidden xl:block"
                 style="background: url('/images/HomePage/cosmetique.png') no-repeat; background-position: left 70% bottom 100%; background-size: 50%"></div>
            <div class="w-full h-full w-screen min-w-screen hidden lg:block xl:hidden"
                 style="background: url('/images/HomePage/cosmetique.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/cosmetique.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/cosmetique.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_cosmetique.png"
                alt="diffusions-aromatiques - feuilles de menthe">
            <div class="slide active pt-10 lg:pt-20">
                <span class="title-outline-blue text-10xl font-bold mb-8 lg:mb-16 block lg:ml-14"
                      style="line-height: 8rem">04</span>
                <div
                    class="text-6xl lg:text-7xl font-bold leading-none mb-5 uppercase">@lang('activity.cosmetique_title')</div>
                <p class="max-w-md text-opacity-70 leading-6">@lang('activity.cosmetique_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-blue pr-12 py-5 mb-20 lg:mb-40">
                <p class="max-w-lg text-right text-gray text-xl">@lang('activity.cosmetique_intro')</p>
            </div>
            <div class="grid lg:grid-cols-2 gap-x-12 gap-y-32">
                <x-activity-card title="{{ __('Naturel') }}"
                                 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>
                <x-activity-card title="{!! __('Molécules <br> Naturelles') !!}"
                                 img="/images/activity/feuille_moleculaire.png"
                                 url="/documents/Catalogues/Catalogue_Molecules_Naturel.pdf"
                                 border="border-blue-contrast"
                                 hover="bg-blue-contrast"
                                 color="text-blue-contrast">
                    @lang('activity.molecules_content')

                </x-activity-card>
                <x-activity-card title="{!! __('Produits de <br> synthèse') !!}"
                                 img="/images/activity/produit_synthese.png"
                                 alt="produit de synthèse"
                                 url="/documents/Catalogues/Catalogue_Produits_Synthétiques.pdf"
                                 border="border-blue-pastel"
                                 hover="bg-blue-pastel"
                                 color="text-blue-pastel">
                    @lang('activity.syntetic_content')

                </x-activity-card>
            </div>
        </x-container>
    </section>
@endsection