59 lines
2.4 KiB
TypeScript
59 lines
2.4 KiB
TypeScript
import { SectionContainer } from "@/components/shared/SectionContainer";
|
|
import { PageContainer } from "@/components/shared/PageContainer";
|
|
import { RevealOnView } from "@/components/shared/RevealOnView";
|
|
import { Icon } from "@/components/shared/Icon";
|
|
import { whoWeAre } from "@/data/about";
|
|
|
|
/** WhoWeAre — balanced two-column: positioning statement + what/who/why. */
|
|
export function WhoWeAre() {
|
|
return (
|
|
<SectionContainer paddingY="lg" className="bg-white px-[20px]">
|
|
<PageContainer>
|
|
<div className="grid grid-cols-1 gap-[50px] lg:grid-cols-2 lg:gap-[80px]">
|
|
{/* Left */}
|
|
<RevealOnView>
|
|
<span className="tenext-subheading mb-[16px] text-tenext-teal" style={{ fontFamily: "var(--font-sora)" }}>
|
|
{whoWeAre.eyebrow}
|
|
</span>
|
|
<h2
|
|
className="max-w-[480px] tracking-[-0.03em] text-tenext-dark"
|
|
style={{
|
|
fontFamily: "var(--font-dm-sans)",
|
|
fontSize: "clamp(30px, 3.6vw, 48px)",
|
|
fontWeight: 500,
|
|
lineHeight: 1.12,
|
|
}}
|
|
>
|
|
{whoWeAre.title}
|
|
</h2>
|
|
<p className="mt-[24px] max-w-[460px] text-[17px] leading-[1.75] text-tenext-text-muted">
|
|
{whoWeAre.lead}
|
|
</p>
|
|
</RevealOnView>
|
|
|
|
{/* Right */}
|
|
<div className="flex flex-col gap-[24px]">
|
|
{whoWeAre.points.map((point, index) => (
|
|
<RevealOnView key={point.title} delay={index * 90}>
|
|
<div className="flex gap-[22px] rounded-[25px] border border-tenext-card-border p-[30px] transition-transform duration-300 hover:-translate-y-1">
|
|
<span className="flex h-[54px] w-[54px] shrink-0 items-center justify-center rounded-[15px] bg-tenext-teal/10 text-tenext-teal">
|
|
<Icon name={point.icon} className="h-[26px] w-[26px]" />
|
|
</span>
|
|
<div>
|
|
<h3 className="mb-[8px] font-[var(--font-sora)] text-[19px] font-bold text-tenext-dark">
|
|
{point.title}
|
|
</h3>
|
|
<p className="text-[15px] leading-[1.7] text-tenext-text-muted">
|
|
{point.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</RevealOnView>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</PageContainer>
|
|
</SectionContainer>
|
|
);
|
|
}
|