mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: stabilize apps/web (lint, build, typecheck fixes)
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 6s
Details
Build & Deploy / 🧪 QA (push) Failing after 1m27s
Details
Build & Deploy / 🏗️ Build (push) Failing after 1m31s
Details
Build & Deploy / 🚀 Deploy (push) Has been skipped
Details
Build & Deploy / 🩺 Health Check (push) Has been skipped
Details
Build & Deploy / 🔔 Notify (push) Successful in 2s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-11 11:56:13 +01:00
parent 8ba81809b0
commit ecea90dc91
50 changed files with 5596 additions and 3456 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
apps/web/src/components/ContactForm/steps/TimelineStep.tsx
View File

@@ -1,22 +1,26 @@
'use client';
"use client";
import * as React from 'react';
import { FormState } from '../types';
import { AlertCircle } from 'lucide-react';
import * as React from "react";
import { FormState } from "../types";
import { AlertCircle } from "lucide-react";
interface TimelineStepProps {
state: FormState;
updateState: (updates: Partial<FormState>) => void;
updateState: (_updates: Partial<FormState>) => void;
}
export function TimelineStep({ state, updateState }: TimelineStepProps) {
const isMissingAssets = !state.assets.includes('logo') || !state.assets.includes('content_concept');
const isMissingPages = state.selectedPages.length === 0 && state.otherPages.length === 0 && state.otherPagesCount === 0;
const isMissingAssets =
!state.assets.includes("logo") || !state.assets.includes("content_concept");
const isMissingPages =
state.selectedPages.length === 0 &&
state.otherPages.length === 0 &&
state.otherPagesCount === 0;
const toggleDontKnow = (id: string) => {
const current = state.dontKnows || [];
if (current.includes(id)) {
updateState({ dontKnows: current.filter(i => i !== id) });
updateState({ dontKnows: current.filter((i) => i !== id) });
} else {
updateState({ dontKnows: [...current, id] });
}
@@ -29,9 +33,11 @@ export function TimelineStep({ state, updateState }: TimelineStepProps) {
<h4 className="text-2xl font-bold text-slate-900">Zeitplan</h4>
<button
type="button"
onClick={() => toggleDontKnow('timeline')}
onClick={() => toggleDontKnow("timeline")}
className={`px-4 py-2 rounded-full text-sm font-bold transition-all whitespace-nowrap shrink-0 ${
state.dontKnows?.includes('timeline') ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-500 hover:bg-slate-200'
state.dontKnows?.includes("timeline")
? "bg-slate-900 text-white"
: "bg-slate-100 text-slate-500 hover:bg-slate-200"
}`}
>
Ich weiß es nicht
@@ -39,30 +45,58 @@ export function TimelineStep({ state, updateState }: TimelineStepProps) {
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{[
{ id: 'asap', label: 'So schnell wie möglich', desc: 'Priorisierter Start gewünscht.' },
{ id: '2-3-months', label: 'In 2-3 Monaten', desc: 'Normaler Projektvorlauf.' },
{ id: '3-6-months', label: 'In 3-6 Monaten', desc: 'Langfristige Planung.' },
{ id: 'flexible', label: 'Flexibel', desc: 'Kein fester Termindruck.' },
].map(opt => (
{
id: "asap",
label: "So schnell wie möglich",
desc: "Priorisierter Start gewünscht.",
},
{
id: "2-3-months",
label: "In 2-3 Monaten",
desc: "Normaler Projektvorlauf.",
},
{
id: "3-6-months",
label: "In 3-6 Monaten",
desc: "Langfristige Planung.",
},
{
id: "flexible",
label: "Flexibel",
desc: "Kein fester Termindruck.",
},
].map((opt) => (
<button
key={opt.id}
type="button"
onClick={() => updateState({ deadline: opt.id })}
className={`p-10 rounded-[2.5rem] border-2 text-left transition-all focus:outline-none overflow-hidden relative ${
state.deadline === opt.id ? 'border-slate-900 bg-slate-900 text-white' : 'border-slate-100 bg-white hover:border-slate-200'
state.deadline === opt.id
? "border-slate-900 bg-slate-900 text-white"
: "border-slate-100 bg-white hover:border-slate-200"
}`}
>
<h4 className={`text-2xl font-bold mb-2 ${state.deadline === opt.id ? 'text-white' : 'text-slate-900'}`}>{opt.label}</h4>
<p className={`text-lg ${state.deadline === opt.id ? 'text-slate-200' : 'text-slate-500'}`}>{opt.desc}</p>
<h4
className={`text-2xl font-bold mb-2 ${state.deadline === opt.id ? "text-white" : "text-slate-900"}`}
>
{opt.label}
</h4>
<p
className={`text-lg ${state.deadline === opt.id ? "text-slate-200" : "text-slate-500"}`}
>
{opt.desc}
</p>
</button>
))}
</div>
</div>
{state.deadline === 'asap' && (
{state.deadline === "asap" && (
<div className="p-8 bg-slate-50 rounded-[2rem] border border-slate-100 flex gap-6 items-start">
<AlertCircle className="text-slate-900 shrink-0 mt-1" size={28} />
<p className="text-base text-slate-600 leading-relaxed">
<strong>Hinweis:</strong> Bei sehr kurzfristigen Deadlines kann ein Express-Zuschlag anfallen, um die Kapazitäten entsprechend zu priorisieren.
<strong>Hinweis:</strong> Bei sehr kurzfristigen Deadlines kann ein
Express-Zuschlag anfallen, um die Kapazitäten entsprechend zu
priorisieren.
</p>
</div>
)}
@@ -73,9 +107,15 @@ export function TimelineStep({ state, updateState }: TimelineStepProps) {
<AlertCircle size={24} />
</div>
<div className="space-y-2">
<p className="text-amber-900 text-xl font-bold">Mögliche Verzögerungen</p>
<p className="text-amber-900 text-xl font-bold">
Mögliche Verzögerungen
</p>
<p className="text-amber-800 text-base leading-relaxed">
Für einen reibungslosen Projektstart benötigen wir noch einige Details (z.B. {isMissingAssets ? 'Logo/Inhaltskonzept' : ''} {isMissingAssets && isMissingPages ? 'und' : ''} {isMissingPages ? 'Seitenstruktur' : ''}). Ohne diese kann sich der Beginn verzögern.
Für einen reibungslosen Projektstart benötigen wir noch einige
Details (z.B. {isMissingAssets ? "Logo/Inhaltskonzept" : ""}{" "}
{isMissingAssets && isMissingPages ? "und" : ""}{" "}
{isMissingPages ? "Seitenstruktur" : ""}). Ohne diese kann sich
der Beginn verzögern.
</p>
</div>
</div>