@extends('frontend.layouts.app')

@section('title', app_name() . ' | ' . __('navs.general.home'))

@section('content')
<div class="home_page">
    <div class="row ml-0 mr-0">
        <div class="col-xl-5 home_page_text">
            <p class="g_et_al_header1">
                The tool built specifically for S.T.E.M. researchers and educators.
            </p>
            <p class="g_et_al_header3">
                Graphics et al. is a browser-based artwork builder, designed by experienced teams of artists and
                scientists.<br/>
                Our goal is to provide accurate, visually striking resources to help you communicate your concepts with
                ease and clarity - no more graphical setbacks.
            </p>
                       <!--card-->
        </div>
        <div class="col-xl-7 home_page_video" style="padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */ ">
{{--        <video width="100%" controls>--}}
{{--        </video>--}}
<iframe style=" position: absolute;  top: 0;  left: 0;  bottom: 0;  right: 0;  width: 100%;  height: 100%; max-height: 315px" src="https://www.youtube.com/embed/uvicHmraH0s?playlist=uvicHmraH0s&loop=1" title="YouTube video player" allowfullscreen></iframe>
        </div>
        </div>
    </div>

    {{--    <div class="row mb-4">--}}
    {{--        <div class="col">--}}
    {{--            <example-component></example-component>--}}
    {{--        </div><!--col-->--}}
    {{--    </div><!--row-->--}}

    {{--    <div class="row">--}}
    {{--        <div class="col">--}}
    {{--            <div class="card">--}}
    {{--                <div class="card-header">--}}
    {{--                    <i class="fab fa-font-awesome-flag"></i> Font Awesome @lang('strings.frontend.test')--}}
    {{--                </div>--}}
    {{--                <div class="card-body">--}}
    {{--                    <i class="fas fa-home"></i>--}}
    {{--                    <i class="fab fa-facebook"></i>--}}
    {{--                    <i class="fab fa-twitter"></i>--}}
    {{--                    <i class="fab fa-pinterest"></i>--}}
    {{--                </div><!--card-body-->--}}
    {{--            </div><!--card-->--}}
    {{--        </div><!--col-->--}}
    {{--    </div><!--row-->--}}
@endsection