feat: update UI to glassmorphic design and copper theme

2026-09-08 02:06:32 +03:30
parent 35a558db20
commit ddd986e037
94 changed files with 6973 additions and 959 deletions
@@ -6,25 +6,13 @@ import { Timeline } from '../components/home/Timeline'
 import { WhyUs } from '../components/home/WhyUs'
 import { Team } from '../components/home/Team'
 import { ContactSection } from '../components/ContactSection'
-import { IMAGES } from '../data/site'

 export function About() {
-  return (
+    return (
    <>
-      <PageHero
-        title="درباره ما"
-        lead="گروه ساختمانی آرامش مجموعه‌ای از معماران، مهندسان سازه و مدیران پروژه است که از سال ۱۳۸۳ در حوزه ساخت‌وساز لوکس فعالیت می‌کند."
-        image={IMAGES[3]}
-      />
-      
-      <Story showLink={false} showLabel={false} alignTop={true}>
-        <div className="mt-12 border-r-2 border-copper bg-char/40 p-6">
-          <p className="text-sm font-light leading-8 text-ivory/80">
-            «ساختمان برای ما فقط آجر و بتن نیست؛ بلکه تعهدی است به کیفیت زندگی ساکنان. ما فضاهایی می‌سازیم که در گذر زمان ارزش و هویت خود را حفظ کنند.»
-          </p>
-          <p className="mt-5 text-sm font-bold text-copper">کامران آرامش — مدیرعامل شرکت ساختمانی آرامش</p>
-        </div>
-      </Story>
+      <PageHero pageKey="about" />
+
+      <Story showLink={false} showLabel={false} showQuote={true} alignTop={true} />

      <Stats />
      <Timeline />
@@ -33,4 +21,4 @@ export function About() {
      <ContactSection />
    </>
  )
-}
+}
@@ -1,17 +1,62 @@
 import React from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { ArrowLeftIcon, ChevronLeftIcon, ClockIcon } from 'lucide-react';
+import { renderToHTMLString } from '@tiptap/static-renderer';
 import { Reveal } from '../components/Reveal';
 import { ButtonLink } from '../components/Button';
 import { ArticleCard } from '../components/ArticleCard';
 import { Newsletter } from '../components/home/Newsletter';
 import { useSite } from '../api';
+import { applySeo } from '../seo';
+import { useEffect } from 'react';
+import { ARTICLE_EXTENSIONS } from '../components/admin/ArticleEditor';
+import type { Article } from '../data/site';
+
+/** بدنه مقاله را به HTML تبدیل می‌کند — سند TipTap جدید یا پاراگراف‌های قدیمی */
+function renderBody(article: Article): { html: string | null; legacy: string[] } {
+  const body = article.body as unknown;
+  if (Array.isArray(body)) return { html: null, legacy: body };
+  if (body && typeof body === 'object' && (body as { type?: string }).type === 'doc') {
+    try {
+      return {
+        html: renderToHTMLString({ extensions: ARTICLE_EXTENSIONS, content: body as never }),
+        legacy: [],
+      };
+    } catch {
+      return { html: null, legacy: [] };
+    }
+  }
+  return { html: null, legacy: [] };
+}

 export function ArticleDetail() {
  const { slug } = useParams<{slug: string;}>();
-  const { articles } = useSite();
+  const { articles, brand } = useSite();
  const article = articles.find((a) => a.slug === slug);

+  // عنوان تب، توضیح متا، OG و JSON-LD از خود مقاله
+  useEffect(() => {
+    if (!article) return;
+    applySeo({
+      title: `${article.title} | ${brand}`,
+      description: article.excerpt,
+      path: `/blog/${article.slug}`,
+      image: article.image,
+      type: 'article',
+      jsonLd: {
+        '@context': 'https://schema.org',
+        '@type': 'Article',
+        headline: article.title,
+        description: article.excerpt,
+        image: article.image ? new URL(article.image, window.location.origin).href : undefined,
+        inLanguage: 'fa',
+        author: { '@type': 'Organization', name: brand },
+        publisher: { '@type': 'Organization', name: brand },
+        mainEntityOfPage: new URL(`/blog/${article.slug}`, window.location.origin).href,
+      },
+    });
+  }, [article?.id]);
+
  if (!article) {
    return (
      <section className="flex min-h-[70vh] flex-col items-center justify-center px-6 text-center">
@@ -25,7 +70,8 @@ export function ArticleDetail() {

  }

-  const related = articles.filter((a) => a.slug !== article.slug).slice(0, 3);
+  const { html, legacy } = renderBody(article);
+  const related = articles.filter((a) => a.slug !== article.slug && a.status !== 'draft').slice(0, 3);

  return (
    <>
@@ -36,7 +82,7 @@ export function ArticleDetail() {
          className="absolute inset-0"
          style={{ background: 'linear-gradient(to top, #27221c 6%, rgba(39,34,28,0.15) 70%)' }}
          aria-hidden="true" />
-        
+
        <div className="relative mx-auto w-full max-w-site px-6 pb-16 lg:px-10">
          <nav aria-label="مسیر صفحه" className="flex items-center gap-2 text-xs font-light text-ivory/50">
            <Link to="/" className="transition-colors hover:text-copper">
@@ -67,10 +113,18 @@ export function ArticleDetail() {
              {article.excerpt}
            </p>
          </Reveal>
-          {article.body.map((paragraph, i) =>
-          <Reveal key={paragraph} delay={0.03 * i}>
-              <p className="mt-8 text-base font-light leading-10 text-ivory/70">{paragraph}</p>
+          {html ? (
+            <Reveal delay={0.05}>
+              <div
+                className="article-body mt-4 text-base font-light text-ivory/70"
+                dangerouslySetInnerHTML={{ __html: html }} />
            </Reveal>
+          ) : (
+            legacy.map((paragraph, i) =>
+            <Reveal key={i} delay={0.03 * i}>
+                <p className="mt-8 text-base font-light leading-10 text-ivory/70">{paragraph}</p>
+              </Reveal>
+            )
          )}
        </div>
      </article>
@@ -92,4 +146,4 @@ export function ArticleDetail() {
      <Newsletter />
    </>);

-}
+}
@@ -5,24 +5,69 @@ import { PageHero } from '../components/PageHero'
 import { Reveal } from '../components/Reveal'
 import { ArticleCard } from '../components/ArticleCard'
 import { Newsletter } from '../components/home/Newsletter'
-import { IMAGES } from '../data/site'
 import { useSite } from '../api'
+import { EditableItem } from '../admin/Editable'
+import { PlusIcon } from 'lucide-react'
+
+function DraftBadge({ className = '' }: { className?: string }) {
+  return (
+    <span
+      className={`border border-amber-400/60 bg-ink/90 px-2 py-1 text-xs font-bold text-amber-300 ${className}`}
+    >
+      پیش‌نویس
+    </span>
+  )
+}

 export function Blog() {
  const { articles } = useSite()
+
+  // حالت خالی — وبلاگ بدون مقاله نباید کرش کند
+  if (articles.length === 0) {
+    return (
+      <>
+        <PageHero pageKey="blog" />
+        <section className="bg-ink py-24 lg:py-32" aria-label="مقالات">
+          <div className="mx-auto max-w-site px-6 text-center lg:px-10">
+            <h2 className="text-3xl font-bold text-ivory">هنوز مقاله‌ای منتشر نشده است</h2>
+            <p className="mt-4 text-sm font-light text-ivory/60">
+              به‌زودی نخستین نوشته‌های ما اینجا منتشر می‌شود.
+            </p>
+            <Link
+              to="/admin/write"
+              data-admin-link
+              className="mt-8 inline-flex items-center gap-2 bg-copper px-6 py-3 text-sm font-bold text-char transition-transform duration-200 hover:scale-105"
+            >
+              <PlusIcon className="h-4 w-4" />
+              نوشتن مقاله جدید
+            </Link>
+          </div>
+        </section>
+        <Newsletter />
+      </>
+    )
+  }
+
  const [featured, ...rest] = articles

  return (
    <>
-      <PageHero
-        title="وبلاگ"
-        lead="یادداشت‌های تیم معماری، اجرا و سرمایه‌گذاری گروه ساختمانی آرامش درباره آنچه در کارگاه و بازار می‌گذرد."
-        image={IMAGES[2]}
-      />
+      <PageHero pageKey="blog" />

      <section className="bg-ink py-24 lg:py-32" aria-label="مقالات">
        <div className="mx-auto max-w-site px-6 lg:px-10">
+          <div className="mb-10 flex justify-start">
+            <Link
+              to="/admin/write"
+              data-admin-link
+              className="flex items-center gap-2 bg-copper px-6 py-3 text-sm font-bold text-char transition-transform duration-200 hover:scale-105"
+            >
+              <PlusIcon className="h-4 w-4" />
+              نوشتن مقاله جدید
+            </Link>
+          </div>
          <Reveal>
+            <EditableItem resource="articles" item={featured} editHref={`/admin/write/${featured.id}`}>
            <Link
              to={`/blog/${featured.slug}`}
              className="group grid items-stretch border border-ivory/10 bg-char transition-[transform,box-shadow,border-color] duration-300 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-lift lg:grid-cols-2"
@@ -36,7 +81,12 @@ export function Blog() {
                />
              </div>
              <div className="flex flex-col justify-center p-8 lg:p-12">
-                <p className="text-xs font-light text-copper">مقاله ویژه — {featured.category}</p>
+                <p className="text-xs font-light text-copper">
+                  مقاله ویژه — {featured.category}
+                  {featured.status === 'draft' && (
+                    <DraftBadge className="mr-3 inline-block align-middle" />
+                  )}
+                </p>
                <h2 className="mt-6 text-2xl font-bold leading-[2.2] md:leading-[2.2] text-ivory transition-colors duration-200 ease-lux group-hover:text-copper md:text-3xl">
                  {featured.title}
                </h2>
@@ -56,12 +106,20 @@ export function Blog() {
                </div>
              </div>
            </Link>
+            </EditableItem>
          </Reveal>

          <div className="mt-12 grid gap-6 lg:grid-cols-3">
            {rest.map((article, i) => (
-              <Reveal key={article.slug} delay={0.05 * i} className="h-full">
-                <ArticleCard article={article} />
+              <Reveal key={article.id} delay={0.05 * i} className="h-full">
+                <EditableItem resource="articles" item={article} className="h-full" editHref={`/admin/write/${article.id}`}>
+                  <div className="relative h-full">
+                    {article.status === 'draft' && (
+                      <DraftBadge className="absolute left-3 top-3 z-10" />
+                    )}
+                    <ArticleCard article={article} />
+                  </div>
+                </EditableItem>
              </Reveal>
            ))}
          </div>
@@ -71,4 +129,4 @@ export function Blog() {
      <Newsletter />
    </>
  )
-}
+}
@@ -2,28 +2,21 @@ import React from 'react'
 import { PageHero } from '../components/PageHero'
 import { ContactSection } from '../components/ContactSection'
 import { Reveal } from '../components/Reveal'
-import { IMAGES } from '../data/site'
-
-const OFFICES = [
-  { city: 'تهران', address: 'خیابان ولیعصر، برج آرامش، طبقه هجدهم', hours: 'شنبه تا چهارشنبه، ۹ تا ۱۸' },
-  { city: 'اصفهان', address: 'خیابان چهارباغ بالا، مجتمع پارسه، طبقه ششم', hours: 'شنبه تا چهارشنبه، ۹ تا ۱۷' },
-  { city: 'نوشهر', address: 'بلوار دریا، دفتر پروژه دریاکنار', hours: 'شنبه تا پنجشنبه، ۱۰ تا ۱۶' },
-]
+import { useSite } from '../api'
+import { AddItemButton, EditableItem } from '../admin/Editable'

 export function ContactPage() {
+  const { offices } = useSite()
+  
  return (
    <>
-      <PageHero
-        title="تماس با ما"
-        lead="برای مشاوره ساخت، سرمایه‌گذاری یا بازدید از پروژه‌ها، تیم ما در سه شهر آماده پاسخ‌گویی است."
-        image={IMAGES[1]} 
-      />
+      <PageHero pageKey="contact" />

      <section className="bg-ink py-24" aria-label="دفاتر ما">
        <div className="mx-auto grid max-w-site gap-6 px-6 md:grid-cols-3 lg:px-10">
-          {OFFICES.map((office, i) => (
-            <Reveal key={office.city} delay={0.06 * i} className="h-full">
-              {/* اعمال فرمول برای نرم شدن بالا آمدن کارت، بدون هیچ تغییری روی متن‌ها */}
+          {offices.map((office, i) => (
+            <Reveal key={office.id} delay={0.06 * i} className="h-full">
+              <EditableItem resource="offices" item={office} className="h-full">
              <article className="flex h-full flex-col border border-ivory/10 bg-char px-8 py-12 text-center transition-all duration-300 ease-out hover:-translate-y-2 hover:border-copper/40 hover:shadow-lift transform-gpu will-change-transform">
                <h2 className="text-2xl font-bold text-copper">{office.city}</h2>
                <p className="mt-6 text-sm font-light leading-9 text-ivory/70">{office.address}</p>
@@ -33,12 +26,14 @@ export function ContactPage() {
                  </p>
                </div>
              </article>
+              </EditableItem>
            </Reveal>
          ))}
+          <AddItemButton resource="offices" />
        </div>
      </section>

      <ContactSection />
    </>
  )
-}
+}
@@ -2,19 +2,14 @@ import React from 'react'
 import { PageHero } from '../components/PageHero'
 import { Faq } from '../components/home/Faq'
 import { ContactSection } from '../components/ContactSection'
-import { IMAGES } from '../data/site'

 export function FaqPage() {
-  return (
+    return (
    <>
-      <PageHero
-        title="سوالات متداول"
-        lead="پیش از تماس، شاید پاسخ پرسش شما همین‌جا باشد. اگر نبود، خوشحال می‌شویم مستقیم صحبت کنیم."
-        image={IMAGES[1]}
-      />
-      
+      <PageHero pageKey="faq" />
+
      <Faq hideHeading={true} />
-      
+
      <ContactSection />
    </>
  )
@@ -4,53 +4,33 @@ import { Reveal } from '../components/Reveal'
 import { SectionHeading } from '../components/SectionHeading'
 import { Stats } from '../components/home/Stats'
 import { ContactSection } from '../components/ContactSection'
-import { IMAGES } from '../data/site'
-
-const MODELS = [
-  {
-    title: 'مشارکت در ساخت',
-    desc: 'مالک زمین و گروه ساختمانی آرامش در سود پروژه شریک می‌شوند؛ اجرا، مجوزها و فروش بر عهده ماست.',
-    points: ['ارزیابی رایگان زمین', 'قرارداد شفاف با ضمانت اجرا', 'گزارش ماهانه پیشرفت'],
-  },
-  {
-    title: 'صندوق پروژه‌محور',
-    desc: 'سرمایه‌گذاری روی یک پروژه مشخص با واحدهای قابل خرید و بازدهی محاسبه‌شده در پایان دوره.',
-    points: ['حداقل دوره ۲۴ ماه', 'گزارش ارزش‌گذاری فصلی', 'امکان انتقال واحد سرمایه'],
-  },
-  {
-    title: 'پیش‌خرید واحد',
-    desc: 'خرید واحد مسکونی یا تجاری در مراحل ابتدایی ساخت با قیمت پیش از تکمیل و پرداخت مرحله‌ای.',
-    points: ['پرداخت مرحله‌ای متناسب با پیشرفت', 'امکان شخصی‌سازی پلان', 'تضمین زمان تحویل'],
-  },
-]
+import { useSectionHeading, useSite } from '../api'
+import { AddItemButton, EditableItem } from '../admin/Editable'

 export function Investment() {
+  const { investment_models } = useSite()
+    const heading = useSectionHeading('investment_models')
+
  return (
    <>
-      <PageHero
-        title="سرمایه‌گذاری"
-        lead="سه مسیر روشن برای ورود به بازار ساخت‌وساز لوکس، با ساختار مالی شفاف و گزارش‌دهی منظم."
-        image={IMAGES[4]}
-      />
+      <PageHero pageKey="investment" />

      <section className="bg-ink py-24 lg:py-32" aria-labelledby="models-title">
        <div className="mx-auto max-w-site px-6 lg:px-10">
-          <SectionHeading
-            title="مدل‌های همکاری"
-            lead="بسته به میزان سرمایه، افق زمانی و سطح ریسکی که می‌پذیرید، یکی از این سه مسیر مناسب شماست."
-          />
+          <SectionHeading title={heading.title} lead={heading.lead} />
          <div className="mt-14 grid gap-6 lg:grid-cols-3">
-            {MODELS.map((model, i) => (
-              <Reveal key={model.title} delay={0.06 * i} className="h-full">
+            {investment_models.map((model, i) => (
+              <Reveal key={model.id} delay={0.06 * i} className="h-full">
+                <EditableItem resource="investment_models" item={model} className="h-full">
                <article className="group flex h-full flex-col border border-ivory/10 bg-char p-10 transition-all duration-300 ease-out hover:-translate-y-2 hover:border-copper/40 hover:shadow-lift transform-gpu will-change-transform">
                  <p className="text-sm font-bold text-copper/80">۰{(i + 1).toLocaleString('fa-IR')}</p>
-                  
+
                  <h3 className="mt-6 text-2xl font-bold text-ivory transition-colors duration-300 ease-out group-hover:text-copper">
                    {model.title}
                  </h3>
-                  
+
                  <p className="mt-5 text-sm font-light leading-9 text-ivory/65">{model.desc}</p>
-                  
+
                  <div className="mt-auto pt-10">
                    <ul className="space-y-4 border-t border-ivory/10 pt-8">
                      {model.points.map((point) => (
@@ -62,8 +42,10 @@ export function Investment() {
                    </ul>
                  </div>
                </article>
+                </EditableItem>
              </Reveal>
            ))}
+            <AddItemButton resource="investment_models" />
          </div>
        </div>
      </section>
@@ -72,4 +54,4 @@ export function Investment() {
      <ContactSection />
    </>
  )
-}
+}
@@ -6,15 +6,28 @@ import { ButtonLink } from '../components/Button'
 import { ProjectCard } from '../components/ProjectCard'
 import { ContactSection } from '../components/ContactSection'
 import { Lightbox } from '../components/Lightbox'
-import { STATUS_LABEL } from '../data/site'
-import { useSite } from '../api'
+import { useEffect } from 'react';
+import { useSite, useStatusLabel } from '../api';
+import { applySeo } from '../seo';

 export function ProjectDetail() {
  const { slug } = useParams<{ slug: string }>()
-  const { projects } = useSite()
+  const { projects, brand } = useSite()
  const project = projects.find((p) => p.slug === slug)
+  const statusLabel = useStatusLabel(project?.status ?? '')
  const [lightbox, setLightbox] = useState<number | null>(null)

+  // عنوان تب، توضیح متا و OG از خود پروژه
+  useEffect(() => {
+    if (!project) return;
+    applySeo({
+      title: `${project.title} | ${brand}`,
+      description: project.summary,
+      path: `/projects/${project.slug}`,
+      image: project.image,
+    });
+  }, [project?.id]);
+
  if (!project) {
    return (
      <section className="flex min-h-[70vh] flex-col items-center justify-center px-6 text-center">
@@ -74,7 +87,7 @@ export function ProjectDetail() {
          <Reveal className="order-1">
            <span className="flex items-center gap-3 text-sm font-light text-copper">
              <span aria-hidden="true" className="h-px w-8 bg-copper" />
-              {STATUS_LABEL[project.status]}
+              {statusLabel}
            </span>
            <h2 className="mt-4 text-3xl font-bold text-ivory">درباره پروژه</h2>
            
@@ -4,25 +4,36 @@ import { Reveal } from '../components/Reveal';
 import { ProjectCard } from '../components/ProjectCard';
 import { Gallery } from '../components/home/Gallery';
 import { ContactSection } from '../components/ContactSection';
-import { IMAGES, type ProjectStatus } from '../data/site';
-import { useSite } from '../api';
-
-const FILTERS: {key: ProjectStatus;label: string;}[] = [
-{ key: 'done', label: 'انجام شده' },
-{ key: 'progress', label: 'در حال انجام' }];
-
+import type { ProjectStatus } from '../data/site';
+import { useSite, useStatusLabel } from '../api';
+import { useFieldSaver } from '../admin/AdminContext';
+import { InlineEdit } from '../components/admin/InlineEdit';
+import { AddItemButton, EditableItem } from '../admin/Editable';

 export function Projects() {
-  const { projects } = useSite();
+  const { projects, status_labels } = useSite();
+  const save = useFieldSaver();
+
+  const saveStatusLabel = (key: string, value: string) => {
+    const label = status_labels.find((s) => s.key === key);
+    if (!label) return;
+    void save('status-labels', label.id, { label: value }, (d) => {
+      const s = d.status_labels.find((x) => x.id === label.id);
+      if (s) s.label = value;
+    });
+  };
+
+  const doneLabel = useStatusLabel('done');
+  const progressLabel = useStatusLabel('progress');
+  const FILTERS: {key: ProjectStatus;label: string;}[] = [
+  { key: 'done', label: doneLabel },
+  { key: 'progress', label: progressLabel }];
  const [status, setStatus] = useState<ProjectStatus>('done');
  const list = projects.filter((p) => p.status === status);

  return (
    <>
-      <PageHero
-        title="پروژه‌ها"
-        lead="مجموعه‌ای از برج‌های مسکونی، مراکز تجاری و ویلاهای اختصاصی؛ از پروژه‌های تحویل‌شده تا کارگاه‌های فعال امروز."
-        image={IMAGES[0]} />
+      <PageHero pageKey="projects" />
      

      <section className="bg-ink py-24 lg:py-32" aria-label="فهرست پروژه‌ها">
@@ -48,7 +59,10 @@ export function Projects() {

              }
                <span className="relative z-10 transition-colors duration-300 ease-lux group-hover:text-char">
-                  {filter.label}
+                  <InlineEdit
+                    value={filter.label}
+                    onSave={(v) => saveStatusLabel(filter.key, v)}
+                  />
                </span>
              </button>
            )}
@@ -56,10 +70,13 @@ export function Projects() {

          <div className="mt-12 grid gap-6 lg:grid-cols-3">
            {list.map((project, i) =>
-            <Reveal key={project.slug} delay={0.05 * i} className="h-full">
-                <ProjectCard project={project} imageClass="h-80" />
+            <Reveal key={project.id} delay={0.05 * i} className="h-full">
+                <EditableItem resource="projects" item={project} className="h-full">
+                  <ProjectCard project={project} imageClass="h-80" />
+                </EditableItem>
              </Reveal>
            )}
+            <AddItemButton resource="projects" />
          </div>
        </div>
      </section>
@@ -5,39 +5,35 @@ import { Faq } from '../components/home/Faq'
 import { ContactSection } from '../components/ContactSection'
 import { Reveal } from '../components/Reveal'
 import { SectionHeading } from '../components/SectionHeading'
-import { IMAGES } from '../data/site'
-
-const PROCESS = [
-  { step: '۰۱', title: 'مطالعه و امکان‌سنجی', desc: 'بررسی زمین، ضوابط شهری و تحلیل بازدهی اقتصادی پروژه.' },
-  { step: '۰۲', title: 'طراحی و فاز اجرایی', desc: 'کانسپت معماری، طراحی سازه و تأسیسات و تهیه نقشه‌های اجرایی.' },
-  { step: '۰۳', title: 'اجرا و کنترل کیفیت', desc: 'ساخت با نظارت مستمر، گزارش ماهانه پیشرفت و کنترل هزینه.' },
-  { step: '۰۴', title: 'تحویل و پشتیبانی', desc: 'تحویل کلید، آموزش بهره‌برداری و پنج سال پشتیبانی فنی.' },
-]
+import { useSectionHeading, useSite } from '../api'
+import { AddItemButton, EditableItem } from '../admin/Editable'

 export function ServicesPage() {
+  const { process_steps } = useSite()
+    const heading = useSectionHeading('process')
+
  return (
    <>
-      <PageHero
-        title="خدمات"
-        lead="هشت حوزه تخصصی که چرخه کامل یک پروژه ساختمانی را از ایده تا بهره‌برداری پوشش می‌دهند."
-        image={IMAGES[1]}
-      />
-      
+      <PageHero pageKey="services" />
+
      <Services />

      <section className="bg-char py-24 lg:py-32" aria-labelledby="process-title">
        <div className="mx-auto max-w-site px-6 lg:px-10">
-          <SectionHeading title="فرآیند کار ما" lead="چهار مرحله شفاف، از نخستین جلسه تا تحویل کلید." align="center" />
+          <SectionHeading title={heading.title} lead={heading.lead} align="center" />
          <div className="mt-14 grid gap-px bg-ivory/10 md:grid-cols-2 lg:grid-cols-4">
-            {PROCESS.map((item, i) => (
-              <Reveal key={item.step} delay={0.06 * i} className="h-full">
+            {process_steps.map((item, i) => (
+              <Reveal key={item.id} delay={0.06 * i} className="h-full">
+                <EditableItem resource="process_steps" item={item} className="h-full">
                <div className="flex h-full flex-col justify-center bg-char px-6 py-14 text-center">
                  <p className="text-4xl font-bold text-copper">{item.step}</p>
                  <h3 className="mt-6 text-xl font-bold text-ivory">{item.title}</h3>
                  <p className="mt-4 text-base font-light leading-9 text-ivory/60">{item.desc}</p>
                </div>
+                </EditableItem>
              </Reveal>
            ))}
+            <AddItemButton resource="process_steps" />
          </div>
        </div>
      </section>
@@ -46,4 +42,4 @@ export function ServicesPage() {
      <ContactSection />
    </>
  )
-}
+}