src/StartPlatz/Bundle/AcceleratorBundle/Resources/views/AcceleratorStartup/detail.html.twig line 1

Open in your IDE?
  1. {% extends '@StartPlatzStyleBundle/Bootstrap4/base.homepage.oneColumn.html.twig' %}
  3. {% block title %}{{ startup.name }} - {{ isEnglish ? 'AI Accelerator' : 'KI-Accelerator' }}{% endblock %}
  5. {% block additionalHead %}
  6.     <link rel="stylesheet" href="{{ asset('bundles/startplatzstyle/css/startplatz.accelerator.css') }}">
  7.     <style>
  8.         .startup-detail-hero {
  9.             background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  10.             padding: 80px 0 60px;
  11.             position: relative;
  12.             overflow: hidden;
  13.         }
  14.         .startup-detail-hero::before {
  15.             content: '';
  16.             position: absolute;
  17.             top: 0;
  18.             left: 0;
  19.             right: 0;
  20.             bottom: 0;
  21.             background: radial-gradient(circle at 20% 80%, rgba(0, 200, 150, 0.1) 0%, transparent 50%),
  22.                         radial-gradient(circle at 80% 20%, rgba(0, 150, 200, 0.1) 0%, transparent 50%);
  23.         }
  24.         .startup-detail-content {
  25.             position: relative;
  26.             z-index: 1;
  27.         }
  28.         .startup-logo-container {
  29.             width: 120px;
  30.             height: 120px;
  31.             background: white;
  32.             border-radius: 20px;
  33.             display: flex;
  34.             align-items: center;
  35.             justify-content: center;
  36.             box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  37.             margin-bottom: 24px;
  38.         }
  39.         .startup-logo-container img {
  40.             max-width: 90px;
  41.             max-height: 90px;
  42.             object-fit: contain;
  43.         }
  44.         .startup-logo-placeholder {
  45.             width: 120px;
  46.             height: 120px;
  47.             background: linear-gradient(135deg, #00c896 0%, #00a67e 100%);
  48.             border-radius: 20px;
  49.             display: flex;
  50.             align-items: center;
  51.             justify-content: center;
  52.             font-size: 48px;
  53.             font-weight: bold;
  54.             color: white;
  55.             box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  56.             margin-bottom: 24px;
  57.         }
  58.         .startup-detail-title {
  59.             font-size: 2.5rem;
  60.             font-weight: 700;
  61.             color: white;
  62.             margin-bottom: 8px;
  63.         }
  64.         .startup-detail-industry {
  65.             color: #00c896;
  66.             font-size: 1.1rem;
  67.             margin-bottom: 16px;
  68.         }
  69.         .startup-batch-badge {
  70.             display: inline-block;
  71.             background: rgba(0, 200, 150, 0.2);
  72.             border: 1px solid #00c896;
  73.             color: #00c896;
  74.             padding: 6px 16px;
  75.             border-radius: 20px;
  76.             font-size: 0.9rem;
  77.             font-weight: 500;
  78.         }
  79.         .startup-detail-section {
  80.             padding: 60px 0;
  81.             background: #f8f9fa;
  82.         }
  83.         .detail-card {
  84.             background: white;
  85.             border-radius: 16px;
  86.             padding: 32px;
  87.             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  88.             height: 100%;
  89.         }
  90.         .detail-card h3 {
  91.             font-size: 1.25rem;
  92.             font-weight: 600;
  93.             color: #1a1a2e;
  94.             margin-bottom: 16px;
  95.             display: flex;
  96.             align-items: center;
  97.             gap: 10px;
  98.         }
  99.         .detail-card h3 i {
  100.             color: #00c896;
  101.         }
  102.         .detail-card p {
  103.             color: #555;
  104.             line-height: 1.7;
  105.         }
  106.         .startup-website-btn {
  107.             display: inline-flex;
  108.             align-items: center;
  109.             gap: 8px;
  110.             background: linear-gradient(135deg, #00c896 0%, #00a67e 100%);
  111.             color: white;
  112.             padding: 12px 24px;
  113.             border-radius: 8px;
  114.             text-decoration: none;
  115.             font-weight: 500;
  116.             transition: transform 0.2s, box-shadow 0.2s;
  117.         }
  118.         .startup-website-btn:hover {
  119.             transform: translateY(-2px);
  120.             box-shadow: 0 8px 20px rgba(0, 200, 150, 0.3);
  121.             color: white;
  122.             text-decoration: none;
  123.         }
  124.         .back-link {
  125.             color: rgba(255, 255, 255, 0.7);
  126.             text-decoration: none;
  127.             display: inline-flex;
  128.             align-items: center;
  129.             gap: 8px;
  130.             margin-bottom: 32px;
  131.             transition: color 0.2s;
  132.         }
  133.         .back-link:hover {
  134.             color: white;
  135.             text-decoration: none;
  136.         }
  137.         .startup-card-link {
  138.             text-decoration: none;
  139.             color: inherit;
  140.         }
  141.         .startup-card-link:hover {
  142.             text-decoration: none;
  143.             color: inherit;
  144.         }
  145.         .admin-actions {
  146.             margin-top: 20px;
  147.             padding-top: 20px;
  148.             border-top: 1px solid #eee;
  149.         }
  150.         /* Ebene 2 & 3 Section Styles */
  151.         .startup-public-details,
  152.         .startup-internal-details {
  153.             padding: 60px 0;
  154.         }
  155.         .startup-public-details {
  156.             background: white;
  157.         }
  158.         .startup-internal-details {
  159.             background: #f0f4f8;
  160.         }
  161.         .section-header {
  162.             font-size: 1.5rem;
  163.             font-weight: 600;
  164.             color: #1a1a2e;
  165.             margin-bottom: 24px;
  166.             display: flex;
  167.             align-items: center;
  168.             gap: 12px;
  169.         }
  170.         .section-header i {
  171.             color: #00c896;
  172.         }
  173.         .content-card {
  174.             background: white;
  175.             border-radius: 16px;
  176.             padding: 40px;
  177.             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  178.         }
  179.         .content-card.internal {
  180.             border-left: 4px solid #00c896;
  181.         }
  182.         .login-wall-card {
  183.             background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  184.             border-radius: 16px;
  185.             padding: 60px 40px;
  186.             text-center;
  187.             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  188.             border: 2px dashed #dee2e6;
  189.         }
  190.         .login-wall-card h4 {
  191.             font-size: 1.5rem;
  192.             font-weight: 600;
  193.             color: #1a1a2e;
  194.             margin-bottom: 16px;
  195.         }
  196.         .login-wall-card .lock-icon {
  197.             font-size: 48px;
  198.             color: #00c896;
  199.             margin-bottom: 20px;
  200.         }
  201.         .login-wall-card p {
  202.             color: #6c757d;
  203.             max-width: 500px;
  204.             margin: 0 auto 24px;
  205.             line-height: 1.7;
  206.         }
  207.         .login-btn {
  208.             display: inline-flex;
  209.             align-items: center;
  210.             gap: 8px;
  211.             background: linear-gradient(135deg, #00c896 0%, #00a67e 100%);
  212.             color: white;
  213.             padding: 14px 32px;
  214.             border-radius: 8px;
  215.             text-decoration: none;
  216.             font-weight: 600;
  217.             font-size: 1.1rem;
  218.             transition: transform 0.2s, box-shadow 0.2s;
  219.         }
  220.         .login-btn:hover {
  221.             transform: translateY(-2px);
  222.             box-shadow: 0 8px 20px rgba(0, 200, 150, 0.3);
  223.             color: white;
  224.             text-decoration: none;
  225.         }
  226.         .cta-section {
  227.             margin-top: 32px;
  228.             padding-top: 32px;
  229.             border-top: 1px solid #e9ecef;
  230.         }
  231.         .cta-section h5 {
  232.             font-weight: 600;
  233.             margin-bottom: 16px;
  234.             color: #1a1a2e;
  235.         }
  236.         .cta-btn {
  237.             margin-right: 8px;
  238.             margin-bottom: 8px;
  239.         }
  240.         .member-badge {
  241.             display: inline-flex;
  242.             align-items: center;
  243.             gap: 6px;
  244.             background: rgba(0, 200, 150, 0.1);
  245.             color: #00a67e;
  246.             padding: 8px 16px;
  247.             border-radius: 20px;
  248.             font-size: 0.85rem;
  249.             font-weight: 500;
  250.             margin-bottom: 24px;
  251.         }
  252.         /* Rollenbasierte CTA-Boxen */
  253.         .role-cta {
  254.             padding: 20px;
  255.             border-radius: 12px;
  256.             margin-bottom: 16px;
  257.             background: #f8f9fa;
  258.             border-left: 4px solid #6c757d;
  259.         }
  260.         .role-cta h5 {
  261.             margin-bottom: 12px;
  262.             font-size: 1.1rem;
  263.         }
  264.         .role-cta p {
  265.             margin-bottom: 16px;
  266.             color: #555;
  267.         }
  268.         .investor-cta {
  269.             border-left-color: #28a745;
  270.             background: rgba(40, 167, 69, 0.05);
  271.         }
  272.         .mentor-cta {
  273.             border-left-color: #007bff;
  274.             background: rgba(0, 123, 255, 0.05);
  275.         }
  276.         .eir-cta {
  277.             border-left-color: #17a2b8;
  278.             background: rgba(23, 162, 184, 0.05);
  279.         }
  280.         .general-cta {
  281.             border-left-color: #6c757d;
  282.             background: rgba(108, 117, 125, 0.05);
  283.         }
  284.         .admin-actions {
  285.             margin-top: 16px;
  286.             padding-top: 16px;
  287.             border-top: 1px dashed #dee2e6;
  288.         }
  289.         /* Value Unit Boxen für Ebene 3 */
  290.         .value-unit {
  291.             padding: 16px;
  292.             border-radius: 8px;
  293.             margin-bottom: 16px;
  294.             background: #f8f9fa;
  295.         }
  296.         .value-unit h5 {
  297.             font-size: 1rem;
  298.             margin-bottom: 12px;
  299.         }
  300.         .value-unit ul {
  301.             margin-bottom: 0;
  302.             padding-left: 20px;
  303.         }
  304.         .value-unit.mentoring {
  305.             border-left: 3px solid #007bff;
  306.         }
  307.         .value-unit.corporate {
  308.             border-left: 3px solid #28a745;
  309.         }
  310.         .value-unit.investment {
  311.             border-left: 3px solid #ffc107;
  312.         }
  314.         /* Internal CTA Card (Link zur internen Seite) */
  315.         .internal-cta-card {
  316.             background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  317.             border-radius: 20px;
  318.             padding: 50px 40px;
  319.             box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  320.             border: 2px solid #e9ecef;
  321.             max-width: 700px;
  322.             margin: 0 auto;
  323.         }
  324.         .internal-cta-icon {
  325.             width: 80px;
  326.             height: 80px;
  327.             background: linear-gradient(135deg, #00c896 0%, #00a67e 100%);
  328.             border-radius: 50%;
  329.             display: flex;
  330.             align-items: center;
  331.             justify-content: center;
  332.             margin: 0 auto 24px;
  333.             box-shadow: 0 8px 25px rgba(0, 200, 150, 0.3);
  334.         }
  335.         .internal-cta-icon i {
  336.             font-size: 32px;
  337.             color: white;
  338.         }
  339.         .internal-cta-card h3 {
  340.             font-size: 1.75rem;
  341.             font-weight: 700;
  342.             color: #1a1a2e;
  343.             margin-bottom: 16px;
  344.         }
  345.         .internal-cta-description {
  346.             color: #555;
  347.             font-size: 1.1rem;
  348.             line-height: 1.7;
  349.             max-width: 550px;
  350.             margin: 0 auto 28px;
  351.         }
  352.         .internal-cta-features {
  353.             display: flex;
  354.             flex-wrap: wrap;
  355.             justify-content: center;
  356.             gap: 12px;
  357.             margin-bottom: 32px;
  358.         }
  359.         .feature-badge {
  360.             display: inline-flex;
  361.             align-items: center;
  362.             gap: 6px;
  363.             background: white;
  364.             border: 1px solid #dee2e6;
  365.             color: #495057;
  366.             padding: 8px 16px;
  367.             border-radius: 20px;
  368.             font-size: 0.9rem;
  369.             font-weight: 500;
  370.         }
  371.         .feature-badge i {
  372.             color: #00c896;
  373.         }
  374.         .internal-cta-btn {
  375.             display: inline-flex;
  376.             align-items: center;
  377.             gap: 10px;
  378.             background: linear-gradient(135deg, #00c896 0%, #00a67e 100%);
  379.             color: white;
  380.             padding: 16px 36px;
  381.             border-radius: 10px;
  382.             text-decoration: none;
  383.             font-weight: 600;
  384.             font-size: 1.1rem;
  385.             transition: transform 0.2s, box-shadow 0.2s;
  386.         }
  387.         .internal-cta-btn:hover {
  388.             transform: translateY(-3px);
  389.             box-shadow: 0 12px 30px rgba(0, 200, 150, 0.35);
  390.             color: white;
  391.             text-decoration: none;
  392.         }
  393.     </style>
  394. {% endblock %}
  396. {% block navigation %}
  397.     {{ menu|raw }}
  398. {% endblock %}
  400. {% block content %}
  401. {# Hero Section #}
  402. <section class="startup-detail-hero">
  403.     <div class="container startup-detail-content">
  404.         <a href="{{ backUrl }}" class="back-link">
  405.             <i class="fas fa-arrow-left"></i>
  406.             {{ isEnglish ? 'Back to all startups' : 'Zurück zur Übersicht' }}
  407.         </a>
  409.         <div class="row align-items-center">
  410.             <div class="col-md-8">
  411.                 {% if startup.logoUrl %}
  412.                     <div class="startup-logo-container">
  413.                         <img src="{{ startup.logoUrl }}" alt="{{ startup.name }}">
  414.                     </div>
  415.                 {% else %}
  416.                     <div class="startup-logo-placeholder">
  417.                         {{ startup.name|slice(0, 1)|upper }}
  418.                     </div>
  419.                 {% endif %}
  421.                 <h1 class="startup-detail-title">{{ startup.name }}</h1>
  423.                 {% if startup.industry %}
  424.                     <p class="startup-detail-industry">{{ startup.industry }}</p>
  425.                 {% endif %}
  427.                 {% if startup.kiAccelerator %}
  428.                     <span class="startup-batch-badge">
  429.                         <i class="fas fa-graduation-cap"></i>
  430.                         {{ isEnglish ? 'AI Accelerator Batch' : 'KI-Accelerator Batch' }} {{ startup.kiAccelerator }}
  431.                     </span>
  432.                 {% endif %}
  433.             </div>
  434.             <div class="col-md-4 text-md-right mt-4 mt-md-0">
  435.                 {% if startup.website %}
  436.                     <a href="{{ startup.website }}" target="_blank" rel="noopener" class="startup-website-btn">
  437.                         <i class="fas fa-external-link-alt"></i>
  438.                         {{ isEnglish ? 'Visit Website' : 'Website besuchen' }}
  439.                     </a>
  440.                 {% endif %}
  441.             </div>
  442.         </div>
  443.     </div>
  444. </section>
  446. {# Details Section #}
  447. <section class="startup-detail-section">
  448.     <div class="container">
  449.         <div class="row">
  450.             {# Pitch / Description #}
  451.             <div class="col-lg-8 mb-4">
  452.                 <div class="detail-card">
  453.                     <h3>
  454.                         <i class="fas fa-lightbulb"></i>
  455.                         {{ isEnglish ? 'About' : 'Über das Startup' }}
  456.                     </h3>
  457.                     {% set pitch = isEnglish and startup.oneSentencePitchEn ? startup.oneSentencePitchEn : startup.oneSentencePitch %}
  458.                     {% if pitch %}
  459.                         <p class="lead">{{ pitch|raw }}</p>
  460.                     {% else %}
  461.                         <p class="text-muted">
  462.                             {{ isEnglish ? 'No description available.' : 'Keine Beschreibung verfügbar.' }}
  463.                         </p>
  464.                     {% endif %}
  466.                     {# Admin Actions #}
  467.                     {% if is_granted('ROLE_ADMIN') %}
  468.                         <div class="admin-actions">
  469.                             <a href="{{ path('allmeda_startup_edit', {id: startup.id}) }}"
  470.                                class="btn btn-outline-primary btn-sm">
  471.                                 <i class="fas fa-edit"></i> Edit in Admin
  472.                             </a>
  473.                             {% if startup.teamId %}
  474.                                 <a href="{{ path('allmeda_team_edit', {id: startup.teamId}) }}"
  475.                                    class="btn btn-outline-secondary btn-sm ml-2">
  476.                                     <i class="fas fa-users"></i> Team bearbeiten
  477.                                 </a>
  478.                             {% endif %}
  479.                         </div>
  480.                     {% endif %}
  481.                 </div>
  482.             </div>
  484.             {# Quick Facts #}
  485.             <div class="col-lg-4 mb-4">
  486.                 <div class="detail-card">
  487.                     <h3>
  488.                         <i class="fas fa-info-circle"></i>
  489.                         {{ isEnglish ? 'Quick Facts' : 'Kurzinfos' }}
  490.                     </h3>
  492.                     <ul class="list-unstyled mb-0">
  493.                         {% if startup.city %}
  494.                             <li class="mb-3">
  495.                                 <strong><i class="fas fa-map-marker-alt text-muted mr-2"></i>{{ isEnglish ? 'Location' : 'Standort' }}</strong><br>
  496.                                 <span class="text-muted">{{ startup.city }}</span>
  497.                             </li>
  498.                         {% endif %}
  500.                         {% if startup.industry %}
  501.                             <li class="mb-3">
  502.                                 <strong><i class="fas fa-industry text-muted mr-2"></i>{{ isEnglish ? 'Industry' : 'Branche' }}</strong><br>
  503.                                 <span class="text-muted">{{ startup.industry }}</span>
  504.                             </li>
  505.                         {% endif %}
  507.                         {% if startup.kiAccelerator %}
  508.                             <li class="mb-3">
  509.                                 <strong><i class="fas fa-rocket text-muted mr-2"></i>{{ isEnglish ? 'Accelerator' : 'Accelerator' }}</strong><br>
  510.                                 <span class="text-muted">KI-Accelerator NRW Batch {{ startup.kiAccelerator }}</span>
  511.                             </li>
  512.                         {% endif %}
  513.                     </ul>
  515.                     {% if startup.website %}
  516.                         <hr>
  517.                         <a href="{{ startup.website }}" target="_blank" rel="noopener" class="btn btn-outline-success btn-block">
  518.                             <i class="fas fa-globe mr-2"></i>{{ startup.website|replace({'https://': '', 'http://': '', 'www.': ''})|trim('/') }}
  519.                         </a>
  520.                     {% endif %}
  521.                 </div>
  522.             </div>
  523.         </div>
  525.         {# Back to Grid Link #}
  526.         <div class="text-center mt-4">
  527.             <a href="{{ backUrl }}" class="btn btn-outline-dark">
  528.                 <i class="fas fa-th-large mr-2"></i>
  529.                 {{ isEnglish ? 'View all AI Accelerator Startups' : 'Alle KI-Accelerator Startups anzeigen' }}
  530.             </a>
  531.         </div>
  532.     </div>
  533. </section>
  535. {# Ebene 2: Öffentliche Detailseite (immer sichtbar wenn Inhalt vorhanden) #}
  536. {% set publicContent = isEnglish and startup.publicDetailHtmlEn ? startup.publicDetailHtmlEn : startup.publicDetailHtml %}
  537. {% if publicContent %}
  538. <section class="startup-public-details">
  539.     <div class="container">
  540.         <h2 class="section-header">
  541.             <i class="fas fa-info-circle"></i>
  542.             {{ isEnglish ? 'About This Startup' : 'Über dieses Startup' }}
  543.         </h2>
  544.         <div class="content-card">
  545.             {{ publicContent|raw }}
  546.         </div>
  547.     </div>
  548. </section>
  549. {% endif %}
  551. {# Ebene 3: CTA zur internen Detailseite #}
  552. {% set internalContent = isEnglish and startup.internalDetailHtmlEn ? startup.internalDetailHtmlEn : startup.internalDetailHtml %}
  553. {% if internalContent %}
  554. <section class="startup-internal-details">
  555.     <div class="container">
  556.         <div class="internal-cta-card text-center">
  557.             <div class="internal-cta-icon">
  558.                 <i class="fas fa-star"></i>
  559.             </div>
  560.             <h3>{{ isEnglish ? 'Want Deeper Insights?' : 'Tiefere Einblicke gewünscht?' }}</h3>
  561.             <p class="internal-cta-description">
  562.                 {{ isEnglish
  563.                     ? 'Access exclusive member content: detailed team information, mentoring needs, corporate pilot opportunities, and investment signals.'
  564.                     : 'Erhalte exklusive Mitglieder-Inhalte: detaillierte Team-Informationen, Mentoring-Bedarfe, Corporate-Pilot-Möglichkeiten und Investment-Signale.'
  565.                 }}
  566.             </p>
  568.             <div class="internal-cta-features">
  569.                 <span class="feature-badge"><i class="fas fa-users"></i> {{ isEnglish ? 'Team Details' : 'Team-Details' }}</span>
  570.                 <span class="feature-badge"><i class="fas fa-user-tie"></i> {{ isEnglish ? 'Mentoring Needs' : 'Mentoring-Bedarfe' }}</span>
  571.                 <span class="feature-badge"><i class="fas fa-building"></i> {{ isEnglish ? 'Pilot Opportunities' : 'Pilot-Möglichkeiten' }}</span>
  572.                 <span class="feature-badge"><i class="fas fa-chart-line"></i> {{ isEnglish ? 'Investment Signals' : 'Investment-Signale' }}</span>
  573.             </div>
  575.             {% if app.user %}
  576.                 {# Eingeloggt: Direkter Link zur internen Seite #}
  577.                 <a href="{{ internalPageUrl }}" class="internal-cta-btn">
  578.                     <i class="fas fa-lock-open"></i>
  579.                     {{ isEnglish ? 'View Detailed Insights' : 'Detaillierte Einblicke ansehen' }}
  580.                 </a>
  581.             {% else %}
  582.                 {# Nicht eingeloggt: Login zuerst #}
  583.                 <a href="{{ path('login', {targetPath: internalPageUrl}) }}" class="internal-cta-btn">
  584.                     <i class="fas fa-sign-in-alt"></i>
  585.                     {{ isEnglish ? 'Login to Access' : 'Einloggen für Zugang' }}
  586.                 </a>
  587.                 <p class="mt-3 small text-muted">
  588.                     {{ isEnglish ? 'Not a member yet?' : 'Noch kein Mitglied?' }}
  589.                     <a href="{{ path('apply_program_home', {programSlug: 'membership'}) }}">
  590.                         {{ isEnglish ? 'Join STARTPLATZ' : 'Werde Mitglied' }}
  591.                     </a>
  592.                 </p>
  593.             {% endif %}
  594.         </div>
  595.     </div>
  596. </section>
  597. {% endif %}
  598. {% endblock %}
  600. {# Footer - use simple version without menuLinksAndPhrases dependency #}
  601. {% block footer %}
  602.     <footer class="bg-dark text-white py-4 mt-5">
  603.         <div class="container text-center">
  604.             <p class="mb-2">
  605.                 <a href="https://www.startplatz.de" class="text-white" target="_blank">STARTPLATZ</a> |
  606.                 <a href="https://www.startplatz.de/impressum/" class="text-white" target="_blank">Impressum</a> |
  607.                 <a href="https://www.startplatz.de/datenschutz/" class="text-white" target="_blank">Datenschutz</a>
  608.             </p>
  609.             <p class="text-muted mb-0">&copy; {{ "now"|date("Y") }} STARTPLATZ</p>
  610.         </div>
  611.     </footer>
  612. {% endblock %}
  614. {% block javascripts %}
  615.     {{ parent() }}
  616.     <script src="{{ asset('bundles/startplatzstyle/js/startplatz.accelerator.js') }}"></script>
  617. {% endblock %}