Add new updated site
This commit is contained in:
Behrad
@@ -9,7 +9,7 @@ import { AddItemButton, EditableItem } from '../admin/Editable'
|
||||
|
||||
export function Investment() {
|
||||
const { investment_models } = useSite()
|
||||
const heading = useSectionHeading('investment_models')
|
||||
const heading = useSectionHeading('investment_models')
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -22,26 +22,29 @@ export function Investment() {
|
||||
{investment_models.map((model, i) => (
|
||||
<Reveal key={model.id} delay={0.06 * i} className="h-full">
|
||||
<EditableItem resource="investment_models" item={model} 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>
|
||||
<article className="group relative flex h-full flex-col overflow-hidden rounded-2xl border border-ivory/10 bg-char/40 p-10 backdrop-blur-md transition-all duration-500 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:bg-char/70 hover:shadow-[0_12px_40px_-10px_rgba(197,143,92,0.35)] transform-gpu">
|
||||
{/* لایه نوری ظریف که در زمان هاور روشن میشود */}
|
||||
<div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-white/[0.03] to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
|
||||
|
||||
<p className="relative z-10 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>
|
||||
<h3 className="relative z-10 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>
|
||||
<p className="relative z-10 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) => (
|
||||
<li key={point} className="flex items-start gap-3 text-sm font-light leading-8 text-ivory/65">
|
||||
<span className="mt-3.5 h-1 w-1 shrink-0 rounded-full bg-copper transition-transform duration-300 ease-out group-hover:scale-[1.5]" aria-hidden="true" />
|
||||
{point}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
<div className="relative z-10 mt-auto pt-10">
|
||||
<ul className="space-y-4 border-t border-ivory/10 pt-8 transition-colors duration-500 group-hover:border-copper/20">
|
||||
{model.points.map((point) => (
|
||||
<li key={point} className="flex items-start gap-3 text-sm font-light leading-8 text-ivory/70 transition-colors duration-300 group-hover:text-ivory">
|
||||
<span className="mt-3.5 h-1.5 w-1.5 shrink-0 rounded-full bg-copper/60 transition-all duration-300 ease-lux group-hover:scale-125 group-hover:bg-copper group-hover:shadow-[0_0_10px_rgba(197,143,92,0.8)]" aria-hidden="true" />
|
||||
{point}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
</EditableItem>
|
||||
</Reveal>
|
||||
))}
|
||||
@@ -54,4 +57,4 @@ export function Investment() {
|
||||
<ContactSection />
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -26,8 +26,9 @@ export function Projects() {
|
||||
const doneLabel = useStatusLabel('done');
|
||||
const progressLabel = useStatusLabel('progress');
|
||||
const FILTERS: {key: ProjectStatus;label: string;}[] = [
|
||||
{ key: 'done', label: doneLabel },
|
||||
{ key: 'progress', label: progressLabel }];
|
||||
{ key: 'done', label: doneLabel },
|
||||
{ key: 'progress', label: progressLabel }
|
||||
];
|
||||
const [status, setStatus] = useState<ProjectStatus>('done');
|
||||
const list = projects.filter((p) => p.status === status);
|
||||
|
||||
@@ -35,47 +36,51 @@ export function Projects() {
|
||||
<>
|
||||
<PageHero pageKey="projects" />
|
||||
|
||||
|
||||
<section className="bg-ink py-24 lg:py-32" aria-label="فهرست پروژهها">
|
||||
<div className="mx-auto max-w-site px-6 lg:px-10">
|
||||
<div className="flex flex-wrap gap-3" role="tablist" aria-label="فیلتر وضعیت پروژه">
|
||||
{FILTERS.map((filter) =>
|
||||
<button
|
||||
key={filter.key}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={status === filter.key}
|
||||
onClick={() => setStatus(filter.key)}
|
||||
className={`group relative overflow-hidden border px-7 py-3 text-sm transition-colors duration-300 ease-lux ${
|
||||
status === filter.key ?
|
||||
'border-copper bg-copper font-bold text-char' :
|
||||
'border-ivory/15 font-light text-ivory/65'}`
|
||||
}>
|
||||
|
||||
{status !== filter.key &&
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="absolute inset-0 translate-y-full bg-copper transition-transform duration-300 ease-lux group-hover:translate-y-0" />
|
||||
|
||||
}
|
||||
<span className="relative z-10 transition-colors duration-300 ease-lux group-hover:text-char">
|
||||
<InlineEdit
|
||||
value={filter.label}
|
||||
onSave={(v) => saveStatusLabel(filter.key, v)}
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* دکمههای فیلتر مینیمال و شیشهای (وسطچین و بدون کادر) */}
|
||||
<div className="flex items-center justify-center gap-4 md:gap-6" role="tablist" aria-label="فیلتر وضعیت پروژه">
|
||||
{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" />
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
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 ${
|
||||
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'
|
||||
}`}
|
||||
>
|
||||
<span className="relative z-10 transition-colors duration-300 ease-out">
|
||||
<InlineEdit
|
||||
value={filter.label}
|
||||
onSave={(v) => saveStatusLabel(filter.key, v)}
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="mt-12 grid gap-6 lg:grid-cols-3">
|
||||
{list.map((project, i) =>
|
||||
<Reveal key={project.id} delay={0.05 * i} className="h-full">
|
||||
{list.map((project, i) => (
|
||||
<Reveal key={project.id} delay={0.05 * i} className="h-full">
|
||||
<EditableItem resource="projects" item={project} className="h-full">
|
||||
<ProjectCard project={project} imageClass="h-80" />
|
||||
</EditableItem>
|
||||
</Reveal>
|
||||
)}
|
||||
))}
|
||||
<AddItemButton resource="projects" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -83,6 +88,6 @@ export function Projects() {
|
||||
|
||||
<Gallery />
|
||||
<ContactSection />
|
||||
</>);
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user