@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="{{ asset('assets-frontend/projects/3coin.svg') }}" alt="" /> --}}
                        </div>
                        <div class="container">
                            <!-- تصميم الويب (يظل كما هو) -->
                            <div class="row align-items-center d-none d-md-flex">
                                <div class="col-md-6">
                                    <img class="dynamic-img" src="{{ asset('images/bg-mockups.webp') }}" alt="" />
                                </div>
                                <div class="col-md-6 text-container">
                                    <h1 style="font-size: 30px;font-weight: bold;font-size: 43px;margin-right: -77px">
                                        {{ $project1_slider->main_title }}
                                        <span style="color: #7dbd42;">{{ $project1_slider->highlight }}</span>

                                    </h1>
                                    <h3 style="font-size: 30px; margin-right: -77px; display: inline;">
                                        {{ $project1_slider->subtitle }} <span id="typed-text"
                                            style="color: #7dbd42;font-weight: bold;"></span>
                                    </h3>
                                    <br><br>
                                    <p style="font-size: 20px;margin-right: -77px">
                                        {{ $project1_slider->description }}
                                    </p>
                                </div>
                            </div>

                            <!-- تصميم الموبايل الجديد -->
                            <div class="row align-items-center d-flex flex-column text-center d-md-none">
                                <!-- صورة 3coin.svg -->
                                <div class="col-12 text-center">
                                    <img src="{{ asset('assets-frontend/projects/3coin.svg') }}" alt="3coin"
                                        style="max-width: 80px; margin-bottom: 15px; display: inline-block;">
                                </div>


                                <!-- العنوان والنص -->
                                <div class="col-12">
                                    <h1 style="font-size: 26px; font-weight: bold;">سكربت
                                        <span style="color: #7dbd42;"> حلول تيك</span> لتداول العملات الرقمية
                                    </h1>
                                    <h3 style="font-size: 24px;">
                                        النسخة الأكثر <span id="typed-text-mobile"
                                            style="color: #7dbd42;font-weight: bold;"></span>
                                    </h3>
                                    <p style="font-size: 18px;">ابدأ مشروعك التجاري الخاص بتبادل العملات المشفرة باستخدام
                                        منصة ثري كوين</p>
                                </div>

                                <!-- زر الواتساب -->
                                <div class="col-12">
                                    <a href="https://wa.me/+97455914133" class="btn btn-success"
                                        style="background-color:#7dbd42;font-weight: bold; border-radius: 10px;
                                        font-size: 17px; padding: 10px 20px; display: inline-block;">
                                        {{ __('website.Start with us') }}
                                    </a>
                                </div>

                                <!-- صورة bg-mockups.webp -->
                                <div class="col-12 mt-3">
                                    <img class="dynamic-img" src="{{ asset('images/bg-mockups.webp') }}" alt=""
                                        style="max-width: 100%;">
                                </div>
                            </div>
                        </div>

                        <div class="static-images">
                            <img class="down-right-img d-none d-md-block" src="{{ asset('images/aiStar.svg') }}"
                                alt="" />
                            <h4 style="font-weight: bold;margin-top: 389px;margin-left: 1107px; ">
                                {{ $project1_slider->small_title }}
                            </h4>
                        </div>
                        <div class="static-images">
                            <a href="https://wa.me/+97455914133"
                                class="btn btn-success d-block d-md-inline-block mx-auto mx-md-0"
                                style="background-color:#7dbd42;font-weight: bold;margin-top: 444px;margin-left: 1259px !important;
                                 border-radius: 10px;font-size: 17px;width: 81px;">
                                {{ __('website.Start with us') }}</a>
                        </div>
                    </div>

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



    <section class="row px-4 py-4">
        <div class="row g-4">
            <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">Easy cryptocurrency trading</h4>
                        <p class="text-muted mb-0">The Three Coin script features an efficient, secure, and fast trading
                            engine that matches orders in just seconds. This will help you continue trading and provide a
                            superior trading environment for your clients.</p>
                    </div>
                    <i class="fas fa-map-marker-alt fa-3x text-dark flex-shrink-0 align-self-start mt-n2"></i>
                </div>
            </div>
            <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">Easy cryptocurrency trading</h4>
                        <p class="text-muted mb-0">The Three Coin script features an efficient, secure, and fast trading
                            engine that matches orders in just seconds. This will help you continue trading and provide a
                            superior trading environment for your clients.</p>
                    </div>
                    <i class="fas fa-map-marker-alt fa-3x text-dark flex-shrink-0 align-self-start mt-n2"></i>
                </div>
            </div>
            <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">Easy cryptocurrency trading</h4>
                        <p class="text-muted mb-0">The Three Coin script features an efficient, secure, and fast trading
                            engine that matches orders in just seconds. This will help you continue trading and provide a
                            superior trading environment for your clients.</p>
                    </div>
                    <i class="fas fa-map-marker-alt fa-3x text-dark flex-shrink-0 align-self-start mt-n2"></i>
                </div>
            </div>
            <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">Easy cryptocurrency trading</h4>
                        <p class="text-muted mb-0">The Three Coin script features an efficient, secure, and fast trading
                            engine that matches orders in just seconds. This will help you continue trading and provide a
                            superior trading environment for your clients.</p>
                    </div>
                    <i class="fas fa-map-marker-alt fa-3x text-dark flex-shrink-0 align-self-start mt-n2"></i>
                </div>
            </div>
            <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">Easy cryptocurrency trading</h4>
                        <p class="text-muted mb-0">The Three Coin script features an efficient, secure, and fast trading
                            engine that matches orders in just seconds. This will help you continue trading and provide a
                            superior trading environment for your clients.</p>
                    </div>
                    <i class="fas fa-map-marker-alt fa-3x text-dark flex-shrink-0 align-self-start mt-n2"></i>
                </div>
            </div>
            <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">Easy cryptocurrency trading</h4>
                        <p class="text-muted mb-0">The Three Coin script features an efficient, secure, and fast trading
                            engine that matches orders in just seconds. This will help you continue trading and provide a
                            superior trading environment for your clients.</p>
                    </div>
                    <i class="fas fa-map-marker-alt fa-3x text-dark flex-shrink-0 align-self-start mt-n2"></i>
                </div>
            </div>
            <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">Easy cryptocurrency trading</h4>
                        <p class="text-muted mb-0">The Three Coin script features an efficient, secure, and fast trading
                            engine that matches orders in just seconds. This will help you continue trading and provide a
                            superior trading environment for your clients.</p>
                    </div>
                    <i class="fas fa-map-marker-alt fa-3x text-dark flex-shrink-0 align-self-start mt-n2"></i>
                </div>
            </div>
            <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">Easy cryptocurrency trading</h4>
                        <p class="text-muted mb-0">The Three Coin script features an efficient, secure, and fast trading
                            engine that matches orders in just seconds. This will help you continue trading and provide a
                            superior trading environment for your clients.</p>
                    </div>
                    <i class="fas fa-map-marker-alt fa-3x text-dark flex-shrink-0 align-self-start mt-n2"></i>
                </div>
            </div>
            <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">Easy cryptocurrency trading</h4>
                        <p class="text-muted mb-0">The Three Coin script features an efficient, secure, and fast trading
                            engine that matches orders in just seconds. This will help you continue trading and provide a
                            superior trading environment for your clients.</p>
                    </div>
                    <i class="fas fa-map-marker-alt fa-3x text-dark flex-shrink-0 align-self-start mt-n2"></i>
                </div>
            </div>

        </div>
    </section>

   
@endsection
@include('frontend.pages.js_project')