@extends('Frontend.layout.main')

@section('head')

<title>{{ $pageData->meta_title() ?? 'Eldiar' }}</title>
<meta content="{{ $pageData->meta_description() ?? 'Eldiar' }}" name="description">
<meta content="{{ $pageData->meta_keyword() ?? 'Eldiar' }}" name="keywords">

<meta property="og:title" content="{{$pageData->meta_title() ?? 'Eldiar'}}" />
<meta property="og:description" content="{{ $pageData->meta_description() ?? 'Eldiar' }}" />
@endsection

@section('content')


<div id="myCarousel" class="carousel carousel1 slide" data-ride="carousel">
    <div class="carousel-inner carousel-inner1">

        @foreach($top_banners->image as $key => $image)

            <div class="carousel-item  homeslider @if($key==0) active @endif  ">
                <img src="{{ url('/storage/banners/'.$image) }}" alt="Chicago">
                <div class="techbanner">
                    <h2>INTRODUCING <span class="lineh"></span></h2>
                    <p>{{ $top_banners->heading[$key] }}</p>

                </div>
            </div>
        @endforeach


    </div>

    <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
        <img src="frontend/assets/images/left.png">
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-slide="next">
        <img src="frontend/assets/images/right.png">
        <span class="sr-only">Next</span>
    </a>

    <div class="d-none d-md-block">
    <ul class="carousel-indicators carousel-indicators1">
        @foreach($brands as $key => $brand)
            <li>
            <a href="{{url('/brands/'.$brand->slug)}}">
                <img src="{{ url('/storage/brands/'.$brand->image) }}"
                    alt="{{ $brand->title }}">
             </a>
            </li>

        @endforeach
    </ul>
    </div>
</div>

<div class="mobileOnly">

        <div class="row no-gutters mx-3 my-4">



        @foreach($brands as $key => $brand)

                <div class="col-6">
            <a href="{{url('/brands/'.$brand->slug)}}">

                    <div class="borderSolid">

                        <img src="{{ url('/storage/brands/'.$brand->image) }}"
                            alt="{{ $brand->title }}" class="img-fluid">

                    </div>
                    </a>

                </div>

        @endforeach
            

        </div>

</div>



<div id="myCarousel2" class="carousel carousel1 slide" data-ride="carousel">
    <div class="carousel-inner carousel-inner1">

        @foreach($mid_banners->image as $key => $image)

            <div class="carousel-item  homeslider @if($key==0) active @endif">
                <span>
                    <img src="{{ url('/storage/banners/'.$image) }}"
                        alt="{{ $mid_banners->heading[$key] }}">
                </span>

                <div class="techbanner2">
                    <h2>Design Studio <span class="lineh"></span></h2>
                    <p>{{ $mid_banners->heading[$key] }}</p>

                    <h6>{{ $mid_banners->readmore[$key] }}</h6>
                    <a href="{{ url('/design-studio/projects/')}}/{{$mid_banners->description[$key]}}"><button
                            class="btn btn-outline-light">DISCOVER MORE</button></a>

                </div>
            </div>
        @endforeach

    </div>

    <a class="carousel-control-prev" href="#myCarousel2" data-slide="prev">
        <img src="frontend/assets/images/left.png">
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel2" data-slide="next">
        <img src="frontend/assets/images/right.png">
        <span class="sr-only">Next</span>
    </a>

</div>







<div id="myCarousel3" class="carousel carousel1 slide mt60" data-ride="carousel">
    <div class="carousel-inner carousel-inner1">

        @foreach($styles as $key => $style)

            <div class="carousel-item  homeslider  @if($key==0) active @endif">
                <span>
                    <img src="{{ url('/storage/styles/banners/'.$style->banner_image) }}"
                        alt="{{ $style->title ?? '' }}">
                </span>
                <div class="techbanner3">
                    <h2>STYLES <span class="lineh"></span></h2>
                    <p>{{ $style->title ?? '' }}</p>
                    <small>{!! $style->description ?? ''!!}</small>
                </div>
            </div>

        @endforeach





        <!-- <div class="carousel-item  homeslider ">
            <img src="frontend/assets/images/ban8.png" alt="Chicago">
            <div class="techbanner3">
                <h2>CLASSIC <span class="lineh"></span></h2>
                <p>MODERN & CONTEMPORARY</p>
                <h6>Iconic, Trendy & Sophisticated Stylish Collections</h6>
            </div>
        </div> -->
    </div>

    <a class="carousel-control-prev" href="#myCarousel3" data-slide="prev">
        <img src="frontend/assets/images/left.png">
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel3" data-slide="next">
        <img src="frontend/assets/images/right.png">
        <span class="sr-only">Next</span>
    </a>

</div>


<section>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="elfsight-app-dd3ccb7b-1312-4d1b-b900-1c4104f239b9"></div>
    
         </div>
        </div>
    </div>
</section>





@endsection