@extends('web.layouts.default')
@section('content')
@isset($sections[0])
@php $section0= $sections[0]; @endphp
@if(isset($section0->image) && $section0->image!="")
@php $image=asset(Storage::url('public/sections')).'/'.$section0->page->alias.'/'.$section0->image @endphp
@else
@php $image='' @endphp
@endif
<section>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 p-0">
        <div class="about-head head-top-hgt" style="background-image:url({{$image}})">
          <div class="container">
            <div class="ihead-text main-heading ">
              <h2>{{$section0->title}}</h2>
              <a href="{{ route('web.home') }}">Home</a><span href="#">{{$section0->title}}</span>
            </div>
          </div>
          <div class="i-head-bg"></div>
        </div>
      </div>
    </div>
  </div>
</section>
@endisset

<section class="about-text pad100">
  <div class="container">
    <div class="row">
      @isset($sections[1])
      @php $section1= $sections[1]; @endphp
      @if(isset($section1->image) && $section1->image!="")
      @php $image=asset(Storage::url('public/sections')).'/'.$section1->page->alias.'/'.$section1->image @endphp
      @else
      @php $image='' @endphp
      @endif
      <div class="col-xxl-6 col-xl-6 col-lg-12 col-md-12 col-sm-12 col-12">
        <img class="mt-5" src="{{ $image }}" alt="">
        <h3 class="main-head">{{$section1->title}}</h3>
        <p>{{ $section1->description }}</p>
        <div class="points">
          @isset($section1->sub_sections)
          <ul>
            @foreach($section1->sub_sections as $sub_sec)
            <li><i class="fa fa-check-circle-o"></i> {{ $sub_sec->title }}</li>
            @endforeach
          </ul>
          @endisset
        </div>
      </div>
      @endisset
      <div class="col-xxl-6 col-xl-6 col-lg-12 col-md-12 col-sm-12 col-12">
        <div class="row">
          <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
            @isset($sections[2])
            @php $section2= $sections[2]; @endphp
            @if(isset($section2->image) && $section2->image!="")
            @php $image=asset(Storage::url('public/sections')).'/'.$section2->page->alias.'/'.$section2->image @endphp
            @else
            @php $image='' @endphp
            @endif
            <div class="pics4-main">
              <a class="mb-3" href="#"><img class="img-fluid" src="{{ $image }}" alt="">
                <div class="pic4-text">
                  <h6>{{$section2->sub_title}}</h6>
                  <h4>{{$section2->title}}</h4>

                </div>
              </a>
            </div>
            @endisset

            @isset($sections[3])
            @php $section3= $sections[3]; @endphp
            @if(isset($section3->image) && $section3->image!="")
            @php $image=asset(Storage::url('public/sections')).'/'.$section3->page->alias.'/'.$section3->image @endphp
            @else
            @php $image='' @endphp
            @endif
            <div class="pics4-main">
              <a class="mb-3 d-block" href="#"><img class="img-fluid" src="{{$image}}" alt="">
                <div class="pic4-text">
                  <h6>{{ $section3->sub_title }}</h6>
                  <h4>{{ $section3->title }}</h4>
                </div>
              </a>
            </div>
            @endisset
          </div>
          <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
            <div class="pics4-main">
            @isset($sections[4])
            @php $section4= $sections[4]; @endphp
            @if(isset($section4->image) && $section4->image!="")
            @php $image=asset(Storage::url('public/sections')).'/'.$section4->page->alias.'/'.$section4->image @endphp
            @else
            @php $image='' @endphp
            @endif
              <div class="pics4-main">
                <a class="mb-3" href="#"><img class="img-fluid" src="{{ $image }}" alt="">
                  <div class="pic4-text">
                    <h6>{{$section4->sub_title}}</h6>
                    <h4>{{$section4->title}}</h4>

                  </div>
                </a>
              </div>
              @endisset

             
              @isset($sections[5])
            @php $section5= $sections[5]; @endphp
            @if(isset($section5->image) && $section5->image!="")
            @php $image=asset(Storage::url('public/sections')).'/'.$section5->page->alias.'/'.$section5->image @endphp
            @else
            @php $image='' @endphp
            @endif
            <div class="pics4-main">
                <a class="mb-3 d-block" href="#"><img class="img-fluid" src="{{$image}}" alt="">
                  <div class="pic4-text">
                  <h6>{{$section5->sub_title}}</h6>
                    <h4>{{$section5->title}}</h4>

                  </div>
                </a>
              </div>
              @endisset
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<section class="pad100 ">
  <div class="container">
    <div class="row">
      <div class="text-heading text-center mb-5">
        <h3 class="main-heading">Discover our <span> solutions</span> for your new home</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis <br> et sem sed sollicitudin. Donec non odio neque.</p>
      </div>

      <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
        <div class="slider-fix-box-main">
          <div class="large-12 columns ">
            <div id="single-family-slider" class="owl-carousel owl-theme">
              <div class="item video-text">
                <a href="#">
                  <img class="img-fluid" src="imgs/f1.jpg">
                </a>
              </div>
              <div class="item video-text">
                <a href="#">
                  <img class="img-fluid" src="imgs/f2.jpg">

                </a>
              </div>
              <div class="item video-text">
                <a href="#">
                  <img class="img-fluid" src="imgs/3.jpg">
                </a>
              </div>
            </div>
            <div class="solution-slider-uptext">
              <h2> <span>Starting</span> $250,000</h2>
              <p> <span class="pe-3"><i class="fa fa-bed"></i> 3</span> <span class="pe-3"><i class="fa fa-bath"></i> 4</span> <span><i class="fa fa-map"></i> 9800 Sq Ft</span></p>
            </div>
            <div class="slider-fix-box"></div>
          </div>
        </div>
      </div>
      <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
        <div class="service-pic-sec">
          <h3 class="main-heading">Single Family Home</h3>
          <div class="points">
            <ul>
              <li><i class="fa fa-check-circle-o"></i> Lorem ipsum dolor sit amet</li>
              <li><i class="fa fa-check-circle-o"></i> Pellentesque id leo placerat nibh semper</li>
              <li><i class="fa fa-check-circle-o"></i> Suspendisse laoreet purus</li>
            </ul>
            <a class="moredetail-b" href="#">More details</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="pad100 ">
  <div class="container">
    <div class="row">

      <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
        <div class="service-pic-sec pe-3 text-right">
          <h3 class="main-heading">Standard Modern Villa</h3>
          <div class="points">
            <ul>
              <li><i class="fa fa-check-circle-o"></i> Lorem ipsum dolor sit amet</li>
              <li><i class="fa fa-check-circle-o"></i> Pellentesque id leo placerat nibh semper</li>
              <li><i class="fa fa-check-circle-o"></i> Suspendisse laoreet purus</li>
            </ul>
            <a class="moredetail-b float-end" href="#">More details</a>
          </div>
        </div>
      </div>

      <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
        <div class="slider-fix-box-main">
          <div class="large-12 columns ">
            <div id="standard-modern" class="owl-carousel owl-theme">
              <div class="item video-text">
                <a href="#">
                  <img class="img-fluid" src="imgs/f6.jpg">
                </a>
              </div>
              <div class="item video-text">
                <a href="#">
                  <img class="img-fluid" src="imgs/f7.jpg">
                </a>
              </div>
              <div class="item video-text">
                <a href="#">
                  <img class="img-fluid" src="imgs/f8.jpg">
                </a>
              </div>
            </div>
            <div class="solution-slider-uptext">
              <h2> <span>Starting</span> $250,000</h2>
              <p> <span class="pe-3"><i class="fa fa-bed"></i> 3</span> <span class="pe-3"><i class="fa fa-bath"></i> 4</span> <span><i class="fa fa-map"></i> 9800 Sq Ft</span></p>
            </div>
            <div class="slider-fix-box"></div>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>
<section class="pad100 ">
  <div class="container">
    <div class="row">


      <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
        <div class="slider-fix-box-main">
          <div class="large-12 columns ">
            <div id="large-luxury" class="owl-carousel owl-theme">
              <div class="item video-text">
                <a href="#">
                  <img class="img-fluid" src="imgs/p1.jpg">
                </a>
              </div>
              <div class="item video-text">
                <a href="#">
                  <img class="img-fluid" src="imgs/p2.jpg">

                </a>
              </div>
              <div class="item video-text">
                <a href="#">
                  <img class="img-fluid" src="imgs/p7.jpg">
                </a>
              </div>
            </div>
            <div class="solution-slider-uptext">
              <h2> <span>Starting</span> $250,000</h2>
              <p> <span class="pe-3"><i class="fa fa-bed"></i> 3</span> <span class="pe-3"><i class="fa fa-bath"></i> 4</span> <span><i class="fa fa-map"></i> 9800 Sq Ft</span></p>
            </div>
            <div class="slider-fix-box"></div>
          </div>
        </div>
      </div>
      <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
        <div class="service-pic-sec">
          <h3 class="main-heading">Large Luxury Villa</h3>
          <div class="points">
            <ul>
              <li><i class="fa fa-check-circle-o"></i> Lorem ipsum dolor sit amet</li>
              <li><i class="fa fa-check-circle-o"></i> Pellentesque id leo placerat nibh semper</li>
              <li><i class="fa fa-check-circle-o"></i> Suspendisse laoreet purus</li>
            </ul>
            <a class="moredetail-b" href="#">More details</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pad100 ">
  <div class="container">
    <div class="row">

      <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
        <div class="service-pic-sec pe-3 text-right">
          <h3 class="main-heading">Superior Villa</h3>
          <div class="points">
            <ul>
              <li><i class="fa fa-check-circle-o"></i> Lorem ipsum dolor sit amet</li>
              <li><i class="fa fa-check-circle-o"></i> Pellentesque id leo placerat nibh semper</li>
              <li><i class="fa fa-check-circle-o"></i> Suspendisse laoreet purus</li>
            </ul>
            <a class="moredetail-b float-end" href="#">More details</a>
          </div>
        </div>
      </div>

      <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
        <div class="slider-fix-box-main">
          <div class="large-12 columns ">
            <div id="superior" class="owl-carousel owl-theme">
              <div class="item video-text">
                <a href="#">
                  <img class="img-fluid" src="imgs/f1.jpg">
                </a>
              </div>
              <div class="item video-text">
                <a href="#">
                  <img class="img-fluid" src="imgs/4.jpg">

                </a>
              </div>
              <div class="item video-text">
                <a href="#">
                  <img class="img-fluid" src="imgs/3.jpg">
                </a>
              </div>
            </div>
            <div class="solution-slider-uptext">
              <h2> <span>Starting</span> $250,000</h2>
              <p> <span class="pe-3"><i class="fa fa-bed"></i> 3</span> <span class="pe-3"><i class="fa fa-bath"></i> 4</span> <span><i class="fa fa-map"></i> 9800 Sq Ft</span></p>
            </div>
            <div class="slider-fix-box"></div>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

@endsection