@extends('layouts.app')

@section('styles')
@endsection

@section('content')
<header class="full_bg">
         <!-- header inner -->
         <div class="header">
            <div class="container-fluid">
               <div class="row">
                  <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col logo_section">
                     <div class="full">
                        <div class="center-desk">
                           <div class="logo">
                              <a href="index.html"><img style="width: 50%;" src="{{ asset('assets/nobel-logo.png')}}" alt="#" /></a>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="col-xl-9 col-lg-9 col-md-9 col-sm-9">
                     <nav class="navigation navbar navbar-expand-md navbar-dark ">
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarsExample04">
                           <ul class="navbar-nav mr-auto">
                              <li class="nav-item active">
                                 <a class="nav-link" href="{{ route('index')}}">Home</a>
                              </li>
                              <li class="nav-item">
                                 <a class="nav-link" href="{{ route('about')}}">About</a>
                              </li>
                              <li class="nav-item">
                                 <a class="nav-link" href="{{ route('products')}}">our products</a>
                              </li>
                              <li class="nav-item">
                                 <a class="nav-link" href="{{ route('gallery')}}">gallery</a>
                              </li>
                              <li class="nav-item">
                                 <a class="nav-link" href="{{ route('contact')}}">Contact Us</a>
                              </li>
                              <li>
                                  <div id="google_translate_element"></div>
                              </li>
                           </ul>
                        </div>
                     </nav>
                  </div>
               </div>
            </div>
         </div>
         <!-- end header inner -->
         <!-- end header -->
         <!-- banner -->
         <section class="banner_main">
            <div class="container">
               <div class="banner_po">
                  <div class="row">
                     <div class="col-md-7">
                        <div class="text_box">
                           <span>Now started</span>
                           <h2 style="font-size: 40px;
    color: #fe401e;"> <strong>The perfect solution
							 <br> for online shopping  </strong> </h2>
                           <a class="read_more" href="{{ route('products')}}" role="button">Shop Now</a>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </section>
      </header>


      <!-- about -->
      <div id="about" class="about">
         <div class="container">
            <div class="row">
               <div class="col-md-6 offset-md-3">
                  <div class="titlepage">
                     <h2>About Us</h2>
                     <span>Nobel Foods is a company specialized in the import and distribution of international food and cosmetic products. We import directly from Africa, Asia, America and Europe, and we distribute nationally and internationally, moving food from all over the world to wholesalers, distributors and manufacturers. Our team is made up of more than 50 people in Spain with headquarters in Barcelona, ​​and four commercial delegations: Valencia, Almería, Murcia and the Basque Country</span>
                  </div>
               </div>
               <div class="col-md-12">
                  <div class="about_img">
                     <figure><img src="{{ asset('assets/images/about.png')}}" alt="#"/></figure>
                     <a class="read_more" href="{{ route('about')}}"> Read More</a>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- end about -->
      <!-- our products -->
      <div class="products">
         <div class="container">
            <div class="row">
               <div class="col-md-7">
                  <div class="titlepage">
                     <h2>Our Products</h2>
                     <span>We supply to a variety of companies all over the world
in small and bigger quantities
                     </span>
                  </div>
               </div>
            </div>
            <div class="row">
                @foreach($products as $product)
               <div class="col-lg-3 col-md-6 col-sm-6">
                   <a href="{{ route('detail' , $product->id)}}">
                  <div id="ho_bo" class="our_products">
                     <div class="product">
                        <figure><img src="data:image/jpeg;base64,{{$product->image}}" alt="#"/></figure>
                     </div>
                     <h3>{{$product->name}}</h3>
                     <span>{{$product->price}} $</span>
                     <!--<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non </p>-->
                  </div>
                  </a>
               </div>
               @endforeach
                  
            </div>
         </div>
      </div>
      <!-- end our products -->
      <!-- using -->
      <div class="using">
         <div class="container-fluid">
            <div class="row d_flex">
               <div class="col-md-6">
                  <div class="titlepage">
                     <h2 >Who we are</h2>
                     <p>We have been working in the food sector since 1997 and we represent the main exotic and international food brands in the market such as Nestlé, Aroy-D, Guinness, FOCO, Lipton or Jumbo. Brands with a strong local presence in countries in Africa or Asia and thanks to our strong logistics system we can offer global food to practically all countries in the world. We work hand by hand with the main brands in the sector, also having a portfolio of our own brands produced internationally so that food preserves the flavor and essence of the country of origin. Some of our brands are: Halah, Tiga Dèguè, LP African Foods, King Africa, Kumba, Safna or The Elements among others.</p>
                     <a class="read_more white_bg" href="{{ route('about')}}"> Read More</a>
                  </div>
               </div>
               <div class="col-md-5 offset-md-1 padding_right0">
                  <div class="frout_img">
                     <figure><img src="{{ asset('assets/images/frout.png')}}" alt="#"/></figure>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- end using -->
      <!-- gallery -->
      <div  class="gallery">
         <div class="container">
            <div class="row">
               <div class="col-md-12">
                  <div class="titlepage">
                     <h2>Gallery</h2>
                     <span>Nobel Food Products </span>
                  </div>
               </div>
            </div>
            <div class="row">
                @foreach($categories as $category)
               <div class="col-md-2 col-sm-2">
                  <div class="gallery_img">
                     <figure><img src="data:image/jpeg;base64,{{base64_encode($category->image)}}" alt="#"/></figure>
                  </div>
                  <span>{{$category->name}}</span>
               </div>
               @endforeach
                  
            </div>
         </div>
      </div>
      <!-- end gallery -->
      <!--  contact -->
      <div class="contact">
         <div class="container">
            <div class="row">
               <div class="col-md-12">
                  <div class="titlepage">
                     <h2>Contact Us</h2>
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="col-md-6  padding_right0">
                  <div class="map_main">
                     <div class="map-responsive">
                        <iframe src="https://www.google.com/maps/embed/v1/place?key=AIzaSyA0s1a7phLN0iaD6-UE7m4qP-z21pH0eSc&amp;q=C%2F+d'Aragó,+366,+08009+Barcelona,+Spain" width="600" height="453" frameborder="0" style="border:0; width: 100%;" allowfullscreen=""></iframe>
                     </div>
                  </div>
               </div>
               <div class="col-md-6 padding_left0">
                  <form id="request" class="main_form">
                     <div class="row">
                        <div class="col-md-12 ">
                           <input class="contactus" placeholder="Name" type="type" name="Name">
                        </div>
                        <div class="col-md-12">
                           <input class="contactus" placeholder="Phone" type="type" name="Phone">
                        </div>
                        <div class="col-md-12">
                           <input class="contactus" placeholder="Email" type="type" name="Email">
                        </div>
                        <div class="col-md-12">
                           <textarea class="textarea" placeholder="Message" type="type" Message="Message">Message</textarea>
                        </div>
                        <div class="col-md-12">
                           <button class="send_btn">Send</button>
                        </div>
                     </div>
                  </form>
               </div>
            </div>
         </div>
      </div>
@endsection

@section('scripts')

@endsection