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.
66 lines
2.2 KiB
TypeScript
66 lines
2.2 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 { ProductFeatureGroup } from "@/components/landing/product/product-data"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export function ProductFeatureGrid({
|
|
groups,
|
|
accent,
|
|
}: {
|
|
groups: ProductFeatureGroup[]
|
|
accent: string
|
|
}) {
|
|
return (
|
|
<>
|
|
{groups.map((group) => (
|
|
<section
|
|
key={group.eyebrow}
|
|
id={group.eyebrow.toLowerCase().replace(/\s+/g, "-")}
|
|
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={group.eyebrow}
|
|
title={group.title}
|
|
description={group.description}
|
|
accent={accent}
|
|
/>
|
|
|
|
<ul className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
{group.features.map((feature, index) => (
|
|
<LandingReveal
|
|
as="li"
|
|
key={feature.title}
|
|
delay={(index % 4) * 0.07}
|
|
className={cn(feature.wide && "sm:col-span-2")}
|
|
>
|
|
<div className="landing-glass landing-halo-card flex h-full flex-col gap-3 rounded-2xl p-6">
|
|
<span
|
|
className="flex size-11 items-center justify-center rounded-xl"
|
|
style={{
|
|
backgroundColor: `${accent}14`,
|
|
color: accent,
|
|
}}
|
|
>
|
|
<Icon icon={feature.icon} className="size-6" aria-hidden />
|
|
</span>
|
|
<h3 className="text-lg font-semibold tracking-tight">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-sm leading-relaxed text-[var(--landing-muted)]">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
</LandingReveal>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
))}
|
|
</>
|
|
)
|
|
}
|