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,58 @@
+import type { ReactNode } from "react";
+
+type Props = {
+  /** English label — logo-style lowercase latin */
+  en: string;
+  /** Primary Persian phrase (solid black) */
+  title: string;
+  /** Secondary Persian phrase (lighter black), slider-style */
+  titleMuted?: string;
+  as?: "h1" | "h2";
+  /** Invert colors for dark sections */
+  light?: boolean;
+  /** Optional sibling (lead, link, CTA) */
+  aside?: ReactNode;
+  className?: string;
+};
+
+/**
+ * Section heading inspired by the HOM logo + hero slider title:
+ * latin rail (line + red dot), then FA title split into black / muted parts.
+ */
+export function SectionTitle({
+  en,
+  title,
+  titleMuted,
+  as = "h2",
+  light = false,
+  aside,
+  className,
+}: Props) {
+  const Heading = as;
+
+  return (
+    <div className={`section-title${light ? " section-title--light" : ""}${className ? ` ${className}` : ""}`}>
+      <div className="section-title__main">
+        <div className="section-title__rail" aria-hidden="true">
+          <span className="section-title__en latin">{en}</span>
+          <span className="section-title__track">
+            <span className="section-title__line" />
+            <span className="section-title__capsule" />
+            <span className="section-title__line section-title__line--tail" />
+            <span className="section-title__dot" />
+          </span>
+        </div>
+        <Heading className="section-title__fa">
+          {title}
+          {titleMuted ? (
+            <>
+              {" "}
+              <em>{titleMuted}</em>
+            </>
+          ) : null}
+        </Heading>
+      </div>
+      {aside ? <div className="section-title__aside">{aside}</div> : null}
+    </div>
+  );
+}