update
This commit is contained in:
Engin committed
1 parent
cc2b84dcad
commit
3bda7d6eb6
28 files changed
+2330
-49
No files matched your search
@@ -1,7 +0,0 @@
|
||||
export default function Loading() {
|
||||
return (
|
||||
<main>
|
||||
<p>Laden...</p>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
.hero {
|
||||
background: var(--color-background-linear);
|
||||
padding-block: var(--space-16);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.inner {
|
||||
max-width: var(--container-width);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--space-4);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.decoration {
|
||||
position: absolute;
|
||||
top: var(--space-8);
|
||||
right: var(--space-8);
|
||||
display: none;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
gap: var(--space-3);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: var(--radius-full);
|
||||
background-color: var(--color-accent);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.heading {
|
||||
color: var(--color-heading);
|
||||
max-width: 26ch;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.lead {
|
||||
margin-top: var(--space-3);
|
||||
font-size: var(--font-size-base);
|
||||
max-width: 65ch;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* --- Story Section --- */
|
||||
.storySection {
|
||||
padding-block: var(--space-16);
|
||||
}
|
||||
|
||||
.storyInner {
|
||||
max-width: var(--container-width);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--space-4);
|
||||
}
|
||||
|
||||
.storyText {
|
||||
max-width: 70ch;
|
||||
}
|
||||
|
||||
.storyHeading {
|
||||
color: var(--color-heading);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.storyLead {
|
||||
font-size: var(--font-size-base);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.storyLead:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* --- Werte Section (Kachel-Design wie MaintenanceCleaningSection) --- */
|
||||
.werteSection {
|
||||
background: var(--color-background-linear);
|
||||
padding-block: var(--space-16);
|
||||
}
|
||||
|
||||
.werteInner {
|
||||
max-width: var(--container-width);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--space-4);
|
||||
}
|
||||
|
||||
.werteHeading {
|
||||
max-width: 24ch;
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
.werteLead {
|
||||
margin-top: var(--space-3);
|
||||
font-size: var(--font-size-base);
|
||||
max-width: 48ch;
|
||||
}
|
||||
|
||||
.werteGrid {
|
||||
margin-top: var(--space-8);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.werteCard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
background: var(--color-surface-muted, #e6ede9);
|
||||
border-radius: 12px;
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.werteIcon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.werteCardHeading {
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
.werteCardText {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--font-heading-color);
|
||||
}
|
||||
|
||||
/* --- Philosophy Section --- */
|
||||
.philosophySection {
|
||||
padding-block: var(--space-16);
|
||||
}
|
||||
|
||||
.philosophyInner {
|
||||
max-width: var(--container-width);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--space-4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-8);
|
||||
}
|
||||
|
||||
.philosophyCol {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.philosophyHeading {
|
||||
color: var(--color-heading);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.philosophyText {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
/* Tablet: 768px */
|
||||
@media (min-width: 768px) {
|
||||
.storySection,
|
||||
.werteSection,
|
||||
.philosophySection {
|
||||
padding-block: var(--space-24);
|
||||
}
|
||||
|
||||
.decoration {
|
||||
display: grid;
|
||||
top: -24px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.werteGrid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.philosophyInner {
|
||||
flex-direction: row;
|
||||
gap: var(--space-10);
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop: 1024px */
|
||||
@media (min-width: 1024px) {
|
||||
.hero {
|
||||
padding-block: var(--space-36);
|
||||
}
|
||||
|
||||
.decoration {
|
||||
top: -42px;
|
||||
}
|
||||
|
||||
.werteGrid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
+127
-1
@@ -1,8 +1,134 @@
|
||||
import type { Metadata } from "next";
|
||||
import { CheckCircleIcon } from "@phosphor-icons/react/dist/ssr";
|
||||
import styles from "./page.module.css";
|
||||
import ContactCtaSection from "@/components/contact/ContactCtaSection";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Über uns",
|
||||
description:
|
||||
"Basiclean ist Ihr Partner für professionelle Gebäudereinigung in Hannover. Erfahren Sie mehr über unsere Werte, Ziele und unser Verständnis von Qualität.",
|
||||
};
|
||||
|
||||
const werte = [
|
||||
{
|
||||
heading: "Zuverlässigkeit",
|
||||
text: "Wir halten Termine ein und sorgen für gleichbleibende Qualität – Woche für Woche, ohne Ausnahmen.",
|
||||
},
|
||||
{
|
||||
heading: "Transparenz",
|
||||
text: "Faire, nachvollziehbare Preise ohne versteckte Kosten. Sie wissen jederzeit, wofür Sie bezahlen.",
|
||||
},
|
||||
{
|
||||
heading: "Sorgfalt",
|
||||
text: "Wir behandeln Ihr Objekt so, als wäre es unser eigenes – mit Aufmerksamkeit für Details.",
|
||||
},
|
||||
{
|
||||
heading: "Nähe",
|
||||
text: "Als regionales Unternehmen sind wir persönlich erreichbar und kennen die Anforderungen vor Ort.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function UeberUns() {
|
||||
return (
|
||||
<main>
|
||||
<h1>Über Uns</h1>
|
||||
<section className={styles.hero} aria-labelledby="hero-heading">
|
||||
<div className={styles.inner}>
|
||||
<div className={styles.decoration} aria-hidden="true">
|
||||
{Array.from({ length: 18 }).map((_, i) => (
|
||||
<span key={i} className={styles.dot} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<h1 id="hero-heading" className={styles.heading}>
|
||||
Über Basiclean
|
||||
</h1>
|
||||
<p className={`lead ${styles.lead}`}>
|
||||
Basiclean wurde mit dem Anspruch gegründet, Gebäudereinigung in
|
||||
Hannover verlässlicher, transparenter und persönlicher zu gestalten.
|
||||
Wir sind ein junges Unternehmen mit klarem Fokus: saubere Ergebnisse
|
||||
und langfristige Zusammenarbeit statt austauschbarer
|
||||
Standarddienstleistung.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={styles.storySection}>
|
||||
<div className={styles.storyInner}>
|
||||
<div className={styles.storyText}>
|
||||
<h2 className={styles.storyHeading}>Wie wir angefangen haben</h2>
|
||||
<p className={styles.storyLead}>
|
||||
Basiclean ist ein neu gegründetes Unternehmen für Gebäudereinigung
|
||||
mit Sitz in Hannover. Der Anstoß war die Beobachtung, dass viele
|
||||
Reinigungsdienstleistungen unpersönlich und wenig flexibel
|
||||
organisiert sind. Wir wollten das anders machen: mit festen
|
||||
Ansprechpartnern, klaren Absprachen und einem Team, das sich
|
||||
wirklich für das Ergebnis verantwortlich fühlt.
|
||||
</p>
|
||||
<p className={styles.storyLead}>
|
||||
Von Anfang an haben wir uns auf Unterhalts-, Fenster- und
|
||||
Grundreinigung sowie Hausmeisterdienste für Büros, Wohn- und
|
||||
Geschäftshäuser, Kanzleien und Gewerbeflächen spezialisiert –
|
||||
statt alles anzubieten, konzentrieren wir uns auf das, was wir
|
||||
wirklich gut können.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={styles.werteSection}>
|
||||
<div className={styles.werteInner}>
|
||||
<h2 className={styles.werteHeading}>Was uns wichtig ist</h2>
|
||||
<p className={`lead ${styles.werteLead}`}>
|
||||
Diese Grundsätze bestimmen, wie wir arbeiten – bei jedem Auftrag,
|
||||
unabhängig von Objektgröße oder Branche.
|
||||
</p>
|
||||
|
||||
<div className={styles.werteGrid}>
|
||||
{werte.map((wert) => (
|
||||
<article key={wert.heading} className={styles.werteCard}>
|
||||
<span className={styles.werteIcon} aria-hidden="true">
|
||||
<CheckCircleIcon size={24} weight="duotone" />
|
||||
</span>
|
||||
<h3 className={styles.werteCardHeading}>{wert.heading}</h3>
|
||||
<p className={styles.werteCardText}>{wert.text}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={styles.philosophySection}>
|
||||
<div className={styles.philosophyInner}>
|
||||
<div className={styles.philosophyCol}>
|
||||
<h2 className={styles.philosophyHeading}>Unsere Philosophie</h2>
|
||||
<p className={styles.philosophyText}>
|
||||
Wir verstehen Reinigung nicht als reine Dienstleistung nach
|
||||
Checkliste, sondern als Teil der Wahrnehmung Ihres Unternehmens.
|
||||
Ein gepflegtes Gebäude schafft Vertrauen – bei Kunden,
|
||||
Mitarbeitenden und Besuchern gleichermaßen. Deshalb passen wir
|
||||
unsere Konzepte an das jeweilige Objekt an, statt starre
|
||||
Standardpakete zu verkaufen.
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.philosophyCol}>
|
||||
<h2 className={styles.philosophyHeading}>Unsere Ziele</h2>
|
||||
<p className={styles.philosophyText}>
|
||||
Kurzfristig wollen wir in Hannover und Umgebung als verlässlicher
|
||||
Partner für Gebäudereinigung wahrgenommen werden. Langfristig
|
||||
setzen wir auf nachhaltiges Wachstum durch zufriedene, langjährige
|
||||
Kunden statt kurzfristiger Einzelaufträge – getragen von einem
|
||||
Team, das fair behandelt wird und entsprechend motiviert arbeitet.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<ContactCtaSection
|
||||
heading="Lernen Sie uns persönlich kennen"
|
||||
lead="Sie möchten mehr über Basiclean erfahren oder direkt ein individuelles Angebot anfragen? Wir freuen uns auf Ihre Nachricht."
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user