change role to "user" for new registrations, fixed some registration form errors and implemented a reg-test
This commit is contained in:
Codex Agent
@@ -1,4 +1,5 @@
|
||||
import { useForm, router } from '@inertiajs/react';
|
||||
import { FormEvent, useEffect, useState } from 'react';
|
||||
import { Head, useForm } from '@inertiajs/react';
|
||||
import InputError from '@/components/input-error';
|
||||
import TextLink from '@/components/text-link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -8,7 +9,6 @@ import { Label } from '@/components/ui/label';
|
||||
import AuthLayout from '@/layouts/auth-layout';
|
||||
import { register } from '@/routes';
|
||||
import { request } from '@/routes/password';
|
||||
import { Head } from '@inertiajs/react';
|
||||
import { LoaderCircle } from 'lucide-react';
|
||||
|
||||
interface LoginProps {
|
||||
@@ -17,36 +17,45 @@ interface LoginProps {
|
||||
}
|
||||
|
||||
export default function Login({ status, canResetPassword }: LoginProps) {
|
||||
const { data, setData, post, processing, errors } = useForm({
|
||||
const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
|
||||
|
||||
const { data, setData, post, processing, errors, clearErrors } = useForm({
|
||||
email: '',
|
||||
password: '',
|
||||
remember: false,
|
||||
});
|
||||
|
||||
const submit = (e: React.FormEvent) => {
|
||||
const submit = (e: FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setHasTriedSubmit(true);
|
||||
post('/login', {
|
||||
preserveState: true,
|
||||
onSuccess: () => {
|
||||
console.log('Login successful');
|
||||
},
|
||||
onError: (errors: Record<string, string>) => {
|
||||
console.log('Login errors:', errors);
|
||||
},
|
||||
preserveScroll: true,
|
||||
});
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
if (Object.keys(errors).length > 0) {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
useEffect(() => {
|
||||
if (!hasTriedSubmit) {
|
||||
return;
|
||||
}
|
||||
}, [errors]);
|
||||
|
||||
const errorKeys = Object.keys(errors);
|
||||
if (errorKeys.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const field = document.querySelector<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>(`[name="${errorKeys[0]}"]`);
|
||||
|
||||
if (field) {
|
||||
field.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
field.focus();
|
||||
}
|
||||
}, [errors, hasTriedSubmit]);
|
||||
|
||||
return (
|
||||
<AuthLayout title="Log in to your account" description="Enter your email and password below to log in">
|
||||
<Head title="Log in" />
|
||||
|
||||
<form key={`login-form-${Object.keys(errors).length}`} onSubmit={submit} className="flex flex-col gap-6">
|
||||
<form onSubmit={submit} className="flex flex-col gap-6">
|
||||
<div className="grid gap-6">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="email">Email address</Label>
|
||||
@@ -60,7 +69,12 @@ export default function Login({ status, canResetPassword }: LoginProps) {
|
||||
autoComplete="email"
|
||||
placeholder="email@example.com"
|
||||
value={data.email}
|
||||
onChange={(e) => setData('email', e.target.value)}
|
||||
onChange={(e) => {
|
||||
setData('email', e.target.value);
|
||||
if (errors.email) {
|
||||
clearErrors('email');
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<InputError key={`error-email`} message={errors.email} />
|
||||
</div>
|
||||
@@ -83,7 +97,12 @@ export default function Login({ status, canResetPassword }: LoginProps) {
|
||||
autoComplete="current-password"
|
||||
placeholder="Password"
|
||||
value={data.password}
|
||||
onChange={(e) => setData('password', e.target.value)}
|
||||
onChange={(e) => {
|
||||
setData('password', e.target.value);
|
||||
if (errors.password) {
|
||||
clearErrors('password');
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<InputError key={`error-password`} message={errors.password} />
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useForm, router } from '@inertiajs/react';
|
||||
import { Head } from '@inertiajs/react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useForm } from '@inertiajs/react';
|
||||
import { LoaderCircle, User, Mail, Phone, Lock, Home, MapPin } from 'lucide-react';
|
||||
import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
|
||||
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
||||
|
||||
interface RegisterProps {
|
||||
package?: {
|
||||
@@ -18,8 +17,9 @@ import MarketingLayout from '@/layouts/marketing/MarketingLayout';
|
||||
|
||||
export default function Register({ package: initialPackage, privacyHtml }: RegisterProps) {
|
||||
const [privacyOpen, setPrivacyOpen] = useState(false);
|
||||
const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
|
||||
|
||||
const { data, setData, post, processing, errors, setError } = useForm({
|
||||
const { data, setData, post, processing, errors, clearErrors } = useForm({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
@@ -32,45 +32,33 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
package_id: initialPackage?.id || null,
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
if (Object.keys(errors).length > 0) {
|
||||
console.log('Validation errors received:', errors);
|
||||
}
|
||||
if (!processing) {
|
||||
console.log('Registration processing completed');
|
||||
}
|
||||
}, [errors, processing, data]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (Object.keys(errors).length > 0) {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
}, [errors]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (Object.keys(errors).length > 0) {
|
||||
// Force re-render or scroll to errors
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
}, [errors]);
|
||||
|
||||
const submit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log('Submitting registration form with data:', data);
|
||||
router.post('/register', data, {
|
||||
preserveState: true,
|
||||
forceFormData: true,
|
||||
onSuccess: () => {
|
||||
console.log('Registration successful');
|
||||
},
|
||||
onError: (errors) => {
|
||||
console.log('Registration errors:', errors);
|
||||
setError(errors);
|
||||
},
|
||||
setHasTriedSubmit(true);
|
||||
post('/register', {
|
||||
preserveScroll: true,
|
||||
});
|
||||
console.log('POST to /register initiated');
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasTriedSubmit) {
|
||||
return;
|
||||
}
|
||||
|
||||
const errorKeys = Object.keys(errors);
|
||||
if (errorKeys.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const firstError = errorKeys[0];
|
||||
const field = document.querySelector<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>(`[name="${firstError}"]`);
|
||||
|
||||
if (field) {
|
||||
field.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
field.focus();
|
||||
}
|
||||
}, [errors, hasTriedSubmit]);
|
||||
|
||||
return (
|
||||
<MarketingLayout title="Registrieren">
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
||||
@@ -93,7 +81,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<form key={`form-${processing ? 'submitting' : 'idle'}-${Object.keys(errors).length}`} onSubmit={submit} className="mt-8 space-y-6">
|
||||
<form onSubmit={submit} className="mt-8 space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="md:col-span-1">
|
||||
<label htmlFor="first_name" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
@@ -107,7 +95,12 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
type="text"
|
||||
required
|
||||
value={data.first_name}
|
||||
onChange={(e) => setData('first_name', e.target.value)}
|
||||
onChange={(e) => {
|
||||
setData('first_name', e.target.value);
|
||||
if (e.target.value.trim() && errors.first_name) {
|
||||
clearErrors('first_name');
|
||||
}
|
||||
}}
|
||||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.first_name ? 'border-red-500' : 'border-gray-300'}`}
|
||||
placeholder="Vorname"
|
||||
/>
|
||||
@@ -127,7 +120,12 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
type="text"
|
||||
required
|
||||
value={data.last_name}
|
||||
onChange={(e) => setData('last_name', e.target.value)}
|
||||
onChange={(e) => {
|
||||
setData('last_name', e.target.value);
|
||||
if (e.target.value.trim() && errors.last_name) {
|
||||
clearErrors('last_name');
|
||||
}
|
||||
}}
|
||||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.last_name ? 'border-red-500' : 'border-gray-300'}`}
|
||||
placeholder="Nachname"
|
||||
/>
|
||||
@@ -147,7 +145,12 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
type="email"
|
||||
required
|
||||
value={data.email}
|
||||
onChange={(e) => setData('email', e.target.value)}
|
||||
onChange={(e) => {
|
||||
setData('email', e.target.value);
|
||||
if (e.target.value.trim() && errors.email) {
|
||||
clearErrors('email');
|
||||
}
|
||||
}}
|
||||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.email ? 'border-red-500' : 'border-gray-300'}`}
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
@@ -167,7 +170,12 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
type="text"
|
||||
required
|
||||
value={data.address}
|
||||
onChange={(e) => setData('address', e.target.value)}
|
||||
onChange={(e) => {
|
||||
setData('address', e.target.value);
|
||||
if (e.target.value.trim() && errors.address) {
|
||||
clearErrors('address');
|
||||
}
|
||||
}}
|
||||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.address ? 'border-red-500' : 'border-gray-300'}`}
|
||||
placeholder="Adresse"
|
||||
/>
|
||||
@@ -187,7 +195,12 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
type="tel"
|
||||
required
|
||||
value={data.phone}
|
||||
onChange={(e) => setData('phone', e.target.value)}
|
||||
onChange={(e) => {
|
||||
setData('phone', e.target.value);
|
||||
if (e.target.value.trim() && errors.phone) {
|
||||
clearErrors('phone');
|
||||
}
|
||||
}}
|
||||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.phone ? 'border-red-500' : 'border-gray-300'}`}
|
||||
placeholder="Telefonnummer"
|
||||
/>
|
||||
@@ -207,7 +220,12 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
type="text"
|
||||
required
|
||||
value={data.username}
|
||||
onChange={(e) => setData('username', e.target.value)}
|
||||
onChange={(e) => {
|
||||
setData('username', e.target.value);
|
||||
if (e.target.value.trim() && errors.username) {
|
||||
clearErrors('username');
|
||||
}
|
||||
}}
|
||||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.username ? 'border-red-500' : 'border-gray-300'}`}
|
||||
placeholder="Benutzername"
|
||||
/>
|
||||
@@ -227,7 +245,15 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
type="password"
|
||||
required
|
||||
value={data.password}
|
||||
onChange={(e) => setData('password', e.target.value)}
|
||||
onChange={(e) => {
|
||||
setData('password', e.target.value);
|
||||
if (e.target.value.trim() && errors.password) {
|
||||
clearErrors('password');
|
||||
}
|
||||
if (data.password_confirmation && e.target.value === data.password_confirmation) {
|
||||
clearErrors('password_confirmation');
|
||||
}
|
||||
}}
|
||||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.password ? 'border-red-500' : 'border-gray-300'}`}
|
||||
placeholder="Passwort"
|
||||
/>
|
||||
@@ -247,12 +273,20 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
type="password"
|
||||
required
|
||||
value={data.password_confirmation}
|
||||
onChange={(e) => setData('password_confirmation', e.target.value)}
|
||||
onChange={(e) => {
|
||||
setData('password_confirmation', e.target.value);
|
||||
if (e.target.value.trim() && errors.password_confirmation) {
|
||||
clearErrors('password_confirmation');
|
||||
}
|
||||
if (data.password && e.target.value === data.password) {
|
||||
clearErrors('password_confirmation');
|
||||
}
|
||||
}}
|
||||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.password_confirmation ? 'border-red-500' : 'border-gray-300'}`}
|
||||
placeholder="Passwort bestätigen"
|
||||
/>
|
||||
</div>
|
||||
{errors.password_confirmation && <p className="text-sm text-red-600 mt-1">{errors.password_confirmation}</p>}
|
||||
{errors.password_confirmation && <p key={`error-password_confirmation`} className="text-sm text-red-600 mt-1">{errors.password_confirmation}</p>}
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2 flex items-start">
|
||||
@@ -262,7 +296,12 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
type="checkbox"
|
||||
required
|
||||
checked={data.privacy_consent}
|
||||
onChange={(e) => setData('privacy_consent', e.target.checked)}
|
||||
onChange={(e) => {
|
||||
setData('privacy_consent', e.target.checked);
|
||||
if (e.target.checked && errors.privacy_consent) {
|
||||
clearErrors('privacy_consent');
|
||||
}
|
||||
}}
|
||||
className="h-4 w-4 text-[#FFB6C1] focus:ring-[#FFB6C1] border-gray-300 rounded"
|
||||
/>
|
||||
<label htmlFor="privacy_consent" className="ml-2 block text-sm text-gray-900">
|
||||
@@ -281,14 +320,15 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
|
||||
</div>
|
||||
|
||||
{Object.keys(errors).length > 0 && (
|
||||
<div className="p-4 bg-red-50 border border-red-200 rounded-md">
|
||||
<p className="text-sm text-red-800">
|
||||
<div key={`general-errors-${Object.keys(errors).join('-')}`} className="p-4 bg-red-50 border border-red-200 rounded-md mb-6">
|
||||
<h4 className="text-sm font-medium text-red-800 mb-2">Fehler bei der Registrierung:</h4>
|
||||
<ul className="text-sm text-red-800 space-y-1">
|
||||
{Object.entries(errors).map(([key, value]) => (
|
||||
<span key={key}>
|
||||
{value}
|
||||
</span>
|
||||
<li key={key} className="flex items-start">
|
||||
<span className="font-medium">{key.replace('_', ' ')}:</span> {value}
|
||||
</li>
|
||||
))}
|
||||
</p>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -9,13 +9,26 @@ import { Button } from '@/components/ui/button';
|
||||
import AuthLayout from '@/layouts/auth-layout';
|
||||
|
||||
export default function VerifyEmail({ status }: { status?: string }) {
|
||||
const isNewRegistration = status === 'registration-success';
|
||||
const description = isNewRegistration
|
||||
? 'Thanks! Please confirm your email address to access your dashboard.'
|
||||
: 'Please verify your email address by clicking on the link we just emailed to you.';
|
||||
|
||||
return (
|
||||
<AuthLayout title="Verify email" description="Please verify your email address by clicking on the link we just emailed to you.">
|
||||
<AuthLayout title="Verify email" description={description}>
|
||||
<Head title="Email verification" />
|
||||
|
||||
{isNewRegistration && (
|
||||
<div className="mb-6 rounded-md bg-blue-50 p-4 text-left text-sm text-blue-900">
|
||||
<p className="font-semibold">Almost there! Confirm your email address to start using Fotospiel.</p>
|
||||
<p className="mt-2">We just sent a confirmation message to your inbox. As soon as you click the link you will be taken straight to your dashboard.</p>
|
||||
<p className="mt-2">Can't find it? Check your spam folder or request a new link below.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status === 'verification-link-sent' && (
|
||||
<div className="mb-4 text-center text-sm font-medium text-green-600">
|
||||
A new verification link has been sent to the email address you provided during registration.
|
||||
We have sent the verification link again. Please also check your spam folder.
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -55,9 +55,7 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const nextStep = () => {
|
||||
if (currentStep === 'step1') setCurrentStep('step3');
|
||||
};
|
||||
// nextStep entfernt, da Tabs nun parallel sind
|
||||
|
||||
const getFeatureIcon = (feature: string) => {
|
||||
switch (feature) {
|
||||
@@ -431,9 +429,8 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
|
||||
<Tabs value={currentStep} onValueChange={setCurrentStep} className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="step1">Details</TabsTrigger>
|
||||
<TabsTrigger value="step3">Kaufen</TabsTrigger>
|
||||
<TabsTrigger value="step2">Kundenmeinungen</TabsTrigger>
|
||||
</TabsList>
|
||||
<Progress value={(currentStep === 'step1' ? 50 : 100)} className="w-full mt-4" />
|
||||
<TabsContent value="step1" className="mt-4">
|
||||
<div className="space-y-4">
|
||||
<div className="text-center">
|
||||
@@ -475,77 +472,53 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{/* Social Proof - unten verschoben */}
|
||||
<div className="mt-8">
|
||||
<h3 className="text-xl font-semibold mb-4 font-display">Was Kunden sagen</h3>
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
{testimonials.map((testimonial, index) => (
|
||||
<div key={index} className="bg-white p-4 rounded-lg shadow-md">
|
||||
<p className="text-gray-600 font-sans-marketing mb-2">"{testimonial.text}"</p>
|
||||
<p className="font-semibold font-sans-marketing">{testimonial.name}</p>
|
||||
<div className="flex">
|
||||
{[...Array(testimonial.rating)].map((_, i) => <Star key={i} className="w-4 h-4 text-yellow-400 fill-current" />)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-center">
|
||||
{auth.user ? (
|
||||
<Link
|
||||
href={`/buy-packages/${selectedPackage.id}`}
|
||||
className="w-full block bg-[#FFB6C1] text-white py-3 rounded-md font-semibold font-sans-marketing hover:bg-[#FF69B4] transition text-center"
|
||||
>
|
||||
Zur Bestellung
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
href={`/register?package_id=${selectedPackage.id}`}
|
||||
className="w-full block bg-[#FFB6C1] text-white py-3 rounded-md font-semibold font-sans-marketing hover:bg-[#FF69B4] transition text-center"
|
||||
onClick={() => {
|
||||
localStorage.setItem('preferred_package', JSON.stringify(selectedPackage));
|
||||
}}
|
||||
>
|
||||
Zur Bestellung
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
<button onClick={nextStep} className="w-full bg-[#FFB6C1] text-white py-3 rounded-md font-semibold font-sans-marketing hover:bg-[#FF69B4] transition">
|
||||
Zum Kauf
|
||||
</button>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="step3" className="mt-4">
|
||||
<h3 className="text-xl font-semibold mb-4 font-display">Bereit zum Kaufen?</h3>
|
||||
<div className="text-center">
|
||||
<p className="text-gray-600 font-sans-marketing mb-4">Sie haben {selectedPackage.name} ausgewählt.</p>
|
||||
{auth.user ? (
|
||||
<Link
|
||||
href={`/buy-packages/${selectedPackage.id}`}
|
||||
className="w-full block bg-[#FFB6C1] text-white py-3 rounded-md font-semibold font-sans-marketing hover:bg-[#FF69B4] transition text-center"
|
||||
>
|
||||
Jetzt kaufen
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
href={`/register?package_id=${selectedPackage.id}`}
|
||||
className="w-full block bg-[#FFB6C1] text-white py-3 rounded-md font-semibold font-sans-marketing hover:bg-[#FF69B4] transition text-center"
|
||||
onClick={() => {
|
||||
localStorage.setItem('preferred_package', JSON.stringify(selectedPackage));
|
||||
}}
|
||||
>
|
||||
Registrieren & Kaufen
|
||||
</Link>
|
||||
)}
|
||||
<TabsContent value="step2" className="mt-4">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-xl font-semibold mb-4 font-display">Was Kunden sagen</h3>
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
{testimonials.map((testimonial, index) => (
|
||||
<div key={index} className="bg-white p-4 rounded-lg shadow-md">
|
||||
<p className="text-gray-600 font-sans-marketing mb-2">"{testimonial.text}"</p>
|
||||
<p className="font-semibold font-sans-marketing">{testimonial.name}</p>
|
||||
<div className="flex">
|
||||
{[...Array(testimonial.rating)].map((_, i) => <Star key={i} className="w-4 h-4 text-yellow-400 fill-current" />)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button onClick={() => setOpen(false)} className="w-full mt-4 text-gray-500 underline">
|
||||
Schließen
|
||||
</button>
|
||||
</div>
|
||||
<button onClick={() => setOpen(false)} className="w-full mt-4 text-gray-500 underline">
|
||||
Schließen
|
||||
</button>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)}
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<section className="py-20 px-4 bg-gray-50">
|
||||
<div className="container mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center mb-12 font-display">Was unsere Kunden sagen</h2>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{testimonials.map((testimonial, index) => (
|
||||
<div key={index} className="bg-white p-6 rounded-lg shadow-md">
|
||||
<p className="text-gray-600 font-sans-marketing mb-4">"{testimonial.text}"</p>
|
||||
<div className="flex items-center">
|
||||
<div className="flex">
|
||||
{[...Array(testimonial.rating)].map((_, i) => <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />)}
|
||||
</div>
|
||||
<p className="ml-2 font-semibold font-sans-marketing">{testimonial.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Testimonials Section entfernt, da nun im Dialog */}
|
||||
</MarketingLayout>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user