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 » réduit de 20 % (1440→1200) pour zoomer le
|
|
// contenu de +20 % sans coupe. Le ratio (1.6) reste celui du parent.
|
|
export const ULTIDOCS_DEMO_VIEWPORT_WIDTH = 1200
|
|
export const ULTIDOCS_DEMO_VIEWPORT_HEIGHT = 750
|
|
export const ULTIDOCS_DEMO_ASPECT_RATIO =
|
|
ULTIDOCS_DEMO_VIEWPORT_WIDTH / ULTIDOCS_DEMO_VIEWPORT_HEIGHT
|
|
|
|
export function UltidriveDocsDemo() {
|
|
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/drive/docs/demo/edit"
|
|
fullscreenHref="/demo/docs"
|
|
hint="Éditeur UltiDocs réel — mise en forme, tableaux et images. Rien n'est sauvegardé."
|
|
aspectRatio={ULTIDOCS_DEMO_ASPECT_RATIO}
|
|
>
|
|
<div className="absolute inset-0 bg-[var(--landing-bg)]">
|
|
<ScaledPreviewIframe
|
|
src="/demo/docs"
|
|
title="Démo éditeur UltiDocs"
|
|
viewportWidth={ULTIDOCS_DEMO_VIEWPORT_WIDTH}
|
|
viewportHeight={ULTIDOCS_DEMO_VIEWPORT_HEIGHT}
|
|
fit="cover"
|
|
ready={visible}
|
|
/>
|
|
</div>
|
|
</ProductDemoFrame>
|
|
</div>
|
|
)
|
|
}
|