src/StartPlatz/Bundle/AlphaBundle/Resources/views/Startup/startups.sp-public-spring-26.html.twig line 1

Open in your IDE?
  1. {# Level-3-Template: /startups — SP Public Spring 26 #}
  2. {# Card-Pattern: Brutalist 2b (Programm-Farb-Header) #}
  3. {# Shared Pattern: doc/modernisation/b-130-sp-public-spring-26/shared-pattern-startup-card.md #}
  5. {% extends "@StartPlatzStyleBundle/base.sp-public-spring-26.html.twig" %}
  7. {% block topicColor %}blue{% endblock %}
  9. {% block title %}Startups — STARTPLATZ{% endblock %}
  11. {% block metaData %}
  12.     <meta name="description" content="{{ parentPage.metaDescription|default('Startups im STARTPLATZ Ökosystem — Köln und Düsseldorf') }}">
  13.     <link rel="canonical" href="{{ url('homepage_startups_home') }}">
  14.     <link rel="alternate" hreflang="de" href="{{ url('homepage_startups_home') }}">
  15.     <link rel="alternate" hreflang="en" href="{{ url('homepage_startups_home_english') }}">
  16. {% endblock %}
  18. {% block content %}
  20. {# ===== HERO (kompakt, Blau→Gruen Gradient) ===== #}
  21. <section class="diagonal-bottom stripe-decoration pt-28 pb-24 sm:pt-32 sm:pb-28"
  22.          style="background: linear-gradient(135deg, #0080bb 0%, #7ab800 100%);">
  23.     <div class="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
  24.         <h1 class="font-display text-4xl sm:text-5xl lg:text-6xl text-white mb-4">
  25.             {{ parentPage.title|default('Unsere Startups') }}
  26.         </h1>
  27.         <p class="text-lg text-white/90 max-w-2xl mx-auto">
  28.             {{ parentPage.teaser|default('Innovative Startups aus dem STARTPLATZ Ökosystem in Köln und Düsseldorf') }}
  29.         </p>
  30.     </div>
  31. </section>
  33. {# ===== FILTER + BANDED GRID ===== #}
  34. <div x-data="startupFilter()">
  36.     {# --- Filter-Bar --- #}
  37.     <section class="py-8 sm:py-10">
  38.         <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
  39.             <p class="text-sm text-sp-gray/60 mb-4">
  40.                 <span x-text="visibleCount"></span> von {{ total }} Startups
  41.             </p>
  42.             <div class="flex flex-wrap gap-2">
  43.                 <button @click="filter = 'alle'"
  44.                         class="px-4 py-2 rounded-lg text-sm font-semibold transition-colors"
  45.                         :class="filter === 'alle' ? 'bg-sp-blue text-white' : 'bg-sp-gray-light text-sp-gray hover:bg-sp-gray-mid'">
  46.                     Alle ({{ total }})
  47.                 </button>
  48.                 {% for item in industries %}
  49.                     {% if item.industry is not empty %}
  50.                     <button @click="filter = '{{ item.industry|e('js') }}'"
  51.                             class="px-4 py-2 rounded-lg text-sm font-semibold transition-colors"
  52.                             :class="filter === '{{ item.industry|e('js') }}' ? 'bg-sp-blue text-white' : 'bg-sp-gray-light text-sp-gray hover:bg-sp-gray-mid'">
  53.                         {{ item.industry }} ({{ item.number }})
  54.                     </button>
  55.                     {% endif %}
  56.                 {% endfor %}
  57.             </div>
  58.         </div>
  59.     </section>
  61.     {# --- Startup-Grid mit Hintergrund-Baendern --- #}
  62.     {% set cardsPerBand = 6 %}
  63.     {% set totalCards = startups|length %}
  64.     {% set bands = ((totalCards / cardsPerBand)|round(0, 'ceil'))|default(1) %}
  66.     {% for band in 0..(bands - 1) %}
  67.         {% set bandStartups = startups|slice(band * cardsPerBand, cardsPerBand) %}
  68.         {% set isGray = (band % 2 == 1) %}
  70.         <section class="{{ isGray ? 'bg-sp-gray-light diagonal-both py-12 sm:py-14' : 'py-8 sm:py-10' }}">
  71.             <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
  72.                 <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
  73.                     {% for startup in bandStartups %}
  75.                     {# --- Programm-Farbe bestimmen (Prioritaet: Acc > GS > RP > SP > Neutral) --- #}
  76.                     {% set teamTags = (startup.teamId and teams[startup.teamId] is defined) ? teams[startup.teamId].tags|default('') : '' %}
  78.                     {% if '#badge-accelerator' in teamTags %}
  79.                         {% set headerStyle = 'background: linear-gradient(135deg, #004a99 0%, #0088dd 100%)' %}
  80.                         {% set progDot = 'bg-acc-blue' %}
  81.                         {% set progText = 'text-acc-blue' %}
  82.                         {% set progName = 'Accelerator' %}
  83.                     {% elseif '#badge-gruenderstipendium' in teamTags %}
  84.                         {% set headerStyle = 'background: linear-gradient(135deg, #a8614a 0%, #d9967a 100%)' %}
  85.                         {% set progDot = 'bg-gs-terracotta' %}
  86.                         {% set progText = 'text-gs-terracotta' %}
  87.                         {% set progName = 'Gründerstipendium' %}
  88.                     {% elseif '#badge-rheinland-pitch' in teamTags %}
  89.                         {% set headerStyle = 'background: linear-gradient(135deg, #c42535 0%, #ef7480 100%)' %}
  90.                         {% set progDot = 'bg-rp-red' %}
  91.                         {% set progText = 'text-rp-red' %}
  92.                         {% set progName = 'Rheinland Pitch' %}
  93.                     {% elseif '#badge-startplatz' in teamTags %}
  94.                         {% set headerStyle = 'background: linear-gradient(135deg, #5a8a00 0%, #8fd414 100%)' %}
  95.                         {% set progDot = 'bg-sp-green' %}
  96.                         {% set progText = 'text-sp-green-dark' %}
  97.                         {% set progName = 'STARTPLATZ' %}
  98.                     {% else %}
  99.                         {% set headerStyle = 'background: linear-gradient(135deg, #5c5f64 0%, #8a8d92 100%)' %}
  100.                         {% set progDot = '' %}
  101.                         {% set progText = 'text-sp-gray' %}
  102.                         {% set progName = '' %}
  103.                     {% endif %}
  105.                     <a href="{{ path('homepage_startup_single', {slug: startup.id ~ '-' ~ startup.slug|default('')}) }}"
  106.                        class="card-brut block rounded-xl overflow-hidden group"
  107.                        x-show="filter === 'alle' || filter === '{{ startup.industry|default('')|e('js') }}'">
  109.                         {# === Farbiger Header (Gradient) === #}
  110.                         <div class="px-6 py-5" style="{{ headerStyle }}">
  111.                             <div class="flex items-center justify-between mb-1.5">
  112.                                 <span class="text-[11px] font-bold uppercase tracking-[0.15em] text-white/90">
  113.                                     {{ startup.industry|default('') }}
  114.                                 </span>
  115.                                 {% if startup.city|default(false) or startup.location|default(false) %}
  116.                                 <span class="text-[11px] font-semibold text-white/75">
  117.                                     {{ startup.city|default(startup.location) }}
  118.                                 </span>
  119.                                 {% endif %}
  120.                             </div>
  121.                             <h3 class="text-xl font-bold text-white leading-tight">{{ startup.name }}</h3>
  122.                         </div>
  124.                         {# === Weisser Body === #}
  125.                         <div class="px-6 py-5 bg-white">
  126.                             {% if startup.oneSentencePitch %}
  127.                                 {% set pitchClean = startup.oneSentencePitch|striptags|trim %}
  128.                                 <p class="text-sm text-sp-gray/70 leading-relaxed mb-4">
  129.                                     {{ (pitchClean|length > 140 ? pitchClean|slice(0, 140) ~ '…' : pitchClean)|raw }}
  130.                                 </p>
  131.                             {% endif %}
  133.                             {# Programm-Indikator #}
  134.                             {% if progName %}
  135.                             <div class="flex items-center gap-2 mb-3">
  136.                                 <span class="w-2 h-2 rounded-full {{ progDot }}"></span>
  137.                                 <span class="text-[10px] font-bold {{ progText }} uppercase tracking-wider">{{ progName }}</span>
  138.                             </div>
  139.                             {% endif %}
  141.                             <span class="text-sm font-bold {{ progName ? progText : 'text-sp-gray' }}">Mehr erfahren &rarr;</span>
  142.                         </div>
  143.                     </a>
  144.                     {% endfor %}
  145.                 </div>
  146.             </div>
  147.         </section>
  148.     {% endfor %}
  150.     {# --- Keine Ergebnisse --- #}
  151.     <div x-show="visibleCount === 0" x-cloak class="text-center py-16">
  152.         <p class="text-sp-gray/60">Keine Startups in dieser Kategorie gefunden.</p>
  153.     </div>
  155.     {# --- Pagination --- #}
  156.     {% if maxPages > 1 %}
  157.     <nav class="flex items-center justify-center gap-2 py-12">
  158.         {% if thisPage > 1 %}
  159.             <a href="{{ path('homepage_startups_home', templateVars|merge({page: thisPage - 1})) }}"
  160.                class="px-4 py-2 rounded-lg text-sm font-semibold bg-sp-gray-light text-sp-gray hover:bg-sp-gray-mid transition-colors">
  161.                 &larr; Zurück
  162.             </a>
  163.         {% endif %}
  164.         <span class="px-4 py-2 text-sm text-sp-gray/60">
  165.             Seite {{ thisPage }} von {{ maxPages }}
  166.         </span>
  167.         {% if thisPage < maxPages %}
  168.             <a href="{{ path('homepage_startups_home', templateVars|merge({page: thisPage + 1})) }}"
  169.                class="px-4 py-2 rounded-lg text-sm font-semibold bg-sp-blue text-white hover:bg-sp-blue-dark transition-colors">
  170.                 Weiter &rarr;
  171.             </a>
  172.         {% endif %}
  173.     </nav>
  174.     {% endif %}
  176. </div>
  178. {% endblock %}
  180. {% block javascripts %}
  181. <script>
  182.     function startupFilter() {
  183.         const counts = {
  184.             'alle': {{ startups|length }},
  185.             {% for item in industries %}{% if item.industry is not empty %}'{{ item.industry|e('js') }}': {{ item.number }},{% endif %}
  186.             {% endfor %}
  187.         };
  188.         return {
  189.             filter: 'alle',
  190.             get visibleCount() {
  191.                 return counts[this.filter] || 0;
  192.             }
  193.         }
  194.     }
  195. </script>
  196. {% endblock %}