arne
/
feo-homepage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor "About Us" page with new styles and animations

Browse Source 
Implemented a modernized design for the "About Us" page, adding custom styles, animations, and improved responsiveness. Enhanced the layout for mission, vision, team members, and additional content sections for better readability and user experience.
main
Arne Schauf 2 weeks ago
parent 17f39a6046
commit 8295e9fb3e
2 changed files with 264 additions and 72 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      core/templates/bootstrap5_base.html
  2. 334
      core/templates/core/about_us_page.html

2
core/templates/bootstrap5_base.html
Unescape View File

@ -38,7 +38,7 @@
<!-- Breadcrumbs --> <!-- Breadcrumbs -->
{% if not self.url == site_root.url %} {% if not self.url == site_root.url %}
<div class="breadcrumb-section py-4"> <div class="breadcrumb-section pt-2">
<div class="container"> <div class="container">
<h1 class="h2">{{ self.title }}</h1> <h1 class="h2">{{ self.title }}</h1>
<nav aria-label="breadcrumb"> <nav aria-label="breadcrumb">

334
core/templates/core/about_us_page.html
Unescape View File

@ -1,11 +1,180 @@
{% extends "core/base.html" %} {% extends "core/base.html" %}
{% load core_tags menu_tags static wagtailuserbar wagtailcore_tags wagtailimages_tags %} {% 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 %} {% 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 --> <!-- Company Introduction -->
<div class="row mb-5"> <div class="row mb-5">
<div class="col-12"> <div class="col-12">
{{ self.company_intro|richtext }} <div class="animate-fade-in-up">
{{ self.company_intro|richtext }}
</div>
</div> </div>
</div> </div>
@ -14,15 +183,19 @@
<div class="row mb-5"> <div class="row mb-5">
{% if self.mission_title %} {% if self.mission_title %}
<div class="col-md-6 mb-4 mb-md-0"> <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;">
{{ self.mission_text|richtext }} <h2 class="section-title">{{ self.mission_title }}</h2>
{{ self.mission_text|richtext }}
</div>
</div> </div>
{% endif %} {% endif %}
{% if self.vision_title %} {% if self.vision_title %}
<div class="col-md-6"> <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;">
{{ self.vision_text|richtext }} <h2 class="section-title">{{ self.vision_title }}</h2>
{{ self.vision_text|richtext }}
</div>
</div> </div>
{% endif %} {% endif %}
</div> </div>
@ -30,91 +203,110 @@
<!-- Company History --> <!-- Company History -->
{% if self.history_title %} {% if self.history_title %}
<div class="row mb-5"> <div class="about-section">
<div class="col-12"> <div class="row mb-5">
<h2 class="border-bottom pb-2 mb-3">{{ self.history_title }}</h2> <div class="col-12">
{{ self.history_text|richtext }} <h2 class="section-title">{{ self.history_title }}</h2>
<div class="animate-fade-in-up">
{{ self.history_text|richtext }}
</div>
</div>
</div> </div>
</div> </div>
{% endif %} {% endif %}
<!-- Team Members --> <!-- Team Members -->
{% if self.team_title %} {% if self.team_title %}
<div class="row mb-5"> <div class="about-section">
<div class="col-12"> <div class="row mb-5">
<h2 class="border-bottom pb-2 mb-3">{{ self.team_title }}</h2> <div class="col-12 text-center">
{{ self.team_intro|richtext }} <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>
</div>
<div class="row mb-5"> <div class="row mb-5">
{% for block in self.team_members %} {% for block in self.team_members %}
{% if block.block_type == 'team_member' %} {% if block.block_type == 'team_member' %}
<div class="col-md-4 mb-4"> <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="card h-100"> <div class="team-card h-100">
{% if block.value.photo %} {% if block.value.photo %}
{% image block.value.photo width-400 as team_photo %} {% image block.value.photo fill-400x400-c100 as team_photo %}
<img class="card-img-top img-fluid" src="{{ team_photo.url }}" alt="{{ block.value.name }}"> <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>
{% if block.value.bio %}
<div class="card-text">{{ block.value.bio|richtext }}</div>
{% endif %} {% endif %}
</div> <div class="card-body">
<div class="card-footer bg-transparent"> <h3 class="card-title h4">{{ block.value.name }}</h3>
<div class="d-flex gap-2"> <h4 class="card-subtitle h6">{{ block.value.position }}</h4>
{% if block.value.email %} {% if block.value.bio %}
<a href="mailto:{{ block.value.email }}" class="btn btn-outline-secondary btn-sm"> <div class="card-text mt-3">{{ block.value.bio|richtext }}</div>
<i class="bi bi-envelope"></i>
</a>
{% endif %}
{% if block.value.linkedin %}
<a href="{{ block.value.linkedin }}" target="_blank" class="btn btn-outline-secondary btn-sm">
<i class="bi bi-linkedin"></i>
</a>
{% endif %}
{% if block.value.xing %}
<a href="{{ block.value.xing }}" target="_blank" class="btn btn-outline-secondary btn-sm">
<i class="bi bi-x"></i>
</a>
{% endif %} {% endif %}
</div> </div>
<div class="card-footer bg-transparent">
<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="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="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="team-social-link" title="View Xing profile">
<i class="bi bi-x"></i>
<span>Xing</span>
</a>
{% endif %}
</div>
</div>
</div> </div>
</div> </div>
</div> {% endif %}
{% endif %} {% endfor %}
{% endfor %} </div>
</div> </div>
{% endif %} {% endif %}
<!-- Additional Content --> <!-- Additional Content -->
{% if self.additional_content %} {% if self.additional_content %}
<div class="row mb-5"> <div class="about-section">
<div class="col-12"> <div class="row mb-5">
{% for block in self.additional_content %} <div class="col-12">
{% if block.block_type == 'heading' %} {% for block in self.additional_content %}
<h2 class="border-bottom pb-2 mb-3">{{ block.value }}</h2> {% if block.block_type == 'heading' %}
{% elif block.block_type == 'paragraph' %} <h2 class="section-title animate-fade-in-up">{{ block.value }}</h2>
{{ block.value|richtext }} {% elif block.block_type == 'paragraph' %}
{% elif block.block_type == 'image' %} <div class="animate-fade-in-up">
{% image block.value width-800 as content_image %} {{ block.value|richtext }}
<img class="img-fluid mb-4" src="{{ content_image.url }}" alt=""> </div>
{% elif block.block_type == 'quote' %} {% elif block.block_type == 'image' %}
<figure class="border-start border-4 ps-4 my-4"> {% image block.value width-800 as content_image %}
<blockquote class="blockquote"> <div class="about-image mb-4 animate-fade-in-up">
<p>{{ block.value.quote }}</p> <img class="img-fluid w-100" src="{{ content_image.url }}" alt="">
</blockquote> </div>
{% if block.value.attribution %} {% elif block.block_type == 'quote' %}
<figcaption class="blockquote-footer"> <div class="quote-card animate-fade-in-up">
{{ block.value.attribution }} <blockquote class="blockquote mb-0">
</figcaption> <p class="mb-3 fst-italic">{{ block.value.quote }}</p>
{% endif %} {% if block.value.attribution %}
</figure> <footer class="blockquote-footer">
{% endif %} {{ block.value.attribution }}
{% endfor %} </footer>
{% endif %}
</blockquote>
</div>
{% endif %}
{% endfor %}
</div>
</div> </div>
</div> </div>
{% endif %} {% endif %}
</div>
{% endblock content %} {% endblock content %}

Write Preview
Loading…
Cancel
Save