@extends('layouts.fe_master')

@php
    $title = "30PICTURES - CREATOR";
    $description = "Nhà sáng tạo của chúng tôi";
    $ogTitle = $title;
    $ogDescription = $description;
    $ogImage = url($creators[0]->image_url);
    $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 creator-container">
        <div class="about-us-section">
            <div class="creator-our-people">
                <div class="section-title our-people-title">

                    <h1>
                        Nhà sáng tạo của chúng tôi
                    </h1>
                </div>
                <div class="our-people-list">
                    @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="bg-gadian-creator">

                            </div>
                            <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
                    <a href="{{ route('frontend.creator.contact_form') }}" class="our-people-item"
                        style="background-image: url('{{ asset('/storage/photos/1/DOOR.png') }}') ">
                        <div class="bg-gadian-creator">
                            <svg width="41" height="41" viewBox="0 0 41 41" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path d="M0.189453 20.0327H40.1895" stroke="white" stroke-width="3" />
                                <path d="M20.1895 0.0327148L20.1895 40.0327" stroke="white" stroke-width="3" />
                            </svg>
                        </div>
                        <div class="item-content">
                            <div class="item-people-name">Are You Creator?</div>
                            <div class="item-people-role"> Become 30 Pictures Creator</div>
                            <div class="item-people-role"> &nbsp;</div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- end main -->

@endsection