+ Sie benötigen höhere Berechtigungen, um auf diese Ressource
+ zuzugreifen. Wenden Sie sich an Ihren Administrator, wenn Sie
+ glauben, dass Sie Zugriff haben sollten.
+
+
+
+
+
+ {/* User Information */}
+ {user && (
+
+
+ Aktuelle Sitzung
+
+
+
+ Benutzer: {user.firstName} {user.lastName}
+
+
+ E-Mail: {user.email}
+
+ {user.roles && user.roles.length > 0 && (
+
+ Rollen: {user.roles.join(', ')}
+
+ )}
+
+
+ )}
+
+ {/* Action Buttons */}
+
+
+
+
+
+
+
+
+
+
+ {/* Help Information */}
+
+
+ Benötigen Sie Hilfe? Kontaktieren Sie Ihren Systemadministrator oder
+ wenden Sie sich an den Support.
+
+ Ihr Gerät wurde erfolgreich verifiziert. Sie werden weitergeleitet...
+
+
+
+ );
+ }
+
+ return (
+
+
+ {/* Header */}
+
+
+
+
+
+ Gerät verifizieren
+
+
+ Aus Sicherheitsgründen müssen wir Ihr Gerät verifizieren
+
+
+
+ {/* Security Notice */}
+
+
+
+
+
+ Unbekanntes Gerät erkannt
+
+
+ Wir haben eine Anmeldung von einem neuen Gerät festgestellt.
+ Bitte verifizieren Sie Ihre Identität mit dem Code, den wir an
+ Ihre E-Mail-Adresse gesendet haben.
+
+
+
+
+
+ {/* Verification Form */}
+
+
+
+
+ {/* Help Text */}
+
+
+ Haben Sie keinen Code erhalten? Überprüfen Sie Ihren Spam-Ordner oder
+ fordern Sie einen neuen Code an.
+
+
+
+ );
+}
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
new file mode 100644
index 0000000..4d8dbfd
--- /dev/null
+++ b/src/app/login/page.tsx
@@ -0,0 +1,111 @@
+/**
+ * Login Page - Professional Authentication
+ * Professional Resume Builder - Enhanced with modern authentication standards
+ *
+ * @author David Valera Melendez
+ * @created 2025-08-07
+ * @location Made in Germany 🇩🇪
+ */
+
+'use client';
+
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import LoginForm from '@/components/auth/LoginForm';
+
+/**
+ * Login credentials interface
+ */
+interface LoginCredentials {
+ email: string;
+ password: string;
+ rememberMe: boolean;
+}
+
+/**
+ * LoginPage Component - Professional Authentication Page
+ *
+ * Complete login page with David Valera Melendez branding and German localization.
+ * Integrates with the professional resume builder application with modern
+ * authentication patterns and user experience.
+ *
+ * Key Features:
+ * - Professional German branding
+ * - David Valera Melendez logo and identity
+ * - Modern authentication flow
+ * - Responsive design
+ * - Integration with Next.js routing
+ * - Professional color scheme
+ *
+ * @returns Complete login page with authentication functionality
+ */
+export default function LoginPage() {
+ const router = useRouter();
+
+ /**
+ * Handles successful login
+ *
+ * @param credentials - User login credentials
+ */
+ const handleLogin = async (credentials: LoginCredentials) => {
+ try {
+ // Here you would typically make an API call to authenticate
+ console.log('Login attempted with:', credentials);
+
+ // For now, simulate successful login and redirect
+ // In a real application, you would:
+ // 1. Send credentials to your authentication API
+ // 2. Store the authentication token
+ // 3. Update user context/state
+ // 4. Redirect to the main application
+
+ // Simulate API delay
+ await new Promise(resolve => setTimeout(resolve, 1000));
+
+ // Redirect to main application
+ router.push('/');
+ } catch (error) {
+ console.error('Login failed:', error);
+ // Handle login error (show error message, etc.)
+ }
+ };
+
+ /**
+ * Handles forgot password action
+ */
+ const handleForgotPassword = () => {
+ // Here you would typically navigate to a forgot password page
+ // or show a forgot password modal
+ console.log('Forgot password clicked');
+
+ // For now, you could redirect to a forgot password page
+ // router.push('/auth/forgot-password');
+
+ // Or show an alert (temporary solution)
+ alert('Funktion "Passwort vergessen" wird in Kürze verfügbar sein.');
+ };
+
+ /**
+ * Handles sign up action
+ */
+ const handleSignUp = () => {
+ // Here you would typically navigate to a registration page
+ console.log('Sign up clicked');
+
+ // For now, you could redirect to a sign up page
+ // router.push('/auth/signup');
+
+ // Or show an alert (temporary solution)
+ alert('Registrierung wird in Kürze verfügbar sein.');
+ };
+
+ return (
+
+
+
+ );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..ae45fb9
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,352 @@
+/**
+ * Home Page Component
+ * Professional Resume Builder
+ *
+ * @author David Valera Melendez
+ * @created 2025-08-07
+ * @location Made in Germany 🇩🇪
+ */
+
+'use client';
+
+import { useState, useEffect } from 'react';
+import HorizontalStepper, {
+ Step,
+} from '@/components/navigation/HorizontalStepper';
+import StepContentRenderer from '@/components/resume/StepContentRenderer';
+import ResumePreview from '@/components/resume/ResumePreview';
+import { ResumeData } from '@/types/resume';
+
+// Import organized data from centralized data folder
+import { emptyResumeTemplate } from '@/data/resumeTemplates';
+import { stepDescriptions } from '@/data/uiConstants';
+
+/**
+ * Initial resume data using centralized empty template
+ */
+const initialResumeData: ResumeData = emptyResumeTemplate;
+
+/**
+ * Step configuration for the resume builder process
+ * Defines the sequence and metadata for each step in the resume creation workflow
+ */
+const resumeSteps: Step[] = [
+ {
+ id: 'contact',
+ title: 'Contact',
+ description: stepDescriptions.contact,
+ icon: '👤',
+ completed: false,
+ },
+ {
+ id: 'experience',
+ title: 'Experience',
+ description: stepDescriptions.experience,
+ icon: '💼',
+ completed: false,
+ },
+ {
+ id: 'education',
+ title: 'Education',
+ description: stepDescriptions.education,
+ icon: '🎓',
+ completed: false,
+ },
+ {
+ id: 'skills',
+ title: 'Skills',
+ description: stepDescriptions.skills,
+ icon: '⚡',
+ completed: false,
+ },
+ {
+ id: 'about',
+ title: 'About',
+ description: stepDescriptions.about,
+ icon: '📝',
+ completed: false,
+ },
+ {
+ id: 'finish',
+ title: 'Finish',
+ description: '',
+ icon: '✨',
+ completed: false,
+ },
+];
+
+/**
+ * HomePage Component - Main Resume Builder Application
+ *
+ * Professional resume builder with split-screen layout featuring a step-by-step form
+ * interface and real-time preview. Implements modern CV format with comprehensive
+ * data validation and progress tracking.
+ *
+ * Features:
+ * - Multi-step form wizard with progress tracking
+ * - Real-time resume preview with professional styling
+ * - Modern CV format compliance
+ * - Auto-completion validation
+ * - Responsive design with mobile support
+ * - PDF export capability
+ *
+ * @returns Complete resume builder application interface
+ */
+export default function HomePage() {
+ const [resumeData, setResumeData] = useState(initialResumeData);
+ const [currentStep, setCurrentStep] = useState('contact');
+ const [steps, setSteps] = useState(resumeSteps);
+
+ /**
+ * Updates resume data with partial data changes
+ * Merges new data with existing resume data while maintaining immutability
+ *
+ * @param updatedData - Partial resume data to merge with current data
+ */
+ const handleDataUpdate = (updatedData: Partial) => {
+ setResumeData(prev => ({ ...prev, ...updatedData }));
+ };
+
+ /**
+ * Handles step navigation when user clicks on a specific step
+ *
+ * @param stepId - The ID of the step to navigate to
+ */
+ const handleStepChange = (stepId: string) => {
+ setCurrentStep(stepId);
+ };
+
+ /**
+ * Navigates to the next step in the resume builder process
+ * Marks current step as completed and advances to next step
+ */
+ const handleNext = () => {
+ const currentIndex = steps.findIndex(step => step.id === currentStep);
+ if (currentIndex < steps.length - 1) {
+ // Mark current step as completed
+ setSteps(prev =>
+ prev.map(step =>
+ step.id === currentStep ? { ...step, completed: true } : step
+ )
+ );
+ setCurrentStep(steps[currentIndex + 1].id);
+ }
+ };
+
+ /**
+ * Navigates to the previous step in the resume builder process
+ */
+ const handlePrevious = () => {
+ const currentIndex = steps.findIndex(step => step.id === currentStep);
+ if (currentIndex > 0) {
+ setCurrentStep(steps[currentIndex - 1].id);
+ }
+ };
+
+ /**
+ * Determines if the current step is the first step
+ */
+ const isFirstStep = steps.findIndex(step => step.id === currentStep) === 0;
+
+ /**
+ * Determines if the current step is the last step
+ */
+ const isLastStep =
+ steps.findIndex(step => step.id === currentStep) === steps.length - 1;
+
+ /**
+ * Auto-completion effect - Updates step completion status based on resume data
+ * Monitors resume data changes and automatically marks steps as completed
+ * when required data is present
+ */
+ useEffect(() => {
+ setSteps(prev =>
+ prev.map(step => {
+ switch (step.id) {
+ case 'contact':
+ return {
+ ...step,
+ completed: !!(
+ resumeData.personalInfo.firstName &&
+ resumeData.personalInfo.lastName &&
+ resumeData.personalInfo.email
+ ),
+ };
+ case 'experience':
+ return { ...step, completed: resumeData.experience.length > 0 };
+ case 'education':
+ return { ...step, completed: resumeData.education.length > 0 };
+ case 'skills':
+ return { ...step, completed: resumeData.skills.length > 0 };
+ case 'about':
+ return {
+ ...step,
+ completed: !!(
+ resumeData.personalInfo.summary &&
+ resumeData.personalInfo.summary.length > 10
+ ),
+ };
+ default:
+ return step;
+ }
+ })
+ );
+ }, [resumeData]);
+
+ return (
+
+ {/* Main Content Area - Enhanced Professional Layout */}
+
+ {/* Left Panel - Entire Panel Scrolls Together */}
+
+ Konzentrieren Sie sich auf Fähigkeiten, die für Ihre Zielposition relevant sind.
+ Fügen Sie sowohl technische als auch soziale Kompetenzen hinzu. Seien Sie ehrlich
+ bezüglich Ihrer Kenntnisse - Arbeitgeber schätzen Genauigkeit.
+