@extends('layouts.landing', ['title' => 'Blog Single Post v.2'])

@section('content')
    @include('layouts.partials/offcanvas')

    @include('layouts.partials/navbar', ['wishlist' => true])

    <!-- Page warpper -->
    <main class="content-wrapper">

        <!-- Post content + Sidebar sharing -->
        <section class="container pb-5 mb-2 mb-md-3 mb-lg-4 mb-xl-5">
            <div class="row">
                <div class="col-lg-8 offset-lg-2">
                    <!-- Breadcrumb -->
                    <nav class="pt-3 my-3 my-md-4" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'electronics']) }}">Home</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('second', ['blog', 'grid-v1']) }}">Blog</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Single post v.2</li>
                        </ol>
                    </nav>

                    <!-- Post title -->
                    <h1 class="h3 mb-4">Payments made easy: How new technology will affect emerging E-commerce industry
                        worldwide?</h1>

                    <!-- Post meta -->
                    <div class="nav align-items-center gap-2 border-bottom pb-4 mt-n1 mb-4">
                        <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Tech news</a>
                        <hr class="vr my-1 mx-1">
                        <span class="text-body-tertiary fs-xs">July 16, 2024</span>
                    </div>
                </div>
            </div>
            <div class="row">

                <!-- Post content -->
                <div class="col-lg-8 offset-lg-2">
                    <p>The rise of technology has had a significant impact on the way we live our lives, and the world of
                        E-commerce is no exception. As technology continues to evolve, it is changing the way we make
                        payments, and this is having a significant impact on the E-commerce industry worldwide.</p>
                    <figure class="figure w-100 py-3 py-md-4 mb-3">
                        <div class="ratio" style="--cz-aspect-ratio: calc(599 / 856 * 100%)">
                            <img src="/img/blog/post/main.jpg" class="rounded-4" alt="Image">
                        </div>
                        <figcaption class="figure-caption fs-sm pt-2">Image source Unsplash.com</figcaption>
                    </figure>
                    <p>One of the biggest trends in the E-Commerce industry is the rise of mobile payments. With the
                        increasing popularity of smartphones, consumers are now able to make payments quickly and easily
                        using mobile payment apps. This has made it easier for consumers to shop online, as they no longer
                        have to enter their credit card information every time they make a purchase.</p>
                    <p>Another trend that is shaping the E-Commerce industry is the rise of cryptocurrency. Cryptocurrency
                        is a digital currency that uses encryption techniques to regulate the generation of units of
                        currency and verify the transfer of funds. This technology has the potential to revolutionize the
                        way we make payments, as it provides a secure and decentralized way to transfer funds.</p>
                    <h2 class="h5 pt-3 pt-md-4 mb-md-4">Mobile payments, cryptocurrency and AI</h2>
                    <p>In addition to mobile payments and cryptocurrency, there are other technologies that are shaping the
                        future of E-Commerce. For example, biometric authentication is becoming more prevalent, and this
                        technology could make it easier for consumers to make payments securely without having to enter a
                        password.</p>
                    <ul class="py-2">
                        <li>The use of artificial intelligence (AI) is also becoming more common in the E-Commerce industry.
                        </li>
                        <li>AI can be used to personalize the shopping experience for consumers.</li>
                        <li>Cryptocurrency adoption reduces transaction fees compared to traditional credit card payment.
                        </li>
                        <li>Mobile payments simplifies the checkout process, leading to higher conversion rates as customers
                            can pay anytime, anywhere.</li>
                    </ul>
                    <p>All of these technologies have the potential to make payments easier and more secure, which is good
                        news for both consumers and merchants. However, it is important to note that there are still
                        challenges to overcome, such as security and privacy concerns, as well as the need for widespread
                        adoption of these new technologies.</p>
                    <h2 class="h5 pt-3 pt-md-4 mb-md-4">Technologies continue to evolve</h2>
                    <p>The e-commerce industry stands at the forefront of technological evolution, constantly adapting and
                        growing with every new wave of innovation. In recent years, three major technological advancements
                        have significantly impacted this dynamic sector: mobile payments, cryptocurrency, and Artificial
                        Intelligence (AI).</p>

                    <!-- Slider -->
                    <div class="position-relative py-3 py-md-4 px-5 mb-3">

                        <!-- External slider prev/next buttons -->
                        <button type="button" id="prev"
                            class="btn btn-icon btn-outline-secondary rounded-circle animate-slide-start position-absolute top-50 start-0 translate-middle-y mt-n3"
                            aria-label="Prev">
                            <i class="ci-chevron-left fs-lg animate-target"></i>
                        </button>
                        <button type="button" id="next"
                            class="btn btn-icon btn-outline-secondary rounded-circle animate-slide-end position-absolute top-50 end-0 translate-middle-y mt-n3"
                            aria-label="Next">
                            <i class="ci-chevron-right fs-lg animate-target"></i>
                        </button>

                        <div class="swiper px-3"
                            data-swiper='{
                "effect": "fade",
                "loop": true,
                "pagination": {
                  "el": ".swiper-pagination",
                  "clickable": true
                },
                "navigation": {
                  "prevEl": "#prev",
                  "nextEl": "#next"
                }
              }'>
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="ratio" style="--cz-aspect-ratio: calc(505 / 728 * 100%)">
                                        <img src="/img/blog/post/slide01.jpg" class="rounded-4" alt="Image">
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="ratio" style="--cz-aspect-ratio: calc(505 / 728 * 100%)">
                                        <img src="/img/blog/post/slide02.jpg" class="rounded-4" alt="Image">
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="ratio" style="--cz-aspect-ratio: calc(505 / 728 * 100%)">
                                        <img src="/img/blog/post/slide03.jpg" class="rounded-4" alt="Image">
                                    </div>
                                </div>
                            </div>

                            <!-- Pagination (Bullets) -->
                            <div class="swiper-pagination position-static mt-3"></div>
                        </div>
                    </div>

                    <p>Mobile payments have revolutionized the e-commerce landscape by offering unparalleled convenience and
                        speed. With just a few taps on a smartphone, consumers can complete transactions anytime and
                        anywhere, bypassing the traditional hassles of cash or card payments.</p>
                    <p>Cryptocurrency has emerged as a potent force, challenging conventional financial systems and offering
                        a new paradigm for online transactions. With its decentralized nature and robust encryption,
                        cryptocurrencies provide a level of security and anonymity previously unavailable to online
                        shoppers.</p>

                    <!-- Quotation -->
                    <figure class="py-3 py-md-4">
                        <blockquote class="blockquote">
                            <p>This technology has the potential to revolutionize the way we make payments, as it provides a
                                secure and decentralized way to transfer funds.</p>
                        </blockquote>
                        <figcaption class="blockquote-footer mb-0">Victor Blance, CEO AsiaGolf</figcaption>
                    </figure>

                    <p>Perhaps the most transformative of all, AI has begun to personalize the online shopping experience in
                        unprecedented ways. Through data analysis and machine learning, AI can predict user preferences,
                        tailor recommendations, and offer customer service through intelligent chatbots. This not only
                        enhances the user experience but also increases efficiency and sales for e-commerce businesses.
                        Furthermore, AI is instrumental in fraud detection and prevention, using pattern recognition to
                        identify and combat fraudulent activities.</p>
                    <h2 class="h5 pt-3 pt-md-4 mb-md-4">Conclusion</h2>
                    <p>As these technologies continue to evolve and interweave, the future of e-commerce looks not only more
                        digital but also more secure, personalized, and accessible. The implications of these advancements
                        extend beyond just consumer convenience, heralding a new era of digital commerce that is as exciting
                        as it is unpredictable. The industry must stay agile and forward-thinking to harness these
                        technologies' full potential and navigate the challenges they bring.</p>

                    <!-- Tags + Sharing -->
                    <div
                        class="d-sm-flex align-items-center justify-content-between py-4 py-md-5 mt-n2 mt-md-n3 mb-2 mb-sm-3 mb-md-0">
                        <div class="d-flex flex-wrap gap-2 mb-4 mb-sm-0 me-sm-4">
                            <a class="btn btn-outline-secondary px-3 mt-1 me-1" href="#!">E-commerce</a>
                            <a class="btn btn-outline-secondary px-3 mt-1 me-1" href="#!">Crypto</a>
                            <a class="btn btn-outline-secondary px-3 mt-1 me-1" href="#!">AI</a>
                            <a class="btn btn-outline-secondary px-3 mt-1 me-1" href="#!">Payments</a>
                        </div>

                        <!-- Sharing visible on screens < 992px wide (lg breakpoint) -->
                        <div class="d-flex d-lg-none align-items-center gap-2">
                            <div class="text-body-emphasis fs-sm fw-medium">Share:</div>
                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
                                data-bs-toggle="tooltip"
                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
                                title="X (Twitter)" aria-label="Follow us on X">
                                <i class="ci-x"></i>
                            </a>
                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
                                data-bs-toggle="tooltip"
                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
                                title="Facebook" aria-label="Follow us on Facebook">
                                <i class="ci-facebook"></i>
                            </a>
                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
                                data-bs-toggle="tooltip"
                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
                                title="Telegram" aria-label="Follow us on Telegram">
                                <i class="ci-telegram"></i>
                            </a>
                        </div>
                    </div>

                    <!-- Post navigation -->
                    <div class="border-top pt-3 pt-md-4">
                        <div class="nav flex-nowrap align-items-center justify-content-between gap-4 pt-3">
                            <a class="nav-link flex-wrap flex-sm-nowrap justify-content-center position-relative w-50 p-0"
                                href="#!" style="max-width: 330px">
                                <div class="d-flex align-items-center mb-2 mb-sm-0">
                                    <i class="ci-chevron-left fs-xl ms-n3 ms-sm-n1 me-2"></i>
                                    <div class="ratio flex-shrink-0"
                                        style="width: 86px; --cz-aspect-ratio: calc(64 / 86 * 100%)">
                                        <img src="/img/blog/post/nav01.jpg" class="rounded-2" alt="Image">
                                    </div>
                                </div>
                                <div
                                    class="h6 fs-sm hover-effect-underline stretched-link text-center text-sm-start mb-0 ps-3">
                                    How modern technology builds communities</div>
                            </a>
                            <a class="nav-link flex-wrap flex-sm-nowrap justify-content-center position-relative w-50 p-0"
                                href="#!" style="max-width: 330px">
                                <div class="d-flex align-items-center order-sm-2 mb-2 mb-sm-0">
                                    <div class="ratio flex-shrink-0"
                                        style="width: 86px; --cz-aspect-ratio: calc(64 / 86 * 100%)">
                                        <img src="/img/blog/post/nav02.jpg" class="rounded-2" alt="Image">
                                    </div>
                                    <i class="ci-chevron-right fs-xl me-n3 me-sm-n1 ms-2"></i>
                                </div>
                                <div
                                    class="h6 fs-sm hover-effect-underline stretched-link text-center text-sm-end order-sm-1 mb-0 pe-3">
                                    Transform your home into a smart hub with the latest IoT</div>
                            </a>
                        </div>
                    </div>
                </div>


                <!-- Sharing sticky sidebar visible on screens > 991px wide (lg breakpoint) -->
                <aside class="col-lg-2 d-none d-lg-block" style="margin-top: -115px">
                    <div class="sticky-top" style="padding-top: 115px">
                        <div class="d-flex flex-column align-items-center gap-2">
                            <div class="text-body-emphasis fs-sm fw-medium">Share:</div>
                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
                                data-bs-toggle="tooltip" data-bs-placement="left"
                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
                                title="X (Twitter)" aria-label="Follow us on X">
                                <i class="ci-x"></i>
                            </a>
                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
                                data-bs-toggle="tooltip" data-bs-placement="left"
                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
                                title="Facebook" aria-label="Follow us on Facebook">
                                <i class="ci-facebook"></i>
                            </a>
                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
                                data-bs-toggle="tooltip" data-bs-placement="left"
                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-body p-0"></div></div>'
                                title="Telegram" aria-label="Follow us on Telegram">
                                <i class="ci-telegram"></i>
                            </a>
                        </div>
                    </div>
                </aside>
            </div>
        </section>


        <!-- Related articles that turn into slider on screens < 992px wide (lg breakpoint) -->
        <section class="container pb-5 mb-1 mb-sm-2 mb-md-3 mb-lg-4 mb-xl-5">
            <h2 class="h3 text-center pb-2 pb-sm-3">Related articles</h2>
            <div class="swiper"
                data-swiper='{
          "slidesPerView": 1,
          "spaceBetween": 24,
          "pagination": {
            "el": ".swiper-pagination",
            "clickable": true
          },
          "breakpoints": {
            "500": {
              "slidesPerView": 2
            },
            "900": {
              "slidesPerView": 3
            }
          }
        }'>
                <div class="swiper-wrapper">

                    <!-- Article -->
                    <article class="swiper-slide">
                        <a class="ratio d-flex hover-effect-scale rounded overflow-hidden" href="#!"
                            style="--cz-aspect-ratio: calc(305 / 416 * 100%)">
                            <img src="/img/blog/grid/v1/07.jpg" class="hover-effect-target" alt="Image">
                        </a>
                        <div class="pt-4">
                            <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
                                <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">IoT</a>
                                <hr class="vr my-1 mx-1">
                                <span class="text-body-tertiary fs-xs">August 23, 2024</span>
                            </div>
                            <h3 class="h5 mb-0">
                                <a class="hover-effect-underline" href="#!">Connecting the dots: How IoT technology
                                    is transforming everyday life</a>
                            </h3>
                        </div>
                    </article>

                    <!-- Article -->
                    <article class="swiper-slide">
                        <a class="ratio d-flex hover-effect-scale rounded overflow-hidden" href="#!"
                            style="--cz-aspect-ratio: calc(305 / 416 * 100%)">
                            <img src="/img/blog/grid/v1/08.jpg" class="hover-effect-target" alt="Image">
                        </a>
                        <div class="pt-4">
                            <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
                                <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Buying guides</a>
                                <hr class="vr my-1 mx-1">
                                <span class="text-body-tertiary fs-xs">August 18, 2024</span>
                            </div>
                            <h3 class="h5 mb-0">
                                <a class="hover-effect-underline" href="#!">How to find the best deals and make
                                    secure transactions online</a>
                            </h3>
                        </div>
                    </article>

                    <!-- Article -->
                    <article class="swiper-slide">
                        <a class="ratio d-flex hover-effect-scale rounded overflow-hidden" href="#!"
                            style="--cz-aspect-ratio: calc(305 / 416 * 100%)">
                            <img src="/img/blog/grid/v1/10.jpg" class="hover-effect-target" alt="Image">
                        </a>
                        <div class="pt-4">
                            <div class="nav align-items-center gap-2 pb-2 mt-n1 mb-1">
                                <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Gaming</a>
                                <hr class="vr my-1 mx-1">
                                <span class="text-body-tertiary fs-xs">July 27, 2024</span>
                            </div>
                            <h3 class="h5 mb-0">
                                <a class="hover-effect-underline" href="#!">Immersive worlds: A dive into the latest
                                    VR gear and experiences</a>
                            </h3>
                        </div>
                    </article>
                </div>

                <!-- Pagination (Bullets) -->
                <div class="swiper-pagination position-static mt-4"></div>
            </div>
        </section>
    </main>
    
    @include('layouts.partials/footer')
@endsection

@section('scripts')    
@endsection
