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

feat(mobile): complete responsive design and layout optimizations across landing page

Browse Source
This commit is contained in:
Behrad
2026-10-04 23:48:19 +03:30
parent 846682ac4a
commit 575e4868be
13 changed files with 686 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/home/Articles.tsx
+90 -14
View File
@@ -1,5 +1,4 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { Reveal } from '../Reveal';
import { PremiumButton } from '../PremiumButton';
import { ArticleCard } from '../ArticleCard';
@@ -8,6 +7,7 @@ import { useLang } from '../../i18n/lang';
import { useFieldSaver } from '../../admin/AdminContext';
import { InlineEdit } from '../admin/InlineEdit';
import { AddItemButton, EditableItem } from '../../admin/Editable';
import { formatJalali } from '../../utils/date';
export function Articles() {
const { articles } = useSite();
@@ -17,6 +17,9 @@ export function Articles() {
// پیش‌نویس‌ها فقط در صفحه وبلاگ (برای ادمین) دیده می‌شوند، نه در خانه
const published = articles.filter((a) => a.status !== 'draft');
const topArticles = published.slice(0, 3);
const spotlight = topArticles[0];
const compactList = topArticles.slice(1, 3);
const saveHeading = (field: 'label' | 'title' | 'lead' | 'cta_label', value: string) =>
save('section-headings', heading.id, { [field]: value }, (d) => {
@@ -25,24 +28,97 @@ export function 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">
<section className="w-full max-w-full overflow-x-clip bg-char py-16 md:py-24 lg:py-32" aria-labelledby="articles-title">
<div className="mx-auto max-w-site px-4 md:px-6 lg:px-10">
<Reveal className="max-w-2xl ltr:text-left rtl:text-right">
<p className="text-sm font-light text-copper">
<InlineEdit value={heading.label} onSave={(v) => saveHeading('label', v)} />
</p>
<h2 id="articles-title" className="mt-5 text-section font-bold text-ivory">
<h2 id="articles-title" className="mt-3 md:mt-5 text-section font-bold text-ivory">
<InlineEdit value={heading.title} onSave={(v) => saveHeading('title', v)} />
</h2>
<p className="mt-5 text-base font-light leading-9 text-ivory/60">
<p className="mt-3 md:mt-5 text-sm md:text-base font-light leading-7 md:leading-9 text-ivory/60">
<InlineEdit multiline value={heading.lead} onSave={(v) => saveHeading('lead', v)} />
</p>
<div className="mt-6 h-px w-24 bg-copper/70" />
<div className="mt-4 md:mt-6 h-px w-24 bg-copper/70" />
</Reveal>
<div className="mt-14 grid gap-6 lg:grid-cols-3">
{published.slice(0, 3).map((article, i) =>
<Reveal key={article.id} delay={0.06 * i} className="h-full">
{/* Mobile View: Magazine Editorial layout (1 Featured Spotlight + Compact Rows) */}
<div className="block md:hidden mt-8">
{/* First Article (Spotlight) */}
{spotlight && (
<EditableItem resource="articles" item={spotlight} editHref={`/admin/write/${spotlight.id}`}>
<Link
className="block rounded-xl border border-ivory/10 bg-char/40 overflow-hidden mb-3 group"
to={href(`/blog/${spotlight.slug}`)}
>
<img
src={spotlight.image}
alt={spotlight.title}
className="w-full aspect-[16/9] object-cover transition-transform duration-500 group-hover:scale-105"
/>
<div className="p-3.5">
<div className="flex items-center gap-2 text-[11px] text-copper font-medium mb-1">
<span>{spotlight.category}</span>
<span>•</span>
<span>{formatJalali(spotlight.date)}</span>
</div>
<h4 className="text-sm font-bold text-ivory leading-snug line-clamp-2 mb-1 group-hover:text-copper transition-colors">
{spotlight.title}
</h4>
<p className="text-xs text-ivory/60 line-clamp-2 leading-relaxed">
{spotlight.excerpt}
</p>
</div>
</Link>
</EditableItem>
)}
{/* Remaining Articles (Compact List Rows) */}
{compactList.length > 0 && (
<div className="divide-y divide-ivory/15 border-t border-b border-ivory/15 mb-4">
{compactList.map((article) => (
<EditableItem key={article.id} resource="articles" item={article} editHref={`/admin/write/${article.id}`}>
<Link
className="py-2.5 flex items-center gap-3 group"
to={href(`/blog/${article.slug}`)}
>
<img
src={article.image}
alt={article.title}
className="w-14 h-14 rounded-lg object-cover shrink-0 border border-ivory/10"
/>
<div className="flex-1 min-w-0">
<span className="text-[10px] text-copper block mb-0.5">{formatJalali(article.date)}</span>
<h5 className="text-xs font-semibold text-ivory line-clamp-2 leading-snug group-hover:text-copper transition-colors">
{article.title}
</h5>
</div>
</Link>
</EditableItem>
))}
</div>
)}
{/* Bottom Button ("همه مقالات") */}
{heading.cta_label && heading.cta_href && (
<Link
to={href(heading.cta_href)}
className="w-full py-2.5 rounded-xl border border-ivory/20 bg-char/60 hover:bg-copper/10 hover:border-copper/40 text-xs font-semibold text-ivory text-center block transition-all active:scale-[0.98]"
>
<InlineEdit value={heading.cta_label} onSave={(v) => saveHeading('cta_label', v)} />
</Link>
)}
</div>
{/* Desktop View: 3-Column Grid */}
<div className="hidden md:grid mt-14 grid-cols-3 gap-6">
{topArticles.map((article, i) =>
<Reveal
key={article.id}
delay={0.06 * i}
className="h-full"
>
<EditableItem resource="articles" item={article} className="h-full" editHref={`/admin/write/${article.id}`}>
<ArticleCard article={article} />
</EditableItem>
@@ -52,7 +128,7 @@ export function Articles() {
{heading.cta_label && heading.cta_href && (
<Reveal delay={0.1}>
<div className="mt-12 flex justify-center">
<div className="mt-12 hidden md:flex justify-center">
<PremiumButton to={href(heading.cta_href)} className="font-light">
<InlineEdit value={heading.cta_label} onSave={(v) => saveHeading('cta_label', v)} />
</PremiumButton>
@@ -63,6 +139,6 @@ export function Articles() {
<AddItemButton resource="articles" />
</div>
</div>
</section>);
}
</section>
);
}
frontend/src/components/home/FeaturedProjects.tsx
+9 -10
View File
@@ -1,5 +1,4 @@
import React, { useState } from 'react'
import { AnimatePresence, motion } from 'framer-motion'
import { Reveal } from '../Reveal'
import { PremiumButton } from '../PremiumButton'
@@ -39,18 +38,18 @@ export function FeaturedProjects() {
const BASE_IMG_URL = "/seed-media/2026/09/";
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">
<section className="w-full max-w-full overflow-x-clip bg-ink py-16 md:py-24 lg:py-32" aria-labelledby="projects-title">
<div className="mx-auto max-w-site px-4 md:px-6 lg:px-10">
<SectionHeading title={heading.title} lead={heading.lead} headingKey="featured_projects" />
{/* دکمه‌های فیلتر مینیمال و شیشه‌ای (بدون کادر) */}
<div className="mt-10 flex items-center justify-center gap-4 md:gap-6" role="tablist" aria-label={t('projectFilterAria')}>
<div className="mt-8 flex flex-wrap items-center justify-center gap-3 md:mt-10 md:gap-6" role="tablist" aria-label={t('projectFilterAria')}>
{FILTERS.map((filter, index) => {
const isSelected = status === filter.key
return (
<React.Fragment key={filter.key}>
{index > 0 && (
<span className="h-6 w-[2px] rounded-full bg-ivory/10" aria-hidden="true" />
<span className="hidden h-6 w-[2px] rounded-full bg-ivory/10 sm:inline-block" aria-hidden="true" />
)}
<button
@@ -58,7 +57,7 @@ export function FeaturedProjects() {
role="tab"
aria-selected={isSelected}
onClick={() => setStatus(filter.key)}
className={`group relative rounded-lg px-6 py-2.5 text-sm font-medium transition-all duration-300 ease-lux active:scale-95 cursor-pointer select-none backdrop-blur-md ${
className={`group relative rounded-lg px-4 py-2 text-xs font-medium transition-all duration-300 ease-lux active:scale-95 cursor-pointer select-none backdrop-blur-md md:px-6 md:py-2.5 md:text-sm ${
isSelected
? 'bg-copper/15 text-copper shadow-[0_4px_15px_rgba(197,143,92,0.1)]'
: 'bg-transparent text-ivory/60 hover:bg-white/5 hover:text-ivory'
@@ -76,7 +75,7 @@ export function FeaturedProjects() {
})}
</div>
<div className="mt-10 min-h-[420px]">
<div className="mt-8 min-h-[380px] md:mt-10 md:min-h-[420px]">
<AnimatePresence mode="wait">
<motion.div
key={status}
@@ -84,7 +83,7 @@ export function FeaturedProjects() {
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -15 }}
transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
className="grid gap-6 lg:grid-cols-3"
className="flex gap-4 overflow-x-auto pb-4 snap-x snap-mandatory [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] md:grid md:grid-cols-3 md:gap-6 md:overflow-visible md:pb-0"
>
{list.map((project, i) => {
const dummyImageName = `${(i % 6) + 1}.png`;
@@ -96,7 +95,7 @@ export function FeaturedProjects() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: i * 0.1, ease: [0.23, 1, 0.32, 1] }}
className="h-full"
className="h-full w-[82vw] max-w-[320px] shrink-0 snap-center md:w-auto md:max-w-none md:shrink"
>
<ProjectCard
project={project}
@@ -113,7 +112,7 @@ export function FeaturedProjects() {
{/* دکمه مشاهده همه پروژه‌ها */}
{heading.cta_label && heading.cta_href && (
<Reveal delay={0.1}>
<div className="mt-12 flex justify-center">
<div className="mt-10 flex justify-center md:mt-12">
<PremiumButton to={href(heading.cta_href)}>
<InlineEdit
value={heading.cta_label}
frontend/src/components/home/Services.tsx
+16 -14
View File
@@ -1,4 +1,3 @@
import React from 'react'
import { Reveal } from '../Reveal'
import { ServiceIcon } from '../ServiceIcon'
import { useSectionHeading, useSite } from '../../api'
@@ -18,32 +17,35 @@ export function 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">
<section className="w-full max-w-full overflow-hidden bg-ink py-12 md:py-24 lg:py-32" aria-labelledby="services-title">
<div className="mx-auto max-w-site px-4 md:px-6 lg:px-10">
<Reveal className="max-w-2xl text-start">
<h2 id="services-title" className="text-section font-bold text-ivory">
<InlineEdit value={heading.title} onSave={(v) => saveHeading('title', v)} />
</h2>
<p className="mt-5 text-base font-light leading-9 text-ivory/60">
<p className="mt-3 text-sm font-light leading-7 text-ivory/60 md:mt-5 md:text-base md:leading-9">
<InlineEdit multiline value={heading.lead} onSave={(v) => saveHeading('lead', v)} />
</p>
<div className="mt-6 h-px w-24 bg-copper/70" />
<div className="mt-4 h-px w-24 bg-copper/70 md:mt-6" />
</Reveal>
<div className="mt-14 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
<div className="mt-8 grid grid-cols-2 gap-3 md:mt-14 md:gap-5 md:grid-cols-2 lg:grid-cols-4">
{services.map((service, i) => (
<Reveal key={service.id} delay={0.04 * i} className="h-full">
<EditableItem resource="services" item={service} className="h-full">
<article className="group flex h-full flex-col items-center border border-ivory/10 bg-char p-8 text-center transition-all duration-300 ease-out hover:-translate-y-2 hover:border-copper/40 hover:shadow-lift transform-gpu will-change-transform">
<ServiceIcon
name={service.icon}
className="h-12 w-12 text-copper/85 transition-colors duration-300 ease-out group-hover:text-copper"
/>
<h3 className="mt-6 text-lg font-bold text-ivory transition-colors duration-300 ease-out group-hover:text-copper">
<article className="group flex h-full flex-col items-center rounded-xl border border-ivory/10 bg-char p-3.5 text-center transition-all duration-300 ease-out hover:-translate-y-2 hover:border-copper/40 hover:shadow-lift transform-gpu will-change-transform md:rounded-2xl md:p-8">
<div className="flex h-10 w-10 items-center justify-center md:h-14 md:w-14">
<ServiceIcon
name={service.icon}
className="h-10 w-10 text-copper/85 transition-colors duration-300 ease-out group-hover:text-copper md:h-14 md:w-14"
/>
</div>
<h3 className="mt-3 text-sm font-bold text-ivory transition-colors duration-300 ease-out group-hover:text-copper md:mt-6 md:text-lg">
{service.title}
</h3>
<p className="mt-3 text-sm font-light leading-8 text-ivory/55">{service.desc}</p>
<p className="mt-2 text-xs font-light leading-relaxed text-ivory/55 line-clamp-2 md:mt-3 md:text-sm md:leading-8 md:line-clamp-none">
{service.desc}
</p>
</article>
</EditableItem>
</Reveal>
frontend/src/components/home/Stats.tsx
+7 -7
View File
@@ -1,4 +1,4 @@
import React, { useEffect, useRef, useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import { useSite } from '../../api';
import { useLang, formatNumber } from '../../i18n/lang';
import { useFieldSaver } from '../../admin/AdminContext';
@@ -71,12 +71,12 @@ export function Stats() {
const save = useFieldSaver();
return (
<section className="bg-char 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">
<section className="w-full max-w-full overflow-x-clip bg-char py-8 md:py-16" aria-label={t('statsAria')}>
<div className="mx-auto grid max-w-site grid-cols-2 gap-3.5 p-4 md:grid-cols-4 md:gap-y-12 md:px-10 md:py-0">
{stats.map((stat) =>
<EditableItem key={stat.id} resource="stats" item={stat}>
<div className="text-center">
<p className="text-4xl font-bold text-copper md:text-5xl">
<div className="p-3.5 text-center md:p-0">
<p className="text-2xl font-bold text-copper md:text-5xl">
<Counter value={stat.value} />
<InlineEdit
value={stat.suffix}
@@ -84,10 +84,10 @@ export function Stats() {
const s = d.stats.find((x) => x.id === stat.id);
if (s) s.suffix = v;
})}
className="ltr:ml-1 rtl:mr-1 text-2xl"
className="ltr:ml-1 rtl:mr-1 text-lg md:text-2xl"
/>
</p>
<p className="mt-3 text-sm font-light text-ivory/55">
<p className="mt-2 text-xs font-light text-ivory/55 md:mt-3 md:text-sm">
<InlineEdit
value={stat.label}
onSave={(v) => save('stats', stat.id, { label: v }, (d) => {
frontend/src/components/home/Team.tsx
+8 -10
View File
@@ -1,4 +1,3 @@
import React from 'react'
import { Reveal } from '../Reveal'
import { SectionHeading } from '../SectionHeading'
import { useSite } from '../../api'
@@ -9,8 +8,8 @@ export function Team() {
const { team } = useSite()
const { t } = useLang()
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 ">
<section className="w-full max-w-full overflow-x-clip bg-ink py-16 md:py-24 lg:py-32" aria-labelledby="team-title">
<div className="mx-auto max-w-site px-4 md:px-6 lg:px-10">
<SectionHeading
title={t('fallbackTeamTitle')}
lead={t('fallbackTeamLead')}
@@ -18,18 +17,17 @@ export function Team() {
align="center"
/>
<div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
<div className="mt-8 grid grid-cols-2 gap-3 sm:grid-cols-2 lg:grid-cols-4 md:mt-16 md:gap-8">
{team.map((member, i) => (
<Reveal key={member.id} delay={0.06 * i} className="h-full">
<EditableItem resource="team" item={member} className="h-full">
{/* اضافه شدن rounded-2xl برای گرد شدن گوشه‌ها */}
<article className="group flex h-full flex-col items-center rounded-2xl border border-ivory/10 bg-char p-10 text-center transition-[transform,box-shadow,border-color] duration-500 ease-out hover:-translate-y-3 hover:border-copper/50 hover:shadow-lift">
<div className="flex h-24 w-24 items-center justify-center rounded-full border border-copper/30 text-3xl font-bold text-copper transition-colors duration-500 group-hover:border-copper">
<article className="group flex h-full flex-col items-center rounded-xl border border-ivory/10 bg-char p-3 text-center transition-[transform,box-shadow,border-color] duration-500 ease-out hover:-translate-y-3 hover:border-copper/50 hover:shadow-lift md:rounded-2xl md:p-10">
<div className="flex h-12 w-12 items-center justify-center rounded-full border border-copper/30 text-sm font-bold text-copper transition-colors duration-500 group-hover:border-copper md:h-24 md:w-24 md:text-3xl">
{member.name.trim().charAt(0)}
</div>
<h3 className="mt-8 text-lg font-bold text-ivory">{member.name}</h3>
<p className="mt-2 text-sm font-light text-copper">{member.role}</p>
<p className="mt-6 border-t border-ivory/10 pt-6 text-sm font-light text-ivory/60">
<h3 className="mt-2 text-xs font-bold text-ivory md:mt-8 md:text-lg">{member.name}</h3>
<p className="mt-0.5 text-[11px] font-medium text-copper line-clamp-1 md:mt-2 md:text-sm md:font-light md:line-clamp-none">{member.role}</p>
<p className="mt-2 w-full border-t border-ivory/10 pt-2 text-[10px] font-light leading-relaxed text-ivory/60 line-clamp-2 md:mt-6 md:pt-6 md:text-sm md:line-clamp-none">
{member.bio}
</p>
</article>
frontend/src/components/home/Testimonials.tsx
+46 -28
View File
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import { AnimatePresence, motion, PanInfo } from 'framer-motion';
import { ChevronLeftIcon, ChevronRightIcon, QuoteIcon } from 'lucide-react';
import { SectionHeading } from '../SectionHeading';
import { useSite } from '../../api';
@@ -17,39 +17,57 @@ export function Testimonials() {
setIndex((prev) => (prev + dir + testimonials.length) % testimonials.length);
};
const handleDragEnd = (_: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
if (info.offset.x > 50) {
go(1); // سوایپ به راست
} else if (info.offset.x < -50) {
go(-1); // سوایپ به چپ
}
};
return (
<section className="border-y border-ivory/10 bg-char py-24 lg:py-32" aria-labelledby="testimonials-title">
<section className="border-y border-ivory/10 bg-char py-14 lg:py-28" aria-labelledby="testimonials-title">
<div className="mx-auto max-w-site px-6 lg:px-10">
<SectionHeading headingKey="testimonials" 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" />
<AnimatePresence mode="wait">
<motion.blockquote
key={current.id}
initial={{ opacity: 0, y: 16 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -12 }}
transition={{ duration: 0.28, ease: [0.23, 1, 0.32, 1] }}>
<div className="relative mx-auto mt-8 max-w-3xl text-center select-none">
<QuoteIcon className="mx-auto h-6 w-6 text-copper/60 md:h-8 md:w-8" aria-hidden="true" />
<div className="relative min-h-[170px] overflow-hidden md:min-h-[190px]">
<AnimatePresence mode="wait">
<motion.blockquote
key={current.id}
drag="x"
dragConstraints={{ left: 0, right: 0 }}
dragElastic={0.2}
onDragEnd={handleDragEnd}
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -12 }}
transition={{ duration: 0.28, ease: [0.23, 1, 0.32, 1] }}
className="cursor-grab active:cursor-grabbing"
>
<EditableItem resource="testimonials" item={current}>
<p className="mt-5 text-base font-light leading-8 text-ivory/85 md:mt-8 md:text-xl md:leading-[2.4rem]">
«{current.quote}»
</p>
<footer className="mt-5 md:mt-8">
<p className="text-sm font-bold text-copper md:text-base">{current.name}</p>
<p className="mt-0.5 text-xs font-light text-ivory/45 md:text-sm">{current.role}</p>
</footer>
</EditableItem>
</motion.blockquote>
</AnimatePresence>
</div>
<EditableItem resource="testimonials" item={current}>
<p className="mt-8 text-lg font-light leading-[2.4rem] text-ivory/85 md:text-xl">«{current.quote}»</p>
<footer className="mt-8">
<p className="text-base font-bold text-copper">{current.name}</p>
<p className="mt-1 text-sm font-light text-ivory/45">{current.role}</p>
</footer>
</EditableItem>
</motion.blockquote>
</AnimatePresence>
<div className="mt-12 flex items-center justify-center gap-5">
<div className="mt-6 flex items-center justify-center gap-5 md:mt-10">
<button
type="button"
onClick={() => go(1)}
aria-label={t('prevTestimonial')}
className="group flex h-12 w-12 items-center justify-center rounded-full border border-copper/35 bg-char/80 text-ivory/80 backdrop-blur-md shadow-[0_4px_20px_rgba(0,0,0,0.35)] transition-all duration-300 ease-lux hover:scale-110 hover:border-copper hover:bg-copper hover:text-char hover:shadow-[0_0_25px_rgba(197,143,92,0.45)] active:scale-95"
className="group flex h-10 w-10 items-center justify-center rounded-full border border-copper/35 bg-char/80 text-ivory/80 shadow-[0_4px_20px_rgba(0,0,0,0.35)] backdrop-blur-md transition-all duration-300 ease-lux hover:scale-110 hover:border-copper hover:bg-copper hover:text-char hover:shadow-[0_0_25px_rgba(197,143,92,0.45)] active:scale-95 md:h-12 md:w-12"
>
<ChevronRightIcon className="h-5 w-5 ltr:rotate-180 transition-transform duration-300 ease-lux rtl:group-hover:translate-x-0.5 ltr:group-hover:-translate-x-0.5" />
<ChevronRightIcon className="h-4 w-4 transition-transform duration-300 ease-lux ltr:rotate-180 rtl:group-hover:translate-x-0.5 ltr:group-hover:-translate-x-0.5 md:h-5 md:w-5" />
</button>
<div className="flex items-center gap-2" role="tablist" aria-label={t('selectTestimonialAria')}>
@@ -63,8 +81,8 @@ export function Testimonials() {
onClick={() => setIndex(i)}
className={`h-2 rounded-full transition-all duration-300 ease-lux ${
i === index
? 'w-8 bg-copper shadow-[0_0_12px_rgba(197,143,92,0.6)]'
: 'w-2.5 bg-ivory/20 hover:bg-ivory/40'
? 'w-7 bg-copper shadow-[0_0_12px_rgba(197,143,92,0.6)] md:w-8'
: 'w-2 bg-ivory/20 hover:bg-ivory/40 md:w-2.5'
}`}
/>
))}
@@ -74,9 +92,9 @@ export function Testimonials() {
type="button"
onClick={() => go(-1)}
aria-label={t('nextTestimonial')}
className="group flex h-12 w-12 items-center justify-center rounded-full border border-copper/35 bg-char/80 text-ivory/80 backdrop-blur-md shadow-[0_4px_20px_rgba(0,0,0,0.35)] transition-all duration-300 ease-lux hover:scale-110 hover:border-copper hover:bg-copper hover:text-char hover:shadow-[0_0_25px_rgba(197,143,92,0.45)] active:scale-95"
className="group flex h-10 w-10 items-center justify-center rounded-full border border-copper/35 bg-char/80 text-ivory/80 shadow-[0_4px_20px_rgba(0,0,0,0.35)] backdrop-blur-md transition-all duration-300 ease-lux hover:scale-110 hover:border-copper hover:bg-copper hover:text-char hover:shadow-[0_0_25px_rgba(197,143,92,0.45)] active:scale-95 md:h-12 md:w-12"
>
<ChevronLeftIcon className="h-5 w-5 ltr:rotate-180 transition-transform duration-300 ease-lux rtl:group-hover:-translate-x-0.5 ltr:group-hover:translate-x-0.5" />
<ChevronLeftIcon className="h-4 w-4 transition-transform duration-300 ease-lux ltr:rotate-180 rtl:group-hover:-translate-x-0.5 ltr:group-hover:translate-x-0.5 md:h-5 md:w-5" />
</button>
</div>
</div>
frontend/src/components/home/Timeline.tsx
+54 -18
View File
@@ -1,4 +1,4 @@
import React, { useRef } from 'react'
import { useRef } from 'react'
import { motion, useScroll, useTransform, useInView } from 'framer-motion'
import { useSite, type TimelineItem } from '../../api'
import { useLang } from '../../i18n/lang'
@@ -9,17 +9,17 @@ const ease = [0.23, 1, 0.32, 1] as const
type Milestone = TimelineItem
function Item({ item, index }: { item: Milestone; index: number }) {
function DesktopTimelineItem({ item, index }: { item: Milestone; index: number }) {
const ref = useRef<HTMLLIElement>(null)
const active = useInView(ref, { once: true, amount: 0.6 })
const onRight = index % 2 === 0
return (
<li ref={ref} className="relative md:grid md:grid-cols-2 md:gap-16">
{/* دایره‌ها: مرکز دایره در موبایل و دسکتاپ دقیقاً روی مرکز خط 2px است */}
{/* دایره‌ها: مرکز دایره دقیقاً روی مرکز خط 2px است */}
<span
aria-hidden="true"
className={`absolute right-[-5px] top-8 z-10 h-3 w-3 rounded-full transition-all duration-500 ease-lux md:right-1/2 md:translate-x-1/2 ${
className={`absolute right-1/2 top-8 z-10 h-3 w-3 translate-x-1/2 rounded-full transition-all duration-500 ease-lux ${
active
? 'bg-copper shadow-[0_0_15px_rgba(197,143,92,0.6),0_0_0_6px_rgba(213,135,76,0.15)]'
: 'bg-ivory/20'
@@ -27,15 +27,13 @@ function Item({ item, index }: { item: Milestone; index: number }) {
/>
<motion.div
className={`pr-8 md:pr-0 ${
onRight ? 'md:col-start-1 md:pl-16 md:text-left' : 'md:col-start-2 md:pr-16'
}`}
className={onRight ? 'md:col-start-1 md:pl-16 md:text-left' : 'md:col-start-2 md:pr-16'}
initial={{ opacity: 0, y: 24 }}
animate={active ? { opacity: 1, y: 0 } : { opacity: 0, y: 24 }}
transition={{ duration: 0.55, ease }}
>
<EditableItem resource="timeline" item={item}>
<div className="group relative overflow-hidden rounded-2xl border border-ivory/10 bg-ink/40 p-6 backdrop-blur-md transition-all duration-500 ease-lux hover:-translate-y-1.5 hover:border-copper/50 hover:bg-ink/60 hover:shadow-[0_12px_40px_-10px_rgba(197,143,92,0.35)] md:p-8">
<div className="group relative overflow-hidden rounded-2xl border border-ivory/10 bg-ink/40 p-8 backdrop-blur-md transition-all duration-500 ease-lux hover:-translate-y-1.5 hover:border-copper/50 hover:bg-ink/60 hover:shadow-[0_12px_40px_-10px_rgba(197,143,92,0.35)]">
<div className="absolute inset-0 bg-gradient-to-br from-white/[0.03] to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
<span className="relative z-10 text-sm font-medium tracking-widest text-copper">{item.year}</span>
@@ -51,18 +49,19 @@ function Item({ item, index }: { item: Milestone; index: number }) {
export function Timeline() {
const { timeline } = useSite()
const { t } = useLang()
const ref = useRef<HTMLDivElement>(null)
const desktopRef = useRef<HTMLDivElement>(null)
const { scrollYProgress } = useScroll({
target: ref,
target: desktopRef,
offset: ['start 70%', 'end 60%'],
})
const scaleY = useTransform(scrollYProgress, [0, 1], [0, 1])
return (
<section className="bg-char py-24 md:py-32" aria-labelledby="timeline-title">
<div className="mx-auto w-full max-w-site px-6 lg:px-10">
<section className="w-full max-w-full overflow-x-clip bg-char py-16 md:py-24 lg:py-32" aria-labelledby="timeline-title">
<div className="mx-auto w-full max-w-site px-4 md:px-6 lg:px-10">
<div className="mb-16">
<div className="mb-8 md:mb-16">
<SectionHeading
title={t('fallbackTimelineTitle')}
lead={t('fallbackTimelineLead')}
@@ -71,28 +70,65 @@ export function Timeline() {
/>
</div>
<div ref={ref} className="relative mx-auto mt-20 max-w-4xl">
{/* Mobile View: Minimalist Editorial Spine */}
<div className="block md:hidden px-5 py-4">
<div className="relative rtl:pr-6 rtl:border-r ltr:pl-6 ltr:border-l border-copper/25 space-y-6 my-2">
{timeline.map((item) => (
<EditableItem key={item.id} resource="timeline" item={item}>
<div className="relative group">
{/* Timeline Node on the vertical spine */}
<span
aria-hidden="true"
className="absolute rtl:-right-[29px] ltr:-left-[29px] top-1.5 h-2.5 w-2.5 rounded-full bg-copper ring-4 ring-copper/15"
/>
{/* Milestone Content */}
<div className="p-0">
<div className="flex items-center gap-2 mb-1">
<span className="text-[11px] font-bold tracking-wider text-copper bg-copper/10 px-2 py-0.5 rounded-md">
{item.year}
</span>
<h3 className="text-sm font-semibold text-ivory">
{item.title}
</h3>
</div>
<p className="text-xs text-ivory/60 leading-relaxed line-clamp-2 rtl:pr-0.5 ltr:pl-0.5">
{item.desc}
</p>
</div>
</div>
</EditableItem>
))}
</div>
<div className="mt-6">
<AddItemButton resource="timeline" />
</div>
</div>
{/* Desktop View: Original Vertical Timeline */}
<div ref={desktopRef} className="relative mx-auto mt-20 hidden max-w-4xl md:block">
{/* خط پس‌زمینه ثابت - عرض 2px و همراستایی دقیق با مرکز */}
<span
aria-hidden="true"
className="absolute inset-y-0 right-0 w-[2px] bg-ivory/10 md:right-1/2 md:translate-x-1/2"
className="absolute inset-y-0 right-1/2 w-[2px] translate-x-1/2 bg-ivory/10"
/>
{/* خط متحرک - عرض 2px و همراستایی دقیق با مرکز */}
<motion.span
aria-hidden="true"
className="absolute inset-y-0 right-0 w-[2px] origin-top bg-gradient-to-b from-copper/80 via-copper to-copper/20 shadow-[0_0_10px_rgba(197,143,92,0.5)] md:right-1/2 md:translate-x-1/2"
className="absolute inset-y-0 right-1/2 w-[2px] origin-top translate-x-1/2 bg-gradient-to-b from-copper/80 via-copper to-copper/20 shadow-[0_0_10px_rgba(197,143,92,0.5)]"
style={{ scaleY }}
/>
<ol className="flex flex-col gap-12 md:gap-16">
<ol className="flex flex-col gap-16">
{timeline.map((item, i) => (
<Item key={item.id} item={item} index={i} />
<DesktopTimelineItem key={item.id} item={item} index={i} />
))}
</ol>
<div className="mt-12">
<AddItemButton resource="timeline" />
</div>
</div>
</div>
</section>
)
frontend/src/components/home/WhyUs.tsx
+80 -33
View File
@@ -1,8 +1,7 @@
import React from 'react';
import { Reveal } from '../Reveal';
import { SectionHeading } from '../SectionHeading';
import { useSectionHeading, useSite } from '../../api';
import { AddItemButton, EditableItem, SingletonPill } from '../../admin/Editable';
import { AddItemButton, EditableItem } from '../../admin/Editable';
import { InlineEdit } from '../admin/InlineEdit';
import { useFieldSaver } from '../../admin/AdminContext';
import { useLang, formatNumber } from '../../i18n/lang';
@@ -19,9 +18,15 @@ export function WhyUs() {
if (it) Object.assign(it, changes);
});
const formatIndex = (index: number) => {
return lang === 'fa'
? `۰${formatNumber(index + 1, lang)}`
: String(index + 1).padStart(2, '0');
};
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">
<section className="w-full max-w-full overflow-x-clip bg-ink py-16 md:py-24 lg:py-32" aria-labelledby="why-title">
<div className="mx-auto grid max-w-site gap-8 px-4 md:gap-14 md:px-6 lg:grid-cols-12 lg:px-10">
<div className="lg:col-span-5">
<SectionHeading
title={heading.title}
@@ -33,42 +38,84 @@ export function WhyUs() {
<img
src={heading.image}
alt={heading.title}
className="mt-10 h-80 w-full object-cover" />
className="mt-6 hidden h-80 w-full object-cover md:mt-10 md:block" />
</Reveal>
)}
</div>
<div className="lg:col-span-7">
<div className="grid gap-x-10 gap-y-px sm:grid-cols-2">
{why_us.map((item, i) =>
<Reveal key={item.id} delay={0.05 * i}>
<EditableItem resource="why_us" item={item}>
<div className="flex h-full flex-col border-t border-ivory/10 py-8">
<span className="text-xs font-light text-copper">{lang === 'fa' ? `۰${formatNumber(i + 1, lang)}` : formatNumber(i + 1, lang).padStart(2, '0')}</span>
<h3 className="mt-4 text-lg font-bold text-ivory">
<InlineEdit
value={item.title}
onSave={(v) => saveItem(item.id, { title: v })}
/>
</h3>
<p className="mt-3 text-sm font-light leading-8 text-ivory/55">
<InlineEdit
multiline
value={item.desc}
onSave={(v) => saveItem(item.id, { desc: v })}
/>
</p>
</div>
</EditableItem>
</Reveal>
)}
{/* Mobile 2-Column Luxury Micro-Card Grid */}
<div className="block md:hidden px-3.5 py-2">
<div className="grid grid-cols-2 gap-2.5 items-stretch">
{why_us.map((item, i) => (
<EditableItem key={item.id} resource="why_us" item={item} className="h-full">
<div className="h-full p-3 rounded-xl border border-ivory/10 bg-char/40 flex flex-col justify-between hover:border-copper/40 transition-all duration-200">
<div>
{/* Top Row: Index Badge */}
<div className="flex items-center justify-between mb-2">
<span className="text-[11px] font-mono font-bold text-copper tracking-wider px-1.5 py-0.5 rounded bg-copper/10 border border-copper/20">
{`0${i + 1}`}
</span>
</div>
{/* Title */}
<h4 className="text-xs font-bold text-ivory mb-1 line-clamp-1 leading-snug">
<InlineEdit
value={item.title}
onSave={(v) => saveItem(item.id, { title: v })}
/>
</h4>
{/* Description */}
<p className="text-[10px] text-ivory/60 leading-relaxed line-clamp-2">
<InlineEdit
multiline
value={item.desc}
onSave={(v) => saveItem(item.id, { desc: v })}
/>
</p>
</div>
</div>
</EditableItem>
))}
</div>
<div className="mt-6">
<AddItemButton resource="why_us" />
</div>
</div>
<div className="mt-8">
<AddItemButton resource="why_us" />
{/* Desktop Grid Layout */}
<div className="hidden md:block">
<div className="grid gap-x-10 gap-y-px sm:grid-cols-2">
{why_us.map((item, i) => (
<Reveal key={item.id} delay={0.05 * i}>
<EditableItem resource="why_us" item={item}>
<div className="flex h-full flex-col border-t border-ivory/10 py-8">
<span className="text-xs font-light text-copper">{formatIndex(i)}</span>
<h3 className="mt-4 text-lg font-bold text-ivory">
<InlineEdit
value={item.title}
onSave={(v) => saveItem(item.id, { title: v })}
/>
</h3>
<p className="mt-3 text-sm font-light leading-8 text-ivory/55">
<InlineEdit
multiline
value={item.desc}
onSave={(v) => saveItem(item.id, { desc: v })}
/>
</p>
</div>
</EditableItem>
</Reveal>
))}
</div>
<div className="mt-8">
<AddItemButton resource="why_us" />
</div>
</div>
</div>
</div>
</section>);
</section>
);
}