@extends('layouts.body.body-main')
@section('title','System & App Development')

@section('header')
<link rel="stylesheet" href="{{asset('/css/share.css')}}">
@endsection

@section('main-section')


<section class="banner-expertise text-center">
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="">
                    <p class="text-grey20">Application & Software Professional Services</p>
                    <p class="title-blue50">System & App Development</p>
                    <p class="text-black30 mt-5 mb-5">We create responsive web applications and sites leveraging the most robust technologies in the industry to help you boost your business</p>
                    <a href="" class="link-blue14 chev-right">Get To Know Us Better</a>
                </div>

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


<section class="banner-business">
        <div class="wrapper-desc-business">
            <p class="title-blue50">Business Software Tailored To Your Needs</p>
            <p class="text-black18 mt-4">Powerful solutions designed and created as software product meeting customer’s requirement which is return of customer’s investment within allocated budget & committed timeline.</p>
        </div>        
        <div class="wrapper-img-business">
                <img src="{{url('/img/gallery/phone.png')}}" class="img-full" alt="">
        </div>        
</section>


<section class="banner-architecture">
    
    <div class="title-architecture">
        <p class="title-blue50">Modern Architectural Approaches</p>
    </div>
    <div class="card-architect-wrapper">
        <div class="row">
            <div class="col-lg-3">
                <div class="card-architect">
                        <div class="card-arch-pos">
                            <div class="icon-card-architect">
                                <img src="{{url('img/gallery/frontend.png')}}" alt="" class="img-full">
                            </div>
                        </div>                        
                        <div class="card-arch-title">
                            <p class="title-black40">Frontend</p>
                            <hr>
                        </div>                        
                        <div class="card-arch-item ">
                            <div class="flex-start">
                                <ul class="list-service">
                                    <li class="">HTML</li>
                                    <li class="">NGINX</li>
                                    <li class="">Laravel</li>                                
                                </ul>                                
                            </div>
                        </div>           
                </div>
            </div>

            <div class="col-lg-3">
                <div class="card-architect">
                        <div class="card-arch-pos">
                            <div class="icon-card-architect">
                                <img src="{{url('img/gallery/infra.png')}}" alt="" class="img-full">
                            </div>
                        </div>                        
                        <div class="card-arch-title">
                            <p class="title-black40">Infrastructure</p>
                            <hr>
                        </div>
                        
                        <div class="card-arch-item">
                            <div class="flex-start">
                                <ul class="list-service">
                                    <li class="">Load balancer</li>
                                    <li class="">WAF</li>
                                    <li class="">Web server</li>                                
                                    <li class="">App server</li>                                
                                    <li class="">Db server</li>                                
                                    <li class="">Backup server</li>                                
                                </ul>
                                <ul class="list-service">
                                    <li class="">production storage</li>
                                    <li class="">backup storage</li>
                                    <li class="">tape library </li>                                
                                    <li class="">hypervisor</li>                                
                                    <li class="">router</li>                                
                                    <li class="">switch</li>                                
                                </ul>
                            </div>
                        </div>        
                        
                </div>
            </div>

            <div class="col-lg-3">
                <div class="card-architect">
                        <div class="card-arch-pos">
                            <div class="icon-card-architect">
                                <img src="{{url('img/gallery/backend.png')}}" alt="" class="img-full">
                            </div>
                        </div>                        
                        <div class="card-arch-title">
                            <p class="title-black40">Backend</p>
                            <hr>
                        </div>  
                        <div class="card-arch-item ">
                            <div class="flex-start">
                                <ul class="list-service">
                                    <li class="">Laravel</li>
                                    <li class="">Kubernetes</li>
                                    <li class="">Docker</li>                                
                                </ul>                                
                            </div>
                        </div>                       
                        
                </div>
            </div>

            <div class="col-lg-3">
                <div class="card-architect">
                        <div class="card-arch-pos">
                            <div class="icon-card-architect">
                                <img src="{{url('img/gallery/database.png')}}" alt="" class="img-full">
                            </div>
                        </div>                        
                        <div class="card-arch-title">
                            <p class="title-black40">Database</p>
                            <hr>
                        </div>                        
                        <div class="card-arch-item ">
                            <div class="flex-start">
                                <ul class="list-service">
                                    <li class="text-unset">PostgreSQL</li>
                                    <li class="text-unset">MySQL</li>
                                </ul>
                            </div>
                        </div>             
                </div>
            </div>
        </div>

    </div>
                
             
</section>

<style>
    .banner-dev{
        background: #bbb;
        padding: 40px 0px;
    }

    .grid-dev {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 0;
    background: lime;
}

.dev-left{

}

.dev-right{

}

.dev-wrapper{
    min-height: 1500px;
    background: red;
    position: relative;
}

.line-y{
    position: absolute;
    width: 1px;
    height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border:1px solid #19325B;
    background: #19325B;
}

.line-y {
    position: absolute;
    width: 1px;
    height: 87%;
    top: 41em;
    left: 50%;
    transform: translate(-50%,-50%);
    border: 1px solid #19325B;
    background: #19325B;
}

.dot {
    background: #19325B;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    position: absolute;
    
}

.dot-start{
    top: -4px;
    left: -5px;
}

.dot-end{
    bottom: -4px;
    left: -5px;
}

.circle-number {
    background: #5AAA46;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
    font-weight: 900;
    font-size: 30px;
    line-height: 36px;
    color: #FFFFFF;
    border-radius: 50%;
    padding: 13px 15px;
    position: absolute;
    left: -33px;
}



.card-chat-left {
    /*display: inline-block; */
    padding: 40px;
    /* border-radius: 6px; */
    /* float: right; */
    /* margin-right: 40px; */
    /* color: black; */
    background: linear-gradient(0deg, #FFFFFF, #FFFFFF), #F7F7F7;
    border: 1px solid #F2F2F2;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
    border-radius: 6px;
    position: absolute;
    left: 0;
    min-height: 320px;
    width: 560px;
}

.card-chat-right {
    /* display: inline-block; */
    /* padding: 5px 6px 8px 6px; */
    /* border-radius: 6px; */
    /* float: right; */
    /* margin-right: 40px; */
    /* color: black; */
    background: linear-gradient(0deg, #FFFFFF, #FFFFFF), #F7F7F7;
/* Gray 6 */

    border: 1px solid #F2F2F2;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    position: absolute;
    
    right: 0;
    min-height: 320px;
    width: 560px;
    padding: 40px;
}

.card-chat-left:after {
    content: "";
    position: absolute;
    margin-top: 12px;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid #fff;
    transform: rotate(90deg);
    right: -43px;
    top: 34px;
}

.card-chat-right:after {
    content: "";
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid #fff;
    border-bottom: 10px solid transparent;
    position: absolute;
    top: 40px;
    left: -50px;
    transform: rotate(90deg);
}

.s1{
    top: 2em;
    
}

.s2{
    top: 11em;
     
}

.s3{
    top: 20em;
    
}

.s4{
    top: 29em;
    
}

.s5 {
    top: 38em;
}

.cl1 {
    top: 2em;
}
.cr1{
    top: 19em;
}

.cl2{
    top: 35.5em;
}
.cr2 {
    top: 52.5em;
}
.cl3 {
    top: 69.5em;
}
.cr3{
}
.cl4{
    
}
.cr4{
}

.title-blue40{
    font-weight: 900;
font-size: 40px;
line-height: 100%;


color: #19325B;
}


</style>

<section class="banner-dev">
    <div class="container">
        <div class="row">
            <div class="col text-center">
                <p class="title-blue50">This Is How We Develop</p>
                <p class="text-black30 p-0 m-0">We provide full-cycle web development, from prototyping to design and</p>
                <p class="text-black30 p-0 m-0">implementation, then on to support and maintenance.</p>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="dev-wrapper">
                    <div class="card-chat-left cl1 dev-bg-left1">
                        <p class="text-capitalize title-blue40">Requirements <br> elicitation</p>
                        <p class="text-black18">We elicit your requirements, prepare a product specification, and design wireframes. These wireframes are later transformed into a prototype you can actually click on. Our prototypes include animations, transitions, and interactions.</p>
                    </div>

                    <div class="card-chat-right cr1">
                        <p class="">Hello</p>
                    </div>

                    <div class="card-chat-left cl2">
                        <p class="">Hello</p>
                    </div>

                    <div class="card-chat-right cr2">
                        <p class="">Hello</p>
                    </div>

                    <div class="card-chat-left cl3">
                        <p class="">Hello</p>
                    </div>

                   
                    <div class="line-y">
                        <span class="dot dot-start"></span>
                        <span class="circle-number s1">01</span>
                        <span class="circle-number s2">02</span>
                        <span class="circle-number s3">03</span>
                        <span class="circle-number s4">04</span>
                        <span class="circle-number s5">05</span>
                        <span class="dot dot-end"></span>
                    </div>
                    

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


<section class="banner-skill">
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="">
                    <p class="title-white50">Need a skillful solution provider?</p>
                    <p class="text-white18 p-0 m-0">Tell us about your needs and challenges.</p>
                    <p class="text-white18 p-0 m-0">We'll apply our broad-ranging expertise to develop the perfect solution for your business.</p>
                </div>

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

<section class="banner-same">
    <div class="grid4-fluid">
        
        <div class="left-container">
            <img src="{{url('img/banner/menu3-banner.png')}}" alt="" class="img-full">
            <div class="description">
                    <p class="title-blue50">UI & UX <br> Design</p>
                    <p class="text-blue14 mt-4 mb-4">Trusted to Innovate, design, implement & manage your IT solution</p>
                    <a href="{{route('expertise_uiux')}}" class="button-round-blue chev-right text-capitalize mt-5">Learn More</a>
            </div>
        </div>
        <div class="right-container">
            <img src="{{url('img/banner/menu2-banner.png')}}" alt="" class="img-full">
            <div class="description">
                    <p class="title-blue50">Assessment & <br> Consultancy</p>
                    <p class="text-blue14 mt-4 mb-4">Trusted to Innovate, design, implement & manage your IT solution</p>
                    <a href="{{route('expertise_consultancy')}}" class="button-round-blue chev-right text-capitalize mt-5">Learn More</a>
            </div>
        </div>
    </div>
</section>

@include('pages.visitor.share.section.banner.banner-solution')

@endsection

@section('js')


@endsection