new_raffles/resources/views/client/raffles/pages/about-template.blade.php

@php
    $services = getServices(limit: 4, order: 'desc');
    $institutions = getInstitutions(limit: 10, order: 'desc');
@endphp

@extends('client.raffles.layouts.app')
@section('content')
    @include('client.raffles.pages.partials.breadcumb')
    <section>
        <div class="container">
            <div class="row justify-content-center align-items-end">
                <div class="col-xl-6 col-lg-7 md-mb-20px"
                    data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                    <div
                        class="bg-white box-shadow-quadruple-large text-uppercase fs-13 ps-25px pe-25px alt-font fw-600 text-base-color lh-40 sm-lh-55 border-radius-100px d-inline-block mb-25px">
                        Welcome to {{ setting('title') }}</div>
                    <h3 class="fw-700 text-dark-gray ls-minus-1px mb-0 w-90 md-w-100">{{ $page->short_description }}</h3>
                </div>
                <div class="col-lg-5 offset-xl-1 last-paragraph-no-margin"
                    data-anime="{ &quot;el&quot;: &quot;lines&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                    {!! $page->description !!}
                </div>
            </div>

            <div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 justify-content-center mt-4 mb-4 sm-mb-8"
                data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">

                @foreach ($services as $service)
                    <div class="col icon-with-text-style-03">
                        <div class="feature-box p-8 overflow-hidden">
                            <div class="feature-box-icon mb-25px">
                                <img src="{{ $service->icon_image }}" class="h-100px" alt>
                            </div>
                            <div class="feature-box-content last-paragraph-no-margin">
                                <span
                                    class="d-block fs-18 fw-600 text-dark-gray mb-5px ls-minus-05px">{{ $service->title }}</span>
                                <p>{{ $service->short_description }}</p>
                            </div>
                        </div>
                    </div>
                    @break($loop->index == 3)
                @endforeach

            </div>

            <div class="row justify-content-center"
                data-anime="{ &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                <div class="col-auto text-center">
                    <div class="icon-with-text-style-06">
                        <div class="feature-box feature-box-left-icon-middle">
                            <div class="feature-box-icon me-10px">
                                <i class="bi bi-patch-check icon-very-medium text-base-color"></i>
                            </div>
                            <div class="feature-box-content last-paragraph-no-margin">
                                <div class="text-dark-gray fs-20 ls-minus-05px">We provide <span class="fw-600">quality
                                        service</span> that best suites students.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>

    @if ($page->children->isNotEmpty())
        <section class="pt-0 bg-very-light-gray overflow-hidden">
            <div class="border-bottom border-top border-color-extra-medium-gray bg-white box-shadow-extra-large">
                <div class="container tab-style-08 text-center">
                    <ul class="nav nav-tabs border-0 justify-content-center ls-minus-05px fw-500 fs-19 text-dark-gray active-tab-border-bottom"
                        data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                        @foreach ($page->children as $item)
                            <li class="nav-item">
                                <a data-bs-toggle="tab" href="#tab-{{ $item->slug }}"
                                    class="nav-link @if ($loop->first) active @endif">
                                    {{ $item->title }}
                                    <span class="tab-border bg-dark-gray"></span>
                                </a>
                            </li>
                            @break($loop->index == 3)
                        @endforeach
                    </ul>
                </div>
            </div>

            <div class="container">
                <div class="row mt-4">
                    <div class="col-12 tab-style-08">
                        <div class="tab-content">
                            @foreach ($page->children as $item)
                                <div class="tab-pane fade in @if ($loop->first) active show @endif"
                                    id="tab-{{ $item->slug }}">
                                    <div class="row align-items-center g-lg-0">
                                        <div class="col-lg-6 col-md-11 offset-lg-0 offset-md-1 position-relative md-mb-20px"
                                            data-anime="{ &quot;effect&quot;: &quot;slide&quot;, &quot;color&quot;: &quot;#FFFFFF&quot;, &quot;direction&quot;:&quot;lr&quot;, &quot;easing&quot;: &quot;easeOutQuad&quot;, &quot;delay&quot;:50}">
                                            <figure class="position-relative m-0 text-center">
                                                <img src="{{ $item->image }}" alt>
                                                <figcaption class="position-absolute bottom-80px left-0px"
                                                    data-anime="{ &quot;translateY&quot;: [-50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 1000, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                                                    <img src="{{ asset(setting('other_image')) }}" class="animation-float"
                                                        alt>
                                                </figcaption>
                                            </figure>
                                        </div>
                                        <div class="col-xl-4 offset-lg-1 col-lg-5"
                                            data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;:200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                                            <span
                                                class="bg-white box-shadow-quadruple-large text-uppercase fs-13 ps-25px pe-25px alt-font fw-600 text-base-color lh-40 sm-lh-55 border-radius-100px d-inline-block mb-25px">{{ setting('title') }}</span>
                                            <h3 class="fw-700 text-dark-gray ls-minus-1px">{{ $item->short_description }}
                                            </h3>
                                            {!! $item->description !!}

                                            <a href="{{ $item->button_url }}" target="{{ $item->button_target }}"
                                                class="btn btn-large btn-dark-gray btn-hover-animation-switch btn-round-edge btn-box-shadow me-30px sm-me-20px">
                                                <span>
                                                    <span class="btn-text">{{ $item->button_text }}</span>
                                                    <span class="btn-icon"><i
                                                            class="feather icon-feather-arrow-right"></i></span>
                                                    <span class="btn-icon"><i
                                                            class="feather icon-feather-arrow-right"></i></span>
                                                </span>
                                            </a>

                                        </div>
                                    </div>
                                </div>
                                @break($loop->index == 3)
                            @endforeach

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

        @if ($page->children->count() > 4)
            @php
                $fifthPage = $page->children[4];
            @endphp
            <section class="overlap-height overflow-hidden">
                <div class="container overlap-gap-section">
                    <div class="row justify-content-center align-items-end mb-7 sm-mb-9">
                        <div class="col-xl-6 col-lg-7 md-mb-20px"
                            data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                            <h3 class="fw-700 text-dark-gray ls-minus-1px mb-0 w-90 md-w-100">
                                {{ $fifthPage->short_description }}
                            </h3>
                        </div>
                        <div class="col-lg-5 offset-xl-1 last-paragraph-no-margin"
                            data-anime="{&quot;el&quot;: &quot;lines&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                            {!! $fifthPage->description !!}
                        </div>
                    </div>
                    @if (!is_null($fifthPage->custom))
                        <div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 g-0 justify-content-center"
                            data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [-50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">

                            @foreach ($fifthPage->custom as $item)
                                <div
                                    class="col process-step-style-06 text-center last-paragraph-no-margin hover-box md-mb-50px">
                                    <h4 class="d-block text-dark-gray mb-0 fw-700 ls-minus-2px">{{ $item['icon'] ?? '' }}
                                    </h4>
                                    <div class="process-step-icon-box position-relative mt-25px mb-25px">
                                        <span
                                            class="progress-step-separator bg-dark-gray w-100 separator-line-1px opacity-1"></span>
                                        <div
                                            class="step-box d-flex align-items-center justify-content-center bg-light-red-grey border-radius-100 mx-auto w-30px h-30px">
                                            <span class="w-8px h-8px bg-base-color border-radius-100"></span>
                                        </div>
                                    </div>
                                    <span
                                        class="d-inline-block alt-font fw-600 text-dark-gray fs-18 mb-5px ls-minus-05px">{{ $item['key'] ?? '' }}</span>
                                    <p class="w-75 sm-w-85 d-inline-block">{{ $item['value'] ?? '' }}</p>
                                </div>
                            @endforeach

                        </div>
                    @endif
                </div>
            </section>
        @endif
    @endif


    <section class="bg-gradient-very-light-gray">
        <div class="container-fluid overlap-section">
            <div class="row position-relative mb-4 md-mb-5">
                <div class="col swiper swiper-width-auto text-center pb-30px md-pb-20px feather-shadow"
                    data-slider-options="{ &quot;slidesPerView&quot;: &quot;auto&quot;, &quot;spaceBetween&quot;:50, &quot;speed&quot;: 10000, &quot;loop&quot;: true, &quot;pagination&quot;: { &quot;el&quot;: &quot;.slider-four-slide-pagination-2&quot;, &quot;clickable&quot;: false }, &quot;allowTouchMove&quot;: false, &quot;autoplay&quot;: { &quot;delay&quot;:0, &quot;disableOnInteraction&quot;: false }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.slider-four-slide-next-2&quot;, &quot;prevEl&quot;: &quot;.slider-four-slide-prev-2&quot; }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;effect&quot;: &quot;slide&quot; }">
                    <div class="swiper-wrapper marquee-slide">

                        <div class="swiper-slide">
                            <div class="fs-150 lg-fs-130 md-fs-110 sm-fs-90 text-dark-gray fw-600 ls-minus-5px">RAFFLES
                            </div>
                        </div>


                        <div class="swiper-slide">
                            <div
                                class="fs-150 lg-fs-130 md-fs-110 sm-fs-90 fw-600 text-outline text-outline-color-extra-medium-gray ls-minus-5px">
                                EDUCARE</div>
                        </div>


                        <div class="swiper-slide">
                            <div class="fs-150 lg-fs-130 md-fs-110 sm-fs-90 text-dark-gray fw-600 ls-minus-5px">
                                ASSOCIATES
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            @if ($page->children->count() > 5)
                @php
                    $sixthPage = $page->children[5];
                @endphp
                <div class="row justify-content-center align-items-end mb-6">
                    <div class="col-xl-6 col-lg-7 md-mb-20px text-center text-lg-start"
                        data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                        <h3 class="fw-700 text-dark-gray ls-minus-1px mb-0 w-90 md-w-100">
                            {{ $sixthPage->short_description }}</h3>
                    </div>
                    <div class="col-lg-5 offset-xl-1 last-paragraph-no-margin text-center text-lg-start"
                        data-anime="{&quot;el&quot;: &quot;lines&quot;,  &quot;translateX&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                        {!! $sixthPage->description !!}
                    </div>
                </div>


                <div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center mb-7 md-mb-10 sm-mb-15"
                    data-anime="{&quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                    <div class="col md-mb-30px">
                        <div
                            class="position-relative bg-white overflow-hidden h-100 p-50px lg-p-30px box-shadow-quadruple-large border-radius-6px">
                            <span
                                class="d-block text-dark-gray fw-600 fs-22 mb-25px position-relative z-index-1 ls-minus-1px w-90 xl-w-100">Build
                                a greatest career with Raffles</span>
                            <a href="contact.php"
                                class="btn btn-medium btn-dark-gray btn-hover-animation-switch btn-round-edge btn-box-shadow">
                                <span>
                                    <span class="btn-text">Join with us</span>
                                    <span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
                                    <span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
                                </span>
                            </a>
                            <div
                                class="position-absolute bottom-minus-10px right-minus-40px fs-300 lh-100 fw-900 text-dark-gray opacity-1 z-index-0">
                                &lt;</div>
                        </div>
                    </div>
                    <div class="col md-mb-30px">
                        <div
                            class="position-relative bg-yellow overflow-hidden h-100 p-50px lg-p-30px box-shadow-quadruple-large border-radius-6px">
                            <span
                                class="d-block text-dark-gray fw-600 fs-22 mb-25px position-relative z-index-1 ls-minus-1px w-90 xl-w-100">Ready
                                to work together for better solutions.</span>
                            <a href="contact.php"
                                class="btn btn-medium btn-dark-gray btn-hover-animation-switch btn-round-edge btn-box-shadow">
                                <span>
                                    <span class="btn-text">View our job</span>
                                    <span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
                                    <span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
                                </span>
                            </a>
                            <div
                                class="position-absolute bottom-minus-10px right-minus-40px fs-300 lh-100 fw-900 text-dark-gray opacity-1 z-index-0 animation-zoom">
                                &lt;</div>
                        </div>
                    </div>
                    <div class="col">
                        <div
                            class="position-relative bg-white overflow-hidden h-100 p-50px lg-p-30px box-shadow-quadruple-large border-radius-6px">
                            <span
                                class="d-block text-dark-gray fw-600 fs-22 mb-25px position-relative z-index-1 ls-minus-1px w-90 xl-w-100">Best
                                consultants for you</span>
                            <a href="contact.php"
                                class="btn btn-medium btn-dark-gray btn-hover-animation-switch btn-round-edge btn-box-shadow">
                                <span>
                                    <span class="btn-text">Contact now</span>
                                    <span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
                                    <span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span>
                                </span>
                            </a>
                            <div
                                class="position-absolute bottom-minus-10px right-minus-40px fs-300 lh-100 fw-900 text-dark-gray opacity-1 z-index-0">
                                &lt;</div>
                        </div>
                    </div>
                </div>
            @endif

            @if ($institutions)
                <div class="row position-relative clients-style-08 mb-9 md-mb-19 sm-mb-3">
                    <div class="col swiper text-center feather-shadow"
                        data-slider-options="{ &quot;slidesPerView&quot;: 2, &quot;spaceBetween&quot;:0, &quot;speed&quot;: 4000, &quot;loop&quot;: true, &quot;pagination&quot;: { &quot;el&quot;: &quot;.slider-four-slide-pagination-2&quot;, &quot;clickable&quot;: false }, &quot;allowTouchMove&quot;: false, &quot;autoplay&quot;: { &quot;delay&quot;:0, &quot;disableOnInteraction&quot;: false }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.slider-four-slide-next-2&quot;, &quot;prevEl&quot;: &quot;.slider-four-slide-prev-2&quot; }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;breakpoints&quot;: { &quot;1200&quot;: { &quot;slidesPerView&quot;: 4 }, &quot;992&quot;: { &quot;slidesPerView&quot;: 3 }, &quot;768&quot;: { &quot;slidesPerView&quot;: 3 } }, &quot;effect&quot;: &quot;slide&quot; }">
                        <div class="swiper-wrapper marquee-slide">

                            @foreach ($institutions as $institution)
                                <div class="swiper-slide">
                                    <a href="javascript:void(0)"><img src="{{ $institution->image }}"
                                            class="institution-logo" alt="{{ $institution->title }}" /></a>
                                </div>
                            @endforeach

                        </div>
                    </div>
                </div>
            @endif
        </div>
    </section>
@endsection