love-ui 1.2.15 → 1.2.18

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

@@ -0,0 +1,35 @@
+import { Button } from "@/registry/default/ui/button";
+import { DecorIcon } from "./decor-icon";
+import { ArrowRightIcon } from "lucide-react";
+
+export function CallToAction() {
+	return (
+		<div className="relative mx-auto flex w-full max-w-3xl flex-col justify-between gap-y-4 border-y px-4 py-8 dark:bg-[radial-gradient(35%_80%_at_25%_0%,--theme(--color-foreground/.08),transparent)]">
+			<DecorIcon className="size-4" position="top-left" />
+			<DecorIcon className="size-4" position="top-right" />
+			<DecorIcon className="size-4" position="bottom-left" />
+			<DecorIcon className="size-4" position="bottom-right" />
+
+			<div className="pointer-events-none absolute -inset-y-6 -left-px w-px border-l" />
+			<div className="pointer-events-none absolute -inset-y-6 -right-px w-px border-r" />
+
+			<div className="absolute top-0 left-1/2 -z-10 h-full border-l border-dashed" />
+
+			<h2 className="text-center font-semibold text-xl md:text-3xl">
+				Give your team the context they keep asking for.
+			</h2>
+			<p className="text-balance text-center font-medium text-muted-foreground text-sm md:text-base">
+				Publish a shared source of truth for roadmap notes, customer feedback,
+				and launch decisions.
+			</p>
+
+			<div className="flex items-center justify-center gap-2">
+				<Button variant="outline">View Examples</Button>
+				<Button>
+					Open a Board{" "}
+					<ArrowRightIcon data-icon="inline-end" />
+				</Button>
+			</div>
+		</div>
+	);
+}

package/registry/default/blocks/cta-3/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-4/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-4/components/cta.tsx

@@ -0,0 +1,28 @@
+import { Button } from "@/registry/default/ui/button";
+import { CreditCardIcon, ArrowRightIcon } from "lucide-react";
+
+export function CallToAction() {
+	return (
+		<div className="relative mx-auto flex w-full max-w-3xl flex-col justify-between gap-y-6 rounded-4xl border bg-card px-4 py-8 shadow-sm md:py-10 dark:bg-card/50">
+			<div className="space-y-2">
+				<h2 className="text-center font-semibold text-lg tracking-tight md:text-2xl">
+					A faster approval loop starts here.
+				</h2>
+				<p className="text-balance text-center text-muted-foreground text-sm md:text-base">
+					Invite reviewers, collect notes, and approve changes. No credit card{" "}
+					<CreditCardIcon className="inline-block size-4" />{" "}
+					required.
+				</p>
+			</div>
+			<div className="flex items-center justify-center gap-2">
+				<Button className="shadow" variant="secondary">
+					Preview Flow
+				</Button>
+				<Button className="shadow">
+					Start Review{" "}
+					<ArrowRightIcon data-icon="inline-end" />
+				</Button>
+			</div>
+		</div>
+	);
+}

package/registry/default/blocks/cta-5/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-5/components/cta.tsx

@@ -0,0 +1,72 @@
+import { Button } from "@/registry/default/ui/button";
+import {
+	InputGroup,
+	InputGroupAddon,
+	InputGroupInput,
+} from "@/registry/default/ui/input-group";
+import { FullWidthDivider } from "./full-width-divider";
+import { AtSignIcon, ArrowRightIcon } from "lucide-react";
+
+export function CallToAction() {
+	return (
+		<div className="relative mx-auto flex w-full max-w-3xl flex-col justify-between gap-y-6 border-x bg-secondary/80 px-2 py-8 md:px-4 dark:bg-secondary/40">
+			<FullWidthDivider className="-top-px" />
+
+			<div className="space-y-1">
+				<h2 className="text-center font-semibold text-2xl tracking-tight md:text-4xl">
+					Get the field notes before everyone else
+				</h2>
+				<p className="text-balance text-center text-muted-foreground text-sm md:text-base">
+					Monthly product lessons, interface patterns, and teardown notes.
+				</p>
+			</div>
+			<div className="flex items-center justify-center gap-2">
+				<InputGroup className="max-w-[280px] bg-card">
+					<InputGroupInput placeholder="you@company.com" />
+					<InputGroupAddon>
+						<AtSignIcon data-icon="inline-start" />
+					</InputGroupAddon>
+				</InputGroup>
+
+				<Button>
+					Join List{" "}
+					<ArrowRightIcon data-icon="inline-end" />
+				</Button>
+			</div>
+			<div className="flex items-center justify-center gap-2">
+				<p className="text-muted-foreground text-sm">
+					Read by{" "}
+					<span className="font-medium text-foreground">4,200 builders</span>.
+				</p>
+				<div className="flex -space-x-[0.45rem] *:rounded-full *:ring-2 *:ring-background">
+					<img
+						alt="Avatar 01"
+						height={24}
+						src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=72"
+						width={24}
+					/>
+					<img
+						alt="Avatar 02"
+						height={24}
+						src="https://images.unsplash.com/photo-1485206412256-701ccc5b93ca?q=80&w=72"
+						width={24}
+					/>
+					<img
+						alt="Avatar 03"
+						height={24}
+						src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&w=72"
+						width={24}
+					/>
+					<img
+						alt="Avatar 04"
+						height={24}
+						src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?q=80&w=72"
+						width={24}
+					/>
+				</div>
+			</div>
+
+			<FullWidthDivider className="-bottom-px" />
+		</div>
+	);
+}

package/registry/default/blocks/cta-5/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/faq-1/app/page.tsx

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

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

@@ -0,0 +1,86 @@
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/registry/default/ui/accordion";
+
+export function FaqsSection() {
+	return (
+		<div className="mx-auto w-full max-w-2xl space-y-7 px-4">
+			<div className="space-y-2">
+				<h2 className="font-semibold text-3xl md:text-4xl">
+					Frequently Asked Questions
+				</h2>
+				<p className="max-w-2xl text-muted-foreground">
+					Here are some common questions and answers that you might encounter
+					when using LoveUI. If you don't find the answer you're looking for,
+					feel free to reach out.
+				</p>
+			</div>
+			<Accordion className="rounded-lg border" collapsible type="single">
+				{questions.map((item) => (
+					<AccordionItem className="px-4" key={item.id} value={item.id}>
+						<AccordionTrigger className="py-4 hover:no-underline focus-visible:underline focus-visible:ring-0">
+							{item.title}
+						</AccordionTrigger>
+						<AccordionContent className="pb-4! text-muted-foreground">
+							{item.content}
+						</AccordionContent>
+					</AccordionItem>
+				))}
+			</Accordion>
+			<p className="text-muted-foreground">
+				Can't find what you're looking for? Contact our{" "}
+				<a className="text-primary hover:underline" href="#">
+					customer support team
+				</a>
+			</p>
+		</div>
+	);
+}
+
+const questions = [
+	{
+		id: "item-1",
+		title: "What is LoveUI?",
+		content:
+			"LoveUI is an open-source collection of React components, examples, blocks, and patterns for building polished interfaces with Tailwind CSS.",
+	},
+	{
+		id: "item-2",
+		title: "Who can benefit from LoveUI?",
+		content:
+			"LoveUI is built for founders, product teams, agencies, and developers who want editable UI source instead of a black-box component package.",
+	},
+	{
+		id: "item-3",
+		title: "What does LoveUI include?",
+		content:
+			"LoveUI includes reusable UI components, production-ready examples, full-page blocks, documentation, and an optional skill pack for AI coding agents.",
+	},
+	{
+		id: "item-4",
+		title: "Can I customize LoveUI components?",
+		content:
+			"Yes. The CLI copies component source into your project, so you can inspect the code, change the styles, and keep only the pieces you need.",
+	},
+	{
+		id: "item-5",
+		title: "Does LoveUI work with my existing app?",
+		content:
+			"Yes. LoveUI works well in React projects using Tailwind CSS. You can add individual components and adjust import paths to match your app.",
+	},
+	{
+		id: "item-6",
+		title: "Where can I get help with LoveUI?",
+		content:
+			"Start with the docs and registry examples. If something looks wrong, open an issue or inspect the copied source directly in your project.",
+	},
+	{
+		id: "item-7",
+		title: "How do I get started with LoveUI?",
+		content:
+			"Run npx love-ui@latest add loveui to install the shared setup, then add components or blocks as your interface needs them.",
+	},
+];

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

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

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

@@ -0,0 +1,93 @@
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/registry/default/ui/accordion";
+
+export function FaqsSection() {
+	return (
+		<div className="mx-auto min-h-screen w-full max-w-5xl lg:border-x">
+			<div className="mx-4 grid h-[calc(100vh-3.5rem)] grid-cols-1 border-x md:mx-0 md:grid-cols-2 md:border-x-0">
+				<div className="space-y-4 px-4 pt-12 pb-4 md:border-r">
+					<h2 className="font-black text-3xl md:text-4xl">FAQs</h2>
+					<p className="text-muted-foreground">
+						Here are some common questions and answers that you might encounter
+						when using LoveUI.
+					</p>
+				</div>
+				<div className="place-content-center">
+					<Accordion
+						className="rounded-none border-x-0 border-y"
+						collapsible
+						type="single"
+					>
+						{questions.map((item) => (
+							<AccordionItem className="px-4" key={item.id} value={item.id}>
+								<AccordionTrigger className="py-4 hover:no-underline focus-visible:underline focus-visible:ring-0">
+									{item.title}
+								</AccordionTrigger>
+								<AccordionContent className="pb-4 text-muted-foreground">
+									{item.content}
+								</AccordionContent>
+							</AccordionItem>
+						))}
+					</Accordion>
+				</div>
+			</div>
+			<div className="flex h-14 items-center justify-center border-t">
+				<p className="text-muted-foreground">
+					Can't find what you're looking for?{" "}
+					<a className="text-primary hover:underline" href="#">
+						Contact Us
+					</a>
+				</p>
+			</div>
+		</div>
+	);
+}
+
+const questions = [
+	{
+		id: "item-1",
+		title: "What is LoveUI?",
+		content:
+			"LoveUI is an open-source collection of React components, examples, blocks, and patterns for building polished interfaces with Tailwind CSS.",
+	},
+	{
+		id: "item-2",
+		title: "Who can benefit from LoveUI?",
+		content:
+			"LoveUI is built for founders, product teams, agencies, and developers who want editable UI source instead of a black-box component package.",
+	},
+	{
+		id: "item-3",
+		title: "What does LoveUI include?",
+		content:
+			"LoveUI includes reusable UI components, production-ready examples, full-page blocks, documentation, and an optional skill pack for AI coding agents.",
+	},
+	{
+		id: "item-4",
+		title: "Can I customize LoveUI components?",
+		content:
+			"Yes. The CLI copies component source into your project, so you can inspect the code, change the styles, and keep only the pieces you need.",
+	},
+	{
+		id: "item-5",
+		title: "Does LoveUI work with my existing app?",
+		content:
+			"Yes. LoveUI works well in React projects using Tailwind CSS. You can add individual components and adjust import paths to match your app.",
+	},
+	{
+		id: "item-6",
+		title: "Where can I get help with LoveUI?",
+		content:
+			"Start with the docs and registry examples. If something looks wrong, open an issue or inspect the copied source directly in your project.",
+	},
+	{
+		id: "item-7",
+		title: "How do I get started with LoveUI?",
+		content:
+			"Run npx love-ui@latest add loveui to install the shared setup, then add components or blocks as your interface needs them.",
+	},
+];

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

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

package/registry/default/blocks/faq-3/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/faq-3/components/faq.tsx

@@ -0,0 +1,110 @@
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/registry/default/ui/accordion";
+import { DecorIcon } from "./decor-icon";
+
+export function FaqsSection() {
+	return (
+		<section className="mx-auto grid min-h-screen w-full max-w-5xl grid-cols-1 md:grid-cols-2 lg:border-x">
+			<div className="px-4 pt-12 pb-6">
+				<div className="space-y-5">
+					<h2 className="text-balance font-bold text-4xl md:text-6xl lg:font-black">
+						Frequently Asked Questions
+					</h2>
+					<p className="text-muted-foreground">
+						Quick answers to common questions about LoveUI. Open any question to
+						learn more.
+					</p>
+					<p className="text-muted-foreground">
+						{"Can't find what you're looking for? "}
+						<a className="text-primary hover:underline" href="#">
+							Contact Us
+						</a>
+					</p>
+				</div>
+			</div>
+			<div className="relative place-content-center">
+				{/* vertical guide line */}
+				<div
+					aria-hidden="true"
+					className="pointer-events-none absolute inset-y-0 left-3 h-full w-px bg-border"
+				/>
+
+				<Accordion
+					className="rounded-none border-x-0 border-y"
+					collapsible
+					type="single"
+				>
+					{faqs.map((item) => (
+						<AccordionItem
+							className="group relative pl-5"
+							key={item.id}
+							value={item.id}
+						>
+							<DecorIcon
+								className="left-[13px] size-3 group-last:hidden"
+								position="bottom-left"
+							/>
+
+							<AccordionTrigger className="px-4 py-4 hover:no-underline focus-visible:underline focus-visible:ring-0">
+								{item.title}
+							</AccordionTrigger>
+
+							<AccordionContent className="px-4 pb-4 text-muted-foreground">
+								{item.content}
+							</AccordionContent>
+						</AccordionItem>
+					))}
+				</Accordion>
+			</div>
+		</section>
+	);
+}
+
+const faqs = [
+	{
+		id: "item-1",
+		title: "What is LoveUI?",
+		content:
+			"LoveUI is an open-source collection of React components, examples, blocks, and patterns for building polished interfaces with Tailwind CSS.",
+	},
+	{
+		id: "item-2",
+		title: "Who can benefit from LoveUI?",
+		content:
+			"LoveUI is built for founders, product teams, agencies, and developers who want editable UI source instead of a black-box component package.",
+	},
+	{
+		id: "item-3",
+		title: "What does LoveUI include?",
+		content:
+			"LoveUI includes reusable UI components, production-ready examples, full-page blocks, documentation, and an optional skill pack for AI coding agents.",
+	},
+	{
+		id: "item-4",
+		title: "Can I customize LoveUI components?",
+		content:
+			"Yes. The CLI copies component source into your project, so you can inspect the code, change the styles, and keep only the pieces you need.",
+	},
+	{
+		id: "item-5",
+		title: "Does LoveUI work with my existing app?",
+		content:
+			"Yes. LoveUI works well in React projects using Tailwind CSS. You can add individual components and adjust import paths to match your app.",
+	},
+	{
+		id: "item-6",
+		title: "Where can I get help with LoveUI?",
+		content:
+			"Start with the docs and registry examples. If something looks wrong, open an issue or inspect the copied source directly in your project.",
+	},
+	{
+		id: "item-7",
+		title: "How do I get started with LoveUI?",
+		content:
+			"Run npx love-ui@latest add loveui to install the shared setup, then add components or blocks as your interface needs them.",
+	},
+];

package/registry/default/blocks/faq-4/app/page.tsx

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