@extends('web.layouts.app')

@inject('solutionSettings', 'App\Settings\SolutionSettings')
@inject('successSettings', 'App\Settings\SuccessSettings')
@inject('portfolioSettings', 'App\Settings\PortfolioSettings')

@section('content')
<!-- Banner Area Start -->
<div class="banner__four">
    {{-- BG video --}}
    <div class="bg-video">
        <video autoplay muted loop id="myVideo"><source src="/storage/{{ $homeSettings->bg_video }}" type="video/mp4"></video>
    </div>

    {{-- Hero --}}
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="banner__four-content">
                    <span class="subtitle wow fadeInLeft" data-wow-delay=".4s">{{ $homeSettings->hero_badge_text }}</span>
                    <div class="title_split_anim">
                        <h1>{{ $homeSettings->hero_header }}</h1>
                        <h2>{{ $homeSettings->hero_sub_header }}</h2>
                    </div>
                    <div class="item_bounce">
                        <a class="build_button" href="{{ $homeSettings->hero_link_button_url }}">{{ $homeSettings->hero_link_button_text }}<i class="flaticon-right-up"></i></a>
                    </div>
                    <a href="#"><img class="h_rotate" src="/web/assets/img/shape/content.png" alt="image"></a>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="banner__four-brand">
                    <div class="title">
                        <h4>{{ __('Our Trusted Partners') }}</h4>
                    </div>
                    <div class="scroll__slider">
                        <div class="text-slide">
                            <div class="sliders text_scroll">
                                <ul>
                                    @foreach($brands as $brand)
                                        <li><img src="{{ $brand->imageUrl() }}" style="max-height: 30px;" alt="image"></li>
                                    @endforeach
                                </ul>
                            </div>
                            <div class="sliders text_scroll">
                                <ul>
                                    @foreach($brands as $brand)
                                        <li><img src="{{ $brand->imageUrl() }}" style="max-height: 30px;" alt="image"></li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Banner Area End -->

<!-- About Area Start -->
<div class="about__four section-padding">
    <div class="container">
        <div class="row al-center">
            <div class="col-lg-3 lg-mb-25">
                <div class="about__four-left wow img_top_animation">
                    <img src="/storage/{{ $homeSettings->about_image_one }}" alt="image">
                </div>
            </div>
            <div class="col-lg-9">
                <div class="about__four-title">
                    <span class="subtitle wow fadeInLeft" data-wow-delay=".4s">{{ $homeSettings->about_subtitle }}</span>
                    <h2 class="title_split_anim mb-20">{{ $homeSettings->about_header }}</h2>
                    <p class="wow fadeInUp" data-wow-delay=".4s">{{ $homeSettings->about_paragraph }}</p>
                    <div class="item_bounce">
                        <a class="build_button mt-25" href="{{ $homeSettings->about_button_url }}">{{ $homeSettings->about_button_text }}<i class="flaticon-right-up"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-30">
            <div class="col-lg-8">
                <div class="about__four-counter">
                    <div class="row">
                        <div class="col-md-4 col-sm-6 wow fadeInUp" data-wow-delay=".4s">
                            <div class="about__four-counter-item">
                                <div class="box">
                                    <h2><span class="counter">{{ $homeSettings->about_projects_number }}</span>+</h2>
                                    <span>{{ $homeSettings->about_projects_text }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 wow fadeInUp" data-wow-delay=".7s">
                            <div class="about__four-counter-item borders t-center md-t-left">
                                <div class="box">
                                    <h2><span class="counter">{{ $homeSettings->about_members_number }}</span>+</h2>
                                    <span>{{ $homeSettings->about_members_text }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-6 wow fadeInUp" data-wow-delay="1s">
                            <div class="about__four-counter-item t-right md-t-left">
                                <div class="box">
                                    <h2><span class="counter">{{ $homeSettings->about_reviews_number }}</span>+</h2>
                                    <span>{{ $homeSettings->about_reviews_text }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 lg-mt-25">
                <div class="about__four-right t-right wow img_right_animation">
                    <img src="/storage/{{ $homeSettings->about_image_two }}" alt="image">
                </div>
            </div>
        </div>
    </div>
</div>
<!-- About Area End -->

<!-- Services Area Start -->
<div class="services__four section-padding pt-0">
    <div class="container">
        <div class="row">
            <div class="col-xl-5 col-lg-6 lg-mb-25">
                <div class="services__four-title section-padding pb-0">
                    <span class="subtitle wow fadeInLeft" data-wow-delay=".4s">{{ $solutionSettings->solutions_subtitle }}</span>
                    <h2 class="title_split_anim">{{ $solutionSettings->solutions_header }}</h2>
                    <div class="item_bounce">
                        <a class="build_button mt-40" href="{{ $solutionSettings->solutions_button_url }}">{{ $solutionSettings->solutions_button_text }}<i class="flaticon-right-up"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-xl-7 col-lg-6">
                <div class="services__four-image wow img_top_animation">
                    <img src="/storage/{{ $solutionSettings->solutions_image }}" alt="image">
                </div>
            </div>
        </div>
        <div class="row mt-70 wow fadeInUp" data-wow-delay=".5s">
            <div class="col-xl-12">
                <div class="swiper services_four_slide data_cursor" data-cursor-text="Drag">
                    <div class="swiper-wrapper">
                        @foreach($solutionSettings->solution_items as $item)
                            <div class="swiper-slide">
                                <div class="services__one-item">
                                    <i class="{{ $item['icon_class'] }}"></i>
                                    <h4><a href="{{ $item['link'] }}">{{ $item['title'] }}</a></h4>
                                    <a class="more_btn" href="{{ $item['link'] }}">Read More<i class="flaticon-right-up"></i></a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Services Area End -->
<!-- Success Area Start -->
<div class="success__area section-padding">
    <div class="container">
        <div class="row al-center">
            <div class="col-lg-6 lg-mb-25">
                <div class="success__area-title mr-70 xl-mr-0">
                    <span class="subtitle wow fadeInLeft" data-wow-delay=".4s">{{ $successSettings->success_subtitle }}</span>
                    <h2 class="title_split_anim mb-20">{{ $successSettings->success_header }}</h2>
                    <p class="wow fadeInUp" data-wow-delay=".4s">{{ $successSettings->success_paragraph }}</p>
                    <div class="item_bounce">
                        <a class="build_button mt-25" href="{{ $successSettings->success_button_url }}">{{ $successSettings->success_button_text }}<i class="flaticon-right-up"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="success__area-right">
                    <img class="lg_img_full wow img_top_animation" src="/web/assets/img/page/skill.jpg" alt="image">
                    <div class="success__area-right-skill mt-40 wow fadeInUp" data-wow-delay=".5s">
                        @foreach($successSettings->skill_items as $skill)
                            <div class="skill__area-item">
                                <div class="skill__area-item-content">
                                    <h6>{{ $skill['name'] }}</h6>
                                    <span class="skill__area-item-count"><span class="counter">{{ $skill['percentage'] }}</span>%</span>
                                </div>
                                <div class="skill__area-item-inner">
                                    <div class="skill__area-item-bar" data-width="{{ $skill['percentage'] }}"></div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Success Area End -->
<!-- Portfolio Area Start -->
<div class="portfolio__four">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-12">
                <div class="portfolio__four-area">
                    @foreach($portfolioSettings->portfolio_items as $item)
                        <div class="portfolio__four-area-item">
                            <img src="/storage/{{ $item['image'] }}" alt="image">
                            <div class="portfolio__four-area-item-area">
                                <div class="portfolio__one-item-content">
                                    <span>{{ $item['category'] }}</span>
                                    <h4><a href="{{ $item['link'] }}" class="text-white">{{ $item['title'] }}</a></h4>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    <div class="container mt-60">
        <div class="row al-center">
            <div class="col-xl-5 col-md-7 md-mb-25 lg-t-center title_split_anim">
                <h3>{{ $portfolioSettings->portfolio_header }}</h3>
            </div>
            <div class="col-xl-7 col-md-5 t-right lg-t-center">
                <div class="item_bounce">
                    <a class="build_button" href="{{ $portfolioSettings->portfolio_button_url }}">{{ $portfolioSettings->portfolio_button_text }}<i class="flaticon-right-up"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Portfolio Area End -->
<!-- Industry Area Start -->
<div class="industry__four section-padding">
    <div class="container">
        <div class="row al-center">
            <div class="col-lg-6 lg-mb-30">
                <div class="industry__four-left">
                    <img class="lg_img_full wow img_top_animation" src="/storage/{{ $homeSettings->industry_image_one }}" alt="image">
                    <div class="row mt-40">
                        @foreach($homeSettings->industry_items as $item)
                            <div class="col-md-6 md-mb-25 wow fadeInUp" data-wow-delay=".4s">
                                <div class="industry__four-left-item borders pr-10 lg-pr-0">
                                    <img src="/storage/{{ $item['icon'] }}" alt="image">
                                    <h5>{{ $item['title'] }}</h5>
                                    <p>{{ $item['description'] }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="industry__four-right ml-45 xl-ml-0">
                    <span class="subtitle wow fadeInLeft" data-wow-delay=".4s">{{ $homeSettings->industry_subtitle }}</span>
                    <h2 class="title_split_anim mb-20">{{ $homeSettings->industry_header }}</h2>
                    <p class="wow fadeInUp" data-wow-delay=".4s">{{ $homeSettings->industry_paragraph }}</p>
                    <div class="item_bounce">
                        <a class="build_button mt-25" href="{{ $homeSettings->industry_button_url }}">{{ $homeSettings->industry_button_text }}<i class="flaticon-right-up"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Industry Area End -->
<!-- Text Slide Area Start -->
<div class="text__slide section-padding">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 lg-mb-30">
                <div class="text__slide-title mt-35 lg-mt-0">
                    <span class="subtitle wow fadeInLeft" data-wow-delay=".4s">{{ $homeSettings->text_slide_subtitle }}</span>
                    <h2 class="title_split_anim">{{ $homeSettings->text_slide_header }}</h2>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="text__slide-right">
                    <img class="wow img_left_animation" src="/storage/{{ $homeSettings->text_slide_image }}" alt="image">
                    <div class="text__slide-right-counter item_bounce" style="background-image: url('/web/assets/img/shape/content-1.png');">
                        <h2><span class="counter">{{ $homeSettings->text_slide_counter_number }}</span>+</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="scroll__slider">
        <div class="text-slide">
            <div class="sliders text_scroll">
                <ul>
                    @foreach($homeSettings->text_slide_items as $item)
                        <li><img src="/storage/{{ $item['icon'] }}" alt="icon"><a href="{{ $item['link'] }}">{{ $item['text'] }}</a></li>
                    @endforeach
                </ul>
            </div>
            <div class="sliders text_scroll">
                <ul>
                    @foreach($homeSettings->text_slide_items as $item)
                        <li><img src="/storage/{{ $item['icon'] }}" alt="icon"><a href="{{ $item['link'] }}">{{ $item['text'] }}</a></li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- Text Slide Area End -->
<!-- Blog Area Start -->
<div class="blog__four section-padding-two">
    <div class="container">
        <div class="row mb-30">
            <div class="col-xl-12">
                <div class="blog__four-title t-center">
                    <span class="subtitle wow fadeInLeft" data-wow-delay=".4s">News & Blog</span>
                    <h2 class="title_split_anim">Update News & Blogs</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-4 col-md-6 mt-25 wow fadeInUp" data-wow-delay=".4s">
                <div class="blog__four-item">
                    <div class="blog__four-item-image">
                        <a href="blog-details.html"><img src="/web/assets/img/blog/blog-1.jpg" alt="image"></a>
                        <div class="blog__four-item-image-date">
                            <h5>22</h5>
                            <h6>Dec</h6>
                        </div>
                    </div>
                    <div class="blog__four-item-content">
                        <div class="meta">
                            <ul>
                                <li><a href="#"><i class="far fa-user"></i>By-Admin</a></li>
                                <li><a href="#"><i class="far fa-comment-dots"></i>Comments (3)</a></li>
                            </ul>
                        </div>
                        <h4><a href="blog-details.html">How Weather Can Impact a Construction Project</a></h4>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-md-6 mt-25 wow fadeInUp" data-wow-delay=".7s">
                <div class="blog__four-item">
                    <div class="blog__four-item-image">
                        <a href="blog-details.html"><img src="/web/assets/img/blog/blog-2.jpg" alt="image"></a>
                        <div class="blog__four-item-image-date">
                            <h5>19</h5>
                            <h6>Dec</h6>
                        </div>
                    </div>
                    <div class="blog__four-item-content">
                        <div class="meta">
                            <ul>
                                <li><a href="#"><i class="far fa-user"></i>By-Admin</a></li>
                                <li><a href="#"><i class="far fa-comment-dots"></i>Comments (3)</a></li>
                            </ul>
                        </div>
                        <h4><a href="blog-details.html">How to Choose the Perfect Construction Company</a></h4>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-md-6 mt-25 wow fadeInUp" data-wow-delay="1s">
                <div class="blog__four-item">
                    <div class="blog__four-item-image">
                        <a href="blog-details.html"><img src="/web/assets/img/blog/blog-3.jpg" alt="image"></a>
                        <div class="blog__four-item-image-date">
                            <h5>14</h5>
                            <h6>Dec</h6>
                        </div>
                    </div>
                    <div class="blog__four-item-content">
                        <div class="meta">
                            <ul>
                                <li><a href="#"><i class="far fa-user"></i>By-Admin</a></li>
                                <li><a href="#"><i class="far fa-comment-dots"></i>Comments (3)</a></li>
                            </ul>
                        </div>
                        <h4><a href="blog-details.html">Top Mistakes to Avoid During Home Renovation</a></h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Blog Area End -->

<!-- Cta Area Start -->
<div class="cta__four">
    <div class="container">
        <div class="row jc-center">
            <div class="col-xl-12">
                <div class="cta__four-area t-center" style="background-image: url('/web/assets/img/page/subscribe.jpg');">
                    <div class="cta__four-area-content">
                        <h2 class="title_split_anim">Join Our Community and Access Exclusive Insights Today</h2>
                        <div class="item_bounce">
                            <a class="build_button mt-40" href="request-quote.html">Free Consultation<i class="flaticon-right-up"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Cta Area End -->
@stop