Redesign about page and stabilize site data

src/app/aboutus/page.tsx

@@ -1,115 +1,25 @@
 import type { Metadata } from "next";
 
-import atelier from "@/assets/images/about/atelier.jpg";
-import about from "@/assets/images/about/about.jpg";
-import heroImage from "@/assets/images/hero/hero-2.jpg";
-import heroImageMobile from "@/assets/images/hero/hero-2-mobile.jpg";
-import { Pillars } from "@/components/about/Pillars";
-import { Editorial } from "@/components/shared/Editorial";
-import { FullBleed } from "@/components/shared/FullBleed";
-import { PageCta } from "@/components/shared/PageCta";
-import { PageHero } from "@/components/shared/PageHero";
-import { ProjectGallery } from "@/components/shared/ProjectGallery";
-import { Reveal } from "@/components/Reveal";
+import { OmniyatAbout } from "@/components/about/OmniyatAbout";
 import { SiteFooter } from "@/components/SiteFooter";
 import { SiteHeader } from "@/components/SiteHeader";
-import { aboutPage } from "@/data/site";
 import { getRecentPortfolios, toDisplayProject } from "@/lib/api";
 
-export const revalidate = 300; // keep in sync with api.ts PAGE_REVALIDATE_SECONDS
+export const revalidate = 300;
 
 export const metadata: Metadata = {
   title: "درباره ما",
-  description:
-    "از سال ۱۳۷۹، دیدگاه مهندس قاسم رئوفی‌منش مسیر گروه رئوفی را تعریف کرده است؛ دیدگاهی که هر پروژه را به تجربه‌ای اصیل و ماندگار از سبک زندگی ارتقاء می‌دهد.",
+  description: "روایت شکل‌گیری، ارزش‌ها و مسیر گروه ساختمانی رئوفی از سال ۱۳۷۹ تا امروز.",
 };
 
 export default async function AboutPage() {
-  const portfolios = await getRecentPortfolios(12);
+  const portfolios = await getRecentPortfolios(8);
   const displayProjects = portfolios.map(toDisplayProject);
 
   return (
     <>
       <SiteHeader />
-
-      <main>
-        <PageHero
-          image={heroImage}
-          imageMobile={heroImageMobile}
-          title={aboutPage.hero.title}
-          breadcrumb={aboutPage.hero.breadcrumb}
-        />
-
-        {/* Overview */}
-        <section className="bg-paper">
-          <Editorial
-            caption={aboutPage.overview.caption}
-            captionLatin={aboutPage.overview.captionLatin}
-            title={aboutPage.overview.title}
-            body={aboutPage.overview.body}
-          />
-          <FullBleed image={atelier} alt="معماری پروژه‌های گروه ساختمانی رئوفی" />
-        </section>
-
-        {/* Philosophy */}
-        <section className="bg-sand">
-          <Editorial
-            caption={aboutPage.philosophy.caption}
-            captionLatin={aboutPage.philosophy.captionLatin}
-            title={aboutPage.philosophy.title}
-            body={aboutPage.philosophy.body}
-          />
-        </section>
-
-        {/* Foundations */}
-        <section className="bg-paper">
-          <Editorial
-            caption={aboutPage.pillars.caption}
-            captionLatin={aboutPage.pillars.captionLatin}
-            title={aboutPage.pillars.title}
-            body={aboutPage.pillars.body}
-          />
-          <Pillars />
-        </section>
-
-        {/* Portfolio */}
-        <section className="bg-sand">
-          <Editorial
-            caption={aboutPage.portfolio.caption}
-            captionLatin={aboutPage.portfolio.captionLatin}
-            title={aboutPage.portfolio.title}
-            body={aboutPage.portfolio.body}
-          />
-          <ProjectGallery projects={displayProjects} />
-        </section>
-
-        {/* Closing statement */}
-        <section className="bg-paper">
-          <div className="mx-auto max-w-[1400px] px-6 py-24 text-center lg:px-12 lg:py-48">
-            <Reveal>
-              <p className="mx-auto max-w-[860px] text-[1.35rem] leading-[2.1] font-light text-ink lg:text-[1.75rem] lg:leading-[2]">
-                {aboutPage.closing.body}
-              </p>
-            </Reveal>
-
-            <Reveal delay={140}>
-              <span
-                aria-hidden="true"
-                className="mx-auto mt-14 block h-px w-24 bg-gold"
-              />
-            </Reveal>
-          </div>
-
-          <FullBleed image={about} alt="نمای پروژه‌های گروه ساختمانی رئوفی" />
-        </section>
-
-        <PageCta
-          caption={aboutPage.cta.caption}
-          title={aboutPage.cta.title}
-          action={aboutPage.cta.action}
-        />
-      </main>
-
+      <OmniyatAbout projects={displayProjects} />
       <SiteFooter />
     </>
   );