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 -->
{% 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">

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

@ -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 %}

Write Preview
Loading…
Cancel
Save