{% extends 'base.html' %}
{% block title %}Beranda | {{ site_settings.get('program_name','Pendidikan Teknik Informatika') }}{% endblock %}
{% block content %}
<section class="hero"><div class="hero-backdrop"></div><div class="container hero-inner"><div class="hero-copy"><span class="eyebrow"><span></span> PENDIDIKAN · TEKNOLOGI · INOVASI</span><h1>{{ site_settings.get('hero_title','Membangun Pendidik dan Inovator Digital Masa Depan') }}</h1><p>{{ site_settings.get('hero_description','Mempersiapkan generasi pendidik dan profesional teknologi yang kreatif, adaptif, dan berdampak.') }}</p><div class="d-flex flex-wrap gap-3 mt-4"><a class="btn btn-brand btn-lg" href="{{ url_for('public.profile') }}">Kenali Program Studi <i class="bi bi-arrow-up-right ms-1"></i></a><a class="btn btn-outline-light btn-lg" href="{{ url_for('public.news_list') }}">Lihat Berita</a></div><div class="hero-note mt-5"><span class="hero-line"></span><span>Menyiapkan talenta digital untuk masa depan Indonesia</span></div></div><div class="hero-visual" aria-label="Ilustrasi teknologi dan pembelajaran"><div class="visual-card visual-card-main"><div class="visual-top"><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="visual-label">DIGITAL LEARNING LAB</span></div><div class="visual-screen"><div class="screen-code"><i class="bi bi-code-slash"></i><span>CREATE</span><span>TEACH</span><span>INNOVATE</span></div><div class="screen-orbit orbit-one"></div><div class="screen-orbit orbit-two"></div></div><div class="visual-caption"><span><b>01</b> Learning by doing</span><i class="bi bi-arrow-up-right"></i></div></div><div class="floating-chip chip-one"><i class="bi bi-cpu"></i> Teknologi</div><div class="floating-chip chip-two"><i class="bi bi-lightbulb"></i> Kreativitas</div><div class="visual-index">PTI / FUTURE READY</div></div></div><div class="hero-bottom container"><span>01 — PROGRAM STUDI</span><span>SCROLL UNTUK MENJELAJAHI <i class="bi bi-arrow-down"></i></span></div></section>
<section class="section section-stats"><div class="container"><div class="section-kicker">PROGRAM STUDI DALAM ANGKA</div><div class="row g-3 mt-2"><div class="col-6 col-lg-3"><div class="stat-card"><strong>01</strong><span>Belajar sepanjang hayat</span></div></div><div class="col-6 col-lg-3"><div class="stat-card"><strong>02</strong><span>Kompetensi digital</span></div></div><div class="col-6 col-lg-3"><div class="stat-card"><strong>03</strong><span>Inovasi pembelajaran</span></div></div><div class="col-6 col-lg-3"><div class="stat-card"><strong>04</strong><span>Kolaborasi berdampak</span></div></div></div><p class="small text-secondary mt-3 mb-0">Statistik resmi mahasiswa, dosen, alumni, dan prestasi dapat ditambahkan melalui pengembangan modul statistik CMS. Angka di atas adalah prinsip program, bukan data institusi.</p></div></section>
<section class="section"><div class="container"><div class="section-heading"><div><div class="section-kicker">MENGENAL PTI</div><h2>Menghubungkan pendidikan<br>dan masa depan teknologi.</h2></div><a class="text-link" href="{{ url_for('public.profile') }}">Profil program studi <i class="bi bi-arrow-up-right"></i></a></div><div class="row g-4 mt-2"><div class="col-lg-5"><div class="editorial-panel"><span class="panel-number">01 / OUR PURPOSE</span><i class="bi bi-mortarboard panel-icon"></i><h3>Mendidik dengan teknologi, berinovasi untuk manusia.</h3><p>Program studi yang memadukan fondasi ilmu komputer, praktik rekayasa, dan pendekatan pedagogis untuk menjawab tantangan pembelajaran digital.</p><a href="/profil" class="text-link text-white">Selengkapnya <i class="bi bi-arrow-up-right"></i></a></div></div><div class="col-lg-7"><div class="feature-grid"><article class="feature-card"><i class="bi bi-laptop"></i><h3>Kompetensi teknologi</h3><p>Memahami komputasi, pengembangan perangkat lunak, dan ekosistem digital.</p></article><article class="feature-card"><i class="bi bi-easel2"></i><h3>Inovasi pembelajaran</h3><p>Merancang pengalaman belajar yang aktif, inklusif, dan relevan.</p></article><article class="feature-card"><i class="bi bi-people"></i><h3>Kolaborasi</h3><p>Menghubungkan mahasiswa, pendidik, industri, dan masyarakat.</p></article><article class="feature-card"><i class="bi bi-rocket-takeoff"></i><h3>Karya berdampak</h3><p>Mendorong riset terapan, kreativitas, dan solusi digital.</p></article></div></div></div></div></section>
<section class="section section-soft"><div class="container"><div class="section-heading"><div><div class="section-kicker">KABAR TERBARU</div><h2>Berita dan cerita PTI.</h2><p class="section-subtitle">Informasi dan perkembangan terbaru dari program studi.</p></div><a class="text-link" href="{{ url_for('public.news_list') }}">Semua berita <i class="bi bi-arrow-up-right"></i></a></div><div class="row g-4 mt-2">{% for item in news %}<div class="col-md-6 col-lg-4"><article class="news-card"><a href="{{ url_for('public.news_detail',slug=item.slug) }}" class="news-image">{% if item.image %}<img src="{{ url_for('static',filename=item.image) }}" alt="{{ item.title }}" loading="lazy">{% else %}<div class="image-placeholder"><i class="bi bi-journal-richtext"></i></div>{% endif %}<span class="image-arrow"><i class="bi bi-arrow-up-right"></i></span></a><div class="news-content"><div class="news-meta">{{ item.category.name if item.category else 'Kabar PTI' }} <span>·</span> {{ item.published_at.strftime('%d %b %Y') if item.published_at else '' }}</div><h3><a href="{{ url_for('public.news_detail',slug=item.slug) }}">{{ item.title }}</a></h3><p>{{ item.summary }}</p><a class="text-link" href="{{ url_for('public.news_detail',slug=item.slug) }}">Baca selengkapnya <i class="bi bi-arrow-right"></i></a></div></article></div>{% else %}<div class="col-12"><div class="empty-state"><i class="bi bi-newspaper"></i><h3>Berita segera hadir</h3><p>Informasi terbaru akan ditampilkan di sini setelah diterbitkan oleh admin.</p></div></div>{% endfor %}</div></div></section>
<section class="section"><div class="container"><div class="section-heading"><div><div class="section-kicker">AGENDA & AKTIVITAS</div><h2>Belajar tidak berhenti di kelas.</h2></div><a class="text-link" href="{{ url_for('public.activities_list') }}">Jelajahi aktivitas <i class="bi bi-arrow-up-right"></i></a></div><div class="activity-list mt-4">{% for item in activities %}<a class="activity-row" href="{{ url_for('public.activities_list') }}"><span class="activity-index">{{ "%02d"|format(loop.index) }}</span><span class="activity-title"><small>{{ item.category }}</small><strong>{{ item.title }}</strong></span><span class="activity-location">{{ item.location or 'Informasi kegiatan' }}</span><i class="bi bi-arrow-up-right"></i></a>{% else %}<div class="empty-state"><p>Agenda kegiatan akan muncul setelah dipublikasikan.</p></div>{% endfor %}</div></div></section>
<section class="cta-section"><div class="container cta-inner"><div><div class="section-kicker text-white-50">LANGKAH BERIKUTNYA</div><h2>Jadilah bagian dari<br>generasi inovator digital.</h2><p>Kenali program studi dan temukan ruang untuk bertumbuh.</p></div><a class="btn btn-light btn-lg" href="{{ url_for('public.contact') }}">Hubungi Program Studi <i class="bi bi-arrow-up-right ms-1"></i></a></div></section>
{% endblock %}