update

2026-08-20 10:20:42 +03:30
parent 05ea45852e
commit e40944a8a2
17 changed files with 507 additions and 735 deletions
@@ -1,29 +1,37 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { ArrowLeftIcon, ClockIcon } from 'lucide-react';
-import type { Article } from '../data/site';
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { ArrowLeftIcon, ClockIcon } from 'lucide-react'
+import type { Article } from '../data/site'

-export function ArticleCard({ article }: {article: Article;}) {
+export function ArticleCard({ article }: { article: Article }) {
  return (
    <Link
      to={`/blog/${article.slug}`}
-      className="group flex h-full flex-col border border-ivory/10 bg-char transition-[transform,box-shadow,border-color] duration-500 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-lift focus:outline-none focus-visible:ring-2 focus-visible:ring-copper"
-      aria-label={`خواندن مقاله ${article.title}`}>
-      
+      className="group flex h-full flex-col 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 focus:outline-none focus-visible:ring-2 focus-visible:ring-copper"
+      aria-label={`خواندن مقاله ${article.title}`}
+    >
      <div className="overflow-hidden">
        <img
          src={article.image}
          alt={`تصویر مقاله ${article.title}`}
-          className="h-52 w-full object-cover transition-transform duration-500 ease-lux group-hover:scale-105" />
-        
+          className="h-52 w-full object-cover transition-transform duration-500 ease-lux group-hover:scale-105"
+        />
      </div>
-      <div className="flex flex-1 flex-col p-7">
+      
+      {/* پدینگ کلی از p-7 به p-9 افزایش یافت تا فاصله متن از لبه‌های عکس و کارت بیشتر شود */}
+      <div className="flex flex-1 flex-col p-9">
        <p className="text-xs font-light text-copper">{article.category}</p>
-        <h3 className="mt-3 text-lg font-bold leading-8 text-ivory transition-colors duration-200 ease-lux group-hover:text-copper">
+        
+        {/* فاصله از بالا (mt-4) و ارتفاع خط (leading-9) برای تیتر افزایش یافت */}
+        <h3 className="mt-4 text-lg font-bold leading-9 text-ivory transition-colors duration-200 ease-lux group-hover:text-copper">
          {article.title}
        </h3>
-        <p className="mt-3 text-sm font-light leading-8 text-ivory/55">{article.excerpt}</p>
-        <div className="mt-auto flex items-center justify-between border-t border-ivory/10 pt-5 text-xs font-light text-ivory/50">
+        
+        {/* فاصله از تیتر (mt-4)، فاصله حداقلی از خط پایین (mb-6) و ارتفاع خطوط بازتر (leading-9) */}
+        <p className="mt-4 mb-6 text-sm font-light leading-9 text-ivory/60">{article.excerpt}</p>
+        
+        {/* فاصله محتوای پایینی از خط جداکننده (pt-6) بیشتر شد */}
+        <div className="mt-auto flex items-center justify-between border-t border-ivory/10 pt-6 text-xs font-light text-ivory/50">
          <span className="flex items-center gap-4">
            <span>{article.date}</span>
            <span className="flex items-center gap-1.5">
@@ -37,6 +45,6 @@ export function ArticleCard({ article }: {article: Article;}) {
          </span>
        </div>
      </div>
-    </Link>);
-
+    </Link>
+  )
 }
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react'
 import { Link, NavLink, useLocation } from 'react-router-dom'
-import { AnimatePresence, motion } from 'framer-motion'
 import { MenuIcon, PhoneIcon, XIcon } from 'lucide-react'
 import { BRAND, NAV } from '../data/site'

@@ -20,12 +19,10 @@ export function Header() {
    setOpen(false)
  }, [pathname])

-  const isSolid = scrolled || open
-
  return (
    <header
-      className={`fixed inset-x-0 top-0 z-50 transition-[background-color,border-color,backdrop-filter] duration-500 ease-lux ${
-        isSolid ? 'border-b border-ivory/10 bg-ink/95 backdrop-blur-md' : 'border-b border-transparent bg-transparent'
+      className={`fixed inset-x-0 top-0 z-50 transition-[background-color,border-color,backdrop-filter] duration-300 ease-lux ${
+        scrolled ? 'border-b border-ivory/10 bg-ink/90 backdrop-blur-md' : 'border-b border-transparent bg-transparent'
      }`}
    >
      <div className="mx-auto flex max-w-site items-center justify-between gap-8 px-6 py-4 lg:px-10">
@@ -46,7 +43,7 @@ export function Header() {
                <NavLink
                  to={item.to}
                  className={({ isActive }) =>
-                    `group relative py-2 text-[0.95rem] font-light transition-colors duration-300 ease-lux hover:text-copper ${
+                    `group relative py-2 text-[0.95rem] font-light transition-colors duration-200 ease-lux hover:text-copper ${
                      isActive ? 'text-copper' : 'text-ivory/80'
                    }`
                  }
@@ -54,10 +51,8 @@ export function Header() {
                  {({ isActive }) => (
                    <>
                      {item.label}
-                      {/* خط زیرین که از وسط باز می‌شود */}
                      <span
-                        aria-hidden="true"
-                        className={`absolute -bottom-0.5 right-0 left-0 h-px bg-copper transition-transform duration-500 ease-lux origin-center ${
+                        className={`absolute -bottom-0.5 left-0 right-0 h-px w-full origin-center bg-copper transition-transform duration-300 ease-lux ${
                          isActive ? 'scale-x-100' : 'scale-x-0 group-hover:scale-x-100'
                        }`}
                      />
@@ -72,13 +67,13 @@ export function Header() {
        <div className="flex items-center gap-3">
          <a
            href={BRAND.phoneHref}
-            className="group relative hidden items-center gap-2 overflow-hidden border border-copper/50 px-5 py-2.5 text-sm font-light text-copper lg:flex"
+            className="group relative hidden items-center gap-2 overflow-hidden border border-copper/50 px-5 py-2.5 text-sm font-medium text-copper lg:flex"
          >
            <span
              aria-hidden="true"
-              className="absolute inset-0 translate-y-full bg-copper transition-transform duration-[600ms] ease-lux group-hover:translate-y-0"
+              className="absolute inset-0 translate-y-full bg-copper transition-transform duration-300 ease-lux group-hover:translate-y-0"
            />
-            <span className="relative z-10 flex items-center gap-2 transition-colors duration-[600ms] ease-lux group-hover:text-char">
+            <span className="relative z-10 flex items-center gap-2 transition-colors duration-300 ease-lux group-hover:text-char">
              <PhoneIcon className="h-4 w-4" />
              <span dir="ltr">{BRAND.phone}</span>
            </span>
@@ -95,41 +90,26 @@ export function Header() {
        </div>
      </div>

-      <AnimatePresence>
      {open && (
-          <motion.nav
-            aria-label="ناوبری موبایل"
-            className="overflow-hidden border-t border-ivory/10 bg-ink/95 xl:hidden"
-            initial={{ height: 0, opacity: 0 }}
-            animate={{ height: 'auto', opacity: 1 }}
-            exit={{ height: 0, opacity: 0 }}
-            transition={{ duration: 0.5, ease: [0.23, 1, 0.32, 1] }}
-          >
-            <ul className="grid gap-1 px-6 py-4">
-              {NAV.map((item, i) => (
-                <motion.li
-                  key={item.to}
-                  initial={{ opacity: 0, y: -10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0 }}
-                  transition={{ duration: 0.4, delay: i * 0.05, ease: [0.23, 1, 0.32, 1] }}
-                >
+        <nav aria-label="ناوبری موبایل" className="border-t border-ivory/10 bg-ink/98 px-6 py-4 xl:hidden">
+          <ul className="grid gap-1">
+            {NAV.map((item) => (
+              <li key={item.to}>
                <NavLink
                  to={item.to}
                  className={({ isActive }) =>
                    `block border-b border-ivory/5 py-3 text-base font-light transition-colors duration-200 ease-lux ${
-                        isActive ? 'text-copper' : 'text-ivory/80 hover:text-copper'
+                      isActive ? 'text-copper' : 'text-ivory/80'
                    }`
                  }
                >
                  {item.label}
                </NavLink>
-                </motion.li>
+              </li>
            ))}
          </ul>
-          </motion.nav>
+        </nav>
      )}
-      </AnimatePresence>
    </header>
  )
 }
@@ -1,23 +1,28 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { motion } from 'framer-motion';
-import { ChevronLeftIcon } from 'lucide-react';
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { motion } from 'framer-motion'
+import { ChevronLeftIcon } from 'lucide-react'

 type PageHeroProps = {
-  title: string;
-  lead: string;
-  image: string;
-};
+  title: string
+  lead: string
+  image: string
+}

 export function PageHero({ title, lead, image }: PageHeroProps) {
  return (
    <section className="relative flex h-[58vh] min-h-[420px] items-end overflow-hidden">
      <img src={image} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" />
-      <div className="absolute inset-0 bg-ink/80" aria-hidden="true" />
+      
+      {/* تغییر اصلی اینجا است: از bg-ink/80 به bg-ink/50 تغییر دادیم */}
+      <div className="absolute inset-0 bg-ink/50" aria-hidden="true" />
+      
      <div
        className="absolute inset-0"
-        style={{ background: 'linear-gradient(to top, #27221c 6%, rgba(39,34,28,0.2) 70%)' }}
-        aria-hidden="true" />
+        /* گرادینت پایین را هم کمی ملایم‌تر کردیم تا عکس بیشتر خودش را نشان دهد */
+        style={{ background: 'linear-gradient(to top, #27221c 6%, rgba(39,34,28,0.1) 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">
@@ -31,20 +36,20 @@ export function PageHero({ title, lead, image }: PageHeroProps) {
          initial={{ opacity: 0, y: 24 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, ease: [0.23, 1, 0.32, 1] }}
-          className="mt-5 max-w-[700px] text-hero font-bold text-ivory">
-          
+          className="mt-5 max-w-[700px] text-hero font-bold text-ivory"
+        >
          {title}
        </motion.h1>
        <motion.p
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, delay: 0.1, ease: [0.23, 1, 0.32, 1] }}
-          className="mt-5 max-w-2xl text-base font-light leading-9 text-ivory/65">
-          
+          className="mt-5 max-w-2xl text-base font-light leading-9 text-ivory/65"
+        >
          {lead}
        </motion.p>
        <div className="mt-8 h-px w-28 bg-copper" />
      </div>
-    </section>);
-
+    </section>
+  )
 }
@@ -1,55 +1,56 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { ArrowLeftIcon } from 'lucide-react';
-import { STATUS_LABEL, type Project } from '../data/site';
+import React from 'react'
+import { Link } from 'react-router-dom'

-type ProjectCardProps = {
-  project: Project;
-  imageClass?: string;
-};
+export function ProjectCard({ project }: any) {
+  // اینجا کد بر اساس دیتا بیس اصلی شما تصمیم می‌گیرد
+  const isOngoing = project.status === 'progress'
  
-export function ProjectCard({ project, imageClass = 'h-72' }: ProjectCardProps) {
-  const isDone = project.status === 'done';
+  // متنی که کاربر روی عکس می‌بیند
+  const statusText = isOngoing ? 'در حال انجام' : 'انجام شده'
+  
+  // تنظیم رنگ‌ها: در حال انجام = مسی با افکت چشمک‌زن | انجام شده = شیری (سفید)
+  const dotColor = isOngoing ? 'bg-copper animate-pulse' : 'bg-ivory/60'
+  const textColor = isOngoing ? 'text-copper' : 'text-ivory/90'

  return (
-    <Link
-      to={`/projects/${project.slug}`}
-      className="group flex h-full flex-col border border-ivory/10 bg-char transition-[transform,box-shadow,border-color] duration-500 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-lift focus:outline-none focus-visible:ring-2 focus-visible:ring-copper"
-      aria-label={`مشاهده جزئیات پروژه ${project.title}`}>
+    <article className="group flex h-full flex-col overflow-hidden border border-ivory/10 bg-char transition-[transform,box-shadow,border-color] duration-500 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-lift focus:outline-none focus-visible:ring-2 focus-visible:ring-copper">
+      <Link to={`/projects/${project.slug || '#'}`} className="flex h-full flex-col focus:outline-none">
        
-      <div className="relative overflow-hidden">
+        {/* بخش تصویر */}
+        <div className="relative aspect-[4/3] w-full overflow-hidden">
          <img
            src={project.image}
-          alt={`تصویر پروژه ${project.title}`}
-          className={`w-full object-cover transition-transform duration-500 ease-lux group-hover:scale-105 ${imageClass}`} />
-        
-        <span className="absolute inset-0 bg-ink/55 opacity-0 transition-opacity duration-300 ease-lux group-hover:opacity-100" />
-        <span className="absolute inset-0 flex items-center justify-center gap-3 text-sm font-bold text-ivory opacity-0 transition-opacity duration-300 ease-lux group-hover:opacity-100">
-          مشاهده پروژه
-          <ArrowLeftIcon className="h-4 w-4 text-copper" />
-        </span>
-        <span
-          className={`absolute right-5 top-5 flex items-center gap-2 bg-ink/85 px-3 py-1.5 text-xs font-light backdrop-blur-sm ${
-          isDone ? 'text-ivory/85' : 'text-copper'}`
-          }>
-          
-          <span
-            className={`h-1.5 w-1.5 rounded-full ${isDone ? 'bg-ivory/60' : 'animate-pulse bg-copper'}`}
-            aria-hidden="true" />
-          
-          {STATUS_LABEL[project.status]}
-        </span>
+            alt={project.title}
+            className="h-full w-full object-cover transition-transform duration-700 ease-lux group-hover:scale-105"
+          />
+          {/* لیبل وضعیت پروژه */}
+          <div className={`absolute right-4 top-4 flex items-center gap-2 bg-ink/85 px-4 py-2 text-xs font-light backdrop-blur-md ${textColor}`}>
+            <span className={`h-1.5 w-1.5 rounded-full ${dotColor}`} />
+            {statusText}
          </div>
-      <div className="flex flex-1 flex-col p-7 text-center">
-        <h3 className="text-xl font-bold text-ivory transition-colors duration-200 ease-lux group-hover:text-copper">
+        </div>
+
+        {/* بخش متن */}
+        <div className="flex flex-1 flex-col p-8">
+          
+          <div className="text-center">
+            <h3 className="font-pinar text-xl font-bold text-ivory">
              {project.title}
            </h3>
-        <p className="mt-2 text-sm font-light text-ivory/50">{project.location}</p>
-        <div className="mt-auto flex items-center justify-between border-t border-ivory/10 pt-5 text-xs font-light text-ivory/55">
-          <span>سال: {project.year}</span>
-          <span>{project.area}</span>
+            <p className="mt-7 text-sm font-light text-ivory/60">
+              {project.location}
+            </p>
          </div>
-      </div>
-    </Link>);

+          <div className="my-7 h-px w-full bg-ivory/10" />
+
+          <div className="mt-auto flex items-center justify-between text-sm font-light text-ivory/60">
+            <span>سال: {project.year}</span>
+            <span>{project.area} متر مربع</span>
+          </div>
+
+        </div>
+      </Link>
+    </article>
+  )
 }
@@ -1,27 +1,35 @@
-import React, { useState } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
-import { PlusIcon } from 'lucide-react';
-import { Reveal } from '../Reveal';
-import { SectionHeading } from '../SectionHeading';
-import { FAQS } from '../../data/site';
+import React, { useState } from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { PlusIcon } from 'lucide-react'
+import { Reveal } from '../Reveal'
+import { SectionHeading } from '../SectionHeading'
+import { FAQS } from '../../data/site'

-export function Faq() {
-  const [open, setOpen] = useState<number | null>(0);
+type FaqProps = {
+  hideHeading?: boolean;
+}
+
+export function Faq({ hideHeading = false }: FaqProps) {
+  const [open, setOpen] = useState<number | null>(0)

  return (
    <section className="bg-ink py-24 lg:py-32" aria-labelledby="faq-title">
-      <div className="mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-12 lg:px-10">
+      {/* تغییر چیدمان بر اساس داشتن یا نداشتن تیتر */}
+      <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"}>
+        
+        {!hideHeading && (
          <div className="lg:col-span-4">
            <SectionHeading
              title="سوالات متداول"
-            lead="پاسخ کوتاه به پرتکرارترین پرسش‌های سرمایه‌گذاران و خریداران." />
-          
+              lead="پاسخ کوتاه به پرتکرارترین پرسش‌های سرمایه‌گذاران و خریداران."
+            />
          </div>
+        )}

-        <div className="lg:col-span-8">
+        <div className={hideHeading ? "" : "lg:col-span-8"}>
          <ul>
            {FAQS.map((faq, i) => {
-              const isOpen = open === i;
+              const isOpen = open === i
              return (
                <Reveal key={faq.q} delay={0.04 * i}>
                  <li className="border-b border-ivory/10">
@@ -29,37 +37,37 @@ export function Faq() {
                      type="button"
                      onClick={() => setOpen(isOpen ? null : i)}
                      aria-expanded={isOpen}
-                      className="flex w-full items-center justify-between gap-6 py-6 text-right transition-colors duration-200 ease-lux hover:text-copper">
-                      
+                      className="flex w-full items-center justify-between gap-6 py-6 text-right transition-colors duration-200 ease-lux hover:text-copper"
+                    >
                      <span className={`text-base font-bold md:text-lg ${isOpen ? 'text-copper' : 'text-ivory'}`}>
                        {faq.q}
                      </span>
                      <PlusIcon
                        className={`h-5 w-5 shrink-0 text-copper transition-transform duration-300 ease-lux ${
-                        isOpen ? 'rotate-45' : ''}`
-                        } />
-                      
+                          isOpen ? 'rotate-45' : ''
+                        }`}
+                      />
                    </button>
                    <AnimatePresence initial={false}>
-                      {isOpen &&
+                      {isOpen && (
                        <motion.div
                          initial={{ height: 0, opacity: 0 }}
                          animate={{ height: 'auto', opacity: 1 }}
                          exit={{ height: 0, opacity: 0 }}
                          transition={{ duration: 0.28, ease: [0.23, 1, 0.32, 1] }}
-                        className="overflow-hidden">
-                        
+                          className="overflow-hidden"
+                        >
                          <p className="pb-7 pl-10 text-sm font-light leading-9 text-ivory/60">{faq.a}</p>
                        </motion.div>
-                      }
+                      )}
                    </AnimatePresence>
                  </li>
-                </Reveal>);
-
+                </Reveal>
+              )
            })}
          </ul>
        </div>
      </div>
-    </section>);
-
+    </section>
+  )
 }
@@ -1,14 +1,14 @@
-import React from 'react';
-import { motion, useScroll, useTransform } from 'framer-motion';
-import { ArrowLeftIcon, ChevronDownIcon } from 'lucide-react';
-import { ButtonLink } from '../Button';
-import { BRAND } from '../../data/site';
+import React from 'react'
+import { motion, useScroll, useTransform } from 'framer-motion'
+import { ArrowLeftIcon, ChevronDownIcon } from 'lucide-react'
+import { ButtonLink } from '../Button'
+import { BRAND } from '../../data/site'

 export function Hero() {
-  const { scrollY } = useScroll();
-  const imageY = useTransform(scrollY, [0, 700], [0, 110]);
-  const contentY = useTransform(scrollY, [0, 700], [0, -55]);
-  const overlay = useTransform(scrollY, [0, 600], [0.5, 0.78]);
+  const { scrollY } = useScroll()
+  const imageY = useTransform(scrollY, [0, 700], [0, 110])
+  const contentY = useTransform(scrollY, [0, 700], [0, -55])
+  const overlay = useTransform(scrollY, [0, 600], [0.5, 0.78])

  return (
    <section className="relative h-screen min-h-[640px] w-full overflow-hidden" aria-label="معرفی آرامش پلازا">
@@ -16,29 +16,29 @@ export function Hero() {
        src={BRAND.hero}
        alt="نمای شبانه برج مسکونی ساخته‌شده توسط آرامش پلازا"
        style={{ y: imageY }}
-        className="absolute inset-0 h-[114%] w-full object-cover" />
-      
+        className="absolute inset-0 h-[114%] w-full object-cover"
+      />
      <motion.div className="absolute inset-0 bg-ink" style={{ opacity: overlay }} aria-hidden="true" />
      <div
        className="absolute inset-0"
        style={{
          background:
-          'linear-gradient(to top, #27221c 5%, rgba(39,34,28,0.2) 60%, rgba(39,34,28,0.6) 100%)'
+            'linear-gradient(to top, #27221c 5%, rgba(39,34,28,0.2) 60%, rgba(39,34,28,0.6) 100%)',
        }}
-        aria-hidden="true" />
-      
+        aria-hidden="true"
+      />

      <motion.div
        style={{ y: contentY }}
-        className="relative mx-auto flex h-full max-w-site flex-col justify-center px-6 lg:px-10">
-        
+        className="relative mx-auto flex h-full max-w-site flex-col justify-center px-6 lg:px-10"
+      >
        <div className="w-full max-w-[700px] lg:max-w-[58%]">
          <motion.p
            initial={{ opacity: 0, y: 18 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 2.1, ease: [0.23, 1, 0.32, 1] }}
-            className="text-sm font-light text-copper">
-            
+            className="text-sm font-light text-copper"
+          >
            از سال ۱۳۸۳ — تهران، اصفهان، سواحل شمال
          </motion.p>

@@ -46,8 +46,8 @@ export function Hero() {
            initial={{ opacity: 0, y: 28 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.85, delay: 2.2, ease: [0.23, 1, 0.32, 1] }}
-            className="mt-6 text-hero font-bold text-ivory">
-            
+            className="mt-6 text-hero font-bold text-ivory"
+          >
            ساختمانی که آرامش را
            <span className="text-copper"> معماری </span>
            می‌کند
@@ -57,8 +57,8 @@ export function Hero() {
            initial={{ opacity: 0, y: 22 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.85, delay: 2.32, ease: [0.23, 1, 0.32, 1] }}
-            className="mt-7 max-w-xl text-base font-light leading-9 text-ivory/70">
-            
+            className="mt-7 max-w-xl text-base font-light leading-9 text-ivory/70"
+          >
            طراحی، ساخت و سرمایه‌گذاری در پروژه‌های مسکونی و تجاری لوکس؛ با استانداردی که در جزئیات دیده می‌شود و در
            سال‌ها دوام می‌آورد.
          </motion.p>
@@ -67,8 +67,8 @@ export function Hero() {
            initial={{ opacity: 0, y: 22 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.85, delay: 2.44, ease: [0.23, 1, 0.32, 1] }}
-            className="mt-10 flex flex-wrap items-center gap-4">
-            
+            className="mt-10 flex flex-wrap items-center gap-4"
+          >
            <ButtonLink to="/projects" variant="copper">
              مشاهده پروژه‌ها
              <ArrowLeftIcon className="h-4 w-4" />
@@ -83,8 +83,8 @@ export function Hero() {
          initial={{ opacity: 0, x: -24 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.9, delay: 2.6, ease: [0.23, 1, 0.32, 1] }}
-          className="absolute bottom-28 left-6 hidden w-60 border border-ivory/15 bg-char/60 p-6 backdrop-blur-md lg:block lg:left-10">
-          
+          className="absolute bottom-28 left-6 hidden w-60 border border-ivory/15 bg-char/60 p-6 backdrop-blur-md lg:block lg:left-10"
+        >
          <p className="text-3xl font-bold text-copper">۴۷</p>
          <p className="mt-2 text-sm font-light leading-7 text-ivory/70">
            پروژه تحویل‌شده در بیست‌ویک سال فعالیت حرفه‌ای
@@ -95,11 +95,11 @@ export function Hero() {
      <a
        href="#story"
        aria-label="رفتن به بخش بعدی"
-        className="absolute bottom-8 right-1/2 z-10 flex translate-x-1/2 flex-col items-center gap-2 text-ivory/50 transition-colors duration-200 ease-lux hover:text-copper">
-        
+        className="absolute bottom-8 right-1/2 z-10 flex translate-x-1/2 flex-col items-center gap-2 text-ivory/50 transition-colors duration-200 ease-lux hover:text-copper"
+      >
        <span className="text-xs font-light">اسکرول کنید</span>
        <ChevronDownIcon className="h-4 w-4 animate-bounce" />
      </a>
-    </section>);
-
+    </section>
+  )
 }
@@ -1,22 +1,32 @@
 import React from 'react'
 import { Reveal } from '../Reveal'
 import { ServiceIcon } from '../ServiceIcon'
-import { SectionHeading } from '../SectionHeading'
 import { SERVICES } from '../../data/site'

-export function Services() {
+type ServicesProps = {
+  showLabel?: boolean
+}
+
+export function Services({ showLabel = true }: ServicesProps) {
  return (
    <section className="bg-ink py-24 lg:py-32" aria-labelledby="services-title">
      <div className="mx-auto max-w-site px-6 lg:px-10">
-        <SectionHeading
-          title="خدمات "
-          lead="از نخستین خط روی کاغذ تا تحویل کلید، مدیریت سرمایه و طراحی محوطه؛ همه مراحل در یک مجموعه و زیر یک نظام کنترل کیفیت."
-        />
+        <Reveal className="max-w-2xl text-right">
+          {/* لیبل "خدمات" فقط در صورتی نمایش داده می‌شود که showLabel برابر true باشد */}
+          <h2 id="services-title" className={`text-section font-bold text-ivory ${showLabel ? 'mt-5' : ''}`}>
+           خدمات
+          </h2>
+          <p className="mt-5 text-base font-light leading-9 text-ivory/60">
+            از نخستین خط روی کاغذ تا تحویل کلید، مدیریت سرمایه و طراحی محوطه؛ همه مراحل در یک مجموعه و زیر یک نظام
+            کنترل کیفیت.
+          </p>
+          <div className="mt-6 h-px w-24 bg-copper/70" />
+        </Reveal>

        <div className="mt-14 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {SERVICES.map((service, i) => (
            <Reveal key={service.title} delay={0.04 * i} className="h-full">
-              <article className="group flex h-full flex-col items-center border border-ivory/10 bg-char p-8 text-center transition-[transform,box-shadow,border-color] duration-500 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-lift">
+              <article className="group flex h-full flex-col items-center border border-ivory/10 bg-char p-8 text-center transition-[transform,box-shadow,border-color] duration-300 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-lift">
                <ServiceIcon
                  name={service.icon}
                  className="h-12 w-12 text-copper/85 transition-colors duration-300 ease-lux group-hover:text-copper"
@@ -2,7 +2,6 @@ import React from 'react'
 import { ArrowLeftIcon } from 'lucide-react'
 import { Reveal } from '../Reveal'
 import { ButtonLink } from '../Button'
-import { SectionHeading } from '../SectionHeading'
 import { IMAGES } from '../../data/site'

 const BENTO = [
@@ -12,24 +11,38 @@ const BENTO = [
  { src: IMAGES[3], alt: 'نمای شبانه برج دوقلوی نیاوران' },
 ]

-export function Story() {
+type StoryProps = {
+  showLink?: boolean;
+  showLabel?: boolean;
+  alignTop?: boolean;
+  children?: React.ReactNode; // امکان اضافه کردن محتوای دلخواه
+}
+
+export function Story({ showLink = true, showLabel = true, alignTop = false, children }: StoryProps) {
  return (
    <section id="story" className="bg-ink py-24 lg:py-32" aria-labelledby="story-title">
-      <div className="mx-auto grid max-w-site items-center gap-14 px-6 lg:grid-cols-2 lg:px-10">
+      <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>
-          {/* اینجا متن کوچک بالای تیتر حذف شد تا کاملاً یکدست بشه */}
-          <SectionHeading
-            title="درباره ی ما"
-          />
+          {showLabel && (
+            <Reveal>
+              <h2 id="story-title" className="text-section font-bold text-ivory">
+                درباره ی ما
+              </h2>
+              <div className="mt-6 h-px w-24 bg-copper/70" />
+            </Reveal>
+          )}

          <Reveal delay={0.08}>
-            <p className="mt-7 text-base font-light leading-9 text-ivory/65">
-              آرامش پلازا با یک دفتر کوچک معماری آغاز شد و امروز یکی از مجموعه‌های شناخته‌شده ساخت‌وساز لوکس در ایران است. در تمام این سال‌ها یک اصل تغییر نکرده است: ساختمان باید برای زندگی ساخته شود، نه برای فروش سریع.
+            <p className="mt-8 text-base font-light leading-9 text-ivory/65">
+              آرامش پلازا با یک دفتر کوچک معماری آغاز شد و امروز یکی از مجموعه‌های شناخته‌شده ساخت‌وساز لوکس در ایران
+              است. در تمام این سال‌ها یک اصل تغییر نکرده است: ساختمان باید برای زندگی ساخته شود، نه برای فروش سریع.
            </p>
            <p className="mt-5 text-base font-light leading-9 text-ivory/65">
-              هر پروژه با مطالعه زمین، نور، اقلیم و الگوی زندگی ساکنان آغاز می‌شود؛ سپس تیم طراحی، سازه و اجرا در یک فرآیند واحد آن را تا تحویل کلید پیش می‌برند.
+              هر پروژه با مطالعه زمین، نور، اقلیم و الگوی زندگی ساکنان آغاز می‌شود؛ سپس تیم طراحی، سازه و اجرا در یک
+              فرآیند واحد آن را تا تحویل کلید پیش می‌برند.
            </p>
          </Reveal>
+
          <Reveal delay={0.16}>
            <div className="mt-10 grid grid-cols-2 gap-8 border-t border-ivory/10 pt-8">
              <div>
@@ -42,12 +55,22 @@ export function Story() {
              </div>
            </div>
          </Reveal>
+
+          {showLink && (
            <Reveal delay={0.22}>
              <ButtonLink to="/about" variant="outline" className="mt-10 font-light">
                داستان کامل ما
                <ArrowLeftIcon className="h-4 w-4" />
              </ButtonLink>
            </Reveal>
+          )}
+
+          {/* محتوای اختصاصی صفحه درباره ما اینجا قرار می‌گیرد */}
+          {children && (
+            <Reveal delay={0.24}>
+              {children}
+            </Reveal>
+          )}
        </div>

        <div className="grid grid-cols-2 gap-4">
@@ -1,7 +1,7 @@
-import React from 'react';
-import { Reveal } from '../Reveal';
-import { SectionHeading } from '../SectionHeading';
-import { TEAM } from '../../data/site';
+import React from 'react'
+import { Reveal } from '../Reveal'
+import { SectionHeading } from '../SectionHeading'
+import { TEAM } from '../../data/site'

 export function Team() {
  return (
@@ -10,24 +10,26 @@ export function Team() {
        <SectionHeading
          title="تیم ما"
          lead="کسانی که تصمیم‌های اصلی هر پروژه را می‌گیرند و پاسخ‌گوی آن هستند."
-          align="center" />
+          align="center"
+        />

-
-        <div className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
-          {TEAM.map((member, i) =>
+        <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
+          {TEAM.map((member, i) => (
            <Reveal key={member.name} delay={0.06 * i} className="h-full">
-            <article className="group flex h-full flex-col items-center border border-ivory/10 bg-char p-8 text-center transition-[transform,box-shadow,border-color] duration-500 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-lift">
-                <div className="flex h-24 w-24 items-center justify-center rounded-full border border-copper/40 text-3xl font-bold text-copper">
+              <article className="group flex h-full flex-col items-center border border-ivory/10 bg-char p-10 text-center transition-[transform,box-shadow,border-color] duration-500 ease-out hover:-translate-y-3 hover:border-copper/50 hover:shadow-lift">
+                <div className="flex h-24 w-24 items-center justify-center rounded-full border border-copper/30 text-3xl font-bold text-copper transition-colors duration-500 group-hover:border-copper">
                  {member.name.trim().charAt(0)}
                </div>
-                <h3 className="mt-6 text-lg font-bold text-ivory">{member.name}</h3>
-                <p className="mt-1 text-sm font-light text-copper">{member.role}</p>
-                <p className="mt-auto pt-4 text-sm font-light leading-7 text-ivory/50">{member.bio}</p>
+                <h3 className="mt-8 text-lg font-bold text-ivory">{member.name}</h3>
+                <p className="mt-2 text-sm font-light text-copper">{member.role}</p>
+                <p className="mt-6 border-t border-ivory/10 pt-6 text-sm font-light text-ivory/60">
+                  {member.bio}
+                </p>
              </article>
            </Reveal>
-          )}
+          ))}
        </div>
      </div>
-    </section>);
-
+    </section>
+  )
 }
@@ -14,8 +14,8 @@ export const IMAGES = [
  'https://i.postimg.cc/1zfBPS1G/Gemini-Generated-Image-at69yhat69yhat69.png',
  'https://i.postimg.cc/BbccNQHr/Gemini-Generated-Image-dafc2hdafc2hdafc.png',
  'https://i.postimg.cc/4xFvW0HX/Gemini-Generated-Image-n7mhonn7mhonn7mh.png',
-'https://i.postimg.cc/N036cr4s/Gemini-Generated-Image-ytbhvvytbhvvytbh.png'];
-
+  'https://i.postimg.cc/N036cr4s/Gemini-Generated-Image-ytbhvvytbhvvytbh.png'
+];

 export const NAV = [
  { label: 'صفحه اصلی', to: '/' },
@@ -25,8 +25,8 @@ export const NAV = [
  { label: 'سرمایه‌گذاری', to: '/investment' },
  { label: 'وبلاگ', to: '/blog' },
  { label: 'سوالات متداول', to: '/faq' },
-{ label: 'تماس با ما', to: '/contact' }];
-
+  { label: 'تماس با ما', to: '/contact' }
+];

 export type Service = {
  title: string;
@@ -35,54 +35,22 @@ export type Service = {
 };

 export const SERVICES: Service[] = [
-{
-  title: 'طراحی معماری',
-  desc: 'خلق فرم‌های معاصر با نگاه ایرانی؛ از کانسپت اولیه تا نقشه‌های اجرایی و جزئیات نما.',
-  icon: 'draft'
-},
-{
-  title: 'ساخت برج‌های مسکونی',
-  desc: 'اجرای برج‌های بلندمرتبه با استانداردهای سازه‌ای بین‌المللی و کیفیت تحویل بی‌نقص.',
-  icon: 'tower'
-},
-{
-  title: 'مجتمع‌های تجاری',
-  desc: 'طراحی و ساخت مراکز تجاری با مطالعه دقیق جریان مخاطب و بازدهی بلندمدت سرمایه.',
-  icon: 'mall'
-},
-{
-  title: 'ویلاسازی',
-  desc: 'ویلاهای اختصاصی هم‌نشین با طبیعت؛ محرمانگی، نور طبیعی و مصالح ماندگار.',
-  icon: 'villa'
-},
-{
-  title: 'بازسازی',
-  desc: 'بازآفرینی ساختمان‌های موجود با ارتقای سازه، نما و تجربه زندگی در فضا.',
-  icon: 'renew'
-},
-{
-  title: 'مدیریت پروژه',
-  desc: 'کنترل هم‌زمان زمان، هزینه و کیفیت با گزارش‌دهی شفاف در تمام مراحل ساخت.',
-  icon: 'manage'
-},
-{
-  title: 'سرمایه‌گذاری ساختمانی',
-  desc: 'ساختارهای مشارکت شفاف، ارزیابی ریسک و طراحی سبد ملکی متناسب با سرمایه شما.',
-  icon: 'invest'
-},
-{
-  title: 'محوطه‌سازی و لنداسکیپ',
-  desc: 'طراحی حیاط، بام سبز و مسیرهای دسترسی؛ ادامه معماری در فضای باز پروژه.',
-  icon: 'landscape'
-}];
-
+  { title: 'طراحی معماری', desc: 'خلق فرم‌های معاصر با نگاه ایرانی؛ از کانسپت اولیه تا نقشه‌های اجرایی و جزئیات نما.', icon: 'draft' },
+  { title: 'ساخت برج‌های مسکونی', desc: 'اجرای برج‌های بلندمرتبه با استانداردهای سازه‌ای بین‌المللی و کیفیت تحویل بی‌نقص.', icon: 'tower' },
+  { title: 'مجتمع‌های تجاری', desc: 'طراحی و ساخت مراکز تجاری با مطالعه دقیق جریان مخاطب و بازدهی بلندمدت سرمایه.', icon: 'mall' },
+  { title: 'ویلاسازی', desc: 'ویلاهای اختصاصی هم‌نشین با طبیعت؛ محرمانگی، نور طبیعی و مصالح ماندگار.', icon: 'villa' },
+  { title: 'بازسازی', desc: 'بازآفرینی ساختمان‌های موجود با ارتقای سازه، نما و تجربه زندگی در فضا.', icon: 'renew' },
+  { title: 'مدیریت پروژه', desc: 'کنترل هم‌زمان زمان، هزینه و کیفیت با گزارش‌دهی شفاف در تمام مراحل ساخت.', icon: 'manage' },
+  { title: 'سرمایه‌گذاری ساختمانی', desc: 'ساختارهای مشارکت شفاف، ارزیابی ریسک و طراحی سبد ملکی متناسب با سرمایه شما.', icon: 'invest' },
+  { title: 'محوطه‌سازی و لنداسکیپ', desc: 'طراحی حیاط، بام سبز و مسیرهای دسترسی؛ ادامه معماری در فضای باز پروژه.', icon: 'landscape' }
+];

 export const STATS = [
  { value: 21, suffix: '+', label: 'سال تجربه ساخت' },
  { value: 47, suffix: '', label: 'پروژه تحویل‌شده' },
  { value: 860, suffix: 'هزار', label: 'مترمربع زیربنا' },
-{ value: 1200, suffix: '+', label: 'خانواده ساکن' }];
-
+  { value: 1200, suffix: '+', label: 'خانواده ساکن' }
+];

 export type ProjectStatus = 'done' | 'progress';

@@ -108,122 +76,13 @@ export const STATUS_LABEL: Record<ProjectStatus, string> = {
 };

 export const PROJECTS: Project[] = [
-{
-  slug: 'aramesh-elahieh',
-  title: 'برج آرامش الهیه',
-  location: 'تهران، الهیه',
-  year: '۱۴۰۲',
-  status: 'done',
-  image: IMAGES[0],
-  gallery: [IMAGES[0], IMAGES[3], IMAGES[1]],
-  area: '۲۴٬۰۰۰ متر مربع',
-  floors: '۱۸ طبقه',
-  units: '۵۶ واحد',
-  client: 'سرمایه‌گذاری خصوصی',
-  summary:
-  'یک برج مسکونی لوکس با نمای سنگ تراورتن و پوسته دوپوسته‌ای که مصرف انرژی را تا ۳۵ درصد کاهش داده است.',
-  body: [
-  'برج آرامش الهیه روی زمینی با شیب طبیعی شمالی طراحی شد؛ همین شیب فرصت داد تا لابی، استخر و فضاهای مشترک در سه تراز مختلف بنشینند و همه واحدها دید بی‌واسطه به شهر داشته باشند.',
-  'پوسته بیرونی ترکیبی از سنگ تراورتن روشن و پنجره‌های قدی با شیشه سه‌جداره است. سایه‌بان‌های عمودی مسی‌رنگ، نور مستقیم تابستان را می‌شکنند و در زمستان اجازه ورود کامل نور را می‌دهند.',
-  'اجرای پروژه در سی‌ودو ماه به پایان رسید و تمام واحدها پیش از تحویل کلید به فروش رسیدند.']
-
-},
-{
-  slug: 'parseh-mall',
-  title: 'مجتمع تجاری پارسه',
-  location: 'اصفهان، مرکز شهر',
-  year: '۱۴۰۱',
-  status: 'done',
-  image: IMAGES[1],
-  gallery: [IMAGES[1], IMAGES[2], IMAGES[4]],
-  area: '۳۸٬۵۰۰ متر مربع',
-  floors: '۷ طبقه',
-  units: '۱۴۰ واحد تجاری',
-  client: 'گروه سرمایه‌گذاری پارسه',
-  summary:
-  'مرکز تجاری با آتریوم مرکزی و نورگیر سقفی که جریان مخاطب را به‌صورت طبیعی در همه ترازها توزیع می‌کند.',
-  body: [
-  'مطالعه رفتار مخاطب پیش از طراحی نشان داد کوتاه‌ترین مسیر عمودی، کلید موفقیت تجاری این مجموعه است؛ بنابراین آتریوم مرکزی با پله‌برقی‌های قطری در قلب پلان قرار گرفت.',
-  'نورگیر سقفی با شیشه لو-ای، روشنایی روز را تا تراز منفی دو می‌رساند و مصرف روشنایی مصنوعی را به‌طور محسوس کاهش می‌دهد.',
-  'مجموعه دو ماه پیش از موعد قراردادی به بهره‌برداری رسید.']
-
-},
-{
-  slug: 'daryakenar-villas',
-  title: 'ویلاهای دریاکنار',
-  location: 'مازندران، نوشهر',
-  year: '۱۴۰۰',
-  status: 'done',
-  image: IMAGES[2],
-  gallery: [IMAGES[2], IMAGES[4], IMAGES[0]],
-  area: '۹٬۲۰۰ متر مربع',
-  floors: '۲ طبقه',
-  units: '۱۲ ویلا',
-  client: 'مجموعه خصوصی دریاکنار',
-  summary:
-  'دوازده ویلای اختصاصی با چیدمان شانه‌ای که برای هر واحد، دید مستقیم به دریا و محرمانگی کامل فراهم می‌کند.',
-  body: [
-  'چیدمان شانه‌ای ویلاها نتیجه ده‌ها بررسی زاویه دید بود؛ هیچ ویلایی در دید ویلای دیگر نیست و همه به دریا باز می‌شوند.',
-  'مصالح، پاسخی به اقلیم مرطوب شمال است: چوب ترموود، بتن اکسپوز و پوشش‌های ضد نمک برای فلزات نما.',
-  'محوطه با گیاهان بومی طراحی شد تا نیاز آبیاری در طول سال حداقل باشد.']
-
-},
-{
-  slug: 'niavaran-twins',
-  title: 'برج دوقلوی نیاوران',
-  location: 'تهران، نیاوران',
-  year: '۱۳۹۹',
-  status: 'done',
-  image: IMAGES[3],
-  gallery: [IMAGES[3], IMAGES[0], IMAGES[2]],
-  area: '۳۱٬۷۰۰ متر مربع',
-  floors: '۲۰ طبقه',
-  units: '۸۰ واحد',
-  client: 'مشارکت با مالکان زمین',
-  summary: 'دو برج همسان با پادست مشترک که فضاهای رفاهی و پارکینگ‌ها را در یک تراز واحد ادغام می‌کند.',
-  body: [
-  'دو برج روی یک پادست مشترک نشسته‌اند؛ این تصمیم اجازه داد فضاهای رفاهی، سالن اجتماعات و پارکینگ‌ها بین دو ساختمان مشترک شوند و سطح اشغال باغ کاهش یابد.',
-  'سازه با سیستم دیوار برشی و دال پس‌کشیده اجرا شد تا دهانه‌های داخلی آزاد و پلان‌ها قابل شخصی‌سازی باشند.']
-
-},
-{
-  slug: 'kish-garden-tower',
-  title: 'باغ‌برج کیش',
-  location: 'کیش، مروارید',
-  year: '۱۴۰۵ (پیش‌بینی)',
-  status: 'progress',
-  image: IMAGES[4],
-  gallery: [IMAGES[4], IMAGES[1], IMAGES[3]],
-  area: '۱۸٬۴۰۰ متر مربع',
-  floors: '۱۴ طبقه',
-  units: '۶۲ واحد اقامتی',
-  client: 'صندوق پروژه‌محور آرامش',
-  summary:
-  'باغ‌برجی اقامتی با تراس‌های سبز پیوسته که در حال ساخت است؛ پیشرفت فیزیکی پروژه ۴۸ درصد.',
-  body: [
-  'تراس‌های سبز پیوسته، پوسته‌ای زنده برای ساختمان می‌سازند که در اقلیم گرم جزیره، دمای سطح نما را به‌طور محسوس پایین می‌آورد.',
-  'در حال حاضر سازه تا تراز طبقه نهم اجرا شده و نصب نما از ضلع جنوبی آغاز شده است.']
-
-},
-{
-  slug: 'aramesh-business-center',
-  title: 'مرکز تجاری آرامش تهران',
-  location: 'تهران، سعادت‌آباد',
-  year: '۱۴۰۶ (پیش‌بینی)',
-  status: 'progress',
-  image: IMAGES[1],
-  gallery: [IMAGES[1], IMAGES[3], IMAGES[4]],
-  area: '۲۷٬۳۰۰ متر مربع',
-  floors: '۱۲ طبقه',
-  units: '۹۰ دفتر اداری',
-  client: 'مشارکت با هلدینگ آرامش',
-  summary: 'مجتمع اداری-تجاری با هسته مرکزی شفاف و لابی دوبلکس؛ در مرحله اجرای سفت‌کاری.',
-  body: [
-  'برنامه‌ریزی فضایی این مجموعه بر اساس دفاتر انعطاف‌پذیر انجام شد؛ هر تراز می‌تواند به دو، سه یا شش دفتر مستقل تقسیم شود.',
-  'اجرای تأسیسات مکانیکی به‌صورت هم‌زمان با سفت‌کاری پیش می‌رود تا زمان کل پروژه کوتاه‌تر شود.']
-
-}];
-
+  { slug: 'aramesh-elahieh', title: 'برج آرامش الهیه', location: 'تهران، الهیه', year: '۱۴۰۲', status: 'done', image: IMAGES[0], gallery: [IMAGES[0], IMAGES[3], IMAGES[1]], area: '۲۴٬۰۰۰ متر مربع', floors: '۱۸ طبقه', units: '۵۶ واحد', client: 'سرمایه‌گذاری خصوصی', summary: 'یک برج مسکونی لوکس با نمای سنگ تراورتن و پوسته دوپوسته‌ای که مصرف انرژی را تا ۳۵ درصد کاهش داده است.', body: ['برج آرامش الهیه روی زمینی با شیب طبیعی شمالی طراحی شد؛ همین شیب فرصت داد تا لابی، استخر و فضاهای مشترک در سه تراز مختلف بنشینند و همه واحدها دید بی‌واسطه به شهر داشته باشند.', 'پوسته بیرونی ترکیبی از سنگ تراورتن روشن و پنجره‌های قدی با شیشه سه‌جداره است. سایه‌بان‌های عمودی مسی‌رنگ، نور مستقیم تابستان را می‌شکنند و در زمستان اجازه ورود کامل نور را می‌دهند.', 'اجرای پروژه در سی‌ودو ماه به پایان رسید و تمام واحدها پیش از تحویل کلید به فروش رسیدند.'] },
+  { slug: 'parseh-mall', title: 'مجتمع تجاری پارسه', location: 'اصفهان، مرکز شهر', year: '۱۴۰۱', status: 'done', image: IMAGES[1], gallery: [IMAGES[1], IMAGES[2], IMAGES[4]], area: '۳۸٬۵۰۰ متر مربع', floors: '۷ طبقه', units: '۱۴۰ واحد تجاری', client: 'گروه سرمایه‌گذاری پارسه', summary: 'مرکز تجاری با آتریوم مرکزی و نورگیر سقفی که جریان مخاطب را به‌صورت طبیعی در همه ترازها توزیع می‌کند.', body: ['مطالعه رفتار مخاطب پیش از طراحی نشان داد کوتاه‌ترین مسیر عمودی، کلید موفقیت تجاری این مجموعه است؛ بنابراین آتریوم مرکزی با پله‌برقی‌های قطری در قلب پلان قرار گرفت.', 'نورگیر سقفی با شیشه لو-ای، روشنایی روز را تا تراز منفی دو می‌رساند و مصرف روشنایی مصنوعی را به‌طور محسوس کاهش می‌دهد.', 'مجموعه دو ماه پیش از موعد قراردادی به بهره‌برداری رسید.'] },
+  { slug: 'daryakenar-villas', title: 'ویلاهای دریاکنار', location: 'مازندران، نوشهر', year: '۱۴۰۰', status: 'done', image: IMAGES[2], gallery: [IMAGES[2], IMAGES[4], IMAGES[0]], area: '۹٬۲۰۰ متر مربع', floors: '۲ طبقه', units: '۱۲ ویلا', client: 'مجموعه خصوصی دریاکنار', summary: 'دوازده ویلای اختصاصی با چیدمان شانه‌ای که برای هر واحد، دید مستقیم به دریا و محرمانگی کامل فراهم می‌کند.', body: ['چیدمان شانه‌ای ویلاها نتیجه ده‌ها بررسی زاویه دید بود؛ هیچ ویلایی در دید ویلای دیگر نیست و همه به دریا باز می‌شوند.', 'مصالح، پاسخی به اقلیم مرطوب شمال است: چوب ترموود، بتن اکسپوز و پوشش‌های ضد نمک برای فلزات نما.', 'محوطه با گیاهان بومی طراحی شد تا نیاز آبیاری در طول سال حداقل باشد.'] },
+  { slug: 'niavaran-twins', title: 'برج دوقلوی نیاوران', location: 'تهران، نیاوران', year: '۱۳۹۹', status: 'done', image: IMAGES[3], gallery: [IMAGES[3], IMAGES[0], IMAGES[2]], area: '۳۱٬۷۰۰ متر مربع', floors: '۲۰ طبقه', units: '۸۰ واحد', client: 'مشارکت با مالکان زمین', summary: 'دو برج همسان با پادست مشترک که فضاهای رفاهی و پارکینگ‌ها را در یک تراز واحد ادغام می‌کند.', body: ['دو برج روی یک پادست مشترک نشسته‌اند؛ این تصمیم اجازه داد فضاهای رفاهی، سالن اجتماعات و پارکینگ‌ها بین دو ساختمان مشترک شوند و سطح اشغال باغ کاهش یابد.', 'سازه با سیستم دیوار برشی و دال پس‌کشیده اجرا شد تا دهانه‌های داخلی آزاد و پلان‌ها قابل شخصی‌سازی باشند.'] },
+  { slug: 'kish-garden-tower', title: 'باغ‌برج کیش', location: 'کیش، مروارید', year: '۱۴۰۵ (پیش‌بینی)', status: 'progress', image: IMAGES[4], gallery: [IMAGES[4], IMAGES[1], IMAGES[3]], area: '۱۸٬۴۰۰ متر مربع', floors: '۱۴ طبقه', units: '۶۲ واحد اقامتی', client: 'صندوق پروژه‌محور آرامش', summary: 'باغ‌برجی اقامتی با تراس‌های سبز پیوسته که در حال ساخت است؛ پیشرفت فیزیکی پروژه ۴۸ درصد.', body: ['تراس‌های سبز پیوسته، پوسته‌ای زنده برای ساختمان می‌سازند که در اقلیم گرم جزیره، دمای سطح نما را به‌طور محسوس پایین می‌آورد.', 'در حال حاضر سازه تا تراز طبقه نهم اجرا شده و نصب نما از ضلع جنوبی آغاز شده است.'] },
+  { slug: 'aramesh-business-center', title: 'مرکز تجاری آرامش تهران', location: 'تهران، سعادت‌آباد', year: '۱۴۰۶ (پیش‌بینی)', status: 'progress', image: IMAGES[1], gallery: [IMAGES[1], IMAGES[3], IMAGES[4]], area: '۲۷٬۳۰۰ متر مربع', floors: '۱۲ طبقه', units: '۹۰ دفتر اداری', client: 'مشارکت با هلدینگ آرامش', summary: 'مجتمع اداری-تجاری با هسته مرکزی شفاف و لابی دوبلکس؛ در مرحله اجرای سفت‌کاری.', body: ['برنامه‌ریزی فضایی این مجموعه بر اساس دفاتر انعطاف‌پذیر انجام شد؛ هر تراز می‌تواند به دو، سه یا شش دفتر مستقل تقسیم شود.', 'اجرای تأسیسات مکانیکی به‌صورت هم‌زمان با سفت‌کاری پیش می‌رود تا زمان کل پروژه کوتاه‌تر شود.'] }
+];

 export const BEFORE_AFTER = {
  title: 'از کانسپت تا خلق واقعیت',
@@ -235,43 +94,13 @@ export const BEFORE_AFTER = {
 };

 export const TIMELINE = [
-{
-  year: '۱۳۸۳',
-  title: 'آغاز مسیر',
-  desc: 'تأسیس دفتر معماری آرامش با تیمی چهارنفره و نخستین پروژه بازسازی در تهران.',
-  image: IMAGES[2]
-},
-{
-  year: '۱۳۸۵',
-  title: 'نخستین ساخت مستقل',
-  desc: 'تحویل اولین ساختمان مسکونی هفت‌طبقه؛ آغاز همکاری با پیمانکاران سازه‌ای بزرگ.',
-  image: IMAGES[0]
-},
-{
-  year: '۱۳۸۷',
-  title: 'ورود به بازار تجاری',
-  desc: 'طراحی و اجرای اولین مجتمع تجاری با رویکرد بازدهی سرمایه و جریان مخاطب.',
-  image: IMAGES[1]
-},
-{
-  year: '۱۳۸۹',
-  title: 'استاندارد بین‌المللی',
-  desc: 'استقرار نظام کنترل کیفیت و دریافت گواهی‌نامه‌های مدیریت پروژه.',
-  image: IMAGES[4]
-},
-{
-  year: '۱۳۹۵',
-  title: 'بلندمرتبه‌سازی',
-  desc: 'آغاز ساخت نخستین برج بیست‌طبقه شرکت در شمال تهران.',
-  image: IMAGES[3]
-},
-{
-  year: '۱۴۰۳',
-  title: 'آرامش پلازا امروز',
-  desc: 'پرتفوی ۴۷ پروژه، دفاتر در سه شهر و صندوق سرمایه‌گذاری ساختمانی اختصاصی.',
-  image: IMAGES[0]
-}];
-
+  { year: '۱۳۸۳', title: 'آغاز مسیر', desc: 'تأسیس دفتر معماری آرامش با تیمی چهارنفره و نخستین پروژه بازسازی در تهران.', image: IMAGES[2] },
+  { year: '۱۳۸۵', title: 'نخستین ساخت مستقل', desc: 'تحویل اولین ساختمان مسکونی هفت‌طبقه؛ آغاز همکاری با پیمانکاران سازه‌ای بزرگ.', image: IMAGES[0] },
+  { year: '۱۳۸۷', title: 'ورود به بازار تجاری', desc: 'طراحی و اجرای اولین مجتمع تجاری با رویکرد بازدهی سرمایه و جریان مخاطب.', image: IMAGES[1] },
+  { year: '۱۳۸۹', title: 'استاندارد بین‌المللی', desc: 'استقرار نظام کنترل کیفیت و دریافت گواهی‌نامه‌های مدیریت پروژه.', image: IMAGES[4] },
+  { year: '۱۳۹۵', title: 'بلندمرتبه‌سازی', desc: 'آغاز ساخت نخستین برج بیست‌طبقه شرکت در شمال تهران.', image: IMAGES[3] },
+  { year: '۱۴۰۳', title: 'آرامش پلازا امروز', desc: 'پرتفوی ۴۷ پروژه، دفاتر در سه شهر و صندوق سرمایه‌گذاری ساختمانی اختصاصی.', image: IMAGES[0] }
+];

 export const WHY = [
  { title: 'کیفیت بدون مصالحه', desc: 'انتخاب مصالح و مجریان بر اساس ماندگاری چنددهه‌ای، نه سریع‌ترین تحویل.' },
@@ -279,158 +108,39 @@ export const WHY = [
  { title: 'تحویل به‌موقع', desc: '۹۴٪ پروژه‌های ما در بازه زمانی قراردادی یا زودتر تحویل داده شده‌اند.' },
  { title: 'طراحی اختصاصی', desc: 'هیچ نقشه‌ای دو بار اجرا نمی‌شود؛ هر پروژه هویت معماری خودش را دارد.' },
  { title: 'خدمات پس از تحویل', desc: 'پنج سال پشتیبانی فنی و نگهداری تأسیسات پس از تحویل کلید.' },
-{ title: 'پایداری و انرژی', desc: 'طراحی پوسته و تأسیسات با هدف کاهش مصرف انرژی تا ۳۵ درصد.' }];
-
+  { title: 'پایداری و انرژی', desc: 'طراحی پوسته و تأسیسات با هدف کاهش مصرف انرژی تا ۳۵ درصد.' }
+];

 export const TESTIMONIALS = [
-{
-  name: 'مهندس سارا کیانی',
-  role: 'سرمایه‌گذار پروژه پارسه',
-  quote:
-  'گزارش‌های ماهانه آرامش پلازا آن‌قدر دقیق بود که هیچ‌وقت نیاز نشد نگران سرمایه‌ام باشم. پروژه دو ماه زودتر از موعد به بهره‌برداری رسید.'
-},
-{
-  name: 'دکتر امیرحسین راد',
-  role: 'ساکن برج الهیه',
-  quote:
-  'کیفیت اجرا در جزئیاتی دیده می‌شود که معمولاً کسی به آن‌ها فکر نمی‌کند؛ از عایق صوتی پنجره‌ها تا نور غیرمستقیم راهروها.'
-},
-{
-  name: 'مریم دلاور',
-  role: 'مدیر مجموعه ویلاهای دریاکنار',
-  quote:
-  'همکاری با تیم طراحی، تجربه‌ای واقعاً حرفه‌ای بود. ایده‌های ما را شنیدند و به زبان معماری ترجمه کردند.'
-}];
-
+  { name: 'مهندس سارا کیانی', role: 'سرمایه‌گذار پروژه پارسه', quote: 'گزارش‌های ماهانه آرامش پلازا آن‌قدر دقیق بود که هیچ‌وقت نیاز نشد نگران سرمایه‌ام باشم. پروژه دو ماه زودتر از موعد به بهره‌برداری رسید.' },
+  { name: 'دکتر امیرحسین راد', role: 'ساکن برج الهیه', quote: 'کیفیت اجرا در جزئیاتی دیده می‌شود که معمولاً کسی به آن‌ها فکر نمی‌کند؛ از عایق صوتی پنجره‌ها تا نور غیرمستقیم راهروها.' },
+  { name: 'مریم دلاور', role: 'مدیر مجموعه ویلاهای دریاکنار', quote: 'همکاری با تیم طراحی، تجربه‌ای واقعاً حرفه‌ای بود. ایده‌های ما را شنیدند و به زبان معماری ترجمه کردند.' }
+];

 export const TEAM = [
  { name: 'کامران آرامش', role: 'بنیان‌گذار و مدیرعامل', bio: 'بیش از سه دهه تجربه در ساخت بلندمرتبه.' },
  { name: 'نگار شریفی', role: 'مدیر ارشد طراحی', bio: 'معمار ارشد، فارغ‌التحصیل دانشگاه تهران و میلان.' },
  { name: 'بهزاد مرادی', role: 'مدیر اجرایی پروژه‌ها', bio: 'مسئول کنترل کیفیت و زمان‌بندی همه کارگاه‌ها.' },
-{ name: 'الهام نیک‌آیین', role: 'مدیر سرمایه‌گذاری', bio: 'طراح ساختارهای مشارکت و تحلیل بازدهی ملکی.' }];
-
+  { name: 'الهام نیک‌آیین', role: 'مدیر سرمایه‌گذاری', bio: 'طراح ساختارهای مشارکت و تحلیل بازدهی ملکی.' }
+];

 export type Article = {
-  slug: string;
-  title: string;
-  date: string;
-  category: string;
-  image: string;
-  read: string;
-  excerpt: string;
-  body: string[];
+  slug: string; title: string; date: string; category: string; image: string; read: string; excerpt: string; body: string[];
 };

 export const ARTICLES: Article[] = [
-{
-  slug: 'natural-light',
-  title: 'معماری آرام: چرا نور طبیعی گران‌ترین مصالح ساختمان است؟',
-  date: '۲۴ مرداد ۱۴۰۳',
-  category: 'معماری',
-  image: IMAGES[1],
-  read: '۶ دقیقه',
-  excerpt:
-  'نور طبیعی نه‌تنها کیفیت زندگی در فضا را تعیین می‌کند، بلکه مستقیماً بر مصرف انرژی و ارزش بلندمدت ملک اثر می‌گذارد.',
-  body: [
-  'در بازار ساخت‌وساز، ارزش یک واحد اغلب با متراژ سنجیده می‌شود؛ اما تجربه ما در بیست سال گذشته نشان داده کیفیت نور، تعیین‌کننده‌تر از چند متر اضافه است.',
-  'جهت‌گیری ساختمان، عمق دهانه و ارتفاع کف تا سقف، سه متغیر اصلی نور طبیعی هستند. تصمیم درباره هر سه، پیش از ترسیم اولین پلان گرفته می‌شود و بعد از آن تقریباً برگشت‌پذیر نیست.',
-  'در برج آرامش الهیه، چرخش ۱۲ درجه‌ای توده ساختمان نسبت به شمال، دو ساعت نور مفید بیشتر در روزهای زمستان به واحدها اضافه کرد؛ تصمیمی بی‌هزینه با اثری چنددهه‌ای.',
-  'برای انتخاب یک واحد، پیشنهاد ما ساده است: بازدید را در ساعت‌های میانی صبح و اواخر بعدازظهر انجام دهید و کیفیت نور را در همان ساعت‌هایی بسنجید که واقعاً در خانه هستید.']
-
-},
-{
-  slug: 'real-estate-portfolio',
-  title: 'راهنمای انتخاب سبد سرمایه‌گذاری ملکی در بازار امروز',
-  date: '۱۰ مرداد ۱۴۰۳',
-  category: 'سرمایه‌گذاری',
-  image: IMAGES[3],
-  read: '۹ دقیقه',
-  excerpt: 'سه معیار کلیدی برای تشکیل سبدی متعادل از دارایی ملکی، بر اساس افق زمانی و سطح ریسک شما.',
-  body: [
-  'سبد ملکی متعادل، ترکیبی از دارایی‌های با نقدشوندگی متفاوت است؛ نه همه سرمایه در یک پروژه بلندمدت، نه همه در واحدهای آماده.',
-  'افق زمانی، نخستین معیار است. اگر برنامه شما کمتر از دو سال است، پیش‌خرید در پروژه‌ای که تازه شروع شده انتخاب پرریسکی خواهد بود.',
-  'معیار دوم شفافیت گزارش‌دهی است. بدون گزارش ماهانه پیشرفت فیزیکی و مالی، ارزیابی وضعیت سرمایه شما عملاً غیرممکن است.',
-  'معیار سوم، تنوع کاربری است. ترکیب مسکونی و تجاری، نوسان بازدهی سبد را در دوره‌های رکود محسوس کاهش می‌دهد.']
-
-},
-{
-  slug: 'facade-quality',
-  title: 'پنج نکته فنی که کیفیت نما را پس از ده سال مشخص می‌کند',
-  date: '۲۸ تیر ۱۴۰۳',
-  category: 'اجرا',
-  image: IMAGES[4],
-  read: '۵ دقیقه',
-  excerpt: 'نمای ساختمان در سال اول زیبا به نظر می‌رسد؛ تفاوت کیفیت اجرا در سال دهم آشکار می‌شود.',
-  body: [
-  'اتصالات مکانیکی سنگ نما، مهم‌تر از خود سنگ است. اتصال چسبی در اقلیم سردوگرم ایران عمر کوتاهی دارد.',
-  'درزهای انقباضی باید در نقشه دیده شوند، نه در کارگاه تصمیم‌گیری شوند؛ نبودشان اولین دلیل ترک‌های افقی نما است.',
-  'آب‌بندی دور پنجره، پرتکرارترین نقطه شکست است. اجرای نوار آب‌بند پیش از نصب قرنیز، این ریسک را حذف می‌کند.',
-  'زیرسازی گالوانیزه گرم، در برابر زیرسازی رنگ‌شده، تفاوت قیمت اندکی دارد و تفاوت عمر بسیار زیادی.',
-  'در پایان، برنامه بازدید دوره‌ای سالانه نما را جدی بگیرید؛ ترمیم یک درز، هزینه‌ای در حد هیچ در برابر بازسازی کل نما است.']
-
-},
-{
-  slug: 'commercial-yield',
-  title: 'چگونه بازدهی یک پروژه تجاری را پیش از ساخت تخمین بزنیم؟',
-  date: '۱۵ تیر ۱۴۰۳',
-  category: 'سرمایه‌گذاری',
-  image: IMAGES[2],
-  read: '۷ دقیقه',
-  excerpt: 'مدل ساده‌ای برای برآورد بازدهی، بر پایه جریان مخاطب، ترکیب واحدها و نرخ اجاره منطقه.',
-  body: [
-  'برآورد بازدهی تجاری با سه عدد آغاز می‌شود: جریان روزانه مخاطب، نرخ اجاره هر مترمربع در منطقه و نسبت سطح مفید به کل.',
-  'خطای رایج، نادیده‌گرفتن ترازهای بالاتر است. بدون طراحی درست مسیر عمودی، ترازهای سه به بالا معمولاً نیمی از نرخ تراز همکف را هم به‌دست نمی‌آورند.',
-  'در نهایت، سناریوی محافظه‌کارانه را هم بنویسید؛ اگر پروژه در سناریوی بدبینانه هم توجیه داشت، سرمایه‌گذاری منطقی است.']
-
-},
-{
-  slug: 'facade-materials',
-  title: 'مصالح نما: مقایسه سنگ، کامپوزیت و ترموود در اقلیم ایران',
-  date: '۲ تیر ۱۴۰۳',
-  category: 'اجرا',
-  image: IMAGES[0],
-  read: '۸ دقیقه',
-  excerpt: 'هر مصالح نما در اقلیم متفاوتی درست کار می‌کند؛ انتخاب اشتباه، هزینه نگهداری را چند برابر می‌کند.',
-  body: [
-  'سنگ در اقلیم خشک، بهترین ماندگاری را دارد؛ اما وزن آن نیازمند زیرسازی دقیق و محاسبه سازه‌ای است.',
-  'کامپوزیت انتخاب سریع و سبکی است، مشروط بر انتخاب گرید ضد آتش و درنظرگرفتن انقباض حرارتی در طول ورق.',
-  'ترموود در اقلیم مرطوب شمال، بهترین پاسخ زیبایی‌شناسانه است، ولی برنامه نگهداری دوسالانه دارد.']
-
-},
-{
-  slug: 'renovate-or-rebuild',
-  title: 'بازسازی یا نوسازی؟ معیارهای تصمیم‌گیری برای مالکان',
-  date: '۲۰ خرداد ۱۴۰۳',
-  category: 'معماری',
-  image: IMAGES[1],
-  read: '۶ دقیقه',
-  excerpt: 'اگر عمر سازه و ضوابط شهری اجازه دهند، بازسازی می‌تواند بازدهی بالاتری از تخریب کامل داشته باشد.',
-  body: [
-  'نخست وضعیت سازه ارزیابی می‌شود؛ اگر مقاوم‌سازی هزینه‌ای بیش از ۴۰ درصد ساخت نو دارد، نوسازی منطقی‌تر است.',
-  'دومین معیار، ضوابط شهری روز است. گاهی تخریب، سطح زیربنای مجاز کمتری به شما می‌دهد و این تصمیم را کاملاً تغییر می‌دهد.',
-  'در بازسازی، بیشترین ارزش افزوده از سه جا می‌آید: نما، ورودی و بازآرایی پلان داخلی.']
-
-}];
-
+  { slug: 'natural-light', title: 'معماری آرام: چرا نور طبیعی گران‌ترین مصالح ساختمان است؟', date: '۲۴ مرداد ۱۴۰۳', category: 'معماری', image: IMAGES[1], read: '۶ دقیقه', excerpt: 'نور طبیعی نه‌تنها کیفیت زندگی در فضا را تعیین می‌کند، بلکه مستقیماً بر مصرف انرژی و ارزش بلندمدت ملک اثر می‌گذارد.', body: ['در بازار ساخت‌وساز، ارزش یک واحد اغلب با متراژ سنجیده می‌شود؛ اما تجربه ما در بیست سال گذشته نشان داده کیفیت نور، تعیین‌کننده‌تر از چند متر اضافه است.', 'جهت‌گیری ساختمان، عمق دهانه و ارتفاع کف تا سقف، سه متغیر اصلی نور طبیعی هستند. تصمیم درباره هر سه، پیش از ترسیم اولین پلان گرفته می‌شود و بعد از آن تقریباً برگشت‌پذیر نیست.', 'در برج آرامش الهیه، چرخش ۱۲ درجه‌ای توده ساختمان نسبت به شمال، دو ساعت نور مفید بیشتر در روزهای زمستان به واحدها اضافه کرد؛ تصمیمی بی‌هزینه با اثری چنددهه‌ای.', 'برای انتخاب یک واحد، پیشنهاد ما ساده است: بازدید را در ساعت‌های میانی صبح و اواخر بعدازظهر انجام دهید و کیفیت نور را در همان ساعت‌هایی بسنجید که واقعاً در خانه هستید.'] },
+  { slug: 'real-estate-portfolio', title: 'راهنمای انتخاب سبد سرمایه‌گذاری ملکی در بازار امروز', date: '۱۰ مرداد ۱۴۰۳', category: 'سرمایه‌گذاری', image: IMAGES[3], read: '۹ دقیقه', excerpt: 'سه معیار کلیدی برای تشکیل سبدی متعادل از دارایی ملکی، بر اساس افق زمانی و سطح ریسک شما.', body: ['سبد ملکی متعادل، ترکیبی از دارایی‌های با نقدشوندگی متفاوت است؛ نه همه سرمایه در یک پروژه بلندمدت، نه همه در واحدهای آماده.', 'افق زمانی، نخستین معیار است. اگر برنامه شما کمتر از دو سال است، پیش‌خرید در پروژه‌ای که تازه شروع شده انتخاب پرریسکی خواهد بود.', 'معیار دوم شفافیت گزارش‌دهی است. بدون گزارش ماهانه پیشرفت فیزیکی و مالی، ارزیابی وضعیت سرمایه شما عملاً غیرممکن است.', 'معیار سوم، تنوع کاربری است. ترکیب مسکونی و تجاری، نوسان بازدهی سبد را در دوره‌های رکود محسوس کاهش می‌دهد.'] },
+  { slug: 'facade-quality', title: 'پنج نکته فنی که کیفیت نما را پس از ده سال مشخص می‌کند', date: '۲۸ تیر ۱۴۰۳', category: 'اجرا', image: IMAGES[4], read: '۵ دقیقه', excerpt: 'نمای ساختمان در سال اول زیبا به نظر می‌رسد؛ تفاوت کیفیت اجرا در سال دهم آشکار می‌شود.', body: ['اتصالات مکانیکی سنگ نما، مهم‌تر از خود سنگ است. اتصال چسبی در اقلیم سردوگرم ایران عمر کوتاهی دارد.', 'درزهای انقباضی باید در نقشه دیده شوند، نه در کارگاه تصمیم‌گیری شوند؛ نبودشان اولین دلیل ترک‌های افقی نما است.', 'آب‌بندی دور پنجره، پرتکرارترین نقطه شکست است. اجرای نوار آب‌بند پیش از نصب قرنیز، این ریسک را حذف می‌کند.', 'زیرسازی گالوانیزه گرم، در برابر زیرسازی رنگ‌شده، تفاوت قیمت اندکی دارد و تفاوت عمر بسیار زیادی.', 'در پایان، برنامه بازدید دوره‌ای سالانه نما را جدی بگیرید؛ ترمیم یک درز، هزینه‌ای در حد هیچ در برابر بازسازی کل نما است.'] },
+  { slug: 'commercial-yield', title: 'چگونه بازدهی یک پروژه تجاری را پیش از ساخت تخمین بزنیم؟', date: '۱۵ تیر ۱۴۰۳', category: 'سرمایه‌گذاری', image: IMAGES[2], read: '۷ دقیقه', excerpt: 'مدل ساده‌ای برای برآورد بازدهی، بر پایه جریان مخاطب، ترکیب واحدها و نرخ اجاره منطقه.', body: ['برآورد بازدهی تجاری با سه عدد آغاز می‌شود: جریان روزانه مخاطب، نرخ اجاره هر مترمربع در منطقه و نسبت سطح مفید به کل.', 'خطای رایج، نادیده‌گرفتن ترازهای بالاتر است. بدون طراحی درست مسیر عمودی، ترازهای سه به بالا معمولاً نیمی از نرخ تراز همکف را هم به‌دست نمی‌آورند.', 'در نهایت، سناریوی محافظه‌کارانه را هم بنویسید؛ اگر پروژه در سناریوی بدبینانه هم توجیه داشت، سرمایه‌گذاری منطقی است.'] },
+  { slug: 'facade-materials', title: 'مصالح نما: مقایسه سنگ، کامپوزیت و ترموود در اقلیم ایران', date: '۲ تیر ۱۴۰۳', category: 'اجرا', image: IMAGES[0], read: '۸ دقیقه', excerpt: 'هر مصالح نما در اقلیم متفاوتی درست کار می‌کند؛ انتخاب اشتباه، هزینه نگهداری را چند برابر می‌کند.', body: ['سنگ در اقلیم خشک، بهترین ماندگاری را دارد؛ اما وزن آن نیازمند زیرسازی دقیق و محاسبه سازه‌ای است.', 'کامپوزیت انتخاب سریع و سبکی است، مشروط بر انتخاب گرید ضد آتش و درنظرگرفتن انقباض حرارتی در طول ورق.', 'ترموود در اقلیم مرطوب شمال، بهترین پاسخ زیبایی‌شناسانه است، ولی برنامه نگهداری دوسالانه دارد.'] },
+  { slug: 'renovate-or-rebuild', title: 'بازسازی یا نوسازی؟ معیارهای تصمیم‌گیری برای مالکان', date: '۲۰ خرداد ۱۴۰۳', category: 'معماری', image: IMAGES[1], read: '۶ دقیقه', excerpt: 'اگر عمر سازه و ضوابط شهری اجازه دهند، بازسازی می‌تواند بازدهی بالاتری از تخریب کامل داشته باشد.', body: ['نخست وضعیت سازه ارزیابی می‌شود؛ اگر مقاوم‌سازی هزینه‌ای بیش از ۴۰ درصد ساخت نو دارد، نوسازی منطقی‌تر است.', 'دومین معیار، ضوابط شهری روز است. گاهی تخریب، سطح زیربنای مجاز کمتری به شما می‌دهد و این تصمیم را کاملاً تغییر می‌دهد.', 'در بازسازی، بیشترین ارزش افزوده از سه جا می‌آید: نما، ورودی و بازآرایی پلان داخلی.'] }
+];

 export const FAQS = [
-{
-  q: 'حداقل سرمایه برای مشارکت در پروژه‌های آرامش پلازا چقدر است؟',
-  a: 'ساختار مشارکت هر پروژه متفاوت است، اما معمولاً واحدهای سرمایه‌گذاری از سطح مشخصی آغاز می‌شوند و جزئیات دقیق در جلسه ارزیابی اولیه ارائه می‌شود.'
-},
-{
-  q: 'مدت زمان معمول ساخت یک برج مسکونی چقدر است؟',
-  a: 'بسته به تعداد طبقات و شرایط زمین، میانگین اجرای یک برج مسکونی بین ۲۸ تا ۴۲ ماه از زمان صدور پروانه تا تحویل کلید است.'
-},
-{
-  q: 'آیا امکان تغییر نقشه داخلی واحد وجود دارد؟',
-  a: 'بله. تا پیش از پایان مرحله سفت‌کاری، امکان شخصی‌سازی پلان داخلی با هماهنگی تیم طراحی و تأیید سازه فراهم است.'
-},
-{
-  q: 'خدمات پس از تحویل شامل چه مواردی می‌شود؟',
-  a: 'پنج سال پشتیبانی فنی تأسیسات مکانیکی و برقی، بازدید دوره‌ای سالانه و تضمین اجرای نما و عایق‌کاری.'
-},
-{
-  q: 'پروژه‌ها در چه شهرهایی اجرا می‌شوند؟',
-  a: 'در حال حاضر تهران، اصفهان و سواحل شمالی کشور مناطق اصلی فعالیت ما هستند و پروژه‌ای نیز در جزیره کیش در دست ساخت است.'
-}];
+  { q: 'حداقل سرمایه برای مشارکت در پروژه‌های آرامش پلازا چقدر است؟', a: 'ساختار مشارکت هر پروژه متفاوت است، اما معمولاً واحدهای سرمایه‌گذاری از سطح مشخصی آغاز می‌شوند و جزئیات دقیق در جلسه ارزیابی اولیه ارائه می‌شود.' },
+  { q: 'مدت زمان معمول ساخت یک برج مسکونی چقدر است؟', a: 'بسته به تعداد طبقات و شرایط زمین، میانگین اجرای یک برج مسکونی بین ۲۸ تا ۴۲ ماه از زمان صدور پروانه تا تحویل کلید است.' },
+  { q: 'آیا امکان تغییر نقشه داخلی واحد وجود دارد؟', a: 'بله. تا پیش از پایان مرحله سفت‌کاری، امکان شخصی‌سازی پلان داخلی با هماهنگی تیم طراحی و تأیید سازه فراهم است.' },
+  { q: 'خدمات پس از تحویل شامل چه مواردی می‌شود؟', a: 'پنج سال پشتیبانی فنی تأسیسات مکانیکی و برقی، بازدید دوره‌ای سالانه و تضمین اجرای نما و عایق‌کاری.' },
+  { q: 'پروژه‌ها در چه شهرهایی اجرا می‌شوند؟', a: 'در حال حاضر تهران، اصفهان و سواحل شمالی کشور مناطق اصلی فعالیت ما هستند و پروژه‌ای نیز در جزیره کیش در دست ساخت است.' }
+];
@@ -1,12 +1,12 @@
-import React from 'react';
-import { PageHero } from '../components/PageHero';
-import { Story } from '../components/home/Story';
-import { Stats } from '../components/home/Stats';
-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';
+import React from 'react'
+import { PageHero } from '../components/PageHero'
+import { Story } from '../components/home/Story'
+import { Stats } from '../components/home/Stats'
+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 (
@@ -14,14 +14,24 @@ export function About() {
      <PageHero
        title="درباره ما"
        lead="آرامش پلازا مجموعه‌ای از معماران، مهندسان سازه و مدیران پروژه است که از سال ۱۳۸۳ در حوزه ساخت‌وساز لوکس فعالیت می‌کند."
-        image={IMAGES[3]} />
+        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>

-      <Story />
      <Stats />
      <Timeline />
      <WhyUs />
      <Team />
      <ContactSection />
-    </>);
-
+    </>
+  )
 }
@@ -1,22 +1,22 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { ArrowLeftIcon, ClockIcon } from 'lucide-react';
-import { PageHero } from '../components/PageHero';
-import { Reveal } from '../components/Reveal';
-import { ArticleCard } from '../components/ArticleCard';
-import { Newsletter } from '../components/home/Newsletter';
-import { ARTICLES, IMAGES } from '../data/site';
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { ArrowLeftIcon, ClockIcon } from 'lucide-react'
+import { PageHero } from '../components/PageHero'
+import { Reveal } from '../components/Reveal'
+import { ArticleCard } from '../components/ArticleCard'
+import { Newsletter } from '../components/home/Newsletter'
+import { ARTICLES, IMAGES } from '../data/site'

 export function Blog() {
-  const [featured, ...rest] = ARTICLES;
+  const [featured, ...rest] = ARTICLES

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

      <section className="bg-ink py-24 lg:py-32" aria-label="مقالات">
        <div className="mx-auto max-w-site px-6 lg:px-10">
@@ -24,22 +24,23 @@ export function Blog() {
            <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"
-              aria-label={`خواندن مقاله ${featured.title}`}>
-              
+              aria-label={`خواندن مقاله ${featured.title}`}
+            >
              <div className="overflow-hidden">
                <img
                  src={featured.image}
                  alt={`تصویر مقاله ${featured.title}`}
-                  className="h-full min-h-[20rem] w-full object-cover transition-transform duration-500 ease-lux group-hover:scale-105" />
-                
+                  className="h-full min-h-[20rem] w-full object-cover transition-transform duration-500 ease-lux group-hover:scale-105"
+                />
              </div>
              <div className="flex flex-col justify-center p-8 lg:p-12">
                <p className="text-xs font-light text-copper">مقاله ویژه — {featured.category}</p>
-                <h2 className="mt-5 text-2xl font-bold leading-[1.7] text-ivory transition-colors duration-200 ease-lux group-hover:text-copper md:text-3xl">
+                {/* تغییر اصلی: استفاده از leading-[2.2] و md:leading-[2.2] برای باز شدن فاصله خطوط تیتر */}
+                <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>
-                <p className="mt-5 text-sm font-light leading-9 text-ivory/65">{featured.excerpt}</p>
-                <div className="mt-8 flex items-center justify-between border-t border-ivory/10 pt-6 text-xs font-light text-ivory/50">
+                <p className="mt-6 text-sm font-light leading-10 text-ivory/65">{featured.excerpt}</p>
+                <div className="mt-10 flex items-center justify-between border-t border-ivory/10 pt-8 text-xs font-light text-ivory/50">
                  <span className="flex items-center gap-4">
                    <span>{featured.date}</span>
                    <span className="flex items-center gap-1.5">
@@ -57,16 +58,16 @@ export function Blog() {
          </Reveal>

          <div className="mt-12 grid gap-6 lg:grid-cols-3">
-            {rest.map((article, i) =>
+            {rest.map((article, i) => (
              <Reveal key={article.slug} delay={0.05 * i} className="h-full">
                <ArticleCard article={article} />
              </Reveal>
-            )}
+            ))}
          </div>
        </div>
      </section>

      <Newsletter />
-    </>);
-
+    </>
+  )
 }
@@ -1,14 +1,14 @@
-import React from 'react';
-import { PageHero } from '../components/PageHero';
-import { ContactSection } from '../components/ContactSection';
-import { Reveal } from '../components/Reveal';
-import { IMAGES } from '../data/site';
+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: 'شنبه تا پنجشنبه، ۱۰ تا ۱۶' }];
-
+  { city: 'نوشهر', address: 'بلوار دریا، دفتر پروژه دریاکنار', hours: 'شنبه تا پنجشنبه، ۱۰ تا ۱۶' },
+]

 export function ContactPage() {
  return (
@@ -16,26 +16,29 @@ export function ContactPage() {
      <PageHero
        title="تماس با ما"
        lead="برای مشاوره ساخت، سرمایه‌گذاری یا بازدید از پروژه‌ها، تیم ما در سه شهر آماده پاسخ‌گویی است."
-        image={IMAGES[3]} />
-      
+        // عکس هدر از IMAGES[3] به IMAGES[1] تغییر یافت
+        image={IMAGES[1]} 
+      />

      <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) =>
+          {OFFICES.map((office, i) => (
            <Reveal key={office.city} delay={0.06 * i} className="h-full">
-              <article className="flex h-full flex-col border border-ivory/10 bg-char p-8 text-center">
-                <h2 className="text-xl font-bold text-copper">{office.city}</h2>
-                <p className="mt-4 text-sm font-light leading-8 text-ivory/60">{office.address}</p>
-                <p className="mt-auto border-t border-ivory/10 pt-5 text-xs font-light text-ivory/45">
+              <article className="flex h-full flex-col border border-ivory/10 bg-char px-8 py-12 text-center transition-[transform,box-shadow,border-color] duration-300 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-lift">
+                <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>
+                <div className="mt-auto pt-10">
+                  <p className="border-t border-ivory/10 pt-6 text-xs font-light text-ivory/50">
                    {office.hours}
                  </p>
+                </div>
              </article>
            </Reveal>
-          )}
+          ))}
        </div>
      </section>

      <ContactSection />
-    </>);
-
+    </>
+  )
 }
@@ -1,8 +1,8 @@
-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';
+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 (
@@ -10,10 +10,13 @@ export function FaqPage() {
      <PageHero
        title="سوالات متداول"
        lead="پیش از تماس، شاید پاسخ پرسش شما همین‌جا باشد. اگر نبود، خوشحال می‌شویم مستقیم صحبت کنیم."
-        image={IMAGES[1]} />
+        image={IMAGES[1]}
+      />
+      
+      {/* با پاس دادن hideHeading={true} تیتر تکراری حذف و چیدمان متمرکز می‌شود */}
+      <Faq hideHeading={true} />
      
-      <Faq />
      <ContactSection />
-    </>);
-
+    </>
+  )
 }
@@ -1,28 +1,28 @@
-import React from 'react';
-import { PageHero } from '../components/PageHero';
-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';
+import React from 'react'
+import { PageHero } from '../components/PageHero'
+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: ['ارزیابی رایگان زمین', 'قرارداد شفاف با ضمانت اجرا', 'گزارش ماهانه پیشرفت']
+    points: ['ارزیابی رایگان زمین', 'قرارداد شفاف با ضمانت اجرا', 'گزارش ماهانه پیشرفت'],
  },
  {
    title: 'صندوق پروژه‌محور',
    desc: 'سرمایه‌گذاری روی یک پروژه مشخص با واحدهای قابل خرید و بازدهی محاسبه‌شده در پایان دوره.',
-  points: ['حداقل دوره ۲۴ ماه', 'گزارش ارزش‌گذاری فصلی', 'امکان انتقال واحد سرمایه']
+    points: ['حداقل دوره ۲۴ ماه', 'گزارش ارزش‌گذاری فصلی', 'امکان انتقال واحد سرمایه'],
  },
  {
    title: 'پیش‌خرید واحد',
    desc: 'خرید واحد مسکونی یا تجاری در مراحل ابتدایی ساخت با قیمت پیش از تکمیل و پرداخت مرحله‌ای.',
-  points: ['پرداخت مرحله‌ای متناسب با پیشرفت', 'امکان شخصی‌سازی پلان', 'تضمین زمان تحویل']
-}];
-
+    points: ['پرداخت مرحله‌ای متناسب با پیشرفت', 'امکان شخصی‌سازی پلان', 'تضمین زمان تحویل'],
+  },
+]

 export function Investment() {
  return (
@@ -30,39 +30,45 @@ export function Investment() {
      <PageHero
        title="سرمایه‌گذاری"
        lead="سه مسیر روشن برای ورود به بازار ساخت‌وساز لوکس، با ساختار مالی شفاف و گزارش‌دهی منظم."
-        image={IMAGES[4]} />
-      
+        image={IMAGES[4]}
+      />

      <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="بسته به میزان سرمایه، افق زمانی و سطح ریسکی که می‌پذیرید، یکی از این سه مسیر مناسب شماست." />
-          
+            lead="بسته به میزان سرمایه، افق زمانی و سطح ریسکی که می‌پذیرید، یکی از این سه مسیر مناسب شماست."
+          />
          <div className="mt-14 grid gap-6 lg:grid-cols-3">
-            {MODELS.map((model, i) =>
+            {MODELS.map((model, i) => (
              <Reveal key={model.title} delay={0.06 * i} className="h-full">
-                <article className="flex h-full flex-col border border-ivory/10 bg-char p-8 transition-[transform,box-shadow,border-color] duration-300 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-lift">
-                  <p className="text-xs font-light text-copper">۰{(i + 1).toLocaleString('fa-IR')}</p>
-                  <h3 className="mt-4 text-xl font-bold text-ivory">{model.title}</h3>
-                  <p className="mt-4 text-sm font-light leading-8 text-ivory/60">{model.desc}</p>
-                  <ul className="mt-auto space-y-3 border-t border-ivory/10 pt-6">
-                    {model.points.map((point) =>
-                  <li key={point} className="flex items-start gap-3 text-sm font-light text-ivory/60">
-                        <span className="mt-2 h-1 w-1 shrink-0 rounded-full bg-copper" aria-hidden="true" />
+                <article className="flex h-full flex-col border border-ivory/10 bg-char p-10 transition-[transform,box-shadow,border-color] duration-300 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-lift">
+                  <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">{model.title}</h3>
+                  
+                  <p className="mt-5 text-sm font-light leading-9 text-ivory/65">{model.desc}</p>
+                  
+                  {/* تغییر اصلی: اضافه شدن div با کلاس pt-10 برای ایجاد فاصله بالای خط */}
+                  <div className="mt-auto pt-10">
+                    <ul className="space-y-4 border-t border-ivory/10 pt-8">
+                      {model.points.map((point) => (
+                        <li key={point} className="flex items-start gap-3 text-sm font-light leading-8 text-ivory/65">
+                          <span className="mt-3.5 h-1 w-1 shrink-0 rounded-full bg-copper" aria-hidden="true" />
                          {point}
                        </li>
-                  )}
+                      ))}
                    </ul>
+                  </div>
                </article>
              </Reveal>
-            )}
+            ))}
          </div>
        </div>
      </section>

      <Stats />
      <ContactSection />
-    </>);
-
+    </>
+  )
 }
@@ -1,18 +1,18 @@
-import React from 'react';
-import { PageHero } from '../components/PageHero';
-import { Services } from '../components/home/Services';
-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';
+import React from 'react'
+import { PageHero } from '../components/PageHero'
+import { Services } from '../components/home/Services'
+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: 'تحویل کلید، آموزش بهره‌برداری و پنج سال پشتیبانی فنی.' }];
-
+  { step: '۰۴', title: 'تحویل و پشتیبانی', desc: 'تحویل کلید، آموزش بهره‌برداری و پنج سال پشتیبانی فنی.' },
+]

 export function ServicesPage() {
  return (
@@ -20,29 +20,31 @@ export function ServicesPage() {
      <PageHero
        title="خدمات"
        lead="هفت حوزه تخصصی که چرخه کامل یک پروژه ساختمانی را از ایده تا بهره‌برداری پوشش می‌دهند."
-        image={IMAGES[1]} />
-      
-      <Services />
+        image={IMAGES[1]}
+      />
+      {/* مخفی کردن کلمه تکراری "خدمات" */}
+      <Services showLabel={false} />

      <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" />
          <div className="mt-14 grid gap-px bg-ivory/10 md:grid-cols-2 lg:grid-cols-4">
-            {PROCESS.map((item, i) =>
+            {PROCESS.map((item, i) => (
              <Reveal key={item.step} delay={0.06 * i} className="h-full">
-                <div className="flex h-full flex-col bg-char p-8 text-center">
-                  <p className="text-3xl font-bold text-copper">{item.step}</p>
-                  <h3 className="mt-5 text-lg font-bold text-ivory">{item.title}</h3>
-                  <p className="mt-3 text-sm font-light leading-8 text-ivory/55">{item.desc}</p>
+                {/* تغییرات فاصله‌دهی: استفاده از py-12 برای فضای بیشتر بالا و پایین، mt-6 و mt-5 برای فاصله بین متون */}
+                <div className="flex h-full flex-col bg-char px-6 py-12 text-center md:px-8">
+                  <p className="text-4xl font-bold text-copper/80">{item.step}</p>
+                  <h3 className="mt-6 text-lg font-bold text-ivory">{item.title}</h3>
+                  <p className="mt-5 text-sm font-light leading-9 text-ivory/55">{item.desc}</p>
                </div>
              </Reveal>
-            )}
+            ))}
          </div>
        </div>
      </section>

      <Faq />
      <ContactSection />
-    </>);
-
+    </>
+  )
 }
@@ -18,8 +18,8 @@ export default {
        lift: '0 24px 50px -18px rgba(0, 0, 0, 0.75)',
      },
      fontSize: {
-        // سایز این بخش یک درجه کوچکتر شد (حداکثر سایز از 4rem به 3.4rem کاهش یافت)
-        hero: ['clamp(1.75rem, 3.6vw, 3.4rem)', { lineHeight: '1.35' }],
+        // سایز این بخش یک درجه کوچک‌تر شد (هم در موبایل و هم در دسکتاپ)
+        hero: ['clamp(1.75rem, 3.8vw, 3.5rem)', { lineHeight: '1.35' }],
        section: ['clamp(1.6rem, 2.4vw, 2.4rem)', { lineHeight: '1.4' }],
      },
      maxWidth: {