@voila.dev/ui-landing 1.1.9

package/src/components/site-footer.tsx

@@ -0,0 +1,190 @@
+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";
+
+/**
+ * Marketing site footer.
+ * Compose: Root > Columns (Brand > BrandDescription + SocialLinks >
+ * SocialLink…, Column > ColumnTitle + ColumnList > ColumnLink…) + Bottom >
+ * BottomText…
+ */
+
+function Root({
+	className,
+	children,
+	...props
+}: React.ComponentProps<"footer">) {
+	return (
+		<footer
+			data-slot="site-footer"
+			className={cn("border-t border-border bg-muted/30", className)}
+			{...props}
+		>
+			<Container>{children}</Container>
+		</footer>
+	);
+}
+
+function Columns({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="site-footer-columns"
+			className={cn(
+				"grid gap-8 py-12 md:grid-cols-2 md:py-16 lg:grid-cols-6",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+/** Brand column — logo + description + social links; spans two columns. */
+function Brand({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="site-footer-brand"
+			className={cn("lg:col-span-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function BrandDescription({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<p
+			data-slot="site-footer-brand-description"
+			className={cn("mb-6 max-w-sm text-sm text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+function SocialLinks({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="site-footer-social-links"
+			className={cn("flex items-center gap-4", className)}
+			{...props}
+		/>
+	);
+}
+
+interface SiteFooterSocialLinkProps extends useRender.ComponentProps<"a"> {
+	"aria-label": string;
+}
+
+function SocialLink({
+	className,
+	render,
+	...props
+}: SiteFooterSocialLinkProps) {
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps<"a">(
+			{
+				className: cn(
+					"text-muted-foreground transition-colors hover:text-foreground [&_svg]:h-5 [&_svg]:w-5",
+					className,
+				),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "site-footer-social-link",
+		},
+	});
+}
+
+function Column({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div data-slot="site-footer-column" className={className} {...props} />
+	);
+}
+
+function ColumnTitle({ className, ...props }: React.ComponentProps<"h3">) {
+	return (
+		<h3
+			data-slot="site-footer-column-title"
+			className={cn("mb-4 text-sm font-semibold text-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+function ColumnList({ className, ...props }: React.ComponentProps<"ul">) {
+	return (
+		<ul
+			data-slot="site-footer-column-list"
+			className={cn("space-y-3", className)}
+			{...props}
+		/>
+	);
+}
+
+function ColumnLink({
+	className,
+	render,
+	...props
+}: useRender.ComponentProps<"a">) {
+	const anchor = useRender({
+		defaultTagName: "a",
+		props: mergeProps<"a">(
+			{
+				className: cn(
+					"text-sm text-muted-foreground transition-colors hover:text-foreground",
+					className,
+				),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "site-footer-column-link",
+		},
+	});
+
+	return <li>{anchor}</li>;
+}
+
+function Bottom({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="site-footer-bottom"
+			className={cn(
+				"flex flex-col items-center justify-between gap-4 border-t border-border py-6 md:flex-row",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function BottomText({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<p
+			data-slot="site-footer-bottom-text"
+			className={cn("text-sm text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+export const SiteFooter = {
+	Root,
+	Columns,
+	Brand,
+	BrandDescription,
+	SocialLinks,
+	SocialLink,
+	Column,
+	ColumnTitle,
+	ColumnList,
+	ColumnLink,
+	Bottom,
+	BottomText,
+};
+
+export type { SiteFooterSocialLinkProps };

package/src/components/site-header.tsx

@@ -0,0 +1,254 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { ListIcon, XIcon } from "@phosphor-icons/react";
+import { cn } from "@voila.dev/ui/lib/utils";
+import { createContext, useContext, useState } from "react";
+
+import { Container } from "#/components/container.tsx";
+
+/**
+ * Sticky marketing site header. Compose: Root > Bar (Brand + Nav > NavList >
+ * NavItem… + Actions + MobileToggle) + MobileMenu > MobileNavItem… +
+ * MobileActions. The mobile menu server-renders closed and hydrates.
+ */
+
+interface SiteHeaderContextValue {
+	open: boolean;
+	toggle: () => void;
+}
+
+const SiteHeaderContext = createContext<SiteHeaderContextValue>({
+	open: false,
+	toggle: () => {},
+});
+
+interface SiteHeaderRootProps extends React.ComponentProps<"header"> {
+	defaultOpen?: boolean;
+}
+
+function Root({
+	defaultOpen = false,
+	className,
+	...props
+}: SiteHeaderRootProps) {
+	const [open, setOpen] = useState(defaultOpen);
+
+	return (
+		<SiteHeaderContext.Provider
+			value={{ open, toggle: () => setOpen((value) => !value) }}
+		>
+			<header
+				data-slot="site-header"
+				className={cn(
+					"sticky top-0 z-50 w-full border-b border-border/40 bg-background/80 backdrop-blur-lg",
+					className,
+				)}
+				{...props}
+			/>
+		</SiteHeaderContext.Provider>
+	);
+}
+
+interface SiteHeaderBarProps extends React.ComponentProps<"nav"> {
+	"aria-label"?: string;
+}
+
+function Bar({
+	className,
+	children,
+	"aria-label": ariaLabel = "Main",
+	...props
+}: SiteHeaderBarProps) {
+	return (
+		<Container>
+			<nav
+				data-slot="site-header-bar"
+				aria-label={ariaLabel}
+				className={cn("flex h-16 items-center justify-between", className)}
+				{...props}
+			>
+				{children}
+			</nav>
+		</Container>
+	);
+}
+
+/** Logo slot — an anchor by default; pass `render` for a router Link. */
+function Brand({ className, render, ...props }: useRender.ComponentProps<"a">) {
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps<"a">(
+			{
+				className: cn("flex items-center", className),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "site-header-brand",
+		},
+	});
+}
+
+/** Desktop-only nav area: link list + call-to-action cluster. */
+function Nav({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="site-header-nav"
+			className={cn("hidden items-center gap-8 md:flex", className)}
+			{...props}
+		/>
+	);
+}
+
+function NavList({ className, ...props }: React.ComponentProps<"ul">) {
+	return (
+		<ul
+			data-slot="site-header-nav-list"
+			className={cn("flex items-center gap-6", className)}
+			{...props}
+		/>
+	);
+}
+
+function NavItem({
+	className,
+	render,
+	...props
+}: useRender.ComponentProps<"a">) {
+	const anchor = useRender({
+		defaultTagName: "a",
+		props: mergeProps<"a">(
+			{
+				className: cn(
+					"text-sm font-medium text-muted-foreground transition-colors hover:text-foreground",
+					className,
+				),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "site-header-nav-item",
+		},
+	});
+
+	return <li>{anchor}</li>;
+}
+
+function Actions({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="site-header-actions"
+			className={cn("flex items-center gap-3", className)}
+			{...props}
+		/>
+	);
+}
+
+interface SiteHeaderMobileToggleProps extends React.ComponentProps<"button"> {
+	"aria-label": string;
+}
+
+function MobileToggle({ className, ...props }: SiteHeaderMobileToggleProps) {
+	const { open, toggle } = useContext(SiteHeaderContext);
+
+	return (
+		<button
+			type="button"
+			data-slot="site-header-mobile-toggle"
+			aria-expanded={open}
+			onClick={toggle}
+			className={cn(
+				"flex h-10 w-10 items-center justify-center rounded-md hover:bg-accent md:hidden",
+				className,
+			)}
+			{...props}
+		>
+			{open ? <XIcon className="h-6 w-6" /> : <ListIcon className="h-6 w-6" />}
+		</button>
+	);
+}
+
+function MobileMenu({
+	className,
+	children,
+	...props
+}: React.ComponentProps<"div">) {
+	const { open } = useContext(SiteHeaderContext);
+
+	return (
+		<div
+			data-slot="site-header-mobile-menu"
+			className={cn(
+				"border-t border-border bg-background md:hidden",
+				!open && "hidden",
+				className,
+			)}
+			{...props}
+		>
+			<Container>
+				<ul className="flex flex-col gap-2 py-4">{children}</ul>
+			</Container>
+		</div>
+	);
+}
+
+function MobileNavItem({
+	className,
+	render,
+	...props
+}: useRender.ComponentProps<"a">) {
+	const anchor = useRender({
+		defaultTagName: "a",
+		props: mergeProps<"a">(
+			{
+				className: cn(
+					"block rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+					className,
+				),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "site-header-mobile-nav-item",
+		},
+	});
+
+	return <li>{anchor}</li>;
+}
+
+/** Call-to-action cluster closing the mobile menu. */
+function MobileActions({ className, ...props }: React.ComponentProps<"li">) {
+	return (
+		<li
+			data-slot="site-header-mobile-actions"
+			className={cn(
+				"mt-2 flex flex-col gap-2 border-t border-border pt-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export const SiteHeader = {
+	Root,
+	Bar,
+	Brand,
+	Nav,
+	NavList,
+	NavItem,
+	Actions,
+	MobileToggle,
+	MobileMenu,
+	MobileNavItem,
+	MobileActions,
+};
+
+export type {
+	SiteHeaderBarProps,
+	SiteHeaderMobileToggleProps,
+	SiteHeaderRootProps,
+};

package/src/components/stats-row.tsx

@@ -0,0 +1,69 @@
+import { cn } from "@voila.dev/ui/lib/utils";
+
+/**
+ * Horizontal row of value/label stats separated by hairline dividers, the kind
+ * that usually closes a hero.
+ */
+
+interface StatsRowRootProps extends React.ComponentProps<"div"> {
+	/** Adds the top hairline + spacing used when the row closes a hero. */
+	bordered?: boolean;
+}
+
+function Root({ bordered = true, className, ...props }: StatsRowRootProps) {
+	return (
+		<div
+			data-slot="stats-row"
+			className={cn(
+				"flex items-center gap-6 sm:gap-8",
+				bordered && "mt-10 border-t border-border/50 pt-8",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function Item({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="stats-row-item" className={className} {...props} />;
+}
+
+function Value({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<p
+			data-slot="stats-row-value"
+			className={cn("text-3xl font-bold text-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+function Label({ className, ...props }: React.ComponentProps<"p">) {
+	return (
+		<p
+			data-slot="stats-row-label"
+			className={cn("text-sm text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+function Divider({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="stats-row-divider"
+			className={cn("h-12 w-px bg-border", className)}
+			{...props}
+		/>
+	);
+}
+
+export const StatsRow = {
+	Root,
+	Item,
+	Value,
+	Label,
+	Divider,
+};
+
+export type { StatsRowRootProps };