@extends('layouts.app')

@section('content')
<div class="back-wrapper">
            <!--================= Back Breadcrumbs Section Start Here =================-->
            <div class="back-breadcrumbs">
                <div class="breadcrumbs-wrap">
                    <div class="breadcrumbs-inner">
                        <div class="container">
                            <div class="breadcrumbs-text">
                                <h1 class="breadcrumbs-title">{{ __('site.about.title') }}</h1>
                                <div class="back-nav">
                                    <ul>
                                        <li><a href="{{ route('home', ['locale' => locale_param()]) }}">{{ __('site.common.home') }}</a></li>
                                        <li>{{ __('site.about.title') }}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>                
            </div>
            <!--================= Back Breadcrumbs Section End Here =================-->

            <!--================= Back Whats Posts Start Here =================-->
            <div class="back-hero-area back-latest-posts back-whats-posts">
                <div class="container">                    
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="back-title">
                                <h2>{{ __('site.about.who_we_are') }}</h2>
                            </div>                           
                            <p>{{ __('site.about.paragraph_1') }}</p>  
                            <div class="back-about-image pt-30 pb-30">
                                <img src="{{ asset('assets/images/about.png') }}" alt="Back Add">
                            </div> 
                            <h4>{{ __('site.about.unique_visual') }}</h4>
                            <p>{{ __('site.about.paragraph_2') }}</p>
                            <ul class="dot-list">
                                <li>{{ __('site.about.list.user_experience') }}</li>
                                <li>{{ __('site.about.list.unique_layouts') }}</li>
                                <li>{{ __('site.about.list.strategy_art') }}</li>
                            </ul>  
                            <p>{{ __('site.about.paragraph_3') }}</p>
                            <div class="pt-20">
                                <a href="{{ route('contact.index', ['locale' => locale_param()]) }}" class="back-btn">{{ __('site.common.contact_us') }}</a> 
                            </div>                   
                        </div>
                        <div class="col-lg-4 pl-30 md-pt-45"> 
                            <div class="back-title back-small-title">
                                <h2>{{ __('site.common.get_in_touch') }}</h2>
                            </div>
                            <ul class="social-area">
                                <li><div><a href="#"><i class="fa-brands fa-facebook-f"></i></a> <span>{{ __('site.social.followers') }} <em>750</em></span></div></li>
                                <li><div><a href="#"><i class="fa-brands fa-twitter"></i></a> <span>{{ __('site.social.fans') }} <em>1236</em></span></div></li>
                                <li><div><a href="#"><i class="fa-brands fa-instagram"></i></a> <span>{{ __('site.social.likes') }} <em>523</em></span></div></li>
                                <li><div><a href="#"><i class="fa-brands fa-vimeo-v"></i></a> <span>{{ __('site.social.comments') }} <em>790</em></span></div></li>
                                <li><div><a href="#"><i class="fa-brands fa-linkedin-in"></i></a> <span>{{ __('site.social.followers') }} <em>1025</em></span></div></li>
                                <li><div><a href="#"><i class="fa-brands fa-youtube"></i></a> <span>{{ __('site.social.subscribers') }} <em>590M</em></span></div></li>
                            </ul>
                            <div class="back-title back-small-title pt-30">
                                <h2>{{ __('site.common.latest_posts') }}</h2>
                            </div>
                            <ul class="back-hero-bottom">
                                <li>
                                    <div class="image-areas">
                                        <a href="#"><img src="{{ asset('assets/images/dont/1.jpg') }}" alt="image"></a>                                
                                    </div>
                                    <div class="back-btm-content">
                                        <a href="#" class="back-cates">{{ __('site.about.sample.politics') }}</a>
                                        <h3><a href="#">{{ __('site.about.sample.title_time') }}</a></h3> 
                                        <ul>
                                            <li class="back-date">{{ __('site.common.by') }} <a href="#">Jon Deo </a></li>                                                    
                                        </ul>                                        
                                    </div> 
                                </li>
                                <li>
                                    <div class="image-areas">
                                        <a href="#"><img src="{{ asset('assets/images/dont/2.jpg') }}" alt="image"></a>
                                    </div> 
                                    <div class="back-btm-content">
                                        <a href="#" class="back-cates">{{ __('site.about.sample.music') }}</a>
                                        <h3><a href="#">{{ __('site.about.sample.title_music') }}</a></h3> 
                                        <ul>
                                            <li class="back-date">{{ __('site.common.by') }} <a href="#">Jon Deo </a></li>                                                    
                                        </ul>                                        
                                    </div>
                                </li>
                                <li>
                                    <div class="image-areas">
                                        <a href="#"><img src="{{ asset('assets/images/dont/3.jpg') }}" alt="image"></a>
                                    </div> 
                                    <div class="back-btm-content">
                                        <a href="#" class="back-cates">{{ __('site.about.sample.lifestyle') }}</a>
                                        <h3><a href="#">{{ __('site.about.sample.title_habits') }}</a></h3> 
                                        <ul>
                                            <li class="back-date">{{ __('site.common.by') }} <a href="#">Jon Deo </a></li>                                                    
                                        </ul>                                        
                                    </div>
                                </li>
                                <li>
                                    <div class="image-areas">
                                        <a href="#"><img src="{{ asset('assets/images/dont/4.jpg') }}" alt="image"></a>                              
                                    </div>
                                    <div class="back-btm-content">
                                        <a href="#" class="back-cates">{{ __('site.about.sample.travel') }}</a>
                                        <h3><a href="#">{{ __('site.about.sample.title_trending') }}</a></h3> 
                                        <ul>
                                            <li class="back-date">{{ __('site.common.by') }} <a href="#">Jon Deo </a></li>                                                    
                                        </ul>                                        
                                    </div> 
                                </li>
                            </ul>  
                            <div class="back-title back-small-title pt-25">
                                <h2>{{ __('site.common.follow_us') }}</h2>                                
                            </div>    
                            <ul class="back-instragram">
                                <li><a href="#"> <img src="{{ asset('assets/images/instragram/1.jpg') }}" alt="image"> <i class="fa-brands fa-instagram"></i></a></li>
                                <li><a href="#"> <img src="{{ asset('assets/images/instragram/2.jpg') }}" alt="image"> <i class="fa-brands fa-instagram"></i></a></li>
                                <li><a href="#"> <img src="{{ asset('assets/images/instragram/3.jpg') }}" alt="image"> <i class="fa-brands fa-instagram"></i></a></li>
                                <li><a href="#"> <img src="{{ asset('assets/images/instragram/4.jpg') }}" alt="image"> <i class="fa-brands fa-instagram"></i></a></li>
                                <li><a href="#"> <img src="{{ asset('assets/images/instragram/5.jpg') }}" alt="image"> <i class="fa-brands fa-instagram"></i></a></li>
                                <li><a href="#"> <img src="{{ asset('assets/images/instragram/6.jpg') }}" alt="image"> <i class="fa-brands fa-instagram"></i></a></li>
                            </ul>                        
                        </div>
                    </div>                         
                </div>
            </div>
            <!--================= Back Whats Posts End Here =================-->

            <!--================= Back Team Section Start Here =================-->
            <div class="back-team">
                <div class="container">
                    <div class="back-title">
                        <h2>{{ __('site.about.team.title') }}</h2>                                
                    </div>
                    <div class="team-slider owl-carousel">
                        <div class="single-team">
                            <div class="team-img">
                                <img src="{{ asset('assets/images/team/1.jpg') }}" alt="Team Image">                                
                                <ul class="social-links">                                    
                                    <li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
                                    <li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
                                    <li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
                                </ul>
                            </div>
                            <div class="team-info">
                                <h3 class="name">{{ __('site.about.team.members.0.name') }}</h3>
                                <p class="desgnation">{{ __('site.about.team.members.0.role') }}</p>                                
                            </div>
                        </div>

                        <div class="single-team">
                            <div class="team-img">
                                <img src="{{ asset('assets/images/team/2.jpg') }}" alt="Team Image">                                
                                <ul class="social-links">                                    
                                    <li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
                                    <li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
                                    <li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
                                </ul>
                            </div>
                            <div class="team-info">
                                <h3 class="name">{{ __('site.about.team.members.1.name') }}</h3>
                                <p class="desgnation">{{ __('site.about.team.members.1.role') }}</p>                                
                            </div>
                        </div>

                        <div class="single-team">
                            <div class="team-img">
                                <img src="{{ asset('assets/images/team/3.jpg') }}" alt="Team Image">                                
                                <ul class="social-links">                                    
                                    <li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
                                    <li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
                                    <li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
                                </ul>
                            </div>
                            <div class="team-info">
                                <h3 class="name">{{ __('site.about.team.members.2.name') }}</h3>
                                <p class="desgnation">{{ __('site.about.team.members.2.role') }}</p>                                
                            </div>
                        </div>

                        <div class="single-team">
                            <div class="team-img">
                                <img src="{{ asset('assets/images/team/4.jpg') }}" alt="Team Image">                                
                                <ul class="social-links">                                    
                                    <li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
                                    <li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
                                    <li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
                                </ul>
                            </div>
                            <div class="team-info">
                                <h3 class="name">{{ __('site.about.team.members.3.name') }}</h3>
                                <p class="desgnation">{{ __('site.about.team.members.3.role') }}</p>                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--================= Back Team Section End Here =================-->
        </div>
@endsection