@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/blocks/how-it-works-diagonal-photo-collage/HowItWorksDiagonalPhotoCollage.tsx

@@ -0,0 +1,170 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import {
+  enter,
+  HowItWorksHeader,
+  HowItWorksImage,
+  HowItWorksLtr,
+  HowItWorksSection,
+  revealTargets,
+  useRevealOnEnter,
+  type HowItWorksLocale,
+  type HowItWorksPhoto,
+} from "../how-it-works/how-it-works"
+
+/*
+ * Figma: `How it Works` (42334:294272), Type=Diagonal Photo Collage.
+ *
+ * A collage of three tilted photos beside the copy: an eyebrow, the heading, a
+ * line, and three numbered habits between hairlines. A habit is a numeral, a
+ * title and a line.
+ *
+ * Desktop sets the collage at the start, 592 × 540: a tall photo tilted -3°, a
+ * small one at the top tilted 5° and a third at the foot tilted -6°, so the
+ * stack fans away from the text. Tablet flattens it to an untilted pair above
+ * the list, and Mobile keeps one 240px photo. The page's `dir` moves the
+ * collage to the other side and turns each tilt the other way.
+ *
+ * Motion plays once, when the block comes into view: the photos rise 24px and
+ * ease from flat into their tilt, 100ms apart. Hovering a habit moves it 4px
+ * toward the end and turns its numeral from `muted-foreground` to `primary`
+ * (180ms). Under reduced motion the block is its finished state. Figma's card
+ * also moves the three photos at different speeds as the page scrolls and eases
+ * the tilt as it passes; the code has no scroll-linked motion, so the collage
+ * rests at its tilt.
+ *
+ * Content limits: the heading up to 46 characters, the line up to 80. A
+ * habit's title up to 28 characters and its line up to 120.
+ */
+
+export interface HowItWorksDiagonalHabit {
+  /** Keys the habit. */
+  id: string
+  title: React.ReactNode
+  description: React.ReactNode
+}
+
+export interface HowItWorksDiagonalPhotoCollageCopy {
+  eyebrow: React.ReactNode
+  /** The heading, an `h2`. */
+  heading: React.ReactNode
+  description: React.ReactNode
+  /** The habits, in order. The numerals are drawn from 01. */
+  habits: HowItWorksDiagonalHabit[]
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<HowItWorksLocale, HowItWorksDiagonalPhotoCollageCopy> = {
+  en: {
+    eyebrow: "How it works",
+    heading: "Three habits that keep a project on the rails",
+    description: "The teams that move fastest all do the same three things in the first week.",
+    habits: [
+      { id: "sketch", title: "Sketch before you commit", description: "Draw the flow on paper until it stops changing. Paper is the cheapest place in the whole project to be wrong." },
+      { id: "decide", title: "Decide once, write it down", description: "Every decision gets a line of reasoning beside it, so it does not quietly get reopened three months later." },
+      { id: "open", title: "Work in the open", description: "Put screens up while they are still rough. Feedback on a finished screen arrives too late to use." },
+    ],
+  },
+  ar: {
+    eyebrow: "كيف نعمل",
+    heading: "ثلاث عادات تُبقي المشروع على مساره",
+    description: "الفرق الأسرع حركة تفعل الأمور الثلاثة نفسها في الأسبوع الأول.",
+    habits: [
+      { id: "sketch", title: "ارسم قبل أن تلتزم", description: "ارسم المسار على الورق حتى يتوقف عن التغيّر. الورق هو أرخص مكان في المشروع كله لتكون مخطئًا فيه." },
+      { id: "decide", title: "قرّر مرة واحدة ودوّنه", description: "كل قرار يُرفق بسطر يشرح مبرّره، فلا يُعاد فتحه بهدوء بعد ثلاثة أشهر." },
+      { id: "open", title: "اعمل على المكشوف", description: "اعرض الشاشات وهي ما زالت أوّلية. الملاحظات على شاشة مكتملة تصل متأخرة جدًا للاستفادة منها." },
+    ],
+  },
+}
+
+/** Where each collage photo sits in the 592 × 540 box, its size and its tilt: Figma's. */
+const COLLAGE = [
+  { left: 0, top: 90, width: 300, height: 380, tilt: "-rotate-[3deg] [&:dir(rtl)]:rotate-[3deg]" },
+  { left: 300, top: 0, width: 250, height: 190, tilt: "rotate-[5deg] [&:dir(rtl)]:-rotate-[5deg]" },
+  { left: 318, top: 250, width: 262, height: 250, tilt: "-rotate-[6deg] [&:dir(rtl)]:rotate-[6deg]" },
+] as const
+
+export interface HowItWorksDiagonalPhotoCollageProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<HowItWorksDiagonalPhotoCollageCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: HowItWorksLocale
+  /**
+   * Three photos, in order: the tall one, the small one at the top and the one
+   * at the foot. Tablet shows the first two, Mobile the first. Missing ones are
+   * `muted` boxes.
+   * @default none: `muted` placeholders
+   */
+  photos?: HowItWorksPhoto[]
+}
+
+export function HowItWorksDiagonalPhotoCollage({ locale = "en", eyebrow, heading, description, habits, photos, className, ...props }: HowItWorksDiagonalPhotoCollageProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const rootRef = React.useRef<HTMLElement>(null)
+  const list = habits ?? copy.habits
+
+  useRevealOnEnter(rootRef, (node) => {
+    const started: Animation[] = []
+    revealTargets(node, "photo").forEach((photo, index) => {
+      const rest = getComputedStyle(photo).transform
+      const end = rest && rest !== "none" ? rest : "none"
+      started.push(enter(photo, [{ opacity: 0, transform: "translateY(24px)" }, { opacity: 1, transform: end }], { duration: 700, delay: (index % 3) * 100, easing: "cubic-bezier(0.16, 1, 0.3, 1)" }))
+    })
+    return started
+  })
+
+  return (
+    <HowItWorksSection ref={rootRef} labelledBy={headingId} className={className} {...props}>
+      <div className="flex flex-col gap-12 [@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-center [@container(min-width:64rem)]:gap-16">
+        {/* Desktop: the fanned collage. */}
+        <div aria-hidden="true" className="relative hidden h-[540px] w-[592px] shrink-0 [@container(min-width:64rem)]:block">
+          {COLLAGE.map((place, index) => (
+            <div
+              key={index}
+              data-reveal="photo"
+              className={cn("absolute overflow-hidden rounded-[10px] bg-muted", place.tilt)}
+              style={{ insetInlineStart: place.left, top: place.top, width: place.width, height: place.height }}
+            >
+              <HowItWorksImage photo={photos?.[index]} />
+            </div>
+          ))}
+        </div>
+        {/* Tablet: an untilted pair. Mobile: the first photo alone. */}
+        <div aria-hidden="true" className="grid grid-cols-1 gap-4 [@container(min-width:40rem)]:grid-cols-2 [@container(min-width:64rem)]:hidden">
+          {[0, 1].map((index) => (
+            <div key={index} data-reveal="photo" className={cn("relative h-60 overflow-hidden rounded-[10px] bg-muted [@container(min-width:40rem)]:h-[260px]", index === 1 && "hidden [@container(min-width:40rem)]:block")}>
+              <HowItWorksImage photo={photos?.[index]} />
+            </div>
+          ))}
+        </div>
+
+        <div className="flex min-w-0 flex-1 flex-col gap-8">
+          <HowItWorksHeader headingId={headingId} eyebrow={eyebrow ?? copy.eyebrow} heading={heading ?? copy.heading} description={description ?? copy.description} headingClassName="text-2xl [@container(min-width:40rem)]:text-2xl [@container(min-width:64rem)]:text-4xl" />
+          <ol className="flex flex-col">
+            {list.map((habit, index) => (
+              <li
+                key={habit.id}
+                className="group flex items-start gap-5 border-t border-border py-5 transition-transform duration-[180ms] last:border-b hover:translate-x-1 hover:[&:dir(rtl)]:-translate-x-1 motion-reduce:transition-none hover:motion-reduce:translate-x-0"
+              >
+                <span className="w-12 shrink-0 text-2xl font-light leading-8 text-muted-foreground transition-colors duration-[180ms] group-hover:text-primary motion-reduce:transition-none">
+                  <HowItWorksLtr>{String(index + 1).padStart(2, "0")}</HowItWorksLtr>
+                </span>
+                <div className="flex min-w-0 flex-col gap-1">
+                  <h3 className="text-lg font-medium text-foreground">{habit.title}</h3>
+                  <p className="text-sm text-muted-foreground">{habit.description}</p>
+                </div>
+              </li>
+            ))}
+          </ol>
+        </div>
+      </div>
+    </HowItWorksSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const howItWorksDiagonalPhotoCollageCopy = COPY

package/registry/blocks/how-it-works-diagonal-photo-collage/index.ts

@@ -0,0 +1,7 @@
+export {
+  HowItWorksDiagonalPhotoCollage,
+  howItWorksDiagonalPhotoCollageCopy,
+  type HowItWorksDiagonalHabit,
+  type HowItWorksDiagonalPhotoCollageCopy,
+  type HowItWorksDiagonalPhotoCollageProps,
+} from "./HowItWorksDiagonalPhotoCollage"

package/registry/blocks/how-it-works-fanned-dissolve-cards/HowItWorksFannedDissolveCards.tsx

@@ -0,0 +1,258 @@
+"use client"
+
+import * as React from "react"
+import { Clock, MapPin, MousePointer2 } from "lucide-react"
+import { Badge } from "../../ui/badge/badge"
+import { Progress } from "../../ui/progress/progress"
+import {
+  HOW_IT_WORKS_ICON,
+  enter,
+  HowItWorksFigures,
+  HowItWorksGlow,
+  HowItWorksSection,
+  revealTargets,
+  useRevealOnEnter,
+  type HowItWorksGlowTone,
+  type HowItWorksLocale,
+} from "../how-it-works/how-it-works"
+
+/*
+ * Figma: `How it Works` (42334:294272), Type=Fanned Dissolve Cards.
+ *
+ * A block on the inverted surface (`background-inverse`, with `foreground-inverse`
+ * text): a soft badge, the heading and a line, then three cards 500px tall. A
+ * card is a 300px scene on soft blurred glows, in theme tokens, above its number
+ * and title. The scenes are drawn here and hidden from screen readers: a place
+ * field, a route result with a bar, and a list of trips with their status.
+ *
+ * Each scene is pinned to Light, as Figma pins its Scene frames: it carries the
+ * `light` class, so the glows, the field and the floating cards inside it use
+ * the Light colours whether the page is Light or Dark. Nothing else is pinned;
+ * the section and the card text follow the mode.
+ *
+ * Desktop sets the cards three across with the middle one tilted -3°. Tablet and
+ * Mobile stack one card per row with no tilt, since a tilted card overflows a
+ * narrow column. The page's `dir` mirrors the order and turns the tilt to +3°, so
+ * the card still leans toward the start of reading.
+ *
+ * Motion plays once, when the block comes into view: the cards start stacked a
+ * little low and small and fan out to their places, 120ms apart; the place
+ * field types its text, the route bar fills to 20%, and the trip rows slide in
+ * 60ms apart. Hovering the row straightens the tilted card and
+ * lifts all three 4px. Under reduced motion the block is its finished state.
+ *
+ * Content limits: the heading up to 52 characters, the line up to 70. A card's
+ * title up to 24 characters.
+ */
+
+export type HowItWorksTripTone = "destructive" | "success" | "warning"
+
+export interface HowItWorksTrip {
+  name: React.ReactNode
+  status: React.ReactNode
+  tone: HowItWorksTripTone
+}
+
+export interface HowItWorksFannedDissolveCardsCopy {
+  /** The soft badge above the heading. */
+  badge: React.ReactNode
+  /** The heading, an `h2`. */
+  heading: React.ReactNode
+  description: React.ReactNode
+  /** The three cards' titles. The numbers are drawn from 01. */
+  titles: [React.ReactNode, React.ReactNode, React.ReactNode]
+  /** The words inside the scenes. */
+  scene: {
+    place: string
+    routeTitle: React.ReactNode
+    routeNote: React.ReactNode
+    short: React.ReactNode
+    long: React.ReactNode
+    /** The four trips of the third scene. */
+    trips: [HowItWorksTrip, HowItWorksTrip, HowItWorksTrip, HowItWorksTrip]
+  }
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<HowItWorksLocale, HowItWorksFannedDissolveCardsCopy> = {
+  en: {
+    badge: "How it works",
+    heading: "Three taps from where you are to where you are going.",
+    description: "Plan any trip in seconds and share it with whoever is coming along.",
+    titles: ["Start with a place", "Get the best route", "Compare a few trips"],
+    scene: {
+      place: "Central Station",
+      routeTitle: "Fastest route found",
+      routeNote: "18 minutes, with one change on the way.",
+      short: "Short",
+      long: "Long",
+      trips: [
+        { name: "Bus 42", status: "Delayed", tone: "destructive" },
+        { name: "Tram 7", status: "On time", tone: "success" },
+        { name: "Train 3", status: "Busy", tone: "warning" },
+        { name: "Bike lane", status: "Clear", tone: "success" },
+      ],
+    },
+  },
+  ar: {
+    badge: "كيف يعمل",
+    heading: "ثلاث نقرات من موقعك إلى وجهتك.",
+    description: "خطّط لأي رحلة في ثوانٍ وشاركها مع من سيرافقك.",
+    titles: ["ابدأ بمكان", "احصل على أفضل مسار", "قارن بين عدة رحلات"],
+    scene: {
+      place: "المحطة المركزية",
+      routeTitle: "تم العثور على أسرع مسار",
+      routeNote: "18 دقيقة مع تبديل واحد في الطريق.",
+      short: "قصير",
+      long: "طويل",
+      trips: [
+        { name: "الحافلة 42", status: "متأخرة", tone: "destructive" },
+        { name: "الترام 7", status: "في الموعد", tone: "success" },
+        { name: "القطار 3", status: "مزدحم", tone: "warning" },
+        { name: "مسار الدراجات", status: "خالٍ", tone: "success" },
+      ],
+    },
+  },
+}
+
+const GLOW_SETS: [HowItWorksGlowTone, HowItWorksGlowTone, HowItWorksGlowTone][] = [
+  ["chart-4", "chart-1", "chart-5"],
+  ["info", "chart-2", "chart-3"],
+  ["chart-2", "success", "info"],
+]
+/** The glows in a 393 × 300 scene: Figma's three, as left, top, width, height and strength. */
+const GLOWS = [
+  { x: 0, y: 0, w: 353, h: 283, strength: 0.55 },
+  { x: 157, y: 77, w: 353, h: 283, strength: 0.5 },
+  { x: -59, y: 155, w: 275, h: 220, strength: 0.4 },
+] as const
+export interface HowItWorksFannedDissolveCardsProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<HowItWorksFannedDissolveCardsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: HowItWorksLocale
+}
+
+export function HowItWorksFannedDissolveCards({ locale = "en", badge, heading, description, titles, scene, className, ...props }: HowItWorksFannedDissolveCardsProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const rootRef = React.useRef<HTMLElement>(null)
+  const names = titles ?? copy.titles
+  const words = scene ?? copy.scene
+
+  useRevealOnEnter(rootRef, (node) => {
+    const started: Animation[] = []
+    revealTargets(node, "card").forEach((card, index) => {
+      const delay = index * 120
+      const rest = getComputedStyle(card).transform
+      const end = rest && rest !== "none" ? rest : "none"
+      started.push(enter(card, [{ opacity: 0, transform: "translateY(24px) scale(0.96)" }, { opacity: 1, transform: end }], { duration: 520, delay, easing: "cubic-bezier(0.16, 1, 0.3, 1)" }))
+      Array.from(card.querySelectorAll<HTMLElement>('[data-reveal="row"]')).forEach((row, i) =>
+        started.push(enter(row, [{ opacity: 0, transform: "translateX(-12px)" }, { opacity: 1, transform: "none" }], { duration: 300, delay: delay + 500 + i * 60 }))
+      )
+      const rtl = getComputedStyle(card).direction === "rtl"
+      Array.from(card.querySelectorAll<HTMLElement>('[data-reveal="type"]')).forEach((text) =>
+        started.push(enter(text, [{ clipPath: rtl ? "inset(0 0 0 100%)" : "inset(0 100% 0 0)" }, { clipPath: "inset(0 0 0 0)" }], { duration: 700, delay: delay + 450, easing: "steps(14, end)" }))
+      )
+      Array.from(card.querySelectorAll<HTMLElement>('[data-reveal="bar"]')).forEach((bar) =>
+        started.push(enter(bar, [{ clipPath: rtl ? "inset(0 0 0 100%)" : "inset(0 100% 0 0)" }, { clipPath: "inset(0 0 0 0)" }], { duration: 600, delay: delay + 500 }))
+      )
+    })
+    return started
+  })
+
+  const stripe = "relative flex flex-col overflow-hidden rounded-3xl border border-muted-foreground bg-foreground text-foreground-inverse"
+  return (
+    <HowItWorksSection ref={rootRef} labelledBy={headingId} className={`bg-background-inverse ${className ?? ""}`} {...props}>
+      <header className="flex w-full flex-col items-start gap-4">
+        <Badge variant="soft" tone="info" size="md" radius="rounded">
+          {badge ?? copy.badge}
+        </Badge>
+        <h2 id={headingId} className="text-3xl font-medium text-foreground-inverse [@container(min-width:40rem)]:text-4xl [@container(min-width:64rem)]:text-5xl">
+          {heading ?? copy.heading}
+        </h2>
+        <p className="text-base text-muted-foreground-inverse">{description ?? copy.description}</p>
+      </header>
+
+      <ol className="group/cards grid grid-cols-1 gap-6 [@container(min-width:64rem)]:grid-cols-3 [@container(min-width:64rem)]:gap-8 [@container(min-width:64rem)]:py-8">
+        {[0, 1, 2].map((index) => (
+          <li
+            key={index}
+            data-reveal="card"
+            className={`${stripe} h-[500px] min-w-0 transition-transform duration-300 ease-out group-hover/cards:-translate-y-1 motion-reduce:transition-none ${
+              index === 1 ? "[@container(min-width:64rem)]:-rotate-3 [@container(min-width:64rem)]:[&:dir(rtl)]:rotate-3 [@container(min-width:64rem)]:group-hover/cards:rotate-0" : ""
+            }`}
+          >
+            <div aria-hidden="true" data-pinned="light" className="light relative flex text-foreground h-[300px] shrink-0 items-center justify-center overflow-hidden bg-accent">
+              {GLOWS.map((glow, g) => (
+                <HowItWorksGlow
+                  key={g}
+                  tone={GLOW_SETS[index]?.[g] ?? "chart-1"}
+                  strength={glow.strength}
+                  style={{ insetInlineStart: glow.x, top: glow.y, width: glow.w, height: glow.h, opacity: glow.strength }}
+                />
+              ))}
+
+              {index === 0 ? (
+                <>
+                  <div className="absolute start-6 top-[70px] flex items-center gap-2 rounded-[10px] border border-border bg-card px-4 py-3 text-sm text-foreground">
+                    <MapPin size={18} {...HOW_IT_WORKS_ICON} className="shrink-0" />
+                    <span data-reveal="type" className="whitespace-nowrap">
+                      {words.place}
+                    </span>
+                  </div>
+                  <MousePointer2 size={26} {...HOW_IT_WORKS_ICON} className="absolute end-16 top-[104px] fill-background text-foreground" />
+                </>
+              ) : null}
+              {index === 1 ? (
+                <div className="relative flex w-[84%] flex-col gap-3 rounded-[14px] bg-card p-4 text-foreground">
+                  <div className="flex items-center gap-2 text-sm font-medium">
+                    <Clock size={20} {...HOW_IT_WORKS_ICON} className="shrink-0" />
+                    <span className="min-w-0">{words.routeTitle}</span>
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    <HowItWorksFigures>{words.routeNote}</HowItWorksFigures>
+                  </p>
+                  <div data-reveal="bar">
+                    <Progress value={20} size="md" showPercentage={false} aria-label={typeof words.routeTitle === "string" ? words.routeTitle : undefined} />
+                  </div>
+                  <div className="flex justify-between text-xs text-muted-foreground">
+                    <span>{words.short}</span>
+                    <span>{words.long}</span>
+                  </div>
+                </div>
+              ) : null}
+              {index === 2 ? (
+                <div className="relative flex w-[86%] flex-col gap-2 rounded-[14px] bg-card p-3 text-foreground">
+                  {words.trips.map((trip, row) => (
+                    <div key={row} data-reveal="row" className="flex items-center justify-between gap-2 text-xs">
+                      <span className="flex min-w-0 items-center gap-2">
+                        <MapPin size={14} {...HOW_IT_WORKS_ICON} className="shrink-0" />
+                        <span className="min-w-0 truncate">
+                          <HowItWorksFigures>{trip.name}</HowItWorksFigures>
+                        </span>
+                      </span>
+                      <Badge variant="soft" tone={trip.tone} size="sm" radius="rounded">
+                        {trip.status}
+                      </Badge>
+                    </div>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+            <div className="flex flex-1 flex-col justify-end gap-3 p-6">
+              <span className="text-xs text-muted-foreground-inverse">
+                <HowItWorksFigures>{`0${index + 1}`}</HowItWorksFigures>
+              </span>
+              <h3 className="text-2xl font-medium text-foreground-inverse">{names[index]}</h3>
+            </div>
+          </li>
+        ))}
+      </ol>
+    </HowItWorksSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const howItWorksFannedDissolveCardsCopy = COPY

package/registry/blocks/how-it-works-fanned-dissolve-cards/index.ts

@@ -0,0 +1,8 @@
+export {
+  HowItWorksFannedDissolveCards,
+  howItWorksFannedDissolveCardsCopy,
+  type HowItWorksFannedDissolveCardsCopy,
+  type HowItWorksFannedDissolveCardsProps,
+  type HowItWorksTrip,
+  type HowItWorksTripTone,
+} from "./HowItWorksFannedDissolveCards"