92 lines
4.0 KiB
TypeScript
92 lines
4.0 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { FormState } from '../types';
|
|
import { Globe, Minus, Plus, Info } from 'lucide-react';
|
|
import { motion } from 'framer-motion';
|
|
|
|
interface LanguageStepProps {
|
|
state: FormState;
|
|
updateState: (updates: Partial<FormState>) => void;
|
|
}
|
|
|
|
export function LanguageStep({ state, updateState }: LanguageStepProps) {
|
|
const basePriceExplanation = "Jede zusätzliche Sprache erhöht den Gesamtaufwand für Design, Entwicklung und Qualitätssicherung um ca. 20%. Dies deckt die technische Implementierung der Übersetzungsschicht sowie die Anpassung von Layouts für unterschiedliche Textlängen ab.";
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<div className="p-8 bg-white border border-slate-100 rounded-[2rem] space-y-6">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 bg-slate-50 rounded-2xl flex items-center justify-center text-slate-900">
|
|
<Globe size={24} />
|
|
</div>
|
|
<div>
|
|
<h4 className="text-xl font-bold text-slate-900">Mehrsprachigkeit</h4>
|
|
<p className="text-sm text-slate-500">In wie vielen Sprachen soll Ihre Website verfügbar sein?</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-8 py-4">
|
|
<button
|
|
type="button"
|
|
onClick={() => updateState({ languagesCount: Math.max(1, state.languagesCount - 1) })}
|
|
className="w-16 h-16 rounded-full bg-slate-50 border border-slate-100 flex items-center justify-center hover:border-slate-900 transition-colors focus:outline-none"
|
|
>
|
|
<Minus size={24} />
|
|
</button>
|
|
<div className="flex flex-col items-center">
|
|
<span className="text-5xl font-bold text-slate-900">{state.languagesCount}</span>
|
|
<span className="text-xs font-bold uppercase tracking-widest text-slate-400 mt-2">
|
|
{state.languagesCount === 1 ? 'Sprache' : 'Sprachen'}
|
|
</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => updateState({ languagesCount: state.languagesCount + 1 })}
|
|
className="w-16 h-16 rounded-full bg-slate-50 border border-slate-100 flex items-center justify-center hover:border-slate-900 transition-colors focus:outline-none"
|
|
>
|
|
<Plus size={24} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="p-8 bg-slate-900 text-white rounded-[2rem] space-y-4"
|
|
>
|
|
<div className="flex items-center gap-3 text-slate-400">
|
|
<Info size={18} />
|
|
<span className="text-xs font-bold uppercase tracking-widest">Warum dieser Faktor?</span>
|
|
</div>
|
|
<p className="text-sm leading-relaxed text-slate-300">
|
|
{basePriceExplanation}
|
|
</p>
|
|
{state.languagesCount > 1 && (
|
|
<div className="pt-4 border-t border-white/10">
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm font-medium">Aktueller Aufschlagsfaktor:</span>
|
|
<span className="text-xl font-bold text-white">+{((state.languagesCount - 1) * 20)}%</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="p-6 bg-white border border-slate-100 rounded-2xl">
|
|
<h5 className="font-bold text-slate-900 mb-2">Technische Basis</h5>
|
|
<p className="text-xs text-slate-500 leading-relaxed">
|
|
Wir nutzen moderne i18n-Frameworks, die SEO-optimierte URLs für jede Sprache generieren (z.B. /en, /fr).
|
|
</p>
|
|
</div>
|
|
<div className="p-6 bg-white border border-slate-100 rounded-2xl">
|
|
<h5 className="font-bold text-slate-900 mb-2">Content Management</h5>
|
|
<p className="text-xs text-slate-500 leading-relaxed">
|
|
Falls ein CMS gewählt wurde, können Sie alle Übersetzungen bequem selbst pflegen.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|