From e2f6853c2c7a2d0e0a19071ecad3c95ed686a961 Mon Sep 17 00:00:00 2001
From: aramesh-site deploy <deploy@aramesh-site.local>
Date: Fri, 9 Oct 2026 15:26:56 +0000
Subject: [PATCH] =?UTF-8?q?feat(design):=20=D8=A8=D8=A7=D8=B2=DA=AF=D8=B1?=
 =?UTF-8?q?=D8=AF=D8=A7=D9=86=D8=AF=D9=86=20=D8=B1=DB=8C=D8=AA=D9=85=20?=
 =?UTF-8?q?=D8=AA=D9=86=D8=A7=D9=88=D8=A8=20=D9=BE=D8=B3=E2=80=8C=D8=B2?=
 =?UTF-8?q?=D9=85=DB=8C=D9=86=D9=87=D9=94=20=D8=A8=D8=AE=D8=B4=E2=80=8C?=
 =?UTF-8?q?=D9=87=D8=A7=20=E2=80=94=20=D9=87=D8=B1=20=D8=B5=D9=81=D8=AD?=
 =?UTF-8?q?=D9=87=20=D8=A8=D8=A7=20=D8=A8=D8=AE=D8=B4=20=D8=B3=DB=8C=D8=A7?=
 =?UTF-8?q?=D9=87=20=D8=B4=D8=B1=D9=88=D8=B9=20=D9=88=20=D8=B3=DB=8C=D8=A7?=
 =?UTF-8?q?=D9=87/=D8=AE=D8=A7=DA=A9=D8=B3=D8=AA=D8=B1=DB=8C=20=DB=8C?=
 =?UTF-8?q?=DA=A9=DB=8C=E2=80=8C=D8=AF=D8=B1=D9=85=DB=8C=D8=A7=D9=86=20?=
 =?UTF-8?q?=D8=A7=D8=AF=D8=A7=D9=85=D9=87=20=D9=85=DB=8C=E2=80=8C=DB=8C?=
 =?UTF-8?q?=D8=A7=D8=A8=D8=AF=20(=D9=BE=D8=B1=D8=A7=D9=BE=20tone=20=D8=A8?=
 =?UTF-8?q?=D8=B1=D8=A7=DB=8C=20=D8=A8=D8=AE=D8=B4=E2=80=8C=D9=87=D8=A7?=
 =?UTF-8?q?=DB=8C=20=D9=85=D8=B4=D8=AA=D8=B1=DA=A9=20=DA=86=D9=86=D8=AF?=
 =?UTF-8?q?=D8=B5=D9=81=D8=AD=D9=87=E2=80=8C=D8=A7=DB=8C)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/home/BeforeAfter.tsx      |  2 +-
 frontend/src/components/home/Faq.tsx              |  4 ++--
 frontend/src/components/home/FeaturedProjects.tsx |  2 +-
 frontend/src/components/home/Services.tsx         |  4 ++--
 frontend/src/components/home/Stats.tsx            |  4 ++--
 frontend/src/components/home/Story.tsx            |  6 ++++--
 frontend/src/components/home/Team.tsx             |  4 ++--
 frontend/src/components/home/Timeline.tsx         |  4 ++--
 frontend/src/components/home/WhyUs.tsx            |  4 ++--
 frontend/src/pages/About.tsx                      | 10 +++++-----
 frontend/src/pages/ArticleDetail.tsx              |  4 ++--
 frontend/src/pages/Blog.tsx                       |  4 ++--
 frontend/src/pages/FaqPage.tsx                    |  2 +-
 frontend/src/pages/Investment.tsx                 |  4 ++--
 frontend/src/pages/ServicesPage.tsx               |  4 ++--
 15 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/home/BeforeAfter.tsx b/frontend/src/components/home/BeforeAfter.tsx
index c45dd75..a27ab6d 100644
--- a/frontend/src/components/home/BeforeAfter.tsx
+++ b/frontend/src/components/home/BeforeAfter.tsx
@@ -48,7 +48,7 @@ export function BeforeAfter() {
   }
 
   return (
-    <section className="bg-char py-24 lg:py-32" aria-labelledby="ba-title">
+    <section className="bg-ink py-24 lg:py-32" aria-labelledby="ba-title">
       <div className="mx-auto max-w-site px-6 lg:px-10">
         
         <SectionHeading
diff --git a/frontend/src/components/home/Faq.tsx b/frontend/src/components/home/Faq.tsx
index 3dc02d1..5e89737 100644
--- a/frontend/src/components/home/Faq.tsx
+++ b/frontend/src/components/home/Faq.tsx
@@ -11,13 +11,13 @@ type FaqProps = {
   hideHeading?: boolean;
 }
 
-export function Faq({ hideHeading = false }: FaqProps) {
+export function Faq({ hideHeading = false, tone = 'gray' }: FaqProps & { tone?: 'black' | 'gray' }) {
   const { faqs } = useSite()
   const { t } = useLang()
   const [open, setOpen] = useState<number | null>(0)
 
   return (
-    <section className="bg-ink py-24 lg:py-32" aria-labelledby="faq-title">
+    <section className={`${tone === 'black' ? 'bg-char' : 'bg-ink'} py-24 lg:py-32`} aria-labelledby="faq-title">
 
       <div className={hideHeading ? "mx-auto max-w-4xl px-6 lg:px-10" : "mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-12 lg:px-10"}>
 
diff --git a/frontend/src/components/home/FeaturedProjects.tsx b/frontend/src/components/home/FeaturedProjects.tsx
index 304f3ef..297de99 100644
--- a/frontend/src/components/home/FeaturedProjects.tsx
+++ b/frontend/src/components/home/FeaturedProjects.tsx
@@ -22,7 +22,7 @@ export function FeaturedProjects() {
     .sort((a, b) => FEATURED_TITLES.indexOf(a.title) - FEATURED_TITLES.indexOf(b.title))
 
   return (
-    <section className="bg-ink py-24 lg:py-32" aria-labelledby="projects-title">
+    <section className="bg-char py-24 lg:py-32" aria-labelledby="projects-title">
       <div className="mx-auto max-w-site px-6 lg:px-10">
         <SectionHeading title={heading.title} lead={heading.lead} headingKey="featured_projects" />
 
diff --git a/frontend/src/components/home/Services.tsx b/frontend/src/components/home/Services.tsx
index 09f9397..fc4a4c9 100644
--- a/frontend/src/components/home/Services.tsx
+++ b/frontend/src/components/home/Services.tsx
@@ -6,7 +6,7 @@ import { useFieldSaver } from '../../admin/AdminContext'
 import { InlineEdit } from '../admin/InlineEdit'
 import { AddItemButton, EditableItem } from '../../admin/Editable'
 
-export function Services() {
+export function Services({ tone = 'black' }: { tone?: 'black' | 'gray' } = {}) {
   const { services } = useSite()
   const heading = useSectionHeading('services')
   const save = useFieldSaver()
@@ -18,7 +18,7 @@ export function Services() {
     })
 
   return (
-    <section className="bg-ink py-24 lg:py-32" aria-labelledby="services-title">
+    <section className={`${tone === 'black' ? 'bg-char' : 'bg-ink'} py-24 lg:py-32`} aria-labelledby="services-title">
       <div className="mx-auto max-w-site px-6 lg:px-10">
         <Reveal className="max-w-2xl text-start">
 
diff --git a/frontend/src/components/home/Stats.tsx b/frontend/src/components/home/Stats.tsx
index 6a64629..926c2b5 100644
--- a/frontend/src/components/home/Stats.tsx
+++ b/frontend/src/components/home/Stats.tsx
@@ -65,13 +65,13 @@ function Counter({ value }: { value: string | number }) {
   return <span ref={ref}>{renderValue}</span>;
 }
 
-export function Stats() {
+export function Stats({ tone = 'black' }: { tone?: 'black' | 'gray' } = {}) {
   const { stats } = useSite();
   const { t } = useLang();
   const save = useFieldSaver();
 
   return (
-    <section className="bg-char py-16" aria-label={t('statsAria')}>
+    <section className={`${tone === 'black' ? 'bg-char' : 'bg-ink'} py-16`} aria-label={t('statsAria')}>
       <div className="mx-auto grid max-w-site grid-cols-2 gap-y-12 px-6 lg:grid-cols-4 lg:px-10">
         {stats.map((stat) =>
         <EditableItem key={stat.id} resource="stats" item={stat}>
diff --git a/frontend/src/components/home/Story.tsx b/frontend/src/components/home/Story.tsx
index 8cd985d..9c70c5a 100644
--- a/frontend/src/components/home/Story.tsx
+++ b/frontend/src/components/home/Story.tsx
@@ -14,9 +14,11 @@ type StoryProps = {
   showQuote?: boolean;
   alignTop?: boolean;
   children?: React.ReactNode;
+  /** پس‌زمینه: black = char (تیره) و gray = ink (روشن‌تر) — ریتم تناوب بخش‌ها */
+  tone?: 'black' | 'gray';
 }
 
-export function Story({ showLink = true, showLabel = true, showQuote = false, alignTop = false, children }: StoryProps) {
+export function Story({ showLink = true, showLabel = true, showQuote = false, alignTop = false, tone = 'gray', children }: StoryProps) {
   const { story } = useSite()
   const { href } = useLang()
   const save = useFieldSaver()
@@ -33,7 +35,7 @@ export function Story({ showLink = true, showLabel = true, showQuote = false, al
   }
 
   return (
-    <section id="story" className="bg-ink py-24 lg:py-32" aria-labelledby="story-title">
+    <section id="story" className={`${tone === 'black' ? 'bg-char' : 'bg-ink'} py-24 lg:py-32`} aria-labelledby="story-title">
       <div className={`mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-2 lg:px-10 ${alignTop ? 'items-start' : 'items-center'}`}>
         <div>
           {showLabel && (
diff --git a/frontend/src/components/home/Team.tsx b/frontend/src/components/home/Team.tsx
index 8a155f9..b63dd71 100644
--- a/frontend/src/components/home/Team.tsx
+++ b/frontend/src/components/home/Team.tsx
@@ -5,11 +5,11 @@ import { useSite } from '../../api'
 import { useLang } from '../../i18n/lang'
 import { AddItemButton, EditableItem } from '../../admin/Editable'
 
-export function Team() {
+export function Team({ tone = 'gray' }: { tone?: 'black' | 'gray' } = {}) {
   const { team } = useSite()
   const { t } = useLang()
   return (
-    <section className="bg-ink py-24 lg:py-32" aria-labelledby="team-title" >
+    <section className={`${tone === 'black' ? 'bg-char' : 'bg-ink'} py-24 lg:py-32`} aria-labelledby="team-title" >
       <div className="mx-auto max-w-site px-6 lg:px-10 ">
         <SectionHeading
           title={t('fallbackTeamTitle')}
diff --git a/frontend/src/components/home/Timeline.tsx b/frontend/src/components/home/Timeline.tsx
index 304c10c..cb6c02c 100644
--- a/frontend/src/components/home/Timeline.tsx
+++ b/frontend/src/components/home/Timeline.tsx
@@ -52,7 +52,7 @@ function Item({ item, index, featured = false, onLi }: { item: Milestone; index:
   )
 }
 
-export function Timeline() {
+export function Timeline({ tone = 'gray' }: { tone?: 'black' | 'gray' } = {}) {
   const { timeline } = useSite()
   const { t } = useLang()
   const ref = useRef<HTMLOListElement>(null)
@@ -85,7 +85,7 @@ export function Timeline() {
   }, [])
 
   return (
-    <section className="bg-char py-24 md:py-32" aria-labelledby="timeline-title">
+    <section className={`${tone === 'black' ? 'bg-char' : 'bg-ink'} py-24 md:py-32`} aria-labelledby="timeline-title">
       <div className="mx-auto w-full max-w-site px-6 lg:px-10">
 
         <div className="mb-16">
diff --git a/frontend/src/components/home/WhyUs.tsx b/frontend/src/components/home/WhyUs.tsx
index 4ae1d81..f8ae052 100644
--- a/frontend/src/components/home/WhyUs.tsx
+++ b/frontend/src/components/home/WhyUs.tsx
@@ -7,7 +7,7 @@ import { InlineEdit } from '../admin/InlineEdit';
 import { useFieldSaver } from '../../admin/AdminContext';
 import { useLang, formatNumber } from '../../i18n/lang';
 
-export function WhyUs() {
+export function WhyUs({ tone = 'black' }: { tone?: 'black' | 'gray' } = {}) {
   const { why_us } = useSite();
   const { lang } = useLang();
   const heading = useSectionHeading('why_us');
@@ -20,7 +20,7 @@ export function WhyUs() {
     });
 
   return (
-    <section className="bg-ink py-24 lg:py-32" aria-labelledby="why-title">
+    <section className={`${tone === 'black' ? 'bg-char' : 'bg-ink'} py-24 lg:py-32`} aria-labelledby="why-title">
       <div className="mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-12 lg:px-10">
         <div className="lg:col-span-5">
           <SectionHeading
diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx
index 60e21fa..d1f1218 100644
--- a/frontend/src/pages/About.tsx
+++ b/frontend/src/pages/About.tsx
@@ -12,12 +12,12 @@ export function About() {
     <>
       <PageHero pageKey="about" />
 
-      <Story showLink={false} showLabel={false} showQuote={true} alignTop={true} />
+      <Story showLink={false} showLabel={false} showQuote={true} alignTop={true} tone="black" />
 
-      <Stats />
-      <Timeline />
-      <WhyUs />
-      <Team />
+      <Stats tone="gray" />
+      <Timeline tone="black" />
+      <WhyUs tone="gray" />
+      <Team tone="black" />
       <ContactSection />
     </>
   )
diff --git a/frontend/src/pages/ArticleDetail.tsx b/frontend/src/pages/ArticleDetail.tsx
index c0d9232..39d2bb0 100644
--- a/frontend/src/pages/ArticleDetail.tsx
+++ b/frontend/src/pages/ArticleDetail.tsx
@@ -166,7 +166,7 @@ export function ArticleDetail() {
         </div>
       </section>
 
-      <article className="bg-ink py-20 lg:py-28">
+      <article className="bg-char py-20 lg:py-28">
         <div className="mx-auto max-w-site px-6 lg:px-10">
           <div
             dir={dir}
@@ -214,7 +214,7 @@ export function ArticleDetail() {
         </div>
       </article>
 
-      <section className="bg-char py-20 lg:py-28" aria-label={t('relatedArticlesAria')}>
+      <section className="bg-ink py-20 lg:py-28" aria-label={t('relatedArticlesAria')}>
         <div className="mx-auto max-w-site px-6 lg:px-10">
           <h2 className="text-section font-bold text-ivory">{t('relatedArticles')}</h2>
           <div className="mt-6 h-px w-24 bg-copper/70" />
diff --git a/frontend/src/pages/Blog.tsx b/frontend/src/pages/Blog.tsx
index fd27eea..8a8be9c 100644
--- a/frontend/src/pages/Blog.tsx
+++ b/frontend/src/pages/Blog.tsx
@@ -46,7 +46,7 @@ export function Blog() {
     return (
       <>
         <PageHero pageKey="blog" />
-        <section className="bg-ink py-24 lg:py-32" aria-label={t('articlesAria')}>
+        <section className="bg-char py-24 lg:py-32" aria-label={t('articlesAria')}>
           <div className="mx-auto max-w-site px-6 text-center lg:px-10">
             <h2 className="text-3xl font-bold text-ivory">{t('blogEmpty')}</h2>
             <p className="mt-4 text-sm font-light text-ivory/60">
@@ -66,7 +66,7 @@ export function Blog() {
     <>
       <PageHero pageKey="blog" />
 
-      <section className="bg-ink py-24 lg:py-32" aria-label={t('articlesAria')}>
+      <section className="bg-char py-24 lg:py-32" aria-label={t('articlesAria')}>
         <div className="mx-auto max-w-site px-6 lg:px-10">
           <div className="mb-10 flex justify-start">{writeButton}</div>
           <Reveal>
diff --git a/frontend/src/pages/FaqPage.tsx b/frontend/src/pages/FaqPage.tsx
index c2849db..01da8df 100644
--- a/frontend/src/pages/FaqPage.tsx
+++ b/frontend/src/pages/FaqPage.tsx
@@ -8,7 +8,7 @@ export function FaqPage() {
     <>
       <PageHero pageKey="faq" />
 
-      <Faq hideHeading={true} />
+      <Faq hideHeading={true} tone="black" />
 
       <ContactSection />
     </>
diff --git a/frontend/src/pages/Investment.tsx b/frontend/src/pages/Investment.tsx
index ab34985..74292ca 100644
--- a/frontend/src/pages/Investment.tsx
+++ b/frontend/src/pages/Investment.tsx
@@ -15,7 +15,7 @@ export function Investment() {
     <>
       <PageHero pageKey="investment" />
 
-      <section className="bg-ink py-24 lg:py-32" aria-labelledby="models-title">
+      <section className="bg-char py-24 lg:py-32" aria-labelledby="models-title">
         <div className="mx-auto max-w-site px-6 lg:px-10">
           <SectionHeading title={heading.title} lead={heading.lead} align="center" />
           <div className="mt-14 grid gap-6 lg:grid-cols-3">
@@ -51,7 +51,7 @@ export function Investment() {
         </div>
       </section>
 
-      <Stats />
+      <Stats tone="gray" />
       <ContactSection />
     </>
   )
diff --git a/frontend/src/pages/ServicesPage.tsx b/frontend/src/pages/ServicesPage.tsx
index fb5743f..3a536aa 100644
--- a/frontend/src/pages/ServicesPage.tsx
+++ b/frontend/src/pages/ServicesPage.tsx
@@ -36,11 +36,11 @@ export function ServicesPage() {
         </div>
       </section>
 
-      <Services />
+      <Services tone="gray" />
 
 
 
-      <Faq />
+      <Faq tone="black" />
       <ContactSection />
     </>
   )