feat: initialize reactjs project using vite
This commit is contained in:
115
src/i18n/de.ts
Normal file
115
src/i18n/de.ts
Normal file
@@ -0,0 +1,115 @@
|
||||
export const de = {
|
||||
// Navigation
|
||||
nav: {
|
||||
home: 'Startseite',
|
||||
about: 'Über uns',
|
||||
contact: 'Kontakt',
|
||||
},
|
||||
|
||||
// Hero Section
|
||||
hero: {
|
||||
greeting: 'Willkommen bei',
|
||||
company: 'Ragusa IT-Consulting',
|
||||
tagline: 'Ihr Partner für',
|
||||
rotatingWords: ['Webentwicklung', 'IT-Support', 'Digitale Lösungen', 'Tech-Beratung'],
|
||||
cta: 'Projekt starten',
|
||||
ctaSecondary: 'Mehr erfahren',
|
||||
},
|
||||
|
||||
// Services
|
||||
services: {
|
||||
title: 'Unsere Leistungen',
|
||||
subtitle: 'Professionelle IT-Lösungen für Ihr Unternehmen',
|
||||
items: [
|
||||
{
|
||||
title: 'Webentwicklung',
|
||||
description: 'Moderne, responsive Websites und Web-Applikationen mit React, TypeScript und aktuellen Technologien.',
|
||||
icon: 'code',
|
||||
},
|
||||
{
|
||||
title: 'Tech-Support',
|
||||
description: 'Schnelle und zuverlässige technische Unterstützung für Hardware und Software vor Ort.',
|
||||
icon: 'support',
|
||||
},
|
||||
{
|
||||
title: 'IT-Beratung',
|
||||
description: 'Strategische Beratung für Ihre IT-Infrastruktur und digitale Transformation.',
|
||||
icon: 'consulting',
|
||||
},
|
||||
{
|
||||
title: 'Hosting & Wartung',
|
||||
description: 'Zuverlässiges Webhosting, regelmäßige Updates und proaktive Wartung Ihrer Systeme.',
|
||||
icon: 'hosting',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
// About
|
||||
about: {
|
||||
title: 'Über uns',
|
||||
subtitle: 'Ihr lokaler IT-Partner',
|
||||
intro: 'Ragusa IT-Consulting bietet professionelle IT-Dienstleistungen mit persönlichem Service. Wir kombinieren technische Expertise mit einem tiefen Verständnis für die Bedürfnisse unserer Kunden.',
|
||||
experience: 'Mit jahrelanger Erfahrung in der Webentwicklung und IT-Beratung unterstützen wir Unternehmen und Privatpersonen dabei, ihre technischen Herausforderungen zu meistern.',
|
||||
skills: {
|
||||
title: 'Technologien',
|
||||
subtitle: 'Moderne Tools für moderne Lösungen',
|
||||
},
|
||||
values: {
|
||||
title: 'Warum Ragusa IT?',
|
||||
items: [
|
||||
{
|
||||
title: 'Persönlicher Service',
|
||||
description: 'Direkter Ansprechpartner für alle Ihre IT-Anliegen.',
|
||||
},
|
||||
{
|
||||
title: 'Lokale Präsenz',
|
||||
description: 'Vor-Ort-Support und persönliche Beratungsgespräche.',
|
||||
},
|
||||
{
|
||||
title: 'Faire Preise',
|
||||
description: 'Transparente Preisgestaltung ohne versteckte Kosten.',
|
||||
},
|
||||
{
|
||||
title: 'Schnelle Reaktion',
|
||||
description: 'Kurze Reaktionszeiten bei Anfragen und Problemen.',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
// Contact
|
||||
contact: {
|
||||
title: 'Kontakt',
|
||||
subtitle: 'Lassen Sie uns zusammenarbeiten',
|
||||
intro: 'Haben Sie ein Projekt im Sinn oder benötigen Sie technische Unterstützung? Ich freue mich auf Ihre Nachricht!',
|
||||
form: {
|
||||
name: 'Name',
|
||||
namePlaceholder: 'Ihr Name',
|
||||
email: 'E-Mail',
|
||||
emailPlaceholder: 'ihre@email.de',
|
||||
subject: 'Betreff',
|
||||
subjectPlaceholder: 'Worum geht es?',
|
||||
message: 'Nachricht',
|
||||
messagePlaceholder: 'Ihre Nachricht...',
|
||||
submit: 'Nachricht senden',
|
||||
sending: 'Wird gesendet...',
|
||||
success: 'Nachricht erfolgreich gesendet! Ich melde mich bald bei Ihnen.',
|
||||
error: 'Fehler beim Senden. Bitte versuchen Sie es erneut oder kontaktieren Sie mich direkt.',
|
||||
},
|
||||
info: {
|
||||
title: 'Kontaktdaten',
|
||||
email: 'E-Mail',
|
||||
location: 'Standort',
|
||||
github: 'GitHub',
|
||||
},
|
||||
},
|
||||
|
||||
// Footer
|
||||
footer: {
|
||||
copyright: '© {year} Ragusa IT-Consulting. Alle Rechte vorbehalten.',
|
||||
madeWith: 'Entwickelt mit',
|
||||
and: 'und',
|
||||
},
|
||||
};
|
||||
|
||||
export type Translations = typeof de;
|
||||
115
src/i18n/en.ts
Normal file
115
src/i18n/en.ts
Normal file
@@ -0,0 +1,115 @@
|
||||
import type { Translations } from './de';
|
||||
|
||||
export const en: Translations = {
|
||||
// Navigation
|
||||
nav: {
|
||||
home: 'Home',
|
||||
about: 'About',
|
||||
contact: 'Contact',
|
||||
},
|
||||
|
||||
// Hero Section
|
||||
hero: {
|
||||
greeting: 'Welcome to',
|
||||
company: 'Ragusa IT-Consulting',
|
||||
tagline: 'Your partner for',
|
||||
rotatingWords: ['Web Development', 'IT Support', 'Digital Solutions', 'Tech Consulting'],
|
||||
cta: 'Start Project',
|
||||
ctaSecondary: 'Learn More',
|
||||
},
|
||||
|
||||
// Services
|
||||
services: {
|
||||
title: 'Our Services',
|
||||
subtitle: 'Professional IT solutions for your business',
|
||||
items: [
|
||||
{
|
||||
title: 'Web Development',
|
||||
description: 'Modern, responsive websites and web applications built with React, TypeScript, and cutting-edge technologies.',
|
||||
icon: 'code',
|
||||
},
|
||||
{
|
||||
title: 'Tech Support',
|
||||
description: 'Fast and reliable technical support for hardware and software, available on-site.',
|
||||
icon: 'support',
|
||||
},
|
||||
{
|
||||
title: 'IT Consulting',
|
||||
description: 'Strategic consulting for your IT infrastructure and digital transformation.',
|
||||
icon: 'consulting',
|
||||
},
|
||||
{
|
||||
title: 'Hosting & Maintenance',
|
||||
description: 'Reliable web hosting, regular updates, and proactive maintenance of your systems.',
|
||||
icon: 'hosting',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
// About
|
||||
about: {
|
||||
title: 'About Us',
|
||||
subtitle: 'Your local IT partner',
|
||||
intro: 'Ragusa IT-Consulting provides professional IT services with a personal touch. We combine technical expertise with a deep understanding of our clients\' needs.',
|
||||
experience: 'With years of experience in web development and IT consulting, we help businesses and individuals overcome their technical challenges.',
|
||||
skills: {
|
||||
title: 'Technologies',
|
||||
subtitle: 'Modern tools for modern solutions',
|
||||
},
|
||||
values: {
|
||||
title: 'Why Ragusa IT?',
|
||||
items: [
|
||||
{
|
||||
title: 'Personal Service',
|
||||
description: 'Direct point of contact for all your IT needs.',
|
||||
},
|
||||
{
|
||||
title: 'Local Presence',
|
||||
description: 'On-site support and in-person consultations.',
|
||||
},
|
||||
{
|
||||
title: 'Fair Pricing',
|
||||
description: 'Transparent pricing with no hidden costs.',
|
||||
},
|
||||
{
|
||||
title: 'Quick Response',
|
||||
description: 'Short response times for inquiries and issues.',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
// Contact
|
||||
contact: {
|
||||
title: 'Contact',
|
||||
subtitle: 'Let\'s work together',
|
||||
intro: 'Have a project in mind or need technical support? I look forward to hearing from you!',
|
||||
form: {
|
||||
name: 'Name',
|
||||
namePlaceholder: 'Your name',
|
||||
email: 'Email',
|
||||
emailPlaceholder: 'your@email.com',
|
||||
subject: 'Subject',
|
||||
subjectPlaceholder: 'What is it about?',
|
||||
message: 'Message',
|
||||
messagePlaceholder: 'Your message...',
|
||||
submit: 'Send Message',
|
||||
sending: 'Sending...',
|
||||
success: 'Message sent successfully! I\'ll get back to you soon.',
|
||||
error: 'Error sending message. Please try again or contact me directly.',
|
||||
},
|
||||
info: {
|
||||
title: 'Contact Info',
|
||||
email: 'Email',
|
||||
location: 'Location',
|
||||
github: 'GitHub',
|
||||
},
|
||||
},
|
||||
|
||||
// Footer
|
||||
footer: {
|
||||
copyright: '© {year} Ragusa IT-Consulting. All rights reserved.',
|
||||
madeWith: 'Built with',
|
||||
and: 'and',
|
||||
},
|
||||
};
|
||||
71
src/i18n/index.tsx
Normal file
71
src/i18n/index.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import { createContext, useContext, useState, useEffect, type ReactNode } from 'react';
|
||||
import { de, type Translations } from './de';
|
||||
import { en } from './en';
|
||||
|
||||
type Language = 'de' | 'en';
|
||||
|
||||
interface LanguageContextType {
|
||||
language: Language;
|
||||
setLanguage: (lang: Language) => void;
|
||||
t: Translations;
|
||||
}
|
||||
|
||||
const translations: Record<Language, Translations> = { de, en };
|
||||
|
||||
const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
|
||||
|
||||
const STORAGE_KEY = 'ragusa-it-lang';
|
||||
|
||||
function getInitialLanguage(): Language {
|
||||
if (typeof window === 'undefined') return 'de';
|
||||
|
||||
const stored = localStorage.getItem(STORAGE_KEY);
|
||||
if (stored === 'de' || stored === 'en') return stored;
|
||||
|
||||
const browserLang = navigator.language.split('-')[0];
|
||||
return browserLang === 'en' ? 'en' : 'de';
|
||||
}
|
||||
|
||||
export function LanguageProvider({ children }: { children: ReactNode }) {
|
||||
const [language, setLanguageState] = useState<Language>('de');
|
||||
const [isInitialized, setIsInitialized] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setLanguageState(getInitialLanguage());
|
||||
setIsInitialized(true);
|
||||
}, []);
|
||||
|
||||
const setLanguage = (lang: Language) => {
|
||||
setLanguageState(lang);
|
||||
localStorage.setItem(STORAGE_KEY, lang);
|
||||
document.documentElement.lang = lang;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isInitialized) {
|
||||
document.documentElement.lang = language;
|
||||
}
|
||||
}, [language, isInitialized]);
|
||||
|
||||
const value: LanguageContextType = {
|
||||
language,
|
||||
setLanguage,
|
||||
t: translations[language],
|
||||
};
|
||||
|
||||
return (
|
||||
<LanguageContext.Provider value={value}>
|
||||
{children}
|
||||
</LanguageContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useTranslation() {
|
||||
const context = useContext(LanguageContext);
|
||||
if (!context) {
|
||||
throw new Error('useTranslation must be used within a LanguageProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
export type { Language, Translations };
|
||||
Reference in New Issue
Block a user