@extends('frontend.layouts.app')

@section('style')
    @include('frontend.pages.css_project')
@endsection

@section('content')
    <div class="row px-4 py-4" style="margin-top: 122px;">
        <div class="row">
            <div class="col">
                <div class="owl-carousel nav-inside show-nav-hover dots-inside mb-0"
                    data-plugin-options="{
                         'items': 1,
                         'loop': false,
                         'autoplay': false,
                         'autoplayTimeout': 5000,
                         'autoplayHoverPause': false,
                         'nav': false,
                         'dots': false,
                         'animateOut': 'fadeOut',
                         'responsive': {
                             '0': { 'items': 1, 'nav': false },
                             '768': { 'items': 1, 'nav': false }
                         }
                     }">
                    <div class="slide-wrapper">
                        <div class="static-images">
                            <img class="bg-img" src="{{ asset('images/texture.png') }}" alt="" />
                            <img class="top-right-img d-none d-md-block"
                                src="{{ $project4_slider->getFirstMediaUrl(LogoProject4Slider_COLLECTION) }}"
                                alt="" />
                        </div>

                        <div class="container">
                            <div class="row align-items-center d-none d-md-flex">
                                <div class="col-md-6 text-container text-start">
                                    <h1 class="main-title">
                                        {{ $project4_slider->main_title }}
                                        <span class="highlight">{{ $project4_slider->highlight }}</span>
                                    </h1>
                                    <h3 class="sub-title">
                                        {{ $project4_slider->subtitle }}
                                        <span id="typed-text" class="typed-text"></span>
                                    </h3>
                                    <p class="description">
                                        {{ $project4_slider->description }}
                                    </p>
                                    <div class="d-none d-md-flex align-items-center small-title-wrapper">
                                        <img class="down-right-img me-2"
                                            src="{{ $project4_slider->getFirstMediaUrl(Image3Project4Slider_COLLECTION) }}"
                                            alt="" style="width:50px ">
                                        <h4 class="small-title m-0">
                                            {{ $project4_slider->small_title }}
                                        </h4>
                                    </div>

                                </div>
                                <div class="col-md-6">
                                    <img class="dynamic-img"
                                        src="{{ $project4_slider->getFirstMediaUrl(Image1Project4Slider_COLLECTION) }}"
                                        alt="" />
                                </div>
                            </div>

                            <div class="row align-items-center d-flex flex-column text-center d-md-none">
                                <div class="col-12 text-center">
                                    <img src="{{ $project4_slider->getFirstMediaUrl(LogoProject4Slider_COLLECTION) }}"
                                        alt="3coin" class="mobile-coin">
                                </div>

                                <div class="col-12">
                                    <h1 class="mobile-title">
                                        {{ $project4_slider->main_title }}
                                        <span class="highlight">{{ $project4_slider->highlight }}</span>
                                    </h1>
                                    <h3 class="mobile-subtitle">
                                        {{ $project4_slider->subtitle }}
                                        <span id="typed-text-mobile" class="typed-text"></span>
                                    </h3>
                                    <p class="mobile-description">
                                        {{ $project4_slider->description }}
                                    </p>

                                    <div class="d-none d-md-flex align-items-center small-title-wrapper">
                                        <img class="down-right-img me-2"
                                            src="{{ $project4_slider->getFirstMediaUrl(Image3Project4Slider_COLLECTION) }}"
                                            alt="" />
                                        <h4 class="small-title m-0">
                                            {{ $project4_slider->small_title }}
                                        </h4>
                                    </div>

                                </div>

                                <div class="col-12 mt-3">
                                    <img class="dynamic-img"
                                        src="{{ $project4_slider->getFirstMediaUrl(Image1Project4Slider_COLLECTION) }}"
                                        alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <h2 class="display-5 fw-bold mt-4 mt-md-5 text-center">
        {{ __('website.Looking for a modern way to share your information?') }}
        <span class="text-threecoin" style="color: #7dbd42">
            {{ __('website.Goodbye to traditional paper cards!') }}</span>
    </h2>
    <h2 class="fs-4 fs-md-2 mt-4 mt-md-5 text-center">
        {{ __('website.With the Knot app, share your data with one touch via NFC and QR Code and always stay connected.') }}
    </h2>

    <section class="row px-4 py-4">
        <div class="row g-4">
            @foreach ($project4_section1s as $project4_section1)
                <div class="col-md-4">
                    <div class="card shadow-sm border-0 p-4 d-flex flex-row align-items-center gap-3">
                        <div>
                            <h4 class="fw-bold mb-2">{{ $project4_section1->main_title }}</h4>
                            <p class="text-muted mb-0">{{ $project4_section1->description }}</p>
                        </div>
                        {{-- <i class="fas fa-map-marker-alt fa-3x text-dark flex-shrink-0 align-self-start mt-n2"></i> --}}
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <h2 class="display-5 fw-bold mt-4 mt-md-5 text-center">
        {{ __('website.Designed with the latest technology to share your data easily and intelligently.') }}

        <br>
        <span class="text-threecoin" style="color: #7dbd42">
            {{ __('website.Seize the opportunity and be the first to keep up with the future!') }}
        </span>
    </h2>


    <div class="row px-4 py-4">
        <div class="col-md-7 order-2">
            <div class="overflow-hidden">
                <h2 class="text-color-primary font-weight-bold text-12 mb-2 pt-0 mt-0 appear-animation"
                    data-appear-animation="maskUp" data-appear-animation-delay="300">
                    {{ $project4_section2[0]->main_title }}</h2>
            </div>
            <br>
            <p class="lead appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="700">
                {{ $project4_section2[0]->description }}</p>
            <div class="row align-items-center appear-animation" data-appear-animation="fadeInUpShorter"
                data-appear-animation-delay="1000">
                <div class="col-lg-6">
                    <a href="https://wa.me/{{ Helper::getAllPhone()->whatsapp }}" class="btn btn-modern btn-primary mt-3">
                        {{ __('website.Start with us') }}</a>
                </div>
            </div>

        </div>

        <div class="col-md-5 order-md-2 mb-4 mb-lg-0 appear-animation" data-appear-animation="fadeInRightShorter">
            <img src="{{ $project4_section2[0]->getFirstMediaUrl(Project4Section2_COLLECTION) }}" class="img-fluid mb-2"
                alt="">
        </div>


        <div class="col-md-5 order-md-2 mb-4 mb-lg-0 appear-animation" data-appear-animation="fadeInRightShorter">
            <img src="{{ $project4_section2[1]->getFirstMediaUrl(Project4Section2_COLLECTION) }}" class="img-fluid mb-2"
                alt="">
        </div>
        <div class="col-md-7 order-2">
            <div class="overflow-hidden">
                <h2 class="text-color-primary font-weight-bold text-12 mb-2 pt-0 mt-0 appear-animation"
                    data-appear-animation="maskUp" data-appear-animation-delay="300">
                    {{ $project4_section2[1]->main_title }}</h2>
            </div>
            <br>
            <p class="lead appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="700">
                {{ $project4_section2[1]->description }}</p>
            <div class="row align-items-center appear-animation" data-appear-animation="fadeInUpShorter"
                data-appear-animation-delay="1000">
                <div class="col-lg-6">
                    <a href="https://wa.me/{{ Helper::getAllPhone()->whatsapp }}"
                        class="btn btn-modern btn-primary mt-3"> {{ __('website.Start with us') }}</a>
                </div>
            </div>

        </div>

    </div>

    <br>
    <br>
    @include('frontend.sections.contact_us')
@endsection


@include('frontend.pages.js_project4')