@extends('frontend.layouts.products-app')

@section('title')
Product Comparison
@endsection

@section('seo')

@endsection

@section('content')

<div class="container mt-5">
    
    <h3 class="text-font fw-bold">Product Comparison</h3>
    <img src="{{ asset('img/bar-line.png') }}" class="img-fluid" alt="">
    <div class="mt-3">
        <p class="text-justify w-75"><span class="color-red fw-bold">Colored</span> product information below indicates the unique differences among the products being compared.</p>
    </div>
    
    <div class="row mb-5 mt-5 row-comparison">
        <div class="col-md-9">
            <div class="row border bg-light rounded">
                <div class="col-md d-flex align-items-center justify-content-center col-product">
                    <h4 class="text-font fw-bold">PRODUCTS</h4>
                </div>
                <div class="col-md">
                    <div class="p-5">
                    <i class="fa-regular fa-face-frown-open"></i>
                    <div class="mt-3">
                        <p class="fw-bold">Comparison Board is currently empty</p>
                    </div>
                    <a href="{{url('/shop')}}"><p class="text-decoration-underline" style="color:#FF0000 !important;">ADD PRODUCTS TO COMPARE +</p></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col d-lg-block d-none d-sm-none">
            
        </div>
    </div>
</div>

<br>

@endsection