@extends('frontend.layout.master')

@section('specific-meta-tag')
<title>Group Profile | Scienjoy</title>
<meta name="description" content="@if(Config::get('app.locale') == 'en'){{$meta->meta_desc}}@elseif(Config::get('app.locale') == 'sim'){{$meta->meta_desc_sim}}@else{{$meta->meta_desc_trad}}@endif"/>
@endsection

@section('content')
    <header class="h-48 md:h-56 lg:h-96 bg-center bg-no-repeat bg-cover flex items-center" style="background-image: url({{ asset($header->path) }})">
        <div class="container">
        <h1 class="text-xl md:text-3xl lg:text-4xl leading-tight max-w-3/5 md:max-w-1/2 font-bold text-blue-900 ml-0 md:ml-16 lg:ml-24">@lang('group_profile.title')</h1>
        </div>
    </header>
    <section class="bg-gray-100 mb-5 lg:mb-0">
        <div class="container text-center py-10 lg:py-16">
        <p class="text-sm lg:text-lg text-gray-800 text-justify md:w-2/3 mx-auto">@lang('group_profile.subtitle')</p>
        </div>
    </section>
    <section class="bg-center bg-cover bg-no-repeat" style="background-image: url({{ asset('frontend/assets/images/pattern-bg.jpg') }})">
        <div class="container">
            <div class="block md:flex md:-mx-4 py-12">
                <div class="w-4/5 md:flex-1 mx-auto md:px-4 mb-20 md:mb-0">
                    <div class="text-center bg-white h-full">
                        <img class="h-16 lg:h-20 mb-6 mx-auto" src="{{ asset('frontend/assets/icon/cooperation.svg') }}" alt="@lang('group_profile.user_title1') @lang('group_profile.user_title2')">
                        <h2 class="text-2xl lg:text-3xl text-blue-500 leading-tight font-bold mb-4">@lang('group_profile.user_title1') <br> @lang('group_profile.user_title2')</h2>
                        <p class="text-sm text-justify text-gray-800">@lang('group_profile.user_detail')</p>
                    </div>
                </div>
                <div class="w-4/5 md:flex-1 mx-auto md:px-4 mb-20 md:mb-0">
                    <div class="text-center bg-white h-full">
                        <img class="h-16 lg:h-20 mb-6 mx-auto" src="{{ asset('frontend/assets/icon/tech.svg') }}" alt="@lang('group_profile.cutting_title1') @lang('group_profile.cutting_title2')">
                        <h2 class="text-2xl lg:text-3xl text-blue-500 leading-tight font-bold mb-4">@lang('group_profile.cutting_title1') <br> @lang('group_profile.cutting_title2')</h2>
                        <p class="text-sm text-justify text-gray-800">@lang('group_profile.cutting_detail')</p>
                    </div>
                </div>
                <div class="w-4/5 md:flex-1 mx-auto md:px-4">
                    <div class="text-center bg-white h-full">
                        <img class="h-16 lg:h-20 mb-6 mx-auto" src="{{ asset('frontend/assets/icon/spotlights.svg') }}" alt="@lang('group_profile.entertainment_title1') @lang('group_profile.entertainment_title2')">
                        <h2 class="text-2xl lg:text-3xl text-blue-500 leading-tight font-bold mb-4">@lang('group_profile.entertainment_title1') <br> @lang('group_profile.entertainment_title2')</h2>
                        <p class="text-sm text-justify text-gray-800">@lang('group_profile.entertainment_detail')</p>
                    </div>
                </div>
            </div>
            <div class="flex justify-center pb-32">
                <a class="text-white bg-blue-500 hover:bg-blue-600 active:bg-blue-700 py-3 px-6 rounded shadow-lg" href="{{ route('our-business') }}">@lang('navbar.our_business')</a>
            </div>
            <h1 class="text-2xl md:text-4xl text-center mb-12">@lang('group_profile.milestones_title')</h1>
            <div>
                <div class="timeline">
                    <h2 class="text-blue-500 text-4xl md:text-5xl mb-1">2017</h2>
                    <ul class="text-xs md:text-lg text-gray-800">
                        <li><span class="font-bold">@lang('group_profile.july') </span>@lang('group_profile.july17')</li>
                    </ul>
                </div>
                <div class="timeline">
                    <h2 class="text-blue-500 text-4xl md:text-5xl mb-1">2016</h2>
                    <ul class="text-xs md:text-lg text-gray-800">
                        <li><span class="font-bold">@lang('group_profile.july') </span>@lang('group_profile.july16')</li>
                    </ul>
                </div>
                <div class="timeline">
                    <h2 class="text-blue-500 text-4xl md:text-5xl mb-1">2015</h2>
                    <ul class="text-xs md:text-lg text-gray-800">
                        <li>
                            <img class="w-6 md:w-8 mb-2 ml-auto" src="{{ asset('frontend/assets/icon/haixiutv-logo.png') }}" alt="">
                            <span class="font-bold">@lang('group_profile.april') </span>@lang('group_profile.july15')
                        </li>
                    </ul>
                </div>
                <div class="timeline">
                    <h2 class="text-blue-500 text-4xl md:text-5xl mb-1">2014</h2>
                    <ul class="text-xs md:text-lg text-gray-800">
                        <li>
                            <img class="w-6 md:w-8 mb-2" src="{{ asset('frontend/assets/icon/lehaitv-logo.png') }}" alt="">
                            <span class="font-bold">@lang('group_profile.july') </span>@lang('group_profile.july14')
                        </li>
                        <li class="mb-3">
                            <span class="font-bold">@lang('group_profile.june') </span>@lang('group_profile.june14')
                        </li>
                        <li>
                            <img class="w-6 md:w-8 mb-2" src="{{ asset('frontend/assets/icon/showself-logo.png') }}" alt="">
                            <span class="font-bold">@lang('group_profile.april') </span>@lang('group_profile.april14')
                        </li>
                        <li>
                            <span class="font-bold">@lang('group_profile.january') </span>@lang('group_profile.jan14')
                        </li>
                    </ul>
                </div>
                <div class="timeline">
                    <h2 class="text-blue-500 text-4xl md:text-5xl mb-1">2013</h2>
                    <ul class="text-xs md:text-lg text-gray-800">
                        <li><span class="font-bold">@lang('group_profile.june') </span>@lang('group_profile.june13')</li>
                    </ul>
                </div>
                <div class="timeline">
                    <h2 class="text-blue-500 text-4xl md:text-5xl mb-1">2012</h2>
                    <ul class="text-xs md:text-lg text-gray-800">
                        <li><span class="font-bold">@lang('group_profile.august') </span>@lang('group_profile.august12')</li>
                    </ul>
                </div>
                <div class="timeline pb-24">
                    <h2 class="text-blue-500 text-4xl md:text-5xl mb-1">2011</h2>
                    <ul class="text-xs md:text-lg text-gray-800">
                        <li><span class="font-bold">@lang('group_profile.november') </span>@lang('group_profile.november11')</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="flex flex-wrap p-4">
            <div class="w-1/2 lg:flex-1 pr-1 md:pr-2 mb-2 md:mb-4 lg:mb-0">
                <a href="{{ route('our-founders') }}">
                    <div class="card-link relative bg-cover bg-center bg-no-repeat" style="background-image: url({{ asset($our_founder->path) }}); padding-bottom: 80%">
                        <h2 class="absolute bottom-0 py-2 xl:py-3 text-center text-sm md:text-base xl:text-lg bg-white w-full opacity-90">@lang('navbar.our_founders')</h2>
                    </div>
                </a>
            </div>
            <div class="w-1/2 lg:flex-1 pl-1 md:pl-2 lg:px-2 mb-2 md:mb-4 lg:mb-0">
                <a href="{{ route('vision-mission') }}">
                    <div class="card-link relative bg-cover bg-center bg-no-repeat" style="background-image: url({{ asset($vision->path) }}); padding-bottom: 80%">
                        <h2 class="absolute bottom-0 py-2 xl:py-3 text-center text-sm md:text-base xl:text-lg bg-white w-full opacity-90">@lang('navbar.vision_mission')</h2>
                    </div>
                </a>
            </div>
            <div class="w-1/2 lg:flex-1 pr-1 md:pr-2 lg:px-2">
                <a href="{{ route('awards') }}">
                    <div class="card-link relative bg-cover bg-center bg-no-repeat" style="background-image: url({{ asset($awards->path) }}); padding-bottom: 80%">
                        <h2 class="absolute bottom-0 py-2 xl:py-3 text-center text-sm md:text-base xl:text-lg bg-white w-full opacity-90">@lang('navbar.awards')</h2>
                    </div>
                </a>
            </div>
            <div class="w-1/2 lg:flex-1 pl-1 md:pl-2">
                <a href="{{ route('company-news') }}">
                    <div class="card-link relative bg-cover bg-center bg-no-repeat" style="background-image: url({{ asset($company_news->path) }}); padding-bottom: 80%">
                        <h2 class="absolute bottom-0 py-2 xl:py-3 text-center text-sm md:text-base xl:text-lg bg-white w-full opacity-90">@lang('navbar.company_news')</h2>
                    </div>
                </a>
            </div>
        </div>
    </section>
@endsection