@voila.dev/ui-landing 1.1.9

package/src/components/logo-marquee.tsx

@@ -0,0 +1,139 @@
+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 { Container } from "#/components/container.tsx";
+
+/**
+ * Partner/brand logo band, either an animated marquee or a static wrap. The
+ * marquee keyframes live in `@voila.dev/ui-landing/styles/landing.css`.
+ */
+
+function Root({ className, children, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="logo-marquee"
+			className={cn("border-y border-border bg-muted/30 py-8", className)}
+			{...props}
+		>
+			<Container>{children}</Container>
+		</div>
+	);
+}
+
+function Title({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<p
+			data-slot="logo-marquee-title"
+			className={cn(
+				"mb-6 text-center text-sm font-medium uppercase tracking-wider text-muted-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+/** Clips the track and fades its cut-off edges into the band background. */
+function Viewport({
+	className,
+	children,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="logo-marquee-viewport"
+			className={cn("relative overflow-hidden", className)}
+			{...props}
+		>
+			<div className="pointer-events-none absolute left-0 top-0 z-10 h-full w-20 bg-linear-to-r from-muted/30 to-transparent" />
+			<div className="pointer-events-none absolute right-0 top-0 z-10 h-full w-20 bg-linear-to-l from-muted/30 to-transparent" />
+			{children}
+		</div>
+	);
+}
+
+interface LogoMarqueeTrackProps extends React.ComponentProps<"div"> {
+	/** Seconds for one loop of the marquee. */
+	duration?: number;
+}
+
+/**
+ * Auto-scrolling track. Children are rendered twice (second pass
+ * `aria-hidden`, laid out flat via `display: contents`) so the -50%
+ * translation loops seamlessly. Pauses on hover.
+ */
+function Track({
+	duration = 30,
+	className,
+	style,
+	children,
+	...props
+}: LogoMarqueeTrackProps) {
+	return (
+		<div
+			data-slot="logo-marquee-track"
+			className={cn(
+				"flex animate-[landing-marquee_30s_linear_infinite] items-center gap-12 hover:[animation-play-state:paused]",
+				className,
+			)}
+			style={{ animationDuration: `${duration}s`, ...style }}
+			{...props}
+		>
+			{children}
+			<div aria-hidden="true" className="contents">
+				{children}
+			</div>
+		</div>
+	);
+}
+
+/** Non-animated alternative: centered wrapping row of logos. */
+function StaticTrack({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="logo-marquee-static-track"
+			className={cn(
+				"flex flex-wrap items-center justify-center gap-12",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+/** One logo — renders an `img` by default; pass `render` for custom markup. */
+function Item({
+	className,
+	render,
+	...props
+}: useRender.ComponentProps<"img">) {
+	return useRender({
+		defaultTagName: "img",
+		props: mergeProps<"img">(
+			{
+				className: cn(
+					"h-12 w-auto shrink-0 object-contain opacity-60 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0",
+					className,
+				),
+				loading: "lazy",
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "logo-marquee-item",
+		},
+	});
+}
+
+export const LogoMarquee = {
+	Root,
+	Title,
+	Viewport,
+	Track,
+	StaticTrack,
+	Item,
+};
+
+export type { LogoMarqueeTrackProps };

package/src/components/numbered-cards.tsx

@@ -0,0 +1,148 @@
+import { cva, type VariantProps } from "@voila.dev/ui/cva";
+import { cn } from "@voila.dev/ui/lib/utils";
+import { createContext, useContext } from "react";
+
+import {
+	type Tone,
+	toneTextClass,
+	toneTintBackgroundClass,
+} from "#/lib/tones.ts";
+
+/**
+ * Grid of numbered step cards ("Étape 1/2/3"). Compose: Root (tone, columns) > Card >
+ * CardHeader (CardIcon + CardLabel) + CardTitle + CardDescription.
+ */
+
+const NumberedCardsToneContext = createContext<Tone>("primary");
+
+const numberedCardsVariants = cva({
+	base: "grid gap-6",
+	variants: {
+		columns: {
+			"2": "md:grid-cols-2",
+			"3": "md:grid-cols-3",
+			"4": "md:grid-cols-2 lg:grid-cols-4",
+		},
+	},
+	defaultVariants: {
+		columns: "3",
+	},
+});
+
+type NumberedCardsVariants = VariantProps<typeof numberedCardsVariants>;
+
+const numberedCardsColumnsOptions = [
+	"2",
+	"3",
+	"4",
+] as const satisfies readonly NonNullable<NumberedCardsVariants["columns"]>[];
+
+interface NumberedCardsRootProps
+	extends React.ComponentProps<"div">,
+		NumberedCardsVariants {
+	tone?: Tone;
+}
+
+function Root({
+	tone = "primary",
+	columns,
+	className,
+	...props
+}: NumberedCardsRootProps) {
+	return (
+		<NumberedCardsToneContext.Provider value={tone}>
+			<div
+				data-slot="numbered-cards"
+				className={cn(numberedCardsVariants({ columns }), className)}
+				{...props}
+			/>
+		</NumberedCardsToneContext.Provider>
+	);
+}
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="numbered-cards-card"
+			className={cn(
+				"animate-fade-up relative rounded-2xl border border-border bg-card p-8",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="numbered-cards-card-header"
+			className={cn("mb-4 flex items-center gap-3", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardIcon({ className, ...props }: React.ComponentProps<"span">) {
+	const tone = useContext(NumberedCardsToneContext);
+
+	return (
+		<span
+			data-slot="numbered-cards-card-icon"
+			className={cn(
+				"flex h-12 w-12 items-center justify-center rounded-xl [&_svg]:h-6 [&_svg]:w-6",
+				toneTintBackgroundClass[tone],
+				toneTextClass[tone],
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+/** The "Étape N" label next to the icon. */
+function CardLabel({ className, ...props }: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="numbered-cards-card-label"
+			className={cn("text-sm font-semibold text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"h3">) {
+	return (
+		<h3
+			data-slot="numbered-cards-card-title"
+			className={cn(
+				"mb-2 font-heading text-xl font-bold tracking-tight text-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<p
+			data-slot="numbered-cards-card-description"
+			className={cn("text-sm leading-relaxed text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+export const NumberedCards = {
+	Root,
+	Card,
+	CardHeader,
+	CardIcon,
+	CardLabel,
+	CardTitle,
+	CardDescription,
+};
+
+export type { NumberedCardsRootProps, NumberedCardsVariants };
+export { numberedCardsColumnsOptions, numberedCardsVariants };

package/src/components/page-header.tsx

@@ -0,0 +1,56 @@
+import { cn } from "@voila.dev/ui/lib/utils";
+import { Container, type ContainerProps } from "#/components/container.tsx";
+import { Heading, type HeadingProps } from "#/components/heading.tsx";
+import { Section, type SectionProps } from "#/components/section.tsx";
+import { Text, type TextProps } from "#/components/text.tsx";
+
+/**
+ * Page-opening header band (title + lead on a gradient background), as on the
+ * contact/legal/blog pages of the source design. Compose: Root > Title + Lead.
+ */
+
+interface PageHeaderRootProps extends SectionProps {
+	containerSize?: ContainerProps["size"];
+}
+
+function Root({
+	spacing = "md",
+	background = "gradient-primary",
+	containerSize = "md",
+	className,
+	children,
+	...props
+}: PageHeaderRootProps) {
+	return (
+		<Section
+			spacing={spacing}
+			background={background}
+			className={className}
+			{...props}
+		>
+			<Container size={containerSize}>{children}</Container>
+		</Section>
+	);
+}
+
+function Title({ className, ...props }: HeadingProps) {
+	return <Heading level="h1" className={cn("mb-4", className)} {...props} />;
+}
+
+function Lead({ className, ...props }: TextProps) {
+	return (
+		<Text
+			variant="lead"
+			className={cn("text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+export const PageHeader = {
+	Root,
+	Title,
+	Lead,
+};
+
+export type { PageHeaderRootProps };

package/src/components/prose-article.tsx

@@ -0,0 +1,37 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "@voila.dev/ui/lib/utils";
+
+/**
+ * Long-form prose wrapper (blog articles, legal pages). Requires
+ * `@plugin "@tailwindcss/typography"` in the consuming app's stylesheet.
+ */
+function ProseArticle({
+	className,
+	render,
+	...props
+}: useRender.ComponentProps<"article">) {
+	return useRender({
+		defaultTagName: "article",
+		props: mergeProps<"article">(
+			{
+				className: cn(
+					"prose prose-lg md:prose-xl mx-auto max-w-none",
+					"prose-blockquote:border-l-provider prose-blockquote:bg-muted/50 prose-blockquote:py-1 prose-blockquote:pl-6 prose-blockquote:not-italic",
+					"prose-p:text-muted-foreground",
+					"prose-a:text-provider",
+					"prose-strong:text-foreground",
+					"prose-img:rounded-xl",
+					className,
+				),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "prose-article",
+		},
+	});
+}
+
+export { ProseArticle };

package/src/components/section-intro.tsx

@@ -0,0 +1,82 @@
+import { cva, type VariantProps } from "@voila.dev/ui/cva";
+import { cn } from "@voila.dev/ui/lib/utils";
+
+import { Heading, type HeadingProps } from "#/components/heading.tsx";
+import { Text, type TextProps } from "#/components/text.tsx";
+
+/**
+ * Centered intro block opening a section: Eyebrow + title + lead. Factors out
+ * the header markup most sections repeat.
+ */
+
+const sectionIntroVariants = cva({
+	base: "mx-auto text-center",
+	variants: {
+		width: {
+			md: "max-w-2xl",
+			lg: "max-w-3xl",
+		},
+		spacing: {
+			md: "mb-12",
+			lg: "mb-16",
+		},
+	},
+	defaultVariants: {
+		width: "md",
+		spacing: "lg",
+	},
+});
+
+type SectionIntroVariants = VariantProps<typeof sectionIntroVariants>;
+
+const sectionIntroWidthOptions = [
+	"md",
+	"lg",
+] as const satisfies readonly NonNullable<SectionIntroVariants["width"]>[];
+
+const sectionIntroSpacingOptions = [
+	"md",
+	"lg",
+] as const satisfies readonly NonNullable<SectionIntroVariants["spacing"]>[];
+
+interface SectionIntroRootProps
+	extends React.ComponentProps<"div">,
+		SectionIntroVariants {}
+
+function Root({ width, spacing, className, ...props }: SectionIntroRootProps) {
+	return (
+		<div
+			data-slot="section-intro"
+			className={cn(sectionIntroVariants({ width, spacing }), className)}
+			{...props}
+		/>
+	);
+}
+
+function Title({ className, ...props }: HeadingProps) {
+	return (
+		<Heading
+			level="h2"
+			align="center"
+			className={cn("mb-4", className)}
+			{...props}
+		/>
+	);
+}
+
+function Description(props: TextProps) {
+	return <Text variant="lead" align="center" {...props} />;
+}
+
+export const SectionIntro = {
+	Root,
+	Title,
+	Description,
+};
+
+export type { SectionIntroRootProps, SectionIntroVariants };
+export {
+	sectionIntroSpacingOptions,
+	sectionIntroVariants,
+	sectionIntroWidthOptions,
+};

package/src/components/section-variants.ts

@@ -0,0 +1,47 @@
+import { cva, type VariantProps } from "@voila.dev/ui/cva";
+
+export const sectionVariants = cva({
+	base: "relative",
+	variants: {
+		spacing: {
+			none: "",
+			sm: "py-12 md:py-16",
+			md: "py-16 md:py-24",
+			lg: "py-24 md:py-32",
+			xl: "py-32 md:py-40",
+		},
+		background: {
+			default: "bg-background",
+			muted: "bg-muted",
+			provider: "bg-provider text-primary-foreground",
+			gradient: "bg-gradient-to-br from-background via-background to-muted",
+			"gradient-primary":
+				"bg-gradient-to-br from-primary/5 via-background to-primary/10",
+			"gradient-provider":
+				"bg-gradient-to-br from-provider/5 via-background to-provider/10",
+		},
+	},
+	defaultVariants: {
+		spacing: "md",
+		background: "default",
+	},
+});
+
+export type SectionVariants = VariantProps<typeof sectionVariants>;
+
+export const sectionSpacingOptions = [
+	"none",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+] as const satisfies readonly NonNullable<SectionVariants["spacing"]>[];
+
+export const sectionBackgroundOptions = [
+	"default",
+	"muted",
+	"provider",
+	"gradient",
+	"gradient-primary",
+	"gradient-provider",
+] as const satisfies readonly NonNullable<SectionVariants["background"]>[];

package/src/components/section.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 SectionVariants,
+	sectionVariants,
+} from "#/components/section-variants.ts";
+
+type SectionProps = useRender.ComponentProps<"section"> & SectionVariants;
+
+/**
+ * Full-width landing band — vertical rhythm + background treatment. Marketing
+ * scale (`py-24`…): not interchangeable with the app-shell `Section` from
+ * `@voila.dev/ui`. Renders a `section`; pass `render` to swap the tag.
+ */
+function Section({
+	className,
+	render,
+	spacing,
+	background,
+	...props
+}: SectionProps) {
+	return useRender({
+		defaultTagName: "section",
+		props: mergeProps<"section">(
+			{
+				className: cn(sectionVariants({ spacing, background }), className),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "landing-section",
+		},
+	});
+}
+
+export {
+	type SectionVariants,
+	sectionBackgroundOptions,
+	sectionSpacingOptions,
+	sectionVariants,
+} from "#/components/section-variants.ts";
+export { Section, type SectionProps };