@voila.dev/ui-landing 1.1.9

package/src/components/contact-cards.tsx

@@ -0,0 +1,49 @@
+import { cn } from "@voila.dev/ui/lib/utils";
+
+import { Heading, type HeadingProps } from "#/components/heading.tsx";
+import { Text, type TextProps } from "#/components/text.tsx";
+
+/**
+ * Bordered contact cards (email/phone). Compose: Root > Card > CardTitle +
+ * CardDescription + an action (e.g. a `@voila.dev/ui` Button rendered as a
+ * `mailto:`/`tel:` anchor).
+ */
+
+function Root({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="contact-cards"
+			className={cn("grid gap-8 md:grid-cols-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="contact-card"
+			className={cn("rounded-2xl border border-border p-8", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardTitle({ className, ...props }: HeadingProps) {
+	return (
+		<Heading level="h2" className={cn("mb-2 text-xl", className)} {...props} />
+	);
+}
+
+function CardDescription({ className, ...props }: TextProps) {
+	return (
+		<Text className={cn("mb-4 text-muted-foreground", className)} {...props} />
+	);
+}
+
+export const ContactCards = {
+	Root,
+	Card,
+	CardTitle,
+	CardDescription,
+};

package/src/components/container-variants.ts

@@ -0,0 +1,27 @@
+import { cva, type VariantProps } from "@voila.dev/ui/cva";
+
+export const containerVariants = cva({
+	base: "mx-auto w-full px-4 sm:px-6 lg:px-8",
+	variants: {
+		size: {
+			sm: "max-w-3xl",
+			md: "max-w-5xl",
+			lg: "max-w-6xl",
+			xl: "max-w-7xl",
+			full: "max-w-full",
+		},
+	},
+	defaultVariants: {
+		size: "xl",
+	},
+});
+
+export type ContainerVariants = VariantProps<typeof containerVariants>;
+
+export const containerSizeOptions = [
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"full",
+] as const satisfies readonly NonNullable<ContainerVariants["size"]>[];

package/src/components/container.tsx

@@ -0,0 +1,34 @@
+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 ContainerVariants,
+	containerVariants,
+} from "#/components/container-variants.ts";
+
+type ContainerProps = useRender.ComponentProps<"div"> & ContainerVariants;
+
+/** Centered max-width column with responsive gutters. */
+function Container({ className, render, size, ...props }: ContainerProps) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps<"div">(
+			{
+				className: cn(containerVariants({ size }), className),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "landing-container",
+		},
+	});
+}
+
+export {
+	type ContainerVariants,
+	containerSizeOptions,
+	containerVariants,
+} from "#/components/container-variants.ts";
+export { Container, type ContainerProps };

package/src/components/cta-banner.tsx

@@ -0,0 +1,93 @@
+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";
+import { accentOrangeBlobClass, brandGradientClass } from "#/lib/tones.ts";
+
+/**
+ * Gradient call-to-action banner with decorative blur blobs. Compose: Root > Title,
+ * Description, Actions.
+ */
+
+interface CtaBannerRootProps extends SectionProps {
+	containerSize?: ContainerProps["size"];
+}
+
+function Root({
+	spacing = "lg",
+	background,
+	containerSize = "md",
+	className,
+	children,
+	...props
+}: CtaBannerRootProps) {
+	return (
+		<Section
+			spacing={spacing}
+			background={background}
+			className={className}
+			{...props}
+		>
+			<Container size={containerSize}>
+				<div
+					data-slot="cta-banner"
+					className={cn(
+						"relative overflow-hidden rounded-3xl px-6 py-12 text-center text-primary-foreground shadow-xl sm:px-12 sm:py-16",
+						brandGradientClass,
+					)}
+				>
+					<div className="pointer-events-none absolute -right-16 -top-16 h-56 w-56 rounded-full bg-white/10 blur-3xl" />
+					<div
+						className={cn(
+							"pointer-events-none absolute -bottom-20 -left-10 h-56 w-56 rounded-full blur-3xl",
+							accentOrangeBlobClass,
+						)}
+					/>
+
+					<div className="relative mx-auto max-w-2xl">{children}</div>
+				</div>
+			</Container>
+		</Section>
+	);
+}
+
+function Title({ className, ...props }: HeadingProps) {
+	return (
+		<Heading
+			level="h2"
+			align="center"
+			className={cn("mb-4 text-white", className)}
+			{...props}
+		/>
+	);
+}
+
+function Description({ className, ...props }: TextProps) {
+	return (
+		<Text className={cn("mb-8 text-lg text-white/90", className)} {...props} />
+	);
+}
+
+function Actions({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="cta-banner-actions"
+			className={cn(
+				"flex flex-col justify-center gap-4 sm:flex-row",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export const CtaBanner = {
+	Root,
+	Title,
+	Description,
+	Actions,
+};
+
+export type { CtaBannerRootProps };

package/src/components/eyebrow.tsx

@@ -0,0 +1,99 @@
+import { cn } from "@voila.dev/ui/lib/utils";
+import { createContext, useContext } from "react";
+
+import {
+	type Tone,
+	toneOptions,
+	toneSolidBackgroundClass,
+	toneTextClass,
+	toneTintBackgroundClass,
+} from "#/lib/tones.ts";
+
+/**
+ * The badge pill that opens most sections ("Nouvelle plateforme", "Pour les
+ * clubs"…): tinted rounded-full chip with an optional pulse dot or icon and a
+ * label in the tone color. Reproduces the inline pattern of
+ * the source design.
+ */
+
+const EyebrowToneContext = createContext<Tone>("primary");
+
+interface EyebrowRootProps extends React.ComponentProps<"div"> {
+	tone?: Tone;
+}
+
+function Root({ tone = "primary", className, ...props }: EyebrowRootProps) {
+	return (
+		<EyebrowToneContext.Provider value={tone}>
+			<div
+				data-slot="eyebrow"
+				className={cn(
+					"inline-flex items-center gap-2 rounded-full px-4 py-1.5",
+					toneTintBackgroundClass[tone],
+					className,
+				)}
+				{...props}
+			/>
+		</EyebrowToneContext.Provider>
+	);
+}
+
+interface EyebrowDotProps extends React.ComponentProps<"span"> {
+	/** The hero variant pulses; the values variant is still. */
+	pulse?: boolean;
+}
+
+function Dot({ pulse = false, className, ...props }: EyebrowDotProps) {
+	const tone = useContext(EyebrowToneContext);
+
+	return (
+		<span
+			data-slot="eyebrow-dot"
+			className={cn(
+				"h-2 w-2 rounded-full",
+				pulse && "animate-pulse",
+				toneSolidBackgroundClass[tone],
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function Icon({ className, ...props }: React.ComponentProps<"span">) {
+	const tone = useContext(EyebrowToneContext);
+
+	return (
+		<span
+			data-slot="eyebrow-icon"
+			className={cn(
+				"flex items-center [&_svg]:h-4 [&_svg]:w-4",
+				toneTextClass[tone],
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function Label({ className, ...props }: React.ComponentProps<"span">) {
+	const tone = useContext(EyebrowToneContext);
+
+	return (
+		<span
+			data-slot="eyebrow-label"
+			className={cn("text-sm font-medium", toneTextClass[tone], className)}
+			{...props}
+		/>
+	);
+}
+
+export const Eyebrow = {
+	Root,
+	Dot,
+	Icon,
+	Label,
+};
+
+export type { EyebrowDotProps, EyebrowRootProps };
+export { type Tone, toneOptions };

package/src/components/feature-grid.tsx

@@ -0,0 +1,162 @@
+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 icon cards (pain points, benefits, product highlights). Compose: Root (tone,
+ * columns) > Card > CardIcon + CardTitle + CardDescription.
+ */
+
+const FeatureGridToneContext = createContext<Tone>("primary");
+
+const featureGridVariants = 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 FeatureGridVariants = VariantProps<typeof featureGridVariants>;
+
+const featureGridColumnsOptions = [
+	"2",
+	"3",
+	"4",
+] as const satisfies readonly NonNullable<FeatureGridVariants["columns"]>[];
+
+interface FeatureGridRootProps
+	extends React.ComponentProps<"div">,
+		FeatureGridVariants {
+	tone?: Tone;
+}
+
+function Root({
+	tone = "primary",
+	columns,
+	className,
+	...props
+}: FeatureGridRootProps) {
+	return (
+		<FeatureGridToneContext.Provider value={tone}>
+			<div
+				data-slot="feature-grid"
+				className={cn(featureGridVariants({ columns }), className)}
+				{...props}
+			/>
+		</FeatureGridToneContext.Provider>
+	);
+}
+
+const featureGridCardVariants = cva({
+	base: "h-full rounded-2xl bg-card text-card-foreground transition-all duration-200",
+	variants: {
+		variant: {
+			elevated: "border border-transparent p-8 shadow-lg",
+			outline: "border border-border p-8",
+		},
+	},
+	defaultVariants: {
+		variant: "elevated",
+	},
+});
+
+type FeatureGridCardVariants = VariantProps<typeof featureGridCardVariants>;
+
+const featureGridCardVariantOptions = [
+	"elevated",
+	"outline",
+] as const satisfies readonly NonNullable<FeatureGridCardVariants["variant"]>[];
+
+interface FeatureGridCardProps
+	extends React.ComponentProps<"div">,
+		FeatureGridCardVariants {}
+
+function Card({ variant, className, ...props }: FeatureGridCardProps) {
+	return (
+		<div
+			data-slot="feature-grid-card"
+			className={cn(featureGridCardVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+}
+
+interface FeatureGridCardIconProps extends React.ComponentProps<"span"> {
+	tone?: Tone;
+}
+
+function CardIcon({ tone, className, ...props }: FeatureGridCardIconProps) {
+	const inheritedTone = useContext(FeatureGridToneContext);
+	const resolvedTone = tone ?? inheritedTone;
+
+	return (
+		<span
+			data-slot="feature-grid-card-icon"
+			className={cn(
+				"mb-4 flex h-12 w-12 items-center justify-center rounded-xl [&_svg]:h-6 [&_svg]:w-6",
+				toneTintBackgroundClass[resolvedTone],
+				toneTextClass[resolvedTone],
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"h3">) {
+	return (
+		<h3
+			data-slot="feature-grid-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="feature-grid-card-description"
+			className={cn("text-sm leading-relaxed text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+export const FeatureGrid = {
+	Root,
+	Card,
+	CardIcon,
+	CardTitle,
+	CardDescription,
+};
+
+export type {
+	FeatureGridCardIconProps,
+	FeatureGridCardProps,
+	FeatureGridCardVariants,
+	FeatureGridRootProps,
+	FeatureGridVariants,
+};
+export {
+	featureGridCardVariantOptions,
+	featureGridCardVariants,
+	featureGridColumnsOptions,
+	featureGridVariants,
+};

package/src/components/heading-variants.ts

@@ -0,0 +1,41 @@
+import { cva, type VariantProps } from "@voila.dev/ui/cva";
+
+export const headingVariants = cva({
+	base: "font-heading font-bold tracking-tight text-foreground",
+	variants: {
+		level: {
+			h1: "text-4xl md:text-5xl lg:text-6xl",
+			h2: "text-3xl md:text-4xl lg:text-5xl",
+			h3: "text-2xl md:text-3xl",
+			h4: "text-xl md:text-2xl",
+			h5: "text-lg md:text-xl",
+			h6: "text-base md:text-lg",
+		},
+		align: {
+			left: "text-left",
+			center: "text-center",
+			right: "text-right",
+		},
+	},
+	defaultVariants: {
+		level: "h2",
+		align: "left",
+	},
+});
+
+export type HeadingVariants = VariantProps<typeof headingVariants>;
+
+export const headingLevelOptions = [
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+] as const satisfies readonly NonNullable<HeadingVariants["level"]>[];
+
+export const headingAlignOptions = [
+	"left",
+	"center",
+	"right",
+] as const satisfies readonly NonNullable<HeadingVariants["align"]>[];

package/src/components/heading.tsx

@@ -0,0 +1,47 @@
+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 HeadingVariants,
+	headingVariants,
+} from "#/components/heading-variants.ts";
+
+type HeadingLevel = NonNullable<HeadingVariants["level"]>;
+
+type HeadingProps = useRender.ComponentProps<"h2"> &
+	HeadingVariants & {
+		/** Sets both the rendered tag and the size scale (override the tag with `render`). */
+		level?: HeadingLevel;
+	};
+
+/** Marketing heading — `font-heading`, responsive size scale per level. */
+function Heading({
+	className,
+	render,
+	level = "h2",
+	align,
+	...props
+}: HeadingProps) {
+	return useRender({
+		defaultTagName: level,
+		props: mergeProps<"h2">(
+			{
+				className: cn(headingVariants({ level, align }), className),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "landing-heading",
+		},
+	});
+}
+
+export {
+	type HeadingVariants,
+	headingAlignOptions,
+	headingLevelOptions,
+	headingVariants,
+} from "#/components/heading-variants.ts";
+export { Heading, type HeadingLevel, type HeadingProps };

package/src/components/landing-hero.tsx

@@ -0,0 +1,144 @@
+import { cva, type VariantProps } from "@voila.dev/ui/cva";
+import { cn } from "@voila.dev/ui/lib/utils";
+
+import { Container } 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";
+import { type Tone, toneTextClass } from "#/lib/tones.ts";
+
+/**
+ * Landing page hero. Split layout = content column + illustration/media
+ * column; centered layout for
+ * media-less heroes. Compose: Root > Content (Eyebrow, Title + Highlight,
+ * Lead, Actions, StatsRow) + Media.
+ */
+
+const landingHeroLayoutVariants = cva({
+	base: "grid items-center gap-12",
+	variants: {
+		layout: {
+			split: "lg:grid-cols-2",
+			centered: "justify-items-center text-center",
+		},
+	},
+	defaultVariants: {
+		layout: "split",
+	},
+});
+
+type LandingHeroLayoutVariants = VariantProps<typeof landingHeroLayoutVariants>;
+
+const landingHeroLayoutOptions = [
+	"split",
+	"centered",
+] as const satisfies readonly NonNullable<
+	LandingHeroLayoutVariants["layout"]
+>[];
+
+interface LandingHeroRootProps
+	extends SectionProps,
+		LandingHeroLayoutVariants {}
+
+function Root({
+	layout,
+	spacing = "lg",
+	background,
+	className,
+	children,
+	...props
+}: LandingHeroRootProps) {
+	return (
+		<Section
+			spacing={spacing}
+			background={background}
+			className={cn("overflow-hidden", className)}
+			{...props}
+		>
+			<Container>
+				<div className={landingHeroLayoutVariants({ layout })}>{children}</div>
+			</Container>
+		</Section>
+	);
+}
+
+function Content({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="landing-hero-content"
+			className={cn("animate-fade-up max-w-2xl", className)}
+			{...props}
+		/>
+	);
+}
+
+function Title({ className, ...props }: HeadingProps) {
+	return <Heading level="h1" className={cn("mb-6", className)} {...props} />;
+}
+
+interface LandingHeroHighlightProps extends React.ComponentProps<"span"> {
+	tone?: Tone;
+}
+
+/** Colored span inside the title — the multi-tone headline of the home hero. */
+function Highlight({
+	tone = "primary",
+	className,
+	...props
+}: LandingHeroHighlightProps) {
+	return (
+		<span
+			data-slot="landing-hero-highlight"
+			className={cn(toneTextClass[tone], className)}
+			{...props}
+		/>
+	);
+}
+
+function Lead({ className, ...props }: TextProps) {
+	return (
+		<Text
+			variant="lead"
+			className={cn("mb-8 max-w-xl", className)}
+			{...props}
+		/>
+	);
+}
+
+function Actions({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="landing-hero-actions"
+			className={cn("flex flex-col gap-4 sm:flex-row", className)}
+			{...props}
+		/>
+	);
+}
+
+/** Illustration column — hidden below `lg`, like the Astro heroes. */
+function Media({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="landing-hero-media"
+			className={cn("hidden lg:block", className)}
+			{...props}
+		/>
+	);
+}
+
+export const LandingHero = {
+	Root,
+	Content,
+	Title,
+	Highlight,
+	Lead,
+	Actions,
+	Media,
+};
+
+export type {
+	LandingHeroHighlightProps,
+	LandingHeroLayoutVariants,
+	LandingHeroRootProps,
+};
+export { landingHeroLayoutOptions, landingHeroLayoutVariants };