forked from Ugric/Komodo-Hub
51 lines
3.4 KiB
Django/Jinja
51 lines
3.4 KiB
Django/Jinja
{% extends "base.jinja" %}
|
|
{% block title %}Home{% endblock %}
|
|
{% block head %}
|
|
{% endblock %}
|
|
{% block content %}
|
|
{% from 'button.html' import button %}
|
|
<!-- Banner section -->
|
|
<section id="hero" style="padding: 100px 20px; text-align: center;">
|
|
<img src="/images/image.png">
|
|
<h1>Protecting Indonesia's Endangered Species Together</h1>
|
|
<p>Komodo Hub is dedicated to safeguarding the incredible biodiversity of Indonesia. Join us in our mission to conserve and protect these precious creatures for future generations.</p>
|
|
{{ button(url='#', button_text='Donate Now', extra_classes='green') }}
|
|
{{ button(url='#featured-species', button_text='Explore Species', extra_classes='blue') }}
|
|
{{ button(url='/register', button_text='Join the Movement', extra_classes='red') }}
|
|
</div>
|
|
</section>
|
|
<!-- Brief about section -->
|
|
<section id="about" style="padding: 50px 20px; text-align: center;">
|
|
<h2>What is Komodo Hub?</h2>
|
|
<p style="max-width: 800px; margin: 0 auto;">Komodo Hub is a digital platform designed to support conservation and species protection efforts across Indonesia. We connect passionate individuals, educators, and organizations to make a tangible difference.</p>
|
|
<a href="/about" style="display: inline-block; margin-top: 20px; color: #008CBA; text-decoration: none;">Read More →</a>
|
|
</section>
|
|
<!-- Featured Species -->
|
|
<section id="featured-species" style="padding: 50px 20px; background-color: #f9f9f9; text-align: center;">
|
|
<h2>Featured Species</h2>
|
|
<div style="display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 30px;">
|
|
<div style="border: 1px solid #ddd; padding: 20px; border-radius: 8px; width: 250px;">
|
|
<h3><a href="/species/komodo-dragon" style="text-decoration: none; color: #333;">Komodo Dragon</a></h3>
|
|
<p>Main category: Reptile</p>
|
|
</div>
|
|
<div style="border: 1px solid #ddd; padding: 20px; border-radius: 8px; width: 250px;">
|
|
<h3><a href="/species/sumatran-tiger" style="text-decoration: none; color: #333;">Sumatran Tiger</a></h3>
|
|
<p>Main category: Mammal</p>
|
|
</div>
|
|
<div style="border: 1px solid #ddd; padding: 20px; border-radius: 8px; width: 250px;">
|
|
<h3><a href="/species/orangutan" style="text-decoration: none; color: #333;">Orangutan</a></h3>
|
|
<p>Main category: Mammal</p>
|
|
</div>
|
|
</div>
|
|
<a href="/species" style="display: inline-block; margin-top: 40px; background-color: #555; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px;">View All Species</a>
|
|
</section>
|
|
<!-- Schools & communities section -->
|
|
<section id="schools-communities" style="padding: 50px 20px; text-align: center; background-color: #fff;">
|
|
<h2>Schools & Communities</h2>
|
|
<p style="max-width: 800px; margin: 0 auto;">Schools and communities play a vital role in conservation. Discover how your group can get involved through educational programs, fundraising, and awareness campaigns.</p>
|
|
<div style="margin-top: 30px;">
|
|
<a href="/schools-register" style="background-color: #2196F3; color: white; padding: 15px 25px; text-decoration: none; border-radius: 5px; margin: 0 10px;">Register Your School</a>
|
|
<a href="/communities-register" style="background-color: #FF9800; color: white; padding: 15px 25px; text-decoration: none; border-radius: 5px; margin: 0 10px;">Join as a Community</a>
|
|
</div>
|
|
</section>
|
|
{% endblock %} |