form

2026-01-30 10:35:31 +01:00
parent ba08724a52
commit cea56ac58d
60 changed files with 1922 additions and 1305 deletions
--- a/src/components/ContactForm/constants.tsx
+++ b/src/components/ContactForm/constants.tsx
@@ -0,0 +1,154 @@
+import * as React from 'react';
+import { FormState } from './types';
+
+export const PRICING = {
+  BASE_WEBSITE: 6000,
+  PAGE: 800,
+  FEATURE: 2000,
+  FUNCTION: 1000,
+  COMPLEX_INTERACTION: 1500,
+  NEW_DATASET: 400,
+  HOSTING_MONTHLY: 120,
+  STORAGE_EXPANSION_MONTHLY: 10,
+  CMS_SETUP: 1500,
+  CMS_CONNECTION_PER_FEATURE: 800,
+  API_INTEGRATION: 1000,
+  APP_HOURLY: 120,
+};
+
+export const initialState: FormState = {
+  projectType: 'website',
+  selectedPages: ['Home'],
+  otherPages: [],
+  features: [],
+  otherFeatures: [],
+  functions: [],
+  otherFunctions: [],
+  apiSystems: [],
+  otherTech: [],
+  assets: [],
+  otherAssets: [],
+  complexInteractions: 0,
+  newDatasets: 0,
+  cmsSetup: false,
+  storageExpansion: 0,
+  name: '',
+  email: '',
+  role: '',
+  message: '',
+  sitemapFile: null,
+  contactFiles: [],
+  designVibe: 'minimal',
+  colorScheme: ['#ffffff', '#f8fafc', '#0f172a'],
+  references: [],
+  designWishes: '',
+  expectedAdjustments: 'low',
+  languagesCount: 1,
+  deadline: 'flexible',
+};
+
+export const PAGE_SAMPLES = [
+  { id: 'Home', label: 'Startseite', desc: 'Der erste Eindruck Ihrer Marke.' },
+  { id: 'About', label: 'Über uns', desc: 'Ihre Geschichte und Ihr Team.' },
+  { id: 'Services', label: 'Leistungen', desc: 'Übersicht Ihres Angebots.' },
+  { id: 'Contact', label: 'Kontakt', desc: 'Anlaufstelle für Ihre Kunden.' },
+  { id: 'Landing', label: 'Landingpage', desc: 'Optimiert für Marketing-Kampagnen.' },
+  { id: 'Legal', label: 'Rechtliches', desc: 'Impressum & Datenschutz.' },
+];
+
+export const FEATURE_OPTIONS = [
+  { id: 'blog_news', label: 'Blog / News', desc: 'Ein Bereich für aktuelle Beiträge und Neuigkeiten.' },
+  { id: 'products', label: 'Produktbereich', desc: 'Katalog Ihrer Leistungen oder Produkte.' },
+  { id: 'jobs', label: 'Karriere / Jobs', desc: 'Stellenanzeigen und Bewerbungsoptionen.' },
+  { id: 'refs', label: 'Referenzen / Cases', desc: 'Präsentation Ihrer Projekte.' },
+  { id: 'events', label: 'Events / Termine', desc: 'Veranstaltungskalender.' },
+];
+
+export const FUNCTION_OPTIONS = [
+  { id: 'search', label: 'Suche', desc: 'Volltextsuche über alle Inhalte.' },
+  { id: 'filter', label: 'Filter-Systeme', desc: 'Kategorisierung und Sortierung.' },
+  { id: 'pdf', label: 'PDF-Export', desc: 'Automatisierte PDF-Erstellung.' },
+  { id: 'forms', label: 'Erweiterte Formulare', desc: 'Komplexe Abfragen & Logik.' },
+];
+
+export const API_OPTIONS = [
+  { id: 'crm', label: 'CRM System', desc: 'HubSpot, Salesforce, Pipedrive etc.' },
+  { id: 'erp', label: 'ERP / Warenwirtschaft', desc: 'SAP, Microsoft Dynamics, Xentral etc.' },
+  { id: 'stripe', label: 'Stripe / Payment', desc: 'Zahlungsabwicklung und Abonnements.' },
+  { id: 'newsletter', label: 'Newsletter / Marketing', desc: 'Mailchimp, Brevo, ActiveCampaign etc.' },
+  { id: 'ecommerce', label: 'E-Commerce / Shop', desc: 'Shopify, WooCommerce, Shopware Sync.' },
+  { id: 'hr', label: 'HR / Recruiting', desc: 'Personio, Workday, Recruitee etc.' },
+  { id: 'realestate', label: 'Immobilien', desc: 'OpenImmo, FlowFact, Immowelt Sync.' },
+  { id: 'calendar', label: 'Termine / Booking', desc: 'Calendly, Shore, Doctolib etc.' },
+  { id: 'social', label: 'Social Media Sync', desc: 'Automatisierte Posts oder Feeds.' },
+];
+
+export const ASSET_OPTIONS = [
+  { id: 'logo', label: 'Logo', desc: 'Vektordatei Ihres Logos.' },
+  { id: 'styleguide', label: 'Styleguide', desc: 'Farben, Schriften, Design-Vorgaben.' },
+  { id: 'content_concept', label: 'Inhalts-Konzept', desc: 'Struktur und Texte sind bereits geplant.' },
+  { id: 'media', label: 'Bild/Video-Material', desc: 'Professionelles Bildmaterial vorhanden.' },
+  { id: 'icons', label: 'Icons', desc: 'Eigene Icon-Sets vorhanden.' },
+  { id: 'illustrations', label: 'Illustrationen', desc: 'Eigene Illustrationen vorhanden.' },
+  { id: 'fonts', label: 'Fonts', desc: 'Lizenzen für Hausschriften vorhanden.' },
+];
+
+export const DESIGN_VIBES = [
+  { 
+    id: 'minimal', 
+    label: 'Minimalistisch', 
+    desc: 'Viel Weißraum, klare Typografie.', 
+    illustration: (
+      <svg viewBox="0 0 100 60" className="w-full h-full opacity-40">
+        <rect x="10" y="10" width="80" height="2" rx="1" className="fill-current" />
+        <rect x="10" y="20" width="50" height="2" rx="1" className="fill-current" />
+        <rect x="10" y="40" width="30" height="10" rx="1" className="fill-current" />
+      </svg>
+    )
+  },
+  { 
+    id: 'bold', 
+    label: 'Mutig & Laut', 
+    desc: 'Starke Kontraste, große Schriften.', 
+    illustration: (
+      <svg viewBox="0 0 100 60" className="w-full h-full opacity-40">
+        <rect x="10" y="10" width="80" height="15" rx="2" className="fill-current" />
+        <rect x="10" y="35" width="80" height="15" rx="2" className="fill-current" />
+      </svg>
+    )
+  },
+  { 
+    id: 'nature', 
+    label: 'Natürlich', 
+    desc: 'Sanfte Erdtöne, organische Formen.', 
+    illustration: (
+      <svg viewBox="0 0 100 60" className="w-full h-full opacity-40">
+        <circle cx="30" cy="30" r="20" className="fill-current" />
+        <circle cx="70" cy="30" r="15" className="fill-current" />
+      </svg>
+    )
+  },
+  { 
+    id: 'tech', 
+    label: 'Technisch', 
+    desc: 'Präzise Linien, dunkle Akzente.', 
+    illustration: (
+      <svg viewBox="0 0 100 60" className="w-full h-full opacity-40">
+        <path d="M10 10 L90 10 L90 50 L10 50 Z" fill="none" stroke="currentColor" strokeWidth="2" />
+        <path d="M10 30 L90 30" stroke="currentColor" strokeWidth="1" strokeDasharray="4 2" />
+        <path d="M50 10 L50 50" stroke="currentColor" strokeWidth="1" strokeDasharray="4 2" />
+      </svg>
+    )
+  },
+];
+
+export const HARMONIOUS_PALETTES = [
+  ['#ffffff', '#f8fafc', '#0f172a'],
+  ['#000000', '#facc15', '#ffffff'],
+  ['#fdfcfb', '#e2e8f0', '#1e293b'],
+  ['#0f172a', '#38bdf8', '#ffffff'],
+  ['#fafaf9', '#78716c', '#1c1917'],
+  ['#f0fdf4', '#16a34a', '#064e3b'],
+  ['#fff7ed', '#ea580c', '#7c2d12'],
+  ['#f5f3ff', '#7c3aed', '#2e1065'],
+];