tenext redesign

components/sections/about/OurStory.tsx

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