@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" alt="add-image">
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-slide="next">
        <img src="frontend/assets/images/right.png" alt="add-image">
        <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 col-md-3">-->
<!--            <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 class="owl-carousel owl-theme owl-loaded owl-drag">-->
            
<!--  <div class="owl-stage-outer">-->

<!--    <div class="owl-stage" style="transform: translate3d(-1527px, 0px, 0px); transition: all 0.25s ease 0s; width: 3334px;">-->
<!--      @foreach($brands as $key => $brand)-->
<!--          <div class="owl-item cloned" style="width: 128.906px; margin-right: 10px;">-->
<!--            <div class="item">-->
<!--               <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>-->
<!--          </div>-->
<!--      @endforeach-->
<!--    </div>-->
<!--  </div>-->
<!--  <div class="owl-nav disabled">-->
<!--   </div>-->
  
<!--</div>-->
 <section class="customer-logos slider py-4">
      @foreach($brands as $key => $brand)
      <div class="slide">
                         <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
     
     
   </section>

<!-- new section 1-->
<section class="lsection d-print-none bg-light2 text-dark ">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 d-flex flex-column">
                <img src="{{url('/storage/posts/'.$home_page->meta->section1_image)}}" alt="add-image">
            </div>
            <div class="col-lg-6 d-flex flex-column">
                <h1>{!! isset($home_page->meta->seo_section1_title)?$home_page->meta->seo_section1_title:''!!}</h1>
                <div class="py-3">{!! isset($home_page->meta->seo_section1_description)?$home_page->meta->seo_section1_description:''!!}</div>
                
                <br><a href="{{ url('/brands')}}"><button
                            class="section-discover" style="font-weight: bold;">DISCOVER MORE</button></a>
            </div>
            
        </div>
    </div>
</section>


<!-- end new section 1 -->

<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" alt="add-image">
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel2" data-slide="next">
        <img src="frontend/assets/images/right.png" alt="add-image">
        <span class="sr-only">Next</span>
    </a>

</div>




<!-- section2 -->
<section class="lsection d-print-none bg-light2 text-dark">
    <div class="container">
        <div class="row">
            
            <div class="col-lg-6 d-flex flex-column">
                <h2>{!! isset($home_page->meta->seo_section2_title)?$home_page->meta->seo_section2_title:''!!}</h2>
                <div class="py-3">{!! isset($home_page->meta->seo_section2_description)?$home_page->meta->seo_section2_description:''!!}</div>
                <br><a href="{{ url('/design-studio')}}"><button
                            class="section-discover" style="font-weight: bold;">DISCOVER MORE</button></a>
            </div>
            <div class="col-lg-6 d-flex flex-column">
                <img src="{{url('/storage/posts/'.$home_page->meta->section2_image)}}" alt="add-image">
            </div>
        </div>
    </div>
</section>
<!-- end section2 -->


<div id="myCarousel3" class="carousel carousel1 slide " 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" alt="add-image">
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel3" data-slide="next">
        <img src="frontend/assets/images/right.png" alt="add-image">
        <span class="sr-only">Next</span>
    </a>

</div>

<!-- section3 -->
<section class="lsection d-print-none bg-light2 text-dark">
    <div class="container">
        <div class="row">
        <div class="col-lg-6 d-flex flex-column">
                <img src="{{url('/storage/posts/'.$home_page->meta->section3_image)}}" alt="add-image">
            </div>
            <div class="col-lg-6 d-flex flex-column">
                <h2>{!! isset($home_page->meta->seo_section3_title)?$home_page->meta->seo_section3_title:''!!}</h2>
                <div class="py-3">{!! isset($home_page->meta->seo_section3_description)?$home_page->meta->seo_section3_description:''!!}</div>
                <br><a href="{{ url('/products')}}">
                    <button class="section-discover" style="font-weight: bold;">DISCOVER MORE</button></a>
            </div>
          
        </div>
    </div>
</section>
<!-- end section3 -->
<section class="pt-0">
    <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