@extends('public.layout.app')
@section('title','About | PACHA PAINTS')

@section('body')
<section class="hero">
    <div class="container">
        <div class="pill mb-3"><i class="fa-solid fa-circle-info brand-dot"></i> About Us</div>
        <div class="row g-4 align-items-center">
            <div class="col-lg-6">
                <h2 class="fw-bold mb-3">Quality paint. Real protection.</h2>
                <p class="muted">
                    PACHA PAINTS provides premium paint solutions for homes and businesses.
                    Our focus is consistent color, smooth finish, high coverage, and durability for local weather.
                </p>

                <div class="row g-3 mt-3">
                    <div class="col-md-6">
                        <div class="cardx p-3">
                            <div class="fw-semibold"><i class="fa-solid fa-shield-halved brand-dot me-2"></i>Durability</div>
                            <div class="muted small">Long lasting, crack & peel resistance.</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="cardx p-3">
                            <div class="fw-semibold"><i class="fa-solid fa-droplet brand-dot me-2"></i>Washable</div>
                            <div class="muted small">Easy cleaning, stain resistance.</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="cardx p-3">
                            <div class="fw-semibold"><i class="fa-solid fa-leaf brand-dot me-2"></i>Low Odor</div>
                            <div class="muted small">Comfortable indoor use.</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="cardx p-3">
                            <div class="fw-semibold"><i class="fa-solid fa-swatchbook brand-dot me-2"></i>Color Range</div>
                            <div class="muted small">Modern palette for every space.</div>
                        </div>
                    </div>
                </div>

                <div class="mt-4 d-flex gap-2">
                    <a class="btn btn-brand" href="{{ route('front.products') }}">Browse Products</a>
                    <a class="btn btn-outline-brand" href="{{ route('front.contact') }}">Contact</a>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="cardx p-3">
                    <img class="w-100 rounded-4"
                         src="https://images.unsplash.com/photo-1616628188546-7d3c8f17c4a2?auto=format&fit=crop&w=1400&q=70"
                         alt="" style="height:420px;object-fit:cover;border:1px solid rgba(37,32,34,.12);">
                </div>
            </div>
        </div>
    </div>
</section>
@endsection