Enhance website templates for Invario services and pricing
- Updated dienstleistungen.html to improve layout and content clarity, including new service descriptions and a refined CSS style for better visual appeal. - Revamped inventarsystem.html with a focus on key features and pricing, adding a structured layout and enhancing the user experience with new design elements. - Modified main.html to reflect updated pricing information and improve SEO with enhanced meta descriptions and structured data for better search visibility. - Revised preise.html to clearly present pricing details, including new pricing pills and comparison cards for better user understanding of offerings.
This commit is contained in:
@@ -1,11 +1,150 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Inventarsystem für Schulen | Übersicht{% endblock %}
|
||||
{% set meta_description = "Invario Inventarsystem für Schulen: 250 € pro Jahr, 5-Minuten-Start, PDF-Berichte, Serverstandort Deutschland und entwickelt mit der Grundschule Albert-Schweitzer-Straße." %}
|
||||
|
||||
{% block title %}Inventarsystem für Schulen | 250 € / Jahr{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<style>
|
||||
.page-hero {
|
||||
padding: 1.4rem 1.5rem;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #d6dfda;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f4f8f4 100%);
|
||||
box-shadow: 0 16px 34px rgba(25, 45, 41, 0.06);
|
||||
}
|
||||
|
||||
.page-hero h1 {
|
||||
margin-bottom: 0.45rem;
|
||||
}
|
||||
|
||||
.page-hero p {
|
||||
max-width: 72ch;
|
||||
color: #496267;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.hero-pills,
|
||||
.feature-grid {
|
||||
margin-top: 1rem;
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.hero-pills {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.pill,
|
||||
.panel {
|
||||
border-radius: 16px;
|
||||
border: 1px solid #d8dfd7;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.pill {
|
||||
padding: 0.9rem 1rem;
|
||||
}
|
||||
|
||||
.pill strong {
|
||||
display: block;
|
||||
color: #153e45;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.pill span {
|
||||
color: #536c71;
|
||||
}
|
||||
|
||||
.split {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.9rem;
|
||||
margin-top: 0.9rem;
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 1.15rem;
|
||||
box-shadow: 0 10px 24px rgba(25, 45, 41, 0.04);
|
||||
}
|
||||
|
||||
.panel h2 {
|
||||
color: #235159;
|
||||
margin-bottom: 0.45rem;
|
||||
font-size: clamp(1.05rem, 1.8vw, 1.35rem);
|
||||
}
|
||||
|
||||
.panel p,
|
||||
.panel li {
|
||||
color: #496267;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 1rem;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #d8dfd7;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f8faf8 100%);
|
||||
}
|
||||
|
||||
.feature-card h2 {
|
||||
margin-bottom: 0.35rem;
|
||||
color: #235159;
|
||||
font-size: clamp(1.02rem, 1.7vw, 1.25rem);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
color: #496267;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.proof {
|
||||
margin-top: 1rem;
|
||||
padding: 1.1rem 1.15rem;
|
||||
border-radius: 18px;
|
||||
border: 1px solid #d6dfda;
|
||||
background: linear-gradient(135deg, #eef6f1 0%, #fbfcfb 100%);
|
||||
}
|
||||
|
||||
.proof strong {
|
||||
color: #173f46;
|
||||
}
|
||||
|
||||
.cta-row {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hero-pills,
|
||||
.split,
|
||||
.feature-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="page-hero">
|
||||
<h1>Inventarsystem für Schulen</h1>
|
||||
<p>Alle wichtigen Funktionen für den Schulalltag in einer klaren Oberfläche: von Inventar bis zur nachvollziehbaren Historie.</p>
|
||||
<p>Das Inventarsystem kostet 250 € pro Jahr, läuft ohne Installation im Browser und wurde mit der Grundschule Albert-Schweitzer-Straße als Entwicklungspartner für den Schulalltag geformt.</p>
|
||||
<div class="hero-pills" aria-label="Kernfakten">
|
||||
<div class="pill"><strong>250 € / Jahr</strong><span>Planbare Flatrate für Inventarverwaltung</span></div>
|
||||
<div class="pill"><strong>5 Minuten</strong><span>Start ohne lokale Installation</span></div>
|
||||
<div class="pill"><strong>PDF-Export</strong><span>Berichte für Inventur und Nachweise</span></div>
|
||||
</div>
|
||||
<div class="cta-row">
|
||||
<a class="nav-btn primary" href="{{ url_for('preise') }}">Preise ansehen</a>
|
||||
<a class="nav-btn" href="{{ url_for('kontakt') }}">Beratung anfragen</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="split">
|
||||
@@ -30,25 +169,20 @@
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="split" style="margin-top:0.9rem;">
|
||||
<article class="panel">
|
||||
<section class="feature-grid" aria-label="Kernfunktionen">
|
||||
<article class="feature-card">
|
||||
<h2>3. QR-Code Unterstützung</h2>
|
||||
<p>Mit QR-Codes lassen sich Geräte vor Ort direkt identifizieren und aktualisieren.</p>
|
||||
<ul>
|
||||
<li>Labels direkt aus dem System erzeugen</li>
|
||||
<li>Scannen und sofort zur richtigen Akte springen</li>
|
||||
<li>Nutzbar mit Handscanner oder Smartphone-Kamera</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="panel">
|
||||
<article class="feature-card">
|
||||
<h2>4. Historie und Verantwortung</h2>
|
||||
<p>Änderungen bleiben dokumentiert, damit Entscheidungen und Vorgänge transparent bleiben.</p>
|
||||
<ul>
|
||||
<li>Wer hat wann was geändert</li>
|
||||
<li>Leihvorgänge und Rückgaben nachvollziehen</li>
|
||||
<li>Klare Nachweise für interne Abstimmungen</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="feature-card">
|
||||
<h2>5. BFSG-bewusste Nutzung</h2>
|
||||
<p>Klare Kontraste, große Bedienelemente und eine reduzierte Oberfläche unterstützen die tägliche Arbeit im Sekretariat.</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
@@ -64,18 +198,8 @@
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.page-hero { margin-bottom: 1.2rem; }
|
||||
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
|
||||
.panel { background: #fff; border: 1px solid #d8dfd7; border-radius: 14px; padding: 1.15rem; box-shadow: 0 10px 24px rgba(25, 45, 41, 0.04); }
|
||||
.panel h2 { color: #265057; margin-bottom: 0.5rem; font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
|
||||
.panel p { color: #496267; line-height: 1.55; margin-bottom: 0.8rem; font-size: 0.98rem; }
|
||||
.panel ul { margin: 0; padding-left: 1.15rem; color: #496267; display: grid; gap: 0.45rem; }
|
||||
.wide-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
|
||||
<section class="proof">
|
||||
<strong>Leuchtturm:</strong> Die Grundschule Albert-Schweitzer-Straße nutzt Invario als Referenz aus der Praxis. Genau daraus entsteht der Leitsatz: Von Praktikern für Praktiker entwickelt.
|
||||
</section>
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.split { grid-template-columns: 1fr; }
|
||||
.wide-list { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user