love-ui 1.2.17 → 1.2.18

package/registry/default/blocks/contact3/app/page.tsx

@@ -0,0 +1,9 @@
+import { Contact } from "../components/contact";
+
+export default function Page() {
+	return (
+		<div className="min-h-screen w-full place-content-center overflow-hidden px-4">
+			<Contact />
+		</div>
+	);
+}

package/registry/default/blocks/contact3/components/contact.tsx

@@ -0,0 +1,152 @@
+import { cn } from "@/lib/utils";
+import type React from "react";
+import { GithubIcon } from "./icons/github-icon";
+import { XIcon } from "./icons/x-icon";
+import { FullWidthDivider } from "./full-width-divider";
+import { Mail, MapPin, Phone } from "lucide-react";
+
+const APP_EMAIL = "hello@loveui.dev";
+const APP_PHONE = "+1 555 014 2026";
+const APP_PHONE_2 = "+1 555 014 2027";
+
+export function Contact() {
+	const socialLinks = [
+		{
+			icon: <GithubIcon className="size-3.5 text-muted-foreground" />,
+			href: "#",
+			label: "GitHub",
+		},
+		{
+			icon: <XIcon className="size-3.5 text-muted-foreground" />,
+			href: "#",
+			label: "Twitter",
+		},
+	];
+
+	return (
+		<div className="relative mx-auto min-h-screen max-w-5xl border-x">
+			<div className="flex grow flex-col justify-center px-4 py-18 md:items-center">
+				<h1 className="font-bold text-4xl md:text-5xl">Contact Us</h1>
+				<p className="mb-5 text-base text-muted-foreground">
+					Contact Connor Love about LoveUI, source-first components, and block
+					implementation.
+				</p>
+			</div>
+			<FullWidthDivider />
+			<div className="grid md:grid-cols-3">
+				<Box
+					description="Send questions about LoveUI setup, component behavior, or registry installs."
+					icon={
+						<Mail
+						/>
+					}
+					title="Email"
+				>
+					<a
+						className="font-medium font-mono text-sm tracking-wide hover:underline"
+						href={`mailto:${APP_EMAIL}`}
+					>
+						{APP_EMAIL}
+					</a>
+				</Box>
+				<Box
+					description="LoveUI is built as a source-first UI system for product teams."
+					icon={
+						<MapPin
+						/>
+					}
+					title="Office"
+				>
+					<span className="font-medium font-mono text-sm tracking-wide">
+						Remote product studio by Connor Love
+					</span>
+				</Box>
+				<Box
+					className="border-b-0 md:border-r-0"
+					description="Use this channel for implementation help and product UI questions."
+					icon={
+						<Phone
+						/>
+					}
+					title="Phone"
+				>
+					<div>
+						<a
+							className="block font-medium font-mono text-sm tracking-wide hover:underline"
+							href={`tel:${APP_PHONE}`}
+						>
+							{APP_PHONE}
+						</a>
+						<a
+							className="block font-medium font-mono text-sm tracking-wide hover:underline"
+							href={`tel:${APP_PHONE_2}`}
+						>
+							{APP_PHONE_2}
+						</a>
+					</div>
+				</Box>
+			</div>
+			<FullWidthDivider />
+			<div className="z-1 flex h-full flex-col items-center justify-center gap-4 py-24">
+				<h2 className="text-center font-medium text-2xl text-muted-foreground tracking-tight md:text-3xl">
+					Find LoveUI <span className="text-foreground">online</span>
+				</h2>
+				<div className="flex flex-wrap items-center gap-2">
+					{socialLinks.map((link) => (
+						<a
+							className="flex items-center gap-x-2 rounded-full border bg-card px-3 py-1.5 shadow hover:bg-accent"
+							href={link.href}
+							key={link.label}
+							rel="noopener noreferrer"
+							target="_blank"
+						>
+							{link.icon}
+							<span className="font-medium font-mono text-xs tracking-wide">
+								{link.label}
+							</span>
+						</a>
+					))}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+type ContactBox = React.ComponentProps<"div"> & {
+	icon: React.ReactNode;
+	title: string;
+	description: string;
+};
+
+function Box({
+	title,
+	description,
+	className,
+	children,
+	...props
+}: ContactBox) {
+	return (
+		<div
+			className={cn(
+				"flex flex-col justify-between border-b md:border-r md:border-b-0",
+				className
+			)}
+		>
+			<div
+				className={cn(
+					"flex items-center gap-x-3 border-b bg-secondary/50 p-4 dark:bg-secondary/20",
+					"[&_svg]:size-5 [&_svg]:stroke-width-1 [&_svg]:text-muted-foreground"
+				)}
+			>
+				{props.icon}
+				<h2 className="font-heading font-medium text-lg tracking-wider">
+					{title}
+				</h2>
+			</div>
+			<div className="flex items-center gap-x-2 p-4 py-12">{children}</div>
+			<div className="border-t p-4">
+				<p className="text-muted-foreground text-sm">{description}</p>
+			</div>
+		</div>
+	);
+}

package/registry/default/blocks/contact3/components/full-width-divider.tsx

@@ -0,0 +1,33 @@
+import { cn } from "@/lib/utils";
+
+type FullWidthDividerProps = React.ComponentProps<"div"> & {
+	contained?: boolean;
+	position?: "top" | "bottom";
+};
+
+export function FullWidthDivider({
+	className,
+	contained = false,
+	position,
+	...props
+}: FullWidthDividerProps) {
+	return (
+		<div
+			aria-hidden="true"
+			className={cn(
+				"pointer-events-none absolute h-px bg-border",
+				// full-bleed (default)
+				"data-[contained=false]:left-1/2 data-[contained=false]:w-screen data-[contained=false]:-translate-x-1/2",
+				// contained
+				"data-[contained=true]:inset-x-0 data-[contained=true]:w-full",
+				// position
+				position &&
+					"data-[position=top]:-top-px data-[position=bottom]:-bottom-px",
+				className
+			)}
+			data-contained={contained}
+			data-position={position}
+			{...props}
+		/>
+	);
+}

package/registry/default/blocks/contact3/components/icons/github-icon.tsx

@@ -0,0 +1,10 @@
+export function GithubIcon(props: React.ComponentProps<"svg">) {
+	return (
+		<svg viewBox="0 0 438.549 438.549" {...props}>
+			<path
+				d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
+}

package/registry/default/blocks/contact3/components/icons/x-icon.tsx

@@ -0,0 +1,12 @@
+export function XIcon(props: React.ComponentProps<"svg">) {
+	return (
+		<svg
+			fill="currentColor"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+			{...props}
+		>
+			<path d="m18.9,1.153h3.682l-8.042,9.189,9.46,12.506h-7.405l-5.804-7.583-6.634,7.583H.469l8.6-9.831L0,1.153h7.593l5.241,6.931,6.065-6.931Zm-1.293,19.494h2.039L6.482,3.239h-2.19l13.314,17.408Z" />
+		</svg>
+	);
+}

package/registry/default/blocks/contact4/app/page.tsx

@@ -0,0 +1,9 @@
+import { ContactSection } from "../components/contact";
+
+export default function Page() {
+	return (
+		<div className="min-h-screen w-full place-content-center overflow-hidden px-4">
+			<ContactSection />
+		</div>
+	);
+}

package/registry/default/blocks/contact4/components/contact.tsx

@@ -0,0 +1,120 @@
+import { cn } from "@/lib/utils";
+import { Button } from "@/registry/default/ui/button";
+import { Field, FieldGroup, FieldLabel } from "@/registry/default/ui/field";
+import { Input } from "@/registry/default/ui/input";
+import { Textarea } from "@/registry/default/ui/textarea";
+import { MailIcon, PhoneIcon } from "lucide-react";
+
+const contactInfo = [
+	{
+		icon: (
+			<MailIcon
+			/>
+		),
+		label: "Email",
+		value: "hello@loveui.dev",
+	},
+	{
+		icon: (
+			<PhoneIcon
+			/>
+		),
+		label: "Phone",
+		value: "+1 555 014 2026",
+	},
+];
+
+export function ContactSection() {
+	return (
+		<div className="relative mx-auto grid h-full w-full max-w-4xl rounded-2xl border md:grid-cols-[1fr_0.70fr]">
+			<div className="col-span-1 flex flex-col space-y-4 p-8 lg:p-10">
+				<h1 className="font-medium text-2xl tracking-wide md:text-3xl">
+					Contact LoveUI
+				</h1>
+				<p className="max-w-md text-muted-foreground text-sm leading-relaxed md:text-base">
+					Have a question about components, blocks, registry setup, or using
+					LoveUI in your product? Send a note here.
+				</p>
+				<p className="max-w-md text-muted-foreground text-xs leading-relaxed md:text-sm">
+					Connor Love reviews product UI questions and implementation feedback.
+				</p>
+				<div className="grid gap-4">
+					{contactInfo?.map((info) => (
+						<ContactInfo key={info.label} {...info} />
+					))}
+				</div>
+			</div>
+			<div className="col-span-1 flex items-center border-t p-8 md:border-t-0 md:border-l">
+				<ContactForm />
+			</div>
+		</div>
+	);
+}
+
+function ContactForm() {
+	return (
+		<form className="w-full">
+			<FieldGroup>
+				<Field>
+					<FieldLabel htmlFor="full-name">Full name</FieldLabel>
+					<Input autoComplete="off" id="full-name" placeholder="Connor Love" />
+				</Field>
+				<Field>
+					<FieldLabel htmlFor="email">Email</FieldLabel>
+					<Input
+						autoComplete="off"
+						id="email"
+						placeholder="you@example.com"
+						type="email"
+					/>
+				</Field>
+				<Field>
+					<FieldLabel htmlFor="phone">Phone</FieldLabel>
+					<Input
+						autoComplete="off"
+						id="phone"
+						placeholder="+1 (555) 123-4567"
+						type="tel"
+					/>
+				</Field>
+				<Field>
+					<FieldLabel htmlFor="message">Message</FieldLabel>
+					<Textarea
+						autoComplete="off"
+						id="message"
+						placeholder="Tell us what you are building with LoveUI"
+					/>
+				</Field>
+			</FieldGroup>
+			<Button className="mt-8 w-full" type="button">
+				Submit
+			</Button>
+		</form>
+	);
+}
+
+type ContactInfoProps = React.ComponentProps<"div"> & {
+	icon: React.ReactNode;
+	label: string;
+	value: string;
+};
+
+function ContactInfo({
+	icon,
+	label,
+	value,
+	className,
+	...props
+}: ContactInfoProps) {
+	return (
+		<div className={cn("flex items-center gap-3 py-3", className)} {...props}>
+			<div className="rounded-lg border bg-card p-3 shadow-xs [&_svg]:size-5">
+				{icon}
+			</div>
+			<div>
+				<p className="font-medium">{label}</p>
+				<p className="text-muted-foreground text-xs">{value}</p>
+			</div>
+		</div>
+	);
+}

package/registry/default/blocks/contact5/app/page.tsx

@@ -0,0 +1,9 @@
+import { ContactSection } from "../components/contact";
+
+export default function Page() {
+	return (
+		<div className="min-h-screen w-full place-content-center overflow-hidden px-4">
+			<ContactSection />
+		</div>
+	);
+}

package/registry/default/blocks/contact5/components/contact.tsx

@@ -0,0 +1,119 @@
+import { cn } from "@/lib/utils";
+import { Button } from "@/registry/default/ui/button";
+import { Field, FieldGroup, FieldLabel } from "@/registry/default/ui/field";
+import { Input } from "@/registry/default/ui/input";
+import { Textarea } from "@/registry/default/ui/textarea";
+import { DecorIcon } from "./decor-icon";
+import { Phone, Mail } from "lucide-react";
+
+const data = [
+	{
+		title: "Talk LoveUI",
+		value: "+1 (555) 014-2026",
+		icon: (
+			<Phone
+			/>
+		),
+	},
+	{
+		title: "Email the team",
+		value: "hello@loveui.dev",
+		icon: (
+			<Mail
+			/>
+		),
+	},
+];
+
+export function ContactSection() {
+	return (
+		<div className="relative mx-auto w-full max-w-lg border">
+			<div className="border-b px-6 py-8">
+				<div className="mb-8 flex flex-col gap-2">
+					<h1 className="font-semibold text-xl md:text-2xl">Get in touch</h1>{" "}
+					<p className="text-muted-foreground text-sm">
+						Have a LoveUI question, block request, or implementation idea?{" "}
+						<br /> Send Connor Love a note.
+					</p>
+				</div>
+
+				<div className="grid gap-2 md:grid-cols-2">
+					{data.map((item) => (
+						<div className="flex items-center gap-4 p-2" key={item.title}>
+							<div className="[&_svg]:size-5 [&_svg]:text-muted-foreground">
+								{item.icon}
+							</div>
+							<div className={cn("flex flex-col gap-y-0.5")}>
+								<h2 className="text-sm">{item.title}</h2>
+								<p className="text-muted-foreground text-xs">{item.value}</p>
+							</div>
+						</div>
+					))}
+				</div>
+			</div>
+
+			<div className="px-6 py-8">
+				<div className="mb-8 flex flex-col gap-1.5">
+					<h2 className="font-medium text-xl">Send a message</h2>{" "}
+					<p className="text-muted-foreground text-sm">
+						Tell us how you are using LoveUI and what would make the registry
+						better.
+					</p>
+				</div>
+				<ContactForm />
+			</div>
+			<DecorIcon position="top-left" />
+			<DecorIcon position="top-right" />
+			<DecorIcon position="bottom-left" />
+			<DecorIcon position="bottom-right" />
+		</div>
+	);
+}
+
+function ContactForm() {
+	return (
+		<form className="w-full">
+			<FieldGroup>
+				<div className="grid grid-cols-2 gap-4">
+					<Field>
+						<FieldLabel htmlFor="first-name">First name</FieldLabel>
+						<Input autoComplete="off" id="first-name" placeholder="Connor" />
+					</Field>
+					<Field>
+						<FieldLabel htmlFor="last-name">Last name</FieldLabel>
+						<Input autoComplete="off" id="last-name" placeholder="Love" />
+					</Field>
+				</div>
+				<Field>
+					<FieldLabel htmlFor="email">Email</FieldLabel>
+					<Input
+						autoComplete="off"
+						id="email"
+						placeholder="you@example.com"
+						type="email"
+					/>
+				</Field>
+				<Field>
+					<FieldLabel htmlFor="phone">Phone</FieldLabel>
+					<Input
+						autoComplete="off"
+						id="phone"
+						placeholder="+1 (555) 123-4567"
+						type="tel"
+					/>
+				</Field>
+				<Field>
+					<FieldLabel htmlFor="message">Message</FieldLabel>
+					<Textarea
+						autoComplete="off"
+						id="message"
+						placeholder="Tell us what you are building with LoveUI"
+					/>
+				</Field>
+			</FieldGroup>
+			<Button className="mt-8 w-full" type="button">
+				Submit
+			</Button>
+		</form>
+	);
+}

package/registry/default/blocks/contact5/components/decor-icon.tsx

@@ -0,0 +1,45 @@
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const DecorIconVariants = cva(
+	"pointer-events-none absolute z-1 size-5 shrink-0 stroke-1 stroke-muted-foreground",
+	{
+		variants: {
+			position: {
+				"top-left":
+					"top-0 left-0 -translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
+				"top-right":
+					"top-0 right-0 translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
+				"bottom-right":
+					"right-0 bottom-0 translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
+				"bottom-left":
+					"bottom-0 left-0 -translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
+			},
+		},
+		defaultVariants: {
+			position: "top-left",
+		},
+	}
+);
+
+type DecorIconProps = React.ComponentProps<"svg"> &
+	VariantProps<typeof DecorIconVariants>;
+
+export function DecorIcon({ position, className, ...props }: DecorIconProps) {
+	return (
+		<svg
+			aria-hidden="true"
+			className={cn(DecorIconVariants({ position, className }))}
+			fill="none"
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+			{...props}
+		>
+			<path d="M5 12h14" />
+			<path d="M12 5v14" />
+		</svg>
+	);
+}

package/registry/default/blocks/cta-1/app/page.tsx

@@ -0,0 +1,9 @@
+import { CallToAction } from "../components/cta";
+
+export default function Page() {
+	return (
+		<div className="flex min-h-screen items-center justify-center p-4">
+			<CallToAction />
+		</div>
+	);
+}

package/registry/default/blocks/cta-1/components/cta.tsx

@@ -0,0 +1,20 @@
+import { Button } from "@/registry/default/ui/button";
+import { FullWidthDivider } from "./full-width-divider";
+
+export function CallToAction() {
+	return (
+		<div className="relative mx-auto flex w-full max-w-3xl flex-col justify-between border-x md:flex-row">
+			<FullWidthDivider className="-top-px" />
+			<div className="border-b p-4 md:border-b-0">
+				<h2 className="text-center font-bold text-lg md:text-left md:text-2xl">
+					Ship cleaner dashboards this week.
+				</h2>
+			</div>
+			<div className="flex items-center justify-center gap-2 p-4 md:border-l">
+				<Button variant="secondary">Book a Demo</Button>
+				<Button>Start Building</Button>
+			</div>
+			<FullWidthDivider className="-bottom-px" />
+		</div>
+	);
+}

package/registry/default/blocks/cta-1/components/full-width-divider.tsx

@@ -0,0 +1,33 @@
+import { cn } from "@/lib/utils";
+
+type FullWidthDividerProps = React.ComponentProps<"div"> & {
+	contained?: boolean;
+	position?: "top" | "bottom";
+};
+
+export function FullWidthDivider({
+	className,
+	contained = false,
+	position,
+	...props
+}: FullWidthDividerProps) {
+	return (
+		<div
+			aria-hidden="true"
+			className={cn(
+				"pointer-events-none absolute h-px bg-border",
+				// full-bleed (default)
+				"data-[contained=false]:left-1/2 data-[contained=false]:w-screen data-[contained=false]:-translate-x-1/2",
+				// contained
+				"data-[contained=true]:inset-x-0 data-[contained=true]:w-full",
+				// position
+				position &&
+					"data-[position=top]:-top-px data-[position=bottom]:-bottom-px",
+				className
+			)}
+			data-contained={contained}
+			data-position={position}
+			{...props}
+		/>
+	);
+}

package/registry/default/blocks/cta-2/app/page.tsx

@@ -0,0 +1,9 @@
+import { CallToAction } from "../components/cta";
+
+export default function Page() {
+	return (
+		<div className="flex min-h-screen items-center justify-center p-4">
+			<CallToAction />
+		</div>
+	);
+}

package/registry/default/blocks/cta-2/components/cta.tsx

@@ -0,0 +1,27 @@
+import { Button } from "@/registry/default/ui/button";
+import { FullWidthDivider } from "./full-width-divider";
+import { ArrowRightIcon } from "lucide-react";
+
+export function CallToAction() {
+	return (
+		<div className="relative mx-auto flex w-full max-w-3xl flex-col justify-between border-x">
+			<FullWidthDivider className="-top-px" />
+			<div className="border-b px-2 py-8">
+				<h2 className="text-center font-semibold text-lg md:text-2xl">
+					Turn scattered work into one clear launch plan.
+				</h2>
+				<p className="text-balance text-center text-muted-foreground text-sm md:text-base">
+					Bring tasks, owners, and decisions together before the next sprint.
+				</p>
+			</div>
+			<div className="flex items-center justify-center gap-2 bg-secondary/80 p-4 dark:bg-secondary/40">
+				<Button variant="outline">See Plans</Button>
+				<Button>
+					Create Workspace{" "}
+					<ArrowRightIcon data-icon="inline-end" />
+				</Button>
+			</div>
+			<FullWidthDivider className="-bottom-px" />
+		</div>
+	);
+}

package/registry/default/blocks/cta-2/components/full-width-divider.tsx

@@ -0,0 +1,33 @@
+import { cn } from "@/lib/utils";
+
+type FullWidthDividerProps = React.ComponentProps<"div"> & {
+	contained?: boolean;
+	position?: "top" | "bottom";
+};
+
+export function FullWidthDivider({
+	className,
+	contained = false,
+	position,
+	...props
+}: FullWidthDividerProps) {
+	return (
+		<div
+			aria-hidden="true"
+			className={cn(
+				"pointer-events-none absolute h-px bg-border",
+				// full-bleed (default)
+				"data-[contained=false]:left-1/2 data-[contained=false]:w-screen data-[contained=false]:-translate-x-1/2",
+				// contained
+				"data-[contained=true]:inset-x-0 data-[contained=true]:w-full",
+				// position
+				position &&
+					"data-[position=top]:-top-px data-[position=bottom]:-bottom-px",
+				className
+			)}
+			data-contained={contained}
+			data-position={position}
+			{...props}
+		/>
+	);
+}

package/registry/default/blocks/cta-3/app/page.tsx

@@ -0,0 +1,9 @@
+import { CallToAction } from "../components/cta";
+
+export default function Page() {
+	return (
+		<div className="flex min-h-screen items-center justify-center p-4">
+			<CallToAction />
+		</div>
+	);
+}