diff --git a/app/admin/internal-accounts/page.tsx b/app/admin/internal-accounts/page.tsx new file mode 100644 index 0000000..7abde04 --- /dev/null +++ b/app/admin/internal-accounts/page.tsx @@ -0,0 +1,10 @@ +import { redirect } from "next/navigation" +import { verifySession } from "@/lib/supabase/dal" +import InternalAccountsView from "@/modules/admin/ui/views/internal-accounts-view" + +export default async function InternalAccountsPage() { + const session = await verifySession() + if (!session.isAdmin) redirect("/client/dashboard") + + return +} diff --git a/lib/supabase/migrations/20261011100000_internal_credentials.sql b/lib/supabase/migrations/20261011100000_internal_credentials.sql new file mode 100644 index 0000000..2cc3c7e --- /dev/null +++ b/lib/supabase/migrations/20261011100000_internal_credentials.sql @@ -0,0 +1,101 @@ +-- Interne Zugänge von Since3 (eigene Hosting-, Tool- und Domain-Accounts). Nur für Admins. +-- Gleiches Prinzip wie bei den Kunden-Passwörtern (credentials): In der Tabelle steht nie das Passwort, +-- nur die Vault-Referenz. Schreiben und Klartext nur über die Funktionen unten, jeder Abruf wird protokolliert. + +create table public.internal_credentials ( + id uuid primary key default gen_random_uuid(), + service text not null, -- Schlüssel aus SERVICES (services-data.ts) + title text not null default '', -- z. B. "Since3 Team"; leer = Name des Dienstes + username text not null, + url text not null default '', -- Login-Adresse (optional) + plan text not null default 'free', -- 'free' | 'paid' + price numeric(10,2), -- Euro, nur bei 'paid' + billing_cycle text, -- 'monthly' | 'yearly' | 'once', nur bei 'paid' + vault_secret_id uuid not null, -- -> vault.secrets + created_by uuid references public.profiles(id) on delete set null default auth.uid(), + updated_by uuid references public.profiles(id) on delete set null, + created_at timestamptz not null default now(), + updated_at timestamptz not null default now(), + -- Kostenlos = weder Preis noch Abrechnung; bezahlt = beides + constraint internal_credentials_cost_check check ( + (plan = 'free' and price is null and billing_cycle is null) + or (plan = 'paid' and price is not null and price >= 0 and billing_cycle in ('monthly', 'yearly', 'once')) + ) +); + +create trigger set_updated_at before update on public.internal_credentials + for each row execute function public.set_updated_at(); + +-- Vault-Eintrag beim Löschen mit aufräumen (gleiche Funktion wie bei credentials) +create trigger internal_credentials_delete_vault_secret + after delete on public.internal_credentials + for each row execute function public.delete_vault_secret(); + +-- Lesen (ohne Passwort) und Löschen nur Admins; Anlegen/Ändern nur über die Funktionen +alter table public.internal_credentials enable row level security; +create policy admin_select on public.internal_credentials for select to authenticated + using ((select public.is_admin())); +create policy admin_delete on public.internal_credentials for delete to authenticated + using ((select public.is_admin())); + +create or replace function public.create_internal_credential( + p_service text, p_title text, p_username text, p_url text, + p_plan text, p_price numeric, p_billing_cycle text, p_password text +) returns uuid language plpgsql security definer set search_path = '' as $$ +declare v_secret uuid; v_id uuid; +begin + if not public.is_admin() then raise exception 'forbidden' using errcode = '42501'; end if; + v_secret := vault.create_secret(p_password, 'internal_' || gen_random_uuid()::text, p_service); + insert into public.internal_credentials + (service, title, username, url, plan, price, billing_cycle, vault_secret_id, updated_by) + values + (p_service, coalesce(p_title, ''), p_username, coalesce(p_url, ''), p_plan, + case when p_plan = 'paid' then p_price end, + case when p_plan = 'paid' then p_billing_cycle end, + v_secret, auth.uid()) + returning id into v_id; + return v_id; +end $$; + +-- p_password = NULL oder leer -> Passwort bleibt unverändert +create or replace function public.update_internal_credential( + p_id uuid, p_service text, p_title text, p_username text, p_url text, + p_plan text, p_price numeric, p_billing_cycle text, p_password text default null +) returns void language plpgsql security definer set search_path = '' as $$ +declare v_secret uuid; +begin + if not public.is_admin() then raise exception 'forbidden' using errcode = '42501'; end if; + update public.internal_credentials + set service = p_service, title = coalesce(p_title, ''), username = p_username, + url = coalesce(p_url, ''), plan = p_plan, + price = case when p_plan = 'paid' then p_price end, + billing_cycle = case when p_plan = 'paid' then p_billing_cycle end, + updated_by = auth.uid() + where id = p_id + returning vault_secret_id into v_secret; + if not found then raise exception 'internal credential not found'; end if; + if p_password is not null and p_password <> '' then + perform vault.update_secret(v_secret, p_password); + end if; +end $$; + +-- Klartext nur für Admins; landet im selben Zugriffsprotokoll wie die Kunden-Passwörter +create or replace function public.reveal_internal_credential(p_id uuid) +returns text language plpgsql security definer set search_path = '' as $$ +declare v_secret uuid; v_pw text; +begin + if not public.is_admin() then raise exception 'forbidden' using errcode = '42501'; end if; + select vault_secret_id into v_secret from public.internal_credentials where id = p_id; + if not found then raise exception 'internal credential not found'; end if; + select decrypted_secret into v_pw from vault.decrypted_secrets where id = v_secret; + insert into public.credential_access_log (credential_id, user_id, action) + values (p_id, auth.uid(), 'reveal_internal'); + return v_pw; +end $$; + +revoke execute on function public.create_internal_credential(text, text, text, text, text, numeric, text, text) from public, anon; +revoke execute on function public.update_internal_credential(uuid, text, text, text, text, text, numeric, text, text) from public, anon; +revoke execute on function public.reveal_internal_credential(uuid) from public, anon; +grant execute on function public.create_internal_credential(text, text, text, text, text, numeric, text, text) to authenticated; +grant execute on function public.update_internal_credential(uuid, text, text, text, text, text, numeric, text, text) to authenticated; +grant execute on function public.reveal_internal_credential(uuid) to authenticated; diff --git a/modules/admin/actions/internal-credentials.ts b/modules/admin/actions/internal-credentials.ts new file mode 100644 index 0000000..bf397a6 --- /dev/null +++ b/modules/admin/actions/internal-credentials.ts @@ -0,0 +1,173 @@ +"use server" +import { SERVICES } from "@/modules/shared/data/services-data" +import * as z from "zod" +import { BILLING_CYCLES, type BillingCycle, type Plan } from "../lib/internal-costs"; +import { verifySession } from "@/lib/supabase/dal"; +import { createClient } from "@/lib/supabase/server"; +import { revalidatePath } from "next/cache"; + + +const PATH = "/admin/internal-accounts" + +const BaseSchema = z.object({ + service: z.string().refine((id) => SERVICES.some((service) => service.id === id), { error: "Unbekannter Dienst." }), + title: z.string().trim().max(120, { error: "Bezeichnung ist zu lang." }), + username: z.string().trim().min(1, { error: "Benutzername ist erforderlich." }).max(200), + url: z + .string() + .trim() + .max(500) + .refine((value) => value === "" || /^https?:\/\//i.test(value), { error: "Login-Adresse bitte mit https:// angeben." }), +}); + + +const CreateSchema = BaseSchema.extend({ + password: z.string().min(1, { error: "Passwort ist erforderlich." }) +}) + +const UpdateSchema = BaseSchema.extend({ + id: z.string().uuid(), + password: z.string().optional(), +}) + +// "12,99", "1.234,50" oder "12.99" → Zahl +const toNumber = (value: string) => Number(value.includes(",") ? value.replace(/\./g, "").replace(",", ".") : value) + +const CostSchema = z.discriminatedUnion( + "plan", + [ + z.object({ plan: z.literal("free") }), + z.object({ + plan: z.literal("paid"), + price: z + .string() + .trim() + .min(1, { error: "Bitte einen Preis angeben." }) + .transform(toNumber) + .refine((value) => Number.isFinite(value) && value >= 0 && value < 100_000_000, { + error: "Bitte einen gültigen Preis angeben, z. B. 12,99.", + }), + billingCycle: z.enum(BILLING_CYCLES, { error: "Bitte die Abrechnung wählen." }), + }), + ], + { error: "Bitte kostenlos oder bezahlt wählen." } +) + +const IdSchema = z.string().uuid() + +export type InternalCredentialState = { error: string } | { success: true } | undefined + +async function isAdmin() { + const session = await verifySession() + return session.isAdmin +} + +function readFields(formData: FormData) { + return { + service: formData.get("service"), + title: formData.get("title") ?? "", + username: formData.get("username"), + url: formData.get("url") ?? "", + } +} + +type CostParams = { p_plan: Plan; p_price: number | null; p_billing_cycle: BillingCycle | null } + +// Kosten als RPC-Parameter; kostenlos = kein Preis und keine Abrechnung. +// Expliziter Rückgabetyp, damit `"error" in cost` sauber eingrenzt. +function readCost(formData: FormData): CostParams | { error: string } { + const parsed = CostSchema.safeParse({ + plan: formData.get("plan"), + price: formData.get("price") ?? "", + billingCycle: formData.get("billingCycle"), + }) + if (!parsed.success) return { error: parsed.error.issues[0]?.message ?? "Bitte die Kosten prüfen." } + + return parsed.data.plan === "paid" + ? { p_plan: "paid", p_price: Math.round(parsed.data.price * 100) / 100, p_billing_cycle: parsed.data.billingCycle } + : { p_plan: "free", p_price: null, p_billing_cycle: null } +} + +export async function createInternalCredential( + _prevState: InternalCredentialState, + formData: FormData +): Promise { + if (!(await isAdmin())) return { error: "Keine Berechtigung." } + + const parsed = CreateSchema.safeParse({ ...readFields(formData), password: formData.get("password") }) + if (!parsed.success) return { error: parsed.error.issues[0]?.message ?? "Bitte alle Pflichtfelder ausfüllen." } + + const cost = readCost(formData) + if ("error" in cost) return cost + + const { service, title, username, url, password } = parsed.data + const supabase = await createClient() + const { error } = await supabase.rpc("create_internal_credential", { + p_service: service, + p_title: title, + p_username: username, + p_url: url, + ...cost, + p_password: password, + }) + if (error) return { error: "Eintrag konnte nicht gespeichert werden." } + + revalidatePath(PATH) + return { success: true } +} + +export async function updateInternalCredential( + _prevState: InternalCredentialState, + formData: FormData +): Promise { + if (!(await isAdmin())) return { error: "Keine Berechtigung." } + + // Leeres Passwortfeld = Passwort bleibt, wie es ist + const password = String(formData.get("password") ?? "") + const parsed = UpdateSchema.safeParse({ + ...readFields(formData), + id: formData.get("id"), + password: password === "" ? undefined : password, + }) + if (!parsed.success) return { error: parsed.error.issues[0]?.message ?? "Bitte alle Pflichtfelder ausfüllen." } + + const cost = readCost(formData) + if ("error" in cost) return cost + + const supabase = await createClient() + const { error } = await supabase.rpc("update_internal_credential", { + p_id: parsed.data.id, + p_service: parsed.data.service, + p_title: parsed.data.title, + p_username: parsed.data.username, + p_url: parsed.data.url, + ...cost, + p_password: parsed.data.password ?? null, + }) + if (error) return { error: "Eintrag konnte nicht aktualisiert werden." } + + revalidatePath(PATH) + return { success: true } +} + +export async function revealInternalCredential(id: string): Promise<{ password: string } | { error: string }> { + if (!(await isAdmin()) || !IdSchema.safeParse(id).success) return { error: "Keine Berechtigung." } + + const supabase = await createClient() + const { data, error } = await supabase.rpc("reveal_internal_credential", { p_id: id }) + if (error || typeof data !== "string") return { error: "Passwort konnte nicht abgerufen werden." } + + return { password: data } +} + +export async function deleteInternalCredential(id: string): Promise { + if (!(await isAdmin())) return { error: "Keine Berechtigung." } + if (!IdSchema.safeParse(id).success) return { error: "Ungültiger Eintrag." } + + const supabase = await createClient() + const { error } = await supabase.from("internal_credentials").delete().eq("id", id) + if (error) return { error: "Eintrag konnte nicht gelöscht werden." } + + revalidatePath(PATH) + return { success: true } +} \ No newline at end of file diff --git a/modules/admin/lib/internal-costs.ts b/modules/admin/lib/internal-costs.ts new file mode 100644 index 0000000..7be3760 --- /dev/null +++ b/modules/admin/lib/internal-costs.ts @@ -0,0 +1,30 @@ +import { formatCurrency } from "@/modules/shared/lib/invoice-math"; + +export const PLANS = ["free", "paid"] as const +export const BILLING_CYCLES = ["monthly", "yearly", "once"] as const + +export type Plan = (typeof PLANS)[number] +export type BillingCycle = (typeof BILLING_CYCLES)[number] + +export const BILLING_LABELS: Record = { + monthly: { label: "Monatlich", suffix: "/ Monat" }, + yearly: { label: "Jährlich", suffix: "/ Jahr" }, + once: { label: "Einmalig", suffix: "einmalig" }, +} + +type Cost = { plan: Plan; price: number | null; billing_cycle: BillingCycle | null } + +export function formatCost(cost: Cost) { + if (cost.plan === "free" || cost.price === null || cost.billing_cycle === null) return "Kostenlos" + return `${formatCurrency(cost.price)} ${BILLING_LABELS[cost.billing_cycle].suffix}` +} + +// Laufende Kosten pro Monat: jährliche Beträge anteilig, einmalige zählen nicht +export function monthlyCost(costs: Cost[]) { + return costs.reduce((sum, cost) => { + if (cost.plan !== "paid" || cost.price === null) return sum + if (cost.billing_cycle === "monthly") return sum + cost.price + if (cost.billing_cycle === "yearly") return sum + cost.price / 12 + return sum + }, 0) +} \ No newline at end of file diff --git a/modules/admin/queries/internal-credentials.ts b/modules/admin/queries/internal-credentials.ts new file mode 100644 index 0000000..a40f26b --- /dev/null +++ b/modules/admin/queries/internal-credentials.ts @@ -0,0 +1,30 @@ +import "server-only"; +import { BillingCycle, Plan } from "../lib/internal-costs"; +import { createClient } from "@/lib/supabase/server"; + + +export type InternalCredential = { + id: string; + service: string; + title: string; + username: string; + url: string; + plan: Plan; + price: number | null; + billing_cycle: BillingCycle | null; + updated_at: string; +} + +export async function getInternalCredentials() { + const supabase = await createClient() + const { data, error } = await supabase + .from("internal_credentials") + .select("id, service, title, username, url, plan, price, billing_cycle, updated_at") + .order("service") + .order("title") + + if (error) throw new Error("Interne Zugänge konnten nicht geladen werden.") + + // Numeric kann je nach Größe als String ankommen + return (data as InternalCredential[]).map((row) => ({ ...row, price: row.price === null ? null : Number(row.price)})) +} \ No newline at end of file diff --git a/modules/admin/ui/components/internal-credential-dialog.tsx b/modules/admin/ui/components/internal-credential-dialog.tsx new file mode 100644 index 0000000..379deb6 --- /dev/null +++ b/modules/admin/ui/components/internal-credential-dialog.tsx @@ -0,0 +1,251 @@ +"use client" + +import { useActionState, useState, type ReactElement } from "react" +import { EyeIcon, EyeOffIcon, PlusIcon, WandSparklesIcon } from "lucide-react" +import { Button } from "@/components/ui/button" +import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" +import { Field, FieldGroup, FieldLabel } from "@/components/ui/field" +import { Input } from "@/components/ui/input" +import { cn } from "@/lib/utils" +import { + createInternalCredential, + updateInternalCredential, + type InternalCredentialState, +} from "@/modules/admin/actions/internal-credentials" +import { BILLING_CYCLES, BILLING_LABELS, PLANS, type Plan } from "@/modules/admin/lib/internal-costs" +import type { InternalCredential } from "@/modules/admin/queries/internal-credentials" +import { SERVICES } from "@/modules/shared/data/services-data" +import { formatAmount } from "@/modules/shared/lib/invoice-math" +import { ServiceLogo } from "@/modules/shared/ui/components/service-logo" + +const selectClassName = + "flex h-10 w-full rounded-md border border-input bg-background px-3 text-body outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-50" + +const PLAN_LABELS: Record = { free: "Kostenlos", paid: "Bezahlt" } + +// 20 zufällige Zeichen (Web Crypto) ohne leicht verwechselbare Zeichen wie l/1 oder O/0 +const ALPHABET = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz23456789!#$%&*+-=?@_" + +function generatePassword(length = 20) { + const values = crypto.getRandomValues(new Uint32Array(length)) + return Array.from(values, (value) => ALPHABET[value % ALPHABET.length]).join("") +} + +function DialogBody({ credential, onDone }: { credential: InternalCredential | null; onDone: () => void }) { + const [serviceId, setServiceId] = useState(credential?.service ?? SERVICES[0].id) + const [plan, setPlan] = useState(credential?.plan ?? "free") + const [password, setPassword] = useState("") + const [visible, setVisible] = useState(false) + + async function submit(previous: InternalCredentialState, formData: FormData) { + const action = credential ? updateInternalCredential : createInternalCredential + const result = await action(previous, formData) + if (result && "success" in result) onDone() + return result + } + + const [state, formAction, pending] = useActionState(submit, undefined) + + return ( + <> + + {credential ? "Zugang bearbeiten" : "Neuer interner Zugang"} + +
+ {credential && } + + + + Dienst * + +
+
+ +
+ +
+ + + Bezeichnung + + + + + Benutzername * + + + + + + Passwort {!credential && *} + +
+ setPassword(event.target.value)} + required={!credential} + autoComplete="new-password" + placeholder={credential ? "Leer lassen, um es zu behalten" : undefined} + className="font-mono focus-visible:ring-0" + /> + + +
+ + + Login-Adresse + + + + Kosten +
+ {PLANS.map((option) => ( + + ))} +
+ + {plan === "paid" && ( +
+ + + Preis in € * + + + + + Abrechnung + + +
+ )} + {state && "error" in state &&

{state.error}

} + + + + +
+ + ) +} + +export function InternalCredentialDialog({ credential, trigger }: { credential?: InternalCredential; trigger?: ReactElement }) { + const [open, setOpen] = useState(false) + const [instance, setInstance] = useState(0) + + // Beim Schließen neu aufbauen, damit das Formular beim nächsten Öffnen leer bzw. aktuell ist + function handleOpenChange(next: boolean) { + setOpen(next) + if (!next) setInstance((key) => key + 1) + } + + return ( + + }> + {!trigger && ( + <> + + Neuer Zugang + + )} + + + handleOpenChange(false)} /> + + + ) +} diff --git a/modules/admin/ui/components/internal-credentials-table.tsx b/modules/admin/ui/components/internal-credentials-table.tsx new file mode 100644 index 0000000..38689d3 --- /dev/null +++ b/modules/admin/ui/components/internal-credentials-table.tsx @@ -0,0 +1,297 @@ +"use client" + +import { useEffect, useState } from "react" +import { useRouter } from "next/navigation" +import { CheckIcon, CopyIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, PencilIcon, SearchIcon, Trash2Icon } from "lucide-react" +import { Badge } from "@/components/ui/badge" +import { Button } from "@/components/ui/button" +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog" +import { Input } from "@/components/ui/input" +import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" +import { cn } from "@/lib/utils" +import { deleteInternalCredential, revealInternalCredential } from "@/modules/admin/actions/internal-credentials" +import { formatCost, type Plan } from "@/modules/admin/lib/internal-costs" +import type { InternalCredential } from "@/modules/admin/queries/internal-credentials" +import { getServiceById } from "@/modules/shared/data/services-data" +import { ServiceLogo } from "@/modules/shared/ui/components/service-logo" +import { InternalCredentialDialog } from "./internal-credential-dialog" + +const HIDE_AFTER_MS = 30_000 +const FILTERS: { value: Plan | "all"; label: string }[] = [ + { value: "all", label: "Alle" }, + { value: "paid", label: "Bezahlt" }, + { value: "free", label: "Kostenlos" }, +] + +async function fetchPassword(id: string) { + const result = await revealInternalCredential(id) + if ("error" in result) throw new Error(result.error) + return result.password +} + +// Kopiert Text; ist er noch nicht geladen, wartet ClipboardItem auf ihn (sonst blockt Safari nach dem await) +function CopyButton({ label, getText }: { label: string; getText: () => string | Promise }) { + const [copied, setCopied] = useState(false) + + async function copy() { + try { + const text = getText() + if (typeof text === "string") { + await navigator.clipboard.writeText(text) + } else { + const blob = text.then((value) => new Blob([value], { type: "text/plain" })) + await navigator.clipboard.write([new ClipboardItem({ "text/plain": blob })]) + } + setCopied(true) + setTimeout(() => setCopied(false), 1500) + } catch { + // Abgebrochen oder vom Browser nicht erlaubt + } + } + + return ( + + ) +} + +function SecretCell({ id }: { id: string }) { + const [password, setPassword] = useState(null) + const [pending, setPending] = useState(false) + + // Angezeigtes Passwort nach 30 Sekunden wieder verbergen + useEffect(() => { + if (password === null) return + const timer = setTimeout(() => setPassword(null), HIDE_AFTER_MS) + return () => clearTimeout(timer) + }, [password]) + + async function toggle() { + if (password !== null) { + setPassword(null) + return + } + setPending(true) + try { + setPassword(await fetchPassword(id)) + } catch { + // Fehler: Passwort bleibt verborgen + } finally { + setPending(false) + } + } + + return ( +
+ {password ?? "••••••••"} + + password ?? fetchPassword(id)} /> +
+ ) +} + +function CostLabel({ credential }: { credential: InternalCredential }) { + return credential.plan === "paid" ? ( + {formatCost(credential)} + ) : ( + Kostenlos + ) +} + +function DeleteDialog({ id, name }: { id: string; name: string }) { + const [open, setOpen] = useState(false) + const [pending, setPending] = useState(false) + const [error, setError] = useState(null) + const router = useRouter() + + async function handleDelete() { + setPending(true) + const result = await deleteInternalCredential(id) + setPending(false) + if (result && "error" in result) { + setError(result.error) + return + } + setOpen(false) + router.refresh() + } + + return ( + + }> + + + + + Zugang löschen + + Möchtest du den Zugang {name} wirklich löschen? + Das Passwort wird dabei auch aus dem Vault entfernt. + + + {error &&

{error}

} + + + + + + + ) +} + +export function InternalCredentialsTable({ credentials }: { credentials: InternalCredential[] }) { + const [query, setQuery] = useState("") + const [filter, setFilter] = useState("all") + const term = query.trim().toLowerCase() + const visible = credentials.filter( + (credential) => + (filter === "all" || credential.plan === filter) && + (!term || + [credential.title, getServiceById(credential.service).label, credential.username, credential.url] + .join(" ") + .toLowerCase() + .includes(term)) + ) + + if (credentials.length === 0) { + return ( +

+ Noch keine internen Zugänge hinterlegt. +

+ ) + } + + return ( +
+
+
+ {FILTERS.map((option) => ( + + ))} +
+ +
+ +
+ + + + Zugang + Benutzername + Passwort + Kosten + + + + + {visible.map((credential) => { + const service = getServiceById(credential.service) + const name = credential.title.trim() || service.label + + return ( + + +
+
+ +
+
+ + {name} + {credential.url && ( + + + + )} + + {credential.title.trim() && {service.label}} + {credential.username} + + + +
+
+ + +
+ {credential.username} + credential.username} /> +
+ + + + + + + + +
+ + + + } + /> + +
+ + + ) + })} + +
+
+ {visible.length === 0 &&

Kein Zugang gefunden.

} +
+ ) +} diff --git a/modules/admin/ui/views/internal-accounts-view.tsx b/modules/admin/ui/views/internal-accounts-view.tsx new file mode 100644 index 0000000..b0b45ca --- /dev/null +++ b/modules/admin/ui/views/internal-accounts-view.tsx @@ -0,0 +1,44 @@ +import { monthlyCost } from "@/modules/admin/lib/internal-costs" +import { getInternalCredentials } from "@/modules/admin/queries/internal-credentials" +import { InternalCredentialDialog } from "@/modules/admin/ui/components/internal-credential-dialog" +import { InternalCredentialsTable } from "@/modules/admin/ui/components/internal-credentials-table" +import { formatCurrency } from "@/modules/shared/lib/invoice-math" + +function Stat({ label, value, detail }: { label: string; value: string; detail?: string }) { + return ( +
+ {label} + {value} + {detail && {detail}} +
+ ) +} + +export default async function InternalAccountsView() { + const credentials = await getInternalCredentials() + const perMonth = monthlyCost(credentials) + const paid = credentials.filter((credential) => credential.plan === "paid").length + + return ( +
+
+
+

Internal Accounts

+

+ Zugänge von Since3 selbst – verschlüsselt im Supabase Vault und nur für Admins sichtbar. + Jedes Anzeigen oder Kopieren eines Passworts wird protokolliert. +

+
+ +
+ +
+ + + +
+ + +
+ ) +} diff --git a/modules/shared/data/sidebar-menu-content.ts b/modules/shared/data/sidebar-menu-content.ts index d6dcd75..f0ad7fd 100644 --- a/modules/shared/data/sidebar-menu-content.ts +++ b/modules/shared/data/sidebar-menu-content.ts @@ -3,6 +3,7 @@ import { FoldersIcon, InfoIcon, KeyIcon, + KeyRoundIcon, LayoutDashboardIcon, LayoutTemplateIcon, LucideIcon, @@ -34,6 +35,11 @@ export const adminMenu: MenuItem[] = [ url: "/admin/templates", icon: LayoutTemplateIcon }, + { + title: "Internal Accounts", + url: "/admin/internal-accounts", + icon: KeyRoundIcon + }, { title: "Settings", url: "/admin/settings", diff --git a/modules/templates/ai/knowledge.ts b/modules/templates/ai/knowledge.ts index ad8b21a..313e6bc 100644 --- a/modules/templates/ai/knowledge.ts +++ b/modules/templates/ai/knowledge.ts @@ -1,8 +1,28 @@ import { brandName } from "../lib/content" -import type { TemplateContent, TemplateDefinition } from "../lib/types" +import type { FieldDef, ListFieldDef, SectionData, TemplateContent, TemplateDefinition } from "../lib/types" const clean = (value: string) => value.replace(/\*/g, "").replace(/\s*\n\s*/g, " · ").trim() +type PageSection = { label: string; fields: (FieldDef | ListFieldDef)[]; data: SectionData | undefined; hidden: boolean } + +// Feste Sektionen der Vorlage und – im Baukasten – die Bausteine in ihrer Reihenfolge +function pageSections(def: TemplateDefinition, content: TemplateContent): PageSection[] { + const fixed = def.sections.map((section) => ({ + label: section.label, + fields: section.fields, + data: content.data[section.key], + hidden: content.hidden.includes(section.key), + })) + const library = new Map(def.builder?.library.map((block) => [block.type, block])) + const blocks = content.blocks.flatMap((block) => { + const definition = library.get(block.type) + if (!definition) return [] + const menu = typeof block.data.menu === "string" ? block.data.menu.trim() : "" + return [{ label: menu || definition.label, fields: definition.fields, data: block.data, hidden: block.hidden }] + }) + return [...fixed, ...blocks] +} + export function businessName(def: TemplateDefinition, content: TemplateContent) { return brandName(content) ?? def.name } @@ -11,9 +31,9 @@ export function businessName(def: TemplateDefinition, content: TemplateContent) export function buildKnowledge(def: TemplateDefinition, content: TemplateContent) { const parts = [`Betrieb: ${businessName(def, content)}`, `Branche: ${def.industry}`] - for (const section of def.sections) { - const data = content.data[section.key] - if (!data || content.hidden.includes(section.key)) continue + for (const section of pageSections(def, content)) { + const data = section.data + if (!data || section.hidden) continue const lines: string[] = [] for (const field of section.fields) { @@ -43,8 +63,8 @@ export function buildKnowledge(def: TemplateDefinition, content: TemplateContent // Bild-Links der Variante, z. B. für die Post-Vorschauen im Content-Generator export function collectImages(def: TemplateDefinition, content: TemplateContent) { const images: string[] = [] - for (const section of def.sections) { - const data = content.data[section.key] + for (const section of pageSections(def, content)) { + const data = section.data if (!data) continue for (const field of section.fields) { const value = data[field.key] diff --git a/modules/templates/catalog/atelier/definition.ts b/modules/templates/catalog/atelier/definition.ts new file mode 100644 index 0000000..00268d4 --- /dev/null +++ b/modules/templates/catalog/atelier/definition.ts @@ -0,0 +1,124 @@ +import { unsplash } from "../../lib/content" +import { defineBuilder } from "../blocks/builder" + +export const atelier = defineBuilder({ + key: "atelier", + name: "Atelier", + industry: "Universell: Manufaktur & Boutique", + description: "Edel wie ein Magazin: Cover-Schriftzug, Bild öffnet sich wie Jalousien, Bilder färben sich unter der Maus ein, Kollektion im Querlauf und ein Wort voller Bild. Aus Bausteinen – frei änderbar.", + cover: unsplash("1555041469-a586c61ea9bc", 1200), + samples: { + inquiry: "Guten Tag, wir suchen einen Esstisch aus Eiche für acht Personen, gern mit passender Bank – nach Maß für unser neues Haus. Ist so etwas möglich, und wie lange wäre die Lieferzeit? Herzliche Grüße, Familie Brandt", + topic: "Hinter den Kulissen: So entsteht Sessel Ove", + }, + palettes: [ + { key: "elfenbein", label: "Elfenbein", bg: "#f4f0e8", fg: "#1a1714", muted: "#756d63", surface: "#e9e2d6", accent: "#8c3b2a" }, + { key: "salbei", label: "Salbei", bg: "#eef0ea", fg: "#1b211d", muted: "#66705f", surface: "#e0e5da", accent: "#4f6b4f" }, + { key: "tinte", label: "Tinte", dark: true, bg: "#14110f", fg: "#efe8de", muted: "#9a8f82", surface: "#1f1b18", accent: "#c99a5b" }, + ], + fonts: [ + { key: "cormorant", label: "Cormorant & Manrope" }, + { key: "garamond", label: "EB Garamond & Host Grotesk" }, + ], + brand: { + name: "Lindqvist", + tagline: "Manufaktur für Möbel & Objekte · seit 1924", + email: "atelier@lindqvist.de", + phone: "+49 40 3861 2290", + address: "Bei den Mühren 4, 20457 Hamburg", + logo: "", + }, + seed: [ + { type: "nav-masthead", data: { edition: "Ausgabe Nº 12 · Herbst/Winter", cta: "Termin vereinbaren", href: "#besuch" } }, + { + type: "hero-editorial", + data: { + eyebrow: "Manufaktur seit 1924", + title: "Gemacht,\num zu *bleiben.*", + text: "Möbel und Objekte aus massivem Holz und feinen Stoffen, gefertigt von Hand in unserer Hamburger Werkstatt – für Räume, die Geschichten erzählen.", + cta: "Kollektion entdecken", + href: "#kollektion", + image: unsplash("1555041469-a586c61ea9bc", 1600), + caption: "Sofa Mira · Samt in Moosgrün", + }, + }, + { + type: "text-bild", + data: { + menu: "Manufaktur", + eyebrow: "Die Manufaktur", + title: "Hundert Jahre\n*Handwerk.*", + text: "Was 1924 als kleine Tischlerei begann, ist heute eine Manufaktur mit 22 Meisterinnen und Meistern. Wir arbeiten mit Hölzern aus Norddeutschland, Stoffen aus europäischen Webereien und einer Geduld, die man jedem Stück ansieht.", + quote: "Ein gutes Möbel erkennt man nicht beim Kauf, sondern nach dreißig Jahren.", + signature: "Henrik Lindqvist", + image: unsplash("1426927308491-6380b6a9936f", 1400), + caption: "Hobel und Stecheisen in unserer Werkstatt in der Speicherstadt", + }, + }, + { + type: "projekte-querlauf", + data: { + menu: "Kollektion", + eyebrow: "Kollektion", + title: "Die *Kollektion*", + items: [ + { title: "Sessel Ove", category: "Samt, Senfgelb", year: "2026", image: unsplash("1586023492125-27b2c045efd7", 1600) }, + { title: "Sofa Mira", category: "Bouclé, Kreide", year: "2026", image: unsplash("1493663284031-b7e3aefcae8e", 1600) }, + { title: "Stuhl Elin", category: "Eiche, Leinen", year: "2025", image: unsplash("1567538096630-e0c55bd6374c", 1600) }, + { title: "Vasen Sora", category: "Steinzeug, handgedreht", year: "2025", image: unsplash("1520408222757-6f9f95d87d5d", 1600) }, + { title: "Schalen Kumo", category: "Keramik, glasiert", year: "2024", image: unsplash("1610701596007-11502861dcfa", 1600) }, + ], + }, + }, + { + type: "wortmaske", + data: { + eyebrow: "Was uns antreibt", + word: "Handwerk", + text: "Rund sechzig Arbeitsstunden stecken in jedem Sessel. Keine Maschine ersetzt das Gefühl in den Händen, das weiß, wann eine Fuge sitzt und eine Oberfläche fertig ist.", + image: unsplash("1493106641515-6b5631de4bb9", 2000), + }, + }, + { + type: "ablauf-spalten", + data: { + menu: "Werkstatt", + eyebrow: "Vom Baum zum Möbel", + title: "In vier *Schritten.*", + items: [ + { title: "Auswahl", text: "Jedes Brett wählen wir selbst aus – aus nachhaltiger Forstwirtschaft in Norddeutschland." }, + { title: "Trocknung", text: "Zwei Jahre lagert das Holz an der Luft, bevor es verarbeitet wird." }, + { title: "Fertigung", text: "Verbindungen werden von Hand gezinkt, geleimt und geschliffen – ganz ohne Metall." }, + { title: "Veredelung", text: "Natürliche Öle und Wachse schützen die Oberfläche und lassen das Holz atmen." }, + ], + }, + }, + { + type: "stimmen-zitat", + data: { + eyebrow: "Stimmen", + items: [ + { quote: "Der Tisch steht seit zwanzig Jahren in unserer Küche. Er wird mit jedem Jahr schöner.", author: "Familie Albers", role: "Hamburg" }, + { quote: "Man spürt bei jedem Stück, wie viel Zeit und Liebe darin steckt. Für unsere Projekte gibt es keine bessere Adresse.", author: "Clara Nyström", role: "Innenarchitektin" }, + { quote: "Sessel Ove ist das Möbel, das jeder Besuch zuerst ausprobieren möchte.", author: "Jonathan Weiß", role: "Kunde seit 2019" }, + ], + }, + }, + { + type: "kontakt-formular", + data: { + menu: "Besuch", + eyebrow: "Besuch", + title: "Besuchen Sie\nunsere *Werkstatt.*", + text: "Wir zeigen Ihnen gern, wie Ihr Möbel entsteht – nach Vereinbarung auch samstags.", + topics: "Werkstattbesuch, Maßanfertigung, Beratung, Sonstiges", + button: "Termin anfragen", + success: "Danke! Wir melden uns, um Ihren Besuch zu planen.", + hours: "Di–Sa, 10–18 Uhr", + }, + }, + { type: "footer-wortmarke", data: { text: "Möbel für Generationen. Gemacht in Hamburg.", cta: "Werkstatt besuchen", href: "#besuch" } }, + ], +}) + +export type AtelierData = typeof atelier.defaults diff --git a/modules/templates/catalog/atelier/fonts.ts b/modules/templates/catalog/atelier/fonts.ts new file mode 100644 index 0000000..03cd6c5 --- /dev/null +++ b/modules/templates/catalog/atelier/fonts.ts @@ -0,0 +1,4 @@ +import type { FontPair } from "../../lib/types" +import { pairs } from "../blocks/fonts" + +export const fonts: Record = { cormorant: pairs.cormorant, garamond: pairs.garamond } diff --git a/modules/templates/catalog/atelier/template.tsx b/modules/templates/catalog/atelier/template.tsx new file mode 100644 index 0000000..7110900 --- /dev/null +++ b/modules/templates/catalog/atelier/template.tsx @@ -0,0 +1,10 @@ +"use client" + +import type { TemplateProps } from "../../lib/types" +import { BlockPage } from "../blocks/page" +import { atelier, type AtelierData } from "./definition" +import { fonts } from "./fonts" + +export function AtelierTemplate({ content }: TemplateProps) { + return +} diff --git a/modules/templates/catalog/aurora/definition.ts b/modules/templates/catalog/aurora/definition.ts new file mode 100644 index 0000000..30c15cf --- /dev/null +++ b/modules/templates/catalog/aurora/definition.ts @@ -0,0 +1,157 @@ +import { unsplash } from "../../lib/content" +import { defineBuilder } from "../blocks/builder" + +export const aurora = defineBuilder({ + key: "aurora", + name: "Aurora", + industry: "Universell: Moderne Dienstleister", + description: "Leuchtend und modern: Farbwolken und Lichtkugel mit kreisenden Schlagworten, Bento-Kacheln mit Lichtkegel, Zeitstrahl, endlose Stimmen-Wand und Pakete mit Lichtrand. Aus Bausteinen – frei änderbar.", + cover: unsplash("1614850523459-c2f4c699c52e", 1200), + samples: { + inquiry: "Hallo Lumen-Team, wir sind ein Maschinenbauer mit 80 Mitarbeitenden und wollen unsere Angebotserstellung mit KI automatisieren. Können Sie uns dabei begleiten – und was würde ein erster Workshop kosten? Beste Grüße, Jan Petersen", + topic: "5 Prozesse, die jedes Unternehmen 2026 automatisieren sollte", + }, + palettes: [ + { key: "nacht", label: "Nacht", dark: true, bg: "#070913", fg: "#eef0ff", muted: "#8d93b5", surface: "#10142a", accent: "#7c5cff" }, + { key: "perle", label: "Perle", bg: "#f7f7fb", fg: "#11121c", muted: "#5f6380", surface: "#ececf6", accent: "#5b5bf7" }, + { key: "polar", label: "Polar", dark: true, bg: "#04120f", fg: "#e9fff8", muted: "#7fa79b", surface: "#0b1f1a", accent: "#2ee6a8" }, + ], + fonts: [ + { key: "funnel", label: "Funnel Display & Funnel Sans" }, + { key: "park", label: "Parkinsans & Rethink Sans" }, + ], + brand: { + name: "Lumen", + tagline: "Beratung für digitale Exzellenz", + email: "hallo@lumen-beratung.de", + phone: "+49 30 6098 4410", + address: "Torstraße 109, 10119 Berlin", + logo: "", + }, + seed: [ + { type: "nav-glas", data: { cta: "Gespräch buchen", href: "#kontakt" } }, + { + type: "hero-aurora", + data: { + badge: "Neu: KI-Workshops für Teams", + title: "Wir machen Unternehmen\nbereit für *morgen.*", + text: "Strategie, Design und Technologie aus einer Hand – für Unternehmen, die nicht abwarten, sondern gestalten wollen.", + cta: "Kostenloses Erstgespräch", + href: "#kontakt", + ctaSecondary: "Leistungen ansehen", + hrefSecondary: "#leistungen", + keywords: "Strategie, Design, KI, Automatisierung, Wachstum, Daten", + }, + }, + { + type: "logos", + data: { + title: "Mehr als 120 Unternehmen vertrauen uns", + items: [ + { name: "Nordwerk", logo: "" }, + { name: "Velora", logo: "" }, + { name: "Kraftbau", logo: "" }, + { name: "Brightfield", logo: "" }, + { name: "Okuma", logo: "" }, + { name: "Tessin & Co", logo: "" }, + { name: "Lumio", logo: "" }, + ], + }, + }, + { + type: "leistungen-bento", + data: { + eyebrow: "Leistungen", + title: "Alles, was Wachstum\n*möglich* macht.", + text: "Wir begleiten Sie von der ersten Idee bis zum messbaren Ergebnis – mit einem festen Team, das Ihr Geschäft versteht.", + items: [ + { title: "Strategie & Beratung", text: "Wir finden heraus, wo Ihr größter Hebel liegt, und machen daraus einen Fahrplan mit klaren Zielen.", image: unsplash("1531297484001-80022131f5a1", 1400) }, + { title: "Design & Marke", text: "Auftritte, die man sich merkt – online wie offline.", image: "" }, + { title: "Software & KI", text: "Maßgeschneiderte Tools, die Ihrem Team Arbeit abnehmen.", image: "" }, + { title: "Automatisierung", text: "Wiederkehrende Abläufe laufen von selbst – zuverlässig und nachvollziehbar.", image: "" }, + { title: "Daten & Analyse", text: "Dashboards, die zeigen, was wirklich zählt.", image: "" }, + { title: "Wachstum & Marketing", text: "Kampagnen, die messbar neue Kundschaft bringen.", image: "" }, + ], + }, + }, + { + type: "ablauf-linie", + data: { + eyebrow: "So arbeiten wir", + title: "Vom ersten Gespräch\nzum *Ergebnis.*", + items: [ + { title: "Kennenlernen", text: "Im kostenlosen Erstgespräch verstehen wir Ihr Geschäft, Ihre Ziele und Ihre größten Hürden.", duration: "Woche 1" }, + { title: "Analyse & Strategie", text: "Wir priorisieren nach Wirkung und Aufwand und legen gemeinsam einen klaren Fahrplan fest.", duration: "2–3 Wochen" }, + { title: "Umsetzung", text: "In kurzen Sprints entstehen Ergebnisse, die Sie sofort sehen und testen können.", duration: "6–12 Wochen" }, + { title: "Wachstum", text: "Wir messen, lernen und verbessern laufend – damit der Erfolg bleibt.", duration: "fortlaufend" }, + ], + }, + }, + { + type: "zahlen", + data: { + eyebrow: "Ergebnisse", + title: "Zahlen, die *überzeugen.*", + items: [ + { value: "120", suffix: "+", label: "erfolgreiche Projekte" }, + { value: "38", suffix: " %", label: "mehr Effizienz im Schnitt" }, + { value: "4,9", suffix: "/5", label: "Kundenzufriedenheit" }, + { value: "12", suffix: "", label: "Expertinnen und Experten" }, + ], + }, + }, + { + type: "stimmen-wand", + data: { + title: "Was unsere Kunden *sagen.*", + items: [ + { quote: "Lumen hat in sechs Wochen geschafft, woran wir zwei Jahre gescheitert sind. Unser Angebotsprozess läuft heute fast von selbst.", author: "Mira Schulz", role: "COO, Velora", image: unsplash("1534528741775-53994a69daeb", 300) }, + { quote: "Klar in der Sprache, schnell in der Umsetzung und immer erreichbar. So wünscht man sich einen Partner.", author: "David Moreno", role: "Gründer, Brightfield", image: unsplash("1507003211169-0a1dd7228f2d", 300) }, + { quote: "Die Workshops waren der Wendepunkt. Unser Team arbeitet heute ganz anders – und lieber.", author: "Lena Brandt", role: "Head of Operations, Nordwerk", image: unsplash("1494790108377-be9c29b29330", 300) }, + { quote: "Endlich Dashboards, die wir wirklich nutzen. Jede Entscheidung basiert heute auf Daten statt Bauchgefühl.", author: "Jonas Becker", role: "Geschäftsführer, Kraftbau", image: unsplash("1472099645785-5658abf4ff4e", 300) }, + { quote: "Professionell, herzlich und mit beeindruckendem technischem Tiefgang.", author: "Amara Okafor", role: "CEO, Okuma", image: unsplash("1531123897727-8f129e1688ce", 300) }, + { quote: "Wir haben unsere Kosten um ein Drittel gesenkt und gleichzeitig die Kundenzufriedenheit erhöht.", author: "Tobias Lehmann", role: "CFO, Tessin & Co", image: unsplash("1560250097-0b93528c311a", 300) }, + ], + }, + }, + { + type: "pakete", + data: { + title: "Klare Pakete.\n*Faire* Preise.", + text: "Alle Pakete mit persönlicher Ansprechperson und monatlichem Bericht. Preise zzgl. MwSt.", + plans: [ + { name: "Start", price: "2.900 €", period: "einmalig", text: "Für den ersten Schritt", features: "Workshop mit Ihrem Team\nAnalyse & Potenziale\nKonkreter Fahrplan", ribbon: "", cta: "Anfragen" }, + { name: "Wachstum", price: "5.900 €", period: "pro Monat", text: "Für Teams, die skalieren", features: "Alles aus Start\nFestes Umsetzungsteam\nWöchentliche Sprints\nMonatliches Reporting", ribbon: "Beliebt", cta: "Anfragen" }, + { name: "Partner", price: "Individuell", period: "", text: "Für langfristige Partnerschaften", features: "Alles aus Wachstum\nStrategische Begleitung\nPriorisierter Support\nQuartalsweise Workshops", ribbon: "", cta: "Gespräch vereinbaren" }, + ], + }, + }, + { + type: "faq", + data: { + title: "Häufige *Fragen*", + text: "Ihre Frage ist nicht dabei? Schreiben Sie uns – wir antworten innerhalb eines Werktags.", + items: [ + { question: "Für welche Unternehmen arbeitet Lumen?", answer: "Für den Mittelstand ebenso wie für Start-ups – überall dort, wo Teams schneller, digitaler und näher an ihren Kunden werden wollen." }, + { question: "Wie schnell sehen wir Ergebnisse?", answer: "Erste Ergebnisse liefern wir meist nach vier bis sechs Wochen. Jedes Projekt startet mit klaren, messbaren Zielen." }, + { question: "Arbeiten Sie remote oder vor Ort?", answer: "Beides. Workshops machen wir gern bei Ihnen, die Umsetzung läuft meist remote – mit festen wöchentlichen Terminen." }, + { question: "Was passiert mit unseren Daten?", answer: "Wir arbeiten DSGVO-konform mit Servern in der EU und schließen mit jedem Kunden einen Vertrag zur Auftragsverarbeitung." }, + ], + }, + }, + { + type: "cta-portal", + data: { + menu: "Kontakt", + eyebrow: "Bereit?", + title: "Lassen Sie uns\nGroßes *starten.*", + text: "Ein 30-minütiges Erstgespräch – kostenlos und unverbindlich.", + cta: "Gespräch buchen", + href: "mailto:hallo@lumen-beratung.de", + }, + }, + { type: "footer-schlicht", data: { city: "Berlin", note: "Mit Sorgfalt gemacht in Berlin." } }, + ], +}) + +export type AuroraData = typeof aurora.defaults diff --git a/modules/templates/catalog/aurora/fonts.ts b/modules/templates/catalog/aurora/fonts.ts new file mode 100644 index 0000000..a29cb7d --- /dev/null +++ b/modules/templates/catalog/aurora/fonts.ts @@ -0,0 +1,4 @@ +import type { FontPair } from "../../lib/types" +import { pairs } from "../blocks/fonts" + +export const fonts: Record = { funnel: pairs.funnel, park: pairs.park } diff --git a/modules/templates/catalog/aurora/template.tsx b/modules/templates/catalog/aurora/template.tsx new file mode 100644 index 0000000..28f162e --- /dev/null +++ b/modules/templates/catalog/aurora/template.tsx @@ -0,0 +1,10 @@ +"use client" + +import type { TemplateProps } from "../../lib/types" +import { BlockPage } from "../blocks/page" +import { aurora, type AuroraData } from "./definition" +import { fonts } from "./fonts" + +export function AuroraTemplate({ content }: TemplateProps) { + return +} diff --git a/modules/templates/catalog/baukasten/definition.ts b/modules/templates/catalog/baukasten/definition.ts new file mode 100644 index 0000000..b2e27ed --- /dev/null +++ b/modules/templates/catalog/baukasten/definition.ts @@ -0,0 +1,40 @@ +import { unsplash } from "../../lib/content" +import { defineBuilder } from "../blocks/builder" + +// Leer starten: nur ein Grundgerüst, alles Weitere wird im Editor aus Bausteinen zusammengeklickt +export const baukasten = defineBuilder({ + key: "baukasten", + name: "Baukasten", + industry: "Eigene Seite aus Bausteinen", + description: "Selbst zusammenklicken: über 30 Premium-Bausteine für Start, Leistungen, Projekte, Stimmen, Kontakt und mehr – frei kombinierbar, sortierbar und mit jeder Palette nutzbar.", + cover: unsplash("1557672172-298e090bd0f1", 1200), + samples: { + inquiry: "Guten Tag, wir sind ein Familienunternehmen und möchten unsere Website komplett erneuern – modern, hochwertig und gut auffindbar. Wie läuft so ein Projekt bei Ihnen ab und mit welchen Kosten müssen wir rechnen? Viele Grüße, Sandra Keller", + topic: "Neu bei uns: persönliche Beratung jetzt auch per Video-Call", + }, + palettes: [ + { key: "weiss", label: "Weiß", bg: "#fafaf8", fg: "#111111", muted: "#6b6b66", surface: "#efefea", accent: "#111111" }, + { key: "sand", label: "Sand", bg: "#f3eee6", fg: "#1d1a16", muted: "#776f64", surface: "#e8e1d5", accent: "#b0643c" }, + { key: "nacht", label: "Nacht", dark: true, bg: "#0c0c0d", fg: "#f0eeea", muted: "#8a8780", surface: "#18181a", accent: "#e8c27a" }, + { key: "ozean", label: "Ozean", dark: true, bg: "#08131d", fg: "#e8f1f7", muted: "#7f97a8", surface: "#102231", accent: "#4cc3ff" }, + { key: "wald", label: "Wald", bg: "#e9ede6", fg: "#16201a", muted: "#5f6b62", surface: "#dbe2d6", accent: "#2f6b4a" }, + { key: "koralle", label: "Koralle", bg: "#fff6f2", fg: "#2a1410", muted: "#8a6a62", surface: "#fbe6de", accent: "#ff5a3c" }, + ], + fonts: [ + { key: "grotesk", label: "Host Grotesk" }, + { key: "kino", label: "Noto Serif Display & Host Grotesk" }, + { key: "funnel", label: "Funnel Display & Funnel Sans" }, + { key: "mona", label: "Mona Sans (variabel)" }, + ], + brand: { + name: "Nordlicht", + tagline: "Ihr Unternehmen in einem Satz", + email: "hallo@nordlicht.de", + phone: "+49 40 1234 5678", + address: "Musterstraße 1, 20095 Hamburg", + logo: "", + }, + seed: [{ type: "nav-leiste" }, { type: "hero-vollbild" }, { type: "statement" }, { type: "kontakt-formular" }, { type: "footer-schlicht" }], +}) + +export type BaukastenData = typeof baukasten.defaults diff --git a/modules/templates/catalog/baukasten/fonts.ts b/modules/templates/catalog/baukasten/fonts.ts new file mode 100644 index 0000000..fae4473 --- /dev/null +++ b/modules/templates/catalog/baukasten/fonts.ts @@ -0,0 +1,4 @@ +import type { FontPair } from "../../lib/types" +import { pairs } from "../blocks/fonts" + +export const fonts: Record = { grotesk: pairs.grotesk, kino: pairs.kino, funnel: pairs.funnel, mona: pairs.mona } diff --git a/modules/templates/catalog/baukasten/template.tsx b/modules/templates/catalog/baukasten/template.tsx new file mode 100644 index 0000000..a00bb52 --- /dev/null +++ b/modules/templates/catalog/baukasten/template.tsx @@ -0,0 +1,10 @@ +"use client" + +import type { TemplateProps } from "../../lib/types" +import { BlockPage } from "../blocks/page" +import { baukasten, type BaukastenData } from "./definition" +import { fonts } from "./fonts" + +export function BaukastenTemplate({ content }: TemplateProps) { + return +} diff --git a/modules/templates/catalog/blocks/about.tsx b/modules/templates/catalog/blocks/about.tsx new file mode 100644 index 0000000..6a835a2 --- /dev/null +++ b/modules/templates/catalog/blocks/about.tsx @@ -0,0 +1,151 @@ +"use client" + +import { AnimatePresence, motion, useInView } from "motion/react" +import { useEffect, useEffectEvent, useRef, useState } from "react" +import { cn } from "@/lib/utils" +import { TImage } from "../shared/media" +import { Reveal, ScrollWords, ease } from "../shared/motion" +import type { StatementData, StoryKapitelData, TextBildData } from "./definitions" +import type { BlockProps } from "./types" +import { container, easeInOut, Eyebrow, Heading, InkImage } from "./ui" + +export function Statement({ data }: BlockProps) { + return ( +
+
+ + {data.eyebrow} + +
+ + {data.author.trim() && ( + +

+ + {data.author} + {data.role} +

+ + )} +
+
+
+ ) +} + +type Chapter = StoryKapitelData["items"][number] + +// Geschichte in Kapiteln: links ein stehendes Bild, das sich mit dem aktiven Kapitel von unten neu aufdeckt +export function StoryKapitel({ data }: BlockProps) { + const [active, setActive] = useState(0) + const current = Math.min(active, Math.max(0, data.items.length - 1)) + + return ( +
+
+ + {data.eyebrow} + + +
+
+
+
+ {data.items.map((item, i) => ( + + + + + + ))} +
+
+ + + {data.items[current]?.year} + + +
+
+ {data.items.map((_, i) => ( + + ))} +
+
+
+
+ {data.items.map((item, i) => ( + setActive(i)} /> + ))} +
+
+
+ ) +} + +function ChapterText({ item, active, onEnter }: { item: Chapter; active: boolean; onEnter: () => void }) { + const ref = useRef(null) + // Aktiv, sobald das Kapitel die Bildschirmmitte kreuzt + const inView = useInView(ref, { margin: "-45% 0px -45% 0px" }) + const enter = useEffectEvent(onEnter) + + useEffect(() => { + if (inView) enter() + }, [inView]) + + return ( +
+
+ +
+

{item.year}

+

{item.title}

+

{item.text}

+
+ ) +} + +export function TextBild({ data }: BlockProps) { + return ( +
+
+ +
+ + {data.caption.trim() &&
{data.caption}
} +
+ +
+ {data.eyebrow} + + +

+ {data.text} +

+ {data.quote.trim() && ( +
„{data.quote}“
+ )} + {data.signature.trim() &&

{data.signature}

} + +
+
+
+ ) +} diff --git a/modules/templates/catalog/blocks/accents.tsx b/modules/templates/catalog/blocks/accents.tsx new file mode 100644 index 0000000..dea7414 --- /dev/null +++ b/modules/templates/catalog/blocks/accents.tsx @@ -0,0 +1,126 @@ +"use client" + +import { + motion, + useAnimationFrame, + useInView, + useMotionValue, + useReducedMotionConfig, + useScroll, + useSpring, + useTransform, + useVelocity, + wrap, + type MotionValue, +} from "motion/react" +import { useRef } from "react" +import { cn } from "@/lib/utils" +import { Reveal, wordmarkSize } from "../shared/motion" +import type { LaufbandData, WortmaskeData } from "./definitions" +import type { BlockProps } from "./types" +import { container, Eyebrow } from "./ui" + +// ── Text-Laufband ──────────────────────────────────────────────────────────── + +// Eine Zeile: läuft gleichmäßig, schnelles Scrollen beschleunigt sie (auch rückwärts) und neigt die Schrift +function VelocityRow({ text, speed, boost, skew, outline, className }: { + text: string + speed: number + boost: MotionValue + skew: MotionValue + outline?: boolean + className?: string +}) { + const ref = useRef(null) + const base = useMotionValue(0) + const direction = useRef(1) + const reduce = useReducedMotionConfig() + const visible = useInView(ref) + const x = useTransform(base, (value) => `${wrap(-50, 0, value)}%`) + + useAnimationFrame((_, delta) => { + if (reduce || !visible) return + const factor = boost.get() + if (factor < 0) direction.current = -1 + else if (factor > 0) direction.current = 1 + let move = direction.current * speed * (delta / 1000) + move += direction.current * move * factor + base.set(base.get() + move) + }) + + return ( +
+ + {[0, 1].map((copy) => ( + + {Array.from({ length: 4 }, (_, i) => ( + + {text} + ✦ + + ))} + + ))} + +
+ ) +} + +export function Laufband({ data }: BlockProps) { + const { scrollY } = useScroll() + const velocity = useVelocity(scrollY) + const smooth = useSpring(velocity, { damping: 50, stiffness: 400 }) + const boost = useTransform(smooth, [-2000, 0, 2000], [-5, 0, 5], { clamp: false }) + const skew = useTransform(smooth, [-2500, 0, 2500], [7, 0, -7]) + + if (!data.text.trim()) return null + + return ( +
+ + {data.secondary.trim() && } +
+ ) +} + +// ── Bild im Schriftzug ─────────────────────────────────────────────────────── + +const IMAGE_SOURCE = /^(https?:\/\/|\/[^/])/ + +// Riesiges Wort, durch dessen Buchstaben ein Bild scheint; beim Scrollen wandert der Bildausschnitt mit +export function Wortmaske({ data, brand }: BlockProps) { + const ref = useRef(null) + const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "end start"] }) + const position = useTransform(scrollYProgress, [0, 1], ["50% 0%", "50% 100%"]) + const word = data.word.trim() || brand.name + const image = IMAGE_SOURCE.test(data.image.trim()) + ? `url("${data.image.trim().replace(/["\\\n]/g, "")}")` + : "linear-gradient(135deg, var(--t-accent), var(--t-fg))" + + return ( +
+
+ {data.eyebrow} +
+ + {word} + + {data.text.trim() && ( +
+ +

{data.text}

+ +
+ )} +
+ ) +} diff --git a/modules/templates/catalog/blocks/builder.ts b/modules/templates/catalog/blocks/builder.ts new file mode 100644 index 0000000..0bea359 --- /dev/null +++ b/modules/templates/catalog/blocks/builder.ts @@ -0,0 +1,18 @@ +import { defineTemplate, describeSections } from "../../lib/content" +import type { BlockSeed, TemplateDefinition } from "../../lib/types" +import { blockLibrary } from "./definitions" +import type { BrandData } from "./types" + +type BuilderOptions = Omit & { brand: BrandData; seed: BlockSeed[] } + +// Vorlage aus Bausteinen: „Marke & Kontakt“ ist die einzige feste Sektion, alles andere sind Bausteine, +// die im Editor frei hinzugefügt, sortiert und entfernt werden. `seed` ist die Startaufstellung. +export function defineBuilder({ brand, seed, ...template }: BuilderOptions) { + const defaults = { brand } + return defineTemplate({ + ...template, + sections: describeSections(defaults, { brand: "Marke & Kontakt" }), + defaults, + builder: { library: blockLibrary, seed }, + }) +} diff --git a/modules/templates/catalog/blocks/definitions.ts b/modules/templates/catalog/blocks/definitions.ts new file mode 100644 index 0000000..e90dd79 --- /dev/null +++ b/modules/templates/catalog/blocks/definitions.ts @@ -0,0 +1,642 @@ +import { defineBlock, unsplash } from "../../lib/content" + +// Bausteine des Baukastens: Felder und Standardinhalte. Die Komponenten dazu stehen in registry.tsx. +// Alle Bausteine nutzen nur die Paletten-Farben (t-bg, t-fg, t-accent …) und passen so zu jeder Palette. +// Das Feld „menu“ macht einen Baustein zum Menüpunkt; sein Anker entsteht aus dem Text (z. B. #kontakt). + +export const BLOCK_CATEGORIES = [ + "Navigation", + "Start", + "Über uns", + "Leistungen", + "Projekte & Galerie", + "Ablauf", + "Vertrauen", + "Stimmen", + "Team", + "Angebot", + "FAQ", + "Kontakt", + "Akzente", + "Abschluss", +] as const + +// ── Navigation ─────────────────────────────────────────────────────────────── + +export const navLeiste = defineBlock({ + type: "nav-leiste", + label: "Leiste", + category: "Navigation", + description: "Klassische Navigation über die volle Breite: transparent über dem Startbild, beim Scrollen mit Milchglas, auf dem Handy als Vollbild-Menü.", + defaults: { cta: "Kontakt", href: "#kontakt" }, +}) + +export const navGlas = defineBlock({ + type: "nav-glas", + label: "Glas-Pille", + category: "Navigation", + description: "Schwebende Navigation als Glas-Pille mit gleitender Hervorhebung – modern und leicht.", + defaults: { cta: "Gespräch buchen", href: "#kontakt" }, +}) + +export const navMasthead = defineBlock({ + type: "nav-masthead", + label: "Magazin-Kopf", + category: "Navigation", + description: "Großer Schriftzug wie auf einem Magazin-Cover; beim Scrollen erscheint eine schmale Leiste.", + defaults: { edition: "Ausgabe Nº 12 · Herbst/Winter", cta: "Termin vereinbaren", href: "#kontakt" }, +}) + +// ── Start ──────────────────────────────────────────────────────────────────── + +export const heroKino = defineBlock({ + type: "hero-kino", + label: "Kino-Fenster", + category: "Start", + description: "Ein Bildfenster öffnet sich beim Scrollen zum Vollbild – filmisch und eindrucksvoll.", + defaults: { + eyebrow: "Seit 1998 · Hamburg", + title: "Ideen, die\n*bleiben.*", + text: "Wir verbinden Erfahrung mit Neugier – und schaffen Lösungen, die heute begeistern und morgen noch tragen.", + cta: "Mehr erfahren", + href: "#leistungen", + image: unsplash("1506905925346-21bda4d32df4", 2400), + }, +}) + +export const heroVollbild = defineBlock({ + type: "hero-vollbild", + label: "Vollbild", + category: "Start", + description: "Großes Bild über die ganze Höhe mit langsamem Zoom, Überschrift und zwei Buttons.", + defaults: { + eyebrow: "Willkommen", + title: "Wir bringen Ideen\n*ans Licht.*", + text: "Persönlich, verlässlich und mit Liebe zum Detail – seit über 25 Jahren an der Seite unserer Kundinnen und Kunden.", + cta: "Kontakt aufnehmen", + href: "#kontakt", + ctaSecondary: "Unsere Leistungen", + hrefSecondary: "#leistungen", + image: unsplash("1519681393784-d120267933ba", 2400), + }, +}) + +export const heroAurora = defineBlock({ + type: "hero-aurora", + label: "Aurora", + category: "Start", + description: "Leuchtender Farbverlauf, Glas-Effekte und Schlagworte, die eine Lichtkugel umkreisen.", + defaults: { + badge: "Neu: Erstberatung in 48 Stunden", + title: "Die Zukunft beginnt\nmit *einer Idee.*", + text: "Wir verbinden Strategie, Design und Technologie – für Unternehmen, die nicht abwarten, sondern gestalten.", + cta: "Gespräch vereinbaren", + href: "#kontakt", + ctaSecondary: "Leistungen", + hrefSecondary: "#leistungen", + keywords: "Strategie, Design, Technologie, Wachstum, Service", + }, +}) + +export const heroEditorial = defineBlock({ + type: "hero-editorial", + label: "Editorial", + category: "Start", + description: "Wie ein Magazin: große Serifenschrift, das Bild öffnet sich wie Jalousien.", + defaults: { + eyebrow: "Ausgabe Nº 01", + title: "Schönheit\nliegt im *Detail.*", + text: "Wir glauben an Dinge, die mit Sorgfalt gemacht sind – und an Räume, die Geschichten erzählen.", + cta: "Entdecken", + href: "#projekte", + image: unsplash("1600607687939-ce8a6c25118c", 1600), + caption: "Wohnraum, Hamburg-Eppendorf", + }, +}) + +export const heroKinetik = defineBlock({ + type: "hero-kinetik", + label: "Kinetik", + category: "Start", + description: "Riesiger Schriftzug, dessen Buchstaben auf die Maus reagieren – auf dem Handy wogt er von selbst.", + defaults: { + eyebrow: "Studio für Gestaltung & Strategie", + word: "", + text: "Wir gestalten Marken, Räume und Erlebnisse, die Menschen bewegen – präzise im Detail, mutig im Ganzen.", + cta: "Projekte ansehen", + href: "#projekte", + image: unsplash("1479839672679-a46483c0e7c8", 1600), + }, +}) + +// ── Über uns ───────────────────────────────────────────────────────────────── + +export const statement = defineBlock({ + type: "statement", + label: "Leitsatz", + category: "Über uns", + description: "Großer Text, dessen Wörter beim Scrollen nacheinander aufleuchten.", + defaults: { + menu: "", + eyebrow: "Über uns", + text: "Gute Arbeit beginnt mit Zuhören. Wir nehmen uns Zeit, verstehen, was Sie bewegt – und entwickeln daraus Lösungen, die nicht nur funktionieren, sondern begeistern.", + author: "Anna Lindberg", + role: "Gründerin", + }, +}) + +export const storyKapitel = defineBlock({ + type: "story-kapitel", + label: "Kapitel", + category: "Über uns", + description: "Erzählt eine Geschichte in Kapiteln; das Bild wechselt beim Scrollen mit.", + defaults: { + menu: "Geschichte", + eyebrow: "Unsere Geschichte", + title: "Vom ersten Tag\nbis *heute.*", + items: [ + { year: "1998", title: "Der Anfang", text: "Mit zwei Schreibtischen und einer großen Idee gründen wir unser Studio in einem Hinterhof in Hamburg.", image: unsplash("1497366811353-6870744d04b2", 1400) }, + { year: "2010", title: "Das Wachstum", text: "Aus dem kleinen Team werden 40 Menschen, aus Aufträgen werden langjährige Partnerschaften.", image: unsplash("1521737604893-d14cc237f11d", 1400) }, + { year: "2026", title: "Die Zukunft", text: "Heute verbinden wir Erfahrung mit neuen Ideen – und bleiben dabei, was uns ausmacht: nah, ehrlich, leidenschaftlich.", image: unsplash("1556761175-5973dc0f32e7", 1400) }, + ], + }, + items: { items: "Kapitel" }, +}) + +export const textBild = defineBlock({ + type: "text-bild", + label: "Text & Bild", + category: "Über uns", + description: "Editorial mit Initiale, Zitat und Unterschrift; das Bild färbt sich beim Darüberfahren von der Maus aus ein.", + defaults: { + menu: "Über uns", + eyebrow: "Über uns", + title: "Mit Herz\nund *Haltung.*", + text: "Seit über 25 Jahren begleiten wir Menschen und Unternehmen auf ihrem Weg. Wir hören zu, denken mit und packen an – mit einem Team, das seine Arbeit liebt und für jedes Projekt brennt.", + quote: "Wir messen uns nicht an Aufträgen, sondern an Beziehungen, die bleiben.", + signature: "Anna Lindberg", + image: unsplash("1522071820081-009f0129c71c", 1400), + caption: "Unser Team im Hamburger Studio", + }, +}) + +// ── Leistungen ─────────────────────────────────────────────────────────────── + +export const leistungenPanels = defineBlock({ + type: "leistungen-panels", + label: "Panels", + category: "Leistungen", + description: "Bildpaneele, die sich beim Darüberfahren aufziehen – ideal für drei bis fünf Leistungen.", + defaults: { + menu: "Leistungen", + eyebrow: "Leistungen", + title: "Was wir *für Sie* tun.", + items: [ + { title: "Beratung", text: "Wir analysieren, wo Sie stehen, und zeigen, wohin es gehen kann – klar, ehrlich und umsetzbar.", image: unsplash("1552664730-d307ca884978", 1400) }, + { title: "Gestaltung", text: "Von der Idee zum Entwurf: Wir geben Ihren Vorhaben eine Form, die begeistert.", image: unsplash("1497366811353-6870744d04b2", 1400) }, + { title: "Umsetzung", text: "Wir setzen um – termingerecht, im Budget und mit einem Auge für jedes Detail.", image: unsplash("1531297484001-80022131f5a1", 1400) }, + { title: "Betreuung", text: "Auch nach dem Projekt sind wir für Sie da – persönlich und auf kurzem Weg.", image: unsplash("1521737604893-d14cc237f11d", 1400) }, + ], + }, + items: { items: "Leistung" }, +}) + +export const leistungenBento = defineBlock({ + type: "leistungen-bento", + label: "Bento mit Lichtkegel", + category: "Leistungen", + description: "Kacheln im Bento-Raster; ein Lichtkegel folgt der Maus über alle Kacheln. Die erste Kachel ist groß, ein Bild ist optional.", + defaults: { + menu: "Leistungen", + eyebrow: "Leistungen", + title: "Alles aus\n*einer Hand.*", + text: "Von der ersten Idee bis zum fertigen Ergebnis – wir begleiten Sie auf dem ganzen Weg.", + items: [ + { title: "Strategie", text: "Wir finden heraus, was Sie wirklich weiterbringt, und machen daraus einen klaren Plan.", image: unsplash("1552664730-d307ca884978", 1200) }, + { title: "Design", text: "Gestaltung, die Ihre Marke unverwechselbar macht.", image: "" }, + { title: "Technologie", text: "Moderne Lösungen, die zuverlässig laufen.", image: "" }, + { title: "Service", text: "Persönliche Betreuung – schnell, freundlich und kompetent.", image: "" }, + { title: "Wachstum", text: "Maßnahmen, die messbar mehr Kundschaft bringen.", image: "" }, + { title: "Qualität", text: "Sorgfalt bis ins Detail – geprüft und dokumentiert.", image: "" }, + ], + }, + items: { items: "Leistung" }, +}) + +export const leistungenKarten = defineBlock({ + type: "leistungen-karten", + label: "3D-Karten", + category: "Leistungen", + description: "Karten, die sich zur Maus neigen und einen Glanz werfen – mit Aufzählung je Leistung.", + defaults: { + menu: "Leistungen", + eyebrow: "Leistungen", + title: "Was wir *können.*", + items: [ + { title: "Beratung", text: "Klarheit über Ziele, Wege und Möglichkeiten.", features: "Analyse & Workshop\nStrategie & Fahrplan\nFördermöglichkeiten" }, + { title: "Planung", text: "Durchdachte Konzepte bis ins Detail.", features: "Konzept & Entwurf\nKosten & Zeitplan\nAbstimmung mit Partnern" }, + { title: "Umsetzung", text: "Wir machen aus Plänen Wirklichkeit.", features: "Projektsteuerung\nQualitätssicherung\nTransparente Berichte" }, + { title: "Betreuung", text: "Langfristig an Ihrer Seite.", features: "Feste Ansprechperson\nWartung & Pflege\nSchnelle Hilfe" }, + ], + }, + items: { items: "Leistung" }, +}) + +// ── Projekte & Galerie ─────────────────────────────────────────────────────── + +export const projekteQuerlauf = defineBlock({ + type: "projekte-querlauf", + label: "Querlauf", + category: "Projekte & Galerie", + description: "Beim Scrollen gleiten große Bilder seitlich vorbei – mit Fortschrittsleiste.", + defaults: { + menu: "Projekte", + eyebrow: "Projekte", + title: "Ausgewählte\n*Arbeiten*", + items: [ + { title: "Haus am Wasser", category: "Wohnen", year: "2026", image: unsplash("1613490493576-7fde63acd811", 1600) }, + { title: "Pavillon", category: "Kultur", year: "2025", image: unsplash("1518005020951-eccb494ad742", 1600) }, + { title: "Studio Ost", category: "Arbeiten", year: "2024", image: unsplash("1497366811353-6870744d04b2", 1600) }, + { title: "Villa Sol", category: "Wohnen", year: "2023", image: unsplash("1512917774080-9991f1c4c750", 1600) }, + { title: "Haus Weiß", category: "Wohnen", year: "2022", image: unsplash("1487958449943-2429e8be8625", 1600) }, + ], + }, + items: { items: "Projekt" }, +}) + +export const projekteIndex = defineBlock({ + type: "projekte-index", + label: "Index mit Bildspur", + category: "Projekte & Galerie", + description: "Projektliste im Swiss-Stil; die Maus hinterlässt eine Spur aus Projektbildern.", + defaults: { + menu: "Projekte", + eyebrow: "Index", + title: "Ausgewählte *Projekte*", + items: [ + { title: "Haus Weiß", location: "Hamburg", category: "Wohnen", year: "2026", image: unsplash("1487958449943-2429e8be8625", 800) }, + { title: "Pavillon Blau", location: "Berlin", category: "Kultur", year: "2025", image: unsplash("1518005020951-eccb494ad742", 800) }, + { title: "Kubus", location: "Köln", category: "Arbeiten", year: "2024", image: unsplash("1479839672679-a46483c0e7c8", 800) }, + { title: "Villa Sol", location: "Mallorca", category: "Wohnen", year: "2023", image: unsplash("1512917774080-9991f1c4c750", 800) }, + { title: "Atelier Licht", location: "München", category: "Innenraum", year: "2022", image: unsplash("1517705008128-361805f42e86", 800) }, + ], + }, + items: { items: "Projekt" }, +}) + +export const galerieKarussell = defineBlock({ + type: "galerie-karussell", + label: "3D-Karussell", + category: "Projekte & Galerie", + description: "Bilder auf einem drehenden Zylinder – dreht sich beim Scrollen und lässt sich mit der Maus oder dem Finger ziehen.", + defaults: { + menu: "Galerie", + eyebrow: "Galerie", + title: "Einblicke in\n*Bewegung.*", + text: "Ziehen oder scrollen Sie, um die Galerie zu drehen.", + images: [ + { src: unsplash("1487958449943-2429e8be8625", 900), caption: "Haus Weiß" }, + { src: unsplash("1518005020951-eccb494ad742", 900), caption: "Pavillon" }, + { src: unsplash("1479839672679-a46483c0e7c8", 900), caption: "Kubus" }, + { src: unsplash("1613490493576-7fde63acd811", 900), caption: "Haus am Wasser" }, + { src: unsplash("1517705008128-361805f42e86", 900), caption: "Atelier" }, + { src: unsplash("1512917774080-9991f1c4c750", 900), caption: "Villa Sol" }, + { src: unsplash("1592078615290-033ee584e267", 900), caption: "Objekt" }, + { src: unsplash("1431576901776-e539bd916ba2", 900), caption: "Fassade" }, + ], + }, + items: { images: "Bild" }, +}) + +// ── Ablauf ─────────────────────────────────────────────────────────────────── + +export const ablaufLinie = defineBlock({ + type: "ablauf-linie", + label: "Zeitstrahl", + category: "Ablauf", + description: "Eine Linie zeichnet sich beim Scrollen und lässt die Schritte nacheinander aufleuchten.", + defaults: { + menu: "Ablauf", + eyebrow: "Ablauf", + title: "So einfach geht's\n*mit uns.*", + items: [ + { title: "Kennenlernen", text: "In einem ersten Gespräch erfahren wir, was Sie vorhaben – kostenlos und unverbindlich.", duration: "Tag 1" }, + { title: "Konzept", text: "Wir entwickeln einen klaren Plan mit Zeitrahmen und transparentem Angebot.", duration: "1–2 Wochen" }, + { title: "Umsetzung", text: "Wir setzen um und halten Sie in jeder Phase auf dem Laufenden.", duration: "nach Plan" }, + { title: "Übergabe", text: "Sie erhalten das Ergebnis – und uns als Ansprechpartner auch danach.", duration: "Ziel erreicht" }, + ], + }, + items: { items: "Schritt" }, +}) + +export const ablaufSpalten = defineBlock({ + type: "ablauf-spalten", + label: "Spalten", + category: "Ablauf", + description: "Schritte nebeneinander mit römischen Ziffern und Linien, die sich zeichnen.", + defaults: { + menu: "Ablauf", + eyebrow: "Ablauf", + title: "In vier *Schritten.*", + items: [ + { title: "Zuhören", text: "Wir lernen Sie und Ihr Vorhaben kennen – in Ruhe und ohne Verpflichtung." }, + { title: "Entwerfen", text: "Wir entwickeln Ideen und einen klaren Plan, den Sie mitgestalten." }, + { title: "Umsetzen", text: "Wir setzen sorgfältig und termingerecht um – mit festen Ansprechpartnern." }, + { title: "Begleiten", text: "Wir bleiben an Ihrer Seite – auch lange nach dem Abschluss." }, + ], + }, + items: { items: "Schritt" }, +}) + +// ── Vertrauen ──────────────────────────────────────────────────────────────── + +export const zahlen = defineBlock({ + type: "zahlen", + label: "Kennzahlen", + category: "Vertrauen", + description: "Zahlen zählen beim Erscheinen hoch, feine Linien zeichnen sich. Überschrift optional.", + defaults: { + eyebrow: "", + title: "", + items: [ + { value: "25", suffix: "+", label: "Jahre Erfahrung" }, + { value: "1.200", suffix: "", label: "zufriedene Kunden" }, + { value: "40", suffix: "", label: "Menschen im Team" }, + { value: "4,9", suffix: "/5", label: "Bewertung im Schnitt" }, + ], + }, + items: { items: "Kennzahl" }, +}) + +export const logos = defineBlock({ + type: "logos", + label: "Logo-Laufband", + category: "Vertrauen", + description: "Kunden oder Partner als endloses Laufband – mit Logo-Bild oder als Schriftzug.", + defaults: { + title: "Partner und Kunden, die uns vertrauen", + items: [ + { name: "Nordwerk", logo: "" }, + { name: "Velora", logo: "" }, + { name: "Kraftbau", logo: "" }, + { name: "Brightfield", logo: "" }, + { name: "Okuma", logo: "" }, + { name: "Lumio", logo: "" }, + ], + }, + items: { items: "Kunde" }, +}) + +// ── Stimmen ────────────────────────────────────────────────────────────────── + +export const stimmenZitat = defineBlock({ + type: "stimmen-zitat", + label: "Großes Zitat", + category: "Stimmen", + description: "Ein Zitat groß in Szene gesetzt; wechselt automatisch, mit Fortschrittsanzeige.", + defaults: { + menu: "", + eyebrow: "Stimmen", + items: [ + { quote: "Vom ersten Gespräch bis zum Ergebnis haben wir uns bestens aufgehoben gefühlt. Ehrlich, schnell und mit großem Gespür für das, was uns wichtig ist.", author: "Julia Hartmann", role: "Geschäftsführerin, Hartmann & Co." }, + { quote: "Selten so ein engagiertes Team erlebt. Jede Frage wurde sofort beantwortet, jeder Termin eingehalten.", author: "Markus Weber", role: "Inhaber, Weber Logistik" }, + { quote: "Das Ergebnis hat unsere Erwartungen übertroffen – und unsere Kunden sehen es genauso.", author: "Dr. Sophie Klein", role: "Praxis Dr. Klein" }, + ], + }, + items: { items: "Stimme" }, +}) + +export const stimmenWand = defineBlock({ + type: "stimmen-wand", + label: "Stimmen-Wand", + category: "Stimmen", + description: "Spalten mit Kundenstimmen, die endlos gegenläufig laufen und beim Darüberfahren sanft anhalten.", + defaults: { + menu: "Stimmen", + eyebrow: "Stimmen", + title: "Was unsere Kunden *sagen.*", + items: [ + { quote: "Unkompliziert, schnell und richtig gut. Wir haben uns vom ersten Tag an verstanden gefühlt.", author: "Lena Brandt", role: "Inhaberin, Studio Brandt", image: unsplash("1494790108377-be9c29b29330", 300) }, + { quote: "Endlich ein Partner, der mitdenkt, statt nur abzuarbeiten. Klare Empfehlung!", author: "Tobias Lehmann", role: "Geschäftsführer, Lehmann Bau", image: unsplash("1560250097-0b93528c311a", 300) }, + { quote: "Die Zusammenarbeit war professionell und herzlich zugleich. Das Ergebnis spricht für sich.", author: "Mira Schulz", role: "Marketing, Velora", image: unsplash("1534528741775-53994a69daeb", 300) }, + { quote: "Wir haben unsere Ziele in der Hälfte der Zeit erreicht. Das hätten wir nie gedacht.", author: "Jonas Becker", role: "Gründer, Kraftbau", image: unsplash("1472099645785-5658abf4ff4e", 300) }, + { quote: "Jede Frage wurde geduldig beantwortet. Man merkt, dass hier Menschen mit Leidenschaft arbeiten.", author: "Amara Okafor", role: "Praxis am Park", image: unsplash("1531123897727-8f129e1688ce", 300) }, + { quote: "Termingerecht, im Budget und mit Liebe zum Detail – so wünscht man sich das.", author: "Felix Wagner", role: "Wagner & Söhne", image: unsplash("1539571696357-5a69c17a67c6", 300) }, + ], + }, + items: { items: "Stimme" }, +}) + +// ── Team ───────────────────────────────────────────────────────────────────── + +export const team = defineBlock({ + type: "team", + label: "Team", + category: "Team", + description: "Porträts in Schwarzweiß, die sich beim Darüberfahren von der Maus aus einfärben.", + defaults: { + menu: "Team", + eyebrow: "Team", + title: "Die Menschen\n*dahinter.*", + text: "Ein Team aus Expertinnen und Experten, das für jedes Projekt brennt.", + members: [ + { name: "Anna Lindberg", role: "Gründerin & Geschäftsführung", image: unsplash("1438761681033-6461ffad8d80", 700) }, + { name: "David Moreno", role: "Projektleitung", image: unsplash("1507003211169-0a1dd7228f2d", 700) }, + { name: "Sophie Wagner", role: "Gestaltung", image: unsplash("1508214751196-bcfd4ca60f91", 700) }, + { name: "Lukas Brenner", role: "Technik", image: unsplash("1506794778202-cad84cf45f1d", 700) }, + ], + }, + items: { members: "Person" }, +}) + +// ── Angebot ────────────────────────────────────────────────────────────────── + +export const pakete = defineBlock({ + type: "pakete", + label: "Pakete", + category: "Angebot", + description: "Pakete im Vergleich; das hervorgehobene bekommt einen umlaufenden Lichtrand.", + defaults: { + menu: "Pakete", + eyebrow: "Pakete", + title: "Klar, fair und\n*transparent.*", + text: "Wählen Sie das Paket, das zu Ihnen passt. Alle Preise zzgl. MwSt.", + href: "#kontakt", + plans: [ + { name: "Basis", price: "990 €", period: "einmalig", text: "Für den Einstieg", features: "Erstgespräch & Analyse\nKonzept mit Empfehlungen\nSupport per E-Mail", ribbon: "", cta: "Anfragen" }, + { name: "Plus", price: "2.490 €", period: "einmalig", text: "Unser Klassiker", features: "Alles aus Basis\nUmsetzung durch unser Team\nPersönliche Ansprechperson\n3 Monate Betreuung", ribbon: "Beliebt", cta: "Anfragen" }, + { name: "Premium", price: "Individuell", period: "", text: "Für große Vorhaben", features: "Alles aus Plus\nPriorisierte Umsetzung\nRegelmäßige Strategie-Termine\n12 Monate Betreuung", ribbon: "", cta: "Gespräch vereinbaren" }, + ], + }, + items: { plans: "Paket" }, +}) + +// ── FAQ ────────────────────────────────────────────────────────────────────── + +export const faq = defineBlock({ + type: "faq", + label: "FAQ", + category: "FAQ", + description: "Häufige Fragen zum Aufklappen, daneben Überschrift und Kontakt-Hinweis.", + defaults: { + menu: "FAQ", + eyebrow: "FAQ", + title: "Häufige\n*Fragen*", + text: "Ihre Frage ist nicht dabei? Wir antworten gern persönlich.", + items: [ + { question: "Wie läuft die Zusammenarbeit ab?", answer: "Nach einem kostenlosen Erstgespräch erhalten Sie ein transparentes Angebot. Danach begleitet Sie eine feste Ansprechperson durch alle Schritte." }, + { question: "Was kostet ein Projekt?", answer: "Das hängt vom Umfang ab. Nach dem Erstgespräch nennen wir Ihnen einen verbindlichen Festpreis – ohne versteckte Kosten." }, + { question: "Wie schnell können Sie starten?", answer: "In der Regel innerhalb von zwei Wochen. Bei dringenden Anliegen finden wir fast immer eine Lösung." }, + { question: "Arbeiten Sie auch überregional?", answer: "Ja. Wir arbeiten deutschlandweit – vor Ort oder digital, ganz wie es für Sie am besten passt." }, + ], + }, + items: { items: "Frage" }, +}) + +// ── Kontakt ────────────────────────────────────────────────────────────────── + +export const ctaPortal = defineBlock({ + type: "cta-portal", + label: "Leuchtender Aufruf", + category: "Kontakt", + description: "Große Fläche mit pulsierendem Leuchten und magnetischem Button – der letzte Anstoß.", + defaults: { + menu: "", + eyebrow: "Bereit?", + title: "Lassen Sie uns\netwas *Großes* starten.", + text: "Ein kurzes Gespräch genügt – kostenlos und unverbindlich.", + cta: "Jetzt Kontakt aufnehmen", + href: "#kontakt", + }, +}) + +export const kontaktFormular = defineBlock({ + type: "kontakt-formular", + label: "Kontakt mit Formular", + category: "Kontakt", + description: "Überschrift, Kontaktdaten aus „Marke & Kontakt“ und ein elegantes Formular mit Themen-Auswahl.", + defaults: { + menu: "Kontakt", + eyebrow: "Kontakt", + title: "Lassen Sie\nuns *sprechen.*", + text: "Erzählen Sie uns von Ihrem Vorhaben – wir melden uns innerhalb von 24 Stunden.", + topics: "Anfrage, Beratung, Zusammenarbeit, Sonstiges", + button: "Nachricht senden", + success: "Vielen Dank! Wir melden uns in Kürze bei Ihnen.", + hours: "Mo–Fr, 9–18 Uhr", + }, +}) + +// ── Akzente ────────────────────────────────────────────────────────────────── + +export const laufband = defineBlock({ + type: "laufband", + label: "Text-Laufband", + category: "Akzente", + description: "Großer Text als Laufband, das beim schnellen Scrollen Tempo aufnimmt und sich neigt.", + defaults: { + text: "Ideen · Gestaltung · Umsetzung · Begeisterung ·", + secondary: "Mit Herz und Verstand ·", + }, +}) + +export const wortmaske = defineBlock({ + type: "wortmaske", + label: "Bild im Schriftzug", + category: "Akzente", + description: "Ein Bild scheint durch riesige Buchstaben und wandert beim Scrollen mit.", + defaults: { + menu: "", + eyebrow: "Was uns antreibt", + word: "Neugier", + text: "Neugier ist der Anfang von allem. Sie lässt uns Fragen stellen, Gewohntes hinterfragen und Lösungen finden, an die vorher niemand gedacht hat.", + image: unsplash("1501785888041-af3ef285b470", 2000), + }, +}) + +// ── Abschluss ──────────────────────────────────────────────────────────────── + +export const footerWortmarke = defineBlock({ + type: "footer-wortmarke", + label: "Riesen-Schriftzug", + category: "Abschluss", + description: "Abschluss mit Navigation, Kontaktdaten und dem Namen als Schriftzug über die volle Breite.", + defaults: { text: "Ideen, die bleiben.", cta: "Kontakt aufnehmen", href: "#kontakt" }, +}) + +export const footerSchlicht = defineBlock({ + type: "footer-schlicht", + label: "Schlicht", + category: "Abschluss", + description: "Klarer Abschluss in Spalten mit Navigation, Kontakt und Ortszeit.", + defaults: { city: "Hamburg", note: "Mit Sorgfalt gemacht." }, +}) + +// Reihenfolge = Reihenfolge im Bausteine-Dialog +export const blockLibrary = [ + navLeiste, + navGlas, + navMasthead, + heroKino, + heroVollbild, + heroAurora, + heroEditorial, + heroKinetik, + statement, + storyKapitel, + textBild, + leistungenPanels, + leistungenBento, + leistungenKarten, + projekteQuerlauf, + projekteIndex, + galerieKarussell, + ablaufLinie, + ablaufSpalten, + zahlen, + logos, + stimmenZitat, + stimmenWand, + team, + pakete, + faq, + ctaPortal, + kontaktFormular, + laufband, + wortmaske, + footerWortmarke, + footerSchlicht, +] + +export type NavLeisteData = typeof navLeiste.defaults +export type NavGlasData = typeof navGlas.defaults +export type NavMastheadData = typeof navMasthead.defaults +export type HeroKinoData = typeof heroKino.defaults +export type HeroVollbildData = typeof heroVollbild.defaults +export type HeroAuroraData = typeof heroAurora.defaults +export type HeroEditorialData = typeof heroEditorial.defaults +export type HeroKinetikData = typeof heroKinetik.defaults +export type StatementData = typeof statement.defaults +export type StoryKapitelData = typeof storyKapitel.defaults +export type TextBildData = typeof textBild.defaults +export type LeistungenPanelsData = typeof leistungenPanels.defaults +export type LeistungenBentoData = typeof leistungenBento.defaults +export type LeistungenKartenData = typeof leistungenKarten.defaults +export type ProjekteQuerlaufData = typeof projekteQuerlauf.defaults +export type ProjekteIndexData = typeof projekteIndex.defaults +export type GalerieKarussellData = typeof galerieKarussell.defaults +export type AblaufLinieData = typeof ablaufLinie.defaults +export type AblaufSpaltenData = typeof ablaufSpalten.defaults +export type ZahlenData = typeof zahlen.defaults +export type LogosData = typeof logos.defaults +export type StimmenZitatData = typeof stimmenZitat.defaults +export type StimmenWandData = typeof stimmenWand.defaults +export type TeamData = typeof team.defaults +export type PaketeData = typeof pakete.defaults +export type FaqData = typeof faq.defaults +export type CtaPortalData = typeof ctaPortal.defaults +export type KontaktFormularData = typeof kontaktFormular.defaults +export type LaufbandData = typeof laufband.defaults +export type WortmaskeData = typeof wortmaske.defaults +export type FooterWortmarkeData = typeof footerWortmarke.defaults +export type FooterSchlichtData = typeof footerSchlicht.defaults diff --git a/modules/templates/catalog/blocks/fonts.ts b/modules/templates/catalog/blocks/fonts.ts new file mode 100644 index 0000000..354b2fa --- /dev/null +++ b/modules/templates/catalog/blocks/fonts.ts @@ -0,0 +1,44 @@ +import { + Anybody, + Cormorant, + EB_Garamond, + Funnel_Display, + Funnel_Sans, + Host_Grotesk, + Hubot_Sans, + Manrope, + Mona_Sans, + Noto_Serif_Display, + Parkinsans, + Rethink_Sans, +} from "next/font/google" +import type { FontPair } from "../../lib/types" + +// Schriften der Baukasten-Vorlagen; jede Vorlage wählt in ihrer fonts.ts daraus. +// preload: false – siehe restaurant/fonts.ts. Mona Sans, Hubot Sans und Anybody laden die Breiten-Achse (wdth) +// mit, die der Baustein „Kinetik“ für seine reagierende Schrift nutzt. +const notoDisplay = Noto_Serif_Display({ subsets: ["latin"], style: ["normal", "italic"], variable: "--font-blocks-noto", preload: false }) +const host = Host_Grotesk({ subsets: ["latin"], variable: "--font-blocks-host", preload: false }) +const hubot = Hubot_Sans({ subsets: ["latin"], axes: ["wdth"], variable: "--font-blocks-hubot", preload: false }) +const funnelDisplay = Funnel_Display({ subsets: ["latin"], variable: "--font-blocks-funnel-display", preload: false }) +const funnelSans = Funnel_Sans({ subsets: ["latin"], variable: "--font-blocks-funnel-sans", preload: false }) +// Für Parkinsans kennt next/font keine Fallback-Metriken +const parkinsans = Parkinsans({ subsets: ["latin"], variable: "--font-blocks-parkinsans", preload: false, adjustFontFallback: false }) +const rethink = Rethink_Sans({ subsets: ["latin"], variable: "--font-blocks-rethink", preload: false }) +const cormorant = Cormorant({ subsets: ["latin"], style: ["normal", "italic"], variable: "--font-blocks-cormorant", preload: false }) +const manrope = Manrope({ subsets: ["latin"], variable: "--font-blocks-manrope", preload: false }) +const garamond = EB_Garamond({ subsets: ["latin"], style: ["normal", "italic"], variable: "--font-blocks-garamond", preload: false }) +const mona = Mona_Sans({ subsets: ["latin"], axes: ["wdth"], variable: "--font-blocks-mona", preload: false }) +const anybody = Anybody({ subsets: ["latin"], axes: ["wdth"], variable: "--font-blocks-anybody", preload: false }) + +export const pairs = { + kino: { className: `${notoDisplay.variable} ${host.variable}`, display: "var(--font-blocks-noto)", body: "var(--font-blocks-host)" }, + hubot: { className: `${hubot.variable} ${host.variable}`, display: "var(--font-blocks-hubot)", body: "var(--font-blocks-host)" }, + grotesk: { className: host.variable, display: "var(--font-blocks-host)", body: "var(--font-blocks-host)" }, + funnel: { className: `${funnelDisplay.variable} ${funnelSans.variable}`, display: "var(--font-blocks-funnel-display)", body: "var(--font-blocks-funnel-sans)" }, + park: { className: `${parkinsans.variable} ${rethink.variable}`, display: "var(--font-blocks-parkinsans)", body: "var(--font-blocks-rethink)" }, + cormorant: { className: `${cormorant.variable} ${manrope.variable}`, display: "var(--font-blocks-cormorant)", body: "var(--font-blocks-manrope)" }, + garamond: { className: `${garamond.variable} ${host.variable}`, display: "var(--font-blocks-garamond)", body: "var(--font-blocks-host)" }, + mona: { className: mona.variable, display: "var(--font-blocks-mona)", body: "var(--font-blocks-mona)" }, + anybody: { className: `${anybody.variable} ${host.variable}`, display: "var(--font-blocks-anybody)", body: "var(--font-blocks-host)" }, +} satisfies Record diff --git a/modules/templates/catalog/blocks/footer.tsx b/modules/templates/catalog/blocks/footer.tsx new file mode 100644 index 0000000..2938a17 --- /dev/null +++ b/modules/templates/catalog/blocks/footer.tsx @@ -0,0 +1,128 @@ +"use client" + +import { motion, useScroll, useTransform } from "motion/react" +import { useRef } from "react" +import { cn } from "@/lib/utils" +import { useNow } from "../shared/hooks" +import { wordmarkSize } from "../shared/motion" +import type { FooterSchlichtData, FooterWortmarkeData } from "./definitions" +import type { BlockProps, BrandData } from "./types" +import { Action, Brand, container, telHref } from "./ui" + +const label = "text-[11px] tracking-[0.22em] text-t-muted uppercase" +const clock = new Intl.DateTimeFormat("de-DE", { hour: "2-digit", minute: "2-digit", timeZone: "Europe/Berlin" }) + +function ContactList({ brand }: { brand: BrandData }) { + return ( +
    + {brand.email.trim() && ( +
  • + {brand.email} +
    • + )} + {brand.phone.trim() && ( +
  • + {brand.phone} +
    • + )} + {brand.address.trim() &&
  • {brand.address}
    • } +
+ ) +} + +function Legal({ brand, note, className }: { brand: BrandData; note?: string; className?: string }) { + return ( +
+ + © {brand.name} + {note?.trim() && ` · ${note}`} + + +
+ ) +} + +// Abschluss mit Navigation, Kontakt und dem Namen über die volle Breite, der beim Erreichen des Seitenendes aufsteigt +export function FooterWortmarke({ data, brand, links }: BlockProps) { + const ref = useRef(null) + const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "end end"] }) + const y = useTransform(scrollYProgress, [0, 1], ["55%", "0%"]) + + return ( +
+
+
+ {data.text.trim() &&

{data.text}

} + + {data.cta} + +
+ {links.length > 0 && ( + + )} +
+

Kontakt

+ +
+
+
+ + {brand.name} + +
+ +
+ ) +} + +export function FooterSchlicht({ data, brand, links }: BlockProps) { + const now = useNow() + + return ( +
+
+
+ + {brand.tagline.trim() &&

{brand.tagline}

} +
+ {links.length > 0 && ( + + )} +
+

Kontakt

+ +
+
+

Ortszeit {data.city}

+

{now === null ? "––:––" : clock.format(now)}

+
+
+ +
+ ) +} diff --git a/modules/templates/catalog/blocks/navigation.tsx b/modules/templates/catalog/blocks/navigation.tsx new file mode 100644 index 0000000..b9af350 --- /dev/null +++ b/modules/templates/catalog/blocks/navigation.tsx @@ -0,0 +1,236 @@ +"use client" + +import { AnimatePresence, motion, useMotionValueEvent, useScroll } from "motion/react" +import { useEffect, useId, useRef, useState } from "react" +import { cn } from "@/lib/utils" +import { ease, useScrollNav, wordmarkSize } from "../shared/motion" +import type { NavGlasData, NavLeisteData, NavMastheadData } from "./definitions" +import type { BlockProps } from "./types" +import { actionClass, Brand, container, linkProps, MobileMenu, useDarkSurface } from "./ui" + +function MenuButton({ open, onClick, className }: { open: boolean; onClick: () => void; className?: string }) { + return ( + + ) +} + +// Klassische Leiste: transparent oben, Milchglas nach dem ersten Scrollen, versteckt sich beim Runterscrollen. +// Über dunklen Bildflächen (data-surface="dark") wird die Schrift hell. +export function NavLeiste({ data, brand, links }: BlockProps) { + const { scrolled, hidden } = useScrollNav() + const onImage = useDarkSurface() + const [open, setOpen] = useState(false) + const light = onImage && !scrolled + // Menüpunkt mit demselben Ziel wie der Button nicht doppelt zeigen (z. B. „Kontakt“) + const inline = links.filter((link) => link.href !== data.href.trim()) + + return ( + <> + + setOpen(false)} links={links} brand={brand} cta={{ label: data.cta, href: data.href }} /> + + ) +} + +// Schwebende Glas-Pille; die Hervorhebung gleitet von Menüpunkt zu Menüpunkt +export function NavGlas({ data, brand, links }: BlockProps) { + const ref = useRef(null) + const pill = useId() + const [hovered, setHovered] = useState(null) + const [open, setOpen] = useState(false) + const inline = links.filter((link) => link.href !== data.href.trim()) + + useEffect(() => { + if (!open) return + const close = (event: PointerEvent) => { + if (!ref.current?.contains(event.target as Node)) setOpen(false) + } + document.addEventListener("pointerdown", close) + return () => document.removeEventListener("pointerdown", close) + }, [open]) + + return ( + +
+ + + {open && ( + + {links.map((link) => ( + setOpen(false)} className="block rounded-2xl px-4 py-3 text-lg transition-colors hover:bg-t-fg/[0.06]"> + {link.label} + + ))} + + )} + +
+ + ) +} + +// Magazin-Kopf: großer Schriftzug im Fluss der Seite, danach eine schmale Leiste oben +export function NavMasthead({ data, brand, links }: BlockProps) { + const ref = useRef(null) + const { scrollY } = useScroll() + const [compact, setCompact] = useState(false) + const [open, setOpen] = useState(false) + const letters = Array.from(brand.name) + + useMotionValueEvent(scrollY, "change", (y) => { + setCompact(y > (ref.current?.offsetHeight ?? 320) - 24) + }) + + return ( + <> +
+
+ {data.edition} + + setOpen(true)} className="text-[11px] tracking-[0.22em] uppercase md:hidden" /> +
+ + {letters.map((char, i) => ( + + {char === " " ? " " : char} + + ))} + +
+ {brand.tagline} + {data.cta.trim() && ( + + {data.cta} → + + )} +
+
+ +
+ + + setOpen(true)} className="md:hidden" /> +
+ + setOpen(false)} links={links} brand={brand} cta={{ label: data.cta, href: data.href }} /> + + ) +} diff --git a/modules/templates/catalog/blocks/offer.tsx b/modules/templates/catalog/blocks/offer.tsx new file mode 100644 index 0000000..238e72b --- /dev/null +++ b/modules/templates/catalog/blocks/offer.tsx @@ -0,0 +1,255 @@ +"use client" + +import { motion } from "motion/react" +import type { PointerEvent, ReactNode } from "react" +import { ArrowUpRightIcon, CheckIcon } from "lucide-react" +import { cn } from "@/lib/utils" +import { DemoForm } from "../shared/demo-form" +import { TArea, TField } from "../shared/fields" +import { splitList } from "../shared/hooks" +import { Accordion, Reveal } from "../shared/motion" +import type { CtaPortalData, FaqData, KontaktFormularData, PaketeData } from "./definitions" +import type { BlockProps } from "./types" +import { Action, actionClass, container, Eyebrow, Heading, Magnetic, telHref } from "./ui" + +// ── Pakete ─────────────────────────────────────────────────────────────────── + +type Plan = PaketeData["plans"][number] + +// Umlaufender Lichtrand: ein drehender Kegelverlauf hinter der Karte, sichtbar im 1-px-Rand +function GlowBorder({ children }: { children: ReactNode }) { + return ( +
+ +
{children}
+
+ ) +} + +function PlanCard({ plan, href, featured }: { plan: Plan; href: string; featured: boolean }) { + const features = splitList(plan.features, "\n") + + return ( +
+
+

{plan.name}

+ {featured && {plan.ribbon}} +
+ {plan.text.trim() &&

{plan.text}

} +

+ {plan.price} + {plan.period.trim() && {plan.period}} +

+ {features.length > 0 && ( +
    + {features.map((feature, i) => ( +
  • + + {feature} +
    • + ))} +
+ )} +
+ + {plan.cta} + +
+
+ ) +} + +export function Pakete({ data }: BlockProps) { + return ( +
+
+ {data.eyebrow} + + {data.text.trim() &&

{data.text}

} +
+
= 3 ? "max-w-6xl lg:grid-cols-3" : "max-w-4xl md:grid-cols-2")}> + {data.plans.map((plan, i) => ( + + {plan.ribbon.trim() ? ( + + + + ) : ( +
+ +
+ )} + + ))} +
+
+ ) +} + +// ── FAQ ────────────────────────────────────────────────────────────────────── + +export function Faq({ data, brand }: BlockProps) { + return ( +
+
+ {data.eyebrow} + + {data.text.trim() &&

{data.text}

} + {brand.email.trim() && ( + + {brand.email} + + )} +
+ + + +
+ ) +} + +// ── Leuchtender Aufruf ─────────────────────────────────────────────────────── + +export function CtaPortal({ data }: BlockProps) { + function onMove(event: PointerEvent) { + const rect = event.currentTarget.getBoundingClientRect() + event.currentTarget.style.setProperty("--x", `${event.clientX - rect.left}px`) + event.currentTarget.style.setProperty("--y", `${event.clientY - rect.top}px`) + } + + return ( +
+
+ +
+
+ {data.eyebrow} + + {data.text.trim() && ( + +

{data.text}

+ + )} + + + + {data.cta} + + + +
+
+
+ ) +} + +// ── Kontakt mit Formular ───────────────────────────────────────────────────── + +export function KontaktFormular({ data, brand }: BlockProps) { + const topics = splitList(data.topics) + const details = [ + { label: "E-Mail", value: brand.email, href: `mailto:${brand.email}` }, + { label: "Telefon", value: brand.phone, href: telHref(brand.phone) }, + { label: "Adresse", value: brand.address, href: "" }, + { label: "Erreichbar", value: data.hours, href: "" }, + ].filter((detail) => detail.value.trim()) + + return ( +
+
+
+ {data.eyebrow} + + {data.text.trim() && ( + +

{data.text}

+ + )} + +
+ {details.map((detail) => ( +
+
{detail.label}
+
+ {detail.href ? ( + + {detail.value} + + ) : ( + detail.value + )} +
+
+ ))} +
+ +
+ + +

Danke!

+

{data.success}

+
+ } + > + {topics.length > 0 && ( +
+ Worum geht es? +
+ {topics.map((topic, i) => ( + + ))} +
+
+ )} +
+ + + + +
+ + + + +
+ ) +} diff --git a/modules/templates/catalog/blocks/page.tsx b/modules/templates/catalog/blocks/page.tsx new file mode 100644 index 0000000..10fd423 --- /dev/null +++ b/modules/templates/catalog/blocks/page.tsx @@ -0,0 +1,63 @@ +"use client" + +import type { FontPair, TemplateContent, TemplateDefinition } from "../../lib/types" +import { useDemo } from "../shared/demo" +import { TemplateShell } from "../shared/shell" +import { blockComponents } from "./registry" +import type { BrandData, NavLink } from "./types" + +// Anker aus dem Menütext: "Über uns" → "ueber-uns" +function slug(text: string) { + return text + .toLowerCase() + .replace(/ä/g, "ae").replace(/ö/g, "oe").replace(/ü/g, "ue").replace(/ß/g, "ss") + .replace(/[^a-z0-9]+/g, "-") + .replace(/^-+|-+$/g, "") +} + +const menuOf = (data: Record) => (typeof data.menu === "string" ? data.menu.trim() : "") + +// Seite aus Bausteinen: Reihenfolge und Inhalte aus content.blocks, Marke & Kontakt aus content.data.brand. +// Jeder Baustein steckt in einem Anker (id aus seinem Menüpunkt), data-block dient der Editor-Vorschau zum Hinscrollen. +export function BlockPage({ def, content, fonts }: { def: TemplateDefinition; content: TemplateContent; fonts: FontPair }) { + const demo = useDemo() + const brand = content.data.brand as BrandData + const blocks = content.blocks.filter((block) => !block.hidden && blockComponents[block.type]) + + const used = new Set(["top"]) + const anchors = new Map() + for (const block of blocks) { + const base = slug(menuOf(block.data)) || block.id + let anchor = base + for (let n = 2; used.has(anchor); n++) anchor = `${base}-${n}` + used.add(anchor) + anchors.set(block.id, anchor) + } + + const links: NavLink[] = blocks.flatMap((block) => { + const menu = menuOf(block.data) + return menu ? [{ href: `#${anchors.get(block.id)}`, label: menu }] : [] + }) + + return ( + + + {blocks.map((block) => { + const Block = blockComponents[block.type] + return ( +
+ +
+ ) + })} + {blocks.length === 0 && demo && ( +
+
+

Noch keine Bausteine

+

Im Editor unter „Inhalte“ → „Baustein hinzufügen“ die Seite zusammenstellen.

+
+
+ )} + + ) +} diff --git a/modules/templates/catalog/blocks/process.tsx b/modules/templates/catalog/blocks/process.tsx new file mode 100644 index 0000000..52f565b --- /dev/null +++ b/modules/templates/catalog/blocks/process.tsx @@ -0,0 +1,115 @@ +"use client" + +import { motion, useInView, useScroll, useSpring } from "motion/react" +import { useRef } from "react" +import { cn } from "@/lib/utils" +import { ease } from "../shared/motion" +import type { AblaufLinieData, AblaufSpaltenData } from "./definitions" +import type { BlockProps } from "./types" +import { container, easeInOut, Eyebrow, Heading } from "./ui" + +const ROMAN = ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII"] + +type Step = AblaufLinieData["items"][number] + +// Zeitstrahl: die Linie zeichnet sich mit dem Scrollen, Schritte leuchten auf, sobald die Linie sie erreicht +export function AblaufLinie({ data }: BlockProps) { + const track = useRef(null) + const { scrollYProgress } = useScroll({ target: track, offset: ["start 75%", "end 55%"] }) + const progress = useSpring(scrollYProgress, { stiffness: 120, damping: 30 }) + + return ( +
+
+ {data.eyebrow} + +
+
+
+ +
    + {data.items.map((item, i) => ( + + ))} +
+
+
+ ) +} + +function TimelineStep({ item, index }: { item: Step; index: number }) { + const ref = useRef(null) + // Gleiche Höhe wie das Ende der Linie (offset "end 55%"), damit Punkt und Linie zusammen ankommen + const lit = useInView(ref, { margin: "0px 0px -45% 0px" }) + const right = index % 2 === 1 + + return ( +
  • + + + + +

    + Schritt {String(index + 1).padStart(2, "0")} + {item.duration.trim() && {item.duration}} +

    +

    {item.title}

    +

    {item.text}

    +     +
    • + ) +} + +// Schritte nebeneinander: Linien zeichnen sich nacheinander, darunter römische Ziffern +export function AblaufSpalten({ data }: BlockProps) { + return ( +
    +
    +
    + {data.eyebrow} +
    + +
    +
      + {data.items.map((item, i) => ( +
    1. + + + {ROMAN[i] ?? i + 1} +

      {item.title}

      +

      {item.text}

      +       +
      2. + ))} +
    +
    + ) +} diff --git a/modules/templates/catalog/blocks/proof.tsx b/modules/templates/catalog/blocks/proof.tsx new file mode 100644 index 0000000..2ec8363 --- /dev/null +++ b/modules/templates/catalog/blocks/proof.tsx @@ -0,0 +1,281 @@ +"use client" + +import { animate, AnimatePresence, motion, useAnimationFrame, useInView, useMotionValue, useReducedMotionConfig, wrap } from "motion/react" +import { useEffect, useRef, useState } from "react" +import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react" +import { cn } from "@/lib/utils" +import { TImage } from "../shared/media" +import { Counter, Marquee, Reveal, ease } from "../shared/motion" +import type { LogosData, StimmenWandData, StimmenZitatData, TeamData, ZahlenData } from "./definitions" +import type { BlockProps } from "./types" +import { container, easeInOut, Eyebrow, Heading, InkImage } from "./ui" + +// ── Kennzahlen ─────────────────────────────────────────────────────────────── + +export function Zahlen({ data }: BlockProps) { + const header = data.eyebrow.trim() || data.title.trim() + + return ( +
    + {header && ( +
    +
    + {data.eyebrow} +
    + +
    + )} +
    + {data.items.map((item, i) => ( +
    + +

    + + {/* Zusatz (+, %, Mrd. €) klein und hochgestellt, damit lange Zusätze nicht umbrechen */} + {item.suffix.trim() && {item.suffix.trim()}} +

    +

    {item.label}

    +
    + ))} +
    +
    + ) +} + +// ── Logo-Laufband ──────────────────────────────────────────────────────────── + +export function Logos({ data }: BlockProps) { + return ( +
    + {data.title.trim() &&

    {data.title}

    } +
    + + {data.items.map((item, i) => + item.logo.trim() ? ( + + + + ) : ( + + {item.name} + + ) + )} + +
    +
    + ) +} + +// ── Großes Zitat ───────────────────────────────────────────────────────────── + +const ROTATE_MS = 7000 + +// Wechselt alle 7 Sekunden; über dem Bereich hält es an. Die Leiste unter dem Zitat zeigt die Restzeit. +export function StimmenZitat({ data }: BlockProps) { + const [index, setIndex] = useState(0) + const [paused, setPaused] = useState(false) + const count = data.items.length + const current = count > 0 ? index % count : 0 + + useEffect(() => { + if (count < 2 || paused) return + const timer = setTimeout(() => setIndex((i) => (i + 1) % count), ROTATE_MS) + return () => clearTimeout(timer) + }, [current, count, paused]) + + if (count === 0) return null + const item = data.items[current] + + return ( +
    setPaused(true)} onPointerLeave={() => setPaused(false)} className={cn(container, "py-24 md:py-40")}> +
    + {data.eyebrow} + + “ + +
    + + +
    {item.quote}
    +
    + {item.author} + {item.role.trim() && · {item.role}} +
    +     +     +
    + {count > 1 && ( +
    + +
    + {data.items.map((_, i) => ( + + ))} +
    + +
    + )} +
    +
    + ) +} + +// ── Stimmen-Wand ───────────────────────────────────────────────────────────── + +type Testimonial = StimmenWandData["items"][number] + +function TestimonialCard({ item, hidden }: { item: Testimonial; hidden: boolean }) { + return ( +
    +
    „{item.quote}“
    +
    + {item.image.trim() && ( + + + + )} + + {item.author} + {item.role} + +
    +
    + ) +} + +// Endlose Spalte: Inhalt doppelt, verschoben um die halbe Höhe. Beim Darüberfahren bremst sie weich ab. +function LoopColumn({ items, speed, reverse, className }: { items: Testimonial[]; speed: number; reverse?: boolean; className?: string }) { + const ref = useRef(null) + const inner = useRef(null) + const y = useMotionValue(0) + const rate = useMotionValue(1) + const visible = useInView(ref) + const reduce = useReducedMotionConfig() + + useAnimationFrame((_, delta) => { + const element = inner.current + if (!element || !visible || reduce) return + const half = element.offsetHeight / 2 + if (half <= 0) return + y.set(wrap(-half, 0, y.get() + (reverse ? 1 : -1) * speed * (delta / 1000) * rate.get())) + }) + + return ( +
    animate(rate, 0, { duration: 0.6, ease: "easeOut" })} + onPointerLeave={() => animate(rate, 1, { duration: 0.8, ease: "easeInOut" })} + className={cn("h-full overflow-hidden", className)} + > + + {[0, 1].map((copy) => items.map((item, i) => +
    + ) +} + +export function StimmenWand({ data }: BlockProps) { + const split = (columns: number) => Array.from({ length: columns }, (_, c) => data.items.filter((_, i) => i % columns === c)) + + return ( +
    +
    + {data.eyebrow} + +
    +
    +
    + +
    + {split(2).map((items, c) => ( + + ))} +
    +
    + {split(3).map((items, c) => ( + + ))} +
    +
    +
    +
    + ) +} + +// ── Team ───────────────────────────────────────────────────────────────────── + +export function Team({ data }: BlockProps) { + return ( +
    +
    +
    + {data.eyebrow} + +
    + {data.text.trim() && ( + +

    {data.text}

    +     + )} +
    +
    + {data.members.map((member, i) => ( + +
    + +
    +

    {member.name}

    +

    {member.role}

    +
    +
    +     + ))} +
    +
    + ) +} diff --git a/modules/templates/catalog/blocks/registry.tsx b/modules/templates/catalog/blocks/registry.tsx new file mode 100644 index 0000000..63b02eb --- /dev/null +++ b/modules/templates/catalog/blocks/registry.tsx @@ -0,0 +1,52 @@ +"use client" + +import type { ComponentType } from "react" +import { Statement, StoryKapitel, TextBild } from "./about" +import { Laufband, Wortmaske } from "./accents" +import { FooterSchlicht, FooterWortmarke } from "./footer" +import { NavGlas, NavLeiste, NavMasthead } from "./navigation" +import { CtaPortal, Faq, KontaktFormular, Pakete } from "./offer" +import { AblaufLinie, AblaufSpalten } from "./process" +import { Logos, StimmenWand, StimmenZitat, Team, Zahlen } from "./proof" +import { LeistungenBento, LeistungenKarten, LeistungenPanels } from "./services" +import { HeroAurora, HeroEditorial, HeroKinetik, HeroKino, HeroVollbild } from "./start" +import type { BlockProps } from "./types" +import { GalerieKarussell, ProjekteIndex, ProjekteQuerlauf } from "./work" + +type BlockComponent = ComponentType + +// Typ → Komponente; Felder und Standardinhalte stehen in definitions.ts (gleiche Schlüssel) +export const blockComponents: Record = { + "nav-leiste": NavLeiste as BlockComponent, + "nav-glas": NavGlas as BlockComponent, + "nav-masthead": NavMasthead as BlockComponent, + "hero-kino": HeroKino as BlockComponent, + "hero-vollbild": HeroVollbild as BlockComponent, + "hero-aurora": HeroAurora as BlockComponent, + "hero-editorial": HeroEditorial as BlockComponent, + "hero-kinetik": HeroKinetik as BlockComponent, + statement: Statement as BlockComponent, + "story-kapitel": StoryKapitel as BlockComponent, + "text-bild": TextBild as BlockComponent, + "leistungen-panels": LeistungenPanels as BlockComponent, + "leistungen-bento": LeistungenBento as BlockComponent, + "leistungen-karten": LeistungenKarten as BlockComponent, + "projekte-querlauf": ProjekteQuerlauf as BlockComponent, + "projekte-index": ProjekteIndex as BlockComponent, + "galerie-karussell": GalerieKarussell as BlockComponent, + "ablauf-linie": AblaufLinie as BlockComponent, + "ablauf-spalten": AblaufSpalten as BlockComponent, + zahlen: Zahlen as BlockComponent, + logos: Logos as BlockComponent, + "stimmen-zitat": StimmenZitat as BlockComponent, + "stimmen-wand": StimmenWand as BlockComponent, + team: Team as BlockComponent, + pakete: Pakete as BlockComponent, + faq: Faq as BlockComponent, + "cta-portal": CtaPortal as BlockComponent, + "kontakt-formular": KontaktFormular as BlockComponent, + laufband: Laufband as BlockComponent, + wortmaske: Wortmaske as BlockComponent, + "footer-wortmarke": FooterWortmarke as BlockComponent, + "footer-schlicht": FooterSchlicht as BlockComponent, +} diff --git a/modules/templates/catalog/blocks/services.tsx b/modules/templates/catalog/blocks/services.tsx new file mode 100644 index 0000000..7f81a3e --- /dev/null +++ b/modules/templates/catalog/blocks/services.tsx @@ -0,0 +1,261 @@ +"use client" + +import { motion, useMotionTemplate, useMotionValue, useSpring } from "motion/react" +import { useRef, useState, type PointerEvent, type ReactNode } from "react" +import { ArrowUpRightIcon } from "lucide-react" +import { cn } from "@/lib/utils" +import { splitList } from "../shared/hooks" +import { TImage } from "../shared/media" +import { Reveal, ease } from "../shared/motion" +import type { LeistungenBentoData, LeistungenKartenData, LeistungenPanelsData } from "./definitions" +import type { BlockProps } from "./types" +import { container, Eyebrow, Heading } from "./ui" + +const number = (i: number) => String(i + 1).padStart(2, "0") + +// ── Panels ─────────────────────────────────────────────────────────────────── + +// Bildpaneele nebeneinander; das aktive zieht sich auf (Desktop). Mobil als Karten untereinander. +export function LeistungenPanels({ data }: BlockProps) { + const [active, setActive] = useState(0) + const current = Math.min(active, Math.max(0, data.items.length - 1)) + + return ( +
    +
    + {data.eyebrow} + +
    + +
    + {data.items.map((item, i) => { + const open = i === current + return ( +
    setActive(i)} + onFocus={() => setActive(i)} + onClick={() => setActive(i)} + style={{ flexBasis: 0 }} + className={cn( + "relative min-w-0 cursor-pointer overflow-hidden rounded-[1.25rem] bg-black text-white outline-none focus-visible:ring-2 focus-visible:ring-t-accent", + "transition-[flex-grow] duration-700 ease-[cubic-bezier(0.77,0,0.175,1)]", + open ? "grow-[5]" : "grow" + )} + > + +
    +
    + {number(i)} + + {item.title} + +
    +

    {item.title}

    +

    {item.text}

    +
    +
    + ) + })} +
    + +
    + {data.items.map((item, i) => ( + +
    + +
    +
    + {number(i)} +

    {item.title}

    +

    {item.text}

    +
    +
    +     + ))} +
    +
    + ) +} + +// ── Bento ──────────────────────────────────────────────────────────────────── + +// Ein Lichtkegel folgt der Maus über alle Kacheln: Rand und Fläche leuchten in Akzentfarbe auf. +// Die Position steht als --x/--y direkt an jeder Kachel (nicht am Raster), damit nur die Kacheln neu zeichnen. +export function LeistungenBento({ data }: BlockProps) { + const cards = useRef<(HTMLDivElement | null)[]>([]) + + function onMove(event: PointerEvent) { + for (const card of cards.current) { + if (!card) continue + const rect = card.getBoundingClientRect() + card.style.setProperty("--x", `${event.clientX - rect.left}px`) + card.style.setProperty("--y", `${event.clientY - rect.top}px`) + } + } + + return ( +
    +
    +
    + {data.eyebrow} + +
    + {data.text.trim() && ( + +

    {data.text}

    +     + )} +
    + +
    + {data.items.map((item, i) => { + const featured = i === 0 + return ( + { + cards.current[i] = node + }} + initial={{ opacity: 0, y: 24 }} + whileInView={{ opacity: 1, y: 0 }} + viewport={{ once: true, margin: "0px 0px -10% 0px" }} + transition={{ duration: 0.8, ease, delay: (i % 3) * 0.08 }} + className={cn( + "group/card relative rounded-[1.5rem] bg-t-fg/10 p-px", + "[background-image:radial-gradient(380px_circle_at_var(--x,-999px)_var(--y,-999px),var(--t-accent),transparent_45%)]", + featured && "md:col-span-2 md:row-span-2" + )} + > +
    +
    + {item.image.trim() && ( +
    + +
    + )} +
    +
    + {number(i)} + +
    +

    {item.title}

    +

    {item.text}

    +
    +
    + + ) + })} +
    +
    + ) +} + +// ── 3D-Karten ──────────────────────────────────────────────────────────────── + +// Neigt sich zur Maus und wirft einen Glanz (nur mit Maus; auf Touch bleibt die Karte ruhig) +function TiltCard({ children }: { children: ReactNode }) { + const rotateX = useMotionValue(0) + const rotateY = useMotionValue(0) + const glareX = useMotionValue(50) + const glareY = useMotionValue(50) + const springX = useSpring(rotateX, { stiffness: 180, damping: 18 }) + const springY = useSpring(rotateY, { stiffness: 180, damping: 18 }) + const glare = useMotionTemplate`radial-gradient(circle at ${glareX}% ${glareY}%, color-mix(in oklab, var(--t-fg) 14%, transparent), transparent 55%)` + + function onMove(event: PointerEvent) { + if (event.pointerType !== "mouse") return + const rect = event.currentTarget.getBoundingClientRect() + const px = (event.clientX - rect.left) / rect.width + const py = (event.clientY - rect.top) / rect.height + rotateY.set((px - 0.5) * 12) + rotateX.set((0.5 - py) * 12) + glareX.set(px * 100) + glareY.set(py * 100) + } + + return ( +
    + { + rotateX.set(0) + rotateY.set(0) + }} + style={{ rotateX: springX, rotateY: springY }} + className="group relative h-full rounded-[1.75rem] border border-t-fg/10 bg-t-surface p-8 md:p-10" + > + +
    {children}
    +     +
    + ) +} + +export function LeistungenKarten({ data }: BlockProps) { + return ( +
    +
    + {data.eyebrow} + +
    +
    + {data.items.map((item, i) => { + const features = splitList(item.features, "\n") + return ( + + +
    + {number(i)} + +
    +

    {item.title}

    +

    {item.text}

    + {features.length > 0 && ( +
      + {features.map((feature, j) => ( +
    • + + {feature} +
      • + ))} +
    + )} +     +     + ) + })} +
    +
    + ) +} diff --git a/modules/templates/catalog/blocks/start.tsx b/modules/templates/catalog/blocks/start.tsx new file mode 100644 index 0000000..3b5682b --- /dev/null +++ b/modules/templates/catalog/blocks/start.tsx @@ -0,0 +1,496 @@ +"use client" + +import { + motion, + useAnimationFrame, + useInView, + useMotionTemplate, + useMotionValue, + useReducedMotionConfig, + useScroll, + useSpring, + useTransform, + type MotionValue, +} from "motion/react" +import { useEffect, useRef } from "react" +import { cn } from "@/lib/utils" +import { splitList } from "../shared/hooks" +import { TImage } from "../shared/media" +import { ease, wordmarkSize } from "../shared/motion" +import type { HeroAuroraData, HeroEditorialData, HeroKinetikData, HeroKinoData, HeroVollbildData } from "./definitions" +import type { BlockProps } from "./types" +import { Action, container, easeInOut, Eyebrow, Heading, LineLink, linkProps, Magnetic, RevealImage } from "./ui" + +// Hervorhebung auf Bildern: Akzent mit Weiß gemischt, damit sie auch bei dunklen Akzenten lesbar bleibt +const emOnImage = "italic text-[color-mix(in_oklab,var(--t-accent)_55%,white)]" + +// ── Kino-Fenster ───────────────────────────────────────────────────────────── + +// Ein Bildfenster unter der Überschrift öffnet sich beim Scrollen zum Vollbild (Sektion bleibt stehen) +export function HeroKino({ data }: BlockProps) { + const ref = useRef(null) + const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end end"] }) + const progress = useSpring(scrollYProgress, { stiffness: 140, damping: 30, mass: 0.35 }) + const inset = useTransform(progress, [0, 0.72], [1, 0]) + // Abstände des Fensters als CSS-Variablen (mobil/desktop), skaliert mit dem Fortschritt + const clipPath = useMotionTemplate`inset(calc(var(--it) * ${inset}) calc(var(--ix) * ${inset}) calc(var(--ib) * ${inset}) calc(var(--ix) * ${inset}) round calc(1.75rem * ${inset}))` + const imageScale = useTransform(progress, [0, 0.72], [1.3, 1]) + // Kameraschwenk: das kleine Fenster zeigt zuerst den oberen Bildteil, beim Öffnen gleitet das Bild zur Mitte + const imageY = useTransform(progress, [0, 0.72], ["24%", "0%"]) + const titleY = useTransform(progress, [0, 0.4], ["0%", "-40%"]) + const titleOpacity = useTransform(progress, [0.04, 0.36], [1, 0]) + const shade = useTransform(progress, [0.45, 0.8], [0, 1]) + const outroOpacity = useTransform(progress, [0.7, 0.88], [0, 1]) + const outroY = useTransform(progress, [0.7, 0.88], [48, 0]) + const outroEvents = useTransform(progress, (value) => (value > 0.75 ? "auto" : "none")) + const cue = useTransform(progress, [0, 0.06], [1, 0]) + + return ( +
    +
    + + + + + + + + + + {data.eyebrow} + + + + + +

    {data.text}

    + + {data.cta} + +     + + + Scrollen + + + + +
    +
    + ) +} + +// ── Vollbild ───────────────────────────────────────────────────────────────── + +export function HeroVollbild({ data }: BlockProps) { + const ref = useRef(null) + const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end start"] }) + const y = useTransform(scrollYProgress, [0, 1], ["0%", "18%"]) + const fade = useTransform(scrollYProgress, [0, 0.55], [1, 0]) + + return ( +
    + + + + + +
    + + + {data.eyebrow} + + + +

    {data.text}

    +
    + {data.cta} + + {data.ctaSecondary} + +
    +     +     +
    + ) +} + +// ── Aurora ─────────────────────────────────────────────────────────────────── + +const auroraBlobs = [ + { style: { top: "-25%", left: "-10%", width: "60vw", height: "60vw", background: "radial-gradient(closest-side, var(--t-accent), transparent)" }, x: ["0%", "14%"], y: ["0%", "8%"], scale: [1, 1.15], duration: 18 }, + { style: { top: "-15%", right: "-15%", width: "55vw", height: "55vw", background: "radial-gradient(closest-side, color-mix(in oklab, var(--t-accent) 50%, #22d3ee), transparent)" }, x: ["0%", "-12%"], y: ["0%", "14%"], scale: [1.1, 0.95], duration: 22 }, + { style: { bottom: "-35%", left: "18%", width: "65vw", height: "65vw", background: "radial-gradient(closest-side, color-mix(in oklab, var(--t-accent) 45%, #f472b6), transparent)" }, x: ["0%", "-8%"], y: ["0%", "-12%"], scale: [0.95, 1.12], duration: 26 }, +] + +// Langsam ziehende Farbwolken in Akzent-Tönen über einem feinen Raster; auch für andere Bausteine nutzbar +export function AuroraGlow({ className }: { className?: string }) { + return ( +
    + {auroraBlobs.map((blob, i) => ( + + ))} +
    +
    + ) +} + +export function HeroAurora({ data }: BlockProps) { + const keywords = splitList(data.keywords).slice(0, 8) + + return ( +
    + +
    + {data.badge.trim() && ( + + + + + + {data.badge} + + + )} + + + {data.text} + + + + {data.cta} + + + {data.ctaSecondary} + + + {keywords.length > 0 && } +
    +
    + ) +} + +// Lichtkugel mit Schlagworten auf einer Ellipsen-Bahn; hinten kleiner und blasser, vorne vor der Kugel +function Orbit({ words }: { words: string[] }) { + const ref = useRef(null) + const angle = useMotionValue(0) + const width = useMotionValue(0) + const height = useMotionValue(0) + const reduce = useReducedMotionConfig() + const visible = useInView(ref) + + useEffect(() => { + const element = ref.current + if (!element) return + const observer = new ResizeObserver(([entry]) => { + width.set(entry.contentRect.width) + height.set(entry.contentRect.height) + }) + observer.observe(element) + return () => observer.disconnect() + }, [width, height]) + + useAnimationFrame((_, delta) => { + if (reduce || !visible) return + angle.set(angle.get() + delta * 0.008) + }) + + return ( + +
    +
    +
    +
    + +
    + {words.map((word, i) => ( + + ))} + + ) +} + +function OrbitChip({ word, angle, width, height, offset }: { + word: string + angle: MotionValue + width: MotionValue + height: MotionValue + offset: number +}) { + const theta = useTransform(angle, (value) => ((value + offset) * Math.PI) / 180) + const x = useTransform(() => Math.cos(theta.get()) * width.get() * 0.45) + const y = useTransform(() => Math.sin(theta.get()) * height.get() * 0.38) + // 0 = hinten (oben auf der Bahn), 1 = vorne (unten). Gerundet, weil der Server Stilwerte mit weniger + // Nachkommastellen ausgibt – sonst meldet React beim Hydrieren abweichende Attribute. + const depth = useTransform(theta, (value) => (Math.sin(value) + 1) / 2) + const scale = useTransform(depth, (value) => Math.round((0.78 + value * 0.28) * 1000) / 1000) + const opacity = useTransform(depth, (value) => Math.round((0.45 + value * 0.55) * 1000) / 1000) + const zIndex = useTransform(depth, (value) => (value > 0.5 ? 3 : 1)) + + return ( + + + {word} + + ) +} + +// ── Editorial ──────────────────────────────────────────────────────────────── + +export function HeroEditorial({ data, brand }: BlockProps) { + const ref = useRef(null) + const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end start"] }) + const imageY = useTransform(scrollYProgress, [0, 1], ["0%", "10%"]) + + return ( +
    + {brand.tagline.trim() && ( +

    + {brand.tagline} +

    + )} +
    + + {data.eyebrow} + + + +

    {data.text}

    + {data.cta} +     +
    +
    +
    + + + + + + {/* Jalousien: fünf Streifen in Hintergrundfarbe ziehen nacheinander nach oben weg */} + {[0, 1, 2, 3, 4].map((i) => ( + + ))} +
    + {data.caption.trim() && ( +
    + {data.caption} + Nº 01 +
    + )} +
    +
    + ) +} + +// ── Kinetik ────────────────────────────────────────────────────────────────── + +const REST = `"wght" 250, "wdth" 75` + +// Buchstaben werden zur Maus hin fetter und breiter (variable Schrift mit wght/wdth-Achse, z. B. Mona Sans). +// Ohne Maus wandert ein gedachter Punkt langsam über das Wort. +function PressureWord({ text, className }: { text: string; className?: string }) { + const ref = useRef(null) + const letters = useRef<(HTMLSpanElement | null)[]>([]) + const pointer = useRef({ x: -1e4, y: -1e4, targetX: -1e4, targetY: -1e4, active: false }) + const reduce = useReducedMotionConfig() + const visible = useInView(ref) + + useEffect(() => { + const move = (event: PointerEvent) => { + if (event.pointerType !== "mouse") return + Object.assign(pointer.current, { targetX: event.clientX, targetY: event.clientY, active: true }) + } + const leave = () => { + pointer.current.active = false + } + window.addEventListener("pointermove", move) + document.documentElement.addEventListener("pointerleave", leave) + return () => { + window.removeEventListener("pointermove", move) + document.documentElement.removeEventListener("pointerleave", leave) + } + }, []) + + useAnimationFrame((time) => { + const element = ref.current + if (!element || !visible) return + const rect = element.getBoundingClientRect() + const p = pointer.current + if (!p.active) { + p.targetX = reduce ? -1e4 : rect.left + rect.width * (0.5 + 0.48 * Math.sin(time / 2200)) + p.targetY = rect.top + rect.height / 2 + } + p.x += (p.targetX - p.x) * 0.12 + p.y += (p.targetY - p.y) * 0.12 + + const reach = Math.max(rect.width / 2.6, 180) + const boxes = letters.current.map((letter) => letter?.getBoundingClientRect()) + boxes.forEach((box, i) => { + const letter = letters.current[i] + if (!box || !letter) return + const distance = Math.hypot(p.x - (box.left + box.width / 2), p.y - (box.top + box.height / 2)) + const t = Math.max(0, 1 - distance / reach) + const eased = t * t * (3 - 2 * t) + letter.style.fontVariationSettings = `"wght" ${Math.round(250 + eased * 650)}, "wdth" ${Math.round(75 + eased * 50)}` + }) + }) + + return ( +

    + {Array.from(text).map((char, i) => ( + { + letters.current[i] = node + }} + style={{ fontVariationSettings: REST }} + > + {char === " " ? " " : char} + + ))} +

    + ) +} + +export function HeroKinetik({ data, brand }: BlockProps) { + const word = data.word.trim() || brand.name + + return ( +
    + + {data.eyebrow} + Scrollen ↓ + + + + +
    + + {data.text} + + {data.cta.trim() && ( + + )} + +
    +
    + ) +} diff --git a/modules/templates/catalog/blocks/types.ts b/modules/templates/catalog/blocks/types.ts new file mode 100644 index 0000000..5d4d3e6 --- /dev/null +++ b/modules/templates/catalog/blocks/types.ts @@ -0,0 +1,9 @@ +import type { SectionData } from "../../lib/types" + +// Marke & Kontakt gelten für die ganze Seite (content.data.brand) und stehen jedem Baustein zur Verfügung +export type BrandData = { name: string; tagline: string; email: string; phone: string; address: string; logo: string } + +// Menüpunkt eines Bausteins (Feld „menu“), verlinkt auf seinen Anker +export type NavLink = { href: string; label: string } + +export type BlockProps = { data: D; brand: BrandData; links: NavLink[] } diff --git a/modules/templates/catalog/blocks/ui.tsx b/modules/templates/catalog/blocks/ui.tsx new file mode 100644 index 0000000..6294c28 --- /dev/null +++ b/modules/templates/catalog/blocks/ui.tsx @@ -0,0 +1,329 @@ +"use client" + +import { AnimatePresence, motion, useInView, useMotionValue, useScroll, useSpring } from "motion/react" +import { useEffect, useEffectEvent, useRef, useState, useSyncExternalStore, type PointerEvent, type ReactNode } from "react" +import { ArrowRightIcon, ArrowUpRightIcon, XIcon } from "lucide-react" +import { cn } from "@/lib/utils" +import { TImage } from "../shared/media" +import { RevealWords, ease } from "../shared/motion" +import type { BrandData, NavLink } from "./types" + +// Gemeinsame Bausteine der Blöcke. Alles richtet sich nach den Paletten-Farben (t-*), damit jeder Block +// auf hellen wie dunklen Paletten funktioniert und sich mit anderen Blöcken kombinieren lässt. + +export const container = "mx-auto w-full max-w-[1440px] px-5 md:px-10" +export const em = "italic text-t-accent" +// Für Bewegungen auf der Fläche (Paneele, Masken); `ease` aus shared/motion für Auftritte +export const easeInOut = [0.77, 0, 0.175, 1] as const + +const SAFE_HREF = /^(#|\/|mailto:|tel:|https?:\/\/)/i + +// Button-Ziele kommen aus dem Editor: nur Anker, eigene Pfade, mailto:, tel: und http(s) +export function linkProps(href: string) { + const target = SAFE_HREF.test(href.trim()) ? href.trim() : "#" + return /^https?:\/\//i.test(target) ? { href: target, target: "_blank", rel: "noreferrer" } : { href: target } +} + +export const telHref = (phone: string) => `tel:${phone.replace(/[^\d+]/g, "")}` + +export function useMedia(query: string) { + return useSyncExternalStore( + (onChange) => { + const media = window.matchMedia(query) + media.addEventListener("change", onChange) + return () => media.removeEventListener("change", onChange) + }, + () => window.matchMedia(query).matches, + () => false + ) +} + +export function Eyebrow({ children, className }: { children: string; className?: string }) { + if (!children.trim()) return null + return ( +

    + + {children} +

    + ) +} + +export function Heading({ text, as = "h2", className, emClassName = em, onMount, delay }: { + text: string + as?: "h1" | "h2" | "h3" + className?: string + emClassName?: string + onMount?: boolean + delay?: number +}) { + if (!text.trim()) return null + return ( + + ) +} + +// Bild, das beim Erscheinen von unten aufgedeckt wird und sich dabei leicht zurückzoomt +export function RevealImage({ src, alt = "", className, sizes }: { src: string; alt?: string; className?: string; sizes?: string }) { + return ( + + + + + + ) +} + +// Textlink mit Linie darunter, die beim Darüberfahren zusammenschnurrt +export function LineLink({ href, children, className }: { href: string; children: string; className?: string }) { + if (!children.trim()) return null + return ( + + + {children} + + + + + ) +} + +const actionStyles = { + solid: "bg-t-accent text-t-accent-fg hover:shadow-[0_14px_40px_-14px_var(--t-accent)]", + outline: "border border-t-fg/20 text-t-fg hover:border-t-fg/60", + inverse: "bg-t-fg text-t-bg", + light: "border border-white/35 text-white backdrop-blur-sm hover:border-white/80", +} + +export type ActionVariant = keyof typeof actionStyles + +export const actionClass = (variant: ActionVariant = "solid") => + cn( + "group inline-flex cursor-pointer items-center justify-center gap-2 rounded-full px-6 py-3.5 text-sm font-medium", + "transition-[scale,box-shadow,border-color,background-color] duration-200 ease-out active:scale-[0.97]", + actionStyles[variant] + ) + +export function Action({ href, children, variant = "solid", className }: { href: string; children: string; variant?: ActionVariant; className?: string }) { + if (!children.trim()) return null + return ( + + {children} + + + ) +} + +// Folgt der Maus ein Stück, sobald sie in der Nähe ist (nur mit Maus, nicht bei Touch) +export function Magnetic({ children, className, strength = 0.3 }: { children: ReactNode; className?: string; strength?: number }) { + const x = useMotionValue(0) + const y = useMotionValue(0) + const springX = useSpring(x, { stiffness: 220, damping: 18, mass: 0.6 }) + const springY = useSpring(y, { stiffness: 220, damping: 18, mass: 0.6 }) + + function onMove(event: PointerEvent) { + if (event.pointerType !== "mouse") return + const rect = event.currentTarget.getBoundingClientRect() + x.set((event.clientX - (rect.left + rect.width / 2)) * strength) + y.set((event.clientY - (rect.top + rect.height / 2)) * strength) + } + + return ( + { + x.set(0) + y.set(0) + }} + style={{ x: springX, y: springY }} + className={cn("inline-block", className)} + > + {children} + + ) +} + +// Schwarzweiß-Bild, das sich beim Darüberfahren vom Mauspunkt aus einfärbt; auf Touch-Geräten beim Erscheinen +export function InkImage({ src, alt = "", className, sizes }: { src: string; alt?: string; className?: string; sizes?: string }) { + const ref = useRef(null) + const [hover, setHover] = useState(false) + const [origin, setOrigin] = useState({ x: 50, y: 50 }) + const touch = useMedia("(hover: none)") + const seen = useInView(ref, { once: true, amount: 0.6 }) + const colored = hover || (touch && seen) + + function track(event: PointerEvent, active: boolean) { + if (event.pointerType !== "mouse") return + const rect = event.currentTarget.getBoundingClientRect() + setOrigin({ x: ((event.clientX - rect.left) / rect.width) * 100, y: ((event.clientY - rect.top) / rect.height) * 100 }) + setHover(active) + } + + return ( +
    track(event, true)} onPointerLeave={(event) => track(event, false)} className={cn("relative overflow-hidden bg-t-surface", className)}> + + + + +
    + ) +} + +export function Brand({ brand, className }: { brand: BrandData; className?: string }) { + return ( + + {brand.logo.trim() ? ( + + + + ) : ( + brand.name + )} + + ) +} + +// Anker-Links erst nach dem Schließen des Menüs ansteuern, sonst blockiert die Scroll-Sperre +function goTo(href: string) { + if (!href.startsWith("#")) return + setTimeout(() => document.getElementById(href.slice(1))?.scrollIntoView({ behavior: "smooth" }), 80) +} + +// Vollbild-Menü fürs Handy (Navigation „Leiste“ und „Magazin-Kopf“) +export function MobileMenu({ open, onClose, links, brand, cta }: { + open: boolean + onClose: () => void + links: NavLink[] + brand: BrandData + cta: { label: string; href: string } +}) { + const onKey = useEffectEvent((event: KeyboardEvent) => { + if (event.key === "Escape") onClose() + }) + + useEffect(() => { + if (!open) return + const root = document.documentElement + const previous = root.style.overflow + root.style.overflow = "hidden" + window.addEventListener("keydown", onKey) + return () => { + root.style.overflow = previous + window.removeEventListener("keydown", onKey) + } + }, [open]) + + function navigate(href: string) { + onClose() + goTo(href) + } + + return ( + + {open && ( + +
    + + +
    + + + {cta.label.trim() && ( + { + if (!cta.href.startsWith("#")) return + event.preventDefault() + navigate(cta.href) + }} + className={actionClass("solid")} + > + {cta.label} + + )} + {brand.email} + +     + )} +     + ) +} + +// Liegt unter der Navigation gerade eine dunkle Bildfläche (data-surface="dark")? Dann braucht sie helle Schrift. +export function useDarkSurface(probeY = 36) { + const [dark, setDark] = useState(false) + const { scrollY } = useScroll() + + useEffect(() => { + const check = () => { + const hit = document.elementsFromPoint(window.innerWidth / 2, probeY).find((element) => !element.closest("[data-nav]")) + setDark(Boolean(hit?.closest('[data-surface="dark"]'))) + } + const frame = requestAnimationFrame(check) + const timer = setTimeout(check, 700) + const unsubscribe = scrollY.on("change", check) + window.addEventListener("resize", check) + return () => { + cancelAnimationFrame(frame) + clearTimeout(timer) + unsubscribe() + window.removeEventListener("resize", check) + } + }, [scrollY, probeY]) + + return dark +} diff --git a/modules/templates/catalog/blocks/work.tsx b/modules/templates/catalog/blocks/work.tsx new file mode 100644 index 0000000..7d3a5f8 --- /dev/null +++ b/modules/templates/catalog/blocks/work.tsx @@ -0,0 +1,275 @@ +"use client" + +import { + animate, + AnimatePresence, + motion, + useAnimationFrame, + useInView, + useMotionValue, + useMotionValueEvent, + useReducedMotionConfig, + useScroll, + useTransform, +} from "motion/react" +import { useEffect, useRef, useState, type CSSProperties, type PointerEvent } from "react" +import { cn } from "@/lib/utils" +import { TImage } from "../shared/media" +import { HorizontalScroll, ease } from "../shared/motion" +import type { GalerieKarussellData, ProjekteIndexData, ProjekteQuerlaufData } from "./definitions" +import type { BlockProps } from "./types" +import { container, Eyebrow, Heading } from "./ui" + +const pad = (n: number) => String(n).padStart(2, "0") +const number = (i: number) => pad(i + 1) + +// ── Querlauf ───────────────────────────────────────────────────────────────── + +// Projekte gleiten beim Scrollen seitlich vorbei; die Bildhöhe richtet sich nach dem Bildschirm +export function ProjekteQuerlauf({ data }: BlockProps) { + return ( + +
    + {data.eyebrow} + +
    +

    + {pad(data.items.length)} Projekte · weiterscrollen +

    +
    + } + trackClassName="items-end gap-4 px-5 md:gap-8 md:px-10" + footer={(progress) => ( +
    +
    + +
    +
    + )} + > + {data.items.map((item, i) => ( +
    +
    + +
    +
    +

    {item.title}

    + + {[item.category, item.year].filter(Boolean).join(" · ")} + +
    +
    + ))} + + ) +} + +// ── Index mit Bildspur ─────────────────────────────────────────────────────── + +type TrailImage = { id: number; x: number; y: number; src: string; rotate: number } + +// Swiss-Liste; mit der Maus entsteht eine Spur aus Projektbildern, die nach kurzer Zeit verblasst +export function ProjekteIndex({ data }: BlockProps) { + const last = useRef({ x: -1e4, y: -1e4, count: 0 }) + const timers = useRef(new Set>()) + const [trail, setTrail] = useState([]) + const images = data.items.map((item) => item.image).filter((src) => src.trim()) + + useEffect(() => { + const pending = timers.current + return () => pending.forEach((timer) => clearTimeout(timer)) + }, []) + + function onMove(event: PointerEvent) { + if (event.pointerType !== "mouse" || images.length === 0) return + const rect = event.currentTarget.getBoundingClientRect() + const x = event.clientX - rect.left + const y = event.clientY - rect.top + const previous = last.current + if (Math.hypot(x - previous.x, y - previous.y) < 90) return + + previous.x = x + previous.y = y + previous.count += 1 + const image = { id: previous.count, x, y, src: images[previous.count % images.length], rotate: ((previous.count * 37) % 17) - 8 } + setTrail((current) => [...current.slice(-6), image]) + const timer = setTimeout(() => { + setTrail((current) => current.filter((entry) => entry.id !== image.id)) + timers.current.delete(timer) + }, 700) + timers.current.add(timer) + } + + return ( +
    +
    +
    + {data.eyebrow} + +
    +

    ({pad(data.items.length)})

    +
    + +
    +
    + Nº + Projekt + Ort + Kategorie + Jahr +
    + {data.items.map((item, i) => ( + + {number(i)} +

    + {item.title} +

    + {item.location} + {item.category} + {item.year} +
    + +
    +     + ))} +
    + +
    + + {trail.map((image) => ( + +
    + +
    +     + ))} +     +
    +
    + ) +} + +// ── 3D-Karussell ───────────────────────────────────────────────────────────── + +type Drag = { startX: number; startValue: number; lastX: number; lastTime: number; velocity: number } + +// Bilder auf einem Zylinder: dreht sich langsam von selbst, mit dem Scrollen und per Ziehen (mit Schwung). +// Breite und Radius rechnet CSS aus (--w, --n), damit es auf jeder Bildschirmgröße passt. +export function GalerieKarussell({ data }: BlockProps) { + const ref = useRef(null) + const images = data.images.filter((image) => image.src.trim()) + const count = Math.max(images.length, 1) + const step = 360 / count + const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "end start"] }) + const scrolled = useTransform(scrollYProgress, [0, 1], [0, -200]) + const drag = useMotionValue(0) + const spin = useMotionValue(0) + const rotation = useTransform(() => scrolled.get() + drag.get() + spin.get()) + const reduce = useReducedMotionConfig() + const visible = useInView(ref) + const dragging = useRef(null) + const [front, setFront] = useState(0) + + useAnimationFrame((_, delta) => { + if (reduce || !visible || dragging.current) return + spin.set(spin.get() - delta * 0.006) + }) + + useMotionValueEvent(rotation, "change", (value) => { + setFront((((Math.round(-value / step) % count) + count) % count)) + }) + + function onDown(event: PointerEvent) { + event.currentTarget.setPointerCapture(event.pointerId) + dragging.current = { startX: event.clientX, startValue: drag.get(), lastX: event.clientX, lastTime: event.timeStamp, velocity: 0 } + } + + function onMove(event: PointerEvent) { + const state = dragging.current + if (!state) return + state.velocity = (event.clientX - state.lastX) / Math.max(1, event.timeStamp - state.lastTime) + state.lastX = event.clientX + state.lastTime = event.timeStamp + drag.set(state.startValue + (event.clientX - state.startX) * 0.3) + } + + function onUp() { + const state = dragging.current + if (!state) return + dragging.current = null + // Schwung: bei schnellem Loslassen dreht es noch ein Stück weiter + animate(drag, drag.get() + state.velocity * 240, { duration: 1, ease: [0.16, 1, 0.3, 1] }) + } + + return ( +
    +
    +
    + {data.eyebrow} + +
    + {data.text.trim() &&

    {data.text}

    } +
    + +
    + {/* Leicht von oben betrachtet, damit der Ring als Ring lesbar ist */} +
    + + {images.map((image, i) => ( +
    +
    + +
    + {/* Rückseite: dasselbe Bild gedimmt – hinten entsteht so ein geschlossener Ring statt einer Lücke */} +
    + +
    +
    + ))} +     +
    +
    + +
    + + + {images[front]?.caption} + + +
    +
    + ) +} diff --git a/modules/templates/catalog/font-library.ts b/modules/templates/catalog/font-library.ts index 03f6df8..6df07dc 100644 --- a/modules/templates/catalog/font-library.ts +++ b/modules/templates/catalog/font-library.ts @@ -1,5 +1,8 @@ import type { FontPair } from "../lib/types" import { fonts as agentur } from "./agentur/fonts" +import { fonts as atelier } from "./atelier/fonts" +import { fonts as aurora } from "./aurora/fonts" +import { fonts as baukasten } from "./baukasten/fonts" import { fonts as beauty } from "./beauty/fonts" import { fonts as cafe } from "./cafe/fonts" import { fonts as coach } from "./coach/fonts" @@ -13,9 +16,11 @@ import { fonts as kampagne } from "./kampagne/fonts" import { fonts as kanzlei } from "./kanzlei/fonts" import { fonts as karriere } from "./karriere/fonts" import { fonts as linkinbio } from "./linkinbio/fonts" +import { fonts as monolith } from "./monolith/fonts" import { fonts as nutzfahrzeuge } from "./nutzfahrzeuge/fonts" import { fonts as pflege } from "./pflege/fonts" import { fonts as praxis } from "./praxis/fonts" +import { fonts as prisma } from "./prisma/fonts" import { fonts as restaurant } from "./restaurant/fonts" import { fonts as saas } from "./saas/fonts" import { fonts as shop } from "./shop/fonts" @@ -23,8 +28,8 @@ import { fonts as speisekarte } from "./speisekarte/fonts" import { fonts as verein } from "./verein/fonts" const library: Record> = { - agentur, beauty, cafe, coach, event, fitness, fotograf, handwerk, hotel, immobilien, kampagne, - kanzlei, karriere, linkinbio, nutzfahrzeuge, pflege, praxis, restaurant, saas, shop, speisekarte, verein, + agentur, atelier, aurora, baukasten, beauty, cafe, coach, event, fitness, fotograf, handwerk, hotel, immobilien, kampagne, + kanzlei, karriere, linkinbio, monolith, nutzfahrzeuge, pflege, praxis, prisma, restaurant, saas, shop, speisekarte, verein, } // Schriftpaar einer anderen Vorlage ("vorlage:schlüssel"); alle Schriften laden erst bei Verwendung (preload: false) diff --git a/modules/templates/catalog/monolith/definition.ts b/modules/templates/catalog/monolith/definition.ts new file mode 100644 index 0000000..8761691 --- /dev/null +++ b/modules/templates/catalog/monolith/definition.ts @@ -0,0 +1,132 @@ +import { unsplash } from "../../lib/content" +import { defineBuilder } from "../blocks/builder" + +export const monolith = defineBuilder({ + key: "monolith", + name: "Monolith", + industry: "Universell: Unternehmen & Marken", + description: "Dunkel und filmisch: ein Bildfenster öffnet sich zum Vollbild, Kapitel-Story mit wechselnden Bildern, aufziehende Paneele, Projekte im Querlauf und ein Schriftzug zum Schluss. Aus Bausteinen – frei änderbar.", + cover: unsplash("1506905925346-21bda4d32df4", 1200), + samples: { + inquiry: "Sehr geehrte Damen und Herren, wir planen die Neuentwicklung eines Bürogebäudes mit rund 12.000 m² in Frankfurt und suchen einen Partner für Entwicklung und Finanzierung. Wäre ein erstes Gespräch im kommenden Monat möglich? Mit freundlichen Grüßen, Dr. Martin Seidel", + topic: "Spatenstich für das Quartier Isarbogen", + }, + palettes: [ + { key: "onyx", label: "Onyx", dark: true, bg: "#0b0b0c", fg: "#ede9e1", muted: "#8b867d", surface: "#161617", accent: "#c8a96a" }, + { key: "graphit", label: "Graphit", dark: true, bg: "#111315", fg: "#e8ebee", muted: "#8a9198", surface: "#1a1d20", accent: "#8fb3d9" }, + { key: "kreide", label: "Kreide", bg: "#f1eee8", fg: "#141413", muted: "#6d6a63", surface: "#e5e0d6", accent: "#8a6a3c" }, + ], + fonts: [ + { key: "kino", label: "Noto Serif Display & Host Grotesk" }, + { key: "hubot", label: "Hubot Sans & Host Grotesk" }, + ], + brand: { + name: "Valmont", + tagline: "Unternehmensgruppe seit 1952", + email: "kontakt@valmont-gruppe.de", + phone: "+49 89 2154 880", + address: "Maximilianstraße 12, 80539 München", + logo: "", + }, + seed: [ + { type: "nav-leiste", data: { cta: "Kontakt", href: "#kontakt" } }, + { + type: "hero-kino", + data: { + eyebrow: "Unternehmensgruppe · seit 1952", + title: "Werte, die\n*bleiben.*", + text: "Wir entwickeln, finanzieren und betreiben Projekte, die Generationen überdauern – mit Weitblick, Präzision und Haltung.", + cta: "Unsere Projekte", + href: "#projekte", + image: unsplash("1506905925346-21bda4d32df4", 2400), + }, + }, + { + type: "statement", + data: { + eyebrow: "Haltung", + text: "Seit drei Generationen glauben wir an eine einfache Idee: Qualität ist kein Zufall. Sie entsteht, wenn Menschen mit Geduld und Leidenschaft an etwas arbeiten, das größer ist als sie selbst.", + author: "Katharina Valmont", + role: "Vorstand in dritter Generation", + }, + }, + { + type: "story-kapitel", + data: { + menu: "Geschichte", + eyebrow: "Geschichte", + title: "Drei Generationen.\nEine *Haltung.*", + items: [ + { year: "1952", title: "Der Anfang", text: "Friedrich Valmont gründet in München ein kleines Bauunternehmen – mit zwölf Mitarbeitern und dem Anspruch, nur zu bauen, was hundert Jahre hält.", image: unsplash("1517048676732-d65bc937f952", 1400) }, + { year: "1987", title: "Der Aufbruch", text: "Die zweite Generation öffnet das Haus für neue Felder: Immobilienentwicklung, erste Beteiligungen und Standorte in ganz Europa.", image: unsplash("1511818966892-d7d671e672a2", 1400) }, + { year: "2024", title: "Die Zukunft", text: "Heute verbinden wir Erfahrung mit Mut: Energie aus erneuerbaren Quellen, Quartiere für morgen und eine Stiftung für junge Talente.", image: unsplash("1451187580459-43490279c0fa", 1400) }, + ], + }, + }, + { + type: "leistungen-panels", + data: { + menu: "Bereiche", + eyebrow: "Geschäftsbereiche", + title: "Vier Felder.\nEin *Anspruch.*", + items: [ + { title: "Immobilien", text: "Wir entwickeln Wohn- und Geschäftshäuser in besten Lagen – vom Grundstück bis zur Schlüsselübergabe.", image: unsplash("1600585154340-be6161a56a0c", 1600) }, + { title: "Energie", text: "Solar- und Windparks mit 480 Megawatt Leistung versorgen heute über 200.000 Haushalte mit sauberem Strom.", image: unsplash("1470071459604-3b5ec3a7fe05", 1600) }, + { title: "Beteiligungen", text: "Wir investieren langfristig in mittelständische Unternehmen mit Substanz und Zukunft.", image: unsplash("1486406146926-c627a92ad1ab", 1600) }, + { title: "Stiftung", text: "Die Valmont-Stiftung fördert jedes Jahr über 120 junge Talente in Handwerk, Technik und Kunst.", image: unsplash("1522071820081-009f0129c71c", 1600) }, + ], + }, + }, + { + type: "projekte-querlauf", + data: { + menu: "Projekte", + eyebrow: "Ausgewählte Projekte", + title: "Gebaut für\n*Generationen*", + items: [ + { title: "Haus am See", category: "Wohnen", year: "2025", image: unsplash("1613490493576-7fde63acd811", 1600) }, + { title: "Turm 7", category: "Büro", year: "2024", image: unsplash("1431576901776-e539bd916ba2", 1600) }, + { title: "Quartier Isarbogen", category: "Quartier", year: "2023", image: unsplash("1497366811353-6870744d04b2", 1600) }, + { title: "Villa Serena", category: "Wohnen", year: "2022", image: unsplash("1512917774080-9991f1c4c750", 1600) }, + { title: "Campus Nord", category: "Bildung", year: "2021", image: unsplash("1487958449943-2429e8be8625", 1600) }, + ], + }, + }, + { + type: "zahlen", + data: { + items: [ + { value: "70", suffix: "+", label: "Jahre Erfahrung" }, + { value: "1.200", suffix: "", label: "Mitarbeitende" }, + { value: "14", suffix: "", label: "Standorte in Europa" }, + { value: "2,4", suffix: " Mrd. €", label: "Projektvolumen" }, + ], + }, + }, + { + type: "stimmen-zitat", + data: { + eyebrow: "Stimmen", + items: [ + { quote: "Valmont denkt in Jahrzehnten, nicht in Quartalen. Genau diese Haltung hat unser Projekt zu etwas Besonderem gemacht.", author: "Dr. Thomas Berger", role: "Geschäftsführer, Berger Holding" }, + { quote: "Ein Partner, der Wort hält – vom ersten Handschlag bis zur Übergabe. Termingerecht, transparent und mit beeindruckender Qualität.", author: "Sabine Krüger", role: "Vorständin, Krüger Logistik AG" }, + { quote: "Selten erlebt man so viel Sorgfalt im Detail und so viel Weitblick im Ganzen.", author: "Prof. Elena Hartwig", role: "Architektin" }, + ], + }, + }, + { + type: "kontakt-formular", + data: { + eyebrow: "Kontakt", + title: "Lassen Sie uns\n*sprechen.*", + text: "Ob Projektidee, Partnerschaft oder Presseanfrage – wir freuen uns auf das Gespräch.", + topics: "Projekt, Partnerschaft, Karriere, Presse", + success: "Vielen Dank. Wir melden uns innerhalb von zwei Werktagen.", + hours: "Mo–Fr, 9–18 Uhr", + }, + }, + { type: "footer-wortmarke", data: { text: "Werte, die bleiben – seit 1952.", cta: "Kontakt aufnehmen", href: "#kontakt" } }, + ], +}) + +export type MonolithData = typeof monolith.defaults diff --git a/modules/templates/catalog/monolith/fonts.ts b/modules/templates/catalog/monolith/fonts.ts new file mode 100644 index 0000000..11c205b --- /dev/null +++ b/modules/templates/catalog/monolith/fonts.ts @@ -0,0 +1,4 @@ +import type { FontPair } from "../../lib/types" +import { pairs } from "../blocks/fonts" + +export const fonts: Record = { kino: pairs.kino, hubot: pairs.hubot } diff --git a/modules/templates/catalog/monolith/template.tsx b/modules/templates/catalog/monolith/template.tsx new file mode 100644 index 0000000..24a3277 --- /dev/null +++ b/modules/templates/catalog/monolith/template.tsx @@ -0,0 +1,10 @@ +"use client" + +import type { TemplateProps } from "../../lib/types" +import { BlockPage } from "../blocks/page" +import { monolith, type MonolithData } from "./definition" +import { fonts } from "./fonts" + +export function MonolithTemplate({ content }: TemplateProps) { + return +} diff --git a/modules/templates/catalog/prisma/definition.ts b/modules/templates/catalog/prisma/definition.ts new file mode 100644 index 0000000..420e0db --- /dev/null +++ b/modules/templates/catalog/prisma/definition.ts @@ -0,0 +1,128 @@ +import { unsplash } from "../../lib/content" +import { defineBuilder } from "../blocks/builder" + +export const prisma = defineBuilder({ + key: "prisma", + name: "Prisma", + industry: "Universell: Studio & Portfolio", + description: "Kinetisch im Swiss-Stil: Schriftzug, der auf die Maus reagiert, Laufband mit Scroll-Tempo, Projekt-Index mit Bildspur, 3D-Karten und ein drehbares 3D-Karussell. Aus Bausteinen – frei änderbar.", + cover: unsplash("1487958449943-2429e8be8625", 1200), + samples: { + inquiry: "Hallo Forma-Team, wir haben ein Grundstück am Stadtrand von Köln gekauft und möchten ein Einfamilienhaus mit viel Licht und Holz bauen lassen. Übernehmen Sie auch die Bauleitung, und wie hoch sind Ihre Honorare ungefähr? Viele Grüße, Nina und Tim", + topic: "Wie Tageslicht Räume verändert – fünf Prinzipien aus unserer Praxis", + }, + palettes: [ + { key: "weiss", label: "Weiß", bg: "#f4f4f1", fg: "#0d0d0d", muted: "#6b6b68", surface: "#e7e7e2", accent: "#ff4d1a" }, + { key: "schwarz", label: "Schwarz", dark: true, bg: "#0a0a0a", fg: "#f2f2f0", muted: "#7c7c78", surface: "#161616", accent: "#d7ff3a" }, + { key: "blau", label: "Blau", bg: "#eceff7", fg: "#0b1030", muted: "#5b6280", surface: "#dde2f0", accent: "#2342ff" }, + ], + fonts: [ + { key: "mona", label: "Mona Sans (variabel)" }, + { key: "anybody", label: "Anybody & Host Grotesk" }, + ], + brand: { + name: "Forma", + tagline: "Büro für Architektur und Raum", + email: "studio@forma-architektur.de", + phone: "+49 221 9934 120", + address: "Ehrenstraße 42, 50672 Köln", + logo: "", + }, + seed: [ + { type: "nav-leiste", data: { cta: "Projekt anfragen", href: "#kontakt" } }, + { + type: "hero-kinetik", + data: { + eyebrow: "Architektur · Innenraum · Städtebau", + word: "FORMA", + text: "Wir gestalten Räume, die Menschen bewegen – präzise im Detail, mutig im Ganzen.", + cta: "Projekte", + href: "#projekte", + image: unsplash("1479839672679-a46483c0e7c8", 1600), + }, + }, + { type: "laufband", data: { text: "Raum · Licht · Form · Material ·", secondary: "Architektur für Menschen ·" } }, + { + type: "projekte-index", + data: { + eyebrow: "Index", + title: "Ausgewählte *Projekte*", + items: [ + { title: "Haus Weiß", location: "Köln", category: "Wohnen", year: "2026", image: unsplash("1487958449943-2429e8be8625", 800) }, + { title: "Pavillon Rhein", location: "Düsseldorf", category: "Kultur", year: "2025", image: unsplash("1518005020951-eccb494ad742", 800) }, + { title: "Atelierhaus 12", location: "Berlin", category: "Arbeiten", year: "2024", image: unsplash("1600047509807-ba8f99d2cdde", 800) }, + { title: "Villa Sol", location: "Mallorca", category: "Wohnen", year: "2023", image: unsplash("1512917774080-9991f1c4c750", 800) }, + { title: "Studio Lumen", location: "Hamburg", category: "Innenraum", year: "2022", image: unsplash("1517705008128-361805f42e86", 800) }, + { title: "Galerie Nord", location: "Aarhus", category: "Kultur", year: "2021", image: unsplash("1511818966892-d7d671e672a2", 800) }, + ], + }, + }, + { + type: "leistungen-karten", + data: { + eyebrow: "Leistungen", + title: "Was wir *tun.*", + items: [ + { title: "Architektur", text: "Neubau und Umbau – vom ersten Entwurf bis zur Schlüsselübergabe.", features: "Entwurf & Genehmigung\nAusführungsplanung\nBauleitung" }, + { title: "Innenarchitektur", text: "Räume, die sich nach Ihnen anfühlen.", features: "Raumkonzept & Licht\nMaterial & Möbel\nMaßanfertigungen" }, + { title: "Städtebau", text: "Quartiere, in denen man gerne lebt.", features: "Machbarkeitsstudien\nWettbewerbe\nBürgerbeteiligung" }, + { title: "Beratung", text: "Klarheit, bevor der erste Stein gesetzt ist.", features: "Grundstücksanalyse\nKosten & Termine\nNachhaltigkeit" }, + ], + }, + }, + { + type: "galerie-karussell", + data: { + eyebrow: "Galerie", + title: "Räume in *Bewegung.*", + images: [ + { src: unsplash("1487958449943-2429e8be8625", 900), caption: "Haus Weiß, Köln" }, + { src: unsplash("1518005020951-eccb494ad742", 900), caption: "Pavillon Rhein, Düsseldorf" }, + { src: unsplash("1479839672679-a46483c0e7c8", 900), caption: "Kubus, Köln" }, + { src: unsplash("1613490493576-7fde63acd811", 900), caption: "Haus am Wasser, Bonn" }, + { src: unsplash("1517705008128-361805f42e86", 900), caption: "Studio Lumen, Hamburg" }, + { src: unsplash("1512917774080-9991f1c4c750", 900), caption: "Villa Sol, Mallorca" }, + { src: unsplash("1592078615290-033ee584e267", 900), caption: "Stuhl S1, Eigenentwurf" }, + { src: unsplash("1581539250439-c96689b516dd", 900), caption: "Hocker H3, Eigenentwurf" }, + ], + }, + }, + { + type: "zahlen", + data: { + items: [ + { value: "48", suffix: "", label: "realisierte Projekte" }, + { value: "11", suffix: "", label: "Auszeichnungen" }, + { value: "16", suffix: "", label: "Menschen im Büro" }, + { value: "15", suffix: "", label: "Jahre Erfahrung" }, + ], + }, + }, + { + type: "team", + data: { + title: "Die *Köpfe.*", + text: "Architektinnen, Planer und Gestalterinnen mit einer gemeinsamen Haltung: Räume für Menschen.", + members: [ + { name: "Lea Hoffmann", role: "Gründerin & Architektin", image: unsplash("1534528741775-53994a69daeb", 700) }, + { name: "Jonas Richter", role: "Partner, Architekt", image: unsplash("1506794778202-cad84cf45f1d", 700) }, + { name: "Amara Diallo", role: "Innenarchitektin", image: unsplash("1531123897727-8f129e1688ce", 700) }, + { name: "Paul Schneider", role: "Städtebau", image: unsplash("1539571696357-5a69c17a67c6", 700) }, + ], + }, + }, + { + type: "kontakt-formular", + data: { + title: "Neues Projekt?\n*Erzählen* Sie.", + text: "Ob Neubau, Umbau oder Innenraum – wir freuen uns auf Ihr Vorhaben.", + topics: "Neubau, Umbau, Innenraum, Wettbewerb", + button: "Projekt anfragen", + success: "Danke! Wir melden uns innerhalb von zwei Werktagen.", + }, + }, + { type: "footer-schlicht", data: { city: "Köln", note: "Architektur für Menschen." } }, + ], +}) + +export type PrismaData = typeof prisma.defaults diff --git a/modules/templates/catalog/prisma/fonts.ts b/modules/templates/catalog/prisma/fonts.ts new file mode 100644 index 0000000..f1e8a5f --- /dev/null +++ b/modules/templates/catalog/prisma/fonts.ts @@ -0,0 +1,4 @@ +import type { FontPair } from "../../lib/types" +import { pairs } from "../blocks/fonts" + +export const fonts: Record = { mona: pairs.mona, anybody: pairs.anybody } diff --git a/modules/templates/catalog/prisma/template.tsx b/modules/templates/catalog/prisma/template.tsx new file mode 100644 index 0000000..f91549f --- /dev/null +++ b/modules/templates/catalog/prisma/template.tsx @@ -0,0 +1,10 @@ +"use client" + +import type { TemplateProps } from "../../lib/types" +import { BlockPage } from "../blocks/page" +import { prisma, type PrismaData } from "./definition" +import { fonts } from "./fonts" + +export function PrismaTemplate({ content }: TemplateProps) { + return +} diff --git a/modules/templates/catalog/shared/motion.tsx b/modules/templates/catalog/shared/motion.tsx index 0390bec..163626d 100644 --- a/modules/templates/catalog/shared/motion.tsx +++ b/modules/templates/catalog/shared/motion.tsx @@ -295,10 +295,12 @@ export function Accordion({ items, className, itemClassName, questionClassName, ) } -// Vertikales Scrollen schiebt eine Bildreihe horizontal durch (Sektion bleibt dabei stehen) -export function HorizontalScroll({ children, header, className, trackClassName }: { +// Vertikales Scrollen schiebt eine Bildreihe horizontal durch (Sektion bleibt dabei stehen). +// `footer` bekommt den Fortschritt (0–1), z. B. für eine Fortschrittsleiste unter der Reihe. +export function HorizontalScroll({ children, header, footer, className, trackClassName }: { children: ReactNode header?: ReactNode + footer?: (progress: MotionValue) => ReactNode className?: string trackClassName?: string }) { @@ -330,6 +332,7 @@ export function HorizontalScroll({ children, header, className, trackClassName } {children} + {footer?.(scrollYProgress)}
    ) diff --git a/modules/templates/export/project.ts b/modules/templates/export/project.ts index a71a111..919fedc 100644 --- a/modules/templates/export/project.ts +++ b/modules/templates/export/project.ts @@ -184,10 +184,12 @@ export async function buildProject(def: TemplateDefinition, content: TemplateCon ) const title = brandName(content) ?? def.name - const hero = content.data.hero - const description = hero && typeof hero.text === "string" ? plain(hero.text) : "" + // Baukasten-Seiten haben kein festes „hero“: dann der Text des ersten Start-Bausteins, sonst der Untertitel + const hero = content.data.hero ?? content.blocks.find((block) => !block.hidden && block.type.startsWith("hero-"))?.data + const heroText = hero && typeof hero.text === "string" ? hero.text : content.data.brand?.tagline + const description = typeof heroText === "string" ? plain(heroText) : "" const theme = themeColors(def, content) - const unsplash = JSON.stringify(content.data).includes("images.unsplash.com") + const unsplash = JSON.stringify([content.data, content.blocks]).includes("images.unsplash.com") // Ohne KI-Einstellungen: Chat & Co. brauchen das Portal-Backend const site = { palette: content.palette, @@ -197,6 +199,7 @@ export async function buildProject(def: TemplateDefinition, content: TemplateCon order: content.order, style: content.style, data: content.data, + ...(def.builder ? { blocks: content.blocks } : {}), } const project: Record = { @@ -355,6 +358,9 @@ export default config; "- `hidden` blendet optionale Sektionen aus, `order` legt ihre Reihenfolge fest.", "- `palette` und `fonts` wählen Farbpalette und Schriftpaar (siehe `definition.ts`), `colors` überschreibt einzelne Farben (`#rrggbb`).", "- `style.images` (original, mono, warm, soft, contrast) und `style.motion` (full, subtle) steuern Bildstil und Animationen.", + ...(def.builder + ? ["- `blocks` ist die Liste der Bausteine in Seitenreihenfolge (`type`, `hidden`, `data`); verfügbare Typen und Felder stehen in `site/catalog/blocks/definitions.ts`."] + : []), "", "## Aufbau", "", @@ -385,7 +391,7 @@ export default config; const zip: Zippable = {} for (const [file, source] of Object.entries(project)) zip[`${slug}/${file}`] = strToU8(source) - for (const image of new Set(localImages(content.data))) { + for (const image of new Set(localImages([content.data, content.blocks]))) { zip[`${slug}/public${IMAGE_PREFIX}${image}`] = [new Uint8Array(await readFile(path.join(IMAGE_DIR, image))), { level: 0 }] } diff --git a/modules/templates/lib/content.ts b/modules/templates/lib/content.ts index ae65fdb..b340157 100644 --- a/modules/templates/lib/content.ts +++ b/modules/templates/lib/content.ts @@ -1,9 +1,11 @@ -import type { AiSettings, ColorOverrides, FieldDef, ListFieldDef, ListItem, SectionData, SectionDef, TemplateContent, TemplateData, TemplateDefinition, TemplateStyle } from "./types" +import type { AiSettings, Block, BlockDefinition, ColorOverrides, FieldDef, ListFieldDef, ListItem, SectionData, SectionDef, TemplateContent, TemplateData, TemplateDefinition, TemplateStyle } from "./types" const MAX_TEXT = 4000 const MAX_ITEMS = 40 +const MAX_BLOCKS = 40 const HEX_COLOR = /^#[0-9a-f]{6}$/i const LIBRARY_KEY = /^[a-z0-9]+:[a-z0-9]+$/ +const BLOCK_ID = /^[a-z0-9-]{1,40}$/i export const IMAGE_STYLES: TemplateStyle["images"][] = ["original", "mono", "warm", "soft", "contrast"] function libraryKey(value: unknown, own: { key: string }[]) { @@ -51,6 +53,10 @@ const FIELD_LABELS: Record = { training: "Training", logo: "Logo (Bild-Link; leer = Name als Text)", link: "Externer Link (z. B. mobile.de)", linkLabel: "Text für den Link", values: "Werte (mit Komma trennen)", steps: "Schritte (mit Komma trennen)", + menu: "Menüpunkt (leer = nicht im Menü)", href: "Ziel des Buttons (#abschnitt, mailto:… oder https://…)", + hrefSecondary: "Ziel des zweiten Buttons", keywords: "Schlagworte (mit Komma trennen)", word: "Schriftzug (leer = Name)", + edition: "Kopfzeile", topics: "Themen zur Auswahl (mit Komma trennen)", secondary: "Zweite Zeile (leer = keine)", + ribbon: "Hervorhebung (z. B. Beliebt; leer = keine)", items: "Einträge", plans: "Tarife", members: "Personen", questions: "Fragen", milestones: "Meilensteine", facts: "Kennzahlen", } @@ -72,25 +78,36 @@ function describeField(key: string, sample: string): FieldDef { type SectionMeta = string | { label: string; optional?: boolean; items?: Record } +// Felder einer Sektion aus ihren Standardinhalten; `items` benennt die Einträge von Listen +function describeFields(section: SectionData, items?: Record): (FieldDef | ListFieldDef)[] { + return Object.entries(section).map(([fieldKey, value]): FieldDef | ListFieldDef => { + if (!Array.isArray(value)) return describeField(fieldKey, value) + const shape = value[0] ?? {} + return { + key: fieldKey, + label: FIELD_LABELS[fieldKey] ?? humanize(fieldKey), + type: "list", + itemLabel: items?.[fieldKey] ?? "Eintrag", + fields: Object.entries(shape).map(([itemKey, sample]) => describeField(itemKey, sample)), + } + }) +} + // Editor-Beschreibung aus den Standardinhalten ableiten; nur Sektionsnamen und Listen-Bezeichnungen sind nötig export function describeSections(defaults: D, meta: Record): SectionDef[] { return Object.entries(defaults).map(([key, section]) => { const info = typeof meta[key] === "string" ? { label: meta[key] as string } : (meta[key] as Exclude) - const fields = Object.entries(section).map(([fieldKey, value]): FieldDef | ListFieldDef => { - if (!Array.isArray(value)) return describeField(fieldKey, value) - const shape = value[0] ?? {} - return { - key: fieldKey, - label: FIELD_LABELS[fieldKey] ?? humanize(fieldKey), - type: "list", - itemLabel: info.items?.[fieldKey] ?? "Eintrag", - fields: Object.entries(shape).map(([itemKey, sample]) => describeField(itemKey, sample)), - } - }) - return { key, label: info.label, optional: info.optional, fields } + return { key, label: info.label, optional: info.optional, fields: describeFields(section, info.items) } }) } +// Baustein für den Baukasten; Felder werden wie bei describeSections aus den Standardinhalten abgeleitet. +// Listen brauchen mindestens einen Eintrag, er gibt die Felder neuer Einträge vor. +export function defineBlock(block: Omit, "fields"> & { items?: Record }) { + const { items, ...rest } = block + return { ...rest, fields: describeFields(block.defaults, items) } satisfies BlockDefinition +} + function isRecord(value: unknown): value is Record { return typeof value === "object" && value !== null && !Array.isArray(value) } @@ -121,6 +138,30 @@ function mergeSection(defaults: SectionData, input: unknown): SectionData { return result } +// Bausteine gegen die Bibliothek auflösen: unbekannte Typen fallen weg, Inhalte wie bei Sektionen. +// Ohne gespeicherte Liste (neue Variante) gilt die Startaufstellung der Vorlage. +function resolveBlocks(builder: NonNullable, raw: unknown): Block[] { + const library = new Map(builder.library.map((block) => [block.type, block])) + const source: unknown[] = Array.isArray(raw) ? raw : builder.seed.map((seed, i) => ({ id: `b${i + 1}`, ...seed })) + const used = new Set() + const blocks: Block[] = [] + + for (const item of source.slice(0, MAX_BLOCKS)) { + if (!isRecord(item)) continue + const block = typeof item.type === "string" ? library.get(item.type) : undefined + if (!block) continue + + let id = typeof item.id === "string" && BLOCK_ID.test(item.id) && !used.has(item.id) ? item.id : "" + for (let n = blocks.length + 1; !id; n++) { + if (!used.has(`b${n}`)) id = `b${n}` + } + used.add(id) + blocks.push({ id, type: block.type, hidden: item.hidden === true, data: mergeSection(block.defaults, item.data) }) + } + + return blocks +} + // Gespeicherte Inhalte immer gegen die aktuelle Vorlage auflösen: neue Felder bekommen ihren // Standardwert, entfernte oder fremde Felder fallen weg. So überstehen Varianten Änderungen an der Vorlage. export function resolveContent(def: TemplateDefinition, raw: unknown): TemplateContent { @@ -165,6 +206,7 @@ export function resolveContent(def: TemplateDefinition [key, mergeSection(section, data[key])]) ) as D, + blocks: def.builder ? resolveBlocks(def.builder, source.blocks) : [], } } diff --git a/modules/templates/lib/preview.ts b/modules/templates/lib/preview.ts index 1620bb6..31b992c 100644 --- a/modules/templates/lib/preview.ts +++ b/modules/templates/lib/preview.ts @@ -1,6 +1,8 @@ // Nachrichten zwischen Editor und Vorschau-iframe (gleiche Origin, siehe live-preview.tsx) export const PREVIEW_READY = "since3:preview-ready" export const PREVIEW_CONTENT = "since3:preview-content" +// Baukasten: Vorschau scrollt zum Baustein, der im Editor gerade bearbeitet wird +export const PREVIEW_FOCUS = "since3:preview-focus" export const DEVICES = { desktop: { label: "Desktop", width: 1440 }, diff --git a/modules/templates/lib/registry.ts b/modules/templates/lib/registry.ts index f8c3c57..c70999f 100644 --- a/modules/templates/lib/registry.ts +++ b/modules/templates/lib/registry.ts @@ -1,3 +1,6 @@ +import { atelier } from "../catalog/atelier/definition" +import { aurora } from "../catalog/aurora/definition" +import { baukasten } from "../catalog/baukasten/definition" import { beauty } from "../catalog/beauty/definition" import { coach } from "../catalog/coach/definition" import { event } from "../catalog/event/definition" @@ -19,11 +22,18 @@ import { shop } from "../catalog/shop/definition" import { agentur } from "../catalog/agentur/definition" import { verein } from "../catalog/verein/definition" import { linkinbio } from "../catalog/linkinbio/definition" +import { monolith } from "../catalog/monolith/definition" +import { prisma } from "../catalog/prisma/definition" import { speisekarte } from "../catalog/speisekarte/definition" import type { TemplateDefinition } from "./types" -// Reihenfolge = Reihenfolge im Admin +// Reihenfolge = Reihenfolge im Admin; Baukasten-Vorlagen (frei aus Bausteinen) zuerst export const templates: TemplateDefinition[] = [ + baukasten, + monolith, + aurora, + atelier, + prisma, restaurant, handwerk, beauty, diff --git a/modules/templates/lib/types.ts b/modules/templates/lib/types.ts index 7dfe250..cb5c7bd 100644 --- a/modules/templates/lib/types.ts +++ b/modules/templates/lib/types.ts @@ -43,6 +43,23 @@ export type ListItem = Record export type SectionData = Record export type TemplateData = Record +// Baustein des Baukastens: eine frei platzierbare Sektion mit eigenen Feldern (catalog/blocks) +export type BlockDefinition = { + type: string + label: string + category: string + description: string + // Inhalte beim Hinzufügen; legen zugleich die erlaubte Struktur fest + defaults: D + fields: (FieldDef | ListFieldDef)[] +} + +// Startaufstellung einer Baukasten-Vorlage; `data` überschreibt einzelne Standardinhalte des Bausteins +export type BlockSeed = { type: string; data?: SectionData } + +// Platzierter Baustein einer Variante +export type Block = { id: string; type: string; hidden: boolean; data: SectionData } + export type TemplateDefinition = { key: string name: string @@ -56,6 +73,8 @@ export type TemplateDefinition = { defaults: D // Vorbelegung der KI-Demos (Angebots-Assistent, Content-Generator) samples: { inquiry: string; topic: string } + // Baukasten: Seite besteht aus frei kombinierbaren Bausteinen statt aus festen Sektionen + builder?: { library: BlockDefinition[]; seed: BlockSeed[] } } // KI-Funktionen einer Variante; Wissen kommt aus den Inhalten plus `knowledge` @@ -87,6 +106,8 @@ export type TemplateContent = { style: TemplateStyle ai: AiSettings data: D + // Nur Baukasten-Vorlagen, sonst leer + blocks: Block[] } export type TemplateProps = { content: TemplateContent } diff --git a/modules/templates/ui/components/editor/blocks-panel.tsx b/modules/templates/ui/components/editor/blocks-panel.tsx new file mode 100644 index 0000000..bd9c00d --- /dev/null +++ b/modules/templates/ui/components/editor/blocks-panel.tsx @@ -0,0 +1,297 @@ +"use client" + +import Image from "next/image" +import { useState } from "react" +import { BlocksIcon, ChevronDownIcon, ChevronUpIcon, CopyIcon, EyeIcon, EyeOffIcon, PlusIcon, SearchIcon, Trash2Icon } from "lucide-react" +import { Button } from "@/components/ui/button" +import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible" +import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" +import { Input } from "@/components/ui/input" +import { cn } from "@/lib/utils" +import type { Block, BlockDefinition, ListItem } from "../../../lib/types" +import { FieldInput, ListEditor } from "./content-panel" + +// Gleiche Grenze wie resolveContent (lib/content.ts) +const MAX_BLOCKS = 40 + +const newId = () => crypto.randomUUID().slice(0, 8) + +// Woran man den Baustein in der Liste wiedererkennt: Überschrift, Schriftzug oder erster Text +function summary(block: Block) { + const value = [block.data.title, block.data.word, block.data.text, block.data.cta].find((entry) => typeof entry === "string" && entry.trim()) + return typeof value === "string" ? value.replace(/\*/g, "").replace(/\s+/g, " ").trim() : "" +} + +// Baukasten im Tab „Inhalte“: Bausteine hinzufügen, sortieren, ausblenden, duplizieren, entfernen und bearbeiten. +// Aufklappen meldet den Baustein an die Vorschau (onFocus), damit sie dorthin scrollt. +export function BlocksPanel({ library, blocks, onChange, onFocus }: { + library: BlockDefinition[] + blocks: Block[] + onChange: (blocks: Block[]) => void + onFocus: (id: string) => void +}) { + const [open, setOpen] = useState(null) + const [insertAt, setInsertAt] = useState(null) + const byType = new Map(library.map((block) => [block.type, block])) + const full = blocks.length >= MAX_BLOCKS + + function setField(id: string, field: string, value: string | ListItem[]) { + onChange(blocks.map((block) => (block.id === id ? { ...block, data: { ...block.data, [field]: value } } : block))) + } + + function move(index: number, offset: number) { + const next = [...blocks] + const [block] = next.splice(index, 1) + next.splice(index + offset, 0, block) + onChange(next) + onFocus(block.id) + } + + function insert(block: Block, at: number) { + onChange([...blocks.slice(0, at), block, ...blocks.slice(at)]) + setOpen(block.id) + onFocus(block.id) + } + + function add(type: string) { + const def = byType.get(type) + if (def && insertAt !== null) insert({ id: newId(), type, hidden: false, data: structuredClone(def.defaults) }, insertAt) + setInsertAt(null) + } + + function remove(block: Block) { + const label = byType.get(block.type)?.label ?? "Baustein" + if (window.confirm(`„${label}“ entfernen? Die Inhalte dieses Bausteins gehen verloren.`)) { + onChange(blocks.filter((entry) => entry.id !== block.id)) + } + } + + return ( +
    +
    +

    Bausteine

    + {blocks.length} auf der Seite +
    +

    Aufklappen zum Bearbeiten – die Vorschau springt mit. Zwischen zwei Bausteinen erscheint beim Darüberfahren ein Plus zum Einfügen.

    + +
    + {blocks.map((block, index) => { + const def = byType.get(block.type) + if (!def) return null + const hint = summary(block) + return ( +
    + setInsertAt(index)} /> + { + setOpen(next ? block.id : null) + if (next) onFocus(block.id) + }} + className={cn("rounded-lg border bg-card transition-opacity", block.hidden && "opacity-55")} + > +
    +
    + + +
    + + + + {def.label} + {def.category} + {block.hidden && ausgeblendet} + + {hint && {hint}} + + + + + + +
    + +
    + {def.fields.map((field) => + field.type === "list" ? ( + setField(block.id, field.key, items)} + /> + ) : ( + setField(block.id, field.key, value)} + /> + ) + )} +
    +     +     +
    + ) + })} +
    + + {blocks.length === 0 && ( +

    Noch leer – füge den ersten Baustein hinzu, zum Beispiel eine Navigation.

    + )} + + {full &&

    Maximal {MAX_BLOCKS} Bausteine pro Seite.

    } + + setInsertAt(null)} onPick={add} /> +
    + ) +} + +function InsertHere({ disabled, onClick }: { disabled: boolean; onClick: () => void }) { + return ( +
    + + +
    + ) +} + +// Vorschaubild je Baustein (public/pictures/blocks/.webp); fehlt es, erscheint ein Symbol +function BlockThumb({ type }: { type: string }) { + const [failed, setFailed] = useState(false) + + return ( + + {failed ? ( + + + + ) : ( + setFailed(true)} + className="object-cover object-top transition-transform duration-500 group-hover:scale-[1.03]" + /> + )} + + ) +} + +function BlockPicker({ library, open, onClose, onPick }: { + library: BlockDefinition[] + open: boolean + onClose: () => void + onPick: (type: string) => void +}) { + const [category, setCategory] = useState("Alle") + const [query, setQuery] = useState("") + const categories = ["Alle", ...new Set(library.map((block) => block.category))] + const term = query.trim().toLowerCase() + const visible = library.filter( + (block) => + (category === "Alle" || block.category === category) && + (!term || `${block.label} ${block.category} ${block.description}`.toLowerCase().includes(term)) + ) + + return ( + { + if (!next) onClose() + }} + > + + + Baustein hinzufügen + Jeder Baustein übernimmt Farben und Schriften der Seite und lässt sich mit allen anderen kombinieren. + +
    +
    + {categories.map((option) => ( + + ))} +
    + +
    +
    +
    + {visible.map((block) => ( + + ))} +
    + {visible.length === 0 &&

    Kein passender Baustein gefunden.

    } +
    +     +     + ) +} diff --git a/modules/templates/ui/components/editor/content-panel.tsx b/modules/templates/ui/components/editor/content-panel.tsx index 12f3437..4a69d29 100644 --- a/modules/templates/ui/components/editor/content-panel.tsx +++ b/modules/templates/ui/components/editor/content-panel.tsx @@ -20,7 +20,8 @@ export function ContentPanel({ def, data, hidden, onChange }: { return (
    {def.sections.map((section, index) => ( - + // Im Baukasten stehen die Bausteine im Vordergrund – „Marke & Kontakt“ startet zugeklappt + {section.label} @@ -57,7 +58,7 @@ export function ContentPanel({ def, data, hidden, onChange }: { ) } -function FieldInput({ field, value, onChange }: { field: FieldDef; value: string; onChange: (value: string) => void }) { +export function FieldInput({ field, value, onChange }: { field: FieldDef; value: string; onChange: (value: string) => void }) { const id = useId() return ( @@ -82,7 +83,7 @@ function FieldInput({ field, value, onChange }: { field: FieldDef; value: string ) } -function ListEditor({ field, items, onChange }: { field: ListFieldDef; items: ListItem[]; onChange: (items: ListItem[]) => void }) { +export function ListEditor({ field, items, onChange }: { field: ListFieldDef; items: ListItem[]; onChange: (items: ListItem[]) => void }) { function update(index: number, key: string, value: string) { onChange(items.map((item, i) => (i === index ? { ...item, [key]: value } : item))) } diff --git a/modules/templates/ui/components/editor/design-panel.tsx b/modules/templates/ui/components/editor/design-panel.tsx index 324c044..2db592b 100644 --- a/modules/templates/ui/components/editor/design-panel.tsx +++ b/modules/templates/ui/components/editor/design-panel.tsx @@ -190,33 +190,36 @@ export function DesignPanel({ def, content, onChange }: { def: TemplateDefinitio
    -
    - -
    - {optional.map((section, index) => ( -
    -
    - - + {/* Baukasten-Vorlagen haben keine optionalen Sektionen; Reihenfolge und Sichtbarkeit steuern dort die Bausteine (Tab „Inhalte“) */} + {optional.length > 0 && ( +
    + +
    + {optional.map((section, index) => ( +
    +
    + + +
    +
    + + onChange({ hidden: visible ? content.hidden.filter((key) => key !== section.key) : [...content.hidden, section.key] }) + } + > + {section.label} + +
    -
    - - onChange({ hidden: visible ? content.hidden.filter((key) => key !== section.key) : [...content.hidden, section.key] }) - } - > - {section.label} - -
    -
    - ))} -
    -
    + ))} +
    + + )}
    ) } diff --git a/modules/templates/ui/components/editor/preview-frame.tsx b/modules/templates/ui/components/editor/preview-frame.tsx index 6ea605d..b170074 100644 --- a/modules/templates/ui/components/editor/preview-frame.tsx +++ b/modules/templates/ui/components/editor/preview-frame.tsx @@ -3,14 +3,20 @@ import { useEffect, useEffectEvent, useRef, useState } from "react" import { MonitorIcon, SmartphoneIcon, TabletIcon } from "lucide-react" import { cn } from "@/lib/utils" -import { DEVICES, PREVIEW_CONTENT, PREVIEW_READY, type Device } from "../../../lib/preview" +import { DEVICES, PREVIEW_CONTENT, PREVIEW_FOCUS, PREVIEW_READY, type Device } from "../../../lib/preview" import type { TemplateContent } from "../../../lib/types" const icons = { desktop: MonitorIcon, tablet: TabletIcon, mobile: SmartphoneIcon } // Die Vorlage läuft in echter Gerätebreite im iframe (damit Media Queries greifen) und wird // passend herunterskaliert. Änderungen gehen per postMessage hinein, ohne Neuladen. -export function PreviewFrame({ templateKey, variantId, content }: { templateKey: string; variantId: string; content: TemplateContent }) { +// `focus` (Baukasten): Baustein, zu dem die Vorschau scrollen soll; `n` erlaubt erneutes Springen zum selben Baustein. +export function PreviewFrame({ templateKey, variantId, content, focus }: { + templateKey: string + variantId: string + content: TemplateContent + focus?: { id: string; n: number } | null +}) { const frameRef = useRef(null) const containerRef = useRef(null) const [size, setSize] = useState({ width: 0, height: 0 }) @@ -24,6 +30,15 @@ export function PreviewFrame({ templateKey, variantId, content }: { templateKey: post() }, [content]) + useEffect(() => { + if (!focus) return + // Kurz warten, damit ein gerade hinzugefügter Baustein in der Vorschau schon gerendert ist + const timer = setTimeout(() => { + frameRef.current?.contentWindow?.postMessage({ type: PREVIEW_FOCUS, id: focus.id }, window.location.origin) + }, 120) + return () => clearTimeout(timer) + }, [focus]) + useEffect(() => { function onMessage(event: MessageEvent) { if (event.origin === window.location.origin && event.source === frameRef.current?.contentWindow && event.data?.type === PREVIEW_READY) { diff --git a/modules/templates/ui/components/live-preview.tsx b/modules/templates/ui/components/live-preview.tsx index d792636..b8171cf 100644 --- a/modules/templates/ui/components/live-preview.tsx +++ b/modules/templates/ui/components/live-preview.tsx @@ -3,11 +3,25 @@ import { useEffect, useState } from "react" import type { AiAccess } from "../../ai/demos" import { resolveContent } from "../../lib/content" -import { PREVIEW_CONTENT, PREVIEW_READY } from "../../lib/preview" +import { PREVIEW_CONTENT, PREVIEW_FOCUS, PREVIEW_READY } from "../../lib/preview" import { getTemplate } from "../../lib/registry" import type { TemplateContent } from "../../lib/types" import { TemplateRenderer } from "./template-renderer" +// Baukasten: zum Baustein scrollen und ihn kurz umranden, damit man sieht, was man gerade bearbeitet +function focusBlock(id: string) { + const element = document.querySelector(`[data-block="${CSS.escape(id)}"]`) + if (!element) return + element.scrollIntoView({ behavior: "smooth", block: "start" }) + element.animate( + [ + { outline: "3px solid rgb(99 102 241 / 0.9)", outlineOffset: "-3px" }, + { outline: "3px solid rgb(99 102 241 / 0)", outlineOffset: "-3px" }, + ], + { duration: 1600, easing: "ease-out" } + ) +} + // Läuft im iframe des Editors und übernimmt ungespeicherte Änderungen per postMessage export function LivePreview({ templateKey, initialContent, access }: { templateKey: string @@ -21,8 +35,9 @@ export function LivePreview({ templateKey, initialContent, access }: { if (!def) return function onMessage(event: MessageEvent) { - if (event.origin !== window.location.origin || event.data?.type !== PREVIEW_CONTENT || !def) return - setContent(resolveContent(def, event.data.content)) + if (event.origin !== window.location.origin || !def) return + if (event.data?.type === PREVIEW_FOCUS && typeof event.data.id === "string") focusBlock(event.data.id) + if (event.data?.type === PREVIEW_CONTENT) setContent(resolveContent(def, event.data.content)) } window.addEventListener("message", onMessage) diff --git a/modules/templates/ui/components/template-grid.tsx b/modules/templates/ui/components/template-grid.tsx index 7ae27e9..a9631b3 100644 --- a/modules/templates/ui/components/template-grid.tsx +++ b/modules/templates/ui/components/template-grid.tsx @@ -2,23 +2,27 @@ import Image from "next/image" import { useState } from "react" -import { EyeIcon, SearchIcon } from "lucide-react" +import { BlocksIcon, EyeIcon, SearchIcon } from "lucide-react" import { buttonVariants } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { cn } from "@/lib/utils" import { templates } from "../../lib/registry" +import type { TemplateDefinition } from "../../lib/types" import { CreateVariantButton } from "./create-variant-button" -// Seiten-Typen für bestimmte Situationen, alles andere sind Branchen-Webseiten +// Seiten-Typen für bestimmte Situationen, Baukasten-Vorlagen sind frei aus Bausteinen, alles andere sind Branchen-Webseiten const PAGE_TYPES = new Set(["karriere", "kampagne", "event", "shop", "linkinbio", "speisekarte"]) -const GROUPS = ["Alle", "Branchen", "Seiten-Typen"] as const +const GROUPS = ["Alle", "Baukasten", "Branchen", "Seiten-Typen"] as const + +const groupOf = (template: TemplateDefinition): (typeof GROUPS)[number] => + template.builder ? "Baukasten" : PAGE_TYPES.has(template.key) ? "Seiten-Typen" : "Branchen" export function TemplateGrid() { const [query, setQuery] = useState("") const [group, setGroup] = useState<(typeof GROUPS)[number]>("Alle") const term = query.trim().toLowerCase() const visible = templates.filter((template) => { - const inGroup = group === "Alle" || (group === "Seiten-Typen") === PAGE_TYPES.has(template.key) + const inGroup = group === "Alle" || groupOf(template) === group const text = `${template.name} ${template.industry} ${template.description}`.toLowerCase() return inGroup && (!term || text.includes(term)) }) @@ -58,6 +62,11 @@ export function TemplateGrid() { />
    {template.industry} + {template.builder && ( + + Bausteine + + )}
    {template.palettes.map((palette) => ( const components: Record = { + baukasten: BaukastenTemplate as TemplateComponent, + monolith: MonolithTemplate as TemplateComponent, + aurora: AuroraTemplate as TemplateComponent, + atelier: AtelierTemplate as TemplateComponent, + prisma: PrismaTemplate as TemplateComponent, restaurant: RestaurantTemplate as TemplateComponent, handwerk: HandwerkTemplate as TemplateComponent, beauty: BeautyTemplate as TemplateComponent, diff --git a/modules/templates/ui/views/templates-view.tsx b/modules/templates/ui/views/templates-view.tsx index 94be721..a992f49 100644 --- a/modules/templates/ui/views/templates-view.tsx +++ b/modules/templates/ui/views/templates-view.tsx @@ -22,7 +22,7 @@ const TemplatesView = async () => {

    Vorlagen

    - Demo-Webseiten für Pitches: Vorlage wählen, für den Kunden anpassen (Inhalte, Farben, Schriften, Reihenfolge) und als Link teilen. + Demo-Webseiten für Pitches: Vorlage wählen oder im Baukasten aus Bausteinen selbst zusammenstellen, für den Kunden anpassen (Inhalte, Farben, Schriften, Reihenfolge) und als Link teilen.

    diff --git a/modules/templates/ui/views/variant-editor.tsx b/modules/templates/ui/views/variant-editor.tsx index ab982b1..287b1e1 100644 --- a/modules/templates/ui/views/variant-editor.tsx +++ b/modules/templates/ui/views/variant-editor.tsx @@ -10,6 +10,7 @@ import type { ShareState } from "../../lib/preview" import { getTemplate } from "../../lib/registry" import type { ListItem, TemplateContent } from "../../lib/types" import { AiPanel } from "../components/editor/ai-panel" +import { BlocksPanel } from "../components/editor/blocks-panel" import { ContentPanel } from "../components/editor/content-panel" import { DesignPanel } from "../components/editor/design-panel" import { PreviewFrame } from "../components/editor/preview-frame" @@ -46,6 +47,8 @@ export function VariantEditor({ variant, clients }: { variant: EditorVariant; cl const [content, setContent] = useState(variant.content) const [saved, setSaved] = useState(() => snapshot(variant.name, variant.clientId, variant.content)) const [tab, setTab] = useState("content") + // Baukasten: Baustein, zu dem die Vorschau springt (n zählt hoch, damit erneutes Aufklappen wieder springt) + const [focus, setFocus] = useState<{ id: string; n: number } | null>(null) const [error, setError] = useState(null) const [pending, startTransition] = useTransition() @@ -150,7 +153,17 @@ export function VariantEditor({ variant, clients }: { variant: EditorVariant; cl
    {tab === "content" && ( -
    - +
    ) diff --git a/package-lock.json b/package-lock.json index 097723e..86f7d02 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2642,7 +2642,7 @@ "version": "19.3.0", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.3.0.tgz", "integrity": "sha512-N0rFCuH9YoxG9/m61l9MfpJKfmLOVU0em7ipIz6TRgSSkvReLB9vL85GB+yr8Bs5leqpvg96JSwF4ZS1s4viQg==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "csstype": "^3.2.2" @@ -4271,7 +4271,7 @@ "version": "3.2.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/damerau-levenshtein": { @@ -10008,7 +10008,7 @@ "version": "5.9.3", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", - "devOptional": true, + "dev": true, "license": "Apache-2.0", "bin": { "tsc": "bin/tsc",