@voila.dev/ui-landing 1.1.9

package/src/components/step-tracks.tsx

@@ -0,0 +1,235 @@
+import { cn } from "@voila.dev/ui/lib/utils";
+import { createContext, useContext } from "react";
+
+import {
+	type Tone,
+	toneConnectorLineClass,
+	toneHoverBorderClass,
+	toneSolidClass,
+	toneTextClass,
+	toneTintBackgroundClass,
+} from "#/lib/tones.ts";
+
+/**
+ * Parallel tone-colored step tracks with a vertical connector line and
+ * numbered icon tiles. Compose: Root > Track (tone) >
+ * Header (HeaderIcon + HeaderText > HeaderTitle/HeaderSubtitle) +
+ * Steps > Step (StepIcon number + Body > BodyTitle/BodyDescription).
+ */
+
+const StepTracksToneContext = createContext<Tone>("primary");
+
+function Root({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="step-tracks"
+			className={cn("grid gap-16 lg:grid-cols-2 lg:gap-12", className)}
+			{...props}
+		/>
+	);
+}
+
+interface StepTracksTrackProps extends React.ComponentProps<"div"> {
+	tone?: Tone;
+}
+
+function Track({
+	tone = "primary",
+	className,
+	...props
+}: StepTracksTrackProps) {
+	return (
+		<StepTracksToneContext.Provider value={tone}>
+			<div
+				data-slot="step-tracks-track"
+				className={cn("animate-fade-up", className)}
+				{...props}
+			/>
+		</StepTracksToneContext.Provider>
+	);
+}
+
+function Header({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="step-tracks-header"
+			className={cn("mb-8 flex items-center gap-4", className)}
+			{...props}
+		/>
+	);
+}
+
+function HeaderIcon({ className, ...props }: React.ComponentProps<"div">) {
+	const tone = useContext(StepTracksToneContext);
+
+	return (
+		<div
+			data-slot="step-tracks-header-icon"
+			className={cn(
+				"flex h-12 w-12 shrink-0 items-center justify-center rounded-xl [&_svg]:h-6 [&_svg]:w-6",
+				toneTintBackgroundClass[tone],
+				toneTextClass[tone],
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function HeaderText({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div data-slot="step-tracks-header-text" className={className} {...props} />
+	);
+}
+
+function HeaderTitle({ className, ...props }: React.ComponentProps<"h3">) {
+	const tone = useContext(StepTracksToneContext);
+
+	return (
+		<h3
+			data-slot="step-tracks-header-title"
+			className={cn("text-xl font-semibold", toneTextClass[tone], className)}
+			{...props}
+		/>
+	);
+}
+
+function HeaderSubtitle({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<p
+			data-slot="step-tracks-header-subtitle"
+			className={cn("text-sm text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+/** Stepper wrapper — owns the vertical connector line behind the icon tiles. */
+function Steps({ className, children, ...props }: React.ComponentProps<"div">) {
+	const tone = useContext(StepTracksToneContext);
+
+	return (
+		<div
+			data-slot="step-tracks-steps"
+			className={cn("relative", className)}
+			{...props}
+		>
+			<div
+				className={cn(
+					"absolute bottom-10 left-7 top-2 w-px",
+					toneConnectorLineClass[tone],
+				)}
+			/>
+			<div className="grid gap-6">{children}</div>
+		</div>
+	);
+}
+
+function Step({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="step-tracks-step"
+			className={cn("animate-fade-up relative flex gap-5", className)}
+			{...props}
+		/>
+	);
+}
+
+interface StepTracksStepIconProps extends React.ComponentProps<"div"> {
+	number: number;
+}
+
+function StepIcon({
+	number,
+	className,
+	children,
+	...props
+}: StepTracksStepIconProps) {
+	const tone = useContext(StepTracksToneContext);
+
+	return (
+		<div
+			data-slot="step-tracks-step-icon"
+			className={cn(
+				"relative z-10 h-14 w-14 shrink-0 rounded-xl bg-background",
+				className,
+			)}
+			{...props}
+		>
+			<div
+				className={cn(
+					"flex h-full w-full items-center justify-center rounded-xl [&_svg]:h-6 [&_svg]:w-6",
+					toneTintBackgroundClass[tone],
+					toneTextClass[tone],
+				)}
+			>
+				{children}
+			</div>
+			<span
+				className={cn(
+					"absolute -right-2 -top-2 flex h-6 w-6 items-center justify-center rounded-full text-xs font-bold",
+					toneSolidClass[tone],
+				)}
+			>
+				{number}
+			</span>
+		</div>
+	);
+}
+
+function Body({ className, ...props }: React.ComponentProps<"div">) {
+	const tone = useContext(StepTracksToneContext);
+
+	return (
+		<div
+			data-slot="step-tracks-step-body"
+			className={cn(
+				"flex-1 rounded-2xl border border-border bg-card p-6 shadow-sm transition-all hover:shadow-md",
+				toneHoverBorderClass[tone],
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function BodyTitle({ className, ...props }: React.ComponentProps<"h4">) {
+	return (
+		<h4
+			data-slot="step-tracks-step-title"
+			className={cn("mb-2 text-lg font-semibold", className)}
+			{...props}
+		/>
+	);
+}
+
+function BodyDescription({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<p
+			data-slot="step-tracks-step-description"
+			className={cn(
+				"text-muted-foreground [&_strong]:font-semibold [&_strong]:text-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export const StepTracks = {
+	Root,
+	Track,
+	Header,
+	HeaderIcon,
+	HeaderText,
+	HeaderTitle,
+	HeaderSubtitle,
+	Steps,
+	Step,
+	StepIcon,
+	Body,
+	BodyTitle,
+	BodyDescription,
+};
+
+export type { StepTracksStepIconProps, StepTracksTrackProps };

package/src/components/testimonial-grid.tsx

@@ -0,0 +1,182 @@
+import { QuotesIcon, StarIcon } from "@phosphor-icons/react";
+import { cva, type VariantProps } from "@voila.dev/ui/cva";
+import { cn } from "@voila.dev/ui/lib/utils";
+
+import { accentOrangeStarClass, accentOrangeTintClass } from "#/lib/tones.ts";
+
+/**
+ * Testimonial figure cards (quote, avatar initial, star rating). Compose: Root > Item >
+ * QuoteIcon + Quote + Footer (Avatar + Author > AuthorName/AuthorRole +
+ * Rating).
+ */
+
+function Root({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="testimonial-grid"
+			className={cn("grid gap-6 md:grid-cols-3", className)}
+			{...props}
+		/>
+	);
+}
+
+function Item({ className, ...props }: React.ComponentProps<"figure">) {
+	return (
+		<figure
+			data-slot="testimonial-item"
+			className={cn(
+				"animate-fade-up flex h-full min-w-0 flex-col rounded-2xl border border-border bg-card p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-md lg:p-8",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function QuoteIcon({
+	className,
+	...props
+}: React.ComponentProps<typeof QuotesIcon>) {
+	return (
+		<QuotesIcon
+			data-slot="testimonial-quote-icon"
+			className={cn("mb-4 h-8 w-8 text-primary/30", className)}
+			{...props}
+		/>
+	);
+}
+
+function Quote({
+	className,
+	children,
+	...props
+}: React.ComponentProps<"blockquote">) {
+	return (
+		<blockquote
+			data-slot="testimonial-quote"
+			className={cn("flex-1 text-foreground", className)}
+			{...props}
+		>
+			<p className="leading-relaxed">{children}</p>
+		</blockquote>
+	);
+}
+
+function Footer({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="testimonial-footer"
+			className={cn(
+				"mt-6 flex items-center gap-3 border-t border-border/60 pt-5",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+const testimonialAvatarVariants = cva({
+	base: "flex h-11 w-11 shrink-0 items-center justify-center rounded-full font-heading text-sm font-bold",
+	variants: {
+		accent: {
+			primary: "bg-primary/10 text-primary",
+			orange: accentOrangeTintClass,
+		},
+	},
+	defaultVariants: {
+		accent: "primary",
+	},
+});
+
+type TestimonialAvatarVariants = VariantProps<typeof testimonialAvatarVariants>;
+
+const testimonialAvatarAccentOptions = [
+	"primary",
+	"orange",
+] as const satisfies readonly NonNullable<
+	TestimonialAvatarVariants["accent"]
+>[];
+
+interface TestimonialAvatarProps
+	extends React.ComponentProps<"span">,
+		TestimonialAvatarVariants {}
+
+/** Initial-letter avatar disc. */
+function Avatar({ accent, className, ...props }: TestimonialAvatarProps) {
+	return (
+		<span
+			data-slot="testimonial-avatar"
+			className={cn(testimonialAvatarVariants({ accent }), className)}
+			{...props}
+		/>
+	);
+}
+
+function Author({ className, ...props }: React.ComponentProps<"figcaption">) {
+	return (
+		<figcaption
+			data-slot="testimonial-author"
+			className={cn("min-w-0", className)}
+			{...props}
+		/>
+	);
+}
+
+function AuthorName({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<p
+			data-slot="testimonial-author-name"
+			className={cn("text-sm font-semibold text-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+function AuthorRole({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<p
+			data-slot="testimonial-author-role"
+			className={cn("text-xs text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+interface TestimonialRatingProps extends React.ComponentProps<"div"> {
+	count?: number;
+}
+
+function Rating({ count = 5, className, ...props }: TestimonialRatingProps) {
+	return (
+		<div
+			data-slot="testimonial-rating"
+			className={cn("ml-auto flex shrink-0 gap-0.5", className)}
+			{...props}
+		>
+			{Array.from({ length: count }, (_, index) => (
+				<StarIcon
+					// Stars are a static decorative sequence — the index is the identity.
+					key={index}
+					weight="fill"
+					className={cn("h-3.5 w-3.5", accentOrangeStarClass)}
+				/>
+			))}
+		</div>
+	);
+}
+
+export const TestimonialGrid = {
+	Root,
+	Item,
+	QuoteIcon,
+	Quote,
+	Footer,
+	Avatar,
+	Author,
+	AuthorName,
+	AuthorRole,
+	Rating,
+};
+
+export type { TestimonialAvatarProps, TestimonialRatingProps };
+export { testimonialAvatarAccentOptions, testimonialAvatarVariants };

package/src/components/text-variants.ts

@@ -0,0 +1,65 @@
+import { cva, type VariantProps } from "@voila.dev/ui/cva";
+
+export const textVariants = cva({
+	base: "leading-relaxed",
+	variants: {
+		variant: {
+			body: "text-foreground",
+			muted: "text-muted-foreground",
+			lead: "text-xl text-muted-foreground",
+		},
+		size: {
+			xs: "text-xs",
+			sm: "text-sm",
+			base: "text-base",
+			lg: "text-lg",
+			xl: "text-xl",
+		},
+		align: {
+			left: "text-left",
+			center: "text-center",
+			right: "text-right",
+		},
+		weight: {
+			normal: "font-normal",
+			medium: "font-medium",
+			semibold: "font-semibold",
+			bold: "font-bold",
+		},
+	},
+	defaultVariants: {
+		variant: "body",
+		size: "base",
+		align: "left",
+		weight: "normal",
+	},
+});
+
+export type TextVariants = VariantProps<typeof textVariants>;
+
+export const textVariantOptions = [
+	"body",
+	"muted",
+	"lead",
+] as const satisfies readonly NonNullable<TextVariants["variant"]>[];
+
+export const textSizeOptions = [
+	"xs",
+	"sm",
+	"base",
+	"lg",
+	"xl",
+] as const satisfies readonly NonNullable<TextVariants["size"]>[];
+
+export const textAlignOptions = [
+	"left",
+	"center",
+	"right",
+] as const satisfies readonly NonNullable<TextVariants["align"]>[];
+
+export const textWeightOptions = [
+	"normal",
+	"medium",
+	"semibold",
+	"bold",
+] as const satisfies readonly NonNullable<TextVariants["weight"]>[];

package/src/components/text.tsx

@@ -0,0 +1,45 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "@voila.dev/ui/lib/utils";
+
+import { type TextVariants, textVariants } from "#/components/text-variants.ts";
+
+type TextProps = useRender.ComponentProps<"p"> & TextVariants;
+
+/** Marketing copy block — renders a `p`; pass `render` for `span`/`div`. */
+function Text({
+	className,
+	render,
+	variant,
+	size,
+	align,
+	weight,
+	...props
+}: TextProps) {
+	return useRender({
+		defaultTagName: "p",
+		props: mergeProps<"p">(
+			{
+				className: cn(
+					textVariants({ variant, size, align, weight }),
+					className,
+				),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "landing-text",
+		},
+	});
+}
+
+export {
+	type TextVariants,
+	textAlignOptions,
+	textSizeOptions,
+	textVariantOptions,
+	textVariants,
+	textWeightOptions,
+} from "#/components/text-variants.ts";
+export { Text, type TextProps };

package/src/lib/tones.ts

@@ -0,0 +1,85 @@
+/**
+ * Shared "tone" axis for landing sections. A tone maps the brand roles from
+ * `@voila.dev/ui-tokens` onto the coordinated class sets marketing sections
+ * need (tinted chip, solid badge, connector line…). Class strings are full
+ * literals — never composed at runtime — so Tailwind's scanner sees them.
+ */
+
+export const toneOptions = [
+	"primary",
+	"provider",
+	"organization",
+	"destructive",
+	"muted",
+] as const;
+
+export type Tone = (typeof toneOptions)[number];
+
+export const toneTextClass: Record<Tone, string> = {
+	primary: "text-primary",
+	provider: "text-provider",
+	organization: "text-organization",
+	destructive: "text-destructive",
+	muted: "text-muted-foreground",
+};
+
+export const toneTintBackgroundClass: Record<Tone, string> = {
+	primary: "bg-primary/10",
+	provider: "bg-provider/10",
+	organization: "bg-organization/10",
+	destructive: "bg-destructive/10",
+	muted: "bg-muted",
+};
+
+export const toneSolidBackgroundClass: Record<Tone, string> = {
+	primary: "bg-primary",
+	provider: "bg-provider",
+	organization: "bg-organization",
+	destructive: "bg-destructive",
+	muted: "bg-muted-foreground",
+};
+
+export const toneSolidClass: Record<Tone, string> = {
+	primary: "bg-primary text-primary-foreground",
+	provider: "bg-provider text-provider-foreground",
+	organization: "bg-organization text-organization-foreground",
+	destructive: "bg-destructive text-white",
+	muted: "bg-muted text-muted-foreground",
+};
+
+export const toneConnectorLineClass: Record<Tone, string> = {
+	primary: "bg-gradient-to-b from-primary via-primary/40 to-primary/10",
+	provider: "bg-gradient-to-b from-provider via-provider/40 to-provider/10",
+	organization:
+		"bg-gradient-to-b from-organization via-organization/40 to-organization/10",
+	destructive:
+		"bg-gradient-to-b from-destructive via-destructive/40 to-destructive/10",
+	muted: "bg-gradient-to-b from-border via-border/40 to-border/10",
+};
+
+export const toneHoverBorderClass: Record<Tone, string> = {
+	primary: "hover:border-primary/40",
+	provider: "hover:border-provider/40",
+	organization: "hover:border-organization/40",
+	destructive: "hover:border-destructive/40",
+	muted: "hover:border-border",
+};
+
+export const tonePanelClass: Record<Tone, string> = {
+	primary: "border-primary/20 bg-primary/5",
+	provider: "border-provider/20 bg-provider/5",
+	organization: "border-organization/20 bg-organization/5",
+	destructive: "border-destructive/20 bg-destructive/5",
+	muted: "border-border bg-muted/50",
+};
+
+/*
+ * Accent literals carried over from the Astro marketing site for pixel
+ * parity. TODO: promote to named tokens in @voila.dev/ui-tokens once the
+ * rebuild has shipped (they are close to, but not equal to, the brand roles).
+ */
+
+export const accentOrangeTintClass = "bg-[#FA8424]/10 text-[#FA8424]";
+export const accentOrangeStarClass = "fill-[#FA8424] text-[#FA8424]";
+export const accentOrangeBlobClass = "bg-[#FA8424]/20";
+export const brandGradientClass = "bg-gradient-to-br from-primary to-[#3b5bff]";

package/src/styles/landing.css

@@ -0,0 +1,20 @@
+@import "../styles.css";
+
+/*
+ * Side-effect styles for @voila.dev/ui-landing. Import once from the
+ * consuming app's global stylesheet, alongside an `@source` directive
+ * pointing at this package's `src` so Tailwind emits the classes the
+ * components use.
+ */
+
+/* Seamless logo marquee: the track renders its children twice, so sliding by
+ * half its width loops without a visible jump. Used via the arbitrary utility
+ * `animate-[landing-marquee_30s_linear_infinite]` in LogoMarquee. */
+@keyframes landing-marquee {
+	from {
+		transform: translateX(0);
+	}
+	to {
+		transform: translateX(-50%);
+	}
+}

package/src/styles.css

@@ -0,0 +1,10 @@
+/*
+ * Tailwind must scan this package or none of its classes are generated — the
+ * components ship as .tsx source, not as compiled CSS.
+ *
+ * `@source` resolves relative to the file that declares it, so this works
+ * wherever the package ends up: node_modules in an app, a symlink in a
+ * workspace. Consumers import this file and add nothing of their own.
+ */
+@source "./";
+@source not "./**/*.test.*";