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.
88 lines
3.1 KiB
TypeScript
88 lines
3.1 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { Icon } from "@iconify/react"
|
|
import { LandingReveal } from "@/components/landing/landing-reveal"
|
|
import { ProductSectionHeading } from "@/components/landing/product/product-section-heading"
|
|
import type { ProductIntegration } from "@/components/landing/product/product-data"
|
|
|
|
export function ProductIntegrations({
|
|
integrations,
|
|
accent,
|
|
}: {
|
|
integrations: ProductIntegration[]
|
|
accent: string
|
|
}) {
|
|
return (
|
|
<section id="integrations" className="scroll-mt-20 px-4 py-20 sm:px-6">
|
|
<div className="mx-auto flex w-full max-w-6xl flex-col gap-12">
|
|
<ProductSectionHeading
|
|
eyebrow="Écosystème"
|
|
title={
|
|
<>
|
|
Connecté aux apps{" "}
|
|
<span className="landing-gradient-text">de la suite</span>
|
|
</>
|
|
}
|
|
description="Ultimail s'intègre nativement aux autres applications UltiSuite — même identité, mêmes contacts, même stockage."
|
|
accent={accent}
|
|
/>
|
|
|
|
<ul className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
{integrations.map((app, index) => {
|
|
const card = (
|
|
<div className="landing-glass landing-halo-card flex h-full flex-col gap-4 rounded-2xl p-6">
|
|
<div className="flex items-center justify-between">
|
|
<span
|
|
className="flex size-12 items-center justify-center rounded-xl"
|
|
style={{ backgroundColor: `${app.accent}1a` }}
|
|
>
|
|
<img
|
|
src={app.icon}
|
|
alt=""
|
|
className="size-7 object-contain"
|
|
draggable={false}
|
|
aria-hidden
|
|
/>
|
|
</span>
|
|
{app.href ? (
|
|
<Icon
|
|
icon="mdi:arrow-top-right"
|
|
className="size-4 text-[var(--landing-muted)] transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
|
|
aria-hidden
|
|
/>
|
|
) : null}
|
|
</div>
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-wider text-[var(--landing-muted)]">
|
|
{app.tagline}
|
|
</p>
|
|
<h3 className="text-lg font-semibold tracking-tight">
|
|
{app.name}
|
|
</h3>
|
|
</div>
|
|
<p className="text-sm text-[var(--landing-muted)]">{app.description}</p>
|
|
</div>
|
|
)
|
|
|
|
return (
|
|
<LandingReveal as="li" key={app.name} delay={index * 0.08}>
|
|
{app.href ? (
|
|
<Link
|
|
href={app.href}
|
|
className="group block h-full rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
|
|
>
|
|
{card}
|
|
</Link>
|
|
) : (
|
|
card
|
|
)}
|
|
</LandingReveal>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|