@extends('layouts.fe_master')

@section('title', 'home')

@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="film-maker-category">
            <!-- desktop header -->
            <div class="film-maker-category-title mobile-d-none">
                <h2>Advertising</h2>
                <div class="tags">
                    <a href="/fmc-branded-short-film.html"
                        class="tag {{ $category->slug == 'branded-short-film' ? active : '' }}">Branded Short Film</a>
                    <a href="/fmc-tvc.html" class="tag">TVC</a>
                    <a href="/fmc-branded-music-video.html" class="tag">Branded Music Video</a>
                    <a href="/fmc-feature-film-material.html" class="tag">Feature Film Material</a>
                    <a href="/fmc-feature-film-material.html" class="tag">Corporate Video</a>
                </div>
            </div>
            <!-- end desktop header -->

            <!-- mobile header -->
            <div class="film-maker-mobile-category d-none mobile-d-flex">
                <div class="item item-menu-btn item-head">
                    <h2>Advertising</h2>
                    <span>
                        Category
                        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="6" viewBox="0 0 8 6"
                            fill="none">
                            <path d="M0.605469 0.871094L3.80268 4.06817L6.99976 0.871094" stroke="black"
                                stroke-opacity="0.3" stroke-width="1.5" />
                        </svg>
                    </span>
                </div>

                <div class="film-maker-mobile-category-menu">
                    <div href="##" class="item">
                        <a>Branded Short Film</a>
                    </div>
                    <div href="##" class="item">
                        <a>TVC</a>
                    </div>
                    <div href="##" class="item">
                        <a>Branded Music Video</a>
                    </div>
                    <div href="##" class="item">
                        <a>Feature Film Material</a>
                    </div>
                    <div href="##" class="item">
                        <a>Corporate Video</a>
                    </div>
                </div>

            </div>
            <!--end mobile header -->

            <div class="film-maker-category-content">
                <article class="card card-col-4">
                    <div class="card-header">
                        <img src="./media/images/pages/film-maker-category/film-maker-category-1.png"
                            alt="film-maker-category-1" />
                    </div>
                    <div class="card-body">
                        <div class="card-title">
                            <h1>Branded Short Film</h1>
                        </div>
                    </div>
                </article>
            </div>
        </div>


        <div class="film-maker-category-grid">
            <div class="section-title film-maker-category-grid-title mobile-d-none">
                <h3>Generali Vietnam</h3>
            </div>

            <div class="film-maker-category-grid-content">
                <article class="card card-col-4">
                    <div class="card-header">
                        <a href="##">
                            <img src="./media/images/pages/film-maker-category/film-maker-category-grid-1.png"
                                alt="film-maker-category-grid-1" />
                        </a>
                    </div>
                    <div class="card-body">
                        <div class="card-date">Oct25,2024</div>
                        <a href="##" class="card-title">
                            Để ngày mai luôn tới
                            <br />
                            Generali Vietnam
                        </a>
                    </div>
                </article>

                <article class="card card-col-4">
                    <div class="card-header">
                        <a href="##">
                            <img src="./media/images/pages/film-maker-category/film-maker-category-grid-1.png"
                                alt="film-maker-category-grid-1" />
                        </a>
                    </div>
                    <div class="card-body">
                        <div class="card-date">Oct25,2024</div>
                        <a href="##" class="card-title">
                            Để ngày mai luôn tới
                            <br />
                            Generali Vietnam
                        </a>
                    </div>
                </article>
                <article class="card card-col-4">
                    <div class="card-header">
                        <a href="##">
                            <img src="./media/images/pages/film-maker-category/film-maker-category-grid-2.png"
                                alt="film-maker-category-grid-1" />
                        </a>
                    </div>
                    <div class="card-body">
                        <div class="card-date">Oct25,2024</div>
                        <a href="##" class="card-title">
                            Tựa vào nhau cho đời như ý
                            <br />
                            Generali Vietnam
                        </a>
                    </div>
                </article>
                <article class="card card-col-4">
                    <div class="card-header">
                        <a href="##">
                            <img src="./media/images/pages/film-maker-category/film-maker-category-grid-3.png"
                                alt="film-maker-category-grid-1" />
                        </a>
                    </div>
                    <div class="card-body">
                        <div class="card-date">Oct25,2024</div>
                        <a href="##" class="card-title">
                            Tết này có còn như ý?
                            <br />
                            Generali Vietnam
                        </a>
                    </div>
                </article>
            </div>

            <div class="film-maker-category-grid-btn mobile-d-none">
                <p>Strategy Expland</p>
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M16.5202 0.345675C17.0725 0.345689 17.5202 0.793415 17.5202 1.3457L17.52 10.3457C17.52 10.898 17.0722 11.3457 16.5199 11.3457C15.9677 11.3457 15.52 10.8979 15.52 10.3457L15.5201 3.75986L2.18707 17.0923C1.79654 17.4828 1.16337 17.4828 0.772857 17.0922C0.382342 16.7017 0.382357 16.0686 0.772891 15.678L14.106 2.34562L7.52016 2.34546C6.96788 2.34545 6.52017 1.89772 6.52019 1.34543C6.5202 0.79315 6.96793 0.345446 7.52021 0.345459L16.5202 0.345675Z"
                        fill="black" />
                </svg>
            </div>


        </div>


    </div>
    <!-- end main -->

@endsection