kleinere fixes zur sichtbarkeit der texte in aufgabenkarten und der demo-vorschau auf der homepage.
This commit is contained in:
Codex Agent
@@ -2,6 +2,7 @@ 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';
|
||||
@@ -21,6 +22,7 @@ const DemoPage: React.FC<DemoPageProps> = ({ demoToken }) => {
|
||||
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;
|
||||
@@ -31,14 +33,29 @@ const DemoPage: React.FC<DemoPageProps> = ({ demoToken }) => {
|
||||
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 (
|
||||
<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">
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-pink-100 via-white to-white px-4 py-16 lg:pb-16 lg:pt-6 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="relative z-10 container mx-auto flex max-w-5xl flex-col gap-10 lg:flex-row lg:items-start">
|
||||
<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
|
||||
@@ -67,7 +84,7 @@ const DemoPage: React.FC<DemoPageProps> = ({ demoToken }) => {
|
||||
<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="relative mx-auto w-full max-w-[260px] rounded-[2.5rem] border border-gray-200 bg-gray-900 px-3 pb-3 pt-4 shadow-2xl sm:max-w-[300px] md:max-w-[320px] 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
|
||||
@@ -75,17 +92,20 @@ const DemoPage: React.FC<DemoPageProps> = ({ demoToken }) => {
|
||||
<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"
|
||||
className="aspect-[9/19] 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
|
||||
type="button"
|
||||
variant="link"
|
||||
className="text-pink-600 hover:text-pink-700 dark:text-pink-300"
|
||||
onClick={handleOpenDemo}
|
||||
>
|
||||
{demo.openFull}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
@@ -122,7 +142,7 @@ const DemoPage: React.FC<DemoPageProps> = ({ demoToken }) => {
|
||||
<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) => (
|
||||
{demoFeatures.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">
|
||||
@@ -153,6 +173,23 @@ const DemoPage: React.FC<DemoPageProps> = ({ demoToken }) => {
|
||||
</Alert>
|
||||
</div>
|
||||
</section>
|
||||
<Dialog open={isDemoOpen} onOpenChange={setIsDemoOpen}>
|
||||
<DialogContent className="w-[388px] max-w-[90vw] border-0 bg-transparent p-0 shadow-none">
|
||||
<div className="relative w-full rounded-[2.5rem] border border-gray-200 bg-gray-900 p-3 shadow-2xl 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>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</MarketingLayout>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user