soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix auth form errors and redirects: Add React keys/useEffects for error rendering and scroll, Inertia::location in controllers for SPA navigation, extend RegistrationTest and add E2E. Update docs (changes/2025-10-02-registration-fixes.md, prp/13-backend-authentication.md). Add new UI components (accordion, carousel, progress, table, tabs), marketing/legal pages (Blog, Kontakt, Datenschutz, etc.), fonts, user migration (remove_name), views/css/package updates, seeders/factories.

Browse Source
This commit is contained in:
Codex Agent
2025-10-02 11:40:48 +02:00
parent 1945f664c6
commit 7475210893
101 changed files with 3406 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
resources/js/pages/marketing/Blog.tsx Normal file
View File

@@ -0,0 +1,98 @@
import React from 'react';
import { Head, Link, usePage } from '@inertiajs/react';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
interface Props {
posts: {
data: any[];
links: any[];
current_page: number;
last_page: number;
};
}
const Blog: React.FC<Props> = ({ posts }) => {
const { url } = usePage();
const renderPagination = () => {
if (!posts.links || posts.links.length <= 3) return null;
return (
<div className="mt-12 text-center">
<div className="flex justify-center space-x-2">
{posts.links.map((link, index) => (
<Link
key={index}
href={link.url || '#'}
className={`px-3 py-2 rounded ${
link.active
? 'bg-[#FFB6C1] text-white'
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
}`}
dangerouslySetInnerHTML={{ __html: link.label }}
/>
))}
</div>
</div>
);
};
return (
<MarketingLayout title="Blog - Fotospiel">
<Head title="Blog - Fotospiel" />
{/* Hero Section */}
<section className="bg-aurora-enhanced text-white py-20 px-4">
<div className="container mx-auto text-center">
<h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">Unser Blog</h1>
<p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-sans-marketing">Tipps, Tricks und Inspiration für perfekte Event-Fotos.</p>
<Link href="#posts" className="bg-white text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg font-sans-marketing hover:bg-gray-100 transition">
Zum Blog
</Link>
</div>
</section>
{/* Posts Section */}
<section id="posts" className="py-20 px-4 bg-white">
<div className="container mx-auto max-w-4xl">
<h2 className="text-3xl font-bold text-center mb-12 font-display">Neueste Beiträge</h2>
{posts.data.length > 0 ? (
<>
<div className="grid md:grid-cols-2 gap-8">
{posts.data.map((post) => (
<div key={post.id} className="bg-gray-50 p-6 rounded-lg">
{post.featured_image && (
<img
src={post.featured_image}
alt={post.title}
className="w-full h-48 object-cover rounded mb-4"
/>
)}
<h3 className="text-xl font-semibold mb-2 font-sans-marketing">
<Link href={`/blog/${post.slug}`} className="hover:text-[#FFB6C1]">
{post.title}
</Link>
</h3>
<p className="mb-4 text-gray-700 font-serif-custom">{post.excerpt}</p>
<p className="text-sm text-gray-500 mb-4 font-sans-marketing">
Veröffentlicht am {post.published_at}
</p>
<Link
href={`/blog/${post.slug}`}
className="text-[#FFB6C1] font-semibold font-sans-marketing hover:underline"
>
Weiterlesen
</Link>
</div>
))}
</div>
{renderPagination()}
</>
) : (
<p className="text-center text-gray-600 font-serif-custom">Keine Beiträge verfügbar.</p>
)}
</div>
</section>
</MarketingLayout>
);
};
export default Blog;

61
resources/js/pages/marketing/BlogShow.tsx Normal file
View File

@@ -0,0 +1,61 @@
import React from 'react';
import { Head, Link, usePage } from '@inertiajs/react';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
interface Props {
post: {
id: number;
title: string;
excerpt?: string;
content: string;
featured_image?: string;
published_at: string;
author?: { name: string };
slug: string;
};
}
const BlogShow: React.FC<Props> = ({ post }) => {
return (
<MarketingLayout title={`${post.title} - Fotospiel Blog`}>
<Head title={`${post.title} - Fotospiel Blog`} />
{/* Hero Section */}
<section className="bg-gradient-to-r from-[#FFB6C1] via-[#FFD700] to-[#87CEEB] text-white py-20 px-4">
<div className="container mx-auto text-center">
<h1 className="text-4xl md:text-5xl font-bold mb-4">{post.title}</h1>
<p className="text-lg mb-8">
Von {post.author?.name || 'Dem Fotospiel Team'} | {new Date(post.published_at).toLocaleDateString('de-DE')}
</p>
{post.featured_image && (
<img
src={post.featured_image}
alt={post.title}
className="mx-auto rounded-lg shadow-lg max-w-2xl"
/>
)}
</div>
</section>
{/* Post Content */}
<section className="py-20 px-4 bg-white">
<div className="container mx-auto max-w-4xl prose prose-lg max-w-none">
<div dangerouslySetInnerHTML={{ __html: post.content }} />
</div>
</section>
{/* Back to Blog */}
<section className="py-10 px-4 bg-gray-50">
<div className="container mx-auto text-center">
<Link
href="/blog"
className="bg-[#FFB6C1] text-white px-8 py-3 rounded-full font-semibold hover:bg-[#FF69B4] transition"
>
Zurück zum Blog
</Link>
</div>
</section>
</MarketingLayout>
);
};
export default BlogShow;

262
resources/js/pages/marketing/Home.tsx Normal file
View File

@@ -0,0 +1,262 @@
import React from 'react';
import { Head, Link, useForm } from '@inertiajs/react';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
import { Package } from '@/types'; // Annahme: Typ für Package
interface Props {
packages: Package[];
}
const Home: React.FC<Props> = ({ packages }) => {
const { data, setData, post, processing, errors, reset } = useForm({
name: '',
email: '',
message: '',
});
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
post('/kontakt', {
onSuccess: () => reset(),
});
};
return (
<MarketingLayout title="Home - Fotospiel">
<Head title="Fotospiel - Event-Fotos einfach und sicher mit QR-Codes" />
{/* Hero Section */}
<section id="hero" className="bg-aurora-enhanced text-white py-20 px-4">
<div className="container mx-auto flex flex-col md:flex-row items-center gap-8 max-w-6xl">
<div className="md:w-1/2 text-center md:text-left">
<h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">Fotospiel</h1>
<p className="text-xl md:text-2xl mb-8 font-sans-marketing">Sammle Gastfotos für Events mit QR-Codes. Unsere sichere PWA-Plattform für Gäste und Organisatoren – einfach, mobil und datenschutzkonform. Besser als Konkurrenz, geliebt von Tausenden.</p>
<Link href="/packages" className="bg-white text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg hover:bg-gray-100 transition font-sans-marketing">
Jetzt starten – Kostenlos
</Link>
</div>
<div className="md:w-1/2">
<img
src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=600&h=400&fit=crop"
alt="Event-Fotos mit QR"
className="rounded-lg shadow-lg w-full"
style={{ filter: 'drop-shadow(0 10px 8px rgba(0,0,0,0.1))' }}
/>
</div>
</div>
</section>
{/* How it works Section */}
<section id="how-it-works" 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">So funktioniert es – in 4 einfachen Schritten mit QR-Codes</h2>
<div className="grid md:grid-cols-4 gap-8">
<div className="text-center">
<img
src="https://images.unsplash.com/photo-1558618047-3c8d6b4d3b0a?w=300&h=200&fit=crop"
alt="QR-Code generieren"
className="w-12 h-12 mx-auto mb-4 rounded-full"
/>
<h3 className="font-semibold mb-2 font-sans-marketing">Event erstellen & QR generieren</h3>
<p className="text-gray-600 font-serif-custom">Als Organisator: Registrieren, Event anlegen, QR-Code erstellen und drucken/teilen.</p>
</div>
<div className="text-center">
<img
src="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=300&h=200&fit=crop"
alt="Fotos hochladen"
className="w-12 h-12 mx-auto mb-4 rounded-full"
/>
<h3 className="font-semibold mb-2 font-sans-marketing">Fotos hochladen via QR</h3>
<p className="text-gray-600 font-serif-custom">Gäste: QR scannen, PWA öffnen, Fotos via Kamera oder Galerie teilen.</p>
</div>
<div className="text-center">
<img
src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=300&h=200&fit=crop"
alt="Freigaben & Likes"
className="w-12 h-12 mx-auto mb-4 rounded-full"
/>
<h3 className="font-semibold mb-2 font-sans-marketing">Freigaben & Likes</h3>
<p className="text-gray-600 font-serif-custom">Emotions auswählen, Fotos liken, Galerie browsen – alles anonym.</p>
</div>
<div className="text-center">
<img
src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=300&h=200&fit=crop"
alt="Download & Teilen"
className="w-12 h-12 mx-auto mb-4 rounded-full"
/>
<h3 className="font-semibold mb-2 font-sans-marketing">Download & Teilen</h3>
<p className="text-gray-600 font-serif-custom">Freigegebene Fotos herunterladen, Event abschließen und QR archivieren.</p>
</div>
</div>
</div>
</section>
{/* Features Section */}
<section id="features" className="py-20 px-4 bg-white">
<div className="container mx-auto">
<h2 className="text-3xl font-bold text-center mb-12 font-display">Warum Fotospiel mit QR?</h2>
<div className="grid md:grid-cols-3 gap-8">
<div className="text-center p-6">
<img
src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=400&h=250&fit=crop"
alt="Sichere QR-Uploads"
className="w-16 h-16 mx-auto mb-4 rounded-full"
/>
<h3 className="text-xl font-semibold mb-2 font-display">Sichere QR-Uploads</h3>
<p className="text-gray-600 font-serif-custom">GDPR-konform, anonyme Sessions, QR-basierte Zugriffe ohne PII-Speicherung.</p>
</div>
<div className="text-center p-6">
<img
src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=400&h=250&fit=crop"
alt="Mobile PWA & QR"
className="w-16 h-16 mx-auto mb-4 rounded-full"
/>
<h3 className="text-xl font-semibold mb-2 font-display">Mobile PWA & QR</h3>
<p className="text-gray-600 font-serif-custom">Offline-fähig, App-ähnlich für iOS/Android, QR-Scan für schnellen Einstieg.</p>
</div>
<div className="text-center p-6">
<img
src="https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=400&h=250&fit=crop"
alt="Schnell & Einfach"
className="w-16 h-16 mx-auto mb-4 rounded-full"
/>
<h3 className="text-xl font-semibold mb-2 font-display">Schnell & Einfach mit QR</h3>
<p className="text-gray-600 font-serif-custom">Automatische Thumbnails, Echtzeit-Updates, QR-Sharing für Gäste.</p>
</div>
</div>
</div>
</section>
{/* Packages Teaser Section */}
<section id="pricing" 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">Unsere Packages</h2>
<p className="text-center text-lg text-gray-600 mb-8 font-sans-marketing">Wählen Sie das passende Paket für Ihr Event – von kostenlos bis premium.</p>
<div className="text-center">
<Link href="/packages" className="bg-[#FFB6C1] text-white px-8 py-4 rounded-full font-semibold text-lg hover:bg-[#FF69B4] transition font-sans-marketing">
Alle Packages ansehen
</Link>
</div>
</div>
</section>
{/* Contact Section */}
<section id="contact" className="py-20 px-4 bg-white">
<div className="container mx-auto max-w-2xl">
<h2 className="text-3xl font-bold text-center mb-12 font-display">Kontakt</h2>
<form key={`home-form-${Object.keys(errors).length}`} onSubmit={handleSubmit} className="space-y-4">
<div>
<label htmlFor="name" className="block text-sm font-medium mb-2 font-sans-marketing">Name</label>
<input
type="text"
id="name"
value={data.name}
onChange={(e) => setData('name', e.target.value)}
required
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"
/>
{errors.name && <p key={`error-name`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.name}</p>}
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium mb-2 font-sans-marketing">E-Mail</label>
<input
type="email"
id="email"
value={data.email}
onChange={(e) => setData('email', e.target.value)}
required
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"
/>
{errors.email && <p key={`error-email`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.email}</p>}
</div>
<div>
<label htmlFor="message" className="block text-sm font-medium mb-2 font-sans-marketing">Nachricht</label>
<textarea
id="message"
value={data.message}
onChange={(e) => setData('message', e.target.value)}
rows={4}
required
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"
></textarea>
{errors.message && <p key={`error-message`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.message}</p>}
</div>
<button type="submit" disabled={processing} className="w-full bg-[#FFB6C1] text-white py-3 rounded-md font-semibold hover:bg-[#FF69B4] transition disabled:opacity-50 font-sans-marketing">
{processing ? 'Sendet...' : 'Senden'}
</button>
</form>
{Object.keys(errors).length === 0 && data.message && !processing && (
<p className="mt-4 text-green-600 text-center font-serif-custom">Nachricht gesendet!</p>
)}
React.useEffect(() => {
if (Object.keys(errors).length > 0) {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
}, [errors]);
</div>
</section>
{/* 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-2 gap-8 max-w-4xl mx-auto">
<div className="bg-white p-6 rounded-lg">
<p className="mb-4 font-serif-custom">"Perfekt für unsere Hochzeit! QR-Sharing war super einfach."</p>
<p className="font-semibold font-sans-marketing">- Anna & Max</p>
</div>
<div className="bg-white p-6 rounded-lg">
<p className="mb-4 font-serif-custom">"Großes Firmenevent – alle Fotos zentral via QR."</p>
<p className="font-semibold font-sans-marketing">- Team XYZ GmbH</p>
</div>
</div>
</div>
</section>
{/* FAQ Section */}
<section className="py-20 px-4 bg-white">
<div className="container mx-auto max-w-3xl">
<h2 className="text-3xl font-bold text-center mb-12 font-display">Häufige Fragen</h2>
<div className="space-y-4">
<div className="bg-gray-50 p-4 rounded-lg">
<h3 className="font-semibold font-display">Ist es kostenlos?</h3>
<p className="font-serif-custom">Ja, der Basic-Tarif ist kostenlos für 1 Event mit QR. Upgrades ab 99€.</p>
</div>
<div className="bg-gray-50 p-4 rounded-lg">
<h3 className="font-semibold font-display">Datenschutz?</h3>
<p className="font-serif-custom">100% GDPR-konform. Keine personenbezogenen Daten gespeichert. QR-Zugriffe anonym. Siehe <Link href="/datenschutz" className="text-[#FFB6C1]">Datenschutzerklärung</Link>.</p>
</div>
<div className="bg-gray-50 p-4 rounded-lg">
<h3 className="font-semibold font-display">Wie funktioniert QR-Sharing?</h3>
<p className="font-serif-custom">Generiere QR im Dashboard, teile es – Gäste scannen, laden Fotos hoch in der PWA.</p>
</div>
</div>
</div>
</section>
{/* Packages Section (aus aktuellem TSX, angepasst) */}
<section className="py-20 px-4 bg-white">
<div className="container mx-auto max-w-4xl">
<h2 className="text-3xl font-bold text-center mb-12 font-display">Unsere Pakete</h2>
<div className="grid md:grid-cols-3 gap-8">
{packages.map((pkg) => (
<div key={pkg.id} className="bg-gray-50 p-6 rounded-lg text-center">
<h3 className="text-xl font-semibold mb-2 font-sans-marketing">{pkg.name}</h3>
<p className="text-gray-600 mb-4 font-serif-custom">{pkg.description}</p>
<p className="text-2xl font-bold text-[#FFB6C1] mb-4 font-display">€{pkg.price}</p>
<Link
href={`/marketing/buy/${pkg.id}`}
className="bg-[#FFB6C1] text-white px-6 py-2 rounded-full font-semibold hover:bg-[#FF69B4] transition font-sans-marketing"
>
Kaufen
</Link>
</div>
))}
</div>
</div>
</section>
</MarketingLayout>
);
};
export default Home;

94
resources/js/pages/marketing/Kontakt.tsx Normal file
View File

@@ -0,0 +1,94 @@
import React from 'react';
import { Head, Link, useForm, usePage } from '@inertiajs/react';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
const Kontakt: React.FC = () => {
const { data, setData, post, processing, errors, reset } = useForm({
name: '',
email: '',
message: '',
});
const { flash } = usePage().props as any;
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
post('/kontakt', {
onSuccess: () => reset(),
});
};
return (
<MarketingLayout title="Kontakt - Fotospiel">
<Head title="Kontakt - Fotospiel" />
<div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-2xl mx-auto">
<h1 className="text-3xl font-bold text-center mb-8 font-display">Kontakt</h1>
<p className="text-center text-gray-600 mb-8 font-sans-marketing">Haben Sie Fragen? Schreiben Sie uns!</p>
<form key={`kontakt-form-${Object.keys(errors).length}`} onSubmit={handleSubmit} className="space-y-4">
<div>
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2 font-sans-marketing">Name</label>
<input
type="text"
id="name"
value={data.name}
onChange={(e) => setData('name', e.target.value)}
required
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"
/>
{errors.name && <p key={`error-name`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.name}</p>}
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2 font-sans-marketing">E-Mail</label>
<input
type="email"
id="email"
value={data.email}
onChange={(e) => setData('email', e.target.value)}
required
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"
/>
{errors.email && <p key={`error-email`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.email}</p>}
</div>
<div>
<label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2 font-sans-marketing">Nachricht</label>
<textarea
id="message"
value={data.message}
onChange={(e) => setData('message', e.target.value)}
rows={4}
required
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"
></textarea>
{errors.message && <p key={`error-message`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.message}</p>}
</div>
<button type="submit" disabled={processing} className="w-full bg-[#FFB6C1] text-white py-3 rounded-md font-semibold hover:bg-[#FF69B4] transition disabled:opacity-50 font-sans-marketing">
{processing ? 'Sendet...' : 'Senden'}
</button>
</form>
{flash?.success && <p className="mt-4 text-green-600 text-center font-serif-custom">{flash.success}</p>}
{Object.keys(errors).length > 0 && (
<div key={`general-errors-${Object.keys(errors).join('-')}`} className="mt-4 p-4 bg-red-100 border border-red-400 rounded-md">
<ul className="list-disc list-inside">
{Object.values(errors).map((error, index) => (
<li key={`error-${index}`} className="font-serif-custom">{error}</li>
))}
</ul>
</div>
)}
React.useEffect(() => {
if (Object.keys(errors).length > 0) {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
}, [errors]);
<div className="mt-8 text-center">
<Link href="/" className="text-[#FFB6C1] hover:underline font-sans-marketing">Zurück zur Startseite</Link>
</div>
</div>
</div>
</MarketingLayout>
);
};
export default Kontakt;

85
resources/js/pages/marketing/Occasions.tsx Normal file
View File

@@ -0,0 +1,85 @@
import React from 'react';
import { Head, Link } from '@inertiajs/react';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
interface Props {
type: string;
}
const Occasions: React.FC<Props> = ({ type }) => {
const occasions = {
weddings: {
title: 'Hochzeiten',
description: 'Erfangen Sie die magischen Momente Ihrer Hochzeit mit professionellen Fotos.',
features: ['Unbegrenzte Fotos', 'Sofort-Download', 'Privat-Event-Code', 'Emotionen tracken'],
image: '/images/wedding-lights-background.svg' // Platzhalter
},
birthdays: {
title: 'Geburtstage',
description: 'Feiern Sie Geburtstage unvergesslich mit unseren Event-Foto-Lösungen.',
features: ['Schnelle Einrichtung', 'Gäste teilen Fotos', 'Themen-Filter', 'Druck-Optionen'],
image: '/images/birthday-placeholder.jpg'
},
'corporate-events': {
title: 'Firmenevents',
description: 'Professionelle Fotos für Teamevents, Konferenzen und Unternehmensfeiern.',
features: ['Branding-Integration', 'Sichere Cloud-Speicher', 'Analytics & Reports', 'Schnelle Bearbeitung'],
image: '/images/corporate-placeholder.jpg'
},
'family-celebrations': {
title: 'Familienfeiern',
description: 'Erinnerungen an Taufen, Jubiläen und Familienzusammenkünfte festhalten.',
features: ['Persönliche Alben', 'Gemeinsame Zugriffe', 'Einfache Bedienung', 'Hohe Qualität'],
image: '/images/family-placeholder.jpg'
}
};
const occasion = occasions[type as keyof typeof occasions] || occasions.weddings;
return (
<MarketingLayout title={`${occasion.title} - Fotospiel`}>
<Head title={`${occasion.title} - Fotospiel`} />
{/* Hero Section */}
<section className="bg-aurora-enhanced text-white py-20 px-4">
<div className="container mx-auto text-center">
<h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">{occasion.title}</h1>
<p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-sans-marketing">{occasion.description}</p>
{occasion.image && (
<img
src={occasion.image}
alt={occasion.title}
className="mx-auto rounded-lg shadow-lg max-w-4xl w-full"
/>
)}
</div>
</section>
{/* Features Section */}
<section className="py-20 px-4 bg-white">
<div className="container mx-auto max-w-4xl">
<h2 className="text-3xl font-bold text-center mb-12 font-display">Warum Fotospiel für {occasion.title}?</h2>
<div className="grid md:grid-cols-2 gap-8">
{occasion.features.map((feature, index) => (
<div key={index} className="bg-gray-50 p-6 rounded-lg flex items-center">
<div className="w-8 h-8 bg-[#FFB6C1] rounded-full flex items-center justify-center mr-4">
<span className="text-white text-sm font-bold font-sans-marketing">✓</span>
</div>
<p className="text-gray-700 font-serif-custom">{feature}</p>
</div>
))}
</div>
<div className="text-center mt-12">
<Link
href="/marketing/packages"
className="bg-[#FFB6C1] text-white px-8 py-4 rounded-full font-semibold text-lg font-sans-marketing hover:bg-[#FF69B4] transition"
>
Passendes Paket wählen
</Link>
</div>
</div>
</section>
</MarketingLayout>
);
};
export default Occasions;

553
resources/js/pages/marketing/Packages.tsx Normal file
View File

@@ -0,0 +1,553 @@
import React, { useState } from 'react';
import { Head, Link, usePage } from '@inertiajs/react';
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Button } from "@/components/ui/button"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
import { ArrowRight, ShoppingCart, Check, X, Users, Image, Calendar, Shield, Star } from 'lucide-react';
interface Package {
id: number;
name: string;
description: string;
price: number;
events: number;
features: string[];
limits?: {
max_photos?: number;
max_guests?: number;
max_tenants?: number;
max_events?: number;
gallery_days?: number;
};
watermark_allowed?: boolean;
branding_allowed?: boolean;
}
interface PackagesProps {
endcustomerPackages: Package[];
resellerPackages: Package[];
}
const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackages }) => {
const [open, setOpen] = useState(false);
const [selectedPackage, setSelectedPackage] = useState<Package | null>(null);
const [currentStep, setCurrentStep] = useState('step1');
const { props } = usePage();
const { auth } = props as any;
const testimonials = [
{ name: 'Anna M.', text: 'Das Starter-Paket war perfekt für unsere Hochzeit – einfach und günstig!', rating: 5 },
{ name: 'Max B.', text: 'Pro-Paket mit Analytics hat uns geholfen, die besten Momente zu finden.', rating: 5 },
{ name: 'Lisa K.', text: 'Als Reseller spare ich Zeit mit dem M-Paket – super Support!', rating: 5 },
];
const allPackages = [...endcustomerPackages, ...resellerPackages];
const handleCardClick = (pkg: Package) => {
setSelectedPackage(pkg);
setCurrentStep('step1');
setOpen(true);
};
const nextStep = () => {
if (currentStep === 'step1') setCurrentStep('step3');
};
const getFeatureIcon = (feature: string) => {
switch (feature) {
case 'basic_uploads': return <Image className="w-4 h-4" />;
case 'unlimited_sharing': return <ArrowRight className="w-4 h-4" />;
case 'no_watermark': return <Shield className="w-4 h-4" />;
case 'custom_tasks': return <Check className="w-4 h-4" />;
case 'advanced_analytics': return <Star className="w-4 h-4" />;
case 'priority_support': return <Users className="w-4 h-4" />;
case 'reseller_dashboard': return <ShoppingCart className="w-4 h-4" />;
case 'custom_branding': return <Image className="w-4 h-4" />;
default: return <Check className="w-4 h-4" />;
}
};
return (
<MarketingLayout title="Packages">
{/* Hero Section */}
<section className="bg-aurora-enhanced text-white py-20 px-4">
<div className="container mx-auto text-center">
<h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">Unsere Packages</h1>
<p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-sans-marketing">Wählen Sie das passende Paket für Ihr Event – von kostenlos bis premium.</p>
<Link href="#endcustomer" className="bg-white text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg font-sans-marketing hover:bg-gray-100 transition">
Jetzt entdecken
</Link>
</div>
</section>
<section id="endcustomer" className="py-20 px-4">
<div className="container mx-auto">
<h2 className="text-3xl font-bold text-center mb-12 font-display">Für Endkunden</h2>
{/* Mobile Carousel for Endcustomer Packages */}
<div className="block md:hidden">
<Carousel className="w-full max-w-md mx-auto">
<CarouselContent className="-ml-1">
{endcustomerPackages.map((pkg) => (
<CarouselItem key={pkg.id} className="pl-1 basis-full">
<div
className="bg-white p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
>
<div className="text-center mb-4">
<ShoppingCart className="w-12 h-12 text-[#FFB6C1] mx-auto" />
</div>
<h3 className="text-xl font-semibold mb-2 font-sans-marketing">{pkg.name}</h3>
<p className="text-gray-600 mb-4 font-serif-custom">{pkg.description}</p>
<p className="text-2xl font-bold text-[#FFB6C1] mb-4 font-sans-marketing">
{pkg.price === 0 ? 'Kostenlos' : `${pkg.price} €`}
</p>
<ul className="text-sm text-gray-600 mb-6 space-y-1 font-sans-marketing">
<li>• {pkg.events} Events</li>
{pkg.features.map((feature, index) => (
<li key={index} className="flex items-center">
{getFeatureIcon(feature)} {feature}
</li>
))}
{pkg.limits?.max_photos && <li>• Max. {pkg.limits.max_photos} Fotos</li>}
{pkg.limits?.gallery_days && <li>• Galerie {pkg.limits.gallery_days} Tage</li>}
{pkg.limits?.max_guests && <li>• Max. {pkg.limits.max_guests} Gäste</li>}
{pkg.watermark_allowed === false && <li><Badge variant="secondary">Kein Watermark</Badge></li>}
{pkg.branding_allowed && <li><Badge variant="secondary">Custom Branding</Badge></li>}
</ul>
<Button
variant="outline"
onClick={() => handleCardClick(pkg)}
className="w-full mt-4 font-sans-marketing"
>
Details anzeigen
</Button>
</div>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</div>
{/* Desktop Grid for Endcustomer Packages */}
<div className="hidden md:block">
<div className="grid md:grid-cols-3 gap-8">
{endcustomerPackages.map((pkg) => (
<div
key={pkg.id}
className="bg-white p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
>
<div className="text-center mb-4">
<ShoppingCart className="w-12 h-12 text-[#FFB6C1] mx-auto" />
</div>
<h3 className="text-xl font-semibold mb-2 font-sans-marketing">{pkg.name}</h3>
<p className="text-gray-600 mb-4 font-serif-custom">{pkg.description}</p>
<p className="text-2xl font-bold text-[#FFB6C1] mb-4 font-sans-marketing">
{pkg.price === 0 ? 'Kostenlos' : `${pkg.price} €`}
</p>
<ul className="text-sm text-gray-600 mb-6 space-y-1 font-sans-marketing">
<li>• {pkg.events} Events</li>
{pkg.features.map((feature, index) => (
<li key={index} className="flex items-center">
{getFeatureIcon(feature)} {feature}
</li>
))}
{pkg.limits?.max_photos && <li>• Max. {pkg.limits.max_photos} Fotos</li>}
{pkg.limits?.gallery_days && <li>• Galerie {pkg.limits.gallery_days} Tage</li>}
{pkg.limits?.max_guests && <li>• Max. {pkg.limits.max_guests} Gäste</li>}
{pkg.watermark_allowed === false && <li><Badge variant="secondary">Kein Watermark</Badge></li>}
{pkg.branding_allowed && <li><Badge variant="secondary">Custom Branding</Badge></li>}
</ul>
<Button
variant="outline"
onClick={() => handleCardClick(pkg)}
className="w-full mt-4 font-sans-marketing"
>
Details anzeigen
</Button>
</div>
))}
</div>
</div>
</div>
{/* Comparison Section for Endcustomer */}
<div className="mt-12">
<h3 className="text-2xl font-bold text-center mb-6 font-display">Endkunden-Pakete vergleichen</h3>
<div className="block md:hidden">
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="price">
<AccordionTrigger className="font-sans-marketing">Preis</AccordionTrigger>
<AccordionContent>
<div className="grid grid-cols-3 gap-4 p-4">
{endcustomerPackages.map((pkg) => (
<div key={pkg.id} className="text-center">
<p className="font-bold">{pkg.name}</p>
<p>{pkg.price === 0 ? 'Kostenlos' : `${pkg.price} €`}</p>
</div>
))}
</div>
</AccordionContent>
</AccordionItem>
<AccordionItem value="max-photos">
<AccordionTrigger className="font-sans-marketing">Max. Fotos {getFeatureIcon('max_photos')}</AccordionTrigger>
<AccordionContent>
<div className="grid grid-cols-3 gap-4 p-4">
{endcustomerPackages.map((pkg) => (
<div key={pkg.id} className="text-center">
<p className="font-bold">{pkg.name}</p>
<p>{pkg.limits?.max_photos || 'Unbegrenzt'}</p>
</div>
))}
</div>
</AccordionContent>
</AccordionItem>
<AccordionItem value="max-guests">
<AccordionTrigger className="font-sans-marketing">Max. Gäste {getFeatureIcon('max_guests')}</AccordionTrigger>
<AccordionContent>
<div className="grid grid-cols-3 gap-4 p-4">
{endcustomerPackages.map((pkg) => (
<div key={pkg.id} className="text-center">
<p className="font-bold">{pkg.name}</p>
<p>{pkg.limits?.max_guests || 'Unbegrenzt'}</p>
</div>
))}
</div>
</AccordionContent>
</AccordionItem>
<AccordionItem value="gallery-days">
<AccordionTrigger className="font-sans-marketing">Galerie Tage {getFeatureIcon('gallery_days')}</AccordionTrigger>
<AccordionContent>
<div className="grid grid-cols-3 gap-4 p-4">
{endcustomerPackages.map((pkg) => (
<div key={pkg.id} className="text-center">
<p className="font-bold">{pkg.name}</p>
<p>{pkg.limits?.gallery_days || 'Unbegrenzt'}</p>
</div>
))}
</div>
</AccordionContent>
</AccordionItem>
<AccordionItem value="watermark">
<AccordionTrigger className="font-sans-marketing">Watermark {getFeatureIcon('no_watermark')}</AccordionTrigger>
<AccordionContent>
<div className="grid grid-cols-3 gap-4 p-4">
{endcustomerPackages.map((pkg) => (
<div key={pkg.id} className="text-center">
<p className="font-bold">{pkg.name}</p>
{pkg.watermark_allowed === false ? <Check className="w-4 h-4 text-green-500 mx-auto" /> : <X className="w-4 h-4 text-red-500 mx-auto" />}
</div>
))}
</div>
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
<div className="hidden md:block">
<Table>
<TableHeader>
<TableRow>
<TableHead>Feature</TableHead>
{endcustomerPackages.map((pkg) => (
<TableHead key={pkg.id} className="text-center">
{pkg.name}
</TableHead>
))}
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell className="font-semibold">Preis</TableCell>
{endcustomerPackages.map((pkg) => (
<TableCell key={pkg.id} className="text-center">
{pkg.price === 0 ? 'Kostenlos' : `${pkg.price} €`}
</TableCell>
))}
</TableRow>
<TableRow>
<TableCell className="font-semibold">Max. Fotos {getFeatureIcon('max_photos')}</TableCell>
{endcustomerPackages.map((pkg) => (
<TableCell key={pkg.id} className="text-center">
{pkg.limits?.max_photos || 'Unbegrenzt'}
</TableCell>
))}
</TableRow>
<TableRow>
<TableCell className="font-semibold">Max. Gäste {getFeatureIcon('max_guests')}</TableCell>
{endcustomerPackages.map((pkg) => (
<TableCell key={pkg.id} className="text-center">
{pkg.limits?.max_guests || 'Unbegrenzt'}
</TableCell>
))}
</TableRow>
<TableRow>
<TableCell className="font-semibold">Galerie Tage {getFeatureIcon('gallery_days')}</TableCell>
{endcustomerPackages.map((pkg) => (
<TableCell key={pkg.id} className="text-center">
{pkg.limits?.gallery_days || 'Unbegrenzt'}
</TableCell>
))}
</TableRow>
<TableRow>
<TableCell className="font-semibold">Watermark {getFeatureIcon('no_watermark')}</TableCell>
{endcustomerPackages.map((pkg) => (
<TableCell key={pkg.id} className="text-center">
{pkg.watermark_allowed === false ? <Check className="w-4 h-4 text-green-500" /> : <X className="w-4 h-4 text-red-500" />}
</TableCell>
))}
</TableRow>
</TableBody>
</Table>
</div>
</div>
</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">Für Reseller</h2>
{/* Mobile Carousel for Reseller Packages */}
<div className="block md:hidden">
<Carousel className="w-full max-w-md mx-auto">
<CarouselContent className="-ml-1">
{resellerPackages.map((pkg) => (
<CarouselItem key={pkg.id} className="pl-1 basis-full">
<div
className="bg-white p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
>
<div className="text-center mb-4">
<ShoppingCart className="w-12 h-12 text-[#FFD700] mx-auto" />
</div>
<h3 className="text-xl font-semibold mb-2 font-sans-marketing">{pkg.name}</h3>
<p className="text-gray-600 mb-4 font-serif-custom">{pkg.description}</p>
<p className="text-2xl font-bold text-[#FFD700] mb-4 font-sans-marketing">
{pkg.price} € / Jahr
</p>
<ul className="text-sm text-gray-600 mb-6 space-y-1 font-sans-marketing">
{pkg.features.map((feature, index) => (
<li key={index} className="flex items-center">
{getFeatureIcon(feature)} {feature}
</li>
))}
{pkg.limits?.max_tenants && <li>• Max. {pkg.limits.max_tenants} Tenants</li>}
{pkg.limits?.max_events && <li>• Max. {pkg.limits.max_events} Events/Jahr</li>}
{pkg.branding_allowed && <li><Badge variant="secondary">Custom Branding</Badge></li>}
</ul>
<Button
variant="outline"
onClick={() => handleCardClick(pkg)}
className="w-full mt-4 font-sans-marketing"
>
Details anzeigen
</Button>
</div>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</div>
{/* Desktop Grid for Reseller Packages */}
<div className="hidden md:block">
<div className="grid md:grid-cols-2 gap-8">
{resellerPackages.map((pkg) => (
<div
key={pkg.id}
className="bg-white p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
>
<div className="text-center mb-4">
<ShoppingCart className="w-12 h-12 text-[#FFD700] mx-auto" />
</div>
<h3 className="text-xl font-semibold mb-2 font-sans-marketing">{pkg.name}</h3>
<p className="text-gray-600 mb-4 font-serif-custom">{pkg.description}</p>
<p className="text-2xl font-bold text-[#FFD700] mb-4 font-sans-marketing">
{pkg.price} € / Jahr
</p>
<ul className="text-sm text-gray-600 mb-6 space-y-1 font-sans-marketing">
{pkg.features.map((feature, index) => (
<li key={index} className="flex items-center">
{getFeatureIcon(feature)} {feature}
</li>
))}
{pkg.limits?.max_tenants && <li>• Max. {pkg.limits.max_tenants} Tenants</li>}
{pkg.limits?.max_events && <li>• Max. {pkg.limits.max_events} Events/Jahr</li>}
{pkg.branding_allowed && <li><Badge variant="secondary">Custom Branding</Badge></li>}
</ul>
<Button
variant="outline"
onClick={() => handleCardClick(pkg)}
className="w-full mt-4 font-sans-marketing"
>
Details anzeigen
</Button>
</div>
))}
</div>
</div>
</div>
</section>
{/* FAQ Section */}
<section className="py-20 px-4">
<div className="container mx-auto">
<h2 className="text-3xl font-bold text-center mb-12 font-display">Häufige Fragen</h2>
<div className="grid md:grid-cols-2 gap-8">
<div className="bg-white p-6 rounded-lg shadow-md">
<h3 className="text-xl font-semibold mb-2 font-display">Was ist das Free-Paket?</h3>
<p className="text-gray-600 font-sans-marketing">Ideal für Tests: 30 Fotos, 7 Tage Galerie, mit Watermark.</p>
</div>
<div className="bg-white p-6 rounded-lg shadow-md">
<h3 className="text-xl font-semibold mb-2 font-display">Kann ich upgraden?</h3>
<p className="text-gray-600 font-sans-marketing">Ja, jederzeit im Dashboard – Limits werden sofort erweitert.</p>
</div>
<div className="bg-white p-6 rounded-lg shadow-md">
<h3 className="text-xl font-semibold mb-2 font-display">Was für Reseller?</h3>
<p className="text-gray-600 font-sans-marketing">Jährliche Subscriptions mit Dashboard, Branding und Support.</p>
</div>
<div className="bg-white p-6 rounded-lg shadow-md">
<h3 className="text-xl font-semibold mb-2 font-display">Zahlungssicher?</h3>
<p className="text-gray-600 font-sans-marketing">Sichere Zahlung via Stripe/PayPal, 14 Tage Rückgaberecht.</p>
</div>
</div>
</div>
</section>
{/* Modal */}
{selectedPackage && (
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle className="text-2xl font-display">{selectedPackage.name} - Details</DialogTitle>
</DialogHeader>
<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>
</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">
<h2 className="text-3xl font-bold font-display">{selectedPackage.name}</h2>
<p className="text-2xl font-bold text-[#FFB6C1] mt-2">
{selectedPackage.price === 0 ? 'Kostenlos' : `${selectedPackage.price} €`}
</p>
</div>
<p className="text-gray-600 font-sans-marketing">{selectedPackage.description}</p>
<div className="grid grid-cols-2 gap-4">
{selectedPackage.features.map((feature, index) => (
<Badge key={`feature-${index}`} variant="secondary" className="flex items-center justify-center gap-1">
{getFeatureIcon(feature)} {feature}
</Badge>
))}
{selectedPackage.limits?.max_photos && (
<Badge variant="outline" className="flex items-center justify-center gap-1">
<Image className="w-4 h-4" /> Max. {selectedPackage.limits.max_photos} Fotos
</Badge>
)}
{selectedPackage.limits?.max_guests && (
<Badge variant="outline" className="flex items-center justify-center gap-1">
<Users className="w-4 h-4" /> Max. {selectedPackage.limits.max_guests} Gäste
</Badge>
)}
{selectedPackage.limits?.gallery_days && (
<Badge variant="outline" className="flex items-center justify-center gap-1">
<Calendar className="w-4 h-4" /> {selectedPackage.limits.gallery_days} Tage Galerie
</Badge>
)}
{selectedPackage.watermark_allowed === false && (
<Badge variant="secondary" className="flex items-center justify-center gap-1">
<Shield className="w-4 h-4" /> Kein Watermark
</Badge>
)}
{selectedPackage.branding_allowed && (
<Badge variant="secondary" className="flex items-center justify-center gap-1">
<Image className="w-4 h-4" /> Custom Branding
</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>
<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>
)}
</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>
</MarketingLayout>
);
};
export default Packages;

80
resources/js/pages/marketing/Success.tsx Normal file
View File

@@ -0,0 +1,80 @@
import React from 'react';
import { usePage, router } from '@inertiajs/react';
import { Head } from '@inertiajs/react';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
import { Loader } from 'lucide-react';
const Success: React.FC = () => {
const { auth, flash } = usePage().props as any;
if (auth.user && auth.user.email_verified_at) {
// Redirect to admin
router.visit('/admin', { preserveState: false });
return (
<div className="flex items-center justify-center min-h-screen bg-gray-50">
<div className="text-center">
<Loader className="animate-spin inline-block w-8 h-8 border border-2 border-blue-600 border-t-transparent rounded-full mx-auto mb-2" />
<p className="text-gray-600">Wird weitergeleitet...</p>
</div>
</div>
);
}
if (auth.user && !auth.user.email_verified_at) {
return (
<MarketingLayout title="E-Mail verifizieren">
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-md w-full bg-white rounded-lg shadow-md p-8">
<div className="text-center">
<h2 className="text-2xl font-bold text-gray-900 mb-4">
E-Mail verifizieren
</h2>
<p className="text-gray-600 mb-6">
Bitte überprüfen Sie Ihre E-Mail und klicken Sie auf den Verifizierungslink.
</p>
<form method="POST" action="/email/verification-notification">
<button
type="submit"
className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md font-medium transition duration-300"
>
Verifizierung erneut senden
</button>
</form>
<p className="mt-4 text-sm text-gray-600">
Bereits registriert? <a href="/login" className="text-blue-600 hover:text-blue-500">Anmelden</a>
</p>
</div>
</div>
</div>
</MarketingLayout>
);
}
return (
<MarketingLayout title="Kauf abschließen">
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-md w-full bg-white rounded-lg shadow-md p-8">
<div className="text-center">
<h2 className="text-2xl font-bold text-gray-900 mb-4">
Kauf abschließen
</h2>
<p className="text-gray-600 mb-6">
Melden Sie sich an, um fortzufahren.
</p>
<a
href="/login"
className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md font-medium transition duration-300 block mb-2"
>
Anmelden
</a>
<p className="text-sm text-gray-600">
Kein Konto? <a href="/register" className="text-blue-600 hover:text-blue-500">Registrieren</a>
</p>
</div>
</div>
</div>
</MarketingLayout>
);
};
export default Success;