@rizom/ui 0.2.0-alpha.39 → 0.2.0-alpha.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rizom/ui",
-  "version": "0.2.0-alpha.39",
+  "version": "0.2.0-alpha.41",
   "description": "Shared Rizom UI primitives for app-owned Rizom site variants.",
   "type": "module",
   "main": "./src/index.ts",

package/src/Ecosystem.tsx

@@ -0,0 +1,108 @@
+import type { JSX } from "preact";
+import { Section } from "./Section";
+import { Wordmark } from "./Wordmark";
+import { renderHighlightedText } from "./highlighted-text";
+import type { RizomBrandSuffix } from "./types";
+
+const HIGHLIGHT_CLS = "italic text-accent font-normal";
+
+export interface EcosystemCard {
+  suffix: RizomBrandSuffix;
+  title: string;
+  body: string;
+  linkLabel: string;
+  linkHref: string;
+}
+
+export interface EcosystemContent {
+  eyebrow: string;
+  headline: string;
+  cards: EcosystemCard[];
+}
+
+const HERE_LABEL = "You are here";
+
+const ROLE_COLOR: Record<RizomBrandSuffix, string> = {
+  work: "text-accent",
+  foundation: "text-secondary",
+  ai: "text-accent-bright",
+};
+
+const BORDER_COLOR: Record<RizomBrandSuffix, string> = {
+  work: "border-t-accent/60",
+  foundation: "border-t-secondary/60",
+  ai: "border-t-accent-bright/60",
+};
+
+const HOVER_BORDER: Record<RizomBrandSuffix, string> = {
+  work: "hover:border-t-accent",
+  foundation: "hover:border-t-secondary",
+  ai: "hover:border-t-accent-bright",
+};
+
+const ROLE_CLS = "font-label text-[10.5px] uppercase tracking-[0.26em] mt-1";
+const TAGLINE_CLS = "font-body text-[15px] leading-[1.6] text-theme-muted mt-2";
+const LINK_CLS =
+  "font-label text-[10.5px] uppercase tracking-[0.22em] text-theme-muted self-start mt-[18px] pb-1 border-b border-white/10 transition-colors hover:text-theme";
+const HERE_CLS =
+  "font-label text-[10.5px] uppercase tracking-[0.22em] text-accent self-start mt-[18px] pb-1";
+
+const Card = ({ card }: { card: EcosystemCard }): JSX.Element => {
+  const isHere = card.linkLabel === HERE_LABEL;
+  const isDisabled = card.linkHref.trim().length === 0;
+  const inner = (
+    <>
+      <Wordmark
+        brandSuffix={card.suffix}
+        className="text-[clamp(28px,3vw,40px)] [font-variation-settings:'opsz'_96]"
+      />
+      <span className={`${ROLE_CLS} ${ROLE_COLOR[card.suffix]}`}>
+        {card.title}
+      </span>
+      <p className={TAGLINE_CLS}>{card.body}</p>
+      {isHere ? (
+        <span className={HERE_CLS}>{card.linkLabel}</span>
+      ) : (
+        <span className={LINK_CLS}>{card.linkLabel}</span>
+      )}
+    </>
+  );
+  const baseClass = `flex flex-col gap-[14px] border-t pt-7 ${
+    isHere ? BORDER_COLOR[card.suffix] : "border-white/10"
+  }`;
+  return isHere || isDisabled ? (
+    <div className={baseClass}>{inner}</div>
+  ) : (
+    <a
+      href={card.linkHref}
+      className={`${baseClass} text-inherit no-underline transition-colors ${HOVER_BORDER[card.suffix]}`}
+    >
+      {inner}
+    </a>
+  );
+};
+
+export const Ecosystem = ({
+  eyebrow,
+  headline,
+  cards,
+}: EcosystemContent): JSX.Element => (
+  <Section
+    id="ecosystem"
+    className="pt-[112px] pb-[144px] border-t border-white/5"
+  >
+    <div className="mx-auto mb-[88px] max-w-[1180px] text-center">
+      <span className="font-label text-[11px] font-semibold uppercase tracking-[0.24em] text-accent">
+        {eyebrow}
+      </span>
+      <h2 className="mt-5 font-display text-[clamp(34px,4.4vw,60px)] font-[380] leading-[1.04] tracking-[-0.02em] [font-variation-settings:'opsz'_96]">
+        {renderHighlightedText(headline, HIGHLIGHT_CLS)}
+      </h2>
+    </div>
+    <div className="mx-auto grid max-w-[1180px] grid-cols-3 gap-16 max-[768px]:grid-cols-1 max-[768px]:gap-7">
+      {cards.map((card) => (
+        <Card key={card.suffix} card={card} />
+      ))}
+    </div>
+  </Section>
+);

package/src/Footer.tsx

@@ -2,6 +2,7 @@ import type { JSX } from "preact";
 import { cn } from "./cn";
 import type { RizomBrandSuffix, RizomFooterTagline, RizomLink } from "./types";
 import { GUTTER } from "./Section";
+import { Wordmark } from "./Wordmark";
 
 const LINK_CLS =
   "text-label-md text-theme-light hover:text-theme transition-colors";
@@ -32,11 +33,7 @@ export const Footer = ({
   >
     <div className="flex flex-col items-center gap-1.5 md:items-start max-w-[560px]">
       <div className="flex flex-col items-center gap-1.5 md:flex-row md:items-center md:gap-3">
-        <span className="font-nav text-[15px]">
-          <span className="font-bold">rizom</span>
-          <span className="font-bold text-accent">.</span>
-          <span className="text-theme-muted">{brandSuffix}</span>
-        </span>
+        <Wordmark brandSuffix={brandSuffix} className="text-[16px]" />
         <span className="text-label-md text-theme-light">{metaLabel}</span>
       </div>
       {tagline ? (

package/src/Header.tsx

@@ -1,5 +1,6 @@
 import type { JSX } from "preact";
 import type { RizomBrandSuffix, RizomLink } from "./types";
+import { Wordmark } from "./Wordmark";
 
 const LINK_CLS =
   "hidden md:inline-block font-body text-[15px] text-theme-muted hover:text-theme transition-colors relative py-1 after:content-[''] after:absolute after:left-0 after:bottom-0 after:h-px after:w-0 after:bg-accent after:transition-all after:duration-300 hover:after:w-full";
@@ -16,11 +17,7 @@ export const Header = ({
   primaryCta,
 }: HeaderProps): JSX.Element => (
   <nav className="fixed top-0 left-0 right-0 z-[100] flex items-center justify-between bg-nav-fade px-6 py-4 backdrop-blur-[8px] md:px-10 md:py-5 xl:px-20">
-    <div className="flex items-center gap-0 font-nav text-[20px]">
-      <span className="font-bold text-theme">rizom</span>
-      <span className="font-bold text-accent">.</span>
-      <span className="text-theme-muted">{brandSuffix}</span>
-    </div>
+    <Wordmark brandSuffix={brandSuffix} className="text-[22px]" />
     <div className="flex items-center gap-3 md:gap-8">
       {navLinks.map((link) => (
         <a key={link.href} href={link.href} className={LINK_CLS}>

package/src/Wordmark.tsx

@@ -0,0 +1,32 @@
+import type { JSX } from "preact";
+import { cn } from "./cn";
+import type { RizomBrandSuffix } from "./types";
+
+export interface WordmarkProps {
+  brandSuffix: RizomBrandSuffix;
+  className?: string;
+  dotClassName?: string;
+}
+
+const DOT_BY_SUFFIX: Record<RizomBrandSuffix, string> = {
+  work: "text-accent",
+  foundation: "text-secondary",
+  ai: "text-accent-bright",
+};
+
+export const Wordmark = ({
+  brandSuffix,
+  className,
+  dotClassName,
+}: WordmarkProps): JSX.Element => (
+  <span
+    className={cn(
+      "inline-flex items-baseline gap-0 font-display font-medium tracking-[-0.015em] [font-variation-settings:'opsz'_24]",
+      className,
+    )}
+  >
+    <span className="text-theme">rizom</span>
+    <span className={cn(DOT_BY_SUFFIX[brandSuffix], dotClassName)}>.</span>
+    <span className="italic font-normal text-theme-muted">{brandSuffix}</span>
+  </span>
+);

package/src/index.ts

@@ -23,6 +23,12 @@ export { SideNav } from "./SideNav";
 
 export { renderHighlightedText } from "./highlighted-text";
 
+export { Wordmark } from "./Wordmark";
+export type { WordmarkProps } from "./Wordmark";
+
+export { Ecosystem } from "./Ecosystem";
+export type { EcosystemCard, EcosystemContent } from "./Ecosystem";
+
 export type {
   ProductCardContent,
   ProductVariant,