From 8295e9fb3eb4cd3cf7955c0ae2821100c878c0a0 Mon Sep 17 00:00:00 2001
From: Arne Schauf <git@asw.io>
Date: Wed, 30 Apr 2025 14:47:14 +0200
Subject: [PATCH] Refactor "About Us" page with new styles and animations

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.
---
 core/templates/bootstrap5_base.html    |   2 +-
 core/templates/core/about_us_page.html | 334 +++++++++++++++++++------
 2 files changed, 264 insertions(+), 72 deletions(-)

diff --git a/core/templates/bootstrap5_base.html b/core/templates/bootstrap5_base.html
index 3e679ac..d281de4 100644
--- a/core/templates/bootstrap5_base.html
+++ b/core/templates/bootstrap5_base.html
@@ -38,7 +38,7 @@
 
         <!-- Breadcrumbs -->
         {% if not self.url == site_root.url %}
-            <div class="breadcrumb-section py-4">
+            <div class="breadcrumb-section pt-2">
                 <div class="container">
                     <h1 class="h2">{{ self.title }}</h1>
                     <nav aria-label="breadcrumb">
diff --git a/core/templates/core/about_us_page.html b/core/templates/core/about_us_page.html
index d646bbf..284ddac 100644
--- a/core/templates/core/about_us_page.html
+++ b/core/templates/core/about_us_page.html
@@ -1,11 +1,180 @@
 {% 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">
-            {{ self.company_intro|richtext }}
+            <div class="animate-fade-in-up">
+                {{ self.company_intro|richtext }}
+            </div>
         </div>
     </div>
 
@@ -14,15 +183,19 @@
     <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>
-            {{ self.mission_text|richtext }}
+            <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>
-            {{ self.vision_text|richtext }}
+            <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>
@@ -30,91 +203,110 @@
 
     <!-- Company History -->
     {% if self.history_title %}
-    <div class="row mb-5">
-        <div class="col-12">
-            <h2 class="border-bottom pb-2 mb-3">{{ self.history_title }}</h2>
-            {{ self.history_text|richtext }}
+    <div class="about-section">
+        <div class="row mb-5">
+            <div class="col-12">
+                <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="row mb-5">
-        <div class="col-12">
-            <h2 class="border-bottom pb-2 mb-3">{{ self.team_title }}</h2>
-            {{ self.team_intro|richtext }}
+    <div class="about-section">
+        <div class="row mb-5">
+            <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>
 
-    <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">
-                    {% 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 }}">
-                    {% 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>
+        <div class="row mb-5">
+            {% for block in self.team_members %}
+                {% if block.block_type == 'team_member' %}
+                <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 fill-400x400-c100 as team_photo %}
+                            <img class="card-img-top" src="{{ team_photo.url }}" alt="{{ block.value.name }}">
                         {% endif %}
-                    </div>
-                    <div class="card-footer bg-transparent">
-                        <div class="d-flex gap-2">
-                            {% if block.value.email %}
-                            <a href="mailto:{{ block.value.email }}" class="btn btn-outline-secondary btn-sm">
-                                <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>
+                        <div class="card-body">
+                            <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 mt-3">{{ block.value.bio|richtext }}</div>
                             {% endif %}
                         </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>
-            {% endif %}
-        {% endfor %}
+                {% endif %}
+            {% endfor %}
+        </div>
     </div>
     {% endif %}
 
     <!-- Additional Content -->
     {% if self.additional_content %}
-    <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>
-                {% elif block.block_type == 'paragraph' %}
-                    {{ block.value|richtext }}
-                {% elif block.block_type == 'image' %}
-                    {% image block.value width-800 as content_image %}
-                    <img class="img-fluid mb-4" src="{{ content_image.url }}" alt="">
-                {% elif block.block_type == 'quote' %}
-                    <figure class="border-start border-4 ps-4 my-4">
-                        <blockquote class="blockquote">
-                            <p>{{ block.value.quote }}</p>
-                        </blockquote>
-                        {% if block.value.attribution %}
-                        <figcaption class="blockquote-footer">
-                            {{ block.value.attribution }}
-                        </figcaption>
-                        {% endif %}
-                    </figure>
-                {% endif %}
-            {% endfor %}
+    <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="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 %}
+                        <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' %}
+                        <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 %}
+                                <footer class="blockquote-footer">
+                                    {{ block.value.attribution }}
+                                </footer>
+                                {% endif %}
+                            </blockquote>
+                        </div>
+                    {% endif %}
+                {% endfor %}
+            </div>
         </div>
     </div>
     {% endif %}
+</div>
 {% endblock content %}