97 lines
3.9 KiB
TypeScript
97 lines
3.9 KiB
TypeScript
import Link from "next/link";
|
|
import { tenextButton as TenextButton } from "@/components/shared/Button";
|
|
import { Icon } from "@/components/shared/Icon";
|
|
import { aboutHero } from "@/data/about";
|
|
|
|
const floatIcons = ["cloud", "cpu", "database", "code", "shield", "boxes"];
|
|
|
|
/**
|
|
* AboutHero — flagship enterprise hero.
|
|
* Left: breadcrumb, headline, supporting paragraph, primary + secondary CTA.
|
|
* Right: an asset-free glass-tile composition of capability icons (no photos).
|
|
*/
|
|
export function AboutHero() {
|
|
return (
|
|
<section className="px-5 pt-5">
|
|
<div className="relative overflow-hidden rounded-[25px] bg-tenext-dark px-[7vw] py-[80px] md:py-[110px]">
|
|
{/* Ambient gradient wash */}
|
|
<div className="pointer-events-none absolute inset-0 opacity-70">
|
|
<div className="absolute -right-[10%] -top-[30%] h-[600px] w-[600px] rounded-full bg-[radial-gradient(circle,rgba(130,88,200,0.35),transparent_60%)]" />
|
|
<div className="absolute -bottom-[40%] left-[10%] h-[500px] w-[500px] rounded-full bg-[radial-gradient(circle,rgba(69,208,189,0.18),transparent_60%)]" />
|
|
</div>
|
|
|
|
<div className="relative z-10 grid grid-cols-1 items-center gap-[50px] lg:grid-cols-[1.1fr_0.9fr]">
|
|
{/* Content */}
|
|
<div>
|
|
<nav aria-label="Breadcrumb" className="mb-[26px]">
|
|
<ol className="flex items-center gap-2 text-[13px] text-white/60">
|
|
<li>
|
|
<Link href="/" className="transition-colors hover:text-tenext-teal">
|
|
Home
|
|
</Link>
|
|
</li>
|
|
<li className="h-1 w-1 rounded-full bg-tenext-teal" />
|
|
<li className="text-white">About us</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<span className="tenext-subheading mb-[18px] text-tenext-teal" style={{ fontFamily: "var(--font-sora)" }}>
|
|
{aboutHero.eyebrow}
|
|
</span>
|
|
|
|
<h1
|
|
className="max-w-[640px] tracking-[-0.03em] text-white"
|
|
style={{
|
|
fontFamily: "var(--font-dm-sans)",
|
|
fontSize: "clamp(38px, 5vw, 72px)",
|
|
fontWeight: 600,
|
|
lineHeight: 1.06,
|
|
}}
|
|
>
|
|
{aboutHero.title}
|
|
</h1>
|
|
|
|
<p className="mt-[26px] max-w-[540px] text-[17px] leading-[1.75] text-white/80">
|
|
{aboutHero.paragraph}
|
|
</p>
|
|
|
|
<div className="mt-[40px] flex flex-wrap items-center gap-[16px]">
|
|
<TenextButton
|
|
href={aboutHero.primaryCta.href}
|
|
variant="gradient-fill"
|
|
className="rounded-[25px] px-[34px] py-[15px] text-[15px] font-semibold"
|
|
showArrow={false}
|
|
>
|
|
{aboutHero.primaryCta.label}
|
|
</TenextButton>
|
|
<TenextButton
|
|
href={aboutHero.secondaryCta.href}
|
|
variant="gradient-border"
|
|
className="rounded-[25px] px-[34px] py-[15px] text-[15px] font-medium text-white"
|
|
showArrow={true}
|
|
>
|
|
{aboutHero.secondaryCta.label}
|
|
</TenextButton>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Icon composition */}
|
|
<div className="relative hidden lg:block" aria-hidden="true">
|
|
<div className="grid grid-cols-3 gap-[16px]">
|
|
{floatIcons.map((name, i) => (
|
|
<div
|
|
key={name}
|
|
className="flex aspect-square items-center justify-center rounded-[22px] border border-white/10 bg-white/[0.04] text-tenext-teal backdrop-blur-sm transition-transform duration-500 hover:-translate-y-1"
|
|
style={{ transform: `translateY(${i % 2 === 0 ? "-12px" : "12px"})` }}
|
|
>
|
|
<Icon name={name} className="h-[34px] w-[34px]" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|