Behrad/aramesh-backend
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

انتقال تمام محتوای متنی سایت به دیتابیس — همه متن‌های فرانت‌اند از GET /api/site خوانده می‌شوند

Browse Source
This commit is contained in:
MMD
2026-09-06 20:16:17 +03:30
parent 8bb303dda2
commit 1fde4e30fc
36 changed files with 1096 additions and 454 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/app/api/admin.py
+39
View File
@@ -14,17 +14,43 @@ from ..schemas import (
BeforeAfterOut,
BrandIn,
BrandOut,
ContactSectionIn,
ContactSectionOut,
ContactMessageOut,
FaqIn,
FaqOut,
FooterIn,
FooterOut,
GalleryImageIn,
GalleryImageOut,
HeroIn,
HeroOut,
InvestmentModelIn,
InvestmentModelOut,
LoginIn,
MessageReadIn,
NavItemIn,
NavItemOut,
NewsletterSectionIn,
NewsletterOut,
OfficeIn,
OfficeOut,
PageHeroIn,
PageHeroOut,
ProcessStepIn,
ProcessStepOut,
ProjectIn,
ProjectOut,
SectionHeadingIn,
SectionHeadingOut,
ServiceIn,
ServiceOut,
StatIn,
StatOut,
StatusLabelIn,
StatusLabelOut,
StoryIn,
StoryOut,
SubscriberOut,
TeamMemberIn,
TeamMemberOut,
@@ -107,6 +133,11 @@ def register_crud(path: str, model, out_schema, create_schema) -> None:
# CRUD محتوا
register_crud("brand", models.Brand, BrandOut, BrandIn)
register_crud("nav", models.NavItem, NavItemOut, NavItemIn)
register_crud("hero", models.Hero, HeroOut, HeroIn)
register_crud("story", models.StorySection, StoryOut, StoryIn)
register_crud("section-headings", models.SectionHeadingContent, SectionHeadingOut, SectionHeadingIn)
register_crud("page-heroes", models.PageHeroContent, PageHeroOut, PageHeroIn)
register_crud("services", models.Service, ServiceOut, ServiceIn)
register_crud("projects", models.Project, ProjectOut, ProjectIn)
register_crud("articles", models.Article, ArticleOut, ArticleIn)
@@ -117,6 +148,14 @@ register_crud("timeline", models.TimelineItem, TimelineItemOut, TimelineItemIn)
register_crud("stats", models.Stat, StatOut, StatIn)
register_crud("why-us", models.WhyUsItem, WhyUsItemOut, WhyUsItemIn)
register_crud("before-after", models.BeforeAfter, BeforeAfterOut, BeforeAfterIn)
register_crud("investment-models", models.InvestmentModel, InvestmentModelOut, InvestmentModelIn)
register_crud("process-steps", models.ProcessStep, ProcessStepOut, ProcessStepIn)
register_crud("offices", models.Office, OfficeOut, OfficeIn)
register_crud("gallery", models.GalleryImage, GalleryImageOut, GalleryImageIn)
register_crud("status-labels", models.StatusLabel, StatusLabelOut, StatusLabelIn)
register_crud("contact-section", models.ContactSectionContent, ContactSectionOut, ContactSectionIn)
register_crud("newsletter", models.NewsletterSectionContent, NewsletterOut, NewsletterSectionIn)
register_crud("footer", models.FooterContent, FooterOut, FooterIn)
# پیام‌های تماس
backend/app/api/public.py
+13
View File
@@ -109,6 +109,11 @@ def get_site(db: Session = Depends(get_db)):
"""همه محتوای سایت در یک درخواست — مناسب برای بارگذاری اولیه فرانت‌اند."""
return {
"brand": db.query(models.Brand).first(),
"nav": db.query(models.NavItem).order_by(models.NavItem.id).all(),
"hero": db.query(models.Hero).first(),
"story": db.query(models.StorySection).first(),
"section_headings": db.query(models.SectionHeadingContent).order_by(models.SectionHeadingContent.id).all(),
"page_heroes": db.query(models.PageHeroContent).order_by(models.PageHeroContent.id).all(),
"services": db.query(models.Service).all(),
"projects": db.query(models.Project).order_by(models.Project.id).all(),
"articles": db.query(models.Article).order_by(models.Article.id).all(),
@@ -119,4 +124,12 @@ def get_site(db: Session = Depends(get_db)):
"stats": db.query(models.Stat).all(),
"why_us": db.query(models.WhyUsItem).all(),
"before_after": db.query(models.BeforeAfter).first(),
"investment_models": db.query(models.InvestmentModel).order_by(models.InvestmentModel.id).all(),
"process_steps": db.query(models.ProcessStep).order_by(models.ProcessStep.id).all(),
"offices": db.query(models.Office).order_by(models.Office.id).all(),
"gallery": db.query(models.GalleryImage).order_by(models.GalleryImage.id).all(),
"status_labels": db.query(models.StatusLabel).order_by(models.StatusLabel.id).all(),
"contact_section": db.query(models.ContactSectionContent).first(),
"newsletter": db.query(models.NewsletterSectionContent).first(),
"footer": db.query(models.FooterContent).first(),
}
backend/app/models.py
+173
View File
@@ -139,6 +139,179 @@ class BeforeAfter(Base):
after_label: Mapped[str] = mapped_column(String(128), default="")
class NavItem(Base):
__tablename__ = "nav_items"
id: Mapped[int] = mapped_column(primary_key=True)
label: Mapped[str] = mapped_column(String(64))
href: Mapped[str] = mapped_column(String(128))
class Hero(Base):
"""محتوای هیرو صفحه اصلی — رکورد یگانه."""
__tablename__ = "hero"
id: Mapped[int] = mapped_column(primary_key=True)
kicker: Mapped[str] = mapped_column(Text, default="")
title: Mapped[str] = mapped_column(Text, default="")
title_highlight: Mapped[str] = mapped_column(String(128), default="")
subtitle: Mapped[str] = mapped_column(Text, default="")
badge_value: Mapped[str] = mapped_column(String(32), default="")
badge_label: Mapped[str] = mapped_column(Text, default="")
cta_primary_label: Mapped[str] = mapped_column(String(128), default="")
cta_primary_href: Mapped[str] = mapped_column(String(128), default="")
cta_secondary_label: Mapped[str] = mapped_column(String(128), default="")
cta_secondary_href: Mapped[str] = mapped_column(String(128), default="")
scroll_label: Mapped[str] = mapped_column(String(64), default="")
class StorySection(Base):
"""بخش «درباره ما» در خانه و صفحه درباره — رکورد یگانه."""
__tablename__ = "story"
id: Mapped[int] = mapped_column(primary_key=True)
title: Mapped[str] = mapped_column(String(256), default="")
paragraphs: Mapped[list] = mapped_column(JSON, default=list)
quote: Mapped[str] = mapped_column(Text, default="")
quote_author: Mapped[str] = mapped_column(Text, default="")
stat1_value: Mapped[str] = mapped_column(String(32), default="")
stat1_label: Mapped[str] = mapped_column(String(128), default="")
stat2_value: Mapped[str] = mapped_column(String(32), default="")
stat2_label: Mapped[str] = mapped_column(String(128), default="")
link_label: Mapped[str] = mapped_column(String(128), default="")
link_href: Mapped[str] = mapped_column(String(128), default="")
bento: Mapped[list] = mapped_column(JSON, default=list) # [{src, alt}]
class SectionHeadingContent(Base):
"""تیتر و توضیح بخش‌ها — فرانت‌اند بر اساس key آن را پیدا می‌کند."""
__tablename__ = "section_headings"
id: Mapped[int] = mapped_column(primary_key=True)
key: Mapped[str] = mapped_column(String(64), unique=True, index=True)
label: Mapped[str] = mapped_column(String(64), default="")
title: Mapped[str] = mapped_column(String(256), default="")
lead: Mapped[str] = mapped_column(Text, default="")
image: Mapped[str] = mapped_column(Text, default="")
cta_label: Mapped[str] = mapped_column(String(128), default="")
cta_href: Mapped[str] = mapped_column(String(128), default="")
class PageHeroContent(Base):
"""هیرو بالای هر صفحه — key: about | services | projects | investment | blog | faq | contact."""
__tablename__ = "page_heroes"
id: Mapped[int] = mapped_column(primary_key=True)
key: Mapped[str] = mapped_column(String(32), unique=True, index=True)
title: Mapped[str] = mapped_column(String(256), default="")
lead: Mapped[str] = mapped_column(Text, default="")
image: Mapped[str] = mapped_column(Text, default="")
class InvestmentModel(Base):
__tablename__ = "investment_models"
id: Mapped[int] = mapped_column(primary_key=True)
title: Mapped[str] = mapped_column(String(256))
desc: Mapped[str] = mapped_column(Text, default="")
points: Mapped[list] = mapped_column(JSON, default=list)
class ProcessStep(Base):
__tablename__ = "process_steps"
id: Mapped[int] = mapped_column(primary_key=True)
step: Mapped[str] = mapped_column(String(16), default="")
title: Mapped[str] = mapped_column(String(256))
desc: Mapped[str] = mapped_column(Text, default="")
class Office(Base):
__tablename__ = "offices"
id: Mapped[int] = mapped_column(primary_key=True)
city: Mapped[str] = mapped_column(String(64))
address: Mapped[str] = mapped_column(Text, default="")
hours: Mapped[str] = mapped_column(String(128), default="")
class GalleryImage(Base):
__tablename__ = "gallery_images"
id: Mapped[int] = mapped_column(primary_key=True)
src: Mapped[str] = mapped_column(Text, default="")
alt: Mapped[str] = mapped_column(Text, default="")
class StatusLabel(Base):
"""برچسب فارسی وضعیت پروژه — key: done | progress."""
__tablename__ = "status_labels"
id: Mapped[int] = mapped_column(primary_key=True)
key: Mapped[str] = mapped_column(String(16), unique=True, index=True)
label: Mapped[str] = mapped_column(String(64))
class ContactSectionContent(Base):
"""بخش فرم تماس — رکورد یگانه."""
__tablename__ = "contact_section"
id: Mapped[int] = mapped_column(primary_key=True)
label: Mapped[str] = mapped_column(String(64), default="")
title: Mapped[str] = mapped_column(String(256), default="")
lead: Mapped[str] = mapped_column(Text, default="")
address_label: Mapped[str] = mapped_column(String(64), default="")
phone_label: Mapped[str] = mapped_column(String(64), default="")
email_label: Mapped[str] = mapped_column(String(64), default="")
name_label: Mapped[str] = mapped_column(String(64), default="")
name_placeholder: Mapped[str] = mapped_column(String(128), default="")
phone_field_label: Mapped[str] = mapped_column(String(64), default="")
phone_placeholder: Mapped[str] = mapped_column(String(64), default="")
note_label: Mapped[str] = mapped_column(String(64), default="")
note_optional_label: Mapped[str] = mapped_column(String(64), default="")
note_placeholder: Mapped[str] = mapped_column(String(256), default="")
submit_label: Mapped[str] = mapped_column(String(128), default="")
sending_label: Mapped[str] = mapped_column(String(64), default="")
success_title: Mapped[str] = mapped_column(String(256), default="")
success_text: Mapped[str] = mapped_column(Text, default="")
success_button_label: Mapped[str] = mapped_column(String(128), default="")
class NewsletterSectionContent(Base):
"""بخش خبرنامه — رکورد یگانه."""
__tablename__ = "newsletter"
id: Mapped[int] = mapped_column(primary_key=True)
title: Mapped[str] = mapped_column(String(256), default="")
lead: Mapped[str] = mapped_column(Text, default="")
placeholder: Mapped[str] = mapped_column(String(128), default="")
button_label: Mapped[str] = mapped_column(String(64), default="")
sending_label: Mapped[str] = mapped_column(String(64), default="")
success_text: Mapped[str] = mapped_column(String(256), default="")
class FooterContent(Base):
"""متن‌های فوتر — رکورد یگانه."""
__tablename__ = "footer"
id: Mapped[int] = mapped_column(primary_key=True)
about_text: Mapped[str] = mapped_column(Text, default="")
pages_heading: Mapped[str] = mapped_column(String(64), default="")
services_heading: Mapped[str] = mapped_column(String(64), default="")
contact_heading: Mapped[str] = mapped_column(String(64), default="")
copyright: Mapped[str] = mapped_column(String(256), default="")
tagline: Mapped[str] = mapped_column(String(256), default="")
socials: Mapped[list] = mapped_column(JSON, default=list) # [{label, href, icon}]
class ContactMessage(Base):
__tablename__ = "contact_messages"
backend/app/schemas.py
+249
View File
@@ -112,6 +112,137 @@ class BeforeAfterOut(ORMModel):
after_label: str
class NavItemOut(ORMModel):
id: int
label: str
href: str
class HeroOut(ORMModel):
id: int
kicker: str
title: str
title_highlight: str
subtitle: str
badge_value: str
badge_label: str
cta_primary_label: str
cta_primary_href: str
cta_secondary_label: str
cta_secondary_href: str
scroll_label: str
class StoryOut(ORMModel):
id: int
title: str
paragraphs: list[str]
quote: str
quote_author: str
stat1_value: str
stat1_label: str
stat2_value: str
stat2_label: str
link_label: str
link_href: str
bento: list[dict]
class SectionHeadingOut(ORMModel):
id: int
key: str
label: str
title: str
lead: str
image: str
cta_label: str
cta_href: str
class PageHeroOut(ORMModel):
id: int
key: str
title: str
lead: str
image: str
class InvestmentModelOut(ORMModel):
id: int
title: str
desc: str
points: list[str]
class ProcessStepOut(ORMModel):
id: int
step: str
title: str
desc: str
class OfficeOut(ORMModel):
id: int
city: str
address: str
hours: str
class GalleryImageOut(ORMModel):
id: int
src: str
alt: str
class StatusLabelOut(ORMModel):
id: int
key: str
label: str
class ContactSectionOut(ORMModel):
id: int
label: str
title: str
lead: str
address_label: str
phone_label: str
email_label: str
name_label: str
name_placeholder: str
phone_field_label: str
phone_placeholder: str
note_label: str
note_optional_label: str
note_placeholder: str
submit_label: str
sending_label: str
success_title: str
success_text: str
success_button_label: str
class NewsletterOut(ORMModel):
id: int
title: str
lead: str
placeholder: str
button_label: str
sending_label: str
success_text: str
class FooterOut(ORMModel):
id: int
about_text: str
pages_heading: str
services_heading: str
contact_heading: str
copyright: str
tagline: str
socials: list[dict]
class ContactMessageOut(ORMModel):
id: int
name: str
@@ -242,5 +373,123 @@ class BeforeAfterIn(BaseModel):
after_label: str = ""
class NavItemIn(BaseModel):
label: str = Field(min_length=1, max_length=64)
href: str = Field(min_length=1, max_length=128)
class HeroIn(BaseModel):
kicker: str = ""
title: str = ""
title_highlight: str = ""
subtitle: str = ""
badge_value: str = ""
badge_label: str = ""
cta_primary_label: str = ""
cta_primary_href: str = ""
cta_secondary_label: str = ""
cta_secondary_href: str = ""
scroll_label: str = ""
class StoryIn(BaseModel):
title: str = ""
paragraphs: list[str] = []
quote: str = ""
quote_author: str = ""
stat1_value: str = ""
stat1_label: str = ""
stat2_value: str = ""
stat2_label: str = ""
link_label: str = ""
link_href: str = ""
bento: list[dict] = []
class SectionHeadingIn(BaseModel):
key: str = Field(min_length=1, max_length=64)
label: str = ""
title: str = ""
lead: str = ""
image: str = ""
cta_label: str = ""
cta_href: str = ""
class PageHeroIn(BaseModel):
key: str = Field(min_length=1, max_length=32)
title: str = ""
lead: str = ""
image: str = ""
class InvestmentModelIn(BaseModel):
title: str = Field(min_length=1, max_length=256)
desc: str = ""
points: list[str] = []
class ProcessStepIn(BaseModel):
step: str = ""
title: str = Field(min_length=1, max_length=256)
desc: str = ""
class OfficeIn(BaseModel):
city: str = Field(min_length=1, max_length=64)
address: str = ""
hours: str = ""
class GalleryImageIn(BaseModel):
src: str = ""
alt: str = ""
class StatusLabelIn(BaseModel):
key: str = Field(min_length=1, max_length=16)
label: str = Field(min_length=1, max_length=64)
class ContactSectionIn(BaseModel):
label: str = ""
title: str = ""
lead: str = ""
address_label: str = ""
phone_label: str = ""
email_label: str = ""
name_label: str = ""
name_placeholder: str = ""
phone_field_label: str = ""
phone_placeholder: str = ""
note_label: str = ""
note_optional_label: str = ""
note_placeholder: str = ""
submit_label: str = ""
sending_label: str = ""
success_title: str = ""
success_text: str = ""
success_button_label: str = ""
class NewsletterSectionIn(BaseModel):
title: str = ""
lead: str = ""
placeholder: str = ""
button_label: str = ""
sending_label: str = ""
success_text: str = ""
class FooterIn(BaseModel):
about_text: str = ""
pages_heading: str = ""
services_heading: str = ""
contact_heading: str = ""
copyright: str = ""
tagline: str = ""
socials: list[dict] = []
class MessageReadIn(BaseModel):
is_read: bool = True
backend/app/seed.py
+40 -39
View File
@@ -1,17 +1,49 @@
"""اسکریپت seed دیتابیس.
اجرا:
python -m app.seed # فقط اگر دیتابیس خالی باشد
python -m app.seed # فقط جدول‌های خالی پر می‌شوند
python -m app.seed --force # حذف کامل داده‌ها و ساخت مجدد
پر کردن هر جدول مستقل است: روی یک دیتابیس موجود، فقط جدول‌های جدید یا خالی
seed می‌شوند و داده‌های قبلی دست‌نخورده می‌مانند.
"""
import argparse
from typing import Any
from . import models, seed_data
from .auth import hash_password
from .config import settings
from .database import Base, SessionLocal, engine
# (مدل، داده‌های اولیه، برچسب گزارش)
CONTENT: list[tuple[Any, list[dict], str]] = [
(models.Brand, [seed_data.BRAND], "برند"),
(models.Hero, [seed_data.HERO], "هیرو صفحه اصلی"),
(models.StorySection, [seed_data.STORY], "داستان ما"),
(models.SectionHeadingContent, seed_data.SECTION_HEADINGS, "تیتر بخش‌ها"),
(models.PageHeroContent, seed_data.PAGE_HEROES, "هیرو صفحات"),
(models.NavItem, seed_data.NAV_ITEMS, "منوی ناوبری"),
(models.InvestmentModel, seed_data.INVESTMENT_MODELS, "مدل‌های سرمایه‌گذاری"),
(models.ProcessStep, seed_data.PROCESS_STEPS, "مراحل فرآیند کار"),
(models.Office, seed_data.OFFICES, "دفاتر"),
(models.GalleryImage, seed_data.GALLERY_IMAGES, "گالری تصاویر"),
(models.StatusLabel, seed_data.STATUS_LABELS, "برچسب وضعیت پروژه"),
(models.ContactSectionContent, [seed_data.CONTACT_SECTION], "بخش تماس"),
(models.NewsletterSectionContent, [seed_data.NEWSLETTER], "خبرنامه"),
(models.FooterContent, [seed_data.FOOTER], "فوتر"),
(models.Service, seed_data.SERVICES, "خدمات"),
(models.Stat, seed_data.STATS, "آمار"),
(models.Project, seed_data.PROJECTS, "پروژه‌ها"),
(models.Article, seed_data.ARTICLES, "مقالات"),
(models.Testimonial, seed_data.TESTIMONIALS, "نظرات"),
(models.Faq, seed_data.FAQS, "سوالات متداول"),
(models.TeamMember, seed_data.TEAM, "تیم"),
(models.TimelineItem, seed_data.TIMELINE, "تایم‌لاین"),
(models.WhyUsItem, seed_data.WHY, "چرا آرامش"),
(models.BeforeAfter, [seed_data.BEFORE_AFTER], "قبل/بعد"),
]
def seed(force: bool = False) -> None:
db = SessionLocal()
@@ -22,31 +54,11 @@ def seed(force: bool = False) -> None:
Base.metadata.create_all(bind=engine)
if not force and db.query(models.Service).count() > 0:
print("دیتابیس قبلاً seed شده است. برای بازنشانی کامل: python -m app.seed --force")
return
db.add(models.Brand(**seed_data.BRAND))
for item in seed_data.SERVICES:
db.add(models.Service(**item))
for item in seed_data.STATS:
db.add(models.Stat(**item))
for item in seed_data.PROJECTS:
db.add(models.Project(**item))
for item in seed_data.ARTICLES:
db.add(models.Article(**item))
for item in seed_data.TESTIMONIALS:
db.add(models.Testimonial(**item))
for item in seed_data.FAQS:
db.add(models.Faq(**item))
for item in seed_data.TEAM:
db.add(models.TeamMember(**item))
for item in seed_data.TIMELINE:
db.add(models.TimelineItem(**item))
for item in seed_data.WHY:
db.add(models.WhyUsItem(**item))
db.add(models.BeforeAfter(**seed_data.BEFORE_AFTER))
for model, rows, label in CONTENT:
if db.query(model).count() > 0:
continue
for row in rows:
db.add(model(**row))
if db.query(models.AdminUser).count() == 0:
db.add(
@@ -59,19 +71,8 @@ def seed(force: bool = False) -> None:
db.commit()
counts = {
"خدمات": db.query(models.Service).count(),
"پروژه‌ها": db.query(models.Project).count(),
"مقالات": db.query(models.Article).count(),
"نظرات": db.query(models.Testimonial).count(),
"سوالات متداول": db.query(models.Faq).count(),
"تیم": db.query(models.TeamMember).count(),
"تایم‌لاین": db.query(models.TimelineItem).count(),
"آمار": db.query(models.Stat).count(),
"چرا آرامش": db.query(models.WhyUsItem).count(),
}
for label, count in counts.items():
print(f" {label}: {count} رکورد")
for model, _, label in CONTENT:
print(f" {label}: {db.query(model).count()} رکورد")
print("✔ seed با موفقیت انجام شد.")
finally:
db.close()
backend/app/seed_data.py
+162
View File
@@ -289,3 +289,165 @@ FAQS = [
{"question": "خدمات پس از تحویل شامل چه مواردی می‌شود؟", "answer": "پنج سال پشتیبانی فنی تأسیسات مکانیکی و برقی، بازدید دوره‌ای سالانه و تضمین اجرای نما و عایق‌کاری."},
{"question": "پروژه‌ها در چه شهرهایی اجرا می‌شوند؟", "answer": "در حال حاضر تهران، اصفهان و سواحل شمالی کشور مناطق اصلی فعالیت ما هستند و پروژه‌ای نیز در جزیره کیش در دست ساخت است."},
]
# ---------- محتوای قبلاً هاردکد‌شده در فرانت‌اند (الان در دیتابیس) ----------
NAV_ITEMS = [
{"label": "صفحه اصلی", "href": "/"},
{"label": "درباره ما", "href": "/about"},
{"label": "خدمات", "href": "/services"},
{"label": "پروژه‌ها", "href": "/projects"},
{"label": "سرمایه‌گذاری", "href": "/investment"},
{"label": "وبلاگ", "href": "/blog"},
{"label": "سوالات متداول", "href": "/faq"},
{"label": "تماس با ما", "href": "/contact"},
]
HERO = {
"kicker": "از سال ۱۳۸۳ — تهران، اصفهان، سواحل شمال",
"title": "ساختمانی که آرامش را معماری می‌کند",
"title_highlight": "معماری",
"subtitle": "طراحی، ساخت و سرمایه‌گذاری در پروژه‌های مسکونی و تجاری لوکس؛ با استانداردی که در جزئیات دیده می‌شود و در سال‌ها دوام می‌آورد.",
"badge_value": "۴۷",
"badge_label": "پروژه تحویل‌شده در بیست‌ویک سال فعالیت حرفه‌ای",
"cta_primary_label": "مشاهده پروژه‌ها",
"cta_primary_href": "/projects",
"cta_secondary_label": "مشاوره سرمایه‌گذاری",
"cta_secondary_href": "/contact",
"scroll_label": "اسکرول کنید",
}
STORY = {
"title": "درباره ی ما",
"paragraphs": [
"گروه ساختمانی آرامش با یک دفتر کوچک معماری آغاز شد و امروز یکی از مجموعه‌های شناخته‌شده ساخت‌وساز لوکس در ایران است. در تمام این سال‌ها یک اصل تغییر نکرده است: ساختمان باید برای زندگی ساخته شود، نه برای فروش سریع.",
"هر پروژه با مطالعه زمین، نور، اقلیم و الگوی زندگی ساکنان آغاز می‌شود؛ سپس تیم طراحی، سازه و اجرا در یک فرآیند واحد آن را تا تحویل کلید پیش می‌برند.",
],
"quote": "«ساختمان برای ما فقط آجر و بتن نیست؛ بلکه تعهدی است به کیفیت زندگی ساکنان. ما فضاهایی می‌سازیم که در گذر زمان ارزش و هویت خود را حفظ کنند.»",
"quote_author": "کامران آرامش — مدیرعامل شرکت ساختمانی آرامش",
"stat1_value": "۹۴٪",
"stat1_label": "تحویل به‌موقع پروژه‌ها",
"stat2_value": "۵ سال",
"stat2_label": "پشتیبانی پس از تحویل",
"link_label": "داستان کامل ما",
"link_href": "/about",
"bento": [
{"src": IMAGES[0], "alt": "نمای برج مسکونی آرامش در تهران"},
{"src": IMAGES[1], "alt": "آتریوم مرکزی مجتمع تجاری پارسه"},
{"src": IMAGES[2], "alt": "ویلاهای ساخته‌شده در سواحل شمال"},
{"src": IMAGES[3], "alt": "نمای شبانه برج دوقلوی نیاوران"},
],
}
SECTION_HEADINGS = [
{"key": "services", "title": "خدمات", "lead": "از نخستین خط روی کاغذ تا تحویل کلید، مدیریت سرمایه و طراحی محوطه؛ همه مراحل در یک مجموعه و زیر یک نظام کنترل کیفیت."},
{"key": "featured_projects", "title": "پروژه‌های شاخص", "lead": "کارهایی که بیشترین چیز را درباره استاندارد ما می‌گویند؛ چه آن‌هایی که تحویل شده‌اند و چه آن‌هایی که همین امروز در حال ساخت‌اند.", "cta_label": "همه پروژه‌ها", "cta_href": "/projects"},
{"key": "gallery", "title": "گالری تصاویر", "lead": "قاب‌هایی از کارگاه‌ها و پروژه‌های تحویل‌شده گروه ساختمانی آرامش."},
{"key": "timeline", "title": "مسیر ما", "lead": "از یک دفتر چهارنفره تا ۴۷ پروژه. خط زمان پروژه‌های ما را ببینید."},
{"key": "why_us", "title": "چرا گروه ساختمانی آرامش", "lead": "شش دلیلی که کارفرمایان و سرمایه‌گذاران بار دوم هم به ما برمی‌گردند.", "image": IMAGES[3]},
{"key": "testimonials", "title": "نظرات مشتریان"},
{"key": "team", "title": "تیم ما", "lead": "کسانی که تصمیم‌های اصلی هر پروژه را می‌گیرند و پاسخ‌گوی آن هستند."},
{"key": "articles", "label": "وبلاگ", "title": "آخرین مقالات", "lead": "یادداشت‌های تیم معماری، اجرا و سرمایه‌گذاری گروه ساختمانی آرامش درباره آنچه در کارگاه و بازار می‌گذرد.", "cta_label": "همه مقالات", "cta_href": "/blog"},
{"key": "faq", "title": "سوالات متداول", "lead": "پاسخ کوتاه به پرتکرارترین پرسش‌های سرمایه‌گذاران و خریداران."},
{"key": "investment_models", "title": "مدل‌های همکاری", "lead": "بسته به میزان سرمایه، افق زمانی و سطح ریسکی که می‌پذیرید، یکی از این سه مسیر مناسب شماست."},
{"key": "process", "title": "فرآیند کار ما", "lead": "چهار مرحله شفاف، از نخستین جلسه تا تحویل کلید."},
]
PAGE_HEROES = [
{"key": "about", "title": "درباره ما", "lead": "گروه ساختمانی آرامش مجموعه‌ای از معماران، مهندسان سازه و مدیران پروژه است که از سال ۱۳۸۳ در حوزه ساخت‌وساز لوکس فعالیت می‌کند.", "image": IMAGES[3]},
{"key": "services", "title": "خدمات", "lead": "هشت حوزه تخصصی که چرخه کامل یک پروژه ساختمانی را از ایده تا بهره‌برداری پوشش می‌دهند.", "image": IMAGES[1]},
{"key": "projects", "title": "پروژه‌ها", "lead": "مجموعه‌ای از برج‌های مسکونی، مراکز تجاری و ویلاهای اختصاصی؛ از پروژه‌های تحویل‌شده تا کارگاه‌های فعال امروز.", "image": IMAGES[0]},
{"key": "investment", "title": "سرمایه‌گذاری", "lead": "سه مسیر روشن برای ورود به بازار ساخت‌وساز لوکس، با ساختار مالی شفاف و گزارش‌دهی منظم.", "image": IMAGES[4]},
{"key": "blog", "title": "وبلاگ", "lead": "یادداشت‌های تیم معماری، اجرا و سرمایه‌گذاری گروه ساختمانی آرامش درباره آنچه در کارگاه و بازار می‌گذرد.", "image": IMAGES[2]},
{"key": "faq", "title": "سوالات متداول", "lead": "پیش از تماس، شاید پاسخ پرسش شما همین‌جا باشد. اگر نبود، خوشحال می‌شویم مستقیم صحبت کنیم.", "image": IMAGES[1]},
{"key": "contact", "title": "تماس با ما", "lead": "برای مشاوره ساخت، سرمایه‌گذاری یا بازدید از پروژه‌ها، تیم ما در سه شهر آماده پاسخ‌گویی است.", "image": IMAGES[1]},
]
INVESTMENT_MODELS = [
{
"title": "مشارکت در ساخت",
"desc": "مالک زمین و گروه ساختمانی آرامش در سود پروژه شریک می‌شوند؛ اجرا، مجوزها و فروش بر عهده ماست.",
"points": ["ارزیابی رایگان زمین", "قرارداد شفاف با ضمانت اجرا", "گزارش ماهانه پیشرفت"],
},
{
"title": "صندوق پروژه‌محور",
"desc": "سرمایه‌گذاری روی یک پروژه مشخص با واحدهای قابل خرید و بازدهی محاسبه‌شده در پایان دوره.",
"points": ["حداقل دوره ۲۴ ماه", "گزارش ارزش‌گذاری فصلی", "امکان انتقال واحد سرمایه"],
},
{
"title": "پیش‌خرید واحد",
"desc": "خرید واحد مسکونی یا تجاری در مراحل ابتدایی ساخت با قیمت پیش از تکمیل و پرداخت مرحله‌ای.",
"points": ["پرداخت مرحله‌ای متناسب با پیشرفت", "امکان شخصی‌سازی پلان", "تضمین زمان تحویل"],
},
]
PROCESS_STEPS = [
{"step": "۰۱", "title": "مطالعه و امکان‌سنجی", "desc": "بررسی زمین، ضوابط شهری و تحلیل بازدهی اقتصادی پروژه."},
{"step": "۰۲", "title": "طراحی و فاز اجرایی", "desc": "کانسپت معماری، طراحی سازه و تأسیسات و تهیه نقشه‌های اجرایی."},
{"step": "۰۳", "title": "اجرا و کنترل کیفیت", "desc": "ساخت با نظارت مستمر، گزارش ماهانه پیشرفت و کنترل هزینه."},
{"step": "۰۴", "title": "تحویل و پشتیبانی", "desc": "تحویل کلید، آموزش بهره‌برداری و پنج سال پشتیبانی فنی."},
]
OFFICES = [
{"city": "تهران", "address": "خیابان ولیعصر، برج آرامش، طبقه هجدهم", "hours": "شنبه تا چهارشنبه، ۹ تا ۱۸"},
{"city": "اصفهان", "address": "خیابان چهارباغ بالا، مجتمع پارسه، طبقه ششم", "hours": "شنبه تا چهارشنبه، ۹ تا ۱۷"},
{"city": "نوشهر", "address": "بلوار دریا، دفتر پروژه دریاکنار", "hours": "شنبه تا پنجشنبه، ۱۰ تا ۱۶"},
]
GALLERY_IMAGES = [
{"src": IMAGES[0], "alt": "تصویری از پروژه‌های گروه ساختمانی آرامش، شماره ۱"},
{"src": IMAGES[1], "alt": "تصویری از پروژه‌های گروه ساختمانی آرامش، شماره ۲"},
{"src": IMAGES[2], "alt": "تصویری از پروژه‌های گروه ساختمانی آرامش، شماره ۳"},
{"src": IMAGES[3], "alt": "تصویری از پروژه‌های گروه ساختمانی آرامش، شماره ۴"},
{"src": IMAGES[4], "alt": "تصویری از پروژه‌های گروه ساختمانی آرامش، شماره ۵"},
{"src": IMAGES[1], "alt": "تصویری از پروژه‌های گروه ساختمانی آرامش، شماره ۶"},
]
STATUS_LABELS = [
{"key": "done", "label": "انجام شده"},
{"key": "progress", "label": "در حال انجام"},
]
CONTACT_SECTION = {
"label": "تماس با ما",
"title": "پروژه‌تان را با ما در میان بگذارید",
"lead": "شماره‌تان را بگذارید؛ کارشناس ما در کمتر از یک روز کاری برای یک جلسه مشاوره رایگان تماس می‌گیرد.",
"address_label": "دفتر مرکزی",
"phone_label": "تلفن",
"email_label": "ایمیل",
"name_label": "نام",
"name_placeholder": "نام و نام خانوادگی",
"phone_field_label": "شماره تلفن",
"phone_placeholder": "09xx xxx xxxx",
"note_label": "توضیحات",
"note_optional_label": "(اختیاری)",
"note_placeholder": "درباره پروژه یا درخواست خود بنویسید…",
"submit_label": "ارسال درخواست مشاوره",
"sending_label": "در حال ارسال…",
"success_title": "درخواست شما ثبت شد",
"success_text": "از اعتماد شما سپاسگزاریم. کارشناسان ما به‌زودی با شما تماس می‌گیرند.",
"success_button_label": "ثبت درخواست جدید",
}
NEWSLETTER = {
"title": "خبرنامه گروه ساختمانی آرامش",
"lead": "هر ماه یک ایمیل: پروژه‌های جدید، فرصت‌های سرمایه‌گذاری و یادداشت‌های تیم معماری.",
"placeholder": "نشانی ایمیل شما",
"button_label": "عضویت",
"sending_label": "در حال ارسال…",
"success_text": "عضویت شما ثبت شد.",
}
FOOTER = {
"about_text": "گروه ساختمانی آرامش از سال ۱۳۸۳ ساختمان‌هایی می‌سازد که قرار است چند نسل در آن‌ها زندگی کنند؛ معماری آرام، اجرای دقیق و سرمایه‌گذاری شفاف.",
"pages_heading": "صفحات",
"services_heading": "خدمات",
"contact_heading": "ارتباط با ما",
"copyright": "© ۱۴۰۳ گروه ساختمانی آرامش — تمامی حقوق محفوظ است.",
"tagline": "طراحی و ساخت با دقتِ معماری",
"socials": [
{"label": "اینستاگرام", "href": "#", "icon": "instagram"},
{"label": "لینکدین", "href": "#", "icon": "linkedin"},
{"label": "تلگرام", "href": "#", "icon": "telegram"},
],
}
frontend/index.html
+2 -2
View File
@@ -1,10 +1,10 @@
<!doctype html>
<html lang="en">
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Aramesh Building Group Luxury Website</title>
<title>گروه ساختمانی آرامش</title>
</head>
<body>
<div id="root"></div>
frontend/src/App.tsx
+4
View File
@@ -57,6 +57,10 @@ function AnimatedRoutes() {
function AppShell() {
const { data, error, reload } = useSiteData();
useEffect(() => {
if (data?.brand.name) document.title = data.brand.name;
}, [data?.brand.name]);
return (
<div dir="rtl" lang="fa" className="min-h-screen w-full overflow-x-hidden bg-ink font-pinar text-ivory">
<Preloader />
frontend/src/api.tsx
+141 -1
View File
@@ -32,8 +32,109 @@ export type BeforeAfterInfo = {
after_label: string
}
export type NavItem = { id: number; label: string; href: string }
export type HeroContent = {
id: number
kicker: string
title: string
title_highlight: string
subtitle: string
badge_value: string
badge_label: string
cta_primary_label: string
cta_primary_href: string
cta_secondary_label: string
cta_secondary_href: string
scroll_label: string
}
export type StoryContent = {
id: number
title: string
paragraphs: string[]
quote: string
quote_author: string
stat1_value: string
stat1_label: string
stat2_value: string
stat2_label: string
link_label: string
link_href: string
bento: { src: string; alt: string }[]
}
export type SectionHeadingContent = {
id: number
key: string
label: string
title: string
lead: string
image: string
cta_label: string
cta_href: string
}
export type PageHeroContent = { id: number; key: string; title: string; lead: string; image: string }
export type InvestmentModelItem = { id: number; title: string; desc: string; points: string[] }
export type ProcessStepItem = { id: number; step: string; title: string; desc: string }
export type OfficeItem = { id: number; city: string; address: string; hours: string }
export type GalleryImageItem = { id: number; src: string; alt: string }
export type StatusLabelItem = { id: number; key: string; label: string }
export type ContactSectionContent = {
id: number
label: string
title: string
lead: string
address_label: string
phone_label: string
email_label: string
name_label: string
name_placeholder: string
phone_field_label: string
phone_placeholder: string
note_label: string
note_optional_label: string
note_placeholder: string
submit_label: string
sending_label: string
success_title: string
success_text: string
success_button_label: string
}
export type NewsletterContent = {
id: number
title: string
lead: string
placeholder: string
button_label: string
sending_label: string
success_text: string
}
export type SocialItem = { label: string; href: string; icon: string }
export type FooterContent = {
id: number
about_text: string
pages_heading: string
services_heading: string
contact_heading: string
copyright: string
tagline: string
socials: SocialItem[]
}
export interface SiteData {
brand: BrandInfo
nav: NavItem[]
hero: HeroContent
story: StoryContent
section_headings: SectionHeadingContent[]
page_heroes: PageHeroContent[]
services: Service[]
projects: Project[]
articles: Article[]
@@ -44,6 +145,14 @@ export interface SiteData {
stats: StatItem[]
why_us: WhyUsItem[]
before_after: BeforeAfterInfo
investment_models: InvestmentModelItem[]
process_steps: ProcessStepItem[]
offices: OfficeItem[]
gallery: GalleryImageItem[]
status_labels: StatusLabelItem[]
contact_section: ContactSectionContent
newsletter: NewsletterContent
footer: FooterContent
}
interface SiteContextValue {
@@ -68,7 +177,7 @@ export function SiteProvider({ children }: { children: ReactNode }) {
})
.then((json) => {
if (!cancelled) {
if (json.brand && json.before_after) setData(json)
if (json.brand && json.hero && json.footer && json.nav) setData(json)
else setError(true)
}
})
@@ -103,3 +212,34 @@ export function useSite(): SiteData {
}
return data
}
const EMPTY_HEADING: SectionHeadingContent = {
id: 0,
key: '',
label: '',
title: '',
lead: '',
image: '',
cta_label: '',
cta_href: '',
}
/** تیتر و توضیح یک بخش بر اساس key تعریف‌شده در پنل مدیریت */
export function useSectionHeading(key: string): SectionHeadingContent {
const { data } = useContext(SiteContext)
return data?.section_headings.find((s) => s.key === key) ?? { ...EMPTY_HEADING, key }
}
/** هیرو بالای صفحه بر اساس key تعریف‌شده در پنل مدیریت */
export function usePageHero(key: string): PageHeroContent {
const { data } = useContext(SiteContext)
return (
data?.page_heroes.find((p) => p.key === key) ?? { id: 0, key, title: '', lead: '', image: '' }
)
}
/** برچسب فارسی وضعیت پروژه (done | progress) از پنل مدیریت */
export function useStatusLabel(key: string): string {
const { data } = useContext(SiteContext)
return data?.status_labels.find((s) => s.key === key)?.label ?? key
}
frontend/src/components/ContactSection.tsx
+17 -17
View File
@@ -7,7 +7,7 @@ import { useSite } from '../api'
import { API_URL } from '../config'
export function ContactSection() {
const { brand } = useSite()
const { brand, contact_section: content } = useSite()
const [form, setForm] = useState({ name: '', phone: '', note: '' })
const [sent, setSent] = useState(false)
const [sending, setSending] = useState(false)
@@ -96,12 +96,12 @@ export function ContactSection() {
<div className="border border-ivory/20 bg-char/45 p-8 backdrop-blur-[8px] md:p-10 lg:col-span-5">
<Reveal>
<p className="text-sm font-light text-copper">تماس با ما</p>
<p className="text-sm font-light text-copper">{content.label}</p>
<h2 id="contact-title" className="mt-5 text-section font-bold text-ivory">
پروژه‌تان را با ما در میان بگذارید
{content.title}
</h2>
<p className="mt-6 text-base font-light leading-9 text-ivory/75">
شماره‌تان را بگذارید؛ کارشناس ما در کمتر از یک روز کاری برای یک جلسه مشاوره رایگان تماس می‌گیرد.
{content.lead}
</p>
</Reveal>
@@ -110,14 +110,14 @@ export function ContactSection() {
<li className="flex items-start gap-4">
<MapPinIcon className="mt-1 h-5 w-5 shrink-0 text-copper" />
<div>
<p className="text-sm font-bold text-ivory">دفتر مرکزی</p>
<p className="text-sm font-bold text-ivory">{content.address_label}</p>
<p className="mt-1 text-sm font-light leading-7 text-ivory/70">{brand.address}</p>
</div>
</li>
<li className="flex items-start gap-4">
<PhoneIcon className="mt-1 h-5 w-5 shrink-0 text-copper" />
<div>
<p className="text-sm font-bold text-ivory">تلفن</p>
<p className="text-sm font-bold text-ivory">{content.phone_label}</p>
<a
href={brand.phone_href}
dir="ltr"
@@ -130,7 +130,7 @@ export function ContactSection() {
<li className="flex items-start gap-4">
<MailIcon className="mt-1 h-5 w-5 shrink-0 text-copper" />
<div>
<p className="text-sm font-bold text-ivory">ایمیل</p>
<p className="text-sm font-bold text-ivory">{content.email_label}</p>
<a
href={`mailto:${brand.email}`}
dir="ltr"
@@ -148,9 +148,9 @@ export function ContactSection() {
{sent ? (
<div className="flex h-full flex-col items-center justify-center py-14 text-center">
<CheckCircle2Icon className="h-12 w-12 text-copper" />
<h3 className="mt-6 text-xl font-bold text-ivory">درخواست شما ثبت شد</h3>
<h3 className="mt-6 text-xl font-bold text-ivory">{content.success_title}</h3>
<p className="mt-3 max-w-sm text-sm font-light leading-8 text-ivory/70">
از اعتماد شما سپاسگزاریم. کارشناسان ما به‌زودی با شما تماس می‌گیرند.
{content.success_text}
</p>
<Button
type="button"
@@ -161,28 +161,28 @@ export function ContactSection() {
setForm({ name: '', phone: '', note: '' })
}}
>
ثبت درخواست جدید
{content.success_button_label}
</Button>
</div>
) : (
<form onSubmit={submit} noValidate className="grid gap-6 md:grid-cols-2">
<div>
<label htmlFor="contact-name" className="block text-sm font-bold text-ivory/90">
نام
{content.name_label}
</label>
<input
id="contact-name"
type="text"
value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })}
placeholder="نام و نام خانوادگی"
placeholder={content.name_placeholder}
className="mt-3 w-full border border-ivory/20 bg-ink/45 px-5 py-4 text-sm font-light text-ivory placeholder:text-ivory/40 transition-colors duration-200 ease-lux focus:border-copper focus:outline-none"
/>
</div>
<div>
<label htmlFor="contact-phone" className="block text-sm font-bold text-ivory/90">
شماره تلفن <span className="text-copper">*</span>
{content.phone_field_label} <span className="text-copper">*</span>
</label>
<input
id="contact-phone"
@@ -191,28 +191,28 @@ export function ContactSection() {
required
value={form.phone}
onChange={(e) => setForm({ ...form, phone: e.target.value })}
placeholder="09xx xxx xxxx"
placeholder={content.phone_placeholder}
className="mt-3 w-full border border-ivory/20 bg-ink/45 px-5 py-4 text-right text-sm font-light text-ivory placeholder:text-ivory/40 transition-colors duration-200 ease-lux focus:border-copper focus:outline-none"
/>
</div>
<div className="md:col-span-2">
<label htmlFor="contact-note" className="block text-sm font-bold text-ivory/90">
توضیحات <span className="font-light text-ivory/50">(اختیاری)</span>
{content.note_label} <span className="font-light text-ivory/50">{content.note_optional_label}</span>
</label>
<textarea
id="contact-note"
rows={6}
value={form.note}
onChange={(e) => setForm({ ...form, note: e.target.value })}
placeholder="درباره پروژه یا درخواست خود بنویسید…"
placeholder={content.note_placeholder}
className="mt-3 w-full resize-none border border-ivory/20 bg-ink/45 px-5 py-4 text-sm font-light leading-8 text-ivory placeholder:text-ivory/40 transition-colors duration-200 ease-lux focus:border-copper focus:outline-none"
/>
</div>
<div className="md:col-span-2">
<Button type="submit" variant="copper" className="w-full md:w-auto md:px-12" disabled={sending}>
{sending ? 'در حال ارسال…' : 'ارسال درخواست مشاوره'}
{sending ? content.sending_label : content.submit_label}
</Button>
</div>
</form>
frontend/src/components/Footer.tsx
+31 -28
View File
@@ -1,11 +1,16 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { InstagramIcon, LinkedinIcon, MailIcon, MapPinIcon, PhoneIcon, SendIcon } from 'lucide-react';
import { NAV } from '../data/site';
import { useSite } from '../api';
const SOCIAL_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
instagram: InstagramIcon,
linkedin: LinkedinIcon,
telegram: SendIcon,
};
export function Footer() {
const { brand, services } = useSite();
const { brand, services, nav, footer } = useSite();
return (
<footer className="border-t border-ivory/10 bg-char">
<div className="mx-auto max-w-site px-6 py-16 lg:px-10">
@@ -13,36 +18,34 @@ export function Footer() {
<div className="lg:col-span-4">
<img src={brand.logo} alt={brand.name} className="h-20 w-auto object-contain" />
<p className="mt-6 max-w-sm text-sm font-light leading-8 text-ivory/55">
گروه ساختمانی آرامش از سال ۱۳۸۳ ساختمان‌هایی می‌سازد که قرار است چند نسل در آن‌ها زندگی کنند؛ معماری آرام،
اجرای دقیق و سرمایه‌گذاری شفاف.
{footer.about_text}
</p>
<div className="mt-6 flex gap-3">
{[
{ Icon: InstagramIcon, label: 'اینستاگرام' },
{ Icon: LinkedinIcon, label: 'لینکدین' },
{ Icon: SendIcon, label: 'تلگرام' }].
map(({ Icon, label }) =>
<a
key={label}
href="#"
aria-label={label}
className="flex h-10 w-10 items-center justify-center border border-ivory/15 text-ivory/70 transition-colors duration-200 ease-lux hover:border-copper hover:text-copper">
<Icon className="h-4 w-4" />
</a>
)}
{footer.socials.map(({ label, href, icon }) => {
const Icon = SOCIAL_ICONS[icon] ?? InstagramIcon;
return (
<a
key={label}
href={href}
aria-label={label}
className="flex h-10 w-10 items-center justify-center border border-ivory/15 text-ivory/70 transition-colors duration-200 ease-lux hover:border-copper hover:text-copper">
<Icon className="h-4 w-4" />
</a>
);
})}
</div>
</div>
<div className="lg:col-span-2">
<h3 className="text-sm font-bold text-copper">صفحات</h3>
<h3 className="text-sm font-bold text-copper">{footer.pages_heading}</h3>
<ul className="mt-5 space-y-3">
{NAV.map((item) =>
<li key={item.to}>
{nav.map((item) =>
<li key={item.href}>
<Link
to={item.to}
to={item.href}
className="text-sm font-light text-ivory/60 transition-colors duration-200 ease-lux hover:text-copper">
{item.label}
</Link>
</li>
@@ -51,7 +54,7 @@ export function Footer() {
</div>
<div className="lg:col-span-3">
<h3 className="text-sm font-bold text-copper">خدمات</h3>
<h3 className="text-sm font-bold text-copper">{footer.services_heading}</h3>
<ul className="mt-5 space-y-3">
{services.map((service) =>
<li key={service.title} className="text-sm font-light text-ivory/60">
@@ -62,7 +65,7 @@ export function Footer() {
</div>
<div className="lg:col-span-3">
<h3 className="text-sm font-bold text-copper">ارتباط با ما</h3>
<h3 className="text-sm font-bold text-copper">{footer.contact_heading}</h3>
<ul className="mt-5 space-y-4 text-sm font-light text-ivory/60">
<li className="flex items-start gap-3">
<MapPinIcon className="mt-1 h-4 w-4 shrink-0 text-copper" />
@@ -85,10 +88,10 @@ export function Footer() {
</div>
<div className="mt-14 flex flex-col items-center justify-between gap-4 border-t border-ivory/10 pt-6 text-xs font-light text-ivory/40 md:flex-row">
<p>© ۱۴۰۳ گروه ساختمانی آرامش — تمامی حقوق محفوظ است.</p>
<p>طراحی و ساخت با دقتِ معماری</p>
<p>{footer.copyright}</p>
<p>{footer.tagline}</p>
</div>
</div>
</footer>);
}
}
frontend/src/components/Header.tsx
+7 -9
View File
@@ -1,12 +1,10 @@
import React, { useEffect, useState } from "react";
import { Link, NavLink, useLocation } from "react-router-dom";
import { MenuIcon, PhoneIcon, XIcon } from "lucide-react";
import { NAV } from "../data/site";
import { useSite } from "../api";
import { use } from "framer-motion/m";
export function Header() {
const { brand } = useSite();
const { brand, nav } = useSite();
const [scrolled, setScrolled] = useState(false);
const [open, setOpen] = useState(false);
const { pathname } = useLocation();
@@ -46,10 +44,10 @@ export function Header() {
<nav aria-label="ناوبری اصلی" className="hidden xl:block">
<ul className="flex items-center gap-7">
{NAV.map((item) => (
<li key={item.to}>
{nav.map((item) => (
<li key={item.href}>
<NavLink
to={item.to}
to={item.href}
className={({ isActive }) =>
`group relative py-2 text-[0.95rem] font-light transition-colors duration-200 ease-lux hover:text-copper [text-shadow:_0_2px_4px_rgba(0,0,0,0.6)] ${
isActive ? "text-copper" : "text-ivory/80"
@@ -110,10 +108,10 @@ export function Header() {
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}>
{nav.map((item) => (
<li key={item.href}>
<NavLink
to={item.to}
to={item.href}
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"
frontend/src/components/PageHero.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ type PageHeroProps = {
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" />
{image && <img src={image} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" />}
<div className="absolute inset-0 bg-ink/50" aria-hidden="true" />
frontend/src/components/Preloader.tsx
+13 -5
View File
@@ -1,11 +1,19 @@
import React, { useEffect, useState } from 'react'
import { AnimatePresence, motion } from 'framer-motion'
import { BRAND } from '../data/site'
import { useSiteData } from '../api'
// برندینگ پیش از رسیدن پاسخ سرور — پس از بارگذاری داده‌ها از دیتابیس استفاده می‌شود
const FALLBACK_LOGO = '/images/logo.png'
const FALLBACK_NAME = 'گروه ساختمانی آرامش'
export function Preloader() {
const { data } = useSiteData()
const [done, setDone] = useState(false)
const [progress, setProgress] = useState(0)
const logo = data?.brand.logo || FALLBACK_LOGO
const name = data?.brand.name || FALLBACK_NAME
useEffect(() => {
const start = Date.now()
const total = 1800
@@ -39,13 +47,13 @@ export function Preloader() {
>
<div className="relative h-36 w-36">
<img
src={BRAND.logo}
src={logo}
alt=""
aria-hidden="true"
className="absolute inset-0 h-full w-full object-contain opacity-[0.12]"
/>
<div className="absolute inset-0 overflow-hidden" style={{ clipPath: `inset(${100 - progress}% 0 0 0)` }}>
<img src={BRAND.logo} alt="" aria-hidden="true" className="h-full w-full object-contain" />
<img src={logo} alt="" aria-hidden="true" className="h-full w-full object-contain" />
</div>
<div
className="absolute inset-x-0 h-px bg-copper"
@@ -64,10 +72,10 @@ export function Preloader() {
transition={{ duration: 0.5, delay: 0.2 }}
className="mt-4 text-sm font-light tracking-widest text-copper font-pinar"
>
{BRAND.name}
{name}
</motion.p>
</motion.div>
)}
</AnimatePresence>
)
}
}
frontend/src/components/ProjectCard.tsx
+3 -2
View File
@@ -1,10 +1,11 @@
import React from 'react'
import { Link } from 'react-router-dom'
import { useStatusLabel } from '../api'
export function ProjectCard({ project }: any) {
const isOngoing = project.status === 'progress'
const statusText = isOngoing ? 'در حال انجام' : 'انجام شده'
const statusText = useStatusLabel(project.status)
const dotColor = isOngoing ? 'bg-copper animate-pulse' : 'bg-ivory/60'
const textColor = isOngoing ? 'text-copper' : 'text-ivory/90'
frontend/src/components/home/Articles.tsx
+15 -12
View File
@@ -3,20 +3,21 @@ import { ArrowLeftIcon } from 'lucide-react';
import { Reveal } from '../Reveal';
import { ButtonLink } from '../Button';
import { ArticleCard } from '../ArticleCard';
import { useSite } from '../../api';
import { useSectionHeading, useSite } from '../../api';
export function Articles() {
const { articles } = useSite();
const heading = useSectionHeading('articles');
return (
<section className="bg-char py-24 lg:py-32" aria-labelledby="articles-title">
<div className="mx-auto max-w-site px-6 lg:px-10">
<Reveal className="max-w-2xl text-right">
<p className="text-sm font-light text-copper">وبلاگ</p>
<p className="text-sm font-light text-copper">{heading.label}</p>
<h2 id="articles-title" className="mt-5 text-section font-bold text-ivory">
آخرین مقالات
{heading.title}
</h2>
<p className="mt-5 text-base font-light leading-9 text-ivory/60">
یادداشت‌های تیم معماری، اجرا و سرمایه‌گذاری گروه ساختمانی آرامش درباره آنچه در کارگاه و بازار می‌گذرد.
{heading.lead}
</p>
<div className="mt-6 h-px w-24 bg-copper/70" />
</Reveal>
@@ -29,14 +30,16 @@ export function Articles() {
)}
</div>
<Reveal delay={0.1}>
<div className="mt-12 flex justify-center">
<ButtonLink to="/blog" variant="outline" className="font-light">
همه مقالات
<ArrowLeftIcon className="h-4 w-4" />
</ButtonLink>
</div>
</Reveal>
{heading.cta_label && heading.cta_href && (
<Reveal delay={0.1}>
<div className="mt-12 flex justify-center">
<ButtonLink to={heading.cta_href} variant="outline" className="font-light">
{heading.cta_label}
<ArrowLeftIcon className="h-4 w-4" />
</ButtonLink>
</div>
</Reveal>
)}
</div>
</section>);
frontend/src/components/home/Faq.tsx
+4 -3
View File
@@ -3,7 +3,7 @@ import { AnimatePresence, motion } from 'framer-motion'
import { PlusIcon } from 'lucide-react'
import { Reveal } from '../Reveal'
import { SectionHeading } from '../SectionHeading'
import { useSite } from '../../api'
import { useSectionHeading, useSite } from '../../api'
type FaqProps = {
hideHeading?: boolean;
@@ -11,6 +11,7 @@ type FaqProps = {
export function Faq({ hideHeading = false }: FaqProps) {
const { faqs } = useSite()
const heading = useSectionHeading('faq')
const [open, setOpen] = useState<number | null>(0)
return (
@@ -21,8 +22,8 @@ export function Faq({ hideHeading = false }: FaqProps) {
{!hideHeading && (
<div className="lg:col-span-4">
<SectionHeading
title="سوالات متداول"
lead="پاسخ کوتاه به پرتکرارترین پرسش‌های سرمایه‌گذاران و خریداران."
title={heading.title}
lead={heading.lead}
/>
</div>
)}
frontend/src/components/home/FeaturedProjects.tsx
+19 -18
View File
@@ -5,26 +5,25 @@ import { Reveal } from '../Reveal'
import { ButtonLink } from '../Button'
import { ProjectCard } from '../ProjectCard'
import { SectionHeading } from '../SectionHeading'
import { useSite } from '../../api'
import { useSectionHeading, useSite, useStatusLabel } from '../../api'
import type { ProjectStatus } from '../../data/site'
const FILTERS: { key: ProjectStatus; label: string }[] = [
{ key: 'done', label: 'انجام شده' },
{ key: 'progress', label: 'در حال انجام' },
]
export function FeaturedProjects() {
const { projects } = useSite()
const heading = useSectionHeading('featured_projects')
const doneLabel = useStatusLabel('done')
const progressLabel = useStatusLabel('progress')
const FILTERS: { key: ProjectStatus; label: string }[] = [
{ key: 'done', label: doneLabel },
{ key: 'progress', label: progressLabel },
]
const [status, setStatus] = useState<ProjectStatus>('done')
const list = projects.filter((p) => p.status === status).slice(0, 3)
return (
<section className="bg-ink py-24 lg:py-32" aria-labelledby="projects-title">
<div className="mx-auto max-w-site px-6 lg:px-10">
<SectionHeading
title="پروژه‌های شاخص"
lead="کارهایی که بیشترین چیز را درباره استاندارد ما می‌گویند؛ چه آن‌هایی که تحویل شده‌اند و چه آن‌هایی که همین امروز در حال ساخت‌اند."
/>
<SectionHeading title={heading.title} lead={heading.lead} />
<div className="mt-10 flex flex-wrap items-center gap-3" role="tablist" aria-label="فیلتر وضعیت پروژه">
{FILTERS.map((filter) => (
@@ -78,14 +77,16 @@ export function FeaturedProjects() {
</AnimatePresence>
</div>
<Reveal delay={0.1}>
<div className="mt-12 flex justify-center">
<ButtonLink to="/projects" variant="outline" className="font-light">
همه پروژه‌ها
<ArrowLeftIcon className="h-4 w-4" />
</ButtonLink>
</div>
</Reveal>
{heading.cta_label && heading.cta_href && (
<Reveal delay={0.1}>
<div className="mt-12 flex justify-center">
<ButtonLink to={heading.cta_href} variant="outline" className="font-light">
{heading.cta_label}
<ArrowLeftIcon className="h-4 w-4" />
</ButtonLink>
</div>
</Reveal>
)}
</div>
</section>
)
frontend/src/components/home/Gallery.tsx
+12 -12
View File
@@ -3,17 +3,17 @@ import { AnimatePresence, motion } from 'framer-motion'
import { ChevronLeftIcon, ChevronRightIcon, XIcon } from 'lucide-react'
import { Reveal } from '../Reveal'
import { SectionHeading } from '../SectionHeading'
import { IMAGES } from '../../data/site'
const GRID = [IMAGES[0], IMAGES[1], IMAGES[2], IMAGES[3], IMAGES[4], IMAGES[1]]
import { useSectionHeading, useSite } from '../../api'
export function Gallery() {
const { gallery } = useSite()
const heading = useSectionHeading('gallery')
const [active, setActive] = useState<number | null>(null)
const close = useCallback(() => setActive(null), [])
const step = useCallback((dir: number) => {
setActive((prev) => (prev === null ? prev : (prev + dir + GRID.length) % GRID.length))
}, [])
setActive((prev) => (prev === null ? prev : (prev + dir + gallery.length) % gallery.length))
}, [gallery.length])
useEffect(() => {
if (active === null) return
@@ -30,14 +30,14 @@ export function Gallery() {
<section className="bg-ink py-24 lg:py-32" aria-labelledby="gallery-title">
<div className="mx-auto max-w-site px-6 lg:px-10">
<SectionHeading
title="گالری تصاویر"
lead="قاب‌هایی از کارگاه‌ها و پروژه‌های تحویل‌شده گروه ساختمانی آرامش."
title={heading.title}
lead={heading.lead}
align="center"
/>
<div className="mt-14 grid grid-cols-2 gap-4 lg:grid-cols-3">
{GRID.map((src, i) => (
<Reveal key={`${src}-${i}`} delay={0.04 * i}>
{gallery.map((image, i) => (
<Reveal key={image.id} delay={0.04 * i}>
<button
type="button"
onClick={() => setActive(i)}
@@ -45,8 +45,8 @@ export function Gallery() {
aria-label={`بزرگ‌نمایی تصویر شماره ${(i + 1).toLocaleString('fa-IR')}`}
>
<img
src={src}
alt={`تصویری از پروژه‌های گروه ساختمانی آرامش، شماره ${(i + 1).toLocaleString('fa-IR')}`}
src={image.src}
alt={image.alt}
className="aspect-[4/3] w-full object-cover transition-transform duration-500 ease-lux group-hover:scale-105"
/>
</button>
@@ -102,7 +102,7 @@ export function Gallery() {
<motion.img
key={active}
src={GRID[active]}
src={gallery[active].src}
alt=""
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
frontend/src/components/home/Hero.tsx
+26 -16
View File
@@ -5,12 +5,27 @@ import { ButtonLink } from '../Button'
import { useSite } from '../../api'
export function Hero() {
const { brand } = useSite()
const { brand, hero } = useSite()
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])
// واژه highlight در میانه تیتر با رنگ مسی رندر می‌شود
const renderTitle = () => {
if (hero.title_highlight && hero.title.includes(hero.title_highlight)) {
const [before, ...rest] = hero.title.split(hero.title_highlight)
return (
<>
{before}
<span className="text-copper">{hero.title_highlight}</span>
{rest.join(hero.title_highlight)}
</>
)
}
return hero.title
}
return (
<section className="relative h-screen min-h-[640px] w-full overflow-hidden" aria-label="معرفی گروه ساختمانی آرامش">
<motion.img
@@ -40,7 +55,7 @@ export function Hero() {
transition={{ duration: 0.7, delay: 2.1, ease: [0.23, 1, 0.32, 1] }}
className="text-sm font-light text-copper"
>
از سال ۱۳۸۳ — تهران، اصفهان، سواحل شمال
{hero.kicker}
</motion.p>
<motion.h1
@@ -49,9 +64,7 @@ export function Hero() {
transition={{ duration: 0.85, delay: 2.2, ease: [0.23, 1, 0.32, 1] }}
className="mt-6 text-hero font-bold text-ivory"
>
ساختمانی که آرامش را
<span className="text-copper"> معماری </span>
می‌کند
{renderTitle()}
</motion.h1>
<motion.p
@@ -60,8 +73,7 @@ export function Hero() {
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"
>
طراحی، ساخت و سرمایه‌گذاری در پروژه‌های مسکونی و تجاری لوکس؛ با استانداردی که در جزئیات دیده می‌شود و در
سال‌ها دوام می‌آورد.
{hero.subtitle}
</motion.p>
<motion.div
@@ -70,12 +82,12 @@ export function Hero() {
transition={{ duration: 0.85, delay: 2.44, ease: [0.23, 1, 0.32, 1] }}
className="mt-10 flex flex-wrap items-center gap-4"
>
<ButtonLink to="/projects" variant="copper">
مشاهده پروژه‌ها
<ButtonLink to={hero.cta_primary_href} variant="copper">
{hero.cta_primary_label}
<ArrowLeftIcon className="h-4 w-4" />
</ButtonLink>
<ButtonLink to="/contact" variant="outline" className="font-light">
مشاوره سرمایه‌گذاری
<ButtonLink to={hero.cta_secondary_href} variant="outline" className="font-light">
{hero.cta_secondary_label}
</ButtonLink>
</motion.div>
</div>
@@ -86,10 +98,8 @@ export function Hero() {
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"
>
<p className="text-3xl font-bold text-copper">۴۷</p>
<p className="mt-2 text-sm font-light leading-7 text-ivory/70">
پروژه تحویل‌شده در بیست‌ویک سال فعالیت حرفه‌ای
</p>
<p className="text-3xl font-bold text-copper">{hero.badge_value}</p>
<p className="mt-2 text-sm font-light leading-7 text-ivory/70">{hero.badge_label}</p>
</motion.div>
</motion.div>
@@ -98,7 +108,7 @@ export function Hero() {
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"
>
<span className="text-xs font-light">اسکرول کنید</span>
<span className="text-xs font-light">{hero.scroll_label}</span>
<ChevronDownIcon className="h-4 w-4 animate-bounce" />
</a>
</section>
frontend/src/components/home/Newsletter.tsx
+9 -7
View File
@@ -3,9 +3,11 @@ import { CheckIcon, SendIcon } from 'lucide-react'
import Swal from 'sweetalert2'
import { Reveal } from '../Reveal'
import { Button } from '../Button'
import { useSite } from '../../api'
import { API_URL } from '../../config'
export function Newsletter() {
const { newsletter } = useSite()
const [email, setEmail] = useState('')
const [status, setStatus] = useState<'idle' | 'error' | 'done'>('idle')
const [sending, setSending] = useState(false)
@@ -89,10 +91,10 @@ export function Newsletter() {
<div className="mx-auto grid max-w-site items-center gap-8 px-6 lg:grid-cols-2 lg:px-10">
<Reveal>
<h2 id="newsletter-title" className="text-2xl font-bold leading-relaxed text-char md:text-3xl">
خبرنامه گروه ساختمانی آرامش
{newsletter.title}
</h2>
<p className="mt-3 max-w-md text-sm font-light leading-8 text-char/75">
هر ماه یک ایمیل: پروژه‌های جدید، فرصت‌های سرمایه‌گذاری و یادداشت‌های تیم معماری.
{newsletter.lead}
</p>
</Reveal>
@@ -100,7 +102,7 @@ export function Newsletter() {
<form onSubmit={submit} className="flex flex-col gap-3 sm:flex-row" noValidate>
<div className="flex-1">
<label htmlFor="newsletter-email" className="sr-only">
نشانی ایمیل
{newsletter.placeholder}
</label>
<input
id="newsletter-email"
@@ -111,21 +113,21 @@ export function Newsletter() {
setEmail(e.target.value)
if (status !== 'idle') setStatus('idle')
}}
placeholder="نشانی ایمیل شما"
placeholder={newsletter.placeholder}
className="w-full border border-transparent bg-char px-5 py-4 text-left text-sm font-light text-ivory placeholder:text-ivory/40 transition-all duration-300 ease-lux focus:border-ivory focus:outline-none"
aria-invalid={status === 'error'}
/>
{status === 'done' && (
<p className="mt-2 flex items-center gap-1.5 text-xs font-light text-char" role="status">
<CheckIcon className="h-3.5 w-3.5" />
عضویت شما ثبت شد.
{newsletter.success_text}
</p>
)}
</div>
<Button type="submit" variant="dark-ivory" disabled={sending}>
<SendIcon className="h-4 w-4" />
{sending ? 'در حال ارسال…' : 'عضویت'}
{sending ? newsletter.sending_label : newsletter.button_label}
</Button>
</form>
</Reveal>
frontend/src/components/home/Services.tsx
+5 -5
View File
@@ -1,21 +1,21 @@
import React from 'react'
import { Reveal } from '../Reveal'
import { ServiceIcon } from '../ServiceIcon'
import { useSite } from '../../api'
import { useSectionHeading, useSite } from '../../api'
export function Services() {
const { services } = useSite()
const heading = useSectionHeading('services')
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">
<Reveal className="max-w-2xl text-right">
<h2 id="services-title" className="text-section font-bold text-ivory">
خدمات
{heading.title}
</h2>
<p className="mt-5 text-base font-light leading-9 text-ivory/60">
از نخستین خط روی کاغذ تا تحویل کلید، مدیریت سرمایه و طراحی محوطه؛ همه مراحل در یک مجموعه و زیر یک نظام
کنترل کیفیت.
{heading.lead}
</p>
<div className="mt-6 h-px w-24 bg-copper/70" />
</Reveal>
frontend/src/components/home/Story.tsx
+27 -26
View File
@@ -2,23 +2,18 @@ import React from 'react'
import { ArrowLeftIcon } from 'lucide-react'
import { Reveal } from '../Reveal'
import { ButtonLink } from '../Button'
import { IMAGES } from '../../data/site'
const BENTO = [
{ src: IMAGES[0], alt: 'نمای برج مسکونی آرامش در تهران' },
{ src: IMAGES[1], alt: 'آتریوم مرکزی مجتمع تجاری پارسه' },
{ src: IMAGES[2], alt: 'ویلاهای ساخته‌شده در سواحل شمال' },
{ src: IMAGES[3], alt: 'نمای شبانه برج دوقلوی نیاوران' },
]
import { useSite } from '../../api'
type StoryProps = {
showLink?: boolean;
showLabel?: boolean;
showQuote?: boolean;
alignTop?: boolean;
children?: React.ReactNode;
}
export function Story({ showLink = true, showLabel = true, alignTop = false, children }: StoryProps) {
export function Story({ showLink = true, showLabel = true, showQuote = false, alignTop = false, children }: StoryProps) {
const { story } = useSite()
return (
<section id="story" className="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'}`}>
@@ -26,40 +21,46 @@ export function Story({ showLink = true, showLabel = true, alignTop = false, chi
{showLabel && (
<Reveal>
<h2 id="story-title" className="text-section font-bold text-ivory">
درباره ی ما
{story.title}
</h2>
<div className="mt-6 h-px w-24 bg-copper/70" />
</Reveal>
)}
<Reveal delay={0.08}>
<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>
{story.paragraphs.map((paragraph, i) => (
<p key={i} className={`text-base font-light leading-9 text-ivory/65 ${i === 0 ? 'mt-8' : 'mt-5'}`}>
{paragraph}
</p>
))}
</Reveal>
<Reveal delay={0.16}>
<div className="mt-10 grid grid-cols-2 gap-8 border-t border-ivory/10 pt-8">
<div>
<p className="text-2xl font-bold text-copper">۹۴٪</p>
<p className="mt-2 text-sm font-light text-ivory/55">تحویل به‌موقع پروژه‌ها</p>
<p className="text-2xl font-bold text-copper">{story.stat1_value}</p>
<p className="mt-2 text-sm font-light text-ivory/55">{story.stat1_label}</p>
</div>
<div>
<p className="text-2xl font-bold text-copper">۵ سال</p>
<p className="mt-2 text-sm font-light text-ivory/55">پشتیبانی پس از تحویل</p>
<p className="text-2xl font-bold text-copper">{story.stat2_value}</p>
<p className="mt-2 text-sm font-light text-ivory/55">{story.stat2_label}</p>
</div>
</div>
</Reveal>
{showQuote && story.quote && (
<Reveal delay={0.2}>
<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">{story.quote}</p>
<p className="mt-5 text-sm font-bold text-copper">{story.quote_author}</p>
</div>
</Reveal>
)}
{showLink && (
<Reveal delay={0.22}>
<ButtonLink to="/about" variant="outline" className="mt-10 font-light">
داستان کامل ما
<ButtonLink to={story.link_href} variant="outline" className="mt-10 font-light">
{story.link_label}
<ArrowLeftIcon className="h-4 w-4" />
</ButtonLink>
</Reveal>
@@ -73,7 +74,7 @@ export function Story({ showLink = true, showLabel = true, alignTop = false, chi
</div>
<div className="grid grid-cols-2 gap-4">
{BENTO.map((item, i) => (
{story.bento.map((item, i) => (
<Reveal key={item.src + i} delay={0.06 * i}>
<div className="overflow-hidden">
<img
@@ -88,4 +89,4 @@ export function Story({ showLink = true, showLabel = true, alignTop = false, chi
</div>
</section>
)
}
}
frontend/src/components/home/Team.tsx
+4 -3
View File
@@ -1,16 +1,17 @@
import React from 'react'
import { Reveal } from '../Reveal'
import { SectionHeading } from '../SectionHeading'
import { useSite } from '../../api'
import { useSectionHeading, useSite } from '../../api'
export function Team() {
const { team } = useSite()
const heading = useSectionHeading('team')
return (
<section className="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="تیم ما"
lead="کسانی که تصمیم‌های اصلی هر پروژه را می‌گیرند و پاسخ‌گوی آن هستند."
title={heading.title}
lead={heading.lead}
align="center"
/>
frontend/src/components/home/Testimonials.tsx
+3 -2
View File
@@ -2,10 +2,11 @@ import React, { useState } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import { ChevronLeftIcon, ChevronRightIcon, QuoteIcon } from 'lucide-react';
import { SectionHeading } from '../SectionHeading';
import { useSite } from '../../api';
import { useSectionHeading, useSite } from '../../api';
export function Testimonials() {
const { testimonials } = useSite();
const heading = useSectionHeading('testimonials');
const [index, setIndex] = useState(0);
const item = testimonials[index];
@@ -16,7 +17,7 @@ export function Testimonials() {
return (
<section className="border-y border-ivory/10 bg-char py-24 lg:py-32" aria-labelledby="testimonials-title">
<div className="mx-auto max-w-site px-6 lg:px-10">
<SectionHeading title="نظرات مشتریان" align="center" />
<SectionHeading title={heading.title} align="center" />
<div className="relative mx-auto mt-14 max-w-3xl text-center">
<QuoteIcon className="mx-auto h-8 w-8 text-copper/60" aria-hidden="true" />
frontend/src/components/home/Timeline.tsx
+4 -3
View File
@@ -1,6 +1,6 @@
import React, { useRef } from 'react'
import { motion, useScroll, useTransform, useInView } from 'framer-motion'
import { useSite, type TimelineItem } from '../../api'
import { useSectionHeading, useSite, type TimelineItem } from '../../api'
import { SectionHeading } from '../SectionHeading'
const ease = [0.23, 1, 0.32, 1] as const
@@ -43,6 +43,7 @@ function Item({ item, index }: { item: Milestone; index: number }) {
export function Timeline() {
const { timeline } = useSite()
const heading = useSectionHeading('timeline')
const ref = useRef<HTMLDivElement>(null)
const { scrollYProgress } = useScroll({
target: ref,
@@ -56,8 +57,8 @@ export function Timeline() {
<div className="mb-16">
<SectionHeading
title="مسیر ما"
lead="از یک دفتر چهارنفره تا ۴۷ پروژه. خط زمان پروژه‌های ما را ببینید."
title={heading.title}
lead={heading.lead}
align="center"
/>
</div>
frontend/src/components/home/WhyUs.tsx
+14 -12
View File
@@ -1,26 +1,28 @@
import React from 'react';
import { Reveal } from '../Reveal';
import { SectionHeading } from '../SectionHeading';
import { IMAGES } from '../../data/site';
import { useSite } from '../../api';
import { useSectionHeading, useSite } from '../../api';
export function WhyUs() {
const { why_us } = useSite();
const heading = useSectionHeading('why_us');
return (
<section className="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
title="چرا گروه ساختمانی آرامش"
lead="شش دلیلی که کارفرمایان و سرمایه‌گذاران بار دوم هم به ما برمی‌گردند." />
<Reveal delay={0.12}>
<img
src={IMAGES[3]}
alt="نمای شبانه برج دوقلوی نیاوران"
className="mt-10 h-80 w-full object-cover" />
</Reveal>
title={heading.title}
lead={heading.lead} />
{heading.image && (
<Reveal delay={0.12}>
<img
src={heading.image}
alt={heading.title}
className="mt-10 h-80 w-full object-cover" />
</Reveal>
)}
</div>
<div className="lg:col-span-7">
frontend/src/data/site.ts
+1 -118
View File
@@ -1,32 +1,4 @@
export const BRAND = {
name: 'گروه ساختمانی آرامش',
logo: 'https://i.postimg.cc/XYNrsHsM/Chat-GPT-Image-Aug-6-2026-04-34-46-PM.png',
hero: 'https://i.postimg.cc/J0bKgQVg/Gemini-Generated-Image-mdh969mdh969mdh9.png',
contactBg: 'https://i.postimg.cc/BbccNQHr/Gemini-Generated-Image-dafc2hdafc2hdafc.png',
phone: '۰۲۱ ۸۸ ۷۴ ۲۲ ۱۰',
phoneHref: 'tel:+982188742210',
email: 'info@arameshbuildinggroup.com',
address: 'تهران، خیابان ولیعصر، برج آرامش، طبقه هجدهم'
};
export const IMAGES = [
'https://i.postimg.cc/wTQ0QFkG/Gemini-Generated-Image-1tjszd1tjszd1tjs.png',
'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'
];
export const NAV = [
{ label: 'صفحه اصلی', to: '/' },
{ label: 'درباره ما', to: '/about' },
{ label: 'خدمات', to: '/services' },
{ label: 'پروژه‌ها', to: '/projects' },
{ label: 'سرمایه‌گذاری', to: '/investment' },
{ label: 'وبلاگ', to: '/blog' },
{ label: 'سوالات متداول', to: '/faq' },
{ label: 'تماس با ما', to: '/contact' }
];
// انواع مشترک داده‌ها — همه محتوای متنی سایت از بک‌اند (GET /api/site) بارگذاری می‌شود.
export type Service = {
title: string;
@@ -34,24 +6,6 @@ export type Service = {
icon: 'draft' | 'tower' | 'mall' | 'villa' | 'renew' | 'manage' | 'invest' | 'landscape';
};
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' }
];
export const STATS = [
{ value: 21, suffix: '+', label: 'سال تجربه ساخت' },
{ value: 47, suffix: '', label: 'پروژه تحویل‌شده' },
{ value: 860, suffix: 'هزار', label: 'مترمربع زیربنا' },
{ value: 1200, suffix: '+', label: 'خانواده ساکن' }
];
export type ProjectStatus = 'done' | 'progress';
export type Project = {
@@ -70,77 +24,6 @@ export type Project = {
body: string[];
};
export const STATUS_LABEL: Record<ProjectStatus, string> = {
done: 'انجام شده',
progress: 'در حال انجام'
};
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: ['برنامه‌ریزی فضایی این مجموعه بر اساس دفاتر انعطاف‌پذیر انجام شد؛ هر تراز می‌تواند به دو، سه یا شش دفتر مستقل تقسیم شود.', 'اجرای تأسیسات مکانیکی به‌صورت هم‌زمان با سفت‌کاری پیش می‌رود تا زمان کل پروژه کوتاه‌تر شود.'] }
];
export const BEFORE_AFTER = {
title: 'از کانسپت تا خلق واقعیت',
lead: 'دستگیره را بکشید و ببینید نمای ساختمانی چگونه از حالت اولیه به فرم مدرن تبدیل می‌شود.',
before: 'https://cdn.housedesign.ai/se/housedesign/assets/housedesign-home/compare/1_before.webp',
after: 'https://cdn.housedesign.ai/se/housedesign/assets/housedesign-home/compare/1_after.webp',
beforeLabel: 'کانسپت اولیه',
afterLabel: 'پروژه تکمیل‌شده',
};
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] }
];
export const WHY = [
{ title: 'کیفیت بدون مصالحه', desc: 'انتخاب مصالح و مجریان بر اساس ماندگاری چنددهه‌ای، نه سریع‌ترین تحویل.' },
{ title: 'شفافیت مالی کامل', desc: 'گزارش ماهانه هزینه‌ها و پیشرفت فیزیکی برای همه شرکای پروژه.' },
{ title: 'تحویل به‌موقع', desc: '۹۴٪ پروژه‌های ما در بازه زمانی قراردادی یا زودتر تحویل داده شده‌اند.' },
{ title: 'طراحی اختصاصی', desc: 'هیچ نقشه‌ای دو بار اجرا نمی‌شود؛ هر پروژه هویت معماری خودش را دارد.' },
{ title: 'خدمات پس از تحویل', desc: 'پنج سال پشتیبانی فنی و نگهداری تأسیسات پس از تحویل کلید.' },
{ title: 'پایداری و انرژی', desc: 'طراحی پوسته و تأسیسات با هدف کاهش مصرف انرژی تا ۳۵ درصد.' }
];
export const TESTIMONIALS = [
{ name: 'مهندس سارا کیانی', role: 'سرمایه‌گذار پروژه پارسه', quote: 'گزارش‌های ماهانه گروه ساختمانی آرامش آن‌قدر دقیق بود که هیچ‌وقت نیاز نشد نگران سرمایه‌ام باشم. پروژه دو ماه زودتر از موعد به بهره‌برداری رسید.' },
{ name: 'دکتر امیرحسین راد', role: 'ساکن برج الهیه', quote: 'کیفیت اجرا در جزئیاتی دیده می‌شود که معمولاً کسی به آن‌ها فکر نمی‌کند؛ از عایق صوتی پنجره‌ها تا نور غیرمستقیم راهروها.' },
{ name: 'مریم دلاور', role: 'مدیر مجموعه ویلاهای دریاکنار', quote: 'همکاری با تیم طراحی، تجربه‌ای واقعاً حرفه‌ای بود. ایده‌های ما را شنیدند و به زبان معماری ترجمه کردند.' }
];
export const TEAM = [
{ 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[];
};
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: ['نخست وضعیت سازه ارزیابی می‌شود؛ اگر مقاوم‌سازی هزینه‌ای بیش از ۴۰ درصد ساخت نو دارد، نوسازی منطقی‌تر است.', 'دومین معیار، ضوابط شهری روز است. گاهی تخریب، سطح زیربنای مجاز کمتری به شما می‌دهد و این تصمیم را کاملاً تغییر می‌دهد.', 'در بازسازی، بیشترین ارزش افزوده از سه جا می‌آید: نما، ورودی و بازآرایی پلان داخلی.'] }
];
export const FAQS = [
{ q: 'حداقل سرمایه برای مشارکت در پروژه‌های گروه ساختمانی آرامش چقدر است؟', a: 'ساختار مشارکت هر پروژه متفاوت است، اما معمولاً واحدهای سرمایه‌گذاری از سطح مشخصی آغاز می‌شوند و جزئیات دقیق در جلسه ارزیابی اولیه ارائه می‌شود.' },
{ q: 'مدت زمان معمول ساخت یک برج مسکونی چقدر است؟', a: 'بسته به تعداد طبقات و شرایط زمین، میانگین اجرای یک برج مسکونی بین ۲۸ تا ۴۲ ماه از زمان صدور پروانه تا تحویل کلید است.' },
{ q: 'آیا امکان تغییر نقشه داخلی واحد وجود دارد؟', a: 'بله. تا پیش از پایان مرحله سفت‌کاری، امکان شخصی‌سازی پلان داخلی با هماهنگی تیم طراحی و تأیید سازه فراهم است.' },
{ q: 'خدمات پس از تحویل شامل چه مواردی می‌شود؟', a: 'پنج سال پشتیبانی فنی تأسیسات مکانیکی و برقی، بازدید دوره‌ای سالانه و تضمین اجرای نما و عایق‌کاری.' },
{ q: 'پروژه‌ها در چه شهرهایی اجرا می‌شوند؟', a: 'در حال حاضر تهران، اصفهان و سواحل شمالی کشور مناطق اصلی فعالیت ما هستند و پروژه‌ای نیز در جزیره کیش در دست ساخت است.' }
];
frontend/src/pages/About.tsx
+6 -16
View File
@@ -6,25 +6,15 @@ 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 { usePageHero } from '../api'
export function About() {
const hero = usePageHero('about')
return (
<>
<PageHero
title="درباره ما"
lead="گروه ساختمانی آرامش مجموعه‌ای از معماران، مهندسان سازه و مدیران پروژه است که از سال ۱۳۸۳ در حوزه ساخت‌وساز لوکس فعالیت می‌کند."
image={IMAGES[3]}
/>
<Story showLink={false} showLabel={false} alignTop={true}>
<div className="mt-12 border-r-2 border-copper bg-char/40 p-6">
<p className="text-sm font-light leading-8 text-ivory/80">
«ساختمان برای ما فقط آجر و بتن نیست؛ بلکه تعهدی است به کیفیت زندگی ساکنان. ما فضاهایی می‌سازیم که در گذر زمان ارزش و هویت خود را حفظ کنند.»
</p>
<p className="mt-5 text-sm font-bold text-copper">کامران آرامش — مدیرعامل شرکت ساختمانی آرامش</p>
</div>
</Story>
<PageHero title={hero.title} lead={hero.lead} image={hero.image} />
<Story showLink={false} showLabel={false} showQuote={true} alignTop={true} />
<Stats />
<Timeline />
@@ -33,4 +23,4 @@ export function About() {
<ContactSection />
</>
)
}
}
frontend/src/pages/Blog.tsx
+3 -7
View File
@@ -5,20 +5,16 @@ import { PageHero } from '../components/PageHero'
import { Reveal } from '../components/Reveal'
import { ArticleCard } from '../components/ArticleCard'
import { Newsletter } from '../components/home/Newsletter'
import { IMAGES } from '../data/site'
import { useSite } from '../api'
import { usePageHero, useSite } from '../api'
export function Blog() {
const { articles } = useSite()
const hero = usePageHero('blog')
const [featured, ...rest] = articles
return (
<>
<PageHero
title="وبلاگ"
lead="یادداشت‌های تیم معماری، اجرا و سرمایه‌گذاری گروه ساختمانی آرامش درباره آنچه در کارگاه و بازار می‌گذرد."
image={IMAGES[2]}
/>
<PageHero title={hero.title} lead={hero.lead} image={hero.image} />
<section className="bg-ink py-24 lg:py-32" aria-label="مقالات">
<div className="mx-auto max-w-site px-6 lg:px-10">
frontend/src/pages/ContactPage.tsx
+8 -16
View File
@@ -2,28 +2,20 @@ import React from 'react'
import { PageHero } from '../components/PageHero'
import { ContactSection } from '../components/ContactSection'
import { Reveal } from '../components/Reveal'
import { IMAGES } from '../data/site'
const OFFICES = [
{ city: 'تهران', address: 'خیابان ولیعصر، برج آرامش، طبقه هجدهم', hours: 'شنبه تا چهارشنبه، ۹ تا ۱۸' },
{ city: 'اصفهان', address: 'خیابان چهارباغ بالا، مجتمع پارسه، طبقه ششم', hours: 'شنبه تا چهارشنبه، ۹ تا ۱۷' },
{ city: 'نوشهر', address: 'بلوار دریا، دفتر پروژه دریاکنار', hours: 'شنبه تا پنجشنبه، ۱۰ تا ۱۶' },
]
import { usePageHero, useSite } from '../api'
export function ContactPage() {
const { offices } = useSite()
const hero = usePageHero('contact')
return (
<>
<PageHero
title="تماس با ما"
lead="برای مشاوره ساخت، سرمایه‌گذاری یا بازدید از پروژه‌ها، تیم ما در سه شهر آماده پاسخ‌گویی است."
image={IMAGES[1]}
/>
<PageHero title={hero.title} lead={hero.lead} image={hero.image} />
<section className="bg-ink py-24" aria-label="دفاتر ما">
<div className="mx-auto grid max-w-site gap-6 px-6 md:grid-cols-3 lg:px-10">
{OFFICES.map((office, i) => (
<Reveal key={office.city} delay={0.06 * i} className="h-full">
{/* اعمال فرمول برای نرم شدن بالا آمدن کارت، بدون هیچ تغییری روی متن‌ها */}
{offices.map((office, i) => (
<Reveal key={office.id} delay={0.06 * i} className="h-full">
<article className="flex h-full flex-col border border-ivory/10 bg-char px-8 py-12 text-center transition-all duration-300 ease-out hover:-translate-y-2 hover:border-copper/40 hover:shadow-lift transform-gpu will-change-transform">
<h2 className="text-2xl font-bold text-copper">{office.city}</h2>
<p className="mt-6 text-sm font-light leading-9 text-ivory/70">{office.address}</p>
@@ -41,4 +33,4 @@ export function ContactPage() {
<ContactSection />
</>
)
}
}
frontend/src/pages/FaqPage.tsx
+5 -8
View File
@@ -2,19 +2,16 @@ 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 { usePageHero } from '../api'
export function FaqPage() {
const hero = usePageHero('faq')
return (
<>
<PageHero
title="سوالات متداول"
lead="پیش از تماس، شاید پاسخ پرسش شما همین‌جا باشد. اگر نبود، خوشحال می‌شویم مستقیم صحبت کنیم."
image={IMAGES[1]}
/>
<PageHero title={hero.title} lead={hero.lead} image={hero.image} />
<Faq hideHeading={true} />
<ContactSection />
</>
)
frontend/src/pages/Investment.tsx
+13 -34
View File
@@ -4,53 +4,32 @@ import { Reveal } from '../components/Reveal'
import { SectionHeading } from '../components/SectionHeading'
import { Stats } from '../components/home/Stats'
import { ContactSection } from '../components/ContactSection'
import { IMAGES } from '../data/site'
const MODELS = [
{
title: 'مشارکت در ساخت',
desc: 'مالک زمین و گروه ساختمانی آرامش در سود پروژه شریک می‌شوند؛ اجرا، مجوزها و فروش بر عهده ماست.',
points: ['ارزیابی رایگان زمین', 'قرارداد شفاف با ضمانت اجرا', 'گزارش ماهانه پیشرفت'],
},
{
title: 'صندوق پروژه‌محور',
desc: 'سرمایه‌گذاری روی یک پروژه مشخص با واحدهای قابل خرید و بازدهی محاسبه‌شده در پایان دوره.',
points: ['حداقل دوره ۲۴ ماه', 'گزارش ارزش‌گذاری فصلی', 'امکان انتقال واحد سرمایه'],
},
{
title: 'پیش‌خرید واحد',
desc: 'خرید واحد مسکونی یا تجاری در مراحل ابتدایی ساخت با قیمت پیش از تکمیل و پرداخت مرحله‌ای.',
points: ['پرداخت مرحله‌ای متناسب با پیشرفت', 'امکان شخصی‌سازی پلان', 'تضمین زمان تحویل'],
},
]
import { usePageHero, useSectionHeading, useSite } from '../api'
export function Investment() {
const { investment_models } = useSite()
const hero = usePageHero('investment')
const heading = useSectionHeading('investment_models')
return (
<>
<PageHero
title="سرمایه‌گذاری"
lead="سه مسیر روشن برای ورود به بازار ساخت‌وساز لوکس، با ساختار مالی شفاف و گزارش‌دهی منظم."
image={IMAGES[4]}
/>
<PageHero title={hero.title} lead={hero.lead} image={hero.image} />
<section className="bg-ink py-24 lg:py-32" aria-labelledby="models-title">
<div className="mx-auto max-w-site px-6 lg:px-10">
<SectionHeading
title="مدل‌های همکاری"
lead="بسته به میزان سرمایه، افق زمانی و سطح ریسکی که می‌پذیرید، یکی از این سه مسیر مناسب شماست."
/>
<SectionHeading title={heading.title} lead={heading.lead} />
<div className="mt-14 grid gap-6 lg:grid-cols-3">
{MODELS.map((model, i) => (
<Reveal key={model.title} delay={0.06 * i} className="h-full">
{investment_models.map((model, i) => (
<Reveal key={model.id} delay={0.06 * i} className="h-full">
<article className="group flex h-full flex-col border border-ivory/10 bg-char p-10 transition-all duration-300 ease-out hover:-translate-y-2 hover:border-copper/40 hover:shadow-lift transform-gpu will-change-transform">
<p className="text-sm font-bold text-copper/80">۰{(i + 1).toLocaleString('fa-IR')}</p>
<h3 className="mt-6 text-2xl font-bold text-ivory transition-colors duration-300 ease-out group-hover:text-copper">
{model.title}
</h3>
<p className="mt-5 text-sm font-light leading-9 text-ivory/65">{model.desc}</p>
<div className="mt-auto pt-10">
<ul className="space-y-4 border-t border-ivory/10 pt-8">
{model.points.map((point) => (
@@ -72,4 +51,4 @@ export function Investment() {
<ContactSection />
</>
)
}
}
frontend/src/pages/ProjectDetail.tsx
+3 -3
View File
@@ -6,13 +6,13 @@ import { ButtonLink } from '../components/Button'
import { ProjectCard } from '../components/ProjectCard'
import { ContactSection } from '../components/ContactSection'
import { Lightbox } from '../components/Lightbox'
import { STATUS_LABEL } from '../data/site'
import { useSite } from '../api'
import { useSite, useStatusLabel } from '../api'
export function ProjectDetail() {
const { slug } = useParams<{ slug: string }>()
const { projects } = useSite()
const project = projects.find((p) => p.slug === slug)
const statusLabel = useStatusLabel(project?.status ?? '')
const [lightbox, setLightbox] = useState<number | null>(null)
if (!project) {
@@ -74,7 +74,7 @@ export function ProjectDetail() {
<Reveal className="order-1">
<span className="flex items-center gap-3 text-sm font-light text-copper">
<span aria-hidden="true" className="h-px w-8 bg-copper" />
{STATUS_LABEL[project.status]}
{statusLabel}
</span>
<h2 className="mt-4 text-3xl font-bold text-ivory">درباره پروژه</h2>
frontend/src/pages/Projects.tsx
+9 -11
View File
@@ -4,25 +4,23 @@ import { Reveal } from '../components/Reveal';
import { ProjectCard } from '../components/ProjectCard';
import { Gallery } from '../components/home/Gallery';
import { ContactSection } from '../components/ContactSection';
import { IMAGES, type ProjectStatus } from '../data/site';
import { useSite } from '../api';
const FILTERS: {key: ProjectStatus;label: string;}[] = [
{ key: 'done', label: 'انجام شده' },
{ key: 'progress', label: 'در حال انجام' }];
import type { ProjectStatus } from '../data/site';
import { usePageHero, useSite, useStatusLabel } from '../api';
export function Projects() {
const { projects } = useSite();
const hero = usePageHero('projects');
const doneLabel = useStatusLabel('done');
const progressLabel = useStatusLabel('progress');
const FILTERS: {key: ProjectStatus;label: string;}[] = [
{ key: 'done', label: doneLabel },
{ key: 'progress', label: progressLabel }];
const [status, setStatus] = useState<ProjectStatus>('done');
const list = projects.filter((p) => p.status === status);
return (
<>
<PageHero
title="پروژه‌ها"
lead="مجموعه‌ای از برج‌های مسکونی، مراکز تجاری و ویلاهای اختصاصی؛ از پروژه‌های تحویل‌شده تا کارگاه‌های فعال امروز."
image={IMAGES[0]} />
<PageHero title={hero.title} lead={hero.lead} image={hero.image} />
<section className="bg-ink py-24 lg:py-32" aria-label="فهرست پروژه‌ها">
frontend/src/pages/ServicesPage.tsx
+11 -18
View File
@@ -5,32 +5,25 @@ import { Faq } from '../components/home/Faq'
import { ContactSection } from '../components/ContactSection'
import { Reveal } from '../components/Reveal'
import { SectionHeading } from '../components/SectionHeading'
import { IMAGES } from '../data/site'
const PROCESS = [
{ step: '۰۱', title: 'مطالعه و امکان‌سنجی', desc: 'بررسی زمین، ضوابط شهری و تحلیل بازدهی اقتصادی پروژه.' },
{ step: '۰۲', title: 'طراحی و فاز اجرایی', desc: 'کانسپت معماری، طراحی سازه و تأسیسات و تهیه نقشه‌های اجرایی.' },
{ step: '۰۳', title: 'اجرا و کنترل کیفیت', desc: 'ساخت با نظارت مستمر، گزارش ماهانه پیشرفت و کنترل هزینه.' },
{ step: '۰۴', title: 'تحویل و پشتیبانی', desc: 'تحویل کلید، آموزش بهره‌برداری و پنج سال پشتیبانی فنی.' },
]
import { usePageHero, useSectionHeading, useSite } from '../api'
export function ServicesPage() {
const { process_steps } = useSite()
const hero = usePageHero('services')
const heading = useSectionHeading('process')
return (
<>
<PageHero
title="خدمات"
lead="هشت حوزه تخصصی که چرخه کامل یک پروژه ساختمانی را از ایده تا بهره‌برداری پوشش می‌دهند."
image={IMAGES[1]}
/>
<PageHero title={hero.title} lead={hero.lead} image={hero.image} />
<Services />
<section className="bg-char py-24 lg:py-32" aria-labelledby="process-title">
<div className="mx-auto max-w-site px-6 lg:px-10">
<SectionHeading title="فرآیند کار ما" lead="چهار مرحله شفاف، از نخستین جلسه تا تحویل کلید." align="center" />
<SectionHeading title={heading.title} lead={heading.lead} align="center" />
<div className="mt-14 grid gap-px bg-ivory/10 md:grid-cols-2 lg:grid-cols-4">
{PROCESS.map((item, i) => (
<Reveal key={item.step} delay={0.06 * i} className="h-full">
{process_steps.map((item, i) => (
<Reveal key={item.id} delay={0.06 * i} className="h-full">
<div className="flex h-full flex-col justify-center bg-char px-6 py-14 text-center">
<p className="text-4xl font-bold text-copper">{item.step}</p>
<h3 className="mt-6 text-xl font-bold text-ivory">{item.title}</h3>
@@ -46,4 +39,4 @@ export function ServicesPage() {
<ContactSection />
</>
)
}
}