diff --git a/src/components/configurator/StepServices.tsx b/src/components/configurator/StepServices.tsx index f741913..e99a423 100644 --- a/src/components/configurator/StepServices.tsx +++ b/src/components/configurator/StepServices.tsx @@ -15,31 +15,28 @@ import type { StepProps } from './WizardContainer'; interface ServiceOption { id: string; icon: React.ElementType; - title: string; - description: string; + titleKey: string; + descriptionKey: string; } const SERVICES: ServiceOption[] = [ { id: 'web', icon: Globe, - title: 'Web Design & Development', - description: - 'Bespoke websites and web applications built from scratch — pixel-perfect design, blazing performance, and clean code.', + titleKey: 'services.web.title', + descriptionKey: 'services.web.description', }, { id: 'systems', icon: Cog, - title: 'Custom Systems', - description: - 'Purpose-built CRMs, internal tools, and business platforms crafted to match exactly how your team works.', + titleKey: 'services.systems.title', + descriptionKey: 'services.systems.description', }, { id: 'infrastructure', icon: Server, - title: 'Digital Infrastructure', - description: - 'Private cloud hosting, data sovereignty, DevOps pipelines, and security hardening — your stack, fully owned.', + titleKey: 'services.infrastructure.title', + descriptionKey: 'services.infrastructure.description', }, ]; @@ -78,9 +75,11 @@ interface ServiceCardProps { option: ServiceOption; selected: boolean; onToggle: () => void; + title: string; + description: string; } -function ServiceCard({ option, selected, onToggle }: ServiceCardProps) { +function ServiceCard({ option, selected, onToggle, title, description }: ServiceCardProps) { const Icon = option.icon; return ( @@ -117,9 +116,9 @@ function ServiceCard({ option, selected, onToggle }: ServiceCardProps) { selected ? 'text-primary-dark' : 'text-on-surface', )} > - {option.title} + {title}
-{option.description}
+{description}
{/* Checkbox */} @@ -160,9 +159,11 @@ function ServiceCard({ option, selected, onToggle }: ServiceCardProps) { interface AIToggleProps { enabled: boolean; onToggle: () => void; + label: string; + description: string; } -function AIToggle({ enabled, onToggle }: AIToggleProps) { +function AIToggle({ enabled, onToggle, label, description }: AIToggleProps) { return ( - Enhance with AI + {label}- We layer intelligent automation into every system we build. + {description}
{/* Switch */} @@ -269,6 +270,8 @@ export default function StepServices({ formData, setFormData, onNext }: StepProp option={option} selected={formData.services.includes(option.id)} onToggle={() => toggleService(option.id)} + title={t(option.titleKey)} + description={t(option.descriptionKey)} /> ))} {/* Empty-state hint */} @@ -281,7 +284,7 @@ export default function StepServices({ formData, setFormData, onNext }: StepProp transition={{ duration: 0.2 }} className="text-xs text-outline/60 text-center pt-1 pb-0.5 select-none" > - Select at least one service to continue + {t('selectService')} )} @@ -289,7 +292,12 @@ export default function StepServices({ formData, setFormData, onNext }: StepProp {/* AI Toggle */}- How it works + {t('howItWorks')}
{/* Vertical accent line + steps */}No commitment required
+{t('noCommitment')}
Founded on the Côte d’Azur
+{t('philosophy.foundedLocation')}
- {project.description} + {t(`work.projects.${project.i18nKey}.description`)}
{/* CTA */} = { 'port-amador': 'amador', }; -function SmallCard({ project, readLabel }: { project: Project; readLabel: string }) { +function SmallCard({ project, readLabel, t }: { project: Project; readLabel: string; t: (key: string) => string }) { const cardVariant = SLUG_TO_VARIANT[project.slug] ?? 'nimara'; + const tags = Array.from({ length: project.tagCount }, (_, i) => + t(`work.projects.${project.i18nKey}.tags.${i}`), + ); return (- {project.description} + {t(`work.projects.${project.i18nKey}.description`)}
{/* CTA */} @@ -504,9 +509,8 @@ function SmallCard({ project, readLabel }: { project: Project; readLabel: string // ─── Coming Soon Card ───────────────────────────────────────────────────────── -function ComingSoonCard({ item }: { item: ComingSoonItem }) { - const isConfidential = item.subtitle === 'Coming Soon'; - const Icon = isConfidential ? Lock : Clock; +function ComingSoonCard({ item, t }: { item: ComingSoonItem; t: (key: string) => string }) { + const Icon = item.confidential ? Lock : Clock; return (- {item.title} + {t(`work.comingSoonProjects.${item.i18nKey}.title`)} +
++ {t(`work.comingSoonProjects.${item.i18nKey}.subtitle`)}
-{item.subtitle}