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.
70 lines
2.7 KiB
TypeScript
70 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import { Icon } from "@iconify/react"
|
|
import { LandingReveal } from "@/components/landing/landing-reveal"
|
|
import type { ProductPageData } from "@/components/landing/product/product-data"
|
|
|
|
export function ProductHighlights({
|
|
section,
|
|
accent,
|
|
}: {
|
|
section: ProductPageData["highlightsSection"]
|
|
accent: string
|
|
}) {
|
|
return (
|
|
<section id="pourquoi" className="scroll-mt-20 px-4 py-20 sm:px-6">
|
|
<div className="mx-auto w-full max-w-6xl">
|
|
<LandingReveal>
|
|
<div className="landing-glass-strong relative overflow-hidden rounded-3xl px-6 py-12 sm:px-12 sm:py-16">
|
|
<div
|
|
className="pointer-events-none absolute inset-0 opacity-60"
|
|
style={{
|
|
background: `radial-gradient(60% 90% at 15% 0%, color-mix(in oklab, ${accent} 22%, transparent), transparent 70%), radial-gradient(50% 80% at 90% 100%, color-mix(in oklab, ${accent} 14%, transparent), transparent 70%)`,
|
|
}}
|
|
aria-hidden
|
|
/>
|
|
<div className="relative flex flex-col gap-10">
|
|
<div className="flex max-w-2xl flex-col gap-4">
|
|
<span
|
|
className="inline-flex w-fit items-center gap-2 rounded-full px-3.5 py-1 text-xs font-semibold uppercase tracking-wider"
|
|
style={{
|
|
backgroundColor: `${accent}1a`,
|
|
color: accent,
|
|
}}
|
|
>
|
|
<Icon icon="mdi:lightning-bolt-outline" className="size-4" aria-hidden />
|
|
{section.eyebrow}
|
|
</span>
|
|
<h2 className="text-balance text-3xl font-bold tracking-tight sm:text-4xl">
|
|
{section.title}
|
|
</h2>
|
|
<p className="text-base leading-relaxed text-[var(--landing-muted)]">
|
|
{section.description}
|
|
</p>
|
|
</div>
|
|
|
|
<dl className="grid grid-cols-2 gap-6 lg:grid-cols-4">
|
|
{section.highlights.map((stat, index) => (
|
|
<LandingReveal key={stat.label} delay={index * 0.08}>
|
|
<div
|
|
className="flex flex-col gap-1 border-l-2 pl-4"
|
|
style={{ borderColor: accent }}
|
|
>
|
|
<dt className="order-2 text-sm text-[var(--landing-muted)]">
|
|
{stat.label}
|
|
</dt>
|
|
<dd className="order-1 text-3xl font-bold tracking-tight sm:text-4xl">
|
|
{stat.value}
|
|
</dd>
|
|
</div>
|
|
</LandingReveal>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</LandingReveal>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|