@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/social-proof-vertical-column-wall/SocialProofVerticalColumnWall.tsx

@@ -0,0 +1,220 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import {
+  SocialProofAuthor,
+  SocialProofHeader,
+  SocialProofQuote,
+  SocialProofSection,
+  SocialProofStars,
+  WALL_DRIFT_SPEED,
+  driftDuration,
+  toColumns,
+  useCanDrift,
+  useColumnCount,
+  useDrift,
+  useRevealOnce,
+  type SocialProofLocale,
+  type SocialProofPerson,
+  type SocialProofPhotos,
+} from "../social-proof/social-proof"
+
+/*
+ * Figma: `Social Proof` (46368:3361), Type=Vertical Column Wall.
+ *
+ * A centred header over a wall of twelve short quotes in columns, set at
+ * different heights inside a fixed stage that crops the cards at its top and
+ * bottom edge by design. Desktop shows three columns of four, the columns
+ * raised 70, 20 and 110px; Tablet two columns of six, the cards dealt into
+ * them in turn; phones one column in a 520px stage, which shows the first few.
+ *
+ * Motion (Figma's ⚡ Motion note): the columns drift vertically on their own
+ * and loop without a seam: the outer columns climb and the middle one falls
+ * (on Tablet the first column climbs and the second falls; on phones the one
+ * column climbs), linear, at a reading speed rather than a fixed time: about
+ * 42px per second for the outer columns and 38 for the middle one
+ * (`WALL_DRIFT_SPEED`), so a loop lasts its distance over that speed. Every
+ * column holds its cards again, twice, below its own, the repeats hidden from
+ * assistive technology and out of the Tab order, so the wrap is invisible. It runs only while the wall is
+ * in the viewport, pauses while the pointer is over it or focus is inside it,
+ * and stands still with reduced motion. The first time the wall enters the
+ * viewport the cards also fade in once, 60ms apart (fadeIn with the stagger
+ * preset, 180ms each); with reduced motion they fade in together, opacity
+ * only, in 120ms. The stage still crops the cards at its top and bottom edge.
+ * In RTL the column order mirrors and the vertical directions do not change.
+ */
+
+export interface SocialProofVerticalColumnWallItem {
+  /** One or two lines: up to about 63 characters in English, 68 in Arabic. */
+  quote: React.ReactNode
+  author: SocialProofPerson
+}
+
+export interface SocialProofVerticalColumnWallCopy {
+  heading: React.ReactNode
+  description: React.ReactNode
+  /** The cards, in reading order. Twelve: the stage's crop is set for twelve. */
+  items: SocialProofVerticalColumnWallItem[]
+}
+
+const p = (id: string, name: string, role: string): SocialProofPerson => ({ id, name, role })
+
+/** Figma's copy, English and Arabic. Every person and company is invented. */
+const COPY: Record<SocialProofLocale, SocialProofVerticalColumnWallCopy> = {
+  en: {
+    heading: "What teams tell us",
+    description: "Notes from customers, in their own words.",
+    items: [
+      { quote: "“Rolled out across four product lines in one sprint.”", author: p("sami-naji", "Sami Naji", "Product Lead, Nimbus Labs") },
+      { quote: "“Even legal liked the docs. I checked twice.”", author: p("tariq-zaki", "Tariq Zaki", "Head of Product, Marlow HR") },
+      { quote: "“Handoff is finally boring — the highest compliment I have.”", author: p("rashed-al-amri", "Rashed Al-Amri", "Design Ops, Willow & Co") },
+      { quote: "“We deleted forty thousand lines of UI code.”", author: p("bader-al-ghamdi", "Bader Al-Ghamdi", "CTO, Beacon Analytics") },
+      { quote: "“Eleven days for a full rebrand across three surfaces.”", author: p("fahad-salem", "Fahad Salem", "Brand Director, Arvenna Bank") },
+      { quote: "“The grid means the same thing in Figma and prod.”", author: p("khalid-saad", "Khalid Saad", "Frontend Lead, Atlas Freight") },
+      { quote: "“Investors asked who did our rebrand. It was Tuesday.”", author: p("ziad-karam", "Ziad Karam", "CEO, Quillfield") },
+      { quote: "“UI-debt items quietly vanished from our retros.”", author: p("omar-haddad", "Omar Haddad", "VP Engineering, Cobalt Systems") },
+      { quote: "“Contrast ratios stopped being a conversation entirely.”", author: p("majed-nouri", "Majed Nouri", "COO, Arcadia Health") },
+      { quote: "“Accessible by default, themable in an afternoon.”", author: p("hani-jaber", "Hani Jaber", "Staff Engineer, Clearfen") },
+      { quote: "“Our dashboards finally match our brand energy.”", author: p("yousef-amin", "Yousef Amin", "Co-founder, Halcyon Games") },
+      { quote: "“Slots where you want slots, variants where you want variants.”", author: p("adel-qasim", "Adel Qasim", "Head of Design, Forma Studio") },
+    ],
+  },
+  ar: {
+    heading: "ما تقوله الفرق عنّا",
+    description: "كلمات من عملائنا كما كتبوها.",
+    items: [
+      { quote: "«أطلقناها في أربعة خطوط منتجات في سبرنت واحد.»", author: p("sami-naji", "سامي ناجي", "قائد المنتج، نيمبوس لابس") },
+      { quote: "«حتى الفريق القانوني أعجبه التوثيق، وتأكدت من ذلك مرتين.»", author: p("tariq-zaki", "طارق زكي", "رئيس المنتج، مارلو إتش آر") },
+      { quote: "«صار تسليم التصاميم للمطورين روتينيًا أخيرًا، وهذا أكبر مديح عندي.»", author: p("rashed-al-amri", "راشد العمري", "عمليات التصميم، ويلو آند كو") },
+      { quote: "«حذفنا أربعين ألف سطر من شيفرة الواجهات.»", author: p("bader-al-ghamdi", "بدر الغامدي", "الرئيس التقني، بيكون أناليتكس") },
+      { quote: "«أعدنا بناء هويتنا كاملة على ثلاث منصات في أحد عشر يومًا.»", author: p("fahad-salem", "فهد سالم", "مدير العلامة التجارية، بنك أرفينا") },
+      { quote: "«للشبكة المعنى نفسه في Figma وفي المنتج المنشور.»", author: p("khalid-saad", "خالد سعد", "قائد الواجهات الأمامية، أطلس فريت") },
+      { quote: "«سأل المستثمرون عمّن صمّم هويتنا الجديدة. أنجزناها في يوم عمل عادي.»", author: p("ziad-karam", "زياد كرم", "الرئيس التنفيذي، كويلفيلد") },
+      { quote: "«اختفت بنود الدَّين التقني للواجهات من اجتماعات المراجعة بهدوء.»", author: p("omar-haddad", "عمر حداد", "نائب رئيس الهندسة، كوبالت سيستمز") },
+      { quote: "«لم تعد نسب التباين موضوع نقاش على الإطلاق.»", author: p("majed-nouri", "ماجد نوري", "الرئيس التنفيذي للعمليات، أركاديا هيلث") },
+      { quote: "«إمكانية الوصول مدمجة من البداية، وتغيير السمات في نصف يوم.»", author: p("hani-jaber", "هاني جابر", "مهندس أول، كليرفين") },
+      { quote: "«لوحاتنا تطابق أخيرًا روح علامتنا.»", author: p("yousef-amin", "يوسف أمين", "شريك مؤسس، هالسيون غيمز") },
+      { quote: "«مواضع حيث تحتاج المواضع، وأنماط حيث تحتاج الأنماط.»", author: p("adel-qasim", "عادل قاسم", "رئيس التصميم، فورما ستوديو") },
+    ],
+  },
+}
+
+/** How far each column is raised inside the stage, per column count, as Figma sets them. */
+const RAISE: Record<number, string[]> = {
+  1: ["-mt-[40px]"],
+  2: ["-mt-[70px]", "-mt-[20px]"],
+  3: ["-mt-[70px]", "-mt-[20px]", "-mt-[110px]"],
+}
+
+export interface SocialProofVerticalColumnWallProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<SocialProofVerticalColumnWallCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: SocialProofLocale
+  /** Avatar photos by person id. Without them the avatars show initials. */
+  photos?: SocialProofPhotos
+}
+
+/** The gap between a column's cards, `gap-5`, which the loop's distance includes. */
+const CARD_GAP = 20
+/**
+ * Copies of its cards a column holds after its own. One is not enough: a
+ * raised column (up to 110px) is shorter than the stage plus the raise, so at
+ * the end of a loop its bottom edge would run dry.
+ */
+const REPEATS = 2
+
+export function SocialProofVerticalColumnWall({
+  locale = "en",
+  heading,
+  description,
+  items,
+  photos,
+  className,
+  ...props
+}: SocialProofVerticalColumnWallProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = items ?? copy.items
+  const [stageRef, columnCount] = useColumnCount<HTMLDivElement>()
+  const revealRef = useRevealOnce<HTMLDivElement>()
+  const columns = toColumns(list.map((item, index) => ({ item, index })), columnCount)
+  const canDrift = useCanDrift()
+  const driftRef = useDrift<HTMLDivElement>(
+    (root) =>
+      Array.from(root.querySelectorAll<HTMLElement>("[data-drift]")).flatMap((column, columnIndex) => {
+        const first = column.firstElementChild as HTMLElement | null
+        if (!first || typeof column.animate !== "function") return []
+        // One copy's height and the gap before the repeat: moving that far puts the repeat where the first copy began.
+        // Measured, not `offsetHeight`, which rounds: a fraction of a pixel would show as a jump at the wrap.
+        const distance = first.getBoundingClientRect().height + CARD_GAP
+        // The middle column (the second of two or three) runs the other way, a little slower.
+        const middle = columnCount > 1 && columnIndex === 1
+        return [
+          column.animate([{ transform: "translateY(0)" }, { transform: `translateY(${-distance}px)` }], {
+            duration: driftDuration(distance, middle ? WALL_DRIFT_SPEED.middle : WALL_DRIFT_SPEED.outer),
+            iterations: Infinity,
+            easing: "linear",
+            direction: middle ? "reverse" : "normal",
+          }),
+        ]
+      }),
+    [columnCount, canDrift]
+  )
+
+  return (
+    <SocialProofSection
+      labelledBy={headingId}
+      className={cn("lg:px-24", className)}
+      contentClassName="max-w-[1248px] gap-10"
+      {...props}
+    >
+      <SocialProofHeader
+        headingId={headingId}
+        heading={heading ?? copy.heading}
+        description={description === undefined ? copy.description : description}
+        className="gap-3"
+      />
+      <div ref={driftRef} className="w-full">
+        <div ref={revealRef} className="w-full">
+          <div ref={stageRef} className="flex h-[520px] w-full gap-6 overflow-hidden [@container(min-width:40rem)]:h-[560px]">
+            {columns.map((column, columnIndex) => (
+              <div key={columnIndex} data-drift="" className={cn("flex min-w-0 flex-1 flex-col gap-5", RAISE[columns.length]?.[columnIndex])}>
+                {[false, ...(canDrift ? Array.from({ length: REPEATS }, () => true) : [])].map((repeat, copy) => (
+                  <ul
+                    key={copy}
+                    // The repeat is only there for the loop: hidden from assistive technology and out of the Tab order.
+                    aria-hidden={repeat || undefined}
+                    ref={repeat ? (el) => el?.setAttribute("inert", "") : undefined}
+                    className="m-0 flex list-none flex-col gap-5 p-0"
+                  >
+                    {column.map(({ item, index }) => (
+                      <li
+                        key={index}
+                        {...(repeat ? {} : { "data-reveal": "" })}
+                        className="rounded-lg bg-card p-5 ring-1 ring-inset ring-border forced-colors:border"
+                      >
+                        <figure className="m-0 flex flex-col gap-3">
+                          <SocialProofStars locale={locale} />
+                          <SocialProofQuote quote={item.quote} className="text-sm text-foreground" />
+                          <SocialProofAuthor person={item.author} photos={photos} gap="2.5" avatarClassName="size-7" />
+                        </figure>
+                      </li>
+                    ))}
+                  </ul>
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </SocialProofSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const socialProofVerticalColumnWallCopy = COPY

package/registry/blocks/social-proof-vertical-column-wall/index.ts

@@ -0,0 +1,7 @@
+export {
+  SocialProofVerticalColumnWall,
+  socialProofVerticalColumnWallCopy,
+  type SocialProofVerticalColumnWallCopy,
+  type SocialProofVerticalColumnWallProps,
+  type SocialProofVerticalColumnWallItem,
+} from "./SocialProofVerticalColumnWall"

package/registry/blocks/social-proof-video-story-cards/SocialProofVideoStoryCards.tsx

@@ -0,0 +1,177 @@
+"use client"
+
+import * as React from "react"
+import { Play, X } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Button, buttonVariants } from "../../ui/button/button"
+import {
+  Isolated,
+  SocialProofPhoto,
+  SocialProofSection,
+  useVideoPlayback,
+  type SocialProofLocale,
+  type SocialProofPhotos,
+} from "../social-proof/social-proof"
+
+/*
+ * Figma: `Social Proof` (46368:3361), Type=Video Story Cards.
+ *
+ * A header with a `See more stories` button (Outline, rounded) at its end,
+ * over two video cards 420px tall (side by side on Desktop and Tablet,
+ * stacked on phones). Each card is a photo under a 50% dark scrim, with the
+ * play button (Icon Button, 40px, Secondary) over the story's name, its role,
+ * company and running time, and a quote at the foot.
+ *
+ * Motion (Figma's ⚡ Motion note): the play button starts a story only when
+ * the reader clicks or taps it: no hover preview, no autoplay and no pulse.
+ * On click the card swaps its photo for the video with a fade (fadeIn,
+ * 180ms). Reduced motion: opacity only, 120ms. In RTL the card order mirrors
+ * and the play glyph is not mirrored.
+ *
+ * Figma shows the poster state only. The playing state is the block's: the
+ * video fills the card with its own controls, and a close button at the
+ * card's end stops it and brings the poster back. A story plays when you pass
+ * its `videoSrc`; without one the card is a still, with the button disabled.
+ * Cards are independent: starting one does not stop the other.
+ */
+
+export interface SocialProofVideoStory {
+  /** The key in `photos` for the poster. */
+  id: string
+  /** `Rashed's Story`: the person's first name and `Story`. */
+  title: React.ReactNode
+  /** Role, company and running time, as Figma sets them. */
+  meta: React.ReactNode
+  /** About 110 characters on Desktop in English and 90 in Arabic; about 80 on Tablet and Mobile in both. */
+  quote: React.ReactNode
+  /** The video. Without it the card shows its poster only. */
+  videoSrc?: string
+  /** The file's media type, such as "video/mp4". */
+  videoType?: string
+}
+
+export interface SocialProofVideoStoryCardsCopy {
+  /** Up to 46 characters in English, 40 in Arabic. */
+  heading: React.ReactNode
+  /** Up to 128 characters in English, 125 in Arabic. */
+  description: React.ReactNode
+  /** Up to 25 characters in English, 26 in Arabic. */
+  button: React.ReactNode
+  /** The stories, in reading order: two. */
+  items: SocialProofVideoStory[]
+}
+
+const COPY: Record<SocialProofLocale, SocialProofVideoStoryCardsCopy> = {
+  en: {
+    heading: "Customer stories, on camera",
+    description: "Fasla is changing how thousands of teams ship.",
+    button: "See more stories",
+    items: [
+      { id: "video-story-rashed", title: "Rashed's Story", meta: "Design Ops · Willow & Co  ·  2:14", quote: "“Fasla gives me all the right defaults so I can focus on the decisions that matter.”" },
+      { id: "video-story-omar", title: "Omar's Story", meta: "VP Engineering · Cobalt Systems  ·  3:02", quote: "“I feel genuinely confident shipping UI without a design review in the loop.”" },
+    ],
+  },
+  ar: {
+    heading: "قصص العملاء بالصوت والصورة",
+    description: "فاصلة تغيّر طريقة إطلاق آلاف الفرق لمنتجاتها.",
+    button: "اعرض المزيد من القصص",
+    items: [
+      { id: "video-story-rashed", title: "قصة راشد", meta: "عمليات التصميم، ويلو آند كو، 2:14", quote: "«تمنحني فاصلة كل الإعدادات الافتراضية الصحيحة لأركّز على القرارات المهمة.»" },
+      { id: "video-story-omar", title: "قصة عمر", meta: "نائب رئيس الهندسة، كوبالت سيستمز، 3:02", quote: "«أُطلق الواجهات بثقة تامة دون انتظار مراجعة التصميم.»" },
+    ],
+  },
+}
+
+function VideoCard({ story, locale, photos }: { story: SocialProofVideoStory; locale: SocialProofLocale; photos?: SocialProofPhotos }) {
+  const { videoRef, playRef, started, play, stop, labels, available } = useVideoPlayback(story.videoSrc, locale)
+  const titleId = React.useId()
+  const poster = photos?.[story.id]
+  return (
+    <article
+      aria-labelledby={titleId}
+      className="relative isolate flex min-h-[200px] min-w-0 flex-col gap-6 [@container(min-width:40rem)]:h-[300px] [@container(min-width:40rem)]:flex-1 [@container(min-width:64rem)]:h-[420px] items-center justify-between overflow-hidden rounded-xl bg-muted px-6 py-8 text-center [@container(min-width:40rem)]:px-12"
+    >
+      {started && story.videoSrc ? (
+        <video ref={videoRef} controls playsInline preload="metadata" aria-labelledby={titleId} className="absolute inset-0 -z-10 size-full bg-background-inverse object-contain">
+          <source src={story.videoSrc} type={story.videoType} />
+        </video>
+      ) : (
+        <>
+          <SocialProofPhoto src={poster} className="absolute inset-0 -z-20" />
+          <div aria-hidden className="absolute inset-0 -z-10 bg-backdrop-overlay" />
+        </>
+      )}
+      {started ? (
+        <Button type="button" variant="secondary" size="icon-md" radius="rounded" aria-label={labels.stop} onClick={stop} className="absolute end-3 top-3">
+          <X aria-hidden />
+        </Button>
+      ) : (
+        <>
+          <div className="flex flex-1 flex-col items-center justify-center gap-3 text-foreground-inverse dark:text-foreground">
+            <Button ref={playRef} type="button" variant="secondary" size="icon-md" radius="rounded" aria-label={labels.play} aria-describedby={titleId} aria-disabled={available ? undefined : true} onClick={play}>
+              <Play aria-hidden fill="currentColor" />
+            </Button>
+            <h3 id={titleId} className="text-lg font-semibold">
+              {story.title}
+            </h3>
+            <p className="text-xs opacity-85">
+              <Isolated>{story.meta}</Isolated>
+            </p>
+          </div>
+          <blockquote className="m-0 max-w-[500px] text-sm font-medium text-foreground-inverse dark:text-foreground">
+            <p>
+              <Isolated>{story.quote}</Isolated>
+            </p>
+          </blockquote>
+        </>
+      )}
+      {started ? (
+        <h3 id={titleId} className="sr-only">
+          {story.title}
+        </h3>
+      ) : null}
+    </article>
+  )
+}
+
+export interface SocialProofVideoStoryCardsProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<SocialProofVideoStoryCardsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: SocialProofLocale
+  /** Posters by each story's `id`. Without one the card shows its `muted` ground. */
+  photos?: SocialProofPhotos
+  /** Where the header button goes. */
+  href?: string
+}
+
+export function SocialProofVideoStoryCards({ locale = "en", heading, description, button, items, photos, href = "#", className, ...props }: SocialProofVideoStoryCardsProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  return (
+    <SocialProofSection labelledBy={headingId} className={className} contentClassName="items-stretch gap-10" {...props}>
+      <header className="flex w-full flex-col items-start gap-4 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center [@container(min-width:40rem)]:justify-between [@container(min-width:40rem)]:gap-6">
+        <div className="flex min-w-0 flex-col gap-1.5">
+          <h2 id={headingId} className="text-2xl font-semibold text-foreground [@container(min-width:40rem)]:text-3xl">
+            {heading ?? copy.heading}
+          </h2>
+          <p className="text-base text-muted-foreground">{description ?? copy.description}</p>
+        </div>
+        <a href={href} className={buttonVariants({ variant: "outline", radius: "rounded", className: "shrink-0" })}>
+          {button ?? copy.button}
+        </a>
+      </header>
+      <div className={cn("flex w-full flex-col gap-6 [@container(min-width:40rem)]:flex-row")}>
+        {(items ?? copy.items).map((story) => (
+          <VideoCard key={story.id} story={story} locale={locale} photos={photos} />
+        ))}
+      </div>
+    </SocialProofSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const socialProofVideoStoryCardsCopy = COPY

package/registry/blocks/social-proof-video-story-cards/index.ts

@@ -0,0 +1,7 @@
+export {
+  SocialProofVideoStoryCards,
+  socialProofVideoStoryCardsCopy,
+  type SocialProofVideoStory,
+  type SocialProofVideoStoryCardsCopy,
+  type SocialProofVideoStoryCardsProps,
+} from "./SocialProofVideoStoryCards"