@extends('client.raffles.layouts.app')
@section('content')
@include('client.raffles.pages.partials.breadcumb')


    <!-- Intro Section-->
    <section class="p-0 ipad-top-space-margin page-title-big-typography cover-background md-background-position-left-center"
        style="background-image: url('{{ asset('raffles/assets/images/demo-elder-care-title-bg.jpg') }}')">
        <div class="container">
            <div class="down-section text-center"
                data-anime="{ &quot;translateY&quot;: [-50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                <a href="#down-section" class="section-link">
                    <div class="text-dark-gray">
                        <i class="feather icon-feather-chevron-down icon-very-medium"></i>
                    </div>
                </a>
            </div>
        </div>
        </div>
    </section>


    <section id="down-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 pe-5 order-2 order-lg-1 lg-pe-3 md-pe-15px"
                    data-anime="{ &quot;el&quot;: &quot;childs&quot;, &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="bg-dark-gray border-radius-6px ps-35px pb-25px pt-25px lg-ps-25px mb-25px">
                        <div class="feature-box feature-box-left-icon-middle">
                            <div
                                class="feature-box-icon feature-box-icon-rounded w-65px h-65px me-20px lg-me-15px rounded-circle bg-base-color rounded-box">
                                <i class="bi bi-telephone-outbound icon-extra-medium text-white"></i>
                            </div>
                            <div class="feature-box-content last-paragraph-no-margin">
                                <span class="mb-5px d-block text-white opacity-6 fw-300">Connect with us?</span>
                                <a href="tel:{{ setting('mobile') }}"
                                    class="text-white fs-20 fw-500 lh-22">{{ setting('mobile') }}</a>
                            </div>
                        </div>
                    </div>
                    <div class="bg-very-light-gray border-radius-6px p-40px lg-p-25px md-p-35px">
                        <span class="fs-22 alt-font text-dark-gray fw-600 mb-25px d-inline-block">Contact Us?</span>
                        <div class="contact-form-style-01 mt-0">

                            <form action="email-templates/contact-form.php" method="post">
                                <div class="position-relative form-group mb-20px">
                                    <span class="form-icon"><i class="bi bi-emoji-smile"></i></span>
                                    <input type="text" name="name"
                                        class="form-control border-white box-shadow-large required"
                                        placeholder="Your name*" />
                                </div>
                                <div class="position-relative form-group mb-20px">
                                    <span class="form-icon"><i class="bi bi-envelope"></i></span>
                                    <input type="email" name="email"
                                        class="form-control border-white box-shadow-large required"
                                        placeholder="Your email address*" />
                                </div>
                                <div class="position-relative form-group form-textarea">
                                    <span class="form-icon"><i class="bi bi-chat-square-dots"></i></span>
                                    <textarea placeholder="Your message" name="comment" class="form-control border-white box-shadow-large" rows="3"></textarea>
                                    <input type="hidden" name="redirect" value>
                                    <button
                                        class="btn btn-large btn-round-edge btn-base-color btn-box-shadow mt-20px submit w-100"
                                        type="submit">Send message</button>
                                    <div class="mt-20px form-results d-none"></div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
                <div class="col-lg-8 order-1 order-lg-2 md-mb-50px"
                    data-anime="{ &quot;el&quot;: &quot;childs&quot;, &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; }">
                    <h4 class="text-dark-gray fw-700 ls-minus-1px alt-font mb-20px d-block">
                        {{ $page->short_description }}</h4>
                    {!! $page->description !!}
                    <img src="{{ $page->image }}" class="mt-30px md-mt-15px mb-60px md-mb-40px border-radius-6px" alt>
                    <div class="row row-cols-1 row-cols-md-2 mb-30px md-mb-15px">
                        @isset($page->custom)
                            @foreach ($page->custom as $item)
                                <div class="col">
                                    <span
                                        class="fs-24 alt-font text-dark-gray ls-minus-05px fw-700 mb-10px d-block">{{ $item['key'] }}</span>
                                    <p class="w-90 sm-w-100">{{ $item['value'] }}</p>
                                </div>
                            @endforeach
                        @endisset
                    </div>
                    <div class="cover-background p-7 border-radius-6px mb-60px md-mb-40px d-flex justify-content-end align-items-end sm-h-500px"
                        style="background-image: url('{{ $page->sidebar_image }}')">
                        <div
                            class="bg-white box-shadow-quadruple-large border-radius-4px w-50 lg-w-55 sm-w-100 overflow-hidden">
                            <div class="p-40px lg-p-25px last-paragraph-no-margin">
                                <span
                                    class="fs-24 alt-font text-dark-gray ls-minus-05px fw-700 mb-10px d-block">{{ $page->sidebar_title }}</span>
                                <p class="w-95 lg-w-100">{{ $page->sidebar_content }}</p>
                            </div>
                            <div class="bg-dark-gray p-15px text-center">
                                <a href="{{ url('/contact') }}" class="text-white fw-600"><i
                                        class="feather icon-feather-mail me-10px"></i>Connect with Our Team</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection