import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Dialog, DialogContent } from '@/components/ui/dialog'; import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes'; import { useLocale } from '@/hooks/useLocale'; 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 }; interface DemoPageProps { demoToken?: string | null; } const DemoPage: React.FC = ({ demoToken }) => { const { t } = useTranslation('marketing'); const { localizedPath } = useLocalizedRoutes(); const locale = useLocale(); const embedUrl = demoToken ? `/e/${demoToken}` : '/e/demo?demo=1'; const [isDemoOpen, setIsDemoOpen] = React.useState(false); const demoOpenLabel = t('labels.demoOpenOverlay', locale === 'en' ? 'Open demo overlay' : 'Demo im Overlay öffnen'); const demo = t('demo_page', { returnObjects: true }) as { title: string; subtitle: string; primaryCta: string; secondaryCta: string; iframeNote: string; openFull: string; features: DemoFeature[]; }; const demoFeatures = Array.isArray(demo.features) ? demo.features : []; const handleOpenDemo = (): void => { setIsDemoOpen(true); }; return (
Demo Live

{demo.title}

{demo.subtitle}

{embedUrl ? ( <>
{isDemoOpen ? (

Live Demo

Demo läuft im Overlay

Schließe das Overlay, um hier weiterzumachen.

) : (