<section class="text-gray-400 bg-gray-900" style="background-image: url('liniesvoyager180.png');background-repeat: no-repeat;" >
<div class="uk-container uk-container-large">

     <div class="uk-grid uk-flex-center uk-padding-medium">
    <h1 class="uk-text-center uk-text-middle text-5xl uk-text-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 via-blue-500 to-purple-500 title-font mb-6">@yield ('title')</h1>
</div>
	
		<div class="uk-grid uk-flex-center ">
		
						<form id="search-form" action="">
							<div class="uk-inline uk-width-1-1">
								<span class="uk-form-icon uk-form-icon-flip uk-icon" data-uk-icon="icon: search"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="search"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg></span>
								<input class="uk-input uk-width-1-1 search-fld" type="text" placeholder="Type your search" autofocus="">
								<a hidden="" href="#" class="search-filter" data-uk-filter-control="[data-tags*='']">Search</a>
								<a hidden="" href="#" class="search-filter-all uk-active" data-uk-filter-control="">Search all</a>
								<a hidden="" href="#" class="search-filter-none" data-uk-filter-control="[data-empty='']">Filter none</a>
							</div>
						</form>
		</div>
		
		<!--CARDS WRAPPER-->
		
			
		
				<ul class="uk-subnav uk-subnav-pill">
					<li class="uk-active" data-uk-filter-control=""><a href="#">Show All</a></li>
					<li data-uk-filter-control=".painters"><a href="#">painters</a></li>
					<li data-uk-filter-control=".photographers"><a href="#">photographers</a></li>
					<li data-uk-filter-control=".influencers"><a href="#">influencers</a></li>
					<li data-uk-filter-control=".models"><a href="#">models</a></li>
					<li data-uk-filter-control=".music"><a href="#">music</a></li>
					
				</ul>
				<div class="uk-grid uk-grid-medium uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l  uk-child-width-1-4@xl uk-grid-match js-filter" data-uk-grid="masonry: true" data-uk-sortable="handle: .drag-icon">
				
				
		@foreach ($persons as $person)
					
					<!-- card -->
					<div class="{{$person->categoria}}" data-tags="{{$person->nom}} {{$person->categoria}} ">
						<div class="uk-card uk-card-small uk-card-default">
							
							<div class="uk-card-media">
								<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
									<img data-fancybox="gallery" src="storage/{{$person->img}}" >
									<div class="uk-transition-slide-bottom uk-position-bottom uk-overlay uk-overlay-primary">
										<span data-uk-icon="icon:heart; ratio: 0.8"></span>seguidors:  {{$person->ranking}} 
									</div>
								</div>
								
							</div>
							<div class="uk-card-body">
								<h4 class="uk-margin-small-bottom uk-margin-remove-adjacent uk-text-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 via-blue-500 to-purple-500">{{$person->nom}}</h4>
								<p class="uk-text-small uk-text-muted">{{$person->categoria}}-{{$person->updated_at}}</p>
							</div>
							<div class="uk-card-footer">
								<div class="uk-grid uk-grid-small uk-grid-divider uk-flex uk-flex-middle" data-uk-grid>
									
									<div class="uk-width-auto uk-text-right">
										<a href="{{$person->folder}}" data-uk-tooltip="title: gallery folder" class="uk-icon-link" data-uk-icon="icon:folder; ratio: 1.2"target="_blank"></a>
										<a href="{{$person->ins}}" data-uk-tooltip="title: Instagram" class="uk-icon-link" data-uk-icon="icon:instagram; ratio: 1.2"target="_blank"></a>
										<a href="{{$person->youtube}}" data-uk-tooltip="title: canal youtube" class="uk-icon-link" data-uk-icon="icon:youtube; ratio: 1.2"target="_blank"></a>
										<a href="{{$person->face}}" data-uk-tooltip="title: facebook" class="uk-icon-link" data-uk-icon="icon:facebook; ratio: 1.2"target="_blank"></a>
										<a href="{{$person->tiktok}}" data-uk-tooltip="title: tiktok" class="uk-icon-link" data-uk-icon="icon:tiktok; ratio: 1.2"target="_blank"></a>
										<a data-fancybox href="{{$person->video}}" data-uk-tooltip="title: veure video" class="uk-icon-link" data-uk-icon="icon:play-circle; ratio: 1.2"target="_blank"></a>
										<a href="{{$person->mp3}}" data-uk-tooltip="title: escoltar musica" class="uk-icon-link" data-uk-icon="icon:soundcloud; ratio: 1.2"target="_blank"></a>
									</div>
									<div class="uk-width-auto uk-text-right">
										<a data-uk-tooltip="title: Drag this card" href="#" class="uk-icon-link drag-icon" data-uk-icon="icon:move; ratio: 1.2"></a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- /card -->
				@endforeach
					
				</div>
			
			</div>
			
		</section>