diff --git a/core/templates/core/contact_form_page.html b/core/templates/core/contact_form_page.html
index 2868da1..a2e0743 100644
--- a/core/templates/core/contact_form_page.html
+++ b/core/templates/core/contact_form_page.html
@@ -1,77 +1,194 @@
{% extends "core/base.html" %}
{% load core_tags menu_tags static wagtailcore_tags wagtailimages_tags crispy_forms_tags %}
-{% block content %}
-<div class="row">
- <!-- Contact Form (Desktop) -->
- <div class="col-md-6 d-none d-md-block">
- <div class="border-bottom pb-2 mb-3">
- <h2>{{ self.form_title }}</h2>
- </div>
- <form action="{% pageurl self %}" method="POST" class="mb-4">
- {% csrf_token %}
- {{ form|crispy }}
- <div class="text-end">
- <button type="submit" class="btn btn-primary">Senden</button>
- </div>
- </form>
- </div>
+{% block extra_css %}
+<style>
+ /* Contact page specific styles */
+ .contact-section {
+ padding: 2rem 0;
+ }
- <!-- Contact Person -->
- <div class="col-md-6 col-12">
- <div class="border-bottom pb-2 mb-3">
- <h2>Ihr Ansprechpartner</h2>
- </div>
- <div class="row">
- {% if self.person_img %}
- <!-- Desktop Image -->
- <div class="col-md-6 d-none d-md-block text-center">
- <div class="card mb-4">
- {% image self.person_img fill-240x320 class="img-fluid card-img-top" %}
- <div class="card-body">
- <h4 class="card-title">{{ self.person_name }}</h4>
- <p class="card-text">{{ self.person_position }}</p>
+ .section-title {
+ position: relative;
+ margin-bottom: 2rem;
+ }
+
+ .section-title:after {
+ content: '';
+ position: absolute;
+ bottom: -10px;
+ left: 0;
+ width: 60px;
+ height: 3px;
+ background-color: var(--bs-primary);
+ border-radius: 3px;
+ }
+
+ .contact-card {
+ border-radius: 12px;
+ overflow: hidden;
+ box-shadow: var(--box-shadow-medium);
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+ height: 100%;
+ border: none;
+ }
+
+ .contact-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+ }
+
+ .contact-info-list li {
+ padding: 0.75rem 0;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+ transition: transform 0.2s ease;
+ }
+
+ .contact-info-list li:last-child {
+ border-bottom: none;
+ }
+
+ .contact-info-list li:hover {
+ transform: translateX(5px);
+ }
+
+ .contact-info-list i {
+ color: var(--bs-primary);
+ font-size: 1.2rem;
+ width: 30px;
+ text-align: center;
+ }
+
+ .person-img-container {
+ overflow: hidden;
+ border-radius: 12px;
+ box-shadow: var(--box-shadow-light);
+ width: 100%;
+ height: 300px;
+ }
+
+ .person-img-container img {
+ transition: transform 0.5s ease;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ .person-img-container:hover img {
+ transform: scale(1.05);
+ }
+
+ .contact-form-card {
+ padding: 2rem;
+ }
+
+ .animate-fade-in-up {
+ animation: fadeInUp 0.8s ease-out;
+ }
+
+ @keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="contact-section">
+ <div class="row">
+ <!-- Contact Form (Desktop) -->
+ <div class="col-md-6 d-none d-md-block animate-fade-in-up" style="animation-delay: 0.1s;">
+ <h2 class="section-title">{{ self.form_title }}</h2>
+ <div class="card contact-card contact-form-card mb-4">
+ <form action="{% pageurl self %}" method="POST">
+ {% csrf_token %}
+ {{ form|crispy }}
+ <div class="text-end mt-4">
+ <button type="submit" class="btn btn-primary">
+ <i class="bi bi-send me-2"></i>Senden
+ </button>
</div>
- </div>
+ </form>
</div>
- <!-- Mobile Image -->
- <div class="col-sm-6 col-12 d-md-none">
- <div class="card mb-4">
- {% image self.person_img fill-240x320 class="img-fluid card-img-top" %}
- <div class="card-body">
- <h4 class="card-title">{{ self.person_name }}</h4>
- <p class="card-text">{{ self.person_position }}</p>
+ </div>
+
+ <!-- Contact Person -->
+ <div class="col-md-6 col-12 animate-fade-in-up" style="animation-delay: 0.2s;">
+ <h2 class="section-title">Ihr Ansprechpartner</h2>
+ <div class="card contact-card mb-4">
+ <div class="card-body p-4">
+ <div class="row">
+ {% if self.person_img %}
+ <!-- Person Image -->
+ <div class="col-md-5 col-sm-6 mb-4 mb-md-0">
+ <div class="person-img-container">
+ {% image self.person_img fill-300x400 class="img-fluid rounded" %}
+ </div>
+ <div class="text-center mt-3">
+ <h4 class="mb-1">{{ self.person_name }}</h4>
+ <p class="text-muted">{{ self.person_position }}</p>
+ </div>
+ </div>
+ {% endif %}
+
+ <!-- Contact Information -->
+ {% if self.address or self.mail_address or self.phone or self.web_address %}
+ <div class="col-md-7 col-sm-6">
+ <h5 class="mb-3">Kontaktdaten</h5>
+ <ul class="list-unstyled contact-info-list">
+ {% if self.address %}
+ <li><i class="bi bi-geo-alt"></i> {{ self.address }}</li>
+ {% endif %}
+ {% if self.mail_address %}
+ <li>
+ <a href="mailto:{{ self.mail_address }}" class="text-decoration-none text-dark">
+ <i class="bi bi-envelope"></i> {{ self.mail_address }}
+ </a>
+ </li>
+ {% endif %}
+ {% if self.phone %}
+ <li>
+ <a href="tel:{{ self.phone }}" class="text-decoration-none text-dark">
+ <i class="bi bi-telephone"></i> {{ self.phone }}
+ </a>
+ </li>
+ {% endif %}
+ {% if self.web_address %}
+ <li>
+ <a href="{{ self.web_address }}" class="text-decoration-none text-dark">
+ <i class="bi bi-globe"></i> {{ self.web_address }}
+ </a>
+ </li>
+ {% endif %}
+ </ul>
+ </div>
+ {% endif %}
</div>
</div>
</div>
- {% endif %}
-
- <!-- Contact Information -->
- {% if self.address or self.mail_address or self.phone or self.web_address %}
- <div class="col-sm-6 col-12">
- <ul class="list-unstyled mb-4">
- {% if self.address %}<li class="mb-2"><i class="bi bi-house me-2"></i>{{ self.address }}</li>{% endif %}
- {% if self.mail_address %}<li class="mb-2"><a href="mailto:{{ self.mail_address }}" class="text-decoration-none"><i class="bi bi-envelope me-2"></i>{{ self.mail_address }}</a></li>{% endif %}
- {% if self.phone %}<li class="mb-2"><a href="tel:{{ self.phone }}" class="text-decoration-none"><i class="bi bi-telephone me-2"></i>{{ self.phone }}</a></li>{% endif %}
- {% if self.web_address %}<li class="mb-2"><a href="{{ self.web_address }}" class="text-decoration-none"><i class="bi bi-globe me-2"></i>{{ self.web_address }}</a></li>{% endif %}
- </ul>
- </div>
- {% endif %}
</div>
- </div>
- <!-- Contact Form (Mobile) -->
- <div class="col-12 d-md-none">
- <div class="border-bottom pb-2 mb-3">
- <h2>{{ self.form_title }}</h2>
- </div>
- <form action="{% pageurl self %}" method="POST" class="mb-4">
- {% csrf_token %}
- {{ form|crispy }}
- <div class="text-end">
- <button type="submit" class="btn btn-primary">Senden</button>
+ <!-- Contact Form (Mobile) -->
+ <div class="col-12 d-md-none animate-fade-in-up" style="animation-delay: 0.3s;">
+ <h2 class="section-title">{{ self.form_title }}</h2>
+ <div class="card contact-card contact-form-card mb-4">
+ <form action="{% pageurl self %}" method="POST">
+ {% csrf_token %}
+ {{ form|crispy }}
+ <div class="text-end mt-4">
+ <button type="submit" class="btn btn-primary">
+ <i class="bi bi-send me-2"></i>Senden
+ </button>
+ </div>
+ </form>
</div>
- </form>
+ </div>
</div>
</div>
{% endblock content %}
diff --git a/feo_homepage/settings/dev.py b/feo_homepage/settings/dev.py
index 0430df7..a887fb5 100644
--- a/feo_homepage/settings/dev.py
+++ b/feo_homepage/settings/dev.py
@@ -5,6 +5,7 @@ DEBUG = True
TEMPLATE_DEBUG = True
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
+ALLOWED_HOSTS = ['*']
try: