@extends('v2.layout.apps')

@section('header')
<title>Solutions - Salutica Berhad</title>
@endsection

@section('content')
<div class="clearfix"></div>
<div class="text-center solution-whiteboard">
    <h5 class="h1 text-white pt-6">Solutions</h5>
</div>
<div class='clearfix'></div>
<div class="row mt-5">
    <div class="col-md-6 col-sm-12 col-xs-12">
        @if((new \Jenssegers\Agent\Agent())->isMobile())
        <p class='pb-2 pr-2 pl-2'>
            Aenean iaculis eros euismod tellus sodales pulvinar. Aenean venenatis eros dolor, eu bibendum nibh porta
            vitae. Aliquam ultricies urna ac ipsum egestas, sed sodales felis commodo. Quisque massa nulla, dignissim
            quis venenatis at, lacinia nec nunc. Sed eget porttitor sem. Maecenas ac mollis purus. Morbi vel diam sed
            orci fringilla lobortis. Pellentesque id dapibus lectus, consequat faucibus enim. Pellentesque tristique
            consectetur hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
            mus.
            <br><br>
            Nullam ultricies malesuada velit et fermentum. Maecenas viverra, dui sit amet laoreet sagittis, justo sem
            tincidunt arcu, a ornare lacus ligula interdum purus. Pellentesque posuere molestie diam non mattis. Nullam
            massa tortor, bibendum sed turpis vestibulum, varius vehicula risus. Donec vitae leo vehicula, vestibulum
            lorem in, fringilla nisi. Morbi rhoncus in quam quis porta. Sed convallis nisi mauris, sed mollis nulla
            consectetur id.
        </p>
        @else
        <p class='pl-5 pr-2 text-right'>
            Aenean iaculis eros euismod tellus sodales pulvinar. Aenean venenatis eros dolor, eu bibendum nibh porta
            vitae. Aliquam ultricies urna ac ipsum egestas, sed sodales felis commodo. Quisque massa nulla, dignissim
            quis venenatis at, lacinia nec nunc. Sed eget porttitor sem. Maecenas ac mollis purus. Morbi vel diam sed
            orci fringilla lobortis. Pellentesque id dapibus lectus, consequat faucibus enim. Pellentesque tristique
            consectetur hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
            mus.
            <br><br>
            Nullam ultricies malesuada velit et fermentum. Maecenas viverra, dui sit amet laoreet sagittis, justo sem
            tincidunt arcu, a ornare lacus ligula interdum purus. Pellentesque posuere molestie diam non mattis. Nullam
            massa tortor, bibendum sed turpis vestibulum, varius vehicula risus. Donec vitae leo vehicula, vestibulum
            lorem in, fringilla nisi. Morbi rhoncus in quam quis porta. Sed convallis nisi mauris, sed mollis nulla
            consectetur id.
        </p>
        @endif
    </div>
    <div class="col md-6 col-sm-12 col-xs-12 text-center">
        <h3 class="pt-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut.</h3>
    </div>
</div>
<div class="clearfix mt-5"></div>
@if((new \Jenssegers\Agent\Agent())->isTablet())
<div class="card-group hoverable-solution-card-group">
    <a class="card hoverable-solution text-decoration-none" href="/design-and-development">
        <img src="/images/new-image/salutica-111.jpg" class="card-img-top solution-card-image" alt="design-development">
        <div class="card-body text-center">
            <h5 class="card-title solution-card-title">Design & Development
                <div class='clearfix'></div>
                <button class="btn btn-outline-light mt-2">Learn More</button>
            </h5>
            <p class="text-dark text-bold">Something should be discussed here I think</p>
        </div>
    </a>
    <a class="card hoverable-solution text-decoration-none" href="/supply-chain-solutions">
        <img src="/images/new-image/salutica-196.jpg" class="card-img-top solution-card-image" alt="supply-chain"
            style="filter: brightness(0.5);">
        <div class="card-body text-center">
            <h5 class="card-title solution-card-title">Supply Chain Solutions
                <div class='clearfix'></div>
                <button class="btn btn-outline-light mt-2">Learn More</button>
            </h5>
            <p class="text-dark text-bold">Something should be discussed here I think</p>
        </div>
    </a>
</div>
<div class="card-group hoverable-solution-card-group">
    <a class="card hoverable-solution text-decoration-none" href="/new-product-introduction">
        <img src="/images/new-image/salutica-102.jpg" class="card-img-top solution-card-image" alt="new-product">
        <div class="card-body text-center">
            <h5 class="card-title solution-card-title">New Product Introduction
                <div class='clearfix'></div>
                <button class="btn btn-outline-light mt-2">Learn More</button>
            </h5>
            <p class="text-dark text-bold">Something should be discussed here I think</p>
        </div>
    </a>
    <a class="card hoverable-solution text-decoration-none" href="/manufacturing">
        <img src="/images/new-image/Salutica-279.jpg" class="card-img-top solution-card-image" alt="manufacturing">
        <div class="card-body text-center">
            <h5 class="card-title solution-card-title">Manufacturing
                <div class='clearfix'></div>
                <button class="btn btn-outline-light mt-2">Learn More</button>
            </h5>
            <p class="text-dark text-bold">Something should be discussed here I think</p>
        </div>
    </a>
</div>
<div class="card-group hoverable-solution-card-group">
    <a class="card hoverable-solution text-decoration-none" href="/product-life-cycle">
        <img src="/images/new-image/Salutica-207.jpg" class="card-img-top solution-card-image" alt="after-sales">
        <div class="card-body text-center">
            <h5 class="card-title solution-card-title">After Market Services
                <div class='clearfix'></div>
                <button class="btn btn-outline-light mt-2">Learn More</button>
            </h5>
            <p class="text-dark text-bold">Something should be discussed here I think</p>
        </div>
    </a>
    <a class="card hoverable-solution text-decoration-none" href="#">
    </a>
</div>
@else
@if((new \Jenssegers\Agent\Agent())->isMobile())
<div class="card-group hoverable-solution-card-group">
    <a class="card hoverable-solution text-decoration-none" href="/design-and-development">
        <img src="/images/new-image/salutica-111.jpg" class="card-img-top solution-card-image" alt="design-development">
        <div class="card-body text-center">
            <h5 class="card-title solution-card-title">Design & Development
                <div class='clearfix'></div>
                <button class="btn btn-outline-light mt-2">Learn More</button>
            </h5>
            <p class="text-dark text-bold">Something should be discussed here I think</p>
        </div>
    </a>
    <a class="card hoverable-solution text-decoration-none" href="/supply-chain-solutions">
        <img src="/images/new-image/salutica-196.jpg" class="card-img-top solution-card-image" alt="supply-chain"
            style="filter: brightness(0.5);">
        <div class="card-body text-center">
            <h5 class="card-title solution-card-title">Supply Chain Solutions
                <div class='clearfix'></div>
                <button class="btn btn-outline-light mt-2">Learn More</button>
            </h5>
            <p class="text-dark text-bold">Something should be discussed here I think</p>
        </div>
    </a>
    <a class="card hoverable-solution text-decoration-none" href="/new-product-introduction">
        <img src="/images/new-image/salutica-102.jpg" class="card-img-top solution-card-image" alt="new-product">
        <div class="card-body text-center">
            <h5 class="card-title solution-card-title">New Product Introduction
                <div class='clearfix'></div>
                <button class="btn btn-outline-light mt-2">Learn More</button>
            </h5>
            <p class="text-dark text-bold">Something should be discussed here I think</p>
        </div>
    </a>
    <a class="card hoverable-solution text-decoration-none" href="/manufacturing">
        <img src="/images/new-image/Salutica-279.jpg" class="card-img-top solution-card-image" alt="manufacturing">
        <div class="card-body text-center">
            <h5 class="card-title solution-card-title">Manufacturing
                <div class='clearfix'></div>
                <button class="btn btn-outline-light mt-2">Learn More</button>
            </h5>
            <p class="text-dark text-bold">Something should be discussed here I think</p>
        </div>
    </a>
    <a class="card hoverable-solution text-decoration-none" href="/product-life-cycle">
        <img src="/images/new-image/Salutica-207.jpg" class="card-img-top solution-card-image" alt="after-sales">
        <div class="card-body text-center">
            <h5 class="card-title solution-card-title">After Market Services
                <div class='clearfix'></div>
                <button class="btn btn-outline-light mt-2">Learn More</button>
            </h5>
            <p class="text-dark text-bold">Something should be discussed here I think</p>
        </div>
    </a>
</div>
@else
<div class="card-group hoverable-solution-card-group">
    <a class="card hoverable-solution text-decoration-none" href="/design-and-development">
        <img src="/images/new-image/salutica-111.jpg" class="card-img-top solution-card-image" alt="design-development">
        <div class="card-body text-center">
            <h5 class="card-title solution-card-title">Design and Development
                <div class='clearfix'></div>
                <button class="btn btn-outline-light mt-2">Learn More</button>
            </h5>
            <p class="text-dark text-bold">Something should be discussed here I think</p>
        </div>
    </a>
    <a class="card hoverable-solution text-decoration-none" href="/supply-chain-solutions">
        <img src="/images/new-image/salutica-196.jpg" class="card-img-top solution-card-image" alt="supply-chain"
            style="filter: brightness(0.5);">
        <div class="card-body text-center">
            <h5 class="card-title solution-card-title">Supply Chain Solutions
                <div class='clearfix'></div>
                <button class="btn btn-outline-light mt-2">Learn More</button>
            </h5>
            <p class="text-dark text-bold">Something should be discussed here I think</p>
        </div>
    </a>
    <a class="card hoverable-solution text-decoration-none" href="/new-product-introduction">
        <img src="/images/new-image/salutica-102.jpg" class="card-img-top solution-card-image" alt="new-product">
        <div class="card-body text-center">
            <h5 class="card-title solution-card-title">New Product Introduction
                <div class='clearfix'></div>
                <button class="btn btn-outline-light mt-2">Learn More</button>
            </h5>
            <p class="text-dark text-bold">Something should be discussed here I think</p>
        </div>
    </a>
    <a class="card hoverable-solution text-decoration-none" href="/manufacturing">
        <img src="/images/new-image/Salutica-279.jpg" class="card-img-top solution-card-image" alt="manufacturing">
        <div class="card-body text-center">
            <h5 class="card-title solution-card-title">Manufacturing
                <div class='clearfix'></div>
                <button class="btn btn-outline-light mt-2">Learn More</button>
            </h5>
            <p class="text-dark text-bold">Something should be discussed here I think</p>
        </div>
    </a>
    <a class="card hoverable-solution text-decoration-none" href="/product-life-cycle">
        <img src="/images/new-image/Salutica-207.jpg" class="card-img-top solution-card-image" alt="after-sales">
        <div class="card-body text-center">
            <h5 class="card-title solution-card-title">After Market Services
                <div class='clearfix'></div>
                <button class="btn btn-outline-light mt-2">Learn More</button>
            </h5>
            <p class="text-dark text-bold">Something should be discussed here I think</p>
        </div>
    </a>
</div>
@endif
@endif

<div class='clearfix mt-5 mb-5'></div>
@endsection