@section('title', 'Zero Hunger 2| GIU')
@extends('front.new.layouts.app')

<style>
    .main-title {
        text-align: center;
        font-weight: 700;
        color: #f8b233;
        margin-bottom: 40px;
    }

    .box {
        max-width: 700px;
        margin: 0 auto 30px auto;
        padding: 25px 30px;
        border: 1px solid #e6e6e6;
        border-radius: 12px;
        background: #fff;
        text-align: center;
        transition: 0.25s;
    }

    .box:hover {
        box-shadow: 0 8px 24px rgba(248,178,51,0.12);
        transform: translateY(-3px);
    }

    .section-title {
        font-size: 22px;
        font-weight: 600;
        color: #f8b233;
        margin-bottom: 20px;
    }

    .link-item {
        display: block;
        padding: 10px;
        color: #000;
        font-weight: 500;
        text-decoration: none;
        border-bottom: 1px solid #f4f4f4;
        transition: 0.2s;
    }

    .link-item:last-child {
        border-bottom: none;
    }

    .link-item:hover {
        color: #f8b233;
        padding-left: 5px;
    }
</style>
@section('content')
    {{-- Bnanner--}}
    <div id="carouselExampleIndicators" class="carousel slide banner-margin-top" data-bs-ride="carousel" data-bs-interval="3000">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="{{ asset('front/new/img/sdgs/banners/zero-hunger.png') }}" class="d-block w-100" alt="First slide">
            </div>
        </div>

    </div>
    <div class="container py-5">

        <!-- MAIN TITLE -->
        <h2 class="main-title">
            Campus Food Waste
        </h2>

        <!-- BOX 1 -->
        <div class="box">
            <div class="section-title">Campus Food Waste</div>

            <a href="{{ route('campus.food_waste_tracking') }}" class="link-item">
                Campus Food Waste Tracking
            </a>
        </div>

        <!-- BOX 2 -->
        <div class="box">
            <div class="section-title">Student Hunger</div>

            <a href="{{ route('student.food_insecurity') }}" class="link-item">
                Student food insecurity and hunger
            </a>
            <a href="{{ route('student.hunger_interventions') }}" class="link-item">
                Students hunger interventions
            </a>
            <a href="{{ route('student.sustainable_choices') }}" class="link-item">
                Sustainable food choices on campus
            </a>
            <a href="{{ route('student.healthy_affordable') }}" class="link-item">
                Healthy and affordable food choices
            </a>
            <a href="{{ route('student.staff_interventions') }}" class="link-item">
                Staff hunger interventions
            </a>
        </div>

        <!-- BOX 3 -->
        <div class="box">
            <div class="section-title">National Hunger</div>

            <a href="{{ route('food.access_knowledge') }}" class="link-item">
                Access to food security knowledge
            </a>
            <a href="{{ route('food.local_farmers_events') }}" class="link-item">
                Events for local farmers and food producers
            </a>
            <a href="{{ route('food.university_farmers_access') }}" class="link-item">
                University access to local farmers and food producers
            </a>
            <a href="{{ route('food.sustainable_purchases') }}" class="link-item">
                Sustainable food purchases
            </a>
        </div>
        <!-- BOX 4 -->
        <div class="box">
            <div class="section-title">External SDG-AUDIT Report 2024</div>

            <a href="{{ route('external-sdg-audit-report-2024-2') }}" class="link-item">
                External SDG Audit Report
            </a>
        </div>

    </div>
@endsection
@push('js')
@endpush