optimierte texte
This commit is contained in:
knso committed
1 parent
f7dd547f8d
commit
7e58e43e18
55 files changed
+6318
-210
No files matched your search
@@ -0,0 +1,45 @@
|
||||
import { useEffect, type ReactNode } from "react";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import { initAnalytics, trackCtaClick, trackPageView } from "@/lib/analytics";
|
||||
|
||||
type AnalyticsProviderProps = {
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
/**
|
||||
* SPA-Seitenaufrufe + Klicks auf Elemente mit
|
||||
* data-analytics-cta und data-analytics-location.
|
||||
*/
|
||||
export function AnalyticsProvider({ children }: AnalyticsProviderProps) {
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
initAnalytics();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const path = location.pathname + location.search + location.hash;
|
||||
trackPageView(path);
|
||||
}, [location]);
|
||||
|
||||
useEffect(() => {
|
||||
const onClick = (event: MouseEvent) => {
|
||||
const target = event.target;
|
||||
if (!(target instanceof Element)) return;
|
||||
|
||||
const el = target.closest("[data-analytics-cta]");
|
||||
if (!el || !(el instanceof HTMLElement)) return;
|
||||
|
||||
const buttonText = el.dataset.analyticsCta ?? "";
|
||||
const clickLocation = el.dataset.analyticsLocation ?? "unknown";
|
||||
if (!buttonText) return;
|
||||
|
||||
trackCtaClick(buttonText, clickLocation);
|
||||
};
|
||||
|
||||
document.addEventListener("click", onClick, true);
|
||||
return () => document.removeEventListener("click", onClick, true);
|
||||
}, []);
|
||||
|
||||
return <>{children}</>;
|
||||
}
|
||||
@@ -23,22 +23,26 @@ const Contact = () => {
|
||||
<div className="mb-12">
|
||||
<div className="label-tag mb-4">Kontakt</div>
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-6">
|
||||
Bereit für Ihr<br />
|
||||
nächstes Projekt?
|
||||
Der nächste Schritt<br />
|
||||
<span className="text-muted-foreground">ist ein Gespräch</span>
|
||||
</h2>
|
||||
<p className="text-muted-foreground text-lg max-w-xl">
|
||||
Lassen Sie uns gemeinsam Ihre digitale Vision verwirklichen.
|
||||
Buchen Sie jetzt ein kostenloses Erstgespräch.
|
||||
In 15 Minuten klären wir, ob und wie WEBklar Ihr Unternehmen digital
|
||||
voranbringt – kostenlos und ohne Verpflichtung.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 mb-16">
|
||||
<Link to="/kontakt">
|
||||
<Link
|
||||
to="/kontakt"
|
||||
data-analytics-cta="Potenzialanalyse starten"
|
||||
data-analytics-location="contact_section"
|
||||
>
|
||||
<Button
|
||||
size="lg"
|
||||
className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
|
||||
>
|
||||
Termin buchen
|
||||
Potenzialanalyse starten
|
||||
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
@@ -23,7 +23,7 @@ const DifferentiationSection = () => {
|
||||
Alles aus einer Hand
|
||||
</h3>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Keine 10 verschiedenen Anbieter. Ein Partner für Ihre gesamte digitale Infrastruktur.
|
||||
Website, Automation und Schnittstellen aus einer Hand – ein Ansprechpartner statt fünf Agenturen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -35,7 +35,7 @@ const DifferentiationSection = () => {
|
||||
Systeme statt Inseln
|
||||
</h3>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Wir verbinden Ihre Tools zu einem durchdachten Gesamtsystem.
|
||||
CRM, Formulare und Website tauschen Daten – ohne manuelles Nachpflegen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -47,17 +47,21 @@ const DifferentiationSection = () => {
|
||||
Langfristige Partnerschaft
|
||||
</h3>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Wir begleiten Sie nicht nur beim Launch, sondern beim Wachstum.
|
||||
Nach dem Go-live bleiben wir dran: Optimierung, wenn Ihr Team und Umsatz wachsen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link to="/kontakt">
|
||||
<Link
|
||||
to="/kontakt"
|
||||
data-analytics-cta="Potenzialanalyse starten"
|
||||
data-analytics-location="differentiation_section"
|
||||
>
|
||||
<Button
|
||||
size="lg"
|
||||
className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
|
||||
>
|
||||
Kostenlose Potenzialanalyse sichern
|
||||
Potenzialanalyse starten
|
||||
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
+58
-64
@@ -1,87 +1,82 @@
|
||||
import React from 'react';
|
||||
import Logo from '@/components/Logo';
|
||||
|
||||
const DevStudio: React.FC = () => {
|
||||
return (
|
||||
<p className="inset-x-0 mt-20 bg-gradient-to-b from-black via-neutral-950 to-neutral-900 bg-clip-text text-center text-5xl font-bold text-transparent md:text-9xl lg:text-[12rem] xl:text-[13rem]">
|
||||
WEBklar
|
||||
</p>
|
||||
);
|
||||
};
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import Logo from "@/components/Logo";
|
||||
|
||||
const Footer: React.FC = () => {
|
||||
return (
|
||||
<div className="relative w-full overflow-hidden border-t border-white/[0.1] bg-black px-8 py-20 dark:border-white/[0.1] dark:bg-black">
|
||||
<div className="mx-auto flex max-w-7xl flex-col items-start justify-between text-sm text-neutral-500 sm:flex-row md:px-8">
|
||||
<div className="mx-auto flex max-w-7xl flex-col items-start justify-between gap-12 text-sm text-neutral-500 sm:flex-row md:px-8">
|
||||
<div>
|
||||
<div className="mr-0 mb-4 md:mr-4 md:flex">
|
||||
<a className="relative z-20 mr-4 flex items-center space-x-2 px-2 py-1 text-sm font-normal text-white" href="/">
|
||||
<Link
|
||||
to="/"
|
||||
className="relative z-20 mr-4 flex items-center space-x-2 px-2 py-1 text-sm font-normal text-white"
|
||||
>
|
||||
<Logo width={30} height={30} />
|
||||
<span className="font-medium text-white">WEBklar</span>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="mt-2 ml-2">© copyright WEBklar 2024. All rights reserved.</div>
|
||||
<p className="mt-2 ml-2 max-w-xs leading-relaxed">
|
||||
Webagentur für KMU – Website, Prozesse und Automatisierung aus einer Hand.
|
||||
</p>
|
||||
<div className="mt-4 ml-2">© {new Date().getFullYear()} WEBklar. Alle Rechte vorbehalten.</div>
|
||||
</div>
|
||||
<div className="mt-10 grid grid-cols-2 items-start gap-10 sm:mt-0 md:mt-0 lg:grid-cols-4">
|
||||
<div className="flex w-full flex-col justify-center space-y-4">
|
||||
<p className="hover:text-neutral-300 font-bold text-neutral-600 transition-colors dark:text-neutral-300">Pages</p>
|
||||
<ul className="hover:text-neutral-300 list-none space-y-4 text-neutral-600 transition-colors dark:text-neutral-300">
|
||||
<li className="list-none">
|
||||
<a className="hover:text-neutral-300 transition-colors" href="/products">All Products</a>
|
||||
<div className="grid grid-cols-2 items-start gap-10 sm:grid-cols-3 lg:gap-16">
|
||||
<div className="flex flex-col space-y-4">
|
||||
<p className="font-bold text-neutral-300">Seiten</p>
|
||||
<ul className="list-none space-y-3 text-neutral-400">
|
||||
<li>
|
||||
<Link to="/" className="hover:text-neutral-200 transition-colors">
|
||||
Startseite
|
||||
</Link>
|
||||
</li>
|
||||
<li className="list-none">
|
||||
<a className="hover:text-neutral-300 transition-colors" href="/products">Studio</a>
|
||||
<li>
|
||||
<Link to="/ueber-uns" className="hover:text-neutral-200 transition-colors">
|
||||
Über uns
|
||||
</Link>
|
||||
</li>
|
||||
<li className="list-none">
|
||||
<a className="hover:text-neutral-300 transition-colors" href="/products">Clients</a>
|
||||
<li>
|
||||
<a href="/#services" className="hover:text-neutral-200 transition-colors">
|
||||
Leistungen
|
||||
</a>
|
||||
</li>
|
||||
<li className="list-none">
|
||||
<a className="hover:text-neutral-300 transition-colors" href="/products">Pricing</a>
|
||||
</li>
|
||||
<li className="list-none">
|
||||
<a className="hover:text-neutral-300 transition-colors" href="/products">Blog</a>
|
||||
<li>
|
||||
<Link to="/kontakt" className="hover:text-neutral-200 transition-colors">
|
||||
Kontakt
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center space-y-4">
|
||||
<p className="hover:text-neutral-300 font-bold text-neutral-600 transition-colors dark:text-neutral-300">Socials</p>
|
||||
<ul className="hover:text-neutral-300 list-none space-y-4 text-neutral-600 transition-colors dark:text-neutral-300">
|
||||
<li className="list-none">
|
||||
<a className="hover:text-neutral-300 transition-colors" href="/products">Facebook</a>
|
||||
<div className="flex flex-col space-y-4">
|
||||
<p className="font-bold text-neutral-300">Kontakt</p>
|
||||
<ul className="list-none space-y-3 text-neutral-400">
|
||||
<li>
|
||||
<a
|
||||
href="mailto:support@webklar.com"
|
||||
className="hover:text-neutral-200 transition-colors"
|
||||
>
|
||||
support@webklar.com
|
||||
</a>
|
||||
</li>
|
||||
<li className="list-none">
|
||||
<a className="hover:text-neutral-300 transition-colors" href="/products">Instagram</a>
|
||||
</li>
|
||||
<li className="list-none">
|
||||
<a className="hover:text-neutral-300 transition-colors" href="/products">Twitter</a>
|
||||
</li>
|
||||
<li className="list-none">
|
||||
<a className="hover:text-neutral-300 transition-colors" href="/products">LinkedIn</a>
|
||||
<li>
|
||||
<a href="tel:+491704969375" className="hover:text-neutral-200 transition-colors">
|
||||
0170 4969375
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center space-y-4">
|
||||
<p className="hover:text-neutral-300 font-bold text-neutral-600 transition-colors dark:text-neutral-300">Legal</p>
|
||||
<ul className="hover:text-neutral-300 list-none space-y-4 text-neutral-600 transition-colors dark:text-neutral-300">
|
||||
<li className="list-none">
|
||||
<a className="hover:text-neutral-300 transition-colors" href="/agb">AGBs</a>
|
||||
<div className="flex flex-col space-y-4">
|
||||
<p className="font-bold text-neutral-300">Rechtliches</p>
|
||||
<ul className="list-none space-y-3 text-neutral-400">
|
||||
<li>
|
||||
<Link to="/agb" className="hover:text-neutral-200 transition-colors">
|
||||
AGB
|
||||
</Link>
|
||||
</li>
|
||||
<li className="list-none">
|
||||
<a className="hover:text-neutral-300 transition-colors" href="/impressum">Impressum</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center space-y-4">
|
||||
<p className="hover:text-neutral-300 font-bold text-neutral-600 transition-colors dark:text-neutral-300">Register</p>
|
||||
<ul className="hover:text-neutral-300 list-none space-y-4 text-neutral-600 transition-colors dark:text-neutral-300">
|
||||
<li className="list-none">
|
||||
<a className="hover:text-neutral-300 transition-colors" href="/products">Sign Up</a>
|
||||
</li>
|
||||
<li className="list-none">
|
||||
<a className="hover:text-neutral-300 transition-colors" href="/products">Login</a>
|
||||
</li>
|
||||
<li className="list-none">
|
||||
<a className="hover:text-neutral-300 transition-colors" href="/products">Forgot Password</a>
|
||||
<li>
|
||||
<Link to="/impressum" className="hover:text-neutral-200 transition-colors">
|
||||
Impressum
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -94,5 +89,4 @@ const Footer: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export { DevStudio, Footer };
|
||||
export default Footer;
|
||||
@@ -40,7 +40,11 @@ const Header = () => {
|
||||
<NavItems items={navItems} />
|
||||
<div className="navbar-actions flex items-center gap-4">
|
||||
<ThemeToggle />
|
||||
<Link to="/kontakt">
|
||||
<Link
|
||||
to="/kontakt"
|
||||
data-analytics-cta="Kontakt"
|
||||
data-analytics-location="header_desktop"
|
||||
>
|
||||
<NavbarButton
|
||||
as="span"
|
||||
variant="dark"
|
||||
@@ -99,7 +103,12 @@ const Header = () => {
|
||||
)
|
||||
)}
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<Link to="/kontakt" onClick={() => setIsMobileMenuOpen(false)}>
|
||||
<Link
|
||||
to="/kontakt"
|
||||
data-analytics-cta="Kontakt"
|
||||
data-analytics-location="header_mobile"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<NavbarButton
|
||||
as="span"
|
||||
variant="dark"
|
||||
|
||||
+7
-44
@@ -4,6 +4,7 @@ import React, { useState, useEffect, useRef } from "react";
|
||||
import { useTheme } from "next-themes";
|
||||
import Silk from "@/components/Silk";
|
||||
import CountUp from "@/components/CountUp";
|
||||
import { trackCtaClick } from "@/lib/analytics";
|
||||
|
||||
const SPARKLE_SVG = (
|
||||
<svg className="btn-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden>
|
||||
@@ -16,24 +17,7 @@ const SPARKLE_SVG = (
|
||||
);
|
||||
|
||||
function DemoButtonLetters({ text }: { text: string }) {
|
||||
// #region agent log
|
||||
const chars = text.split("");
|
||||
const spaceIndex = chars.findIndex((c) => c === " ");
|
||||
const lastIndex = chars.length - 1;
|
||||
const lastChar = chars[lastIndex];
|
||||
fetch("http://127.0.0.1:7244/ingest/72f53105-0a54-4d4c-a295-fb93aa72afcc", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
location: "Hero.tsx:DemoButtonLetters",
|
||||
message: "Letter split for button text",
|
||||
data: { text, len: chars.length, spaceIndex, spaceChar: spaceIndex >= 0 ? chars[spaceIndex] : null, lastIndex, lastChar },
|
||||
timestamp: Date.now(),
|
||||
sessionId: "debug-session",
|
||||
hypothesisId: "A,C",
|
||||
}),
|
||||
}).catch(() => {});
|
||||
// #endregion
|
||||
return (
|
||||
<>
|
||||
{chars.map((char, i) => (
|
||||
@@ -53,30 +37,6 @@ const Hero = () => {
|
||||
const [companyAge, setCompanyAge] = useState("");
|
||||
const secondBtnRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const el = secondBtnRef.current;
|
||||
if (!el) return;
|
||||
const firstTxtWrapper = el.querySelector(".txt-wrapper");
|
||||
const letters = firstTxtWrapper ? firstTxtWrapper.querySelectorAll(".btn-letter") : [];
|
||||
const spaceIdx = 8;
|
||||
const lastIdx = 16;
|
||||
const wSpace = letters[spaceIdx]?.getBoundingClientRect?.()?.width ?? -1;
|
||||
const wLast = letters[lastIdx]?.getBoundingClientRect?.()?.width ?? -1;
|
||||
fetch("http://127.0.0.1:7244/ingest/72f53105-0a54-4d4c-a295-fb93aa72afcc", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
location: "Hero.tsx:useEffect:measure",
|
||||
message: "Measured btn-letter widths (space + last)",
|
||||
data: { letterCount: letters.length, wSpace, wLast, spaceIdx, lastIdx },
|
||||
timestamp: Date.now(),
|
||||
sessionId: "debug-session",
|
||||
runId: "post-fix",
|
||||
hypothesisId: "B,D,E",
|
||||
}),
|
||||
}).catch(() => {});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const calculateAge = () => {
|
||||
const now = new Date();
|
||||
@@ -129,7 +89,7 @@ const Hero = () => {
|
||||
<div className="max-w-6xl">
|
||||
{/* Label */}
|
||||
<div className="label-tag mb-8 animate-fade-in" style={{ animationDelay: '0.1s' }}>
|
||||
Webentwicklung & Design
|
||||
Digitalisierung für KMU
|
||||
</div>
|
||||
|
||||
{/* Main Heading - Large Uppercase */}
|
||||
@@ -140,7 +100,7 @@ const Hero = () => {
|
||||
|
||||
{/* Subheadline */}
|
||||
<p className="text-xl md:text-2xl text-foreground/90 max-w-3xl mb-6 font-medium animate-fade-in" style={{ animationDelay: '0.3s' }}>
|
||||
Wir digitalisieren, automatisieren und vernetzen Ihre gesamte Firma in einem einzigen System – damit Ihr Unternehmen wachsen kann, ohne dass Sie mehr arbeiten müssen.
|
||||
Website, Automatisierung und vernetzte Prozesse – aus einer Hand. So wächst Ihr Unternehmen, ohne dass Ihr Team mehr Aufwand im Alltag hat.
|
||||
</p>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
@@ -149,7 +109,10 @@ const Hero = () => {
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary w-full sm:w-auto justify-center"
|
||||
onClick={() => navigate("/kontakt")}
|
||||
onClick={() => {
|
||||
trackCtaClick("Kostenlose Potenzialanalyse sichern", "hero");
|
||||
navigate("/kontakt");
|
||||
}}
|
||||
aria-label="Kostenlose Potenzialanalyse sichern"
|
||||
>
|
||||
<ArrowRight className="btn-icon" size={24} strokeWidth={2} aria-hidden />
|
||||
|
||||
@@ -19,19 +19,19 @@ const ProblemSection = () => {
|
||||
const problems = [
|
||||
{
|
||||
icon: Calendar,
|
||||
text: "Termine werden manuell koordiniert.",
|
||||
text: "Termine und Rückrufe laufen über Zettel, Excel und fünf Kalender-Apps.",
|
||||
},
|
||||
{
|
||||
icon: MessageSquareOff,
|
||||
text: "Kundenanfragen gehen unter.",
|
||||
text: "Anfragen aus E-Mail, Formular und Telefon – niemand sieht das Gesamtbild.",
|
||||
},
|
||||
{
|
||||
icon: TrendingDown,
|
||||
text: "Marketing bringt keine planbaren Ergebnisse.",
|
||||
text: "Marketing kostet Zeit, aber Sie wissen nicht, was wirklich Kunden bringt.",
|
||||
},
|
||||
{
|
||||
icon: Folders,
|
||||
text: "Wichtige Informationen liegen verteilt in verschiedenen Tools.",
|
||||
text: "Kundendaten, Angebote und Projekte liegen in getrennten Tools ohne Verbindung.",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -87,10 +87,10 @@ const ProblemSection = () => {
|
||||
<div className="mb-16 md:mb-20 max-w-4xl">
|
||||
<div className="label-tag mb-4">Das Problem</div>
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-8">
|
||||
Ihr Unternehmen sollte kein zweiter Vollzeitjob sein.
|
||||
Wachstum darf nicht mehr Chaos bedeuten.
|
||||
</h2>
|
||||
<p className="text-lg md:text-xl text-muted-foreground leading-relaxed">
|
||||
Zu viele Firmen verlieren täglich Umsatz durch ineffiziente Prozesse, doppelte Dateneingaben und fehlende Automationen.
|
||||
Viele KMU verlieren jeden Tag Umsatz – nicht wegen fehlender Ideen, sondern weil Prozesse, Tools und Website nicht zusammenspielen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -114,10 +114,10 @@ const ProblemSection = () => {
|
||||
{/* Closing Statement */}
|
||||
<div className="max-w-3xl">
|
||||
<p className="text-lg text-muted-foreground mb-4">
|
||||
Das kostet nicht nur Zeit – es verhindert Wachstum.
|
||||
Das kostet Zeit, Nerven – und Chancen, die Ihre Konkurrenz mit Systemen abholen.
|
||||
</p>
|
||||
<p className="text-xl md:text-2xl text-foreground font-display font-medium">
|
||||
Wer heute nicht digital strukturiert ist, wird morgen abgehängt.
|
||||
Ohne eine durchdachte digitale Basis bleibt Wachstum manuelle Mehrarbeit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,23 +6,23 @@ const Process = () => {
|
||||
const steps = [
|
||||
{
|
||||
number: 1,
|
||||
title: "Erstgespräch",
|
||||
description: "Wir lernen Ihr Unternehmen und Ihre Ziele kennen. In einem unverbindlichen Gespräch besprechen wir Ihre Wünsche.",
|
||||
title: "Potenzialanalyse",
|
||||
description: "15 Minuten, unverbindlich: Wir verstehen Ziele, Engpässe und Tools – und nennen die größten Hebel.",
|
||||
},
|
||||
{
|
||||
number: 2,
|
||||
title: "Konzept & Design",
|
||||
description: "Basierend auf unserer Analyse erstellen wir ein individuelles Konzept und Design für Ihre Website.",
|
||||
description: "Sie erhalten einen klaren Plan: Struktur, Design und Integrationen – abgestimmt auf Ihr Team.",
|
||||
},
|
||||
{
|
||||
number: 3,
|
||||
title: "Entwicklung",
|
||||
description: "Unsere Entwickler setzen Ihre Website mit modernsten Technologien um. Sie bleiben informiert.",
|
||||
title: "Umsetzung",
|
||||
description: "Website, Automationen und Anbindungen – in Etappen, mit Zwischenständen, die Sie testen können.",
|
||||
},
|
||||
{
|
||||
number: 4,
|
||||
title: "Launch & Support",
|
||||
description: "Nach gründlichen Tests geht Ihre Website live. Wir stehen Ihnen auch danach mit Support zur Seite.",
|
||||
title: "Launch & Betreuung",
|
||||
description: "Go-live mit Tests und Übergabe. Danach Updates, wenn sich Ihr Unternehmen weiterentwickelt.",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -58,6 +58,9 @@ const Process = () => {
|
||||
{/* Section Header */}
|
||||
<div className="mb-4">
|
||||
<div className="label-tag mb-4">So arbeiten wir</div>
|
||||
<p className="text-muted-foreground max-w-2xl mb-8 leading-relaxed">
|
||||
Transparent in vier Schritten – ohne Überraschungen bei Scope oder Kosten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="max-w-4xl">
|
||||
|
||||
@@ -13,31 +13,31 @@ type Project = {
|
||||
const projects: Project[] = [
|
||||
{
|
||||
title: "Email Sorter",
|
||||
description: "E-Mails automatisch sortieren",
|
||||
description: "Automatisierung · E-Mail-Workflows für Teams",
|
||||
image: "/project%20pics/emailsorter.png",
|
||||
url: "https://emailsorter.webklar.com/",
|
||||
},
|
||||
{
|
||||
title: "Neutral",
|
||||
description: "Webentwicklung / Custom Code",
|
||||
description: "Website · Markenauftritt & Custom Development",
|
||||
image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=600&fit=crop",
|
||||
url: "#",
|
||||
},
|
||||
{
|
||||
title: "Verbatim Labs",
|
||||
description: "Webentwicklung / UI Design / Custom Code",
|
||||
description: "Website · UI/UX & individuelle Entwicklung",
|
||||
image: "https://images.unsplash.com/photo-1559028012-481c04fa702d?w=800&h=600&fit=crop",
|
||||
url: "#",
|
||||
},
|
||||
{
|
||||
title: "JMK Engineers",
|
||||
description: "Webentwicklung / UI Design / Custom Code",
|
||||
description: "Website · Technische Präsentation & Lead-Generierung",
|
||||
image: "https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=800&h=600&fit=crop",
|
||||
url: "#",
|
||||
},
|
||||
{
|
||||
title: "GOODZ Club",
|
||||
description: "Webentwicklung / Custom Code / Lokalisierung",
|
||||
description: "Website · Mehrsprachig & skalierbare Plattform",
|
||||
image: "https://images.unsplash.com/photo-1542744094-3a31f272c490?w=800&h=600&fit=crop",
|
||||
url: "#",
|
||||
},
|
||||
|
||||
@@ -4,26 +4,26 @@ const Services = () => {
|
||||
const services = [
|
||||
{
|
||||
icon: Lightbulb,
|
||||
title: "Strategieberatung",
|
||||
description: "Wir analysieren Ihre Ziele und erstellen ein maßgeschneidertes Konzept für Ihren digitalen Erfolg.",
|
||||
title: "Potenzialanalyse",
|
||||
description: "Wo hakt es heute? Wir priorisieren Hebel mit dem größten Effekt – bevor etwas gebaut wird.",
|
||||
number: "01",
|
||||
},
|
||||
{
|
||||
icon: Palette,
|
||||
title: "UX/UI Design",
|
||||
description: "Modernes, benutzerfreundliches Design, das Ihre Marke perfekt repräsentiert.",
|
||||
description: "Klare Oberflächen, die Vertrauen schaffen und Besucher gezielt zur Anfrage führen.",
|
||||
number: "02",
|
||||
},
|
||||
{
|
||||
icon: Code,
|
||||
title: "Entwicklung",
|
||||
description: "Professionelle Webentwicklung mit modernsten Technologien. Schnell, sicher und skalierbar.",
|
||||
description: "Schnelle, sichere Websites und Integrationen – technisch sauber und erweiterbar.",
|
||||
number: "03",
|
||||
},
|
||||
{
|
||||
icon: Search,
|
||||
title: "SEO & Support",
|
||||
description: "Suchmaschinenoptimierung und kontinuierlicher Support für langfristigen Erfolg.",
|
||||
title: "SEO & Betreuung",
|
||||
description: "Sichtbar bei Google, stabil im Betrieb – mit Updates, wenn Ihr Unternehmen wächst.",
|
||||
number: "04",
|
||||
},
|
||||
];
|
||||
@@ -33,7 +33,10 @@ const Services = () => {
|
||||
<div className="container mx-auto px-6">
|
||||
{/* Section Header */}
|
||||
<div className="mb-4">
|
||||
<div className="label-tag mb-4">Was wir tun</div>
|
||||
<div className="label-tag mb-4">Leistungen</div>
|
||||
<p className="text-muted-foreground max-w-2xl mb-8 leading-relaxed">
|
||||
Von der ersten Analyse bis zum laufenden System – ein Team, ein Ansprechpartner, keine Tool-Inseln.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-px bg-border rounded-lg overflow-hidden">
|
||||
|
||||
@@ -19,9 +19,9 @@ const SolutionSection = () => {
|
||||
const isLight = mounted && resolvedTheme === "light";
|
||||
|
||||
const benefits = [
|
||||
"Alle Prozesse greifen ineinander.",
|
||||
"Informationen fließen automatisch.",
|
||||
"Aufgaben erledigen sich im Hintergrund.",
|
||||
"Website, CRM und Abläufe sprechen miteinander – keine doppelte Pflege.",
|
||||
"Anfragen landen automatisch beim richtigen Ansprechpartner.",
|
||||
"Wiederkehrende Aufgaben laufen im Hintergrund, Ihr Team arbeitet am Kunden.",
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -78,11 +78,11 @@ const SolutionSection = () => {
|
||||
<div className="label-tag mb-4">Die Lösung</div>
|
||||
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-8">
|
||||
Wir bauen Unternehmen, die ohne ihre Besitzer funktionieren.
|
||||
Ein System für Website, Prozesse und Wachstum.
|
||||
</h2>
|
||||
|
||||
<p className="text-lg md:text-xl text-muted-foreground leading-relaxed mb-8">
|
||||
Statt isolierter Einzellösungen entwickeln wir eine zentrale digitale Infrastruktur für Ihre gesamte Firma.
|
||||
WEBklar verbindet Ihre digitale Präsenz mit Automatisierung und den Tools, die Sie ohnehin nutzen – planbar, wartbar und auf Ihr Unternehmen zugeschnitten.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4 mb-10">
|
||||
@@ -94,12 +94,16 @@ const SolutionSection = () => {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Link to="/kontakt">
|
||||
<Link
|
||||
to="/kontakt"
|
||||
data-analytics-cta="Potenzialanalyse starten"
|
||||
data-analytics-location="solution_section"
|
||||
>
|
||||
<Button
|
||||
size="lg"
|
||||
className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
|
||||
>
|
||||
Jetzt Potenzialanalyse sichern
|
||||
Potenzialanalyse starten
|
||||
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
|
||||
</Button>
|
||||
</Link>
|
||||
@@ -111,10 +115,10 @@ const SolutionSection = () => {
|
||||
<div className="space-y-6">
|
||||
<div className="text-sm uppercase tracking-wider text-muted-foreground">Das Ergebnis</div>
|
||||
<h3 className="text-2xl md:text-3xl font-display font-medium text-foreground uppercase tracking-tight">
|
||||
Sie erhalten Kontrolle, Transparenz und die Freiheit, sich auf das zu konzentrieren, was wirklich zählt:
|
||||
Sie sehen, was läuft – und was Umsatz bringt. Mehr Zeit für Kunden statt für Tool-Pflege:
|
||||
</h3>
|
||||
<div className="text-4xl md:text-5xl font-display font-medium text-primary uppercase tracking-tight">
|
||||
Wachstum.
|
||||
Kontrolle.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+16
-13
@@ -6,33 +6,33 @@ const Values = () => {
|
||||
const features = [
|
||||
{
|
||||
icon: Users,
|
||||
title: "Digitale Kundenplattform",
|
||||
description: "Verwalten Sie Kontakte, Anfragen und Projekte zentral.",
|
||||
title: "Zentrale Kundenübersicht",
|
||||
description: "Kontakte, Anfragen und Projekte an einem Ort – für Sales und Geschäftsführung.",
|
||||
},
|
||||
{
|
||||
icon: Cog,
|
||||
title: "Automatisierte Prozesse",
|
||||
description: "Reduzieren Sie manuelle Arbeit drastisch.",
|
||||
title: "Automatisierte Abläufe",
|
||||
description: "Weniger Copy-Paste: Follow-ups, Benachrichtigungen und Übergaben laufen von selbst.",
|
||||
},
|
||||
{
|
||||
icon: MessageSquare,
|
||||
title: "Intelligente Kundenkommunikation",
|
||||
description: "Keine Anfrage geht mehr verloren.",
|
||||
title: "Keine Anfrage verloren",
|
||||
description: "Jeder Kanal landet im System – mit Status, Zuständigkeit und Historie.",
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
title: "Planbare Neukundengewinnung",
|
||||
description: "Strukturierte Funnels statt Zufall.",
|
||||
title: "Planbare Neukunden",
|
||||
description: "Website und Prozesse ziehen an einer Schnur – Sie sehen, was funktioniert.",
|
||||
},
|
||||
{
|
||||
icon: BarChart3,
|
||||
title: "Echtzeit-Analytics",
|
||||
description: "Treffen Sie Entscheidungen auf Basis klarer Daten.",
|
||||
title: "Klare Kennzahlen",
|
||||
description: "Übersicht über Anfragen, Pipeline und Engpässe – ohne Excel-Chaos.",
|
||||
},
|
||||
{
|
||||
icon: Layers,
|
||||
title: "Skalierbare Infrastruktur",
|
||||
description: "Ihr System wächst mit Ihrem Unternehmen.",
|
||||
title: "Mitwachsende Technik",
|
||||
description: "Architektur und Hosting, die mit Umsatz und Team skalieren – nicht dagegen.",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -55,8 +55,11 @@ const Values = () => {
|
||||
<div className="mb-16 md:mb-24 max-w-3xl">
|
||||
<div className="label-tag mb-4">Was Sie bekommen</div>
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-6">
|
||||
Alles, was Ihr Unternehmen braucht. In einem System.
|
||||
Was sich für Sie im Alltag ändert.
|
||||
</h2>
|
||||
<p className="text-muted-foreground text-lg leading-relaxed max-w-2xl">
|
||||
Kein weiteres Tool zum Mitpflegen – sondern ein Setup, das Ihre Arbeit spürbar entlastet.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
|
||||
Reference in new issue
Block a user