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.
56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useRef, useState } from "react"
|
|
import { ProductDemoFrame } from "@/components/landing/product/product-demo-frame"
|
|
import { ScaledPreviewIframe } from "@/components/landing/product/scaled-preview-iframe"
|
|
|
|
// Viewport logique « grand écran » : l'annuaire est rendu plus large puis réduit
|
|
// pour fit dans le cadre — dézoome un peu le contenu (plus de fiches visibles).
|
|
const DIRECTORY_DEMO_VIEWPORT_WIDTH = 1040
|
|
const DIRECTORY_DEMO_VIEWPORT_HEIGHT = 700
|
|
const DIRECTORY_DEMO_ASPECT_RATIO =
|
|
DIRECTORY_DEMO_VIEWPORT_WIDTH / DIRECTORY_DEMO_VIEWPORT_HEIGHT
|
|
|
|
export function UlticardsDirectoryDemo() {
|
|
const ref = useRef<HTMLDivElement>(null)
|
|
const [visible, setVisible] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const node = ref.current
|
|
if (!node) return
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
if (entries.some((entry) => entry.isIntersecting)) {
|
|
setVisible(true)
|
|
observer.disconnect()
|
|
}
|
|
},
|
|
{ rootMargin: "120px 0px" }
|
|
)
|
|
observer.observe(node)
|
|
return () => observer.disconnect()
|
|
}, [])
|
|
|
|
return (
|
|
<div ref={ref}>
|
|
<ProductDemoFrame
|
|
fakeUrl="suite.votre-domaine.fr/contacts"
|
|
fullscreenHref="/demo/contacts"
|
|
hint="Démo interactive — parcourez, créez et éditez des fiches. Zéro rétention."
|
|
aspectRatio={DIRECTORY_DEMO_ASPECT_RATIO}
|
|
>
|
|
<div className="absolute inset-0 bg-[var(--landing-bg)]">
|
|
<ScaledPreviewIframe
|
|
src="/demo/contacts"
|
|
title="Démo carnet d'adresses UltiCards"
|
|
viewportWidth={DIRECTORY_DEMO_VIEWPORT_WIDTH}
|
|
viewportHeight={DIRECTORY_DEMO_VIEWPORT_HEIGHT}
|
|
fit="cover"
|
|
ready={visible}
|
|
/>
|
|
</div>
|
|
</ProductDemoFrame>
|
|
</div>
|
|
)
|
|
}
|