46 lines
2.9 KiB
PHP
46 lines
2.9 KiB
PHP
@extends('layouts.appNew')
|
|
@section('title',@$title)
|
|
@section('content')
|
|
<section id="kegiatan" class="py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-6">
|
|
<div class="max-w-xl">
|
|
<h2 class="text-4xl font-extrabold text-slate-900 mb-4 tracking-tight">Kegiatan Sekolah Adiwiyata</h2>
|
|
<p class="text-slate-500">Kumpulan laporan aktivitas harian dari sekolah-sekolah Adiwiyata Jakarta dalam upaya pelestarian lingkungan.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Activity Grid -->
|
|
<div id="activity-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-8">
|
|
@foreach($kegiatan as $dataKeg)
|
|
<?php
|
|
$image = json_decode($dataKeg->image);
|
|
?>
|
|
<div class="activity-card group bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden flex flex-col h-full fade-in">
|
|
<div class="relative h-48 overflow-hidden">
|
|
<img src="{{ asset($image[0]) }}" class="w-full h-full object-cover group-hover:scale-105 transition duration-500" alt="SMAN 42: Peduli Bumi & Lingkungan">
|
|
<div class="absolute top-4 left-4">
|
|
<span class="px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-green-600 text-white">
|
|
{{ $dataKeg->kategori }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 flex flex-col flex-grow">
|
|
<div class="flex items-center text-slate-400 text-xs font-semibold mb-3">
|
|
<span class="material-symbols-outlined text-sm mr-1">calendar_today</span> {{ date('D',strtotime($dataKeg->created_at)) }}, {{ date('d M Y',strtotime($dataKeg->created_at)) }}
|
|
</div>
|
|
<h3 class="text-lg font-bold text-slate-900 mb-2 leading-tight group-hover:text-green-600 transition">{{ $dataKeg->judul }}</h3>
|
|
<a href="{{ url('kegiatan/'.$dataKeg->slug) }}" class="flex items-center justify-between group/btn py-2 text-green-600 font-bold text-sm">
|
|
<span>Lihat Selengkapnya</span>
|
|
<span class="material-symbols-outlined group-hover/btn:translate-x-1 transition">arrow_forward</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
|
|
</div>
|
|
|
|
<div class="mt-16 text-center">
|
|
<button class="bg-white border-2 border-slate-200 text-slate-700 font-bold px-10 py-4 rounded-2xl hover:bg-slate-50 transition">Muat Lebih Banyak Kegiatan</button>
|
|
</div>
|
|
</section>
|
|
@endsection
|