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

@section('pageTitle', __("Parfumerie"))

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

@section('content')
    <div class="w-full relative text-pink border-pink">
        <div class="absolute top-0 left-0 w-full h-full overflow-x-hidden"
             style="background:radial-gradient(circle, rgba(255,255,255,1) 20%, rgba(255,220,231,1) 100%)">
            <div class="w-full h-full w-screen min-w-screen hidden xl:block"
                 style="background: url('/images/HomePage/rose.png') no-repeat; background-position: left 60% bottom 0%; background-size: 45%"></div>
            <div class="w-full h-full w-screen min-w-screen hidden lg:block xl:hidden"
                 style="background: url('/images/HomePage/rose.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/rose.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/rose.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/activity/petales.png"
                alt="diffusions-aromatiques - pétales">
            <div class="slide active pt-10 lg:pt-20">
                <span class="title-outline-pink text-10xl font-bold mb-8 lg:mb-16 block lg:ml-14"
                      style="line-height: 8rem">01</span>
                <div class="text-6xl lg:text-7xl font-bold leading-none mb-5 uppercase">@lang('activity.fragrance_title')</div>
                <p class="max-w-md text-opacity-70 leading-6">
                    @lang('slider.perfumery_content')
                </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="#ED9BB3"/>--}}
{{--                        <path d="M20 12L20 27" stroke="#ED9BB3" stroke-width="2" stroke-linecap="round"--}}
{{--                              stroke-linejoin="round"/>--}}
{{--                        <path d="M20 27L23.5832 23.4168" stroke="#ED9BB3" stroke-width="2" stroke-linecap="round"--}}
{{--                              stroke-linejoin="round"/>--}}
{{--                        <path d="M20 27L16.4168 23.4168" stroke="#ED9BB3" stroke-width="2" stroke-linecap="round"--}}
{{--                              stroke-linejoin="round"/>--}}
{{--                    </svg>--}}
{{--                    <span class="text-sm uppercase">scroll</span>--}}
{{--                </div>--}}
            </div>
        </x-container>
    </div>
    <section class="my-16">
        <x-container>
            <div class="flex justify-end border-r-2 border-pink pr-12 py-5 mb-20 lg:mb-40">
                <p class="max-w-lg text-right text-gray text-xl">@lang('activity.fragrance_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>
                <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