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'; import { motion, useReducedMotion } from 'framer-motion'; 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 shouldReduceMotion = useReducedMotion(); 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); }; const frameVariants = shouldReduceMotion ? { rest: {}, hover: {} } : { rest: { y: 0, scale: 1, rotateX: 0, rotateY: 0 }, hover: { y: -6, scale: 1.01, rotateX: -2, rotateY: 3, transition: { type: 'spring', stiffness: 180, damping: 20 }, }, }; const shineVariants = shouldReduceMotion ? { rest: {}, hover: {} } : { rest: { x: '-120%', opacity: 0 }, hover: { x: '120%', opacity: 0.8, transition: { duration: 0.8, ease: 'easeOut' } }, }; const featureHover = shouldReduceMotion ? {} : { y: -4, scale: 1.01 }; return (
Demo Live

{demo.title}

{demo.subtitle}

{embedUrl ? ( <>
{isDemoOpen ? (

Live Demo

Demo läuft im Overlay

Schließe das Overlay, um hier weiterzumachen.

) : (