113 lines
3.4 KiB
Twig
113 lines
3.4 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}VINDN — Find what's on{% endblock %}
|
|
|
|
{% block head_extra %}
|
|
{% include '_leaflet_head.html.twig' %}
|
|
{% include '_datepicker_head.html.twig' %}
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
|
|
<!-- MAP HERO — light: nearest ~20 events, refines once you share your location -->
|
|
<section class="section" style="padding:0;">
|
|
<div class="wrap">
|
|
<p class="eyebrow" style="margin-bottom:8px;"></p>
|
|
<div class="section-head">
|
|
<h1 style="font-size:clamp(28px,4vw,40px);">Was in deiner Nähe los ist</h1>
|
|
<a href="{{ path('map') }}" class="btn btn-primary btn-sm">Open full map →</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section" style="padding:0;">
|
|
{% include '_map_stage.html.twig' with { compact: true } %}
|
|
</section>
|
|
|
|
<!-- BROWSE EVENTS -->
|
|
<section class="section">
|
|
<div class="wrap">
|
|
<div class="section-head">
|
|
<div>
|
|
<p class="eyebrow" style="margin-bottom:8px;">Browse</p>
|
|
<h2>Find events by category</h2>
|
|
</div>
|
|
<a href="{{ path('event_list') }}" class="section-link">Browse all events →</a>
|
|
</div>
|
|
<div class="chip-row">
|
|
{% for category in popularCategories %}
|
|
<a href="{{ path('event_list', {category: category}) }}" class="chip">{{ category }}</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- THIS WEEK -->
|
|
<section class="section" style="background:var(--paper-dim);">
|
|
<div class="wrap">
|
|
<div class="section-head">
|
|
<div>
|
|
<p class="eyebrow" style="margin-bottom:8px;">Live from the importer</p>
|
|
<h2>Worth planning around</h2>
|
|
</div>
|
|
<a href="{{ path('event_list') }}" class="section-link">Browse all events →</a>
|
|
</div>
|
|
<div class="card-grid">
|
|
{% for event in upcomingEvents %}
|
|
{% include 'events/_card.html.twig' with { event: event } %}
|
|
{% else %}
|
|
<p style="color:var(--muted);">No events imported yet — check back once the backend's import job has run.</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{% endblock %}
|
|
|
|
{% block footer %}
|
|
<div class="footer-grid">
|
|
<div>
|
|
<img src="{{ asset('images/vindn_logo_adobe.svg') }}" alt="VINDN" style="height:24px; margin-bottom:14px;">
|
|
<p style="max-width:260px; font-size:14px; color:var(--muted);">The board for everything on, wherever you are.</p>
|
|
</div>
|
|
<div>
|
|
<h4>Explore</h4>
|
|
<ul>
|
|
<li><a href="{{ path('event_list') }}">Browse events</a></li>
|
|
<li><a href="{{ path('map') }}">Map</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4>Organizers</h4>
|
|
<ul>
|
|
<li><a href="#">List an event</a></li>
|
|
<li><a href="#">Pricing</a></li>
|
|
<li><a href="#">Guidelines</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4>Company</h4>
|
|
<ul>
|
|
<li><a href="#">About</a></li>
|
|
<li><a href="#">Contact</a></li>
|
|
<li><a href="#">Privacy</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<span>© 2026 VINDN</span>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
{% include '_leaflet_scripts.html.twig' %}
|
|
{% include '_datepicker_scripts.html.twig' %}
|
|
<script type="application/json" id="map-data">{{ mapEventsJson|raw }}</script>
|
|
<script>
|
|
Vindn.initMapStage({
|
|
events: Vindn.readEmbeddedJson('map-data'),
|
|
limit: 20,
|
|
defaultCenter: [{{ centerLat }}, {{ centerLon }}]
|
|
});
|
|
</script>
|
|
{% endblock %}
|