efaaf16f60
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
- Refactored metadata for contacts, administration, and Ulticards pages to utilize dynamic app names and descriptions. - Introduced new product pages for Ultiai, Ultical, Ulticards, Ultidrive, Ultimail, and Ultimeet with appropriate metadata. - Enhanced layout components to ensure consistent styling and functionality across new product sections. - Updated various components to replace hardcoded labels with dynamic references to improve maintainability and consistency.
70 lines
2.5 KiB
TypeScript
70 lines
2.5 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { Icon } from "@iconify/react"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
type ProductDemoFrameProps = {
|
|
fakeUrl: string
|
|
hint?: string
|
|
fullscreenHref?: string
|
|
heightClass?: string
|
|
/** Rapport largeur/hauteur de la zone contenu (ex. 1440/900). Prioritaire sur heightClass. */
|
|
aspectRatio?: number
|
|
children: React.ReactNode
|
|
className?: string
|
|
}
|
|
|
|
export function ProductDemoFrame({
|
|
fakeUrl,
|
|
hint,
|
|
fullscreenHref,
|
|
heightClass = "h-[22rem] sm:h-[26rem] lg:h-[28rem]",
|
|
aspectRatio,
|
|
children,
|
|
className,
|
|
}: ProductDemoFrameProps) {
|
|
return (
|
|
<div className={cn("flex flex-col gap-3", className)}>
|
|
<div className="landing-glass-strong overflow-hidden rounded-2xl shadow-[0_32px_70px_-36px_rgba(30,40,90,0.45)]">
|
|
<div className="flex items-center gap-1.5 px-3 py-2.5">
|
|
<span className="size-2.5 rounded-full bg-[#ff5f57]" aria-hidden />
|
|
<span className="size-2.5 rounded-full bg-[#febc2e]" aria-hidden />
|
|
<span className="size-2.5 rounded-full bg-[#28c840]" aria-hidden />
|
|
<div className="ml-3 flex h-7 min-w-0 flex-1 items-center gap-2 rounded-full bg-[var(--landing-chip)] px-3 text-xs text-[var(--landing-muted)]">
|
|
<Icon icon="mdi:lock-outline" className="size-3.5 shrink-0" aria-hidden />
|
|
<span className="truncate">{fakeUrl}</span>
|
|
</div>
|
|
{fullscreenHref ? (
|
|
<Link
|
|
href={fullscreenHref}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex h-7 items-center gap-1.5 rounded-full px-2.5 text-xs font-medium text-[var(--landing-muted)] transition-colors hover:bg-[var(--landing-chip)] hover:text-[var(--landing-fg)]"
|
|
title="Ouvrir la démo en plein écran"
|
|
>
|
|
<Icon icon="mdi:open-in-new" className="size-4" aria-hidden />
|
|
<span className="hidden sm:inline">Plein écran</span>
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
"relative w-full overflow-hidden border-t border-[var(--landing-line)] bg-[var(--landing-bg)]",
|
|
aspectRatio ? undefined : heightClass
|
|
)}
|
|
style={aspectRatio ? { aspectRatio } : undefined}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
{hint ? (
|
|
<p className="flex items-start gap-2 text-sm text-[var(--landing-muted)]">
|
|
<Icon icon="mdi:incognito" className="mt-0.5 size-4 shrink-0" aria-hidden />
|
|
{hint}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|