@voila.dev/ui-landing 1.1.9

package/package.json

@@ -0,0 +1,63 @@
+{
+	"name": "@voila.dev/ui-landing",
+	"version": "1.1.9",
+	"type": "module",
+	"description": "Your marketing site, from the same system as your product.",
+	"license": "MIT",
+	"homepage": "https://ui.voila.dev",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/voila-voila-dev/ui.git",
+		"directory": "packages/ui-landing"
+	},
+	"keywords": [
+		"react",
+		"landing-page",
+		"marketing",
+		"sections",
+		"tailwindcss"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"files": [
+		"src",
+		"!src/**/*.test.ts",
+		"!src/**/*.test.tsx",
+		"!src/**/*.stories.ts",
+		"!src/**/*.stories.tsx"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"exports": {
+		"./styles.css": "./src/styles.css",
+		"./styles/landing.css": "./src/styles/landing.css",
+		"./lib/tones": "./src/lib/tones.ts",
+		"./section-variants": "./src/components/section-variants.ts",
+		"./container-variants": "./src/components/container-variants.ts",
+		"./heading-variants": "./src/components/heading-variants.ts",
+		"./text-variants": "./src/components/text-variants.ts",
+		"./components/*": "./src/components/*.tsx"
+	},
+	"imports": {
+		"#/*": "./src/*"
+	},
+	"scripts": {
+		"check": "biome check",
+		"check-types": "tsc --noEmit",
+		"format": "biome format",
+		"lint": "biome lint",
+		"test": "vitest run"
+	},
+	"dependencies": {
+		"@base-ui/react": "^1.4.1",
+		"@phosphor-icons/react": "2.1.10",
+		"@voila.dev/ui": "0.0.0"
+	},
+	"peerDependencies": {
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
+		"tailwindcss": "^4.0.0"
+	}
+}

package/src/components/article-card.tsx

@@ -0,0 +1,200 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { ArrowUpRightIcon } from "@phosphor-icons/react";
+import { cn } from "@voila.dev/ui/lib/utils";
+
+import { ArticleTags } from "#/components/article-tags.tsx";
+
+/**
+ * Blog article card.
+ * Compose: Root (anchor) > Frame > Image | ImageFallback + Content (Tags,
+ * Title, Description, Meta > MetaItem…/Arrow).
+ */
+
+/** The clickable wrapper — an anchor by default; pass `render` for a router Link. */
+function Root({ className, render, ...props }: useRender.ComponentProps<"a">) {
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps<"a">(
+			{
+				className: cn("group block", className),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "article-card",
+		},
+	});
+}
+
+/** The card surface (Astro `Card` default/none/lift as `article`). */
+function Frame({ className, ...props }: React.ComponentProps<"article">) {
+	return (
+		<article
+			data-slot="article-card-frame"
+			className={cn(
+				"rounded-lg border border-border bg-card text-card-foreground transition-all duration-200 hover:-translate-y-1 hover:shadow-lg",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+interface ArticleCardImageProps extends React.ComponentProps<"img"> {
+	alt: string;
+}
+
+function Image({ className, alt, ...props }: ArticleCardImageProps) {
+	return (
+		<div
+			data-slot="article-card-image"
+			className="relative aspect-video overflow-hidden rounded-t-lg"
+		>
+			<img
+				alt={alt}
+				loading="lazy"
+				className={cn(
+					"h-full w-full object-cover transition-transform duration-300 group-hover:scale-105",
+					className,
+				)}
+				{...props}
+			/>
+			<div className="absolute inset-0 bg-linear-to-t from-black/20 to-transparent" />
+		</div>
+	);
+}
+
+/** Gradient placeholder shown when the article has no cover image. */
+function ImageFallback({
+	className,
+	children,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="article-card-image-fallback"
+			className={cn(
+				"relative aspect-video overflow-hidden rounded-t-lg bg-linear-to-br from-provider/20 to-organization/20",
+				className,
+			)}
+			{...props}
+		>
+			<div className="absolute inset-0 flex items-center justify-center">
+				<span className="text-6xl opacity-30">{children ?? "📝"}</span>
+			</div>
+		</div>
+	);
+}
+
+function Content({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="article-card-content"
+			className={cn("p-5", className)}
+			{...props}
+		/>
+	);
+}
+
+function Tags({ className, ...props }: React.ComponentProps<"div">) {
+	return <ArticleTags.Root className={cn("mb-3", className)} {...props} />;
+}
+
+function Title({ className, ...props }: React.ComponentProps<"h3">) {
+	return (
+		<h3
+			data-slot="article-card-title"
+			className={cn(
+				"mb-2 line-clamp-2 text-lg font-semibold transition-colors group-hover:text-provider",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function Description({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<p
+			data-slot="article-card-description"
+			className={cn(
+				"mb-4 line-clamp-2 text-sm text-muted-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function Meta({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="article-card-meta"
+			className={cn(
+				"flex items-center justify-between text-xs text-muted-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MetaItems({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="article-card-meta-items"
+			className={cn("flex items-center gap-3", className)}
+			{...props}
+		/>
+	);
+}
+
+/** Date / reading-time entry — icon child + text. */
+function MetaItem({ className, ...props }: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="article-card-meta-item"
+			className={cn(
+				"flex items-center gap-1 [&_svg]:h-3.5 [&_svg]:w-3.5",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function Arrow({
+	className,
+	...props
+}: React.ComponentProps<typeof ArrowUpRightIcon>) {
+	return (
+		<ArrowUpRightIcon
+			data-slot="article-card-arrow"
+			className={cn(
+				"h-4 w-4 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export const ArticleCard = {
+	Root,
+	Frame,
+	Image,
+	ImageFallback,
+	Content,
+	Tags,
+	Title,
+	Description,
+	Meta,
+	MetaItems,
+	MetaItem,
+	Arrow,
+};
+
+export type { ArticleCardImageProps };
+export { ArticleTags };

package/src/components/article-tags.tsx

@@ -0,0 +1,31 @@
+import { cn } from "@voila.dev/ui/lib/utils";
+
+/** Tag chip row for blog articles. */
+
+function Root({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="article-tags"
+			className={cn("flex flex-wrap gap-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function Tag({ className, ...props }: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="article-tag"
+			className={cn(
+				"inline-flex items-center rounded-full bg-provider/10 px-2.5 py-0.5 text-xs font-medium text-provider transition-colors",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export const ArticleTags = {
+	Root,
+	Tag,
+};

package/src/components/bento-grid.tsx

@@ -0,0 +1,197 @@
+import { cn } from "@voila.dev/ui/lib/utils";
+
+import { accentOrangeBlobClass, brandGradientClass } from "#/lib/tones.ts";
+
+/**
+ * Bento grid with a featured gradient tile. Compose: Root > FeaturedItem (FeaturedContent >
+ * FeaturedIcon/FeaturedLabel/FeaturedTitle + FeaturedDescription) + Item
+ * (ItemIcon + ItemBody > ItemTitle/ItemDescription).
+ */
+
+function Root({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="bento-grid"
+			className={cn("grid gap-6 lg:grid-cols-3", className)}
+			{...props}
+		/>
+	);
+}
+
+/** The gradient hero tile — spans two rows on desktop, owns the blur blobs. */
+function FeaturedItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<"article">) {
+	return (
+		<article
+			data-slot="bento-featured-item"
+			className={cn(
+				"animate-fade-up relative flex flex-col justify-between overflow-hidden rounded-2xl p-8 text-primary-foreground shadow-xl lg:row-span-2",
+				brandGradientClass,
+				className,
+			)}
+			{...props}
+		>
+			<div className="pointer-events-none absolute -right-16 -top-16 h-56 w-56 rounded-full bg-white/10 blur-2xl" />
+			<div
+				className={cn(
+					"pointer-events-none absolute -bottom-20 -left-10 h-56 w-56 rounded-full blur-3xl",
+					accentOrangeBlobClass,
+				)}
+			/>
+			{children}
+		</article>
+	);
+}
+
+function FeaturedContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="bento-featured-content"
+			className={cn("relative", className)}
+			{...props}
+		/>
+	);
+}
+
+function FeaturedIcon({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="bento-featured-icon"
+			className={cn(
+				"mb-6 inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-white/15 backdrop-blur [&_svg]:h-7 [&_svg]:w-7",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function FeaturedLabel({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<p
+			data-slot="bento-featured-label"
+			className={cn(
+				"mb-2 text-xs font-semibold uppercase tracking-[0.2em] text-white/70",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function FeaturedTitle({ className, ...props }: React.ComponentProps<"h3">) {
+	return (
+		<h3
+			data-slot="bento-featured-title"
+			className={cn(
+				"font-heading text-5xl font-bold tracking-tight",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function FeaturedDescription({
+	className,
+	...props
+}: React.ComponentProps<"p">) {
+	return (
+		<p
+			data-slot="bento-featured-description"
+			className={cn(
+				"relative mt-6 text-base leading-relaxed text-white/90",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+interface BentoGridItemProps extends React.ComponentProps<"article"> {
+	/** Spans two columns on desktop (the last tile of an odd set). */
+	wide?: boolean;
+}
+
+function Item({ wide = false, className, ...props }: BentoGridItemProps) {
+	return (
+		<article
+			data-slot="bento-item"
+			className={cn(
+				"animate-fade-up group rounded-2xl border border-border bg-card p-6 shadow-sm transition-all hover:-translate-y-1 hover:border-primary/20 hover:shadow-md lg:p-8",
+				wide && "lg:col-span-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+/** Icon tile + text laid out side by side. */
+function ItemLayout({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="bento-item-layout"
+			className={cn("flex items-start gap-4", className)}
+			{...props}
+		/>
+	);
+}
+
+function ItemIcon({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="bento-item-icon"
+			className={cn(
+				"flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary transition-colors group-hover:bg-primary/15 [&_svg]:h-6 [&_svg]:w-6",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ItemBody({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="bento-item-body" className={className} {...props} />;
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"h3">) {
+	return (
+		<h3
+			data-slot="bento-item-title"
+			className={cn("mb-2 font-heading text-xl font-semibold", className)}
+			{...props}
+		/>
+	);
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<p
+			data-slot="bento-item-description"
+			className={cn("text-sm leading-relaxed text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+export const BentoGrid = {
+	Root,
+	FeaturedItem,
+	FeaturedContent,
+	FeaturedIcon,
+	FeaturedLabel,
+	FeaturedTitle,
+	FeaturedDescription,
+	Item,
+	ItemLayout,
+	ItemIcon,
+	ItemBody,
+	ItemTitle,
+	ItemDescription,
+};
+
+export type { BentoGridItemProps };

package/src/components/comparison-section.tsx

@@ -0,0 +1,209 @@
+import { CheckCircleIcon, XCircleIcon } from "@phosphor-icons/react";
+import { cn } from "@voila.dev/ui/lib/utils";
+import { createContext, useContext } from "react";
+
+import { Container } from "#/components/container.tsx";
+import { Section, type SectionProps } from "#/components/section.tsx";
+import { type Tone, tonePanelClass, toneTextClass } from "#/lib/tones.ts";
+
+/**
+ * Before/after benefits split (crossed-out list vs checked list + tag chips +
+ * illustration).
+ * Compose: Root (tone) > Content (Eyebrow, Heading, Panels > Panel >
+ * PanelTitle + PanelList > PanelItem, TagList > Tag, actions) + Media.
+ */
+
+const ComparisonToneContext = createContext<Tone>("primary");
+
+type ComparisonPanelVariant = "without" | "with";
+
+const ComparisonPanelContext = createContext<ComparisonPanelVariant>("with");
+
+interface ComparisonSectionRootProps extends SectionProps {
+	tone?: Tone;
+}
+
+function Root({
+	tone = "primary",
+	spacing = "lg",
+	background,
+	className,
+	children,
+	...props
+}: ComparisonSectionRootProps) {
+	return (
+		<ComparisonToneContext.Provider value={tone}>
+			{/* overflow-hidden: the Media illustrations carry decorative blur blobs
+			    that would otherwise create a few pixels of horizontal scroll. */}
+			<Section
+				spacing={spacing}
+				background={background}
+				className={cn("overflow-hidden", className)}
+				{...props}
+			>
+				<Container>
+					<div className="grid items-center gap-12 lg:grid-cols-2">
+						{children}
+					</div>
+				</Container>
+			</Section>
+		</ComparisonToneContext.Provider>
+	);
+}
+
+function Content({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="comparison-content"
+			className={cn("min-w-0", className)}
+			{...props}
+		/>
+	);
+}
+
+function Panels({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="comparison-panels"
+			className={cn("mb-6 space-y-6", className)}
+			{...props}
+		/>
+	);
+}
+
+interface ComparisonPanelProps extends React.ComponentProps<"div"> {
+	variant: ComparisonPanelVariant;
+}
+
+function Panel({ variant, className, ...props }: ComparisonPanelProps) {
+	const tone = useContext(ComparisonToneContext);
+
+	return (
+		<ComparisonPanelContext.Provider value={variant}>
+			<div
+				data-slot="comparison-panel"
+				className={cn(
+					"animate-fade-up rounded-2xl border p-5",
+					variant === "without"
+						? "border-border bg-muted/50"
+						: tonePanelClass[tone],
+					className,
+				)}
+				{...props}
+			/>
+		</ComparisonPanelContext.Provider>
+	);
+}
+
+function PanelTitle({ className, ...props }: React.ComponentProps<"p">) {
+	const tone = useContext(ComparisonToneContext);
+	const variant = useContext(ComparisonPanelContext);
+
+	return (
+		<p
+			data-slot="comparison-panel-title"
+			className={cn(
+				"mb-3 text-sm font-semibold uppercase tracking-wide",
+				variant === "without" ? "text-muted-foreground" : toneTextClass[tone],
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function PanelList({ className, ...props }: React.ComponentProps<"ul">) {
+	return (
+		<ul
+			data-slot="comparison-panel-list"
+			className={cn("space-y-3", className)}
+			{...props}
+		/>
+	);
+}
+
+interface ComparisonPanelItemProps extends React.ComponentProps<"li"> {
+	/** Replaces the default XCircle/CheckCircle mark. */
+	icon?: React.ReactNode;
+}
+
+function PanelItem({
+	icon,
+	className,
+	children,
+	...props
+}: ComparisonPanelItemProps) {
+	const variant = useContext(ComparisonPanelContext);
+
+	return (
+		<li
+			data-slot="comparison-panel-item"
+			className={cn("flex animate-fade-up items-start gap-3", className)}
+			{...props}
+		>
+			{icon ??
+				(variant === "without" ? (
+					<XCircleIcon className="mt-0.5 h-5 w-5 shrink-0 text-destructive" />
+				) : (
+					<CheckCircleIcon className="mt-0.5 h-5 w-5 shrink-0 text-success" />
+				))}
+			<span className={cn(variant === "without" && "text-muted-foreground")}>
+				{children}
+			</span>
+		</li>
+	);
+}
+
+function TagList({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="comparison-tag-list"
+			className={cn("mb-8 flex flex-wrap gap-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function Tag({ className, ...props }: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="comparison-tag"
+			className={cn(
+				"rounded-full border border-border bg-background px-3 py-1 text-sm",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+/** Illustration column — hidden below `lg`. */
+function Media({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="comparison-media"
+			className={cn("hidden lg:block", className)}
+			{...props}
+		/>
+	);
+}
+
+export const ComparisonSection = {
+	Root,
+	Content,
+	Panels,
+	Panel,
+	PanelTitle,
+	PanelList,
+	PanelItem,
+	TagList,
+	Tag,
+	Media,
+};
+
+export type {
+	ComparisonPanelItemProps,
+	ComparisonPanelProps,
+	ComparisonPanelVariant,
+	ComparisonSectionRootProps,
+};