@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 text-center">
        <h2 class='text-royal'>
            <strong>Solutions We Offer</strong>
        </h2>
        <h2>Vertically Integrated design, engineering and manufacturing <br>support
            to <span class="text-danger"><strong>your most visionary products.</strong></span>
        </h2>
        <p class='pl-5 pr-5 text-justify'>
            <br>
            For more than three decades, Salutica has helped many world class brands turn their creatively designed products
            into reality and successfully launched in global markets. Salutica works intimately with your engineering team
            during product development lifecycle. We focus on your design needs, provide simple and reliable solutions for
            complexity of products leveraging on our in-house expertise and manufacturing solutions.
        </p>
    </div>
    <div class="col md-6 col-sm-12 col-xs-12 text-center">
        <h6 class="text-black">
            <br>
            <strong>Best-in-Class Manufacturing Services.&nbsp;&nbsp;&nbsp;&nbsp;Scalable and Customized Solutions.&nbsp;&nbsp;&nbsp;&nbsp;Integrated Engineering.</strong>
        </h6>
    </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 and Development
                <div class='clearfix'></div>
                <button class="btn btn-outline-light mt-2">Learn More</button>
            </h5>
            <p class="text-dark text-bold"></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"></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"></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"></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">Product Life Cycle
                <div class='clearfix'></div>
                <button class="btn btn-outline-light mt-2">Learn More</button>
            </h5>
            <p class="text-dark text-bold"></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 and Development
                <div class='clearfix'></div>
                <button class="btn btn-outline-light mt-2">Learn More</button>
            </h5>
            <p class="text-dark text-bold"></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"></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"></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"></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">Product Life Cycle
                <div class='clearfix'></div>
                <button class="btn btn-outline-light mt-2">Learn More</button>
            </h5>
            <p class="text-dark text-bold"></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"></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"></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"></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"></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">Product Life Cycle
                <div class='clearfix'></div>
                <button class="btn btn-outline-light mt-2">Learn More</button>
            </h5>
            <p class="text-dark text-bold"></p>
        </div>
    </a>
</div>
@endif
@endif

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