UC: Added event section based on carousel; Added placeholder for deliverables

1 files changed, 151 insertions, 73 deletions

diff --git a/template/consortium.html.j2 b/template/consortium.html.j2
index 58706d74..56e34ab9 100644
--- a/template/consortium.html.j2
+++ b/template/consortium.html.j2
@@ -2,83 +2,160 @@
 {% block body_content %}
 <main id="maincontent">
 
-  <div class="container">
+  <div class="container consortium">
 
     <!--Section: Content-->
     <section class="section-consortium dark-grey-text">
 
-      {# <div class="justify-content-md-left"> #}
 
-        <!-- Section heading -->
-        <h4 class="font-weight-bold pb-2 mb-4">{{ _("Consortium")}}</h4>
-        <!-- Section description -->
+      <div class="container-xl">
 
-        <!-- Section heading -->
-        <h4 class="font-weight-bold pb-2 mb-4">{{ _("Project")}}</h4>
-        <div class="row">
-          <div class="col col-md-auto"></div>
+        <h4 class="font-weight-bold pb-2 mb-4">{{ _("Events")}}</h4>
+        <div class="announce">
+          <div class="row">
+            <div class="col col-md-2 col-md-auto"></div>
+            <div class="col-md-8">
 
-          <div class="col-md-11">
-            <p class="text-muted w-responsive mx-auto mb-3">
-              {% trans %}
-              The TALER project is an initiative of Horizon Europe (Pilots for the Next Generation Internet) with the
-              aim of bringing the GNU Taler to market across Europe.
-              <br>
-              To make the GNU Taler accessible to European citizens, we need a commercially viable use of the GNU Taler
-              technology. We will achieve this through the four key project objectives.
-              {% endtrans %}
-            </p>
+              <div id="AnnouncCarousel" class="carousel slide" data-bs-ride="carousel">
+
+                <!-- Carousel indicators -->
+                <div class="carousel-indicators">
+                  <button data-bs-target="#AnnouncCarousel" data-bs-slide-to="0" class="active" aria-current="true"
+                    aria-label="Slide 1"></button>
+                  <button type="button" data-bs-target="#AnnouncCarousel" data-bs-slide-to="1"
+                    aria-label="Slide 2"></button>
+                  <button type="button" data-bs-target="#AnnouncCarousel" data-bs-slide-to="2"
+                    aria-label="Slide 3"></button>
+                  <button type="button" data-bs-target="#AnnouncCarousel" data-bs-slide-to="3"
+                    aria-label="Slide 4"></button>
+                </div>
+
+
+                <!-- Wrapper for carousel items -->
+                <div class="carousel-inner">
+                  <div class="carousel-item active" data-bs-interval="2000">
+                    <div class="img-box"><img src="{{ url('images/7-efficient.svg') }}" alt=""></div>
+                    <p class="testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor,
+                      varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.
+                      Idac bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet.</p>
+                    <p class="overview"><b>Paula Taler</b>, Professor</p>
+                  </div>
+                  <div class="carousel-item" data-bs-interval="2000">
+                    <div class="img-box"><img src="{{ url('images/taler-arch-full.svg') }}" alt=""></div>
+                    <p class="testimonial">Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi
+                      suscipit tincidunt. Utmtc tempus dictum risus. Pellentesque viverra sagittis quam at mattis.
+                      Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.</p>
+                    <p class="overview"><b>Antonio Twint</b>, Web Developer</p>
+                  </div>
+                  <div class="carousel-item" data-bs-interval="2000">
+                    <div class="img-box"><img src="{{ url('images/6-usable.svg') }}" alt=""></div>
+                    <p class="testimonial">Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id lacinia.
+                      Etiam faucibus mauris id tempor egestas. Duis luctus turpis at accumsan tincidunt. Phasellus risus
+                      risus, volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit dolor eget rutrum.</p>
+                    <p class="overview"><b>Michael Coin</b>, CEO</p>
+                  </div>
 
-            <div class="accordion" id="accordionObjectives">
-              {% for objective in conf['objectives'] %}
-              <div class="accordion-item">
-                <h2 class="accordion-header" id="heading_{{ loop.index }}">
-                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                    data-bs-target="#collapse_{{ loop.index }}" aria-expanded="false"
-                    aria-controls="collapse_{{ loop.index }}">
-                    Objective {{ loop.index }}: {{ objective.title }}
-                  </button>
-                </h2>
-                <div id="collapse_{{ loop.index }}" class="accordion-collapse collapse"
-                  aria-labelledby="heading_{{ loop.index }}" data-bs-parent="#accordionObjectives">
-                  <div class="accordion-body text-muted w-responsive">
-                    {{ objective.text }}
+                  <div class="carousel-item" data-bs-interval="2000">
+                    <div class="img-box"><img src="{{ url('images/8-fault-tolerant.svg') }}" alt=""></div>
+                    <p class="testimonial">Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id lacinia.
+                      Etiam
+                      faucibus mauris id tempor egestas. Duis luctus turpis at accumsan tincidunt. Phasellus risus
+                      risus,
+                      volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit dolor eget rutrum.</p>
+                    <p class="overview"><b>Michael Pay</b>, Seo Analyst</p>
                   </div>
                 </div>
+
+                {# <!-- Carousel controls -->
+                <a class="carousel-control-prev" href="#AnnouncCarousel" data-slide="prev">
+                  <i class="fab fa-angle-left"></i>
+                </a>
+                <a class="carousel-control-next" href="#AnnouncCarousel" data-slide="next">
+                  <i class="fab fa-angle-right"></i>
+                </a> #}
               </div>
-              {% endfor %}
             </div>
-            <div class="col col-md-auto"></div>
-            <p class="text-muted w-responsive mx-auto"><br></p>
-
+            <div class="col col-md-2 col-md-auto"></div>
           </div>
+        </div>
+      </div>
 
 
-          <!-- Section heading -->
-          <h4 class="font-weight-bold pb-2 mb-4">{{ _("Partners")}}</h4>
-
-          <div class="row mb-4">
-            <div class="col col-md-auto"></div>
-
-            <div class="col-md-11">
-              <p class="text-muted w-responsive mx-auto mb-3">
-                {% trans %}
-                TALER consortium consists of 11 partners from 8 European countries (the Netherlands, Belgium, France,
-                Germany, Greece, Hungary, Luxembourg and Switzerland).
-                {% endtrans %}
-              </p>
-              <p class="text-muted w-responsive mx-auto mb-3">
-                {% trans %}
-                The consortium is diverse in terms of types of institutions, including research (TUE) and applied
-                science
-                universities (BFH), small for-profit (CBG, TSYS, VV) and non-profit (PS) companies, cooperative banks
-                (GLS, MAG), a foundation (NLnet) and grassroots movements (ESEN, HODI).
-                {% endtrans %}
-              </p>
 
+      <h4 class="font-weight-bold pb-2 mb-4">{{ _("Deliverables")}}</h4>
+
+
+      <!-- Section heading -->
+      <h4 class="font-weight-bold pb-2 mb-4">{{ _("Project")}}</h4>
+      <div class="row">
+        <div class="col col-md-auto"></div>
+
+        <div class="col-md-11">
+          <p class="text-muted w-responsive mx-auto mb-3">
+            {% trans %}
+            The TALER project is an initiative of Horizon Europe (Pilots for the Next Generation Internet)
+            with the
+            aim of bringing the GNU Taler to market across Europe.
+            <br>
+            To make the GNU Taler accessible to European citizens, we need a commercially viable use of
+            the GNU Taler
+            technology. We will achieve this through the four key project objectives.
+            {% endtrans %}
+          </p>
+
+          <div class="accordion" id="accordionObjectives">
+            {% for objective in conf['objectives'] %}
+            <div class="accordion-item">
+              <h2 class="accordion-header" id="heading_{{ loop.index }}">
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                  data-bs-target="#collapse_{{ loop.index }}" aria-expanded="false"
+                  aria-controls="collapse_{{ loop.index }}">
+                  Objective {{ loop.index }}: {{ objective.title }}
+                </button>
+              </h2>
+              <div id="collapse_{{ loop.index }}" class="accordion-collapse collapse"
+                aria-labelledby="heading_{{ loop.index }}" data-bs-parent="#accordionObjectives">
+                <div class="accordion-body text-muted w-responsive">
+                  {{ objective.text }}
+                </div>
+              </div>
             </div>
-            <div class="col col-md-auto"></div>
+            {% endfor %}
           </div>
+          <div class="col col-md-auto"></div>
+          <p class="text-muted w-responsive mx-auto"><br></p>
+
+        </div>
+
+
+        <!-- Section heading -->
+        <h4 class="font-weight-bold pb-2 mb-4">{{ _("Partners")}}</h4>
+
+        <div class="row mb-4">
+          <div class="col col-md-auto"></div>
+
+          <div class="col-md-11">
+            <p class="text-muted w-responsive mx-auto mb-3">
+              {% trans %}
+              TALER consortium consists of 11 partners from 8 European countries (the Netherlands,
+              Belgium, France,
+              Germany, Greece, Hungary, Luxembourg and Switzerland).
+              {% endtrans %}
+            </p>
+            <p class="text-muted w-responsive mx-auto mb-3">
+              {% trans %}
+              The consortium is diverse in terms of types of institutions, including research (TUE) and
+              applied
+              science
+              universities (BFH), small for-profit (CBG, TSYS, VV) and non-profit (PS) companies,
+              cooperative banks
+              (GLS, MAG), a foundation (NLnet) and grassroots movements (ESEN, HODI).
+              {% endtrans %}
+            </p>
+
+          </div>
+          <div class="col col-md-auto"></div>
+        </div>
 
     </section>
 
@@ -95,25 +172,26 @@
           <div class="col">
             <div class="card border-0 h-100">
               <a href="{{ partner.url }}" target="_blank" rel="noopener noreferrer">
-                <img src="{{ url(partner.logo ) }}" height="180" class="card-header rounded-circle z-depth-3"
-                alt="{{ partner.id + ' avatar'}}">
+                <img src="{{ url(partner.logo) }}" height="180" class="card-header rounded-circle z-depth-3"
+                  alt="{{ partner.id + ' avatar'}}">
               </a>
-            <div class="card-note grey-text text-muted mt-3">The team of {{ partner.name }} is represented by </div>
-            <div class="card-body h-100">
-              <h5 class="card-title font-weight-bold grey-text">{{ partner.contact }} </h5>
-              <p class="card-text grey-text text-muted word-wrap"> {{ partner.role }} </p>
-            </div>
-            <div class="card-footer">
-              <small class="text-body-secondary dark-grey-text text-muted word-wrap"><i> {{ partner.statement }} </i></small>
+              <div class="card-note grey-text text-muted mt-3">The team of {{ partner.name }} is represented by </div>
+              <div class="card-body h-100">
+                <h5 class="card-title font-weight-bold grey-text">{{ partner.contact }} </h5>
+                <p class="card-text grey-text text-muted word-wrap"> {{ partner.role }} </p>
+              </div>
+              <div class="card-footer">
+                <small class="text-body-secondary dark-grey-text text-muted word-wrap"><i> {{ partner.statement }}
+                  </i></small>
+              </div>
             </div>
           </div>
-        </div>
 
-        {% endfor %}
+          {% endfor %}
+        </div>
       </div>
-  </div>
-  </section>
-  <!--Section: Content-->
+    </section>
+    <!--Section: Content-->
 
   </div>
 </main>