-
-
- Für Handwerk, Praxis und Therapie in Bayern
-
+
+
+
+
+ Für Handwerk, Praxis und Therapie in Bayern
+
-
- Eine Webseite, die{" "}
- neue Kunden bringt - nicht nur gut aussieht.
-
+
+ Eine Webseite, die{" "}
+ neue Kunden bringt - nicht nur gut aussieht.
+
-
- Damit neue Kunden Sie zuerst finden - nicht die Konkurrenz in der Nachbarschaft.
-
+
+ Damit neue Kunden Sie zuerst finden - nicht die Konkurrenz in der Nachbarschaft.
+
-
-
-
-
-
+
+ 30 Minuten, kostenlos - direkt online buchen, keine Warteschleifen.
+
-
- 
-
+
+ {trustPoints.map(({ icon: Icon, label }) => (
+ -
+
+ {label}
+
+ ))}
+
);
diff --git a/src/components/pricing.tsx b/src/components/pricing.tsx
index d7810f6..3c79204 100644
--- a/src/components/pricing.tsx
+++ b/src/components/pricing.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
import { Check, Sparkles } from "lucide-react";
import { Button } from "@/components/ui/button.tsx";
import { BookingDialog } from "@/components/booking-dialog.tsx";
@@ -5,6 +6,7 @@ import { BookingDialog } from "@/components/booking-dialog.tsx";
type PricingPlan = {
id: number;
name: string;
+ slug: string;
description: string;
price: number;
features: string[];
@@ -12,16 +14,26 @@ type PricingPlan = {
highlighted?: boolean;
};
+type HostingPlan = {
+ id: number;
+ name: string;
+ description: string;
+ priceMonthly: number;
+ priceYearly: number;
+ features: string[];
+ highlighted: boolean;
+}
+
const offerlist: PricingPlan[] = [
{
id: 1,
name: "Das Kompakt-Paket",
+ slug: "kompakt",
description:
"Perfekt für die schnelle, moderne Präsentation. Ideal für Therapeuten, Berater und regionale Handwerker.",
- price: 900,
+ price: 1800,
features: [
"Alle wichtigen Infos auf einer Seite",
- "Kontaktformular & Anfahrt",
"Für Smartphone optimiert",
"SSL-Verschlüsselung inklusive",
"SEO-Grundlagen (Meta-Tags, schnelle Ladezeit)",
@@ -31,40 +43,60 @@ const offerlist: PricingPlan[] = [
{
id: 2,
name: "Das Klassik-Paket",
+ slug: "klassik",
description:
"Für Praxen und Betriebe mit breitem Angebot. Maximale Übersicht für Ihre Besucher.",
- price: 1700,
+ price: 2500,
features: [
"Separate Leistungs- und Teamseiten",
"Bildergalerie & Referenzen",
"Erweiterte SEO-Optimierung",
"Rechtstexte-Assistenz",
- "3 Monate kostenloser Support",
],
priceNote: "Aufpreise z. B. für zusätzliche Sprachen oder Shop-Anbindung.",
highlighted: true,
+ }
+];
+
+const hostinglist: HostingPlan[] = [
+ {
+ id: 1,
+ name: "Basis",
+ description: "",
+ priceMonthly: 79,
+ priceYearly: 790,
+ features: [
+ "Premium-Hosting",
+ "SSL-Zertifikat",
+ "Uptime Monitoring",
+ "30 Minuten pro Monat für Textänderungen oder Anpassungen",
+ ],
+ highlighted: false,
},
{
- id: 3,
- name: "Ihre neue Webapp",
- description:
- "Für digitale Lösungen mit echtem Mehrwert. Ideal für Unternehmen, die mehr als eine Website brauchen.",
- price: 2500,
+ id: 2,
+ name: "Standard",
+ description: "",
+ priceMonthly: 149,
+ priceYearly: 1490,
features: [
- "Login- und Nutzerbereich",
- "Individuelle Funktionen",
- "Terminbuchung oder Kundenportal",
- "SEO-Grundlagen (Meta-Tags, schnelle Ladezeit)",
- "Skalierbare Infrastruktur",
+ "Alles aus Basis",
+ "1 Stunde pro Monat für inhaltliche Pflege, z. B. neue Texte, Bilder, Teammitglieder",
+ "Monatlicher Performance-Report zu Besucherzahlen und Analytics",
],
- priceNote: "Endpreis abhängig vom Funktionsumfang - Details im Erstgespräch.",
- },
+ highlighted: true,
+ }
];
const priceFormatter = new Intl.NumberFormat("de-DE");
+type Billing = "monthly" | "yearly";
+
export const Pricing = () => {
+ const [billing, setBilling] = useState
("monthly");
+
return (
+ <>
Preise
@@ -77,7 +109,7 @@ export const Pricing = () => {
-
+
{offerlist.map((offer) => {
const isHighlighted = offer.highlighted;
return (
@@ -132,6 +164,8 @@ export const Pricing = () => {
@@ -141,6 +175,234 @@ export const Pricing = () => {
);
})}
+
+
+
+
Hosting & Betreuung
+
+ Rundum betreut - auch nach dem Launch.
+
+
+ Wir übernehmen Technik, Sicherheit und laufende Anpassungen -
+ damit Ihre Seite dauerhaft schnell, sicher und aktuell bleibt.
+
+
+
+
+
+
+
+
+
+
+
+ {hostinglist.map((plan) => {
+ const isHighlighted = plan.highlighted;
+ const price =
+ billing === "monthly" ? plan.priceMonthly : plan.priceYearly;
+ const suffix = billing === "monthly" ? "/ Monat" : "/ Jahr";
+ return (
+
+ {isHighlighted && (
+
+
+ Empfehlung
+
+ )}
+
+
+
+ {plan.name}
+
+ {plan.description && (
+
+ {plan.description}
+
+ )}
+
+
+
+
+ {priceFormatter.format(price)} €
+
+
+ {suffix}
+
+
+
+ zzgl. gesetzl. Umsatzsteuer
+
+
+
+ {plan.features.map((feature) => (
+ -
+
+ {feature}
+
+ ))}
+
+
+ );
+ })}
+
+
+
+ Nicht genutzte Zeitkontingente verfallen zum Monatsende.
+ Kündbar zum Ende der jeweiligen Laufzeit.
+
+
+
+
+
+
+
+
Für Startups
+
+ Ohne Vorabkosten starten.
+
+
+ Als Startup steckt jeder Euro ins Wachstum. Wir übernehmen
+ die Website und finanzieren die Erstellung mit - Sie zahlen
+ von Tag eins nur einen festen Monatspreis.
+
+
+ {[
+ "0 € Einmalkosten für die Erstellung",
+ "Klassik-Paket inkl. Hosting, SSL und laufender Pflege",
+ "1 Stunde inhaltliche Betreuung pro Monat inklusive",
+ "Mindestlaufzeit 24 Monate, danach monatlich kündbar",
+ ].map((feature) => (
+ -
+
+ {feature}
+
+ ))}
+
+
+ Für Unternehmen mit Gründung innerhalb der letzten 3 Jahre.
+ Nachweis über Handelsregister- oder Gewerbeanmeldung.
+
+
+
+
+
+
+
+ Startup-Paket
+
+
+ Alles inklusive
+
+
+
+
+ Angebot
+
+
+
+
+
+ 300 €
+
+ / Monat
+
+
+ zzgl. gesetzl. Umsatzsteuer
+
+
+
+
+
-
+ Einmalkosten
+
+ -
+ 0 €
+
+
+
+
- Laufzeit
+ -
+ 24 Monate
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/src/components/public-shell.tsx b/src/components/public-shell.tsx
new file mode 100644
index 0000000..867429e
--- /dev/null
+++ b/src/components/public-shell.tsx
@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import Header from "@/components/header.tsx";
+import { Footer } from "@/components/footer.tsx";
+
+export function PublicShell({ children }: { children: ReactNode }) {
+ return (
+
+ );
+}
diff --git a/src/dev-component/Devtool.tsx b/src/dev-component/Devtool.tsx
index 51d5627..5226896 100644
--- a/src/dev-component/Devtool.tsx
+++ b/src/dev-component/Devtool.tsx
@@ -1,4 +1,5 @@
import { useEffect, useRef, useState, type ReactNode, type CSSProperties } from 'react';
+import './devtool.css';
interface CrosshairProps {
children: ReactNode;
diff --git a/src/openpanel.ts b/src/openpanel.ts
new file mode 100644
index 0000000..59aaa0c
--- /dev/null
+++ b/src/openpanel.ts
@@ -0,0 +1,20 @@
+import { OpenPanel } from '@openpanel/web';
+
+// Do-Not-Track-Signal des Browsers respektieren. Wenn der Besucher DNT aktiv
+// hat, wird das SDK deaktiviert – keine Events, keine Screen Views. Damit die
+// Zusage in der Datenschutzerklärung technisch abgedeckt ist.
+const respectDnt =
+ typeof navigator !== 'undefined' &&
+ (navigator.doNotTrack === '1' ||
+ // Legacy-Fallbacks für ältere Browser-Implementierungen.
+ (navigator as unknown as { msDoNotTrack?: string }).msDoNotTrack === '1' ||
+ (window as unknown as { doNotTrack?: string }).doNotTrack === '1');
+
+export const op = new OpenPanel({
+ apiUrl: 'https://data.hurler-webdesign.de',
+ clientId: '40700ec3-9beb-45f9-9a2a-c9321d307d1a',
+ trackScreenViews: true,
+ trackOutgoingLinks: true,
+ trackAttributes: true,
+ disabled: respectDnt,
+});
\ No newline at end of file
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index d57b38d..7f014b7 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,16 +1,38 @@
import { HeadContent, Scripts, createRootRouteWithContext } from '@tanstack/react-router'
-import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
-import { TanStackDevtools } from '@tanstack/react-devtools'
+import { lazy, Suspense } from 'react'
import type { Session } from '#/lib/auth.ts'
import { getSessionFn } from '#/lib/session.ts'
+import { Analytics } from '#/components/analytics.tsx'
import appCss from '../styles.css?url'
export interface RouterAppContext {
session: Session | null
}
-const themeItnitScript = `
+const DevtoolsPanel = import.meta.env.DEV
+ ? lazy(async () => {
+ const [{ TanStackDevtools }, { TanStackRouterDevtoolsPanel }] = await Promise.all([
+ import('@tanstack/react-devtools'),
+ import('@tanstack/react-router-devtools'),
+ ])
+ return {
+ default: () => (
+
,
+ },
+ ]}
+ />
+ ),
+ }
+ })
+ : null
+
+const themeInitScript = `
(function() {
try {
var stored = localStorage.getItem('theme');
@@ -57,19 +79,31 @@ export const Route = createRootRouteWithContext
()({
content:
'Handgemachte Webseiten – blitzschnell, sicher und individuell.',
},
- { property: 'og:image', content: '/img/logo.png' },
+ { property: 'og:image', content: 'https://webkulisse.de/img/og-cover.png' },
+ { property: 'og:image:width', content: '1200' },
+ { property: 'og:image:height', content: '630' },
+ { property: 'og:image:alt', content: 'webkulisse – Webdesign für Handwerk, Praxis & Therapie' },
+ { property: 'og:url', content: 'https://webkulisse.de/' },
// Twitter/X Card
- { name: 'twitter:card', content: 'summary' },
+ { name: 'twitter:card', content: 'summary_large_image' },
{ name: 'twitter:title', content: 'webkulisse' },
{
name: 'twitter:description',
content:
'Handgemachte Webseiten – blitzschnell, sicher und individuell.',
},
- { name: 'twitter:image', content: '/img/logo.png' },
+ { name: 'twitter:image', content: 'https://webkulisse.de/img/og-cover.png' },
],
links: [
{ rel: 'stylesheet', href: appCss },
+ // Variable-Font vorladen, damit erste Textausgabe nicht auf den System-Fallback rutscht.
+ {
+ rel: 'preload',
+ href: '/fonts/VendSans-VariableFont_wght.woff2',
+ as: 'font',
+ type: 'font/woff2',
+ crossOrigin: 'anonymous',
+ },
// Favicon – wird in Browser-Tabs, Bookmarks und PWA-Icons genutzt.
{ rel: 'icon', type: 'image/png', href: '/img/logo.png' },
{ rel: 'apple-touch-icon', href: '/img/logo.png' },
@@ -78,7 +112,11 @@ export const Route = createRootRouteWithContext()({
// z. B. im Blog: { rel: 'canonical', href: `${SITE_URL}/blog/${slug}` }.
{ rel: 'canonical', href: 'https://webkulisse.de/' },
],
- scripts: [{ children: themeItnitScript }]
+ scripts: [
+ { children: themeInitScript },
+ // OpenPanel-Loader (self-hosted). Async, damit der Haupt-Thread nicht blockiert wird.
+ { src: 'https://hub.hurler-webdesign.de/op1.js', async: true, defer: true },
+ ]
}),
shellComponent: RootDocument,
})
@@ -91,17 +129,12 @@ function RootDocument({ children }: { children: React.ReactNode }) {
{children}
- ,
- },
- ]}
- />
+
+ {DevtoolsPanel ? (
+
+
+
+ ) : null}
