Expand HOM studio site with portfolio, blog, auth, and details video frame.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-10-12 22:52:38 +03:30
parent 73971bf6d9
commit 55dd94d2e4
45 changed files with 6056 additions and 651 deletions
@@ -0,0 +1,89 @@
+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>
+  );
+}