Fotospiel GmbH entfernt, Jon Token des demo events gefixt + demoeventseeder. Favicon auf ".ico" gesetzt.

2025-11-16 16:24:30 +01:00
parent 4f78546ba3
commit 5290072ffe
23 changed files with 505 additions and 262 deletions
--- a/resources/js/layouts/app/Footer.tsx
+++ b/resources/js/layouts/app/Footer.tsx
@@ -31,7 +31,7 @@ const Footer: React.FC = () => {
                  Die Fotospiel App
                </Link>
                <p className="mt-2 font-sans-marketing text-gray-600">
-                  {t('marketing:footer.company', 'Fotospiel GmbH')}
+                  {t('marketing:footer.company', 'S.E.B. Fotografie')}
                </p>
              </div>
            </div>
--- a/resources/js/pages/marketing/Blog.tsx
+++ b/resources/js/pages/marketing/Blog.tsx
@@ -1,17 +1,34 @@
-import React from 'react';
-import { Head, Link } from '@inertiajs/react';
+import React from 'react';
+import { Head, Link, usePage } from '@inertiajs/react';
 import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
 import { useTranslation } from 'react-i18next';
 import MarketingLayout from '@/layouts/mainWebsite';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
 import { Button } from '@/components/ui/button';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+
+interface PostSummary {
+  id: number;
+  slug: string;
+  title: string;
+  excerpt?: string;
+  featured_image?: string;
+  published_at?: string;
+  author?: { name?: string } | string;
+}
+
+interface PaginationLink {
+  url: string | null;
+  label: string;
+  active: boolean;
+}

 interface Props {
  posts: {
-    data: any[];
-    links: any[];
+    data: PostSummary[];
+    links: PaginationLink[];
    current_page: number;
    last_page: number;
  };
@@ -19,8 +36,47 @@ interface Props {

 const Blog: React.FC<Props> = ({ posts }) => {
  const { localizedPath } = useLocalizedRoutes();
+  const { props } = usePage<{ supportedLocales?: string[] }>();
+  const supportedLocales = props.supportedLocales && props.supportedLocales.length > 0 ? props.supportedLocales : ['de', 'en'];
  const { t, i18n } = useTranslation('marketing');
-  const locale = i18n.language || 'de'; // Fallback to 'de' if no locale
+  const locale = i18n.language || 'de';
+  const articles = posts?.data ?? [];
+  const isLandingLayout = posts.current_page === 1;
+  const featuredPost = isLandingLayout ? articles[0] : null;
+  const gridPosts = isLandingLayout ? articles.slice(1, 4) : [];
+  const listPosts = isLandingLayout ? [] : articles;
+  const dateLocale = locale === 'en' ? 'en-US' : 'de-DE';
+
+  const buildArticleHref = React.useCallback(
+    (slug?: string | null) => {
+      if (!slug) {
+        return '#';
+      }
+
+      return localizedPath(`/blog/${encodeURIComponent(slug)}`);
+    },
+    [localizedPath]
+  );
+
+  const formatPublishedDate = React.useCallback(
+    (raw?: string) => {
+      if (!raw) {
+        return '';
+      }
+
+      try {
+        return new Date(raw).toLocaleDateString(dateLocale, {
+          day: 'numeric',
+          month: 'long',
+          year: 'numeric',
+        });
+      } catch (error) {
+        console.warn('[Marketing Blog] Unable to parse date', { raw, error });
+        return raw;
+      }
+    },
+    [dateLocale]
+  );

  const resolvePaginationHref = React.useCallback(
    (raw?: string | null) => {
@@ -35,6 +91,12 @@ const Blog: React.FC<Props> = ({ posts }) => {
        );

        const normalized = `${parsed.pathname}${parsed.search}`;
+        const localePrefixRegex = new RegExp(`^/(${supportedLocales.join('|')})(/|$)`);
+
+        if (localePrefixRegex.test(parsed.pathname)) {
+          return normalized;
+        }
+
        return localizedPath(normalized);
      } catch (error) {
        console.warn('[Marketing Blog] Fallback resolving pagination link', { raw, error });
@@ -45,11 +107,13 @@ const Blog: React.FC<Props> = ({ posts }) => {
  );

  const renderPagination = () => {
-    if (!posts.links || posts.links.length <= 3) return null;
+    if (!posts.links || posts.links.length <= 3) {
+      return null;
+    }

    return (
      <div className="mt-12">
-        <Card className="p-6">
+        <Card className="p-4 md:p-6">
          <div className="flex justify-center">
            <div className="flex flex-wrap justify-center gap-2">
              {posts.links.map((link, index) => {
@@ -59,9 +123,9 @@ const Blog: React.FC<Props> = ({ posts }) => {
                  return (
                    <Button
                      key={index}
-                      variant={link.active ? "default" : "outline"}
+                      variant={link.active ? 'default' : 'outline'}
                      disabled
-                      className={link.active ? "bg-[#FFB6C1] hover:bg-[#FF69B4]" : ""}
+                      className={link.active ? 'bg-[#FFB6C1] hover:bg-[#FF69B4]' : ''}
                      dangerouslySetInnerHTML={{ __html: link.label }}
                    />
                  );
@@ -71,13 +135,10 @@ const Blog: React.FC<Props> = ({ posts }) => {
                  <Button
                    key={index}
                    asChild
-                    variant={link.active ? "default" : "outline"}
-                    className={link.active ? "bg-[#FFB6C1] hover:bg-[#FF69B4]" : ""}
+                    variant={link.active ? 'default' : 'outline'}
+                    className={link.active ? 'bg-[#FFB6C1] hover:bg-[#FF69B4]' : ''}
                  >
-                    <Link
-                      href={href}
-                      dangerouslySetInnerHTML={{ __html: link.label }}
-                    />
+                    <Link href={href} dangerouslySetInnerHTML={{ __html: link.label }} />
                  </Button>
                );
              })}
@@ -88,96 +149,168 @@ const Blog: React.FC<Props> = ({ posts }) => {
    );
  };

+  const renderPostMeta = (post: PostSummary) => (
+    <div className="flex flex-col gap-2 text-sm text-gray-600 dark:text-gray-300 sm:flex-row sm:items-center sm:gap-4">
+      <span>
+        {t('blog.by')} {typeof post.author === 'string' ? post.author : post.author?.name || t('blog.team')}
+      </span>
+      <Separator orientation="vertical" className="hidden h-4 sm:block" />
+      <span>
+        {t('blog.published_at')} {formatPublishedDate(post.published_at)}
+      </span>
+    </div>
+  );
+
+  const renderLandingGrid = () => {
+    if (!featuredPost) {
+      return (
+        <Alert className="bg-white shadow-sm dark:bg-gray-950">
+          <AlertDescription className="text-gray-600 dark:text-gray-300">
+            {t('blog.empty')}
+          </AlertDescription>
+        </Alert>
+      );
+    }
+
+    return (
+      <div className="space-y-16">
+        <div className="grid gap-8 lg:grid-cols-12 lg:items-center">
+          <div className="order-2 space-y-6 rounded-3xl border border-gray-200 bg-white p-8 shadow-xl dark:border-gray-800 dark:bg-gray-950 lg:order-1 lg:col-span-6">
+            <Badge variant="outline" className="w-fit border-pink-200 text-pink-600 dark:border-pink-500 dark:text-pink-300">
+              {t('blog.posts_title')}
+            </Badge>
+            <h2 className="text-3xl font-bold text-gray-900 dark:text-gray-50">
+              {featuredPost.title || 'Untitled'}
+            </h2>
+            <p className="text-lg leading-relaxed text-gray-600 dark:text-gray-300">
+              {featuredPost.excerpt || ''}
+            </p>
+            {renderPostMeta(featuredPost)}
+            <Button asChild size="lg" className="bg-[#FFB6C1] hover:bg-[#FF69B4] text-white">
+              <Link href={buildArticleHref(featuredPost.slug)}>
+                {t('blog.read_more')}
+              </Link>
+            </Button>
+          </div>
+          <div className="order-1 lg:order-2 lg:col-span-6">
+            <div className="relative overflow-hidden rounded-3xl border border-gray-200 bg-gradient-to-br from-pink-200 via-white to-amber-100 shadow-2xl dark:border-gray-800 dark:from-pink-900/40 dark:via-gray-900 dark:to-gray-950">
+              {featuredPost.featured_image && (
+                <img
+                  src={featuredPost.featured_image}
+                  alt={featuredPost.title}
+                  className="h-full w-full object-cover"
+                />
+              )}
+              {!featuredPost.featured_image && (
+                <div className="aspect-[5/4] p-8 text-3xl font-semibold text-gray-900 dark:text-gray-50">
+                  Fotospiel Stories
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {gridPosts.length > 0 && (
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            {gridPosts.map((post) => (
+              <Card key={post.id} className="flex h-full flex-col overflow-hidden border-gray-200 shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:border-gray-800">
+                {post.featured_image && (
+                  <div className="aspect-video">
+                    <img src={post.featured_image} alt={post.title} className="h-full w-full object-cover" />
+                  </div>
+                )}
+                <CardContent className="flex flex-1 flex-col space-y-4 p-6">
+                  <div className="space-y-2">
+                    <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-50">
+                      {post.title || 'Untitled'}
+                    </h3>
+                    <p className="text-sm leading-relaxed text-gray-600 dark:text-gray-300">
+                      {post.excerpt || ''}
+                    </p>
+                  </div>
+                  <div className="flex-1" />
+                  {renderPostMeta(post)}
+                  <Button asChild variant="ghost" className="justify-start p-0 text-pink-600 hover:text-pink-700">
+                    <Link href={buildArticleHref(post.slug)}>
+                      {t('blog.read_more')}
+                    </Link>
+                  </Button>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const renderListView = () => (
+    <div className="space-y-6">
+      {listPosts.map((post) => (
+        <Card key={post.id} className="overflow-hidden border-gray-200 shadow-sm hover:shadow-lg dark:border-gray-800">
+          <div className="grid gap-0 md:grid-cols-3">
+            {post.featured_image && (
+              <img
+                src={post.featured_image}
+                alt={post.title}
+                className="h-full w-full object-cover"
+              />
+            )}
+            <CardContent className="md:col-span-2">
+              <div className="space-y-4 py-6">
+                <h3 className="text-2xl font-semibold text-gray-900 dark:text-gray-50">
+                  {post.title || 'Untitled'}
+                </h3>
+                <p className="text-gray-600 dark:text-gray-300">{post.excerpt || ''}</p>
+                {renderPostMeta(post)}
+                <Button asChild variant="outline" className="w-fit border-pink-200 text-pink-600 hover:bg-pink-50 dark:border-pink-500/40 dark:text-pink-200">
+                  <Link href={buildArticleHref(post.slug)}>
+                    {t('blog.read_more')}
+                  </Link>
+                </Button>
+              </div>
+            </CardContent>
+          </div>
+        </Card>
+      ))}
+      {listPosts.length === 0 && (
+        <Card className="p-8 text-center text-gray-600 dark:text-gray-300">{t('blog.empty')}</Card>
+      )}
+    </div>
+  );
+
  return (
    <MarketingLayout title={t('blog.title')}>
      <Head title={t('blog.title')} />
-      {/* Hero Section */}
-      <section className="bg-aurora-enhanced py-20 px-4">
-        <div className="container mx-auto max-w-4xl">
-          <Card className="bg-white/10 backdrop-blur-sm border-white/20 shadow-xl">
-            <CardContent className="p-8 md:p-12 text-center">
-              <h1 className="text-4xl md:text-6xl font-bold mb-6 font-display text-gray-900 dark:text-gray-100">{t('blog.hero_title')}</h1>
-              <p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-sans-marketing text-gray-800 dark:text-gray-200">{t('blog.hero_description')}</p>
-              <Button
-                asChild
-                size="lg"
-                className="bg-white text-[#FFB6C1] hover:bg-gray-100 px-8 py-4 rounded-full font-semibold text-lg font-sans-marketing"
-              >
-                <Link href="#posts">
-                  {t('blog.hero_cta')}
-                </Link>
-              </Button>
-            </CardContent>
-          </Card>
+
+      <section className="bg-gradient-to-br from-pink-50 via-white to-amber-50 px-4 py-14 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950">
+        <div className="container mx-auto max-w-4xl space-y-6 text-center">
+          <Badge variant="outline" className="border-pink-200 text-pink-600 dark:border-pink-500/50 dark:text-pink-200">
+            Fotospiel Blog
+          </Badge>
+          <h1 className="text-4xl font-bold text-gray-900 dark:text-gray-50 md:text-5xl">{t('blog.hero_title')}</h1>
+          <p className="text-lg leading-relaxed text-gray-600 dark:text-gray-300">{t('blog.hero_description')}</p>
+          <div className="flex flex-wrap justify-center gap-3">
+            <Button asChild size="lg" className="bg-[#FFB6C1] hover:bg-[#FF69B4] text-white">
+              <Link href={localizedPath('/packages')}>{t('home.cta_explore')}</Link>
+            </Button>
+            <Button asChild size="lg" variant="outline" className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800">
+              <Link href="#articles">{t('blog.hero_cta')}</Link>
+            </Button>
+          </div>
        </div>
      </section>

-      {/* Posts Section */}
-      <section id="posts" className="py-20 px-4 bg-white dark:bg-gray-900">
-        <div className="container mx-auto max-w-6xl">
-          <div className="text-center mb-12">
-            <h2 className="text-3xl font-bold font-display text-gray-900 dark:text-gray-100 mb-4">{t('blog.posts_title')}</h2>
-            <Separator className="w-24 mx-auto" />
+      <section id="articles" className="bg-white px-4 py-16 dark:bg-gray-950">
+        <div className="container mx-auto max-w-6xl space-y-12">
+          <div className="text-center">
+            <h2 className="text-3xl font-bold text-gray-900 dark:text-gray-50">{t('blog.posts_title')}</h2>
+            <Separator className="mx-auto mt-4 w-24" />
          </div>

-          {posts.data.length > 0 ? (
-            <>
-              <div className="grid md:grid-cols-2 gap-8">
-                {posts.data.map((post) => (
-                  <Card key={post.id} className="overflow-hidden hover:shadow-lg transition-shadow duration-300">
-                    {post.featured_image && (
-                      <div className="aspect-video overflow-hidden">
-                        <img
-                          src={post.featured_image}
-                          alt={post.title}
-                          className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
-                        />
-                      </div>
-                    )}
-                    <CardContent className="p-6">
-                      <CardTitle className="text-xl font-semibold mb-3 font-sans-marketing">
-                        <Link
-                          href={`${localizedPath(`/blog/${post.slug}`)}`}
-                          className="hover:text-[#FFB6C1] transition-colors"
-                        >
-                          {post.title?.[locale] || post.title?.de || post.title || 'No Title'}
-                        </Link>
-                      </CardTitle>
+          {isLandingLayout ? renderLandingGrid() : renderListView()}

-                      <p className="text-gray-700 dark:text-gray-300 font-serif-custom mb-4 leading-relaxed">
-                        {post.excerpt?.[locale] || post.excerpt?.de || post.excerpt || 'No Excerpt'}
-                      </p>
-
-                      <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 mb-4">
-                        <Badge variant="secondary" className="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300">
-                          {t('blog.by')} {post.author?.name?.[locale] || post.author?.name?.de || post.author?.name || t('blog.team')}
-                        </Badge>
-                        <Separator orientation="vertical" className="hidden sm:block h-4" />
-                        <Badge variant="outline" className="text-gray-500">
-                          {t('blog.published_at')} {new Date(post.published_at).toLocaleDateString('de-DE', {
-                            day: 'numeric',
-                            month: 'long',
-                            year: 'numeric'
-                          })}
-                        </Badge>
-                      </div>
-
-                      <Button asChild variant="ghost" className="p-0 h-auto text-[#FFB6C1] hover:text-[#FF69B4] hover:bg-transparent">
-                        <Link href={`${localizedPath(`/blog/${post.slug}`)}`} className="font-semibold">
-                          {t('blog.read_more')}
-                        </Link>
-                      </Button>
-                    </CardContent>
-                  </Card>
-                ))}
-              </div>
-              {renderPagination()}
-            </>
-          ) : (
-            <Card className="p-8 text-center">
-              <p className="text-gray-600 dark:text-gray-400 font-serif-custom">{t('blog.empty')}</p>
-            </Card>
-          )}
+          {renderPagination()}
        </div>
      </section>
    </MarketingLayout>
--- a/resources/js/pages/marketing/Demo.tsx
+++ b/resources/js/pages/marketing/Demo.tsx
@@ -1,125 +1,148 @@
-import React from 'react';
-import { Head, Link } from '@inertiajs/react';
-import { useTranslation } from 'react-i18next';
-import MarketingLayout from '@/layouts/mainWebsite';
-import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-import { Sparkles, CheckCircle2 } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
+import MarketingLayout from '@/layouts/mainWebsite';
+import { Head, Link } from '@inertiajs/react';
+import { CheckCircle2, Sparkles } from 'lucide-react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';

 type DemoFeature = { title: string; description: string };

-const DEMO_TOKEN = 'mdhyA5XSVEVEabF8JhZ85B6fMocyyRMTfmThSeUKPzk7LLTu';
+interface DemoPageProps {
+    demoToken?: string | null;
+}

-const DemoPage: React.FC = () => {
-  const { t } = useTranslation('marketing');
-  const { localizedPath } = useLocalizedRoutes();
+const DemoPage: React.FC<DemoPageProps> = ({ demoToken }) => {
+    const { t } = useTranslation('marketing');
+    const { localizedPath } = useLocalizedRoutes();
+    const embedUrl = demoToken ? `/e/${demoToken}` : null;

-  const demo = t('demo_page', { returnObjects: true }) as {
-    title: string;
-    subtitle: string;
-    primaryCta: string;
-    secondaryCta: string;
-    iframeNote: string;
-    openFull: string;
-    features: DemoFeature[];
-  };
+    const demo = t('demo_page', { returnObjects: true }) as {
+        title: string;
+        subtitle: string;
+        primaryCta: string;
+        secondaryCta: string;
+        iframeNote: string;
+        openFull: string;
+        features: DemoFeature[];
+    };

-  return (
-    <MarketingLayout title={demo.title}>
-      <Head title={demo.title} />
+    return (
+        <MarketingLayout title={demo.title}>
+            <Head title={demo.title} />

-      <section className="relative overflow-hidden bg-gradient-to-br from-pink-100 via-white to-white px-4 py-16 dark:from-pink-950/40 dark:via-gray-950 dark:to-gray-950">
-        <div className="absolute -top-32 right-20 hidden h-72 w-72 rounded-full bg-pink-200/50 blur-3xl dark:bg-pink-900/30 lg:block" />
-        <div className="container mx-auto relative z-10 flex max-w-5xl flex-col gap-10 lg:flex-row lg:items-center">
-          <div className="flex-1 space-y-6">
-            <Badge variant="outline" className="border-pink-400 text-pink-600 dark:border-pink-500 dark:text-pink-300">
-              Demo Live
-            </Badge>
-            <h1 className="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-50 md:text-5xl">
-              {demo.title}
-            </h1>
-            <p className="max-w-xl text-lg text-gray-600 dark:text-gray-300">
-              {demo.subtitle}
-            </p>
-            <div className="flex flex-wrap items-center gap-3">
-              <Button asChild size="lg" className="bg-pink-500 hover:bg-pink-600">
-                <Link href={localizedPath('/packages')}>
-                  {demo.primaryCta}
-                </Link>
-              </Button>
-              <Button asChild size="lg" variant="ghost" className="text-pink-600 hover:text-pink-700 dark:text-pink-300">
-                <Link href={localizedPath('/so-funktionierts')}>
-                  {demo.secondaryCta}
-                </Link>
-              </Button>
-            </div>
-          </div>
-          <div className="flex-1">
-            <div className="relative mx-auto w-full max-w-[320px] rounded-[2.5rem] border border-gray-200 bg-gray-900 p-4 shadow-2xl dark:border-gray-700 md:max-w-[360px]">
-              <div className="absolute left-1/2 top-2 h-1.5 w-16 -translate-x-1/2 rounded-full bg-gray-300 dark:bg-gray-600" aria-hidden />
-              <iframe
-                title="Fotospiel App Demo"
-                src={`/e/${DEMO_TOKEN}`}
-                className="aspect-[9/16] w-full rounded-[1.75rem] border-0 bg-white shadow-inner dark:bg-gray-950"
-                loading="lazy"
-                sandbox="allow-scripts allow-same-origin allow-forms"
-              />
-            </div>
-            <div className="mt-4 flex flex-col items-center gap-1 text-center">
-              <p className="text-sm text-gray-600 dark:text-gray-300">{demo.iframeNote}</p>
-              <Button asChild variant="link" className="text-pink-600 hover:text-pink-700 dark:text-pink-300">
-                <Link href={`/e/${DEMO_TOKEN}`} target="_blank" rel="noopener">
-                  {demo.openFull}
-                </Link>
-              </Button>
-            </div>
-          </div>
-        </div>
-      </section>
+            <section className="relative overflow-hidden bg-gradient-to-br from-pink-100 via-white to-white px-4 py-16 dark:from-pink-950/40 dark:via-gray-950 dark:to-gray-950">
+                <div className="absolute -top-32 right-20 hidden h-72 w-72 rounded-full bg-pink-200/50 blur-3xl lg:block dark:bg-pink-900/30" />
+                <div className="relative z-10 container mx-auto flex max-w-5xl flex-col gap-10 lg:flex-row lg:items-center">
+                    <div className="flex-1 space-y-6">
+                        <Badge variant="outline" className="border-pink-400 text-pink-600 dark:border-pink-500 dark:text-pink-300">
+                            Demo Live
+                        </Badge>
+                        <h1 className="text-4xl font-bold tracking-tight text-gray-900 md:text-5xl dark:text-gray-50">{demo.title}</h1>
+                        <p className="max-w-xl text-lg text-gray-600 dark:text-gray-300">{demo.subtitle}</p>
+                        <div className="flex flex-wrap items-center gap-3">
+                            <Button asChild size="lg" className="bg-pink-500 hover:bg-pink-600">
+                                <Link href={localizedPath('/packages')}>{demo.primaryCta}</Link>
+                            </Button>
+                            <Button asChild size="lg" variant="ghost" className="text-pink-600 hover:text-pink-700 dark:text-pink-300">
+                                <Link href={localizedPath('/so-funktionierts')}>{demo.secondaryCta}</Link>
+                            </Button>
+                        </div>
+                    </div>
+                    <div className="flex-1">
+                        {embedUrl ? (
+                            <>
+                                <div className="relative mx-auto w-full max-w-[320px] rounded-[2.5rem] border border-gray-200 bg-gray-900 p-4 shadow-2xl md:max-w-[360px] dark:border-gray-700">
+                                    <div
+                                        className="absolute top-2 left-1/2 h-1.5 w-16 -translate-x-1/2 rounded-full bg-gray-300 dark:bg-gray-600"
+                                        aria-hidden
+                                    />
+                                    <iframe
+                                        title="Fotospiel App Demo"
+                                        src={embedUrl}
+                                        className="aspect-[9/16] w-full rounded-[1.75rem] border-0 bg-white shadow-inner dark:bg-gray-950"
+                                        loading="lazy"
+                                        sandbox="allow-scripts allow-same-origin allow-forms"
+                                    />
+                                </div>
+                                <div className="mt-4 flex flex-col items-center gap-1 text-center">
+                                    <p className="text-sm text-gray-600 dark:text-gray-300">{demo.iframeNote}</p>
+                                    <Button asChild variant="link" className="text-pink-600 hover:text-pink-700 dark:text-pink-300">
+                                        <Link href={embedUrl} target="_blank" rel="noopener">
+                                            {demo.openFull}
+                                        </Link>
+                                    </Button>
+                                </div>
+                            </>
+                        ) : (
+                            <Alert className="border-pink-200 bg-white shadow-lg dark:border-pink-900/50 dark:bg-gray-950">
+                                <AlertTitle className="text-gray-900 dark:text-gray-100">
+                                    {t('labels.demoUnavailable', 'Demo-Link aktuell nicht verfügbar')}
+                                </AlertTitle>
+                                <AlertDescription className="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                                    {t(
+                                        'labels.demoUnavailableCopy',
+                                        'Führe die Demo-Seeds aus oder kontaktiere uns, damit wir dir sofort einen neuen Zugangscode hinterlegen können.',
+                                    )}
+                                </AlertDescription>
+                                <div className="mt-4 flex flex-wrap gap-3">
+                                    <Button asChild size="sm" className="bg-pink-500 hover:bg-pink-600">
+                                        <Link href={localizedPath('/packages')}>{demo.primaryCta}</Link>
+                                    </Button>
+                                    <Button
+                                        asChild
+                                        size="sm"
+                                        variant="outline"
+                                        className="text-pink-600 hover:text-pink-700 dark:border-pink-900/40 dark:text-pink-300"
+                                    >
+                                        <Link href={localizedPath('/kontakt')}>{t('nav.contact', 'Kontakt')}</Link>
+                                    </Button>
+                                </div>
+                            </Alert>
+                        )}
+                    </div>
+                </div>
+            </section>

-      <section className="container mx-auto px-4 pb-16">
-        <div className="mx-auto max-w-5xl">
-          <div className="grid gap-6 md:grid-cols-3">
-            {demo.features.map((feature) => (
-              <Card key={feature.title} className="border-gray-100 shadow-sm dark:border-gray-800">
-                <CardHeader>
-                  <CardTitle className="flex items-center gap-2 text-lg">
-                    <Sparkles className="h-5 w-5 text-pink-500" aria-hidden />
-                    {feature.title}
-                  </CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <CardDescription className="text-sm text-gray-600 dark:text-gray-300">
-                    {feature.description}
-                  </CardDescription>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
+            <section className="container mx-auto px-4 pb-16">
+                <div className="mx-auto max-w-5xl">
+                    <div className="grid gap-6 md:grid-cols-3">
+                        {demo.features.map((feature) => (
+                            <Card key={feature.title} className="border-gray-100 shadow-sm dark:border-gray-800">
+                                <CardHeader>
+                                    <CardTitle className="flex items-center gap-2 text-lg">
+                                        <Sparkles className="h-5 w-5 text-pink-500" aria-hidden />
+                                        {feature.title}
+                                    </CardTitle>
+                                </CardHeader>
+                                <CardContent>
+                                    <CardDescription className="text-sm text-gray-600 dark:text-gray-300">{feature.description}</CardDescription>
+                                </CardContent>
+                            </Card>
+                        ))}
+                    </div>

-          <Alert className="mt-10 border-pink-200 bg-white shadow-lg dark:border-pink-900/50 dark:bg-gray-950">
-            <AlertTitle className="flex items-center gap-2 text-gray-900 dark:text-gray-100">
-              <CheckCircle2 className="h-5 w-5 text-pink-500" aria-hidden />
-              {t('marketing.labels.readyToLaunch', 'Bereit für dein Event?')}
-            </AlertTitle>
-            <AlertDescription className="mt-3 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-              <span className="text-sm text-gray-600 dark:text-gray-300">
-                {t('marketing.labels.readyToLaunchCopy', 'Registriere dich kostenlos und lege noch heute dein erstes Event an.')}
-              </span>
-              <Button asChild className="bg-pink-500 hover:bg-pink-600">
-                <Link href={localizedPath('/register')}>
-                  {demo.primaryCta}
-                </Link>
-              </Button>
-            </AlertDescription>
-          </Alert>
-        </div>
-      </section>
-    </MarketingLayout>
-  );
+                    <Alert className="mt-10 border-pink-200 bg-white shadow-lg dark:border-pink-900/50 dark:bg-gray-950">
+                        <AlertTitle className="flex items-center gap-2 text-gray-900 dark:text-gray-100">
+                            <CheckCircle2 className="h-5 w-5 text-pink-500" aria-hidden />
+                            {t('marketing.labels.readyToLaunch', 'Bereit für dein Event?')}
+                        </AlertTitle>
+                        <AlertDescription className="mt-3 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+                            <span className="text-sm text-gray-600 dark:text-gray-300">
+                                {t('marketing.labels.readyToLaunchCopy', 'Registriere dich kostenlos und lege noch heute dein erstes Event an.')}
+                            </span>
+                            <Button asChild className="bg-pink-500 hover:bg-pink-600">
+                                <Link href={localizedPath('/register')}>{demo.primaryCta}</Link>
+                            </Button>
+                        </AlertDescription>
+                    </Alert>
+                </div>
+            </section>
+        </MarketingLayout>
+    );
 };

 DemoPage.layout = (page: React.ReactNode) => page;
--- a/resources/lang/de/api.php
+++ b/resources/lang/de/api.php
@@ -0,0 +1,17 @@
+<?php
+
+return [
+    'join_tokens' => [
+        'invalid_title' => 'Ungültiger QR-Zugang',
+        'invalid_message' => 'Dieser QR-Link oder Zugangscode wurde nicht erkannt. Bitte scanne ihn erneut oder fordere einen neuen Link an.',
+        'expired_title' => 'QR-Zugang abgelaufen',
+        'expired_message' => 'Dieser QR-Zugang ist abgelaufen, weil das Event bereits beendet wurde.',
+        'revoked_title' => 'QR-Zugang deaktiviert',
+        'revoked_message' => 'Der Veranstalter hat diesen QR-Zugang deaktiviert. Bitte nutze einen neuen Link.',
+        'rate_limited_title' => 'Zu viele Versuche',
+        'rate_limited_message' => 'Der QR-Zugang wurde zu oft aufgerufen. Bitte warte kurz und versuche es erneut.',
+        'invalid_attempts_message' => 'Der QR-Zugang wurde zu oft falsch eingegeben. Bitte versuche es in wenigen Minuten erneut.',
+        'default_title' => 'Zugang verweigert',
+        'default_message' => 'Mit diesem QR-Zugang konnte kein Zugriff gewährt werden.',
+    ],
+];
--- a/resources/lang/de/legal.php
+++ b/resources/lang/de/legal.php
@@ -6,7 +6,7 @@ return [
    'impressum_title' => 'Impressum - Fotospiel',
    'datenschutz_title' => 'Datenschutzerklärung - Fotospiel',
    'impressum_section' => 'Angaben gemäß § 5 TMG',
-    'company' => 'Fotospiel GmbH',
+    'company' => 'S.E.B. Fotografie',
    'address' => 'Musterstraße 1, 12345 Musterstadt',
    'representative' => 'Vertreten durch: Max Mustermann',
    'contact' => 'Kontakt',
@@ -16,7 +16,7 @@ return [
    'register_court' => 'Registergericht: Amtsgericht Musterstadt',
    'commercial_register' => 'Handelsregister: HRB 12345',
    'datenschutz_intro' => 'Wir nehmen den Schutz Ihrer persönlichen Daten sehr ernst und halten uns strikt an die Regeln der Datenschutzgesetze.',
-    'responsible' => 'Verantwortlich: Fotospiel GmbH, Musterstraße 1, 12345 Musterstadt',
+    'responsible' => 'Verantwortlich: S.E.B. Fotografie, Musterstraße 1, 12345 Musterstadt',
    'data_collection' => 'Datenerfassung: Keine PII-Speicherung, anonyme Sessions für Gäste. E-Mails werden nur für Kontaktzwecke verarbeitet.',
    'payments' => 'Zahlungen und Packages',
    'payments_desc' => 'Wir verarbeiten Zahlungen für Packages über Paddle. Zahlungsinformationen werden sicher und verschlüsselt durch Paddle als Merchant of Record verarbeitet.',
--- a/resources/lang/de/marketing.json
+++ b/resources/lang/de/marketing.json
@@ -234,7 +234,7 @@
    "discover_packages": "Pakete entdecken"
  },
  "footer": {
-    "company": "Fotospiel GmbH",
+    "company": "S.E.B. Fotografie",
    "rights_reserved": "Alle Rechte vorbehalten"
  },
  "register": {
--- a/resources/lang/de/marketing.php
+++ b/resources/lang/de/marketing.php
@@ -97,7 +97,7 @@ return [
        'register' => 'Registrieren',
    ],
    'footer' => [
-        'company' => 'Fotospiel GmbH',
+        'company' => 'S.E.B. Fotografie',
        'rights_reserved' => 'Alle Rechte vorbehalten',
    ],
    'legal' => [
--- a/resources/lang/en/api.php
+++ b/resources/lang/en/api.php
@@ -0,0 +1,17 @@
+<?php
+
+return [
+    'join_tokens' => [
+        'invalid_title' => 'Invalid QR access link',
+        'invalid_message' => 'We could not verify this QR link or access code. Please scan it again or ask the host for a fresh link.',
+        'expired_title' => 'QR access expired',
+        'expired_message' => 'This QR access link is no longer valid because the event has already ended.',
+        'revoked_title' => 'QR access disabled',
+        'revoked_message' => 'The organiser disabled this QR access link. Please request a new one.',
+        'rate_limited_title' => 'Too many QR attempts',
+        'rate_limited_message' => 'You tried to open the QR access too often. Please wait a moment and try again.',
+        'invalid_attempts_message' => 'Too many invalid QR attempts. Please wait a moment and try again.',
+        'default_title' => 'Access denied',
+        'default_message' => 'We could not grant access with this QR link.',
+    ],
+];
--- a/resources/lang/en/legal.php
+++ b/resources/lang/en/legal.php
@@ -6,7 +6,7 @@ return [
    'impressum_title' => 'Imprint - Fotospiel',
    'datenschutz_title' => 'Privacy Policy - Fotospiel',
    'impressum_section' => 'Information pursuant to § 5 TMG',
-    'company' => 'Fotospiel GmbH',
+    'company' => 'S.E.B. Fotografie',
    'address' => 'Musterstraße 1, 12345 Musterstadt',
    'representative' => 'Represented by: Max Mustermann',
    'contact' => 'Contact',
@@ -16,7 +16,7 @@ return [
    'register_court' => 'Register Court: District Court Musterstadt',
    'commercial_register' => 'Commercial Register: HRB 12345',
    'datenschutz_intro' => 'We take the protection of your personal data very seriously and strictly adhere to the rules of data protection laws.',
-    'responsible' => 'Responsible: Fotospiel GmbH, Musterstraße 1, 12345 Musterstadt',
+    'responsible' => 'Responsible: S.E.B. Fotografie, Musterstraße 1, 12345 Musterstadt',
    'data_collection' => 'Data collection: No PII storage, anonymous sessions for guests. Emails are only processed for contact purposes.',
    'payments' => 'Payments and Packages',
    'payments_desc' => 'We process payments for Packages via Paddle. Payment information is handled securely and encrypted by Paddle as the merchant of record.',
--- a/resources/lang/en/marketing.json
+++ b/resources/lang/en/marketing.json
@@ -234,7 +234,7 @@
    "discover_packages": "Discover Packages"
  },
  "footer": {
-    "company": "Fotospiel GmbH",
+    "company": "S.E.B. Fotografie",
    "rights_reserved": "All rights reserved"
  },
  "register": {
--- a/resources/lang/en/marketing.php
+++ b/resources/lang/en/marketing.php
@@ -97,7 +97,7 @@ return [
        'register' => 'Register',
    ],
    'footer' => [
-        'company' => 'Fotospiel GmbH',
+        'company' => 'S.E.B. Fotografie',
        'rights_reserved' => 'All rights reserved',
    ],
    'legal' => [
--- a/resources/views/admin.blade.php
+++ b/resources/views/admin.blade.php
@@ -5,6 +5,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ __('admin.shell.tenant_admin_title') }}</title>
+    <link rel="icon" href="{{ asset('favicon.ico') }}" type="image/x-icon">
    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#f43f5e">
    <meta name="apple-mobile-web-app-capable" content="yes">
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -30,8 +30,7 @@

        <title inertia>{{ config('app.name', 'Laravel') }}</title>

-        <link rel="icon" href="/favicon.ico" sizes="any">
-        <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+        <link rel="icon" href="{{ asset('favicon.ico') }}" type="image/x-icon">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">

        <link rel="preconnect" href="https://fonts.bunny.net">
--- a/resources/views/guest.blade.php
+++ b/resources/views/guest.blade.php
@@ -5,6 +5,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ config('app.name', 'Fotospiel') }}</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <link rel="icon" href="{{ asset('favicon.ico') }}" type="image/x-icon">
    @viteReactRefresh
    @vite(['resources/css/app.css', 'resources/js/guest/main.tsx'])
    @php
--- a/resources/views/layouts/marketing.blade.php
+++ b/resources/views/layouts/marketing.blade.php
@@ -9,7 +9,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@yield('title', 'Fotospiel - Event-Fotos einfach und sicher mit QR-Codes')</title>
    <meta name="description" content="Sammle Gastfotos für Events mit QR-Codes und unserer PWA-Plattform. Für Hochzeiten, Firmenevents und mehr. Kostenloser Einstieg.">
-    <link rel="icon" href="{{ asset('logo.svg') }}" type="image/svg+xml">
+    <link rel="icon" href="{{ asset('favicon.ico') }}" type="image/x-icon">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @if($scriptNonce)
        <meta name="csp-nonce" content="{{ $scriptNonce }}">