@extends('frontend.layouts')
@section('content')



<!-- Page Header -->
<section class="page-header d-flex align-items-center text-white"
         style="background: url('{{ asset('frontend/assets/images/he-1.png') }}') no-repeat center center; background-size: cover;">
    <div class="container text-center mt-5">
        <h1 class="fw-bold">About Us</h1>

        <nav aria-label="breadcrumb" class="mt-1">
            <ol class="breadcrumb justify-content-center bg-transparent mb-0">
                <li class="breadcrumb-item">
                    <a href="{{ route('index') }}" class="text-white text-decoration-none">
                        Home
                    </a>
                </li>
                <li class="breadcrumb-item active text-white" aria-current="page">
                    About
                </li>
            </ol>
        </nav>
    </div>
</section>

<section class="about-section py-5">
    <div class="container">
        <div class="row align-items-center">

            <!-- Image -->
            <div class="col-md-6 text-center mb-4 mb-md-0">
               <a href="{{ $about->amazon_link }}">
                     <img src="{{ asset( $about->image) }}"
                     class="{{ $about->alt_text }}">
               </a>
            </div>

            <!-- Text -->
            <div class="col-md-6">
                <h1 class="mb-3">{{ $about->title }}</h1>

                {{-- <p class="text-muted">

                </p> --}}
                {{-- <h4>{{ $about->author }} </h4> --}}
                <h3 class="fw-bold" style="color:#4da3ff;">{{ $about->author }}</h3>
                <p class="slider-desc">{{ $about->description }}

                {{-- <a href="{{ $about->amazon_link }}" class="btn btn-dark mt-4">Learn More</a> --}}
            </div>

        </div>
    </div>
</section>
@endsection