@ -1,83 +1,267 @@
{% extends "core/base.html" %}
{% load core_tags menu_tags static wagtailuserbar wagtailcore_tags wagtailimages_tags %}
{% block extra_css %}
< style >
/* About us page specific styles */
.about-section {
padding: 3rem 0;
}
.section-title {
position: relative;
margin-bottom: 2rem;
font-weight: var(--font-weight-light);
}
.section-title:after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 3px;
background-color: var(--bs-primary);
border-radius: 3px;
}
.section-title.text-center:after {
left: 50%;
transform: translateX(-50%);
}
.team-card {
border-radius: 12px;
overflow: hidden;
box-shadow: var(--box-shadow-light);
transition: all 0.3s ease;
height: 100%;
border: none;
}
.team-card:hover {
transform: translateY(-5px);
box-shadow: var(--box-shadow-medium);
}
.team-card .card-img-top {
height: 400px;
object-fit: cover;
transition: transform 0.5s ease;
}
.team-card:hover .card-img-top {
transform: scale(1.05);
}
.team-card .card-body {
padding: 1.5rem;
}
.team-card .card-title {
font-weight: var(--font-weight-medium);
margin-bottom: 0.5rem;
}
.team-card .card-subtitle {
color: var(--bs-primary);
font-weight: var(--font-weight-light);
margin-bottom: 1rem;
}
.team-card .card-footer {
background-color: transparent;
border-top: 1px solid rgba(0, 0, 0, 0.05);
padding: 1rem 1.5rem;
}
.team-social-link {
display: inline-flex;
align-items: center;
justify-content: flex-start;
padding: 0.5rem 1rem;
border-radius: 50px;
background-color: rgba(var(--bs-primary-rgb), 0.1);
color: var(--bs-primary);
transition: all 0.3s ease;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
font-size: 0.9rem;
font-weight: var(--font-weight-medium);
text-decoration: none;
}
.team-social-link i {
margin-right: 0.5rem;
}
.team-social-link:hover {
background-color: var(--bs-primary);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(var(--bs-primary-rgb), 0.3);
}
.mission-vision-card {
border-radius: 12px;
overflow: hidden;
box-shadow: var(--box-shadow-light);
transition: all 0.3s ease;
height: 100%;
border: none;
padding: 2rem;
}
.mission-vision-card:hover {
transform: translateY(-3px);
box-shadow: var(--box-shadow-medium);
}
.quote-card {
border-left: 4px solid var(--bs-primary);
padding: 1.5rem;
background-color: rgba(var(--bs-primary-rgb), 0.05);
border-radius: 0 12px 12px 0;
margin: 2rem 0;
}
.about-image {
border-radius: 12px;
box-shadow: var(--box-shadow-medium);
transition: all 0.3s ease;
overflow: hidden;
}
.about-image img {
transition: transform 0.5s ease;
}
.about-image:hover img {
transform: scale(1.05);
}
@media (max-width: 767.98px) {
.section-title {
font-size: 1.8rem;
}
.team-card .card-img-top {
height: 300px;
}
.team-social-link {
width: 100%;
margin-right: 0;
justify-content: center;
}
}
< / style >
{% endblock %}
{% block content %}
< div class = "container py-5 animate-fade-in-up" >
<!-- Page Title -->
< div class = "row mb-5" >
< div class = "col-12 text-center" >
< h1 class = "display-4 fw-bold mb-3" > {{ page.title }}< / h1 >
{% if page.subtitle %}< p class = "lead text-muted" > {{ page.subtitle }}< / p > {% endif %}
< div class = "divider mx-auto my-4" style = "width: 80px; height: 4px; background-color: var(--bs-primary);" > < / div >
< / div >
< / div >
<!-- Company Introduction -->
< div class = "row mb-5" >
< div class = "col-12" >
< div class = "animate-fade-in-up" >
{{ self.company_intro|richtext }}
< / div >
< / div >
< / div >
<!-- Mission and Vision -->
{% if self.mission_title or self.vision_title %}
< div class = "row mb-5" >
{% if self.mission_title %}
< div class = "col-md-6 mb-4 mb-md-0" >
< h2 class = "border-bottom pb-2 mb-3" > {{ self.mission_title }}< / h2 >
< div class = "mission-vision-card animate-fade-in-up" style = "animation-delay: 0.1s;" >
< h2 class = "section-title" > {{ self.mission_title }}< / h2 >
{{ self.mission_text|richtext }}
< / div >
< / div >
{% endif %}
{% if self.vision_title %}
< div class = "col-md-6" >
< h2 class = "border-bottom pb-2 mb-3" > {{ self.vision_title }}< / h2 >
< div class = "mission-vision-card animate-fade-in-up" style = "animation-delay: 0.2s;" >
< h2 class = "section-title" > {{ self.vision_title }}< / h2 >
{{ self.vision_text|richtext }}
< / div >
< / div >
{% endif %}
< / div >
{% endif %}
<!-- Company History -->
{% if self.history_title %}
< div class = "about-section" >
< div class = "row mb-5" >
< div class = "col-12" >
< h2 class = "border-bottom pb-2 mb-3" > {{ self.history_title }}< / h2 >
< h2 class = "section-title" > {{ self.history_title }}< / h2 >
< div class = "animate-fade-in-up" >
{{ self.history_text|richtext }}
< / div >
< / div >
< / div >
< / div >
{% endif %}
<!-- Team Members -->
{% if self.team_title %}
< div class = "about-section" >
< div class = "row mb-5" >
< div class = "col-12" >
< h2 class = "border-bottom pb-2 mb-3" > {{ self.team_title }}< / h2 >
< div class = "col-12 text-center" >
< h2 class = "section-title text-center" > {{ self.team_title }}< / h2 >
< div class = "mb-5 animate-fade-in-up" >
{{ self.team_intro|richtext }}
< / div >
< / div >
< / div >
< div class = "row mb-5" >
{% for block in self.team_members %}
{% if block.block_type == 'team_member' %}
< div class = "col-md-4 mb-4" >
< div class = "card h-100" >
< div class = "col-md-4 mb-4 animate-fade-in-up" style = "animation-delay: {% if forloop.counter0 == 1 %}0.1{% elif forloop.counter0 == 2 %}0.2{% elif forloop.counter0 == 3 %}0.3{% elif forloop.counter0 == 4 %}0.4{% elif forloop.counter0 == 5 %}0.5{% else %}0{% endif %}s; " >
< div class = "team- card h-100" >
{% if block.value.photo %}
{% image block.value.photo width-400 as team_photo %}
< img class = "card-img-top img-fluid" src = "{{ team_photo.url }}" alt = "{{ block.value.name }}" >
{% image block.value.photo fill-400x400-c1 00 as team_photo %}
< img class = "card-img-top" src = "{{ team_photo.url }}" alt = "{{ block.value.name }}" >
{% endif %}
< div class = "card-body" >
< h3 class = "card-title h5" > {{ block.value.name }}< / h3 >
< h4 class = "card-subtitle mb-3 text-muted h6" > {{ block.value.position }}< / h4 >
< h3 class = "card-title h4 " > {{ block.value.name }}< / h3 >
< h4 class = "card-subtitle h6" > {{ block.value.position }}< / h4 >
{% if block.value.bio %}
< div class = "card-text" > {{ block.value.bio|richtext }}< / div >
< div class = "card-text mt-3 " > {{ block.value.bio|richtext }}< / div >
{% endif %}
< / div >
< div class = "card-footer bg-transparent" >
< div class = "d-flex gap-2" >
< h5 class = "text-muted mb-3 small" > Kontaktmöglichkeiten:< / h5 >
< div class = "d-flex flex-wrap" >
{% if block.value.email %}
< a href = "mailto:{{ block.value.email }}" class = "btn btn-outline-secondary btn-sm" >
< a href = "mailto:{{ block.value.email }}" class = "team-social-link" title = "Send an email " >
< i class = "bi bi-envelope" > < / i >
< span > Email< / span >
< / a >
{% endif %}
{% if block.value.linkedin %}
< a href = "{{ block.value.linkedin }}" target = "_blank" class = "btn btn-outline-secondary btn-sm" >
< a href = "{{ block.value.linkedin }}" target = "_blank" class = "team-social-link" title = "View LinkedIn profile " >
< i class = "bi bi-linkedin" > < / i >
< span > LinkedIn< / span >
< / a >
{% endif %}
{% if block.value.xing %}
< a href = "{{ block.value.xing }}" target = "_blank" class = "btn btn-outline-secondary btn-sm" >
< a href = "{{ block.value.xing }}" target = "_blank" class = "team-social-link" title = "View Xing profile " >
< i class = "bi bi-x" > < / i >
< span > Xing< / span >
< / a >
{% endif %}
< / div >
@ -87,34 +271,42 @@
{% endif %}
{% endfor %}
< / div >
< / div >
{% endif %}
<!-- Additional Content -->
{% if self.additional_content %}
< div class = "about-section" >
< div class = "row mb-5" >
< div class = "col-12" >
{% for block in self.additional_content %}
{% if block.block_type == 'heading' %}
< h2 class = "border-bottom pb-2 mb-3 " > {{ block.value }}< / h2 >
< h2 class = "section-title animate-fade-in-up " > {{ block.value }}< / h2 >
{% elif block.block_type == 'paragraph' %}
< div class = "animate-fade-in-up" >
{{ block.value|richtext }}
< / div >
{% elif block.block_type == 'image' %}
{% image block.value width-800 as content_image %}
< img class = "img-fluid mb-4" src = "{{ content_image.url }}" alt = "" >
< div class = "about-image mb-4 animate-fade-in-up" >
< img class = "img-fluid w-100" src = "{{ content_image.url }}" alt = "" >
< / div >
{% elif block.block_type == 'quote' %}
< figure class = "border-start border-4 ps-4 my-4" >
< blockquote class = "blockquote" >
< p > {{ block.value.quote }}< / p >
< / blockquote >
< div class = "quote-card animate-fade-in-up" >
< blockquote class = "blockquote mb-0" >
< p class = "mb-3 fst-italic" > {{ block.value.quote }}< / p >
{% if block.value.attribution %}
< figcaption class = "blockquote-footer" >
< footer class = "blockquote-footer" >
{{ block.value.attribution }}
< / figcaption >
< / footer >
{% endif %}
< / figure >
< / blockquote >
< / div >
{% endif %}
{% endfor %}
< / div >
< / div >
< / div >
{% endif %}
< / div >
{% endblock content %}
