chore: overhaul infrastructure and integrate @mintel packages

- Restructure to pnpm monorepo (site moved to apps/web) - Integrate @mintel/tsconfig, @mintel/eslint-config, @mintel/husky-config - Implement Docker service architecture (Varnish, Directus, Gatekeeper) - Setup environment-aware Gitea Actions deployment
2026-02-05 14:18:51 +01:00
parent 190720ad92
commit 103d71851c
1029 changed files with 13242 additions and 27898 deletions
--- a/apps/web/src/components/ContactForm/steps/TimelineStep.tsx
+++ b/apps/web/src/components/ContactForm/steps/TimelineStep.tsx
@@ -0,0 +1,85 @@
+'use client';
+
+import * as React from 'react';
+import { FormState } from '../types';
+import { AlertCircle } from 'lucide-react';
+
+interface TimelineStepProps {
+  state: FormState;
+  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 toggleDontKnow = (id: string) => {
+    const current = state.dontKnows || [];
+    if (current.includes(id)) {
+      updateState({ dontKnows: current.filter(i => i !== id) });
+    } else {
+      updateState({ dontKnows: [...current, id] });
+    }
+  };
+
+  return (
+    <div className="space-y-12">
+      <div className="space-y-6">
+        <div className="flex justify-between items-center">
+          <h4 className="text-2xl font-bold text-slate-900">Zeitplan</h4>
+          <button
+            type="button"
+            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'
+            }`}
+          >
+            Ich weiß es nicht
+          </button>
+        </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 => (
+            <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'
+              }`}
+            >
+              <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' && (
+        <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.
+          </p>
+        </div>
+      )}
+
+      {(isMissingAssets || isMissingPages) && (
+        <div className="p-8 bg-amber-50 rounded-[2rem] border border-amber-100 flex gap-6 items-start">
+          <div className="w-12 h-12 bg-white rounded-xl flex items-center justify-center text-amber-600 shrink-0">
+            <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-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.
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}