58 lines
3.0 KiB
TypeScript
58 lines
3.0 KiB
TypeScript
import Link from "next/link";
|
|
import { SectionContainer } from "@/components/shared/SectionContainer";
|
|
import { PageContainer } from "@/components/shared/PageContainer";
|
|
import { SectionHeading } from "@/components/shared/SectionHeading";
|
|
import { RevealOnView } from "@/components/shared/RevealOnView";
|
|
import { ArrowIcon } from "@/components/shared/icons/ArrowIcon";
|
|
import { Icon } from "@/components/shared/Icon";
|
|
import { industries } from "@/data/site-pages";
|
|
import { industryIcons } from "@/data/about";
|
|
|
|
/** AboutIndustries — premium industry cards (replaces the plain text list). */
|
|
export function AboutIndustries() {
|
|
return (
|
|
<SectionContainer paddingY="lg" className="bg-white px-[20px]">
|
|
<PageContainer>
|
|
<SectionHeading
|
|
tag="industries"
|
|
title="Depth across the industries you operate in"
|
|
description="We bring domain understanding and engineering rigor to the sectors where Tenext delivers transformation."
|
|
titleClassName="text-tenext-dark max-w-[720px]"
|
|
descriptionClassName="max-w-[620px]"
|
|
className="mb-[50px]"
|
|
/>
|
|
|
|
<div className="grid grid-cols-1 gap-[20px] sm:grid-cols-2 lg:grid-cols-3">
|
|
{industries.map((industry, index) => (
|
|
<RevealOnView key={industry.id} delay={index * 80}>
|
|
<Link
|
|
href={`/industries#${industry.id}`}
|
|
className="group relative flex h-full flex-col justify-between overflow-hidden rounded-[25px] border border-tenext-card-border bg-tenext-dark p-[35px] transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_22px_55px_rgba(31,31,31,0.22)]"
|
|
>
|
|
<div className="pointer-events-none absolute -right-[20%] -top-[30%] h-[240px] w-[240px] rounded-full bg-[radial-gradient(circle,rgba(69,208,189,0.16),transparent_65%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
|
|
|
|
<span className="relative flex h-[60px] w-[60px] items-center justify-center rounded-[16px] bg-white/[0.06] text-tenext-teal">
|
|
<Icon name={industryIcons[industry.id] ?? "building"} className="h-[28px] w-[28px]" />
|
|
</span>
|
|
|
|
<div className="relative mt-[70px]">
|
|
<h3 className="font-[var(--font-dm-sans)] text-[22px] font-bold text-white">
|
|
{industry.title}
|
|
</h3>
|
|
<p className="mt-[12px] text-[15px] leading-[1.7] text-tenext-text-muted">
|
|
{industry.description}
|
|
</p>
|
|
</div>
|
|
|
|
<span className="relative mt-[24px] flex h-[42px] w-[42px] items-center justify-center rounded-full border border-white/15 text-white transition-colors duration-300 group-hover:bg-tenext-teal group-hover:text-tenext-dark">
|
|
<ArrowIcon className="h-[14px] w-[14px]" />
|
|
</span>
|
|
</Link>
|
|
</RevealOnView>
|
|
))}
|
|
</div>
|
|
</PageContainer>
|
|
</SectionContainer>
|
|
);
|
|
}
|