@extends('v2.layout.apps')

@section('content')
<img src="/images/salutica04.jpg" class="d-block w-100" style="filter:brightness(0.8)" alt="salutica">
<div class="col d-flex justify-content-center">
    <div class="card homepage-card">
        <div class='card-body text-center text-white'>
            @if((new \Jenssegers\Agent\Agent())->isTablet())
            <h3 class="card-title text-shadow-white">
                One Stop Vertically Integrated Solutions
            </h3>
            @else
            @if((new \Jenssegers\Agent\Agent())->isMobile())
            <h5 class="card-title text-shadow-white">
                One Stop Vertically Integrated Solutions
            </h5>
            @else
            <h1 class="card-title text-shadow-white">
                One Stop Vertically Integrated Solutions
            </h1>
            @endif
            @endif
            <p class="card-text text-shadow-white" style="font-size: 110%">
                Our strong emphasis on product quality and reliability has won accolades from our customers and helped
                them achieve demanding requirements from their end-customers.<br>
                Our relentless effort to enhance knowledge and upgrade facilities enabled us to keep up with
                technological requirements to produce the latest products and gadgets.
            </p>
        </div>
    </div>
</div>
<div class="col d-flex justify-content-center" style="background-color: #1f2020ff">
    <div class="w-100 container text-center mt-5 mb-5">
        <div class="mt-2 mb-2">
            <h1 class="card-title text-shadow-white">
                <strong>What We Do</strong>
            </h1>
        </div>
    </div>
</div>
<!-- Tablet View -->
@if((new \Jenssegers\Agent\Agent())->isTablet())
<div class='w-100 card-group mouse-over-card'>
    <div class='card feature-container-one feature-container'>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <h2 class="text-center text-shadow-white">Design and Development</h2>
        </div>
        <div class="clearfix mt-3"></div>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <a class="btn btn-royal w-25" href="/design">Learn More</a>
        </div>
    </div>
    <div class='card feature-container-two feature-container'>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <h2 class="text-center text-shadow-white">Surface Treatment</h2>
        </div>
        <div class="clearfix mt-3"></div>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <a class="btn btn-royal w-25" href="/surface-treatment">Learn More</a>
        </div>
    </div>
</div>
<div class='w-100 card-group mouse-over-card'>
    <div class='card feature-container-three'>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <h2 class="text-center text-shadow-white">Engineering Plastics</h2>
        </div>
        <div class="clearfix mt-3"></div>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <a class="btn btn-royal w-25" href="/engineering-plastics">Learn More</a>
        </div>
    </div>
    <div class='card feature-container-four feature-container'>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <h2 class="text-center text-shadow-white">Assembly</h2>
        </div>
        <div class="clearfix mt-3"></div>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <a class="btn btn-royal w-25" href="/assembly">Learn More</a>
        </div>
    </div>
</div>
<div class='w-100 card-group mouse-over-card'>
    <div class='card feature-container-five feature-container'>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <h2 class="text-center text-shadow-white">Quality Assurance</h2>
        </div>
        <div class="clearfix mt-3"></div>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <a class="btn btn-royal w-25" href="/quality-assurance">Learn More</a>
        </div>
    </div>
    <div class='card feature-container-six feature-container'>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <h2 class="text-center text-shadow-white">SUPPLY CHAIN MANAGEMENT</h2>
        </div>
        <div class="clearfix mt-3"></div>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <a class="btn btn-royal w-25" href="/supply-chain-management">Learn More</a>
        </div>
    </div>
</div>
<div class='w-100 card-group mouse-over-card'>
    <div class='card feature-container-seven feature-container'>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <h3 class="text-center text-shadow-white">Technologies</h2>
        </div>
        <div class="clearfix mt-3"></div>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <a class="btn btn-royal w-50" href="/fobo">Learn More</a>
        </div>
    </div>
    <div class='card border-0'>
    </div>
</div>
@else
@if((new \Jenssegers\Agent\Agent())->isMobile())
<!-- Mobile View -->
<div class='w-100 card-group mouse-over-card'>
    <div class='card feature-container-one feature-container'>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <h3 class="text-center text-shadow-white">Design and Development</h3>
        </div>
        <div class="clearfix mt-3"></div>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <a class="btn btn-royal w-50" href="/design">Learn More</a>
        </div>
    </div>
    <div class='card feature-container-two feature-container'>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <h3 class="text-center text-shadow-white">Surface Treatment</h3>
        </div>
        <div class="clearfix mt-3"></div>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <a class="btn btn-royal w-50" href="/surface-treatment">Learn More</a>
        </div>
    </div>
    <div class='card feature-container-three'>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <h3 class="text-center text-shadow-white">Engineering Plastics</h3>
        </div>
        <div class="clearfix mt-3"></div>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <a class="btn btn-royal w-50" href="/engineering-plastics">Learn More</a>
        </div>
    </div>
</div>
<div class='w-100 card-group mouse-over-card'>
    <div class='card feature-container-four feature-container'>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <h3 class="text-center text-shadow-white">Assembly</h3>
        </div>
        <div class="clearfix mt-3"></div>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <a class="btn btn-royal w-50" href="/assembly">Learn More</a>
        </div>
    </div>
    <div class='card feature-container-five feature-container'>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <h3 class="text-center text-shadow-white">Quality Assurance</h3>
        </div>
        <div class="clearfix mt-3"></div>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <a class="btn btn-royal w-50" href="/quality-assurance">Learn More</a>
        </div>
    </div>
    <div class='card feature-container-six feature-container'>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <h3 class="text-center text-shadow-white">Supply Chain Management</h3>
        </div>
        <div class="clearfix mt-3"></div>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <a class="btn btn-royal w-50" href="/supply-chain-management">Learn More</a>
        </div>
    </div>
</div>
<div class='w-100 card-group mouse-over-card'>
    <div class='card feature-container-seven feature-container'>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <h3 class="text-center text-shadow-white">Technologies</h2>
        </div>
        <div class="clearfix mt-3"></div>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <a class="btn btn-royal w-50" href="/fobo">Learn More</a>
        </div>
    </div>
    <div class='card border-0'>
    </div>
    <div class='card border-0'>
    </div>
</div>
@else
<!-- Desktop View -->
<div class='w-100 card-group mouse-over-card'>
    <div class='card feature-container-one feature-container'>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <h2 class="text-center text-shadow-white">Design and Development</h2>
        </div>
        <div class="clearfix mt-3"></div>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <a class="btn btn-royal w-25" href="/design-and-development">Learn More</a>
        </div>
    </div>
    <div class='card feature-container-two feature-container'>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <h2 class="text-center text-shadow-white">Surface Treatment</h2>
        </div>
        <div class="clearfix mt-3"></div>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <a class="btn btn-royal w-25" href="/manufacturing">Learn More</a>
        </div>
    </div>
    <div class='card feature-container-three feature-container'>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <h2 class="text-center text-shadow-white">Engineering Plastics</h2>
        </div>
        <div class="clearfix mt-3"></div>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <a class="btn btn-royal w-25" href="/manufacturing">Learn More</a>
        </div>
    </div>
</div>
<div class='w-100 card-group mouse-over-card'>
    <div class='card feature-container-four feature-container'>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <h2 class="text-center text-shadow-white">Assembly</h2>
        </div>
        <div class="clearfix mt-3"></div>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <a class="btn btn-royal w-25" href="/manufacturing">Learn More</a>
        </div>
    </div>
    <div class='card feature-container-five feature-container'>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <h2 class="text-center text-shadow-white">Quality Assurance</h2>
        </div>
        <div class="clearfix mt-3"></div>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <a class="btn btn-royal w-25" href="/manufacturing">Learn More</a>
        </div>
    </div>
    <div class='card feature-container-six feature-container'>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <h2 class="text-center text-shadow-white">Supply Chain Management</h2>
        </div>
        <div class="clearfix mt-3"></div>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <a class="btn btn-royal w-25" href="/supply-chain-solutions">Learn More</a>
        </div>
    </div>
</div>
<div class='w-100 card-group mouse-over-card'>
    <div class='card feature-container-seven feature-container'>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <h2 class="text-center text-shadow-white">Technologies</h2>
        </div>
        <div class="clearfix mt-3"></div>
        <div class="d-flex justify-content-center text-white pt-5 no-filter">
            <a class="btn btn-royal w-25" href="/fobo">Learn More</a>
        </div>
    </div>
    <div class='card border-0'>
    </div>
    <div class='card border-0'>
    </div>
</div>
@endif
@endif
{{-- <div class="col d-flex justify-content-center">
    <div class="w-100 container text-center mt-5 mb-5">
        <div class="mt-2 mb-2">
            <h1 class="card-title">
                <strong>Our Esteemed Customers</strong>
            </h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eleifend massa a convallis gravida.
                Curabitur
                malesuada lobortis consequat. Integer a mollis lorem, et pharetra risus. Mauris ac porttitor leo. Donec
                porta varius enim. </p>
        </div>
    </div>
</div> --}}
<div class='clearfix mt-5 mb-5'></div>
</div>

@endsection