@extends('layouts.fe_master')

@php
    $title = "30PICTURES - ABOUTUS";
    $description = $page->title;
    $ogTitle = $title;
    $ogDescription = $description;
    $ogImage = url($page->happy_creator_desktop);
    $twitterTitle = $title;
    $twitterDescription = $description;
    $artistName = "30PICTURES";
    $schemaDescription = $description;
@endphp

@section('content')
    <div class="header-padding"></div>
    {{-- <div class="banner">
                <img src="{{ $page->banner_url }}" class="img" alt="home banner" />
        <div class="play-btn">
            <img src="{{ asset('/assets') }}/media/images/svg/play-btn.svg" />
        </div>
        </div> --}}
    <!-- main -->
    <div class="main">
        <div class="about-us-section">
            <h1 class="about-us-heading">
                {!! $page->title !!}
                {{-- 30 Pictures aspires to make visual storytelling<br />
                becoming the Art of Nurturing your Soul. --}}
            </h1>
            <div class="happy-creator ">
                <img src="{{ asset($page->happy_creator_desktop) }}" class="mobile-d-none" alt="happy-creator" />
                <img src="{{ asset($page->happy_creator_mobile) }}" class="mobile-d-block d-none" alt="happy-creator" />
            </div>
            <div class="our-value">
                <img src="{{ asset($page->our_value_desktop) }}" class="mobile-d-none" alt="our-value" />
                <img src="{{ asset($page->our_value_mobile) }}" class="mobile-d-block d-none" alt="our-value" />
                {{-- <div class="our-value-content d-none mobile-d-block">
                    <h2 class="heading">
                        <img src="{{ asset('') }}assets/media/images/pages/about_us/our-value-text.png"
                            class="our-value-text-img" alt="our-value" />
                    </h2>

                    <div class="item">
                        <div class="item-title">
                            BRAVE
                        </div>
                        <div class="item-content">
                            We are grateful for mistakes and unwavering in our
                            beliefs, driven by a passion to do
                            things that have
                            never been done before.
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-title">
                            KINDNESS
                        </div>
                        <div class="item-content">
                            We are grateful for mistakes and unwavering in our beliefs, driven by a passion to do
                            things that have never been done before.
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-title">
                            SOUL NUTURING
                        </div>
                        <div class="item-content">
                            We aspire to create commercially purposed products that still touch people’s hearts,
                            spread the love of family and life, and inspire actions for change.
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-title">
                            AUTHENCITY
                        </div>
                        <div class="item-content">
                            We tell simple life stories, without embellishment. They can be touched and felt, and
                            they help solve your business concerns.
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-title">
                            LOCAL TOUCH
                        </div>
                        <div class="item-content">
                            You will see that most of our stories are family-oriented, carrying Vietnamese spirit
                            but with a global reach and ambition.
                        </div>
                    </div>
                --}}
            </div>
        </div>

        <div class="our-people">
            <div class="section-title our-people-title">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="23" viewBox="0 0 18 23" fill="none">
                    <path
                        d="M17.5079 16.0587C17.8984 15.6681 17.8984 15.035 17.5079 14.6445L11.1439 8.28049C10.7534 7.88997 10.1202 7.88997 9.72971 8.28049C9.33919 8.67102 9.33919 9.30418 9.72971 9.69471L15.3866 15.3516L9.72971 21.0084C9.33919 21.3989 9.33919 22.0321 9.72971 22.4226C10.1202 22.8132 10.7534 22.8132 11.1439 22.4226L17.5079 16.0587ZM0.800781 0.351562V10.3516H2.80078V0.351562H0.800781ZM6.80078 16.3516H16.8008V14.3516H6.80078V16.3516ZM0.800781 10.3516C0.800781 13.6653 3.48707 16.3516 6.80078 16.3516V14.3516C4.59164 14.3516 2.80078 12.5607 2.80078 10.3516H0.800781Z"
                        fill="black" />
                </svg>
                <h3>
                    Our People
                </h3>
            </div>
            <div class="our-people-list">
                {{--  <div class="our-people-item">
                <div class="item-content">
                    <div class="item-people-name">Chung Chi Cong</div>
                    <div class="item-people-role">Director, Sreenwriter</div>
                </div>
            </div> --}}
                @foreach ($creators as $item)
                    <a href="{{ route('frontend.creator.detail', $item->id) }}" class="our-people-item"
                        style="background-image: url('{{ asset($item->image_url) }}') ">
                        <div class="item-content">
                            <div class="item-people-name">{{ $item->name }}</div>
                            <div class="item-people-role">{{ $item->position }}</div>
                            <div class="item-people-role">{{ $item->position_desc }}</div>
                        </div>
                    </a>
                @endforeach

            </div>
        </div>

        <div class="year-of-archievement">
            <div class="col-left">
                <img src="{{ asset($page->year_of_archievements_img) }}" alt="year-of-archievement">
            </div>
            <div class="col-right">
                {!! $page->year_of_archievements_text !!}
                {{-- <div class="title">
                <h3>7 Years of achievements</h3>
                <span>
                    Được xây dựng và thành lập từ 2017, với 2 phim điện ảnh,
                    <br class="mobile-d-none">
                    80 phim ngắn cho thương hiệu cùng hơn 20 Music Video cùng các dự án khác.
                    <br>
                    Chúng tôi tự tin rằng sẽ cùng bạn viết nên những câu chuyện giá trị
                </span>
                    </div>
                    <div class="year-of-archievement-content">
                        <div class="item">
                            <h4>
                                10+
                            </h4>
                            <h5>
                                Award for Advertising & Feature Film
                            </h5>
                            <span>
                                Chúng tôi vinh dự đã nhận hơn
                                10 giải thưởng trong ngành làm phim
                                và quảng cáo cho những dự án đã thực hiện
                            </span>
                        </div>
                        <div class="item">
                            <h4>
                                120+
                            </h4>
                            <h5>
                                Project & Campaign
                            </h5>
                            <span>
                                Hơn 120 dự án lớn nhỏ đã được thực hiện
                                trong suốt 7 năm qua
                            </span>
                        </div>
                        <div class="item">
                            <h4>
                                256M+
                            </h4>
                            <h5>
                                View All Video on Youtube
                            </h5>
                            <span>
                                Các dự án được đón nhận bởi cộng đồng
                                với tổng lượt xem trên Youtube đạt hơn
                                256 triệu lượt xem
                            </span>
                        </div>
                        <div class="item">
                            <h4>
                                50+
                            </h4>
                            <h5>
                                Brand & Artist Top of Mind in Vietnam
                            </h5>
                            <span>
                                Hợp tác và cùng đồng hành với hơn
                                50 thương hiệu và nghệ sĩ trong hành trình
                                phát triển từ 2017 đến nay
                            </span>
                        </div>

                    </div> --}}
            </div>
        </div>

        <div class="director-quote mobile-d-none">

            <div class="quote-header">
                <div class="img">
                    <img src="{{ asset($page->quote_avatar) }}" alt="director-quote">
                </div>
                <div class="info">
                    <strong>{{ $page->quote_user }}</strong>
                    <br>
                    <span>{{ $page->quote_position }}</span>
                </div>
            </div>
            <div class="quote-content">
                {!! $page->quote_description !!}
            </div>
            <strong class="quote-footer">
                <div class="logo">
                    <img src="{{ asset($page->quote_logo) }}" class="mobile-d-none">
                </div>
                <span>{{ $page->quote_logo_title }}</span>
            </strong>
        </div>


        {{-- <div class="value-sharing">
            <div class="section-title value-sharing-title">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="23" viewBox="0 0 18 23" fill="none">
                    <path
                        d="M17.5079 16.0587C17.8984 15.6681 17.8984 15.035 17.5079 14.6445L11.1439 8.28049C10.7534 7.88997 10.1202 7.88997 9.72971 8.28049C9.33919 8.67102 9.33919 9.30418 9.72971 9.69471L15.3866 15.3516L9.72971 21.0084C9.33919 21.3989 9.33919 22.0321 9.72971 22.4226C10.1202 22.8132 10.7534 22.8132 11.1439 22.4226L17.5079 16.0587ZM0.800781 0.351562V10.3516H2.80078V0.351562H0.800781ZM6.80078 16.3516H16.8008V14.3516H6.80078V16.3516ZM0.800781 10.3516C0.800781 13.6653 3.48707 16.3516 6.80078 16.3516V14.3516C4.59164 14.3516 2.80078 12.5607 2.80078 10.3516H0.800781Z"
                        fill="black" />
                </svg>
                <h3>
                    Value Sharing
                </h3>
            </div>

            <div class="value-sharing-content">
                @foreach ($value_sharing as $item)
                    <a href="{{ route('frontend.value-sharing.detail') }}/{{$item->id}}" class="card">
                        <div class="card-header">
                            <img src="{{ asset($item->img_url) }}" alt="value-sharing-1">
                        </div>
                        @if ($item->tag)
                            <div class="card-tag">
                                {{ $item->tag }}
                            </div>
                        @endif
                        <div class="card-body">
                            <div class="card-title">
                                {!! $item->name !!}
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
        </div> --}}
    </div>
    <!-- end main -->

@endsection