@extends('frontend.layouts.app')

@section('title')

@endsection

@section('seo')
<title>Home | Betacom</title>
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Home | Betacom" />
<meta property="og:description" content="" />
<meta property="og:site_name" content="Home | Betacom" />
<meta property="og:image" content="{{ asset('images/thumbnail.jpg') }}" />
<meta property="og:thumbnail" content="{{ asset('images/thumbnail.jpg') }}" />
@endsection

@section('content')

<div id="featured" class="carousel slide" data-bs-ride="false">
    <div class="carousel-inner">
        <div class="carousel-item active">

            <div class="position-relative">
                <img src="{{ asset('images/banner.jpg') }}" class="d-block align-middle img-fluid" alt="...">
            </div>
            <div class="position-absolute top-50 start-25 carousel-text">
                <h1 class="text-white" style="font-size: 80px;">WE ARE A YOUNG, <br> DYNAMIC AND <br> INNOVATIVE SERVICE <br> CONTRACTING <br>COMPANY</h1>
            </div>

            <style>
                .carousel-text {
                    transform: translateX(300px) translateY(-175px);
                }
            </style>

        </div>
        <div class="carousel-item">

            <div class="position-relative">
                <img src="{{ asset('images/banner.jpg') }}" class="d-block align-middle img-fluid" alt="...">
            </div>
            <div class="position-absolute top-50 start-25 carousel-text">
                <h1 class="text-white" style="font-size: 80px;">WE ARE A YOUNG, <br> DYNAMIC AND <br> INNOVATIVE SERVICE <br> CONTRACTING <br>COMPANY</h1>
            </div>

        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#featured" data-bs-slide="prev">
        <div class="icon-box" style="margin-right: 30px; padding: 20px; background-color: lightgray; width: 100px; height: 50px; display: flex; align-items: center; justify-content: center; transform: skewX(-20deg);">
            <i class="fa-solid fa-arrow-left color-mid fs-4"></i>
        </div>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#featured" data-bs-slide="next">
        <div class="icon-box" style="margin-left: 30px; padding: 20px; background-color: lightgray; width: 100px; height: 50px; display: flex; align-items: center; justify-content: center; transform: skewX(20deg);">
            <i class="fa-solid fa-arrow-right color-mid fs-4"></i>
        </div>
    </button>
</div>

<div class="container">

</div>
@endsection