@extends('frontend.layouts.main')

@section('main-container')
    <section>
        <div class="header-banner">
            <h2 class="header-banner-title">About us</h2>
        </div>
    </section>
    <section class="section">
        <div class="container">
            <div class="row mb-5 align-items-center justify-content-center">
                <div class="col-md-4">
                    <img src="{{ asset($about->image) }}" alt="about" class="img-fluid">
                </div>
                <div class="col-md-1"></div>
                <div class="col-md-5">
                    <h2>{{ $about->title }}</h2>
                    <div class="mt-4">
                        <p class="line-height">
                            {{ $about->short_description }}
                        </p>
                    </div>
                    <div class="mt-5">
                        <a href="#moreInfo" class="btn btn-primary">Know More</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section bg-primary" id="moreInfo">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="text-white">
                        {!! $about->description !!}
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection