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.
124 lines
4.9 KiB
TypeScript
124 lines
4.9 KiB
TypeScript
"use client"
|
|
|
|
import { Icon } from "@iconify/react"
|
|
import { LandingReveal } from "@/components/landing/landing-reveal"
|
|
import { ProductSectionHeading } from "@/components/landing/product/product-section-heading"
|
|
import type { ProductInteropSection as ProductInteropSectionData } from "@/components/landing/product/product-data"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export function ProductInteropSection({
|
|
section,
|
|
accent,
|
|
}: {
|
|
section: ProductInteropSectionData
|
|
accent: string
|
|
}) {
|
|
return (
|
|
<section id="interoperabilite" className="scroll-mt-20 px-4 py-16 sm:px-6 sm:py-20">
|
|
<div className="mx-auto flex w-full max-w-6xl flex-col gap-12">
|
|
<ProductSectionHeading
|
|
eyebrow={section.eyebrow}
|
|
title={section.title}
|
|
description={section.description}
|
|
accent={accent}
|
|
/>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
{section.providers.map((provider, index) => (
|
|
<LandingReveal key={provider.name} delay={index * 0.05}>
|
|
<article className="landing-glass flex h-full flex-col gap-4 rounded-2xl p-5">
|
|
<div className="flex items-center gap-3">
|
|
<span
|
|
className={cn(
|
|
"flex size-11 shrink-0 items-center justify-center rounded-xl",
|
|
provider.brandLogo
|
|
? "bg-white shadow-sm ring-1 ring-[var(--landing-line)]"
|
|
: undefined
|
|
)}
|
|
style={
|
|
provider.brandLogo
|
|
? undefined
|
|
: {
|
|
backgroundColor: `${provider.accent}14`,
|
|
color: provider.accent,
|
|
}
|
|
}
|
|
>
|
|
<Icon
|
|
icon={provider.icon}
|
|
className={provider.brandLogo ? "size-7" : "size-6"}
|
|
aria-hidden
|
|
/>
|
|
</span>
|
|
<div className="min-w-0">
|
|
<h3 className="font-semibold tracking-tight">{provider.name}</h3>
|
|
<p className="text-sm text-[var(--landing-muted)]">{provider.tagline}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid flex-1 grid-cols-1 gap-3 sm:grid-cols-2">
|
|
<div
|
|
className={cn(
|
|
"rounded-xl border border-[var(--landing-line)] bg-[var(--landing-bg)]/60 p-3.5"
|
|
)}
|
|
>
|
|
<p className="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-[var(--landing-muted)]">
|
|
<Icon icon="mdi:account-outline" className="size-3.5" aria-hidden />
|
|
Personnel
|
|
</p>
|
|
<p className="mt-2 text-sm leading-relaxed text-[var(--landing-fg)]">
|
|
{provider.personal}
|
|
</p>
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
"rounded-xl border border-[var(--landing-line)] bg-[var(--landing-bg)]/60 p-3.5"
|
|
)}
|
|
>
|
|
<p className="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-[var(--landing-muted)]">
|
|
<Icon icon="mdi:domain" className="size-3.5" aria-hidden />
|
|
Entreprise
|
|
</p>
|
|
<p className="mt-2 text-sm leading-relaxed text-[var(--landing-fg)]">
|
|
{provider.enterprise}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</LandingReveal>
|
|
))}
|
|
</div>
|
|
|
|
{section.features.length > 0 ? (
|
|
<LandingReveal delay={0.1}>
|
|
<ul className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
|
{section.features.map((feature) => (
|
|
<li
|
|
key={feature.title}
|
|
className="landing-glass flex gap-3 rounded-xl p-4"
|
|
>
|
|
<span
|
|
className="flex size-9 shrink-0 items-center justify-center rounded-lg"
|
|
style={{
|
|
backgroundColor: `${accent}14`,
|
|
color: accent,
|
|
}}
|
|
>
|
|
<Icon icon={feature.icon} className="size-4" aria-hidden />
|
|
</span>
|
|
<div className="min-w-0">
|
|
<h4 className="text-sm font-semibold tracking-tight">{feature.title}</h4>
|
|
<p className="mt-0.5 text-xs text-[var(--landing-muted)]">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</LandingReveal>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|