feat: Implementierung des Checkout-Logins mit E-Mail/Username-Support

resources/js/pages/marketing/checkout/steps/PackageStep.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo, useState } from "react";
+import { useTranslation } from 'react-i18next';
 import { Check, Package as PackageIcon, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -77,6 +78,7 @@ function PackageOption({ pkg, isActive, onSelect }: { pkg: CheckoutPackage; isAc
 }
 
 export const PackageStep: React.FC = () => {
+  const { t } = useTranslation('marketing');
   const { selectedPackage, packageOptions, setSelectedPackage, resetPaymentState, nextStep } = useCheckoutWizard();
   const [isLoading, setIsLoading] = useState(false);
 
@@ -85,7 +87,7 @@ export const PackageStep: React.FC = () => {
   if (!selectedPackage) {
     return (
       <div className="text-center py-8">
-        <p className="text-muted-foreground">Kein Paket ausgewählt. Bitte wähle ein Paket aus der Paketübersicht.</p>
+        <p className="text-muted-foreground">{t('checkout.package_step.no_package_selected')}</p>
       </div>
     );
   }
@@ -129,17 +131,17 @@ export const PackageStep: React.FC = () => {
             {isLoading ? (
               <>
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                Wird geladen...
+                {t('checkout.package_step.loading')}
               </>
             ) : (
-              "Weiter zum Konto"
+              t('checkout.package_step.next_to_account')
             )}
           </Button>
         </div>
       </div>
       <aside className="space-y-4">
         <h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
-          Alternative Pakete
+          {t('checkout.package_step.alternatives_title')}
         </h3>
         <div className="space-y-3">
           {comparablePackages.map((pkg) => (
@@ -152,7 +154,7 @@ export const PackageStep: React.FC = () => {
           ))}
           {comparablePackages.length === 0 && (
             <p className="text-xs text-muted-foreground">
-              Keine weiteren Pakete in dieser Kategorie verfuegbar.
+              {t('checkout.package_step.no_alternatives')}
             </p>
           )}
         </div>