tenext redesign

components/sections/about/WhoWeAre.tsx

@@ -0,0 +1,58 @@
+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>
+  );
+}