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

@php
    $teams = getTeams(limit: null, order: 'asc');
@endphp
@extends('client.raffles.layouts.app')
@section('content')
@include('client.raffles.pages.partials.breadcumb')


    <section id="down-section">
        <div id="particles-01" data-particle="true"
            data-particle-options="{&quot;particles&quot;: {&quot;number&quot;: {&quot;value&quot;: 6,&quot;density&quot;: {&quot;enable&quot;: true,&quot;value_area&quot;: 1000}},&quot;color&quot;:{&quot;value&quot;:[&quot;#b7b9be&quot;, &quot;#dd6531&quot;]},&quot;shape&quot;: {&quot;type&quot;: &quot;circle&quot;,&quot;stroke&quot;:{&quot;width&quot;:0,&quot;color&quot;:&quot;#000000&quot;}},&quot;opacity&quot;: {&quot;value&quot;: 0.5,&quot;random&quot;: false,&quot;anim&quot;: {&quot;enable&quot;: false,&quot;speed&quot;: 1,&quot;sync&quot;: false}},&quot;size&quot;: {&quot;value&quot;: 8,&quot;random&quot;: true,&quot;anim&quot;: {&quot;enable&quot;: false,&quot;sync&quot;: true}},&quot;move&quot;: {&quot;enable&quot;: true,&quot;speed&quot;:2,&quot;direction&quot;: &quot;right&quot;,&quot;random&quot;: false,&quot;straight&quot;: false}},&quot;interactivity&quot;: {&quot;detect_on&quot;: &quot;canvas&quot;,&quot;events&quot;: {&quot;onhover&quot;: {&quot;enable&quot;: false,&quot;mode&quot;: &quot;repulse&quot;},&quot;onclick&quot;: {&quot;enable&quot;: false,&quot;mode&quot;: &quot;push&quot;},&quot;resize&quot;: true}},&quot;retina_detect&quot;: false}"
            class="position-absolute h-100 top-0 left-0 z-index-minus-1"></div>
        <div class="container">
            <div class="row justify-content-center align-items-end text-center text-lg-start">
                <div class="col-xl-5 col-lg-6 md-mb-30px xs-mb-25px">
                    <h2 class="fw-600 text-dark-gray ls-minus-2px mb-0"
                        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;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                        {{ $page->short_description }}</h2>
                </div>
                <div class="col-lg-6 offset-xl-1">
                    <p class="w-90 sm-w-100 mx-auto mx-lg-0"
                        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;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                        {!! $page->description !!}</p>
                    <a target="{{ $page->button_target }}" href="{{ $page->button_url }}"
                        class="btn btn-link btn-large text-dark-gray fw-600"
                        data-anime="{ &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 300, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">{{ $page->button_text }}</a>
                </div>
            </div>
            <div class="row justify-content-center align-items-center mt-5 md-mt-10">

                <div class="col-xl-4 col-lg-3 col-md-4 sm-mb-35px"
                    data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">

                    @isset($page->custom)
                        @foreach ($page->custom as $item)
                            <div class="row align-items-center @if ($loop->first) mb-50px sm-mb-35px @endif">
                                <div class="col-5 col-xl-5 col-md-12 text-end">
                                    <h2 class="alt-font fw-600 text-dark-gray ls-minus-2px mb-0 counter" data-speed="2000"
                                        data-to="{{ $item['icon'] ?? '' }}"></h2>
                                </div>
                                <div class="col-7 col-xl-7 col-md-12 last-paragraph-no-margin text-md-end text-xl-start">
                                    <span class="fs-20 text-dark-gray fw-600 alt-font">{{ $item['key'] ?? '' }}</span>
                                    <p>{{ $item['value'] ?? '' }}</p>
                                </div>
                            </div>
                            @break($loop->index == 1)
                        @endforeach
                    @endisset
                </div>

                <div class="col-xl-4 col-lg-6 col-md-4 text-center animation-float sm-mb-65px"
                    data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;scale&quot;: [0, 1], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 100, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                    <img class="border-radius-100 w-350px" src="{{ $page->image }}" alt="{{ $page->title }}" />
                </div>
                <div class="col-xl-4 col-lg-3 col-md-4"
                    data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [-50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">

                    @isset($page->custom)
                        @foreach (collect($page->custom)->skip(2) as $item)
                            <div class="row align-items-center @if ($loop->first) mb-50px sm-mb-35px @endif">
                                <div class="col-5 col-xl-5 col-md-12 text-end text-xl-end text-md-start">
                                    <h2 class="alt-font fw-600 text-dark-gray ls-minus-2px mb-0 counter" data-speed="2000"
                                        data-to="{{ $item['icon'] ?? '' }}"></h2>
                                </div>
                                <div class="col-7 col-xl-7 col-md-12 last-paragraph-no-margin">
                                    <span class="fs-20 text-dark-gray fw-600 alt-font">{{ $item['key'] ?? '' }}</span>
                                    <p>{{ $item['value'] ?? '' }}</p>
                                </div>
                            </div>
                        @endforeach
                    @endisset

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

    @isset($teams)
        <section>
            <div class="container">
                <div class="row justify-content-center mb-3">
                    <div class="col-xl-5 col-lg-6 col-sm-8 text-center"
                        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;: 300, &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">Creative
                            team</span>
                        <h3 class="alt-font text-dark-gray fw-600 ls-minus-2px">Committed staff are ready to help you</h3>
                    </div>
                </div>
                <div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 justify-content-center"
                    data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;translateX&quot;: [-30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 700, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">

                    @foreach ($teams as $team)
                        <div class="col text-center team-style-05 md-mb-35px">
                            <div class="position-relative mb-30px last-paragraph-no-margin">
                                <img src="{{ $team->image }}" class="border-radius-4px" alt="{{ $team->title }}" />
                                {{-- <div
                                class="w-100 h-100 d-flex flex-column justify-content-end align-items-center border-radius-4px p-40px team-content bg-base-color-transparent">
                                <p class="text-white w-80 lg-w-75 sm-w-80 absolute-middle-center opacity-7">Lorem ipsum simply
                                    of printing typesetting.</p>
                                <div class="social-icon fs-19">
                                    <a href="https://www.facebook.com/" target="_blank" class="text-white"><i
                                            class="fa-brands fa-facebook-f"></i></a>
                                    <a href="https://www.instagram.com/" target="_blank" class="text-white"><i
                                            class="fa-brands fa-instagram"></i></a>
                                    <a href="https://www.twitter.com/" target="_blank" class="text-white"><i
                                            class="fa-brands fa-twitter"></i></a>
                                </div>
                            </div> --}}
                            </div>
                            <div class="alt-font fw-500 text-dark-gray lh-22 fs-18">{{ $team->title }}</div>
                            <span>{{ $team->designation }}</span>
                        </div>
                    @endforeach

                </div>
            </div>
        </section>
    @endisset

    <section class="background-position-center-top position-relative overflow-hidden py-0 sm-background-image-none"
        style="background-image: url('{{asset('raffles/assets/images/vertical-line-bg.svg')}}')">
        <div class="skrollr-parallax mx-auto" data-bottom-top="width: 70%" data-center-top="width: 100%;"
            data-parallax-background-ratio="0.5" style="background-image: url('{{ $page->getRawOriginal("images") ? $page->images[0] : '' }}')">
            <div class="opacity-extra-medium bg-dark-gray"></div>
            <div class="container">
                <div class="row justify-content-center align-items-center one-third-screen">
                    <div
                        class="col-xl-6 col-lg-8 text-center position-relative last-paragraph-no-margin parallax-scrolling-style-2">
                        <a href="{{ $page->link }}"
                            aria-label="popup-video"
                            class="position-relative d-inline-block text-center bg-gradient-emerald-blue-emerald-green rounded-circle video-icon-box video-icon-large popup-youtube mb-9 md-mb-6">
                            <span>
                                <span class="video-icon">
                                    <i class="fa-solid fa-play text-white"></i>
                                    <span class="video-icon-sonar">
                                        <span
                                            class="video-icon-sonar-bfr bg-gradient-emerald-blue-emerald-green opacity-9"></span>
                                    </span>
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection