@extends('Basics.H-F')




@section('page')



<section class="features">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-12">
                <div class="features-post">
                    <div class="features-content-dis">
                        <div class="content-show">
                            <h4 style="color: gray;">({{ __('tran.Soon') }})<i class="ti ti-swords"></i> PVP</h4>
                        </div>



                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-12">
                <div class="features-post second-features">
                    <div class="features-content">
                        <div class="content-show">
                            <h4><i class="ti ti-shield"></i>Pve</h4>
                        </div>
                        <div class="content-hide">
                            <hr>
                            <p>{{ __('tran.Cap') }} : 130</p>
                            <p>{{ __('tran.Mastery') }} : <b style="color: orange;"> 520 {{ __('tran.CH') }} </b>|| <b style="color: rgb(0, 0, 243);">260
                                    {{ __('tran.EU') }}</b></p>
                            <p>{{ __('tran.Server') }} : {{ __('tran.Play4Fun') }}</p>
                            <p>{{ __('tran.Fortress') }} : <b style="color: rgb(4, 81, 145);">Hotan</b></p>
                            <p>{{ __('tran.GOpen') }} : <b style="color: greenyellow;">21/04/2024</b></p>
                            <hr>
                            <p class="hidden-sm">{{ __('tran.Cap') }} : 130</p>
                            <p class="hidden-sm">{{ __('tran.Mastery') }} : <b style="color: orange;"> 520 {{ __('tran.CH') }} </b>|| <b style="color: rgb(0, 0, 243);">260
                                    {{ __('tran.EU') }}</b></p>
                            <p class="hidden-sm">{{ __('tran.Server') }} : {{ __('tran.Play4Fun') }}</p>
                            <p class="hidden-sm">{{ __('tran.Fortress') }} : <b style="color: rgb(4, 81, 145);">Hotan</b></p>
                            <p class="hidden-sm">{{ __('tran.GOpen') }} : <b style="color: greenyellow;">21/04/2024</b></p>
                            <img src="assets/img/pChar/char.png">
                            <b>{{ __('tran.OPlayers') }}:</b>
                            <div class="progress-outer">
                                <div class="progress">
                                    <div class="progress-bar progress-bar-striped progress-bar-danger" style='
                                                 @if ($count_pve > 900)
                                                 background: red;
                                                @elseif($count_pve > 500)
                                                background: orange;
                                                @elseif($count_pve > 0)
                                                background: greenyellow;
                                                @endif
                                            width: {{ ($count_pve/1000)*100 }}%;'></div>
                                    <div class="progress-value">
                                        @if ($count_pve > 900)
                                        <span style="color: red">{{ $count_pve }}</span>/1000
                                        @elseif($count_pve > 500)
                                        <span style="color: orange">{{ $count_pve }}</span>/1000
                                        @elseif($count_pve > 0)
                                        <span style="color: greenyellow">{{ $count_pve }}</span>/1000
                                        @else
                                        <b style="color: red">{{ __('tran.Offline') }}</b>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div><a href="https://pve.4tressro.com/">{{ __('tran.JNow') }}</a></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-12">
                <div class="features-post third-features">
                    <div class="features-content">
                        <div class="content-show">
                            <h4 style="color: gray;"><i class="fa fa-book"></i> Old School</h4>
                        </div>
                        <div class="content-hide">
                            <hr>
                            <p>{{ __('tran.Cap') }} : 80</p>
                            <p>{{ __('tran.Mastery') }} : <b style="color: orange;"> 300 {{ __('tran.CH') }} </b></p>
                            <p>{{ __('tran.Server') }} : {{ __('tran.Play4Fun') }}</p>
                            <p>{{ __('tran.Fortress') }} : <b style="color: rgb(4, 81, 145);">Hotan</b></p>
                            <p>Beta phase : <b style="color: rgb(255, 187, 0);">1/11/2024</b></p>
                            <p>{{ __('tran.GOpen') }} : <b style="color: greenyellow;">Soon</b></p>
                            <hr>
                            <p class="hidden-sm">{{ __('tran.Cap') }} : 80</p>
                            <p class="hidden-sm">{{ __('tran.Mastery') }} : <b style="color: orange;"> 300 {{ __('tran.CH') }} </b></p>
                            <p class="hidden-sm">{{ __('tran.Server') }} : {{ __('tran.Play4Fun') }}</p>
                            <p class="hidden-sm">{{ __('tran.Fortress') }} : <b style="color: rgb(4, 81, 145);">Hotan</b></p>
                            <p class="hidden-sm">Beta phase : <b style="color: rgb(255, 187, 0);">1/11/2024</b></p>
                            <p class="hidden-sm">{{ __('tran.GOpen') }} : <b style="color: greenyellow;">soon</b></p>
                            <img style="height: 70% ; left:50%" src="assets/img/pChar/oldschool_80.png">
                            <b>{{ __('tran.OPlayers') }}:</b>
                            <div class="progress-outer">
                                <div class="progress">
                                    <div class="progress-bar progress-bar-striped progress-bar-danger" style='
                                                 @if ($count_old > 900)
                                                 background: red;
                                                @elseif($count_old > 500)
                                                background: orange;
                                                @elseif($count_old > 0)
                                                background: greenyellow;
                                                @endif
                                            width: {{ ($count_old/1000)*100 }}%;'></div>
                                    <div class="progress-value">
                                        @if ($count_old > 900)
                                        <span style="color: red">{{ $count_old }}</span>/1000
                                        @elseif($count_old > 500)
                                        <span style="color: orange">{{ $count_old }}</span>/1000
                                        @elseif($count_old > 0)
                                        <span style="color: greenyellow">{{ $count_old }}</span>/1000
                                        @else
                                        <b style="color: red">{{ __('tran.Offline') }}</b>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div><a href="https://victory.4tressro.com/">{{ __('tran.JNow') }}</a></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section why-us" data-section="section2">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="section-heading">

                </div>
            </div>
            <div class="col-md-12">
                <div id='tabs'>
                    <ul>
                        <li><a href='#tabs-1'>PVE {{ __('tran.Server') }}</a></li>
                        <li><a href='#tabs-2'>({{ __('tran.Soon') }})</a></li>
                        <li><a href='#tabs-3'>({{ __('tran.Soon') }})</a></li>
                    </ul>
                    <section class='tabs-content'>
                        <article id='tabs-1'>
                            <div class="row">
                                <div class="col-md-6">
                                    <img src="assets/img/PVE-SERVER.png" alt="">
                                </div>
                                <div class="col-md-6">
                                    <h4>PVE {{ __('tran.Server') }}</h4>
                                    <hr>
                                    <p>{{ __('tran.Cap') }} : 130</p>
                                    <p>{{ __('tran.Mastery') }} : <b style="color: orange;"> 520 {{ __('tran.CH') }} </b>|| <b style="color: rgb(0, 0, 243);">260
                                            {{ __('tran.EU') }}</b></p>
                                    <p>{{ __('tran.Server') }} : {{ __('tran.Play4Fun') }}</p>
                                    <p>{{ __('tran.Fortress') }} : <b style="color: rgb(4, 81, 145);">Hotan</b></p>
                                    <p>{{ __('tran.GOpen') }} : <b style="color: greenyellow;">21/04/2024</b></p>

                                    <p>{{ __('tran.OPlayers') }}:</p>
                                    <div class="progress-outer">
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-striped progress-bar-danger" style='
                                                 @if ($count_pve > 900)
                                                 background: red;
                                                @elseif($count_pve > 500)
                                                background: orange;
                                                @elseif($count_pve > 0)
                                                background: greenyellow;
                                                @endif
                                            width: {{ ($count_pve/1000)*100 }}%;'></div>
                                            <div class="progress-value">
                                                @if ($count_pve > 900)
                                                <span style="color: red">{{ $count_pve }}</span>/1000
                                                @elseif($count_pve > 500)
                                                <span style="color: orange">{{ $count_pve }}</span>/1000
                                                @elseif($count_pve > 0)
                                                <span style="color: greenyellow">{{ $count_pve }}</span>/1000
                                                @else
                                                <b style="color: red">{{ __('tran.Offline') }}</b>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="main-button">
                                        <div><a href="https://pve.4tressro.com/">{{ __('tran.JNow') }}</a></div>
                                    </div>
                                </div>
                            </div>
                        </article>
                        {{-- <!-- <article id='tabs-2'>
                            <div class="row">
                                <div class="col-md-6">
                                    <img src="assets/images/choose-us-image-02.png" alt="">
                                </div>
                                <div class="col-md-6">
                                    <h4>Top Level</h4>
                                    <p>You can modify this HTML layout by editing contents and adding more pages as
                                        you needed. Since
                                        this template has options to add dropdown menus, you can put many HTML
                                        pages.</p>
                                    <p>Suspendisse tincidunt, magna ut finibus rutrum, libero dolor euismod odio,
                                        nec interdum quam
                                        felis non ante.</p>
                                </div>
                            </div>
                        </article>
                        <article id='tabs-3'>
                            <div class="row">
                                <div class="col-md-6">
                                    <img src="assets/images/choose-us-image-03.png" alt="">
                                </div>
                                <div class="col-md-6">
                                    <h4>Quality Meeting</h4>
                                    <p>You are NOT allowed to redistribute this template ZIP file on any template
                                        collection website.
                                        However, you can use this template to convert into a specific theme for any
                                        kind of CMS platform
                                        such as WordPress. For more information, you shall <a rel="nofollow"
                                            href="https://templatemo.com/contact" target="_parent">contact
                                            TemplateMo</a> now.</p>
                                </div>
                            </div>
                        </article> -->  --}}
                    </section>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="section why-us" data-section="section3">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="section-heading">

                </div>
            </div>
            <div class="col-md-12">

                <div id='intro'>
                    {{ __('tran.VSite') }}
                </div>
                <div id='contact-info'>
                    <div class='links'>
                        <a href='https://discord.com/invite/hQNdpz8QXq' target='_blank' class='orange-shadow'>
                            <div>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span>
                                    <i class="fab fa-discord"></i>
                                </span>

                            </div>
                        </a>
                        <a href='https://www.facebook.com/gaming/4TresSro/' class='orange-border' target='_blank'>
                            <div>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span>
                                    <i class="fab fa-facebook-square"></i>
                                </span>
                            </div>
                        </a>

                        <a href='https://web.facebook.com/groups/4tressro/' class='orange-border' target='_blank'>
                            <div>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span>
                                    <i class="fab fa-facebook-f"></i>
                                </span>
                            </div>
                        </a>
                        <a href='https://chat.whatsapp.com/KfkavNp1vvxABKU0gN6PTM' class='orange-border' target='_blank'>
                            <div>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span>
                                    <i class="fab fa-whatsapp"></i>
                                </span>
                            </div>
                        </a>

                        <a href='https://www.youtube.com/@4tresSro' class='orange-background' target='_blank'>
                            <div>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span>
                                    <i class="fab fa-youtube-square"></i>
                                </span>
                            </div>
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>


<section class="section video" data-section="section4">
    <div class="container">
        <div class="row">
            <div class="col-md-6 align-self-center">
                <div class="left-content">
                    <h4>{{ __('tran.OPressent') }}</h4>
                    <h4>{{ __('tran.Wvideos') }} <em>{{ __('tran.Logo_1') }}{{ __('tran.Logo_2') }}</em></h4>
                    <p>{{ __('tran.Wvideos2') }}</p>
                    <div class="main-button"><a rel="nofollow" href="https://www.youtube.com/@4tresSro" target="_blank">{{ __('tran.Ychannel') }}</a></div>
                </div>
            </div>
            <div class="col-md-6">
                <article class="video-item">
                    <div class="video-caption">
                        <h4>{{ __('tran.Wvideos3') }}</h4>
                    </div>
                    <figure>
                        <a href="https://www.youtube.com/watch?v=qU3V6nlvg6I" class="play"><img src="assets/img/thumb2.jpg"></a>
                    </figure>
                </article>
            </div>
        </div>
    </div>
</section>


@endsection