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

feat(design): بازگرداندن ریتم تناوب پس‌زمینهٔ بخش‌ها — هر صفحه با بخش سیاه شروع و سیاه/خاکستری یکی‌درمیان ادامه می‌یابد (پراپ tone برای بخش‌های مشترک چندصفحه‌ای)

Browse Source
This commit is contained in:
aramesh-site deploy
2026-10-09 15:26:56 +00:00
parent 9bf2a30f8d
commit e2f6853c2c
15 changed files with 32 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/home/BeforeAfter.tsx
+1 -1
View File
@@ -48,7 +48,7 @@ export function BeforeAfter() {
}
return (
<section className="bg-char py-24 lg:py-32" aria-labelledby="ba-title">
<section className="bg-ink py-24 lg:py-32" aria-labelledby="ba-title">
<div className="mx-auto max-w-site px-6 lg:px-10">
<SectionHeading
frontend/src/components/home/Faq.tsx
+2 -2
View File
@@ -11,13 +11,13 @@ type FaqProps = {
hideHeading?: boolean;
}
export function Faq({ hideHeading = false }: FaqProps) {
export function Faq({ hideHeading = false, tone = 'gray' }: FaqProps & { tone?: 'black' | 'gray' }) {
const { faqs } = useSite()
const { t } = useLang()
const [open, setOpen] = useState<number | null>(0)
return (
<section className="bg-ink py-24 lg:py-32" aria-labelledby="faq-title">
<section className={`${tone === 'black' ? 'bg-char' : 'bg-ink'} py-24 lg:py-32`} aria-labelledby="faq-title">
<div className={hideHeading ? "mx-auto max-w-4xl px-6 lg:px-10" : "mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-12 lg:px-10"}>
frontend/src/components/home/FeaturedProjects.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ export function FeaturedProjects() {
.sort((a, b) => FEATURED_TITLES.indexOf(a.title) - FEATURED_TITLES.indexOf(b.title))
return (
<section className="bg-ink py-24 lg:py-32" aria-labelledby="projects-title">
<section className="bg-char py-24 lg:py-32" aria-labelledby="projects-title">
<div className="mx-auto max-w-site px-6 lg:px-10">
<SectionHeading title={heading.title} lead={heading.lead} headingKey="featured_projects" />
frontend/src/components/home/Services.tsx
+2 -2
View File
@@ -6,7 +6,7 @@ import { useFieldSaver } from '../../admin/AdminContext'
import { InlineEdit } from '../admin/InlineEdit'
import { AddItemButton, EditableItem } from '../../admin/Editable'
export function Services() {
export function Services({ tone = 'black' }: { tone?: 'black' | 'gray' } = {}) {
const { services } = useSite()
const heading = useSectionHeading('services')
const save = useFieldSaver()
@@ -18,7 +18,7 @@ export function Services() {
})
return (
<section className="bg-ink py-24 lg:py-32" aria-labelledby="services-title">
<section className={`${tone === 'black' ? 'bg-char' : 'bg-ink'} py-24 lg:py-32`} aria-labelledby="services-title">
<div className="mx-auto max-w-site px-6 lg:px-10">
<Reveal className="max-w-2xl text-start">
frontend/src/components/home/Stats.tsx
+2 -2
View File
@@ -65,13 +65,13 @@ function Counter({ value }: { value: string | number }) {
return <span ref={ref}>{renderValue}</span>;
}
export function Stats() {
export function Stats({ tone = 'black' }: { tone?: 'black' | 'gray' } = {}) {
const { stats } = useSite();
const { t } = useLang();
const save = useFieldSaver();
return (
<section className="bg-char py-16" aria-label={t('statsAria')}>
<section className={`${tone === 'black' ? 'bg-char' : 'bg-ink'} py-16`} aria-label={t('statsAria')}>
<div className="mx-auto grid max-w-site grid-cols-2 gap-y-12 px-6 lg:grid-cols-4 lg:px-10">
{stats.map((stat) =>
<EditableItem key={stat.id} resource="stats" item={stat}>
frontend/src/components/home/Story.tsx
+4 -2
View File
@@ -14,9 +14,11 @@ type StoryProps = {
showQuote?: boolean;
alignTop?: boolean;
children?: React.ReactNode;
/** پس‌زمینه: black = char (تیره) و gray = ink (روشن‌تر) — ریتم تناوب بخش‌ها */
tone?: 'black' | 'gray';
}
export function Story({ showLink = true, showLabel = true, showQuote = false, alignTop = false, children }: StoryProps) {
export function Story({ showLink = true, showLabel = true, showQuote = false, alignTop = false, tone = 'gray', children }: StoryProps) {
const { story } = useSite()
const { href } = useLang()
const save = useFieldSaver()
@@ -33,7 +35,7 @@ export function Story({ showLink = true, showLabel = true, showQuote = false, al
}
return (
<section id="story" className="bg-ink py-24 lg:py-32" aria-labelledby="story-title">
<section id="story" className={`${tone === 'black' ? 'bg-char' : 'bg-ink'} py-24 lg:py-32`} aria-labelledby="story-title">
<div className={`mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-2 lg:px-10 ${alignTop ? 'items-start' : 'items-center'}`}>
<div>
{showLabel && (
frontend/src/components/home/Team.tsx
+2 -2
View File
@@ -5,11 +5,11 @@ import { useSite } from '../../api'
import { useLang } from '../../i18n/lang'
import { AddItemButton, EditableItem } from '../../admin/Editable'
export function Team() {
export function Team({ tone = 'gray' }: { tone?: 'black' | 'gray' } = {}) {
const { team } = useSite()
const { t } = useLang()
return (
<section className="bg-ink py-24 lg:py-32" aria-labelledby="team-title" >
<section className={`${tone === 'black' ? 'bg-char' : 'bg-ink'} py-24 lg:py-32`} aria-labelledby="team-title" >
<div className="mx-auto max-w-site px-6 lg:px-10 ">
<SectionHeading
title={t('fallbackTeamTitle')}
frontend/src/components/home/Timeline.tsx
+2 -2
View File
@@ -52,7 +52,7 @@ function Item({ item, index, featured = false, onLi }: { item: Milestone; index:
)
}
export function Timeline() {
export function Timeline({ tone = 'gray' }: { tone?: 'black' | 'gray' } = {}) {
const { timeline } = useSite()
const { t } = useLang()
const ref = useRef<HTMLOListElement>(null)
@@ -85,7 +85,7 @@ export function Timeline() {
}, [])
return (
<section className="bg-char py-24 md:py-32" aria-labelledby="timeline-title">
<section className={`${tone === 'black' ? 'bg-char' : 'bg-ink'} py-24 md:py-32`} aria-labelledby="timeline-title">
<div className="mx-auto w-full max-w-site px-6 lg:px-10">
<div className="mb-16">
frontend/src/components/home/WhyUs.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ import { InlineEdit } from '../admin/InlineEdit';
import { useFieldSaver } from '../../admin/AdminContext';
import { useLang, formatNumber } from '../../i18n/lang';
export function WhyUs() {
export function WhyUs({ tone = 'black' }: { tone?: 'black' | 'gray' } = {}) {
const { why_us } = useSite();
const { lang } = useLang();
const heading = useSectionHeading('why_us');
@@ -20,7 +20,7 @@ export function WhyUs() {
});
return (
<section className="bg-ink py-24 lg:py-32" aria-labelledby="why-title">
<section className={`${tone === 'black' ? 'bg-char' : 'bg-ink'} py-24 lg:py-32`} aria-labelledby="why-title">
<div className="mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-12 lg:px-10">
<div className="lg:col-span-5">
<SectionHeading