@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/about-statement-band/AboutStatementBand.tsx

@@ -0,0 +1,236 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `About` (46368:243915), Type=Statement Band.
+ *
+ * A band in the primary colour carrying one big centred statement under a
+ * short eyebrow, with small tilted photos pinned around its edges and cut
+ * off by them: one over the top edge at the start, one near the top at the
+ * end, one half out of the start edge at mid height, and one off the bottom
+ * corner at the end. The band follows the theme (`primary` with its
+ * foreground), so it turns light in Dark mode as Figma's binding does.
+ *
+ * Desktop sets the statement at 60px, 1000px wide at most, with photos of
+ * 200×140 and 220×156. Tablet uses Figma's 4XL style, which its responsive
+ * size variable sets at 30px on the 4XL line height, 540px wide, with
+ * photos about three quarters the size. Mobile sets 30px across the full
+ * width and keeps two photos only: the top start one and the bottom end
+ * one. Each photo is placed from the band's nearest corner, in px as Figma
+ * draws it, except the mid-height one, whose top is a share of the band's
+ * height. The statement paints over the photos, so it stays readable where
+ * a narrow band brings them together.
+ *
+ * In Arabic the photos swap sides and their tilts turn the other way, as
+ * Figma's RTL variants draw them. The photos themselves are never flipped.
+ *
+ * Motion: the first time the band scrolls into view the statement rises
+ * line by line from behind a mask, 80ms apart. The motion card's scroll
+ * parallax on the photos is left out: scroll-linked motion is replaced by
+ * the one-time reveal, and the photos stay put. Skipped under
+ * prefers-reduced-motion.
+ *
+ * Mobile first, and sized by the block's own width: the section is a query
+ * container. The base classes are Figma's Mobile (360);
+ * `[@container(min-width:40rem)]:` is its Tablet and
+ * `[@container(min-width:64rem)]:` its Desktop. The section's own padding
+ * follows the window, since an element can't query itself.
+ */
+
+export interface AboutStatementBandPhoto {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface AboutStatementBandCopy {
+  /** The short label above the statement. Hidden when empty. */
+  eyebrow: React.ReactNode
+  /** The statement, the section's heading, an `h2`. A string reveals line by line. */
+  statement: React.ReactNode
+  /** Shown under the statement when `photos` is an empty list. */
+  empty: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", AboutStatementBandCopy> = {
+  en: {
+    eyebrow: "WHO WE ARE",
+    statement: "We're designers, engineers, and dreamers building software that feels human.",
+    empty: "No photos yet.",
+  },
+  ar: {
+    eyebrow: "من نحن",
+    statement: "نحن مصممون ومهندسون وحالمون نبني برمجيات ذات طابع إنساني.",
+    empty: "لا توجد صور بعد.",
+  },
+}
+
+/**
+ * The four edge photos in Figma's order: top start, top end, mid start,
+ * bottom end. Sizes and offsets are Figma's per breakpoint; the middle two
+ * are hidden on Mobile. Figma turns a photo anticlockwise for a positive
+ * angle and CSS clockwise, so each tilt is Figma's negated, and Arabic turns
+ * it back.
+ */
+const EDGE_PHOTOS = [
+  {
+    place:
+      "h-[70px] w-[100px] start-[15px] top-[-24px] [@container(min-width:40rem)]:h-[105px] [@container(min-width:40rem)]:w-[150px] [@container(min-width:40rem)]:start-10 [@container(min-width:40rem)]:top-[-38px] [@container(min-width:64rem)]:h-[140px] [@container(min-width:64rem)]:w-[200px] [@container(min-width:64rem)]:start-[70px] [@container(min-width:64rem)]:top-[-57px]",
+    rotate: "rotate-[-5deg] [&:dir(rtl)]:rotate-[5deg]",
+  },
+  {
+    place:
+      "hidden [@container(min-width:40rem)]:block [@container(min-width:40rem)]:h-[105px] [@container(min-width:40rem)]:w-[150px] [@container(min-width:40rem)]:end-[-40px] [@container(min-width:40rem)]:top-[38px] [@container(min-width:64rem)]:h-[140px] [@container(min-width:64rem)]:w-[200px] [@container(min-width:64rem)]:end-[-44px] [@container(min-width:64rem)]:top-[54px]",
+    rotate: "rotate-[6deg] [&:dir(rtl)]:rotate-[-6deg]",
+  },
+  {
+    place:
+      "hidden [@container(min-width:40rem)]:block [@container(min-width:40rem)]:h-[117px] [@container(min-width:40rem)]:w-[165px] [@container(min-width:40rem)]:start-[-52px] [@container(min-width:40rem)]:top-[38%] [@container(min-width:64rem)]:h-[156px] [@container(min-width:64rem)]:w-[220px] [@container(min-width:64rem)]:start-[-71px] [@container(min-width:64rem)]:top-[55%]",
+    rotate: "rotate-[-4deg] [&:dir(rtl)]:rotate-[4deg]",
+  },
+  {
+    place:
+      "h-[74px] w-[110px] end-[-9px] bottom-[-8px] [@container(min-width:40rem)]:h-[112px] [@container(min-width:40rem)]:w-[165px] [@container(min-width:40rem)]:end-[-56px] [@container(min-width:40rem)]:bottom-[-38px] [@container(min-width:64rem)]:h-[150px] [@container(min-width:64rem)]:w-[220px] [@container(min-width:64rem)]:end-[-75px] [@container(min-width:64rem)]:bottom-[-87px]",
+    rotate: "rotate-[4deg] [&:dir(rtl)]:rotate-[-4deg]",
+  },
+]
+
+/**
+ * Figma's motion: the statement rises line by line from behind a mask
+ * (100% to 0, 600ms, 80ms apart). The lines are found at run time by the
+ * words' tops, so the reveal follows wherever the text wraps. Runs once,
+ * the first time the band scrolls into view.
+ */
+function playReveal(node: HTMLElement): Animation[] {
+  const words = Array.from(node.querySelectorAll<HTMLElement>("[data-line-word]"))
+  const tops = Array.from(new Set(words.map((word) => word.offsetTop))).sort((a, b) => a - b)
+  return words.map((word) => {
+    const inner = word.firstElementChild as HTMLElement
+    return inner.animate([{ transform: "translateY(100%)" }, { transform: "none" }], {
+      duration: 600,
+      delay: tops.indexOf(word.offsetTop) * 80,
+      easing: "cubic-bezier(0, 0, 0.2, 1)",
+      fill: "backwards",
+    })
+  })
+}
+
+function useInViewEntrance(root: React.RefObject<HTMLElement | null>, play: (node: HTMLElement) => Animation[]) {
+  React.useLayoutEffect(() => {
+    const node = root.current
+    if (!node || typeof node.animate !== "function" || typeof IntersectionObserver === "undefined") return
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return
+    let animations: Animation[] = []
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!entries.some((entry) => entry.isIntersecting)) return
+        observer.disconnect()
+        animations = play(node)
+      },
+      { threshold: 0.3 }
+    )
+    observer.observe(node)
+    return () => {
+      observer.disconnect()
+      animations.forEach((animation) => animation.cancel())
+    }
+  }, [root, play])
+}
+
+export interface AboutStatementBandProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<AboutStatementBandCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The four edge photos, in Figma's order: over the top edge at the start,
+   * near the top at the end, half out of the start edge at mid height, off
+   * the bottom corner at the end. Mobile shows the first and the fourth.
+   * Photos past the fourth are not shown. None by default: four `muted`
+   * placeholders. An empty list shows the `empty` line instead.
+   * @default none: `muted` placeholders
+   */
+  photos?: AboutStatementBandPhoto[]
+}
+
+export function AboutStatementBand({
+  locale = "en",
+  eyebrow,
+  statement,
+  empty,
+  photos,
+  className,
+  ...props
+}: AboutStatementBandProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const headingRef = React.useRef<HTMLHeadingElement>(null)
+  useInViewEntrance(headingRef, playReveal)
+  const label = eyebrow ?? copy.eyebrow
+  const text = statement ?? copy.statement
+  const noPhotos = photos !== undefined && photos.length === 0
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn(
+        "[container-type:inline-size] relative overflow-hidden bg-primary px-4 pb-20 pt-8 text-primary-foreground md:px-6 md:py-16 lg:p-24",
+        className
+      )}
+      {...props}
+    >
+      {noPhotos
+        ? null
+        : EDGE_PHOTOS.map((slot, index) => {
+            const photo = photos?.[index]
+            return (
+              <div
+                key={index}
+                className={cn("absolute overflow-hidden rounded-xl bg-muted shadow-lg", slot.place, slot.rotate)}
+              >
+                {photo ? (
+                  <img
+                    src={photo.src}
+                    alt={photo.alt}
+                    loading="lazy"
+                    decoding="async"
+                    className="absolute inset-0 size-full object-cover"
+                  />
+                ) : null}
+              </div>
+            )
+          })}
+
+      <div className="relative mx-auto flex w-full max-w-[1248px] flex-col items-center gap-8 text-center">
+        {label ? <p className="text-sm font-medium">{label}</p> : null}
+        <h2
+          ref={headingRef}
+          id={headingId}
+          className="text-3xl font-semibold [@container(min-width:40rem)]:max-w-[540px] [@container(min-width:40rem)]:leading-[calc(var(--leading-4xl)*2.25rem)] [@container(min-width:64rem)]:max-w-[1000px] [@container(min-width:64rem)]:text-6xl"
+        >
+          {typeof text === "string"
+            ? text.split(" ").map((word, index) => (
+                <React.Fragment key={index}>
+                  {index > 0 ? " " : null}
+                  {/* The mask: each word rises from behind its own clip. */}
+                  <span data-line-word className="inline-block overflow-hidden align-top">
+                    <span className="inline-block">{word}</span>
+                  </span>
+                </React.Fragment>
+              ))
+            : text}
+        </h2>
+        {noPhotos ? <p className="text-sm">{empty ?? copy.empty}</p> : null}
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const aboutStatementBandCopy = COPY

package/registry/blocks/about-statement-band/index.ts

@@ -0,0 +1,7 @@
+export {
+  AboutStatementBand,
+  aboutStatementBandCopy,
+  type AboutStatementBandCopy,
+  type AboutStatementBandPhoto,
+  type AboutStatementBandProps,
+} from "./AboutStatementBand"

package/registry/blocks/about-story-photos/AboutStoryPhotos.test.tsx

@@ -0,0 +1,12 @@
+import { describe, expect, it } from "vitest"
+import { render } from "@testing-library/react"
+import { AboutStoryPhotos, aboutStoryPhotosCopy } from "./AboutStoryPhotos"
+
+describe("AboutStoryPhotos", () => {
+  it("shows three cards at most, as Figma draws the row", () => {
+    const [first] = aboutStoryPhotosCopy.en.items
+    const items = Array.from({ length: 5 }, (_, index) => ({ ...first!, caption: `Card ${index + 1}` }))
+    const { container } = render(<AboutStoryPhotos items={items} />)
+    expect([...container.querySelectorAll("figcaption")].map((caption) => caption.textContent)).toEqual(["Card 1", "Card 2", "Card 3"])
+  })
+})

package/registry/blocks/about-story-photos/AboutStoryPhotos.tsx

@@ -0,0 +1,252 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `About` (46368:243915), Type=Story Photos.
+ *
+ * A short company story over three snapshot cards. The story (heading, a
+ * lead line and a paragraph) is a 720px column centred in the block, its
+ * text set from the start. Under it sit three cards in a centred row, each a
+ * `card` frame with a hairline border, a small radius and a medium shadow,
+ * 12px around a photo and a one-line caption. The outer two tilt, 4° and −3°
+ * (CSS degrees, clockwise; Figma stores the opposite sign), the middle one
+ * stands straight.
+ *
+ * Desktop cards are 340 wide with a 236px photo, 48px apart. Tablet keeps
+ * the row with 216px cards, 150px photos and 16px gaps. Mobile stacks the
+ * cards, 280 wide with 190px photos, 32px apart, tilts kept.
+ *
+ * In Arabic the row runs right to left and the tilts mirror, as Figma's RTL
+ * variants draw them; the photos are never flipped.
+ *
+ * Mobile first, and sized by the block's own width, not the window's: the
+ * section is a query container, so the block lays out for the room it is
+ * given, such as a docs preview narrower than the screen. The base classes
+ * are Figma's Mobile (360); `[@container(min-width:40rem)]:` is its Tablet,
+ * from 640px of content, and `[@container(min-width:64rem)]:` its Desktop,
+ * from 1024px of content. The section's own padding still follows the
+ * window, since an element can't query itself.
+ */
+
+export interface AboutStoryPhotosPhoto {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface AboutStoryPhotosItem {
+  /** The caption under the photo. */
+  caption: React.ReactNode
+  /** The card's photo. A `muted` placeholder when missing. */
+  image?: AboutStoryPhotosPhoto
+}
+
+export interface AboutStoryPhotosCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line under the heading, set darker than the paragraph. */
+  lead: React.ReactNode
+  /** The story's paragraph. */
+  body: React.ReactNode
+  /**
+   * The snapshot cards, from the start side. Figma draws three, and the
+   * row holds three: cards past the third are not shown.
+   */
+  items: AboutStoryPhotosItem[]
+  /** Shown in place of the cards when `items` is empty. */
+  empty: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", AboutStoryPhotosCopy> = {
+  en: {
+    heading: "Our story",
+    lead: "Here is how we got here — the honest version, not the brochure one.",
+    body: "Fasla began as three friends sharing one long table, a kettle and a stubborn idea: that everyday software could feel calmer. Each of us had spent years in a different corner of design and engineering, and we kept noticing that the people we most wanted to build with were already sitting beside us.",
+    items: [
+      { caption: "Design crit, Thursday" },
+      { caption: "New studio, day one" },
+      { caption: "The long kitchen table" },
+    ],
+    empty: "No photos yet.",
+  },
+  ar: {
+    heading: "قصتنا",
+    lead: "هكذا وصلنا إلى هنا، بالرواية الصادقة لا بنسخة الكتيّب الدعائي.",
+    body: "بدأت فاصلة بثلاثة أصدقاء يتقاسمون طاولة طويلة وإبريق شاي وفكرة عنيدة: أن البرمجيات اليومية يمكن أن تكون أهدأ. أمضى كل واحد منا سنوات في زاوية مختلفة من التصميم والهندسة، وكنا نلاحظ دائمًا أن الأشخاص الذين نتمنى العمل معهم يجلسون إلى جوارنا بالفعل.",
+    items: [
+      { caption: "مراجعة التصميم، يوم الخميس" },
+      { caption: "الاستوديو الجديد، اليوم الأول" },
+      { caption: "طاولة المطبخ الطويلة" },
+    ],
+    empty: "لا توجد صور بعد.",
+  },
+}
+
+/** The most cards the row shows, as Figma draws it. */
+const CARDS = 3
+
+/** Each card's tilt, in slot order. RTL mirrors it. */
+const TILTS = ["rotate-[4deg] [&:dir(rtl)]:rotate-[-4deg]", "", "rotate-[-3deg] [&:dir(rtl)]:rotate-[3deg]"]
+
+/**
+ * Figma's motion: on first entry the heading, lead and paragraph fade up
+ * 16px, 80ms apart; then the cards rise 24px, starting flat and easing into
+ * their tilt, 120ms apart, 400ms ease-out. Each card is watched on its own,
+ * so on a phone, where they stack, each one arrives as it scrolls in; cards
+ * that arrive together stagger from the start side (the right in Arabic).
+ * Runs once per element; skipped under prefers-reduced-motion.
+ */
+function useReveal(root: React.RefObject<HTMLElement | null>) {
+  React.useLayoutEffect(() => {
+    const node = root.current
+    if (!node || typeof node.animate !== "function" || typeof IntersectionObserver === "undefined") return
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return
+    const ease = "cubic-bezier(0, 0, 0.2, 1)"
+    const animations: Animation[] = []
+    let copyStart = -Infinity
+
+    const story = node.querySelector<HTMLElement>("[data-reveal-story]")
+    const copyObserver = new IntersectionObserver(
+      (entries) => {
+        if (!entries.some((entry) => entry.isIntersecting)) return
+        copyObserver.disconnect()
+        copyStart = performance.now()
+        Array.from(node.querySelectorAll<HTMLElement>("[data-reveal-copy]")).forEach((line, index) =>
+          animations.push(
+            line.animate([{ opacity: 0, transform: "translateY(16px)" }, { opacity: 1, transform: "none" }], {
+              duration: 400,
+              delay: index * 80,
+              easing: ease,
+              fill: "backwards",
+            })
+          )
+        )
+      },
+      { threshold: 0.2 }
+    )
+    if (story) copyObserver.observe(story)
+
+    const cardObserver = new IntersectionObserver(
+      (entries) => {
+        const arriving = entries.filter((entry) => entry.isIntersecting).map((entry) => entry.target as HTMLElement)
+        // Wait for the copy when it has only just started, as Figma's "then" asks.
+        const after = Math.max(0, 400 - (performance.now() - copyStart))
+        arriving.forEach((card, index) => {
+          cardObserver.unobserve(card)
+          const tilt = getComputedStyle(card).transform
+          animations.push(
+            card.animate(
+              [
+                { opacity: 0, transform: "translateY(24px) rotate(0deg)" },
+                { opacity: 1, transform: tilt === "none" ? "none" : tilt },
+              ],
+              { duration: 400, delay: after + index * 120, easing: ease, fill: "backwards" }
+            )
+          )
+        })
+      },
+      { threshold: 0.2 }
+    )
+    node.querySelectorAll<HTMLElement>("[data-reveal-card]").forEach((card) => cardObserver.observe(card))
+
+    return () => {
+      copyObserver.disconnect()
+      cardObserver.disconnect()
+      animations.forEach((animation) => animation.cancel())
+    }
+  }, [root])
+}
+
+export interface AboutStoryPhotosProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<AboutStoryPhotosCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+}
+
+export function AboutStoryPhotos({
+  locale = "en",
+  heading,
+  lead,
+  body,
+  items,
+  empty,
+  className,
+  ...props
+}: AboutStoryPhotosProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const rootRef = React.useRef<HTMLElement>(null)
+  const list = (items ?? copy.items).slice(0, CARDS)
+  useReveal(rootRef)
+
+  return (
+    <section
+      ref={rootRef}
+      aria-labelledby={headingId}
+      className={cn("[container-type:inline-size] bg-background px-4 py-8 md:px-6 md:py-16 lg:p-24", className)}
+      {...props}
+    >
+      <div className="mx-auto flex w-full max-w-[1248px] flex-col items-center gap-12 [@container(min-width:40rem)]:gap-16">
+        <div data-reveal-story="" className="flex w-full max-w-[720px] flex-col gap-6">
+          <h2
+            id={headingId}
+            data-reveal-copy=""
+            className="text-2xl font-semibold text-foreground [@container(min-width:40rem)]:text-3xl [@container(min-width:64rem)]:text-4xl"
+          >
+            {heading ?? copy.heading}
+          </h2>
+          <p data-reveal-copy="" className="text-base font-medium text-foreground [@container(min-width:40rem)]:text-lg">
+            {lead ?? copy.lead}
+          </p>
+          <p data-reveal-copy="" className="text-base text-muted-foreground [@container(min-width:40rem)]:text-lg">
+            {body ?? copy.body}
+          </p>
+        </div>
+
+        {list.length === 0 ? (
+          <p className="py-12 text-center text-sm text-muted-foreground">{empty ?? copy.empty}</p>
+        ) : (
+          <ul className="flex w-full flex-col items-center gap-8 pb-3 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:flex-wrap [@container(min-width:40rem)]:justify-center [@container(min-width:40rem)]:gap-4 [@container(min-width:64rem)]:gap-12">
+            {list.map((item, index) => (
+              <li
+                key={index}
+                data-reveal-card=""
+                className={cn(
+                  "w-full max-w-[280px] [@container(min-width:40rem)]:max-w-[216px] [@container(min-width:40rem)]:flex-1 [@container(min-width:64rem)]:max-w-[340px]",
+                  "transition-transform duration-200 ease-out motion-reduce:transition-none",
+                  "hover:[@media(pointer:fine)]:!rotate-0 hover:[@media(pointer:fine)]:-translate-y-1",
+                  TILTS[index]
+                )}
+              >
+                <figure className="flex flex-col gap-3 rounded-sm border border-border bg-card p-3 shadow-md">
+                  <div className="relative h-[190px] w-full overflow-hidden rounded-[2px] bg-muted [@container(min-width:40rem)]:h-[150px] [@container(min-width:64rem)]:h-[236px]">
+                    {item.image ? (
+                      <img
+                        src={item.image.src}
+                        alt={item.image.alt}
+                        loading="lazy"
+                        decoding="async"
+                        className="absolute inset-0 size-full object-cover"
+                      />
+                    ) : null}
+                  </div>
+                  <figcaption className="text-xs text-muted-foreground">{item.caption}</figcaption>
+                </figure>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const aboutStoryPhotosCopy = COPY

package/registry/blocks/about-story-photos/index.ts

@@ -0,0 +1,8 @@
+export {
+  AboutStoryPhotos,
+  aboutStoryPhotosCopy,
+  type AboutStoryPhotosCopy,
+  type AboutStoryPhotosItem,
+  type AboutStoryPhotosPhoto,
+  type AboutStoryPhotosProps,
+} from "./AboutStoryPhotos"