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.
49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useRef, useState } from "react"
|
|
import { ProductDemoFrame } from "@/components/landing/product/product-demo-frame"
|
|
|
|
export function UltimailInboxDemo() {
|
|
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/mail/inbox"
|
|
fullscreenHref="/demo/mail/inbox"
|
|
hint="Démo interactive — lisez, archivez, répondez. Zéro rétention."
|
|
>
|
|
{visible ? (
|
|
<iframe
|
|
src="/demo/mail/inbox"
|
|
title="Démo boîte mail Ultimail"
|
|
loading="lazy"
|
|
className="absolute inset-0 h-full w-full"
|
|
/>
|
|
) : (
|
|
<div className="absolute inset-0 flex items-center justify-center text-sm text-[var(--landing-muted)]">
|
|
Chargement de la démo…
|
|
</div>
|
|
)}
|
|
</ProductDemoFrame>
|
|
</div>
|
|
)
|
|
}
|