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.
101 lines
3.5 KiB
TypeScript
101 lines
3.5 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { Icon } from "@iconify/react"
|
|
import { LandingReveal } from "@/components/landing/landing-reveal"
|
|
import type { ProductPageData } from "@/components/landing/product/product-data"
|
|
|
|
export function ProductHero({ data }: { data: ProductPageData }) {
|
|
return (
|
|
<section className="relative px-4 pb-10 pt-14 sm:px-6 sm:pt-20">
|
|
<div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-8 text-center">
|
|
<LandingReveal>
|
|
<span
|
|
className="landing-glass inline-flex items-center gap-2.5 rounded-full px-4 py-1.5 text-xs font-medium sm:text-sm"
|
|
style={{ color: data.accent }}
|
|
>
|
|
<img
|
|
src={data.icon}
|
|
alt=""
|
|
className="size-4 object-contain"
|
|
draggable={false}
|
|
aria-hidden
|
|
/>
|
|
{data.heroEyebrow}
|
|
</span>
|
|
</LandingReveal>
|
|
|
|
<LandingReveal delay={0.08}>
|
|
<div className="flex flex-col items-center gap-5">
|
|
<span
|
|
className="flex size-20 items-center justify-center rounded-2xl sm:size-24"
|
|
style={{
|
|
backgroundColor: `${data.accent}18`,
|
|
boxShadow: `0 0 60px -12px ${data.accent}55`,
|
|
}}
|
|
>
|
|
<img
|
|
src={data.icon}
|
|
alt=""
|
|
className="size-12 object-contain sm:size-14"
|
|
draggable={false}
|
|
aria-hidden
|
|
/>
|
|
</span>
|
|
<p className="text-[11px] font-semibold uppercase tracking-wider text-[var(--landing-muted)]">
|
|
{data.tagline}
|
|
</p>
|
|
<h1 className="text-balance text-4xl font-bold leading-[1.06] tracking-tight sm:text-6xl lg:text-7xl">
|
|
{data.heroTitle}
|
|
<br />
|
|
<span
|
|
className="landing-gradient-text"
|
|
style={
|
|
{
|
|
"--landing-glow-a": data.accent,
|
|
"--landing-glow-b": data.accent,
|
|
"--landing-glow-c": data.accent,
|
|
} as React.CSSProperties
|
|
}
|
|
>
|
|
{data.heroTitleAccent}
|
|
</span>
|
|
</h1>
|
|
</div>
|
|
</LandingReveal>
|
|
|
|
<LandingReveal delay={0.16}>
|
|
<p className="mx-auto max-w-2xl text-balance text-base leading-relaxed text-[var(--landing-muted)] sm:text-lg">
|
|
{data.description}
|
|
</p>
|
|
</LandingReveal>
|
|
|
|
<LandingReveal delay={0.24} className="flex flex-wrap items-center justify-center gap-3">
|
|
<Link
|
|
href={data.ctas.primary.href}
|
|
className="landing-cta landing-cta--primary h-12 px-7 text-base"
|
|
style={
|
|
{
|
|
"--landing-glow-a": data.accent,
|
|
"--landing-glow-b": data.accent,
|
|
"--landing-glow-c": data.accent,
|
|
} as React.CSSProperties
|
|
}
|
|
>
|
|
{data.ctas.primary.label}
|
|
<Icon icon="mdi:arrow-right" className="size-5" aria-hidden />
|
|
</Link>
|
|
{data.ctas.secondary ? (
|
|
<Link
|
|
href={data.ctas.secondary.href}
|
|
className="landing-cta landing-cta--ghost h-12 px-7 text-base"
|
|
>
|
|
{data.ctas.secondary.label}
|
|
</Link>
|
|
) : null}
|
|
</LandingReveal>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|