61 lines
2.3 KiB
TypeScript
61 lines
2.3 KiB
TypeScript
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 { Icon } from "@/components/shared/Icon";
|
|
import { ourStory } from "@/data/about";
|
|
|
|
const focusAreas = [
|
|
{ icon: "code", label: "Engineering" },
|
|
{ icon: "cloud", label: "Cloud" },
|
|
{ icon: "cpu", label: "AI" },
|
|
{ icon: "database", label: "Data" },
|
|
{ icon: "workflow", label: "Digital Transformation" },
|
|
{ icon: "chart", label: "Business Outcomes" },
|
|
];
|
|
|
|
/** OurStory — company narrative with a focus-area rail. */
|
|
export function OurStory() {
|
|
return (
|
|
<SectionContainer paddingY="lg" className="bg-tenext-surface-muted px-[20px]">
|
|
<PageContainer>
|
|
<div className="grid grid-cols-1 gap-[50px] lg:grid-cols-[0.85fr_1.15fr] lg:gap-[80px]">
|
|
<RevealOnView>
|
|
<SectionHeading
|
|
tag={ourStory.eyebrow}
|
|
title={ourStory.title}
|
|
titleClassName="text-tenext-dark"
|
|
/>
|
|
<div className="mt-[36px] grid grid-cols-2 gap-[14px]">
|
|
{focusAreas.map((area) => (
|
|
<div
|
|
key={area.label}
|
|
className="flex items-center gap-[12px] rounded-[15px] border border-tenext-card-border bg-white px-[18px] py-[14px]"
|
|
>
|
|
<span className="text-tenext-teal">
|
|
<Icon name={area.icon} className="h-[20px] w-[20px]" />
|
|
</span>
|
|
<span className="text-[14px] font-semibold text-tenext-dark font-[var(--font-sora)]">
|
|
{area.label}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</RevealOnView>
|
|
|
|
<RevealOnView delay={120} className="flex flex-col gap-[24px]">
|
|
{ourStory.paragraphs.map((paragraph, i) => (
|
|
<p
|
|
key={i}
|
|
className={`leading-[1.85] text-tenext-text-muted ${i === 0 ? "text-[19px] text-tenext-dark" : "text-[16px]"}`}
|
|
>
|
|
{paragraph}
|
|
</p>
|
|
))}
|
|
</RevealOnView>
|
|
</div>
|
|
</PageContainer>
|
|
</SectionContainer>
|
|
);
|
|
}
|