Edit File - File Manager

Edit File: index.blade.php

}
    .links-spe a:hover{
        color: #23a2c8;
    }

.footer-new-img{
        width: 70px;
    }
    
 
    @media screen and (max-width : 700px) {
        .down-footer{
            justify-content: center;
        }
    }

</style>
@extends('layouts.site_layout')

@section('title')
{{$settings['site_name']}}
@endsection

@section('style')

@endsection

@section('content')
       <div class="container">
            <div class="row  site-header justify-content-center align-items-center">
                <div class="col-md  p-4">
                        <h1 class="bold">
                            {{$settings['site_title_'.app()->getLocale()]}}

</h1>
                        <br>
                        <p class="font14 color-gray" >{!! $settings['site_desc_'.app()->getLocale()] !!}
                        </p>

<div class="p-3  w-100" style="background: #fff;">
            <div class="container w-md-85 m-auto">
                <div class="row justify-content-center text-center">
                   @foreach($sponsers as $sponser)
                    <div class="col-sm-5 col-md m-1 p-2 wow animate__animated animate__backInDown" data-wow-delay=".{{$sponser->id}}s">
                    <a href="{{$sponser->url}}">
                        <img class="w-100 hover-scale" src="{{$sponser->imagePath}}" alt="">
                    </a>
                    </div>
                   @endforeach
                </div>
            </div>
        </div>

<div id="aboutUs" class="text-center mt-3 mb-3 p-3  pt-5">
            <div class="about-us">
                <div class="title-cont">
                    <h3 class=" color-gray" >
                    {{trans('site.who_are_we')}}
                    </h3>
                </div>
            </div>
            <div class="text-center pt-3 pb-3">
                <p class="mb-0">
                   {!! $settings['site_about_'.app()->getLocale()] !!}
                </p>
           </div>
        </div>

<div class="title-cont">
                <h3 >{{trans('site.marsol_advantages')}}</h3>
                <p class=" color-gray" >
                {{trans('site.marsol_advantages_desc')}}
                </p>
            </div>

<div class="container w-md-85 m-auto m-auto ">
                <div class="row ">
                    <?php
                       $index=1;
                    ?>
                    @foreach($advantages as $advantage)
                    <div class="col-sm-6 advantages-card col-md  p-2 wow animate__animated animate__backInUp" >
                        <div class="text-align  p-3 round5 shadow1" style="background: #fff;">
                            <div class=" ad-head pt-2 pb-2">
                                <span>{{$index}}</span>
{{--                                <img class="mb-2" style="width: 40px;" src="{{URL::to('assets/uploads/siteAdvantages/'.$advantage->icon)}}" alt="">--}}
                                <img class="mb-2" style="width: 40px;" src="{{$advantage->iconPath}}" alt="">
                            </div>

<div>

{{--                                <h6> {{$advantage['title_'.app()->getLocale()]}}</h6>--}}
                                <h6> {{$advantage->title}}</h6>
                                <p class="font12 color-gray">{{$advantage['desc_'.app()->getLocale()]}}</p>

</div>
                        </div>
                    </div>
                    <?php
                       $index++;
                    ?>
                    @endforeach

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

<?php
             $count=1;
            ?>
           @foreach($steps as $step)
              @if($count % 2 != 0)

@if ($loop->last)
                    
                      <div class=" pl-4 pr-4 pb-0 pt-0" >
                            <div class="row">
                                <div class="col-md order-2 order-md-1 img-parent ">
                                    <img src="{{URL::to('site/imgs/bg/rectTranspatent.png')}}" class="bg-img w-100" alt="">
                                    <img src="{{$step->image_path}}" class="w-50 bg-img2" alt="">
                                </div>
                                <div class="col-md d-flex order-1 order-md-2  align-items-center p-3 p-md-5 ">
                                    <div>
                                       <p class="p2">{{trans("site.order_steps")}}</p>
                                        <h2>{{$step['title_'.app()->getLocale()]}}</h2>
                                        <p class="mt-3">{{$step['desc_'.app()->getLocale()]}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                @else
                    
                    <div class=" pl-4 pr-4 pb-0 pt-0" >
                                <div class="row">
                                    <div class="col-md order-2 order-md-1 img-parent ">
                                        <img src="{{URL::to('site/imgs/bg/rectTranspatent.png')}}" class="bg-img w-100" alt="">
                                        <img src="{{$step->image_path}}" class="w-50 bg-img2" alt="">
                                    </div>
                                    <div class="col-md d-flex order-1 order-md-2  align-items-center p-3 p-md-5 ">
                                        <div>
                                        <p class="p2">{{trans("site.order_steps")}}</p>
                                            <h2>{{$step['title_'.app()->getLocale()]}}</h2>
                                            <p class="mt-3">{{$step['desc_'.app()->getLocale()]}}</p>
                                        </div>
                                    </div>
                                </div>
                    </div>
                        <div class="line-home d-none d-md-flex w-100">
                            <img src="{{URL::to('site/imgs/icons/line1.png')}}" alt="">
                        </div>
                @endif
                @else
                @if ($loop->last)
                    
                    <div class=" pl-4 pr-4 pb-0 pt-0" >
                                <div class="row">
                                    <div class="col-md d-flex order-1 order-md-1 align-items-center p-3 p-md-5 ">
                                        <div>
                                            <p class="p2">{{trans("site.order_steps")}}</p>
                                            <h2>{{$step['title_'.app()->getLocale()]}}</h2>
                                            <p class="mt-3">{{$step['desc_'.app()->getLocale()]}}</p>
                                       </div>
                                    </div>
                                    <div class="col-md img-parent  order-2 order-md-1">
                                        <img src="{{URL::to('site/imgs/bg/rectTranspatent.png')}}" class="bg-img w-100" alt="">
                                        <img src="{{$step->image_path}}" class="w-50 bg-img2" alt="">
                                    </div>
                                </div>
                        </div>
                @else
                   
                        <div class=" pl-4 pr-4 pb-0 pt-0" >
                                <div class="row">
                                    <div class="col-md d-flex order-1 order-md-1 align-items-center p-3 p-md-5 ">
                                        <div>
                                            <p class="p2">{{trans("site.order_steps")}}</p>
                                            <h2>{{$step['title_'.app()->getLocale()]}}</h2>
                                            <p class="mt-3">{{$step['desc_'.app()->getLocale()]}}</p>
                                       </div>
                                    </div>
                                    <div class="col-md img-parent  order-2 order-md-1">
                                        <img src="{{URL::to('site/imgs/bg/rectTranspatent.png')}}" class="bg-img w-100" alt="">
                                        <img src="{{$step->image_path}}" class="w-50 bg-img2" alt="">
                                    </div>
                                </div>
                         </div>

<div class="line-home d-none d-md-flex w-100">
                            <img src="{{URL::to('site/imgs/icons/line2.png')}}" alt="">
                        </div>
                @endif
              @endif
                <?php
                $count++;
                ?>
            @endforeach

{{--            <div class="p-3 mt-3">--}}
{{--                <div class="container  w-md-75 join-us-cont p-3">--}}
{{--                    <canvas  class="d-none top-corner d-md-block " id="bgCanvas" ></canvas>--}}
{{--                    <div class="row align-items-end content-ma">--}}
{{--                        <div class="col-md p-3 p-md-4 getHeight ">--}}
{{--                            <h2 class="">{{trans('site.join_as_delegate')}}</h2>--}}
{{--                            <p class="mt-4 mb-4">--}}
{{--                            {{$settings['join_delegate_'.app()->getLocale()]}}--}}
{{--                            </p>--}}
{{--                            <a href="{{route('delegate_join_request.login')}}"class="button2 font12">--}}
{{--                                {{trans('site.show_more')}}--}}
{{--                                <i class="fa ml-2 mr-2 fa-arrow-left dir-icon"></i>--}}
{{--                            </a>--}}
{{--                        </div>--}}
{{--                        <div class="col-md p-2 d-flex justify-content-center ">--}}
{{--                            <img src="{{URL::to('site/imgs/icons/car-phone.png')}}" style="max-width: 350px;" alt="">--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--            --}}
            
             <div class="p-3 mt-3" >
                <div class="container  w-md-75 join-us-cont p-3"  >
                     <canvas  class="d-none top-corner d-md-block " id="bgCanvas" ></canvas>
                    <div class="row align-items-end content-ma">
                        <div class="col-md p-3 p-md-4 getHeight">
                            <h2 class="" >{{awtTrans('أنظم الينا كأسر منتجة - مقدم خدمة')}}</h2>
                            <p class="mt-4 mb-4" style="color:black;">
                            {{awtTrans('أنظم الينا كأسر منتجة - مقدم خدمة')}}
                            </p>
                            <a href="{{route('stores_dashboard.get_register')}}"class="button2 font12">
                                {{trans('site.show_more')}}
                                <i class="fa ml-2 mr-2 fa-arrow-left dir-icon"></i>
                            </a>
                        </div>
                        <div class="col-md p-2 d-flex justify-content-center ">
                            <img src="{{URL::to('site/imgs/icons/car-phone.png')}}" style="max-width: 200px;margin-right: 195px;" alt="">
                        </div>
                    </div>
                </div>
            </div>

<div class="home-phone-slider text-center pt-5" style="height: 100vh">

<div class="title-cont">
                        <h3 >{{trans('site.app_pages')}}</h3>
                        <p class=" color-gray" >      {{$settings['app_pages_desc_'.app()->getLocale()]}} </p>
                    </div>
                    
                    <div class="swiper mySwiper">
                        <div class="device-cont" >
                            <img src="{{URL::to('site/imgs/icons/device.png')}}" alt="">
                        </div>
                        <div style="cursor:grab;" class="swiper-wrapper">
                            @foreach($pages as $page)
                                <div class="swiper-slide ">
                                    {{--                                <img src="{{URL::to('assets/uploads/sitePages/'.$page->image)}}" alt="">--}}
                                    <img src="{{$page->image_path}}" alt="">
                                </div>
                            @endforeach

</div>

</div>
                </div >

<div id="statistics" class="p-3  pt-5 statistics">
                <div class="title-cont text-center">
                    <h3 ></h3>
                    <p class=" color-gray" > {{$settings['app_statistics_desc_'.app()->getLocale()]}}</p>
                </div>

<div class="container  p-3 mb-3">
                    <div class=" row  counters-cont mb-5">
                        <div class="col-sm-5 text-center col-md m-2 p-3 ">
                            <h2 class="color1" ><span id="count1" >{{$users}}</span> <span>+</span> </h2>
                            <h5>{{trans('site.users_count')}}</h5>
                        </div>

<div class="col-sm-5 text-center col-md m-2 p-3 ">
                            <h2 class="color1" ><span id="count2" >{{$delegates}}</span> <span>+</span> </h2>
                            <h5>{{trans('site.delegates_count')}}</h5>
                        </div>

<div class="col-sm-5 text-center col-md m-2 p-3 ">
                            <h2 class="color1" ><span id="count3" >{{$stores}}</span> <span>+</span> </h2>
                            <h5>{{trans('site.stores_count')}}</h5>
                        </div>

<div class="col-sm-5 text-center col-md m-2 p-3 ">
                            <h2 class="color1" ><span id="count4" >{{$settings['downloads']}}</span> <span>+</span> </h2>
                            <h5>{{trans('site.downloads_count')}}</h5>
                        </div>
                    </div>
                </div>
            </div>

</div>
            <div class="endfooter">

<div class="container ">
               <div class="row align-items-center">
                   <div class="col-8 d-none d-md-block ">
                       <div class="row">
                           <div class="col-2 text-center">
                               <a href="{{route('site.index')}}"><img src="{{URL::to('assets/uploads/settings/'.$settings['logo'])}}" style="width: 36px;" alt=""></a>
                           </div>
                           <div class="col  d-inline-flex align-items-center justify-content-center">
                               <div class="">
                                   <a class="nav-button" href="{{route('site.index')}}">{{trans('site.Home')}}</a>
                                   <a onclick="scrollFunction4()"  class="nav-button" href="#">{{trans('site.who_are_we')}}</a>
                                   <a onclick="scrollFunction1()" class="nav-button" href="#">{{trans('site.advantages')}}</a>
                                   <a onclick="scrollFunction2()" class="nav-button" href="#">{{trans('site.order_steps')}}</a>
                                   <a onclick="scrollFunction3()" class="nav-button" href="#"> {{trans('site.contact_us')}}</a>
                               </div>
                           </div>
                       </div>
                   </div>
                   <div class="col text-center">
                       @foreach($socials as $social)
                           {{--                            <a href="{{$social->link}}" class="footer-link"><img src="{{URL::to('assets/uploads/socials'.$social->image)}}" alt=""></a>--}}
                           <a href="{{$social->link}}" class="footer-link"><img src="{{$social->image_path}}" alt=""></a>
                       @endforeach
                   </div>
               </div>
               <div class="down-footer">
                   <div class="right-spe">
                       <a href="https://aait.sa/" target="_blank"><img src="public/Images/awamer-logo.png" alt="footer-logo" class="footer-new-img" /></a>
                       <div class="links-spe">
                           <a href="https://aait.sa/%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%A7%D9%84%D9%85%D9%88%D8%A7%D9%82%D8%B9" target="_blank">تصميم مواقع</a> /
                           <a href="https://aait.sa/%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D8%AA%D8%B7%D8%A8%D9%8A%D9%82%D8%A7%D8%AA-%D8%A7%D9%84%D8%AC%D9%88%D8%A7%D9%84" target="_blank">تصميم تطبيقات</a> /
                           <a href="https://aait.sa/%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%85%D8%AA%D8%AC%D8%B1-%D8%A7%D9%84%D9%83%D8%AA%D8%B1%D9%88%D9%86%D9%8A" target="_blank">تصميم متاجر</a>
                       </div>
                   </div>

</div>
           </div>
       </div>
@endsection
@section('scripts')

function scrollFunction2() {
        let e = document.getElementById("steps");
        e.scrollIntoView({
          block: 'start',
          behavior: 'smooth',
          inline: 'start'
        });
      }

<script>
        var swiper = new Swiper(".mySwiper", {
            slidesPerView: 5,
            spaceBetween: 30,
            loop : true,
            centeredSlides : true,
            autoplay: {
                delay: 2000,
            },
            breakpoints: {
                300: {
                    slidesPerView: 1,
                    spaceBetween: 20
                },
                810: {
                    slidesPerView: 4,
                    spaceBetween: 20
                },
                1200: {
                    slidesPerView: 5,
                    spaceBetween: 30
                }
            },

});
    </script>

// class BackgroundElement{
        //     constructor(ctx ){
        //         this.x = Math.floor(Math.random() * (canvas.width - 51)) + 1;
        //         this.y = Math.floor(Math.random() * (canvas.height - 51)) + 1;
        //         this.ctx = ctx;
        //         this.xAdder = .7 * adderSign[Math.floor((Math.random() + .5) * 1)];
        //         this.yAdder = .7 * adderSign[Math.floor((Math.random() + .5) * 1)];
        //     }

//     draw(){

//         this.ctx.beginPath();
        //         this.ctx.fillStyle = "#ffffff11";
        //         this.ctx.arc(this.x ,this.y ,80 ,0 ,Math.PI * 2);
        //         this.ctx.fill();
        //         this.ctx.closePath();
        //         this.ctx.beginPath();
        //         this.ctx.fillStyle = '#FFB72B';
        //         this.ctx.arc(canvas.width - 25 , 0 ,50 ,0 ,Math.PI * 2);
        //         this.ctx.fill();
        //         this.ctx.closePath();
        //     }

//     update(){
        //         if(this.x < -50 || this.x > canvas.width + 50){
        //             this.xAdder *= -1;
        //         }

//         if(this.y < -50 || this.y > canvas.height + 50){
        //             this.yAdder *= -1;
        //         }

//         this.x += this.xAdder;
        //         this.y += this.yAdder;
        //         this.draw();
        //     }
        // }

// const adderSign = [1 ,-1];
        // ////////
        // const canvas = document.querySelector('#bgCanvas');
        
        // let cWidth = 0 ,cHeight = 0;
        // ctx = canvas.getContext('2d');

// function setOffsets(){
        //     cWidth = $('.join-us-cont').width() + 30;
        //     cHeight = $('.getHeight').height() + 50;
        //     canvas.width = cWidth ;
        //     canvas.height = cHeight;
        // }
        // setOffsets();

// window.onresize = setOffsets;

const canvass = document.querySelectorAll('#bgCanvas');
        canvass.forEach((el) => {
              let cWidth = 0 ,cHeight = 0;
                ctx = el.getContext('2d');
                class BackgroundElement{
            constructor(ctx ){
                this.x = Math.floor(Math.random() * (el.width - 51)) + 1;
                this.y = Math.floor(Math.random() * (el.height - 51)) + 1;
                this.ctx = ctx;
                this.xAdder = .7 * adderSign[Math.floor((Math.random() + .5) * 1)];
                this.yAdder = .7 * adderSign[Math.floor((Math.random() + .5) * 1)];
            }

draw(){

this.ctx.beginPath();
                this.ctx.fillStyle = "#ffffff11";
                this.ctx.arc(this.x ,this.y ,80 ,0 ,Math.PI * 2);
                this.ctx.fill();
                this.ctx.closePath();
                this.ctx.beginPath();
                this.ctx.fillStyle = '#FFB72B';
                this.ctx.arc(canvas.width - 25 , 0 ,50 ,0 ,Math.PI * 2);
                this.ctx.fill();
                this.ctx.closePath();
            }

update(){
                if(this.x < -50 || this.x > el.width + 50){
                    this.xAdder *= -1;
                }

if(this.y < -50 || this.y > el.height + 50){
                    this.yAdder *= -1;
                }

this.x += this.xAdder;
                this.y += this.yAdder;
                this.draw();
            }
        }

const adderSign = [1 ,-1];
                function setOffsets(){
                    cWidth = $('.join-us-cont').width() + 30;
                    cHeight = $('.getHeight').height() + 50;
                    el.width = cWidth ;
                    el.height = cHeight;
                }
                 setOffsets();
                 window.onresize = setOffsets;

})
     
      
        
        let bgImgs = [];

for(let i = 0 ;i < 8 ; i++){
            bgImgs.push( new BackgroundElement(ctx) );
        }

//// loop on the images and run the update function
        function bgAnimate(){
            requestAnimationFrame(bgAnimate);
            ctx.clearRect(0 ,0 ,window.innerWidth ,window.innerHeight);
            if(bgImgs.length > 0){
                for(let i = 0 ;i < bgImgs.length ;i++){
                    bgImgs[i].update();
                }
            }
        }
        bgAnimate();

</script>
@endsection

Back to File Manager