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

@@ -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">

core/templates/core/about_us_page.html

@@ -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">
+            <div class="col-12 text-center">
-            <h2 class="border-bottom pb-2 mb-3">{{ self.team_title }}</h2>
+                <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="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 %}
-                        {% 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>
+                            <h3 class="card-title h4">{{ block.value.name }}</h3>
-                        <h4 class="card-subtitle mb-3 text-muted h6">{{ block.value.position }}</h4>
+                            <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">
+                        <div class="quote-card animate-fade-in-up">
-                        <blockquote class="blockquote">
+                            <blockquote class="blockquote mb-0">
-                            <p>{{ block.value.quote }}</p>
+                                <p class="mb-3 fst-italic">{{ block.value.quote }}</p>
-                        </blockquote>
                                 {% 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 %}