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 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 => { if (typeof window === 'undefined') { return; } const isMobile = window.matchMedia('(max-width: 768px)').matches; if (isMobile) { window.open(embedUrl, '_blank', 'noopener,noreferrer'); return; } setIsDemoOpen(true); }; return (

Demo Live

{demo.title}

{demo.subtitle}

{embedUrl ? ( <>