90 lines
2.7 KiB
TypeScript
90 lines
2.7 KiB
TypeScript
import Link from "next/link";
|
|
|
|
import type { ServiceStep } from "@/data/site";
|
|
|
|
type Props = {
|
|
image: string;
|
|
imageAlt?: string;
|
|
index: string;
|
|
title: string;
|
|
titleEn: string;
|
|
lead: string;
|
|
steps: ServiceStep[];
|
|
ctaLabel?: string;
|
|
ctaHref?: string;
|
|
};
|
|
|
|
/**
|
|
* Sticky scroll frame for service pages — side card + vertical steps.
|
|
* Same scroll/zoom mechanic as OpeningFrame, different composition.
|
|
*/
|
|
export function ServiceFrame({
|
|
image,
|
|
imageAlt = "نمونه خدمت",
|
|
index,
|
|
title,
|
|
titleEn,
|
|
lead,
|
|
steps,
|
|
ctaLabel = "درخواست مشاوره",
|
|
ctaHref = "/contact",
|
|
}: Props) {
|
|
return (
|
|
<section className="service-frame-track" aria-label={title}>
|
|
<div className="service-frame-stage">
|
|
<div className="service-frame-media">
|
|
<img src={image} alt={imageAlt} loading="eager" decoding="async" />
|
|
</div>
|
|
|
|
<div className="service-frame-vignette" aria-hidden="true" />
|
|
<div className="service-frame-shade" aria-hidden="true" />
|
|
|
|
<div className="service-frame-headline">
|
|
<p className="service-frame-headline__index latin" lang="en" dir="ltr">
|
|
{index}
|
|
</p>
|
|
<h2 className="service-frame-headline__title">{title}</h2>
|
|
<p className="service-frame-headline__en latin">{titleEn}</p>
|
|
</div>
|
|
|
|
<div className="service-frame-copy">
|
|
<aside className="service-frame-card">
|
|
<div className="service-frame-card__rail" aria-hidden="true">
|
|
<span className="latin">process</span>
|
|
<span className="service-frame-card__line" />
|
|
<span className="service-frame-card__dot" />
|
|
</div>
|
|
|
|
<p className="service-frame-card__lead">{lead}</p>
|
|
|
|
<ol className="service-frame-steps">
|
|
{steps.map((step, i) => (
|
|
<li key={step.title} className="service-frame-step">
|
|
<span className="service-frame-step__num latin" lang="en" dir="ltr">
|
|
{String(i + 1).padStart(2, "0")}
|
|
</span>
|
|
<div>
|
|
<h3>{step.title}</h3>
|
|
<p>{step.text}</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
|
|
{ctaLabel ? (
|
|
<div className="service-frame-card__cta">
|
|
<Link href={ctaHref} className="btn btn--light">
|
|
{ctaLabel}
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
|
|
<path d="M4 12h16M13 5l7 7-7 7" />
|
|
</svg>
|
|
</Link>
|
|
</div>
|
|
) : null}
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|