@extends('layouts.app')

@section('header')
    <title>{{ trans('welcome.meta.title') }}</title>
    <meta name="title" content="{{ trans('welcome.meta.title') }}">
    <meta name="description" content="{{ trans('welcome.meta.description') }}">
    <meta name="keywords" content="">
    <meta name="robots" content="index,follow">

    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ localized_route('home_page') }}">
    <meta property="og:title" content="{{ trans('welcome.meta.title') }}">
    <meta property="og:description" content="{{ trans('welcome.meta.description') }}">
    <meta property="og:image" content="{{ asset(mix('build/images/logo/logo.svg')) }}">

    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="{{ localized_route('home_page') }}/">
    <meta property="twitter:title" content="{{ trans('welcome.meta.title') }}">
    <meta property="twitter:description" content="{{ trans('welcome.meta.description') }}">
    <meta property="twitter:image" content="{{ asset(mix('build/images/logo/logo.svg')) }}">

    @foreach(locales() as $locale)
        <link rel="alternate" hreflang="{{ config('locales.iso_friendly.' . $locale,$locale) }}" href="{{ current_route($locale) }}"/>
    @endforeach
    <link rel="alternate" hreflang="x-default" href="{{ current_route('sk') }}"/>

    <link rel="canonical" href="{{ current_route() }}" />

    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "Corporation",
            "name": "AUNOIA Pharma® s.r.o.",
            "url": "{{ config('app.url') }}",
            "logo": "{{ asset(mix('/build/images/logo/logo.svg')) }}",
            "contactPoint": {
                "@type": "ContactPoint",
                "telephone": "{{ trans('contact_us.company_details.phone') }}",
                "contactType": "customer service",
                "availableLanguage": ["en","Slovak","Czech","Polish","Norwegian"]
            }
        }
    </script>
@endsection

@section('content')
    <main class="flex-auto flex flex-col relative">
        <div class="flex flex-col flex-auto relative xl:flex-row">
            <div class="relative -mb-[40px] z-[2] md:-mb-[60px] lg:-mb-[80px] xl:mb-0 xl:z-[1] xl:w-1/2 xl:flex xl:flex-col">
                <div class="absolute left-0 right-0 top-[-100px] bottom-[0] -skew-y-6 overflow-hidden xl:skew-y-0">
                    <div class="absolute inset-[-100px] skew-y-6 bg-[url('/build/images/bg-logistic-640.jpg')] bg-cover bg-center sm:bg-[url('/build/images/bg-logistic-1024.jpg')] lg:bg-[url('/build/images/bg-logistic-1920.jpg')] xl:skew-y-0 xl:inset-0 3xl:bg-[url('/build/images/bg-logistic-2560.jpg')]">
                    </div>
                </div>
                <div class="relative xl:flex-auto">
                    <div class="relative container h-full flex flex-col 3xl:pr-0">
                        <div class="flex-auto pt-[70px] pb-[70px] xs:pb-[100px] xs:pt-[100px] sm:px-[32px] sm:pt-[120px] lg:pt-[200px] lg:px-[100px] lg:pb-[200px] xl:pb-[300px] xl:px-0 xl:pt-[150px] 3xl:px-[100px] 3xl:max-w-[960px] 3xl:ml-auto 3xl:pr-[200px]">
                            <div class="relative h-full flex flex-col">
                                <h1 class="text-[40px] leading-none font-bold uppercase text-white text-shadow-[0px_0px_5px_#435760] border-l-[10px] pl-[16px] border-white xs:text-[50px] md:text-[60px] md:pl-[24px] md:border-l-[12px] lg:text-[65px] lg:border-l-[16px] lg:pl-[32px] 2xl:text-[80px]">{{ trans('welcome.section_logistics.title') }}</h1>
                                <h2 class="mb-auto font-medium text-[18px] mt-[40px] pr-[120px] text-white text-shadow-[0px_0px_5px_#435760] xs:pr-[150px] xs:pl-[26px] sm:pr-0 sm:text-[20px] md:text-[24px] md:pl-[36px] lg:text-[28px] lg:pl-[48px] xl:text-[30px] ">{{ trans('welcome.section_logistics.text1') }}</h2>
                                <div class="mt-[50px] sm:mt-[80px] lg:mt-[80px] sm:pl-[26px] md:pl-[32px] lg:pl-[48px]">
                                    <a href="{{ localized_route('logistics_page') }}" class="relative inline-flex text-[20px] w-full py-[16px] px-[16px] text-center leading-tight text-slate-900 font-semibold bg-gradient-to-r from-slate-100 to-slate-200 rounded-full shadow-lg shadow-slate-50/20 transition-all hover:-translate-y-2 hover:shadow-slate-500 sm:w-auto sm:px-[40px] sm:text-[22px] sm:py-[18px] lg:text-[24px] lg:px-[60px] lg:py-[16px] 2xl:text-[28px]"><span class="relative mx-auto">{{ trans('welcome.section_logistics.button') }}</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="relative z-[1] xl:w-1/2">
                <div class="relative h-full bg-[url('/build/images/bg-health-640.jpg')] bg-cover bg-center sm:bg-[url('/build/images/bg-health-1024.jpg')] lg:bg-[url('/build/images/bg-health-1920.jpg')] 3xl:bg-[url('/build/images/bg-health-2560.jpg')]">
                    <div class="relative overflow-hidden container h-full flex flex-col 3xl:pl-0">
                        <div class="flex-auto pt-[100px] pb-[200px] xs:pb-[200px] sm:px-[32px] sm:pt-[150px] lg:pt-[200px] lg:px-[100px] lg:pb-[200px] xl:pb-[300px] xl:pt-[150px] xl:pr-0 xl:pl-[50px] 3xl:px-[100px] 3xl:max-w-[960px] 3xl:mr-auto 3xl:pl-[200px]">
                            <div class="relative h-full flex flex-col">
                                <h1 class="relative text-[40px] leading-none font-bold uppercase text-green-700 tracking-tight ml-[16px] pl-[42px] border-green-400 xs:text-[50px] xs:ml-0 md:text-[60px] md:pl-[54px] lg:text-[65px] lg:pl-[58px] xl:pl-[74px] 2xl:text-[80px] 2xl:pl-[80px] before:absolute before:h-[40px] before:w-[10px] before:rotate-90 before:bg-green-500 before:left-[0] xs:before:h-[50px] md:before:h-[60px] md:before:w-[12px] lg:before:h-[65px] lg:before:w-[16px] 2xl:before:h-[80px] after:absolute after:h-[40px] after:top-0 after:w-[10px] after:bg-green-500 after:left-[0] xs:after:h-[50px] md:after:h-[60px] md:after:w-[12px] lg:after:h-[65px] lg:after:w-[16px] 2xl:after:h-[80px]">{{ trans('welcome.section_health.title') }}</h1>
                                <h2 class="mb-auto text-[18px] mt-[40px] pr-[120px] font-medium text-slate-900 xs:pr-[150px] xs:pl-[42px] sm:pr-0 sm:text-[20px] md:text-[24px] md:pl-[54px] lg:text-[28px] lg:pl-[58px] xl:text-[30px] xl:pl-[74px] 2xl:pl-[80px]">{{ trans('welcome.section_health.text1') }}</h2>
                                <div class="mt-[50px] sm:mt-[80px] sm:pl-[42px] md:pl-[54px] lg:mt-[80px] lg:pl-[58px] xl:pl-[74px] 2xl:pl-[80px]">
                                    <a href="{{ localized_route('health_page') }}" class="relative inline-flex text-[20px] w-full py-[16px] px-[16px] text-center leading-tight text-white font-semibold bg-gradient-to-r from-green-800 to-green-900 rounded-full shadow-lg shadow-slate-50/20 transition-all hover:-translate-y-2 hover:shadow-slate-100 sm:w-auto sm:px-[40px] sm:text-[22px] sm:py-[18px] lg:text-[24px] lg:px-[60px] lg:py-[16px] 2xl:text-[28px]"><span class="relative mx-auto">{{ trans('welcome.section_health.button') }}</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-[url('/build/images/wave2.svg')] absolute bottom-[119px] w-full bg-bottom bg-contain bg-repeat-x h-[50px] z-[1] xs:h-[70px] sm:h-[80px] lg:bottom-[99px] lg:h-[100px] xl:bottom-[199px]"></div>
        </div>
        <div class="z-[1] bg-[url('/build/images/bg1.jpg')] bg-center bg-cover w-full mx-auto shadow-2xl shadow-white relative mt-[-120px] lg:mt-[-100px] xl:-mt-[200px]">
            <div class="bg-[url('/build/images/wave3.svg')] absolute top-0 w-full bg-top bg-contain bg-repeat-x h-[50px] z-[1] xs:h-[70px] sm:h-[80px] lg:h-[100px]"></div>
            <div class="absolute top-4 w-full h-[200px] bg-[url('/build/images/aztec-pattern-horizontal.svg')] opacity-5 bg-repeat bg-center xs:top-0 xl:hidden"></div>
            <div class="absolute bottom-12 w-full h-[200px] bg-[url('/build/images/aztec-pattern-horizontal.svg')] opacity-10 bg-repeat bg-center -scale-x-100 xl:hidden"></div>
            <div class="hidden absolute left-0 h-full w-[200px] bg-[url('/build/images/aztec-pattern-vertical.svg')] opacity-10 bg-repeat bg-center xl:block"></div>
            <div class="hidden absolute right-0 h-full w-[200px] bg-[url('/build/images/aztec-pattern-vertical.svg')] opacity-10 bg-repeat bg-center -scale-y-100 xl:block"></div>
            <div class="container pb-[140px] z-[1] relative">
                <div class="py-[50px] xs:py-[75px] lg:py-[100px] 2xl:px-[100px]">
                    <div class="lg:flex">
                        <div class="flex-shrink-0 px-4 lg:px-0 lg:py-[50px]">
                            <img src="{{ asset(mix('build/images/aunoia-tc-cube.png')) }}" alt="THERAPY CUBE™ photo" class="max-w-[300px] w-full mx-auto lg:max-w-[500px]">
                        </div>
                        <div class="mt-[32px] md:mt-[64px] lg:mt-0">
                            <h1 class="relative text-[40px] text-center leading-none font-bold uppercase text-[#a3721c] tracking-tight xs:text-[50px] md:text-[60px] lg:text-[65px] lg:pl-[58px] lg:text-left xl:pl-[74px] 2xl:text-[80px] 2xl:pl-[100px]">{{ trans('welcome.section_tc.title')  }}</h1>
                            <h2 class="text-[18px] mt-[40px] font-medium text-slate-900 sm:pr-0 sm:text-[20px] md:text-[24px] lg:text-[28px] lg:pl-[58px] lg:text-left xl:text-[30px] xl:pl-[74px] 2xl:pl-[100px]">{{ trans('welcome.section_tc.text1')  }}</h2>
                            <div class="mt-[50px] sm:mt-[80px] sm:text-center lg:text-left lg:mt-[80px] lg:pl-[58px] xl:pl-[74px] 2xl:pl-[100px]">
                                <a href="{{ 'https://aunoia.com/therapy-cube' }}" class="relative inline-flex text-[20px] w-full py-[16px] px-[16px] text-center leading-tight text-white font-semibold bg-[#a3721c] rounded-full shadow-lg shadow-yellow-50/20 transition-all hover:-translate-y-2 hover:shadow-[#a3721c]/30 sm:w-auto sm:px-[40px] sm:text-[22px] sm:py-[18px] lg:text-[24px] lg:px-[60px] lg:py-[16px] 2xl:text-[28px]"><span class="relative mx-auto">{{ trans('welcome.section_tc.button')  }}</span></a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </main>
@endsection