@section('meta')
<title>{{__('message.home page officail')}}</title>
    <meta property="og:title" content="{{__('message.home page officail')}}" />
    <meta property="og:description" content="{{__('message.description page')}}" />
    <meta name="twitter:title" content="{{__('message.home page officail')}}" />
    <meta name="twitter:description" content="{{__('message.description page')}}" />
@endsection

@push('header')
    <x-header class="home-header" bgrgba="true">
        <x-slot name="particles">
            <div id="homeHeader"></div>
        </x-slot>
        <x-slot name="content">
            <div class="main-content">
                <div class="container">
                    <div class="jumbotron mb-0 bg-transparent text-center">
                        <div>
                            <h1 class="text-capitalize display-6 text-warning fw-bolder" data-aos="zoom-in">{{__('message.welcome to')}}</h1>
                            <p class="text-center h5 text-warning text-capitalize" data-aos="zoom-in">{{__('message.release your ways of working')}}</p>
                            <p data-aos="zoom-in">{!!__('message.home top')!!}</p>
                            <a href="{{route('contact',app()->getLocale())}}" class="text-uppercase learn-more font-title fw-bolder text-decoration-none shadow-load" data-aos="zoom-in">
                                {{__('message.more info')}}<i class="fas fa-angle-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <x-header-curve />
        </x-slot>
    </x-header>
@endpush

<div class="main-content content-home">
    
    <!-- News infotaition -->
    <section class="news-info position-relative">
        <img src="{{ asset('img/infotatment-bg.png') }}" alt="infotaitment bg" class="w-100 position-absolute opacity-25 d-none d-md-block">
        <div class="container all-content">
            <div class="s-header">
                <h2 class="text-uppercase text-center position-relative font-title text-warning" data-aos="zoom-in">
                    {{__('message.news & infotaitment')}}
                    <span class="my-border bottom-5"></span>
                </h2>
                <p class="text-center s-desc" data-aos="zoom-in">
                    <span class="text-uppercase">{{__('message.news & infotaitment')}}</span> {{__('message.news & infotaitment desc')}}
                </p>
            </div>

            <div class="row row-cols-2 row-cols-md-4 offset-md-2 g-0 g-md-3 g-lg-4">
                <div class="col">
                    <a href="{{url()->current()}}" class="card c-card shadow border-0 p-1 text-decoration-none overflow-hidden" data-aos="zoom-in">
                        <img src="{{ asset('img/news-info/phkay-media.jpg') }}" alt="phkay-media" class="card-img-top object-fit-cover">
                        <div class="card-body p-0 pt-2">
                            <h6 class="fw-bolder text-uppercase text-center py-2 mb-0">Phkay Media</h6>
                        </div>
                    </a>
                </div>
                <div class="col">
                    <a href="http://news.phkaymedia.com" target="_blank" class="card c-card shadow border-0 p-1 text-decoration-none overflow-hidden" data-aos="zoom-in">
                        <img src="{{ asset('img/news-info/phkay-news.jpg') }}" alt="phkay-news" class="card-img-top object-fit-cover">
                        <div class="card-body p-0 pt-2">
                            <h6 class="fw-bolder text-uppercase text-center py-2 mb-0">Phkay News</h6>
                        </div>
                    </a>
                </div>
                <div class="col offset-3 offset-md-0">
                    <a href="#" class="card c-card shadow border-0 p-1 text-decoration-none overflow-hidden" data-aos="zoom-in">
                        <img src="{{ asset('img/news-info/komsan.jpg') }}" alt="komsan" class="card-img-top object-fit-cover">
                        <div class="card-body p-0 pt-2">
                            <h6 class="fw-bolder text-uppercase text-center py-2 mb-0">Komsan</h6>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <!-- End news infotaition -->

    <!-- Our Vision -->
    <section class="our-vision position-relative">
        <x-footer-curve />
        <div class="container all-content">
            <div class="row">
                <div class="col-md-6 align-self-center">
                    <div class="vision-content">
                        <h2 data-aos="zoom-in" class="text-warning text-capitalize">{{__('message.we know your conerns')}}</h2>
                        <p data-aos="zoom-in">{{__('message.we know your conerns desc')}}</p>
                        <br>
                        <h5 class="text-warning text-capitalize" data-aos="zoom-in">{{__('message.our vision')}}</h5>
                        <p data-aos="zoom-in">{{__('message.our vision desc')}}</p>
                        <br>
                        <img src="{{ asset('img/our-vision.png') }}" alt="our vision" class="w-100 d-md-none" data-aos="zoom-in">
                        <h5 data-aos="zoom-in" class="text-uppercase text-warning">{{__('message.why you choose us')}}</h5>
                        <div class="row m-0">
                            <div class="col-lg-6 px-1 my-0 my-lg-3" data-aos="zoom-in">
                                <ul class="list-unstyled m-0 p-0">
                                    <li>
                                        <img src="{{ asset('img/emoji/check.png') }}" alt="icon check">
                                        <span>{{__('message.choose us 1')}}</span>
                                    </li>
                                    <li>
                                        <img src="{{ asset('img/emoji/check.png') }}" alt="icon check">
                                        <span>{{__('message.choose us 2')}}</span>
                                    </li>
                                    <li>
                                        <img src="{{ asset('img/emoji/check.png') }}" alt="icon check">
                                        <span>{{__('message.choose us 3')}}</span>
                                    </li>
                                    <li>
                                        <img src="{{ asset('img/emoji/check.png') }}" alt="icon check">
                                        <span>{{__('message.choose us 4')}}</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-lg-6 px-1 my-0 my-lg-3" data-aos="zoom-in">
                                <ul class="list-unstyled m-0 p-0">
                                    <li>
                                        <img src="{{ asset('img/emoji/check.png') }}" alt="icon check">
                                        <span>{{__('message.choose us 5')}}</span>
                                    </li>
                                    <li>
                                        <img src="{{ asset('img/emoji/check.png') }}" alt="icon check">
                                        <span>{{__('message.choose us 6')}}</span>
                                    </li>
                                    <li>
                                        <img src="{{ asset('img/emoji/check.png') }}" alt="icon check">
                                        <span>{{__('message.choose us 7')}}</span>
                                    </li>
                                    <li>
                                        <img src="{{ asset('img/emoji/check.png') }}" alt="icon check">
                                        <span>{{__('message.choose us 8')}}</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 align-self-center d-none d-md-block js-tilt">
                    <img src="{{ asset('img/our-vision.png') }}" alt="our vision" class="w-100" ​ data-aos="zoom-in">
                </div>
            </div>
        </div>
    </section>
    <!-- End Our Vision -->

    <!-- Our feature service -->
    <section class="feature-service py-50 position-relative border-top">
        <img src="{{ asset('img/cta-three-bg.png') }}" alt="bg" class="w-50 opacity-25 bottom-0 end-0 position-absolute d-none d-md-block">
        <div class="container all-centent">
            <div class="feature-header">
                <h2 class="text-warning m-text-size mb-0 text-uppercase text-center position-relative"
                    data-aos="zoom-in">
                    <span>{{__('message.our feature serices')}}</span>
                    <span class="my-border bottom-5"></span>
                </h2>
                <p class="text-center mt-2" data-aos="zoom-in">{{__('message.our feature services desc')}}</p>
            </div>
            
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-2 g-lg-3">
                <div class="col">
                    <a href="{{ route('digital',app()->getLocale()) }}" class="ou-item card h-100 bg-switch shadow text-decoration-none" data-aos="zoom-in">
                        <div class="my-thumbnail">
                            <img src="{{ asset('img/feature-service/digital-marketing.jpg') }}" alt="degital-marketing" class="w-100 rounded">
                        </div>
                        <div class="card-body bg-switch">
                            <p>{{__('message.feature service 1')}}</p>
                            <h4 class="fw-bolder p-0">{{__('message.digital marketing')}}</h4>
                        </div>
                    </a>
                </div>
                <div class="col">
                    <a href="{{ route('creative',app()->getLocale()) }}" class="ou-item card h-100 bg-switch shadow text-decoration-none" data-aos="zoom-in">
                        <div class="my-thumbnail">
                            <img src="{{ asset('img/feature-service/creative-design.jpg') }}" alt="creative-design"
                                class="w-100 rounded">
                        </div>
                        <p>{{__('message.feature service 2')}}</p>
                        <h4 class="fw-bolder">{{__('message.creative design')}}</h4>
                    </a>
                </div>
                <div class="col">
                    <a href="{{ route('photo',app()->getLocale()) }}" class="ou-item card h-100 bg-switch shadow text-decoration-none" data-aos="zoom-in">
                        <div class="my-thumbnail">
                            <img src="{{ asset('img/feature-service/photo-video-graphy.jpg') }}" alt="photo-video-graphy"
                                class="w-100 rounded">
                        </div>
                        <p>{{__('message.feature service 3')}}</p>
                        <h4 class="fw-bolder">{{__('message.photo video graphy')}}</h4>
                    </a>
                </div>
                <div class="col">
                    <a href="{{ route('tvc-film',app()->getLocale()) }}" class="ou-item card h-100 bg-switch shadow text-decoration-none" data-aos="zoom-in">
                        <div class="my-thumbnail">
                            <img src="{{ asset('img/feature-service/tvc-film.jpg') }}" alt="tvc-film" class="w-100 rounded">
                        </div>
                        <p>{{__('message.feature service 4')}}</p>
                        <h4 class="fw-bolder">{{__('message.tvc film')}}</h4>
                    </a>
                </div>

                <div class="col">
                    <a href="{{ route('livestream',app()->getLocale()) }}" class="ou-item card h-100 bg-switch shadow text-decoration-none" data-aos="zoom-in">
                        <div class="my-thumbnail">
                            <img src="{{ asset('img/feature-service/livestream-studio.jpg') }}" alt="studio"
                                class="w-100 rounded">
                        </div>
                        <p>{{__('message.feature service 5')}}</p>
                        <h4 class="fw-bolder">{{__('message.livestream studio')}}</h4>
                    </a>
                </div>
                <div class="col">
                    <a href="{{ route('2d3dvfx',app()->getLocale()) }}" class="ou-item card h-100 bg-switch shadow text-decoration-none" data-aos="zoom-in">
                        <div class="my-thumbnail">
                            <img src="{{ asset('img/feature-service/2d-3d-vfx.jpg') }}" alt="2d-3d" class="w-100 rounded">
                        </div>
                        <p>{{__('message.feature service 6')}}</p>
                        <h4 class="fw-bolder">{{__('message.2d 3d vfx')}}</h4>
                    </a>
                </div>
                <div class="col offset-md-2 offset-lg-0" data-aos="zoom-in">
                    <a href="{{ route('decor',app()->getLocale()) }}" class="ou-item card h-100 bg-switch shadow text-decoration-none">
                        <div class="my-thumbnail">
                            <img src="{{ asset('img/feature-service/decor-printing.jpg') }}" alt="printing"
                                class="w-100 rounded">
                        </div>
                        <p>{{__('message.feature service 7')}}</p>
                        <h4 class="fw-bolder">{{__('message.decor printing')}}</h4>
                    </a>
                </div>
                <div class="col">
                    <a href="{{ route('mobile',app()->getLocale()) }}" class="ou-item card h-100 bg-switch shadow text-decoration-none" data-aos="zoom-in">
                        <div class="my-thumbnail">
                            <img src="{{ asset('img/feature-service/web-app.jpg') }}" alt="komsan" class="w-100 rounded">
                        </div>
                        <p>{{__('message.feature service 8')}}</p>
                        <h4 class="fw-bolder">{{__('message.web app')}}</h4>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <!-- End service -->

    <!-- Our strategic -->
    <section class="our-strategic py-50">
        <div class="container all-content" data-aos="zoom-in">
            <p class="text-uppercase text-center font-title">{{__('message.our strategic way')}}</p>
            <h2 class="text-center text-uppercase">{{__('message.our strategic way desc')}}</h2>
        </div>
    </section>
    <!--End Our strategic -->

     <!-- What we do? -->
     <section class="what-we-do position-relative">
        <img src="{{ asset('img/bg.png') }}" alt="bg" class="w-100 position-absolute d-none d-md-block opacity-25" data-aos="zoom-in">
        <div class="container">
            <div class="row py-50">
                <div class="col-md-5 align-self-center js-tilt" data-aos="zoom-in">
                    <img src="{{ asset('img/what-we-do.png') }}" alt="contents-is-king" width="100%" data-aos="zoom-in">
                </div>
                <div class="col-md-7 align-self-center">
                    <h1 class="font-title text-warning text-uppercase mt-2 mt-md-0">{{__('message.what we do')}}</h1>
                    <p>{{__('message.what we do desc')}}</p>
                    <h6 class="fw-bold">{{__('message.with our unmatched')}}</h6>
                    <ul class="list-unstyled m-0 p-0">
                        <li class="d-flex align-items-center">
                            <i class='bx bx-right-arrow text-warning'></i>
                            <span class="ms-1">{{__('message.with our unmatched 1')}}</span>
                        </li>
                        <li class="d-flex align-items-center">
                            <i class='bx bx-right-arrow text-warning'></i>
                            <span class="ms-1">{{__('message.with our unmatched 2')}}</span>
                        </li>
                        <li class="d-flex align-items-center">
                            <i class='bx bx-right-arrow text-warning'></i>
                            <span class="ms-1">{{__('message.with our unmatched 3')}}</span>
                        </li>
                        <li class="d-flex align-items-center">
                            <i class='bx bx-right-arrow text-warning'></i>
                            <span class="ms-1">{{__('message.with our unmatched 4')}}</span>
                        </li>
                        <li class="d-flex align-items-center">
                            <i class='bx bx-right-arrow text-warning'></i>
                            <span class="ms-1">{{__('message.with our unmatched 5')}}</span>
                        </li>
                        <li class="d-flex align-items-center">
                            <i class='bx bx-right-arrow text-warning'></i>
                            <span class="ms-1">{{__('message.with our unmatched 6')}}</span>
                        </li>
                        <li class="d-flex align-items-center">
                            <i class='bx bx-right-arrow text-warning'></i>
                            <span class="ms-1">{{__('message.with our unmatched 7')}}</span>
                        </li>
                        <li class="d-flex align-items-center">
                            <i class='bx bx-right-arrow text-warning'></i>
                            <span class="ms-1">{{__('message.with our unmatched 8')}}</span>
                        </li>
                        <li class="d-flex align-items-center">
                            <i class='bx bx-right-arrow text-warning'></i>
                            <span class="ms-1">{{__('message.with our unmatched 9')}}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <!-- End What we do? -->

    <!-- Recrutiting -->
    <section class="recruiting">
        <div class="bg-rgba py-50">
            <div class="container all-content">
                <div class="row">
                    <div class="col-md-6 py-4 py-md-0 text-center" data-aos="zoom-in">
                        <h1 class="text-uppercase text-primary font-title">{{__('message.recruiting')}}</h1>
                        <h5 class="text-uppercase text-white-50">{{__('message.for young research') .date('Y')+1}}</h5>
                    </div>
                    <div class="col-md-6 py-4 py-md-0 align-self-center" data-aos="zoom-in">
                        <div class="d-flex justify-content-center">
                            <a href="{{route('career',app()->getLocale())}}" class="btn btn-primary rounded-pill text-capitalize text-white phkay-rotate-x">
                                <img src="{{ asset('img/emoji/attendance.png') }}" alt="icon">
                                <span>{{__('message.apply now')}}</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Recrutiting -->

    <!--technology -->
    <section class="technology py-50 position-relative">
        <img src="{{ asset('img/team-angel.png') }}" alt="angel" class="position-absolute end-0 top-50 opacity-50 d-none d-md-block">
        <div class="container all-content">
            <div class="row">
                <div class="col-md-5 js-tilt">
                    <img src="{{ asset('img/technology.svg') }}" alt="" class="w-100" data-aos="zoom-in">
                </div>
                <div class="col-md-7">
                    <h1 class="font-title text-warning text-uppercase" data-aos="zoom-in">{{__('message.technology')}}</h1>
                    <p data-aos="zoom-in">{{__('message.technology desc')}}</p>
                </div>
            </div>
        </div>
    </section>
    <!--End technology -->

    <hr>

    <!-- Our partners -->
    <section class="our-partners py-50">
        <div class="container all-content">
            <div class="text-center">
                <h1 class="text-uppercase font-title text-warning" data-aos="zoom-in">{{__('message.our partners')}}</h1>
                <p data-aos="zoom-in">{{__('message.our partners desc')}}</p>
            </div>
            <div class="owl-carousel">
                <div class="logo-partners">
                    <img class="mx-2 my-2 my-lg-0" data-aos="zoom-in" src="{{ asset('img/partners/magic-land.png') }}" alt="magic-land">
                </div>
                <div class="logo-partners">
                    <img class="mx-2 my-2 my-lg-0" data-aos="zoom-in" src="{{ asset('img/partners/decor-advertising.png') }}" alt="decor-advertising">
                </div>
                <div class="logo-partners">
                    <img class="mx-2 my-2 my-lg-0" data-aos="zoom-in" src="{{ asset('img/partners/millionuire.png') }}" alt="millionuire">
                </div>
                <div class="logo-partners">
                    <img class="mx-2 my-2 my-lg-0" data-aos="zoom-in" src="{{ asset('img/partners/amazing.png') }}" alt="amazing">
                </div>
            </div>
        </div>
    </section>
    <!--End Our partners -->

    <!-- Phkay Media Maps  -->
    <x-phkay-maps />
    <!-- End phkay media maps -->

    <!-- Get start bottom -->
    <section class="fixed-bg bg-getsart text-center position-relative">
        <div class="bg-rgba getstart-bottom">
            <div class="container">
                <h3 class="font-title m-text-size text-uppercase" data-aos="zoom-in">{{__('message.want to grow your business')}}</h3>
                <div class="d-flex justify-content-center">
                    <a href="{{route('contact',app()->getLocale())}}" class="btn btn-warning rounded-pill btn-lg learn-more font-title text-uppercase text-decoration-none h1 mt-5 d-flex align-items-center fw-bolder" data-aos="zoom-in">
                        {{__('message.get start')}} <i class='bx bx-right-arrow-alt bx-fade-left' ></i>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <!--Get start bottom -->
</div>

@push('scripts')
    <script src="{{ mix('js/particles.js') }}"></script>
@endpush