dikplhd/resources/views/index.blade.php

117 lines
4.8 KiB
PHP

@extends('layouts.app')
@section('content')
<div class="flex flex-col justify-center items-center mx-auto gap-10 bg-gradient-to-r from-cyan-500 to-success mix-blend-multiply blur-3xl inset-y-0 w-full -z-10" style='min-height:60vh;'>
<div class="p-3">
<h1 class="text-white text-center bold text-4xl">Pencarian Data Menjadi Lebih Sederhana</h1>
</div>
<div class="px-3">
<form action="">
<div class="flex flex-row justify-between items-center gap-10 rounded-full bg-white p-3">
<div>
<select name="" id="" class="form-select border-none">
<option value="">All</option>
</select>
</div>
<div class="">
<input type="text" class="px-6 form-input border-none" placeholder="Data apa yang ingin anda cari..">
</div>
<div class="pl-3">
<button class="btn"><i class="ri-search-line"></i></button>
</div>
</div>
</form>
</div>
<div class="relative container mx-auto p-3">
<div class="grid grid-cols-1 lg:flex -z-10 w-full gap-6 justify-center items-center">
<div class="card rounded-full p-3">
<div class="flex flex-row items-center gap-3">
<div class="p-3 ">
<i class="ri-database-line text-xl"></i>
</div>
<h5 class="text-xl bold">1.000</h5>
<span>Dataset</span>
</div>
</div>
<div class="card rounded-full p-3">
<div class="flex flex-row items-center gap-3">
<div class="p-3 ">
<i class="ri-survey-line text-xl"></i>
</div>
<h5 class="text-xl bold">290</h5>
<span>Survei</span>
</div>
</div>
<div class="card rounded-full p-3">
<div class="flex flex-row items-center gap-3">
<div class="p-3 ">
<i class="ri-box-3-line text-xl"></i>
</div>
<h5 class="text-xl bold">19</h5>
<span>Produk Statistik</span>
</div>
</div>
</div>
</div>
</div>
<div class="container mx-auto hidden">
<div class="px-6 py-10">
<div class="grid md:grid-cols-3 xl:grid-cols-4 gap-6 justify-center items-center">
@foreach($topik as $dataTtopik)
<a href="">
<div class="card px-6 py-3 rounded-full">
<div class="flex flex-row items-center gap-2">
<div class="p-2 ">
<i class="ri-team-line text-xl"></i>
</div>
<div class="">
<h5 class=" text-md">{{$dataTtopik->name}}</h5>
</div>
</div>
</div>
</a>
@endforeach
</div>
</div>
</div>
<div class="card p-10">
<div class="container mx-auto">
<div class="flex flex-col gap-6">
<div>
<h5 class="bold text-2xl">Dataset Terbaru</h5>
</div>
<div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 grid-cols-1 gap-3">
@foreach($dataset as $dataSet)
<div class="card p-6">
<div class="flex flex-col gap-2">
<div class="flex flex-row gap-3">
<div>
<img src="https://lingkunganhidup.jakarta.go.id/dist/images/logo/logo-dlh-big.png" width="80" alt="">
</div>
<div class="flex flex-col gap-3">
<h4 class="font-bold text-md">{{$dataSet->name}}</h4>
<h4 class="text-xs">{{$dataSet->instansi->name}}</h4>
</div>
</div>
<div>
<p>{{substr($dataSet->deskripsi,0,100)}}</p>
</div>
<div>
<p><i class="ri-calendar-line"></i>&nbsp;{{date('d-m-Y',strtotime($dataSet->created_at))}}</p>
</div>
<div>
<a href="" class="btn bg-primary mt-4 text-white">Lihat Selengkapnya&nbsp;<i class="ri-arrow-right-line"></i></a>
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
</div>
@endsection