love-ui 1.2.17 → 1.2.18

package/registry/default/blocks/features3/components/feature-section.tsx

@@ -0,0 +1,93 @@
+import { cn } from "@/lib/utils";
+import type React from "react";
+import { FullWidthDivider } from "./full-width-divider";
+import { ZapIcon, ShieldCheckIcon, ActivityIcon, GlobeIcon } from "lucide-react";
+
+type FeatureType = {
+	title: string;
+	icon: React.ReactNode;
+	description: string;
+};
+
+export function FeatureSection() {
+	return (
+		<div className="mx-auto min-h-screen w-full max-w-5xl place-content-center space-y-12 border-x py-4">
+			<div className="relative grid grid-cols-1 gap-px bg-border md:grid-cols-2 lg:grid-cols-4">
+				<FullWidthDivider position="top" />
+				{features.map((feature) => (
+					<FeatureCard feature={feature} key={feature.title} />
+				))}
+				<FullWidthDivider position="bottom" />
+			</div>
+		</div>
+	);
+}
+
+export function FeatureCard({
+	feature,
+	className,
+	...props
+}: React.ComponentProps<"div"> & {
+	feature: FeatureType;
+}) {
+	return (
+		<div
+			className={cn(
+				"relative flex flex-col justify-between overflow-hidden bg-background p-4 md:p-6",
+				className
+			)}
+			{...props}
+		>
+			<div
+				className={cn(
+					"relative z-10 flex items-center pt-4 pb-6",
+					"[&_svg]:size-5 [&_svg]:text-primary"
+				)}
+			>
+				{feature.icon}
+			</div>
+
+			<div className="relative z-10 space-y-2">
+				<h3 className="font-medium text-foreground text-lg">{feature.title}</h3>
+				<p className="text-muted-foreground text-xs leading-relaxed">
+					{feature.description}
+				</p>
+			</div>
+		</div>
+	);
+}
+
+const features: FeatureType[] = [
+	{
+		title: "Lightning Fast",
+		icon: (
+			<ZapIcon
+			/>
+		),
+		description: "Blazing fast performance with edge network optimizations.",
+	},
+	{
+		title: "Secure by Design",
+		icon: (
+			<ShieldCheckIcon
+			/>
+		),
+		description: "Enterprise-grade security, zero configuration required.",
+	},
+	{
+		title: "Real-time Sync",
+		icon: (
+			<ActivityIcon
+			/>
+		),
+		description: "Real-time data sync across all devices efficiently.",
+	},
+	{
+		title: "Global Scale",
+		icon: (
+			<GlobeIcon
+			/>
+		),
+		description: "Instant global deployment to 35+ regions worldwide.",
+	},
+];

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

@@ -0,0 +1,21 @@
+import { cn } from "@/lib/utils";
+
+export function FullWidthDivider({
+	className,
+	position = "bottom",
+	...props
+}: React.ComponentProps<"div"> & {
+	position?: "top" | "bottom";
+}) {
+	return (
+		<div
+			aria-hidden="true"
+			className={cn(
+				"pointer-events-none absolute right-1/2 left-1/2 h-px w-screen -translate-x-1/2 bg-border",
+				position === "top" ? "top-0" : "bottom-0",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

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

@@ -0,0 +1,9 @@
+import { FeatureSection } from "../components/feature-section";
+
+export default function Page() {
+	return (
+		<section className="min-h-screen place-content-center p-4">
+			<FeatureSection />
+		</section>
+	);
+}

package/registry/default/blocks/features4/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/features4/components/feature-section.tsx

@@ -0,0 +1,114 @@
+import { cn } from "@/lib/utils";
+import type React from "react";
+import { DecorIcon } from "./decor-icon";
+import { LayoutDashboardIcon, TerminalIcon, ShieldCheckIcon, FileTextIcon } from "lucide-react";
+
+type FeatureType = {
+	title: string;
+	icon: React.ReactNode;
+	description: string;
+};
+
+export function FeatureSection() {
+	return (
+		<div className="mx-auto flex min-h-screen w-full max-w-5xl flex-col justify-center gap-12 px-4 py-12 md:px-8">
+			<div className="mx-auto max-w-2xl space-y-2 text-center">
+				<h2 className="font-medium text-3xl tracking-tight md:text-5xl">
+					Build apps faster
+				</h2>
+				<p className="text-muted-foreground text-sm leading-relaxed md:text-base">
+					The complete platform for secure, scalable apps. You code, we handle
+					the rest.
+				</p>
+			</div>
+
+			<div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
+				{features.map((feature) => (
+					<FeatureCard feature={feature} key={feature.title} />
+				))}
+			</div>
+		</div>
+	);
+}
+
+function FeatureCard({
+	feature,
+	className,
+	...props
+}: React.ComponentProps<"div"> & {
+	feature: FeatureType;
+}) {
+	return (
+		<div
+			className={cn(
+				"relative flex flex-col justify-between gap-6 bg-background px-6 pt-8 pb-6 shadow-xs",
+				// Gradient inspired by testimonials
+				"dark:bg-[radial-gradient(50%_80%_at_25%_0%,--theme(--color-foreground/.1),transparent)]",
+				className
+			)}
+			{...props}
+		>
+			{/* Extended Borders */}
+			<div className="absolute -inset-y-4 -left-px w-px bg-border" />
+			<div className="absolute -inset-y-4 -right-px w-px bg-border" />
+			<div className="absolute -inset-x-4 -top-px h-px bg-border" />
+			<div className="absolute -right-4 -bottom-px -left-4 h-px bg-border" />
+
+			{/* Corner Decor */}
+			<DecorIcon className="size-3.5" position="top-left" />
+
+			<div
+				className={cn(
+					"relative z-10 flex w-fit items-center justify-center rounded-lg border bg-muted/20 p-3",
+					"[&_svg]:size-5 [&_svg]:stroke-[1.5] [&_svg]:text-foreground"
+				)}
+			>
+				{feature.icon}
+			</div>
+
+			<div className="relative z-10 space-y-2">
+				<h3 className="font-medium text-base text-foreground">
+					{feature.title}
+				</h3>
+				<p className="text-muted-foreground text-xs leading-relaxed">
+					{feature.description}
+				</p>
+			</div>
+		</div>
+	);
+}
+
+const features: FeatureType[] = [
+	{
+		title: "Interactive Dashboard",
+		icon: (
+			<LayoutDashboardIcon
+			/>
+		),
+		description: "Visualize your data with drag-and-drop widgets.",
+	},
+	{
+		title: "Instant API",
+		icon: (
+			<TerminalIcon
+			/>
+		),
+		description: "Auto-generate REST and GraphQL APIs instantly.",
+	},
+	{
+		title: "Role-Based Access",
+		icon: (
+			<ShieldCheckIcon
+			/>
+		),
+		description: "Secure resources with granular permission controls.",
+	},
+	{
+		title: "Audit Trails",
+		icon: (
+			<FileTextIcon
+			/>
+		),
+		description: "Track every change with comprehensive logs.",
+	},
+];

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

@@ -0,0 +1,9 @@
+import { FeatureSection } from "../components/feature-section";
+
+export default function Page() {
+	return (
+		<section className="min-h-screen place-content-center p-4">
+			<FeatureSection />
+		</section>
+	);
+}

package/registry/default/blocks/features5/components/feature-section.tsx

@@ -0,0 +1,115 @@
+import { cn } from "@/lib/utils";
+import type React from "react";
+import { GridPattern } from "./grid-pattern";
+import { ZapIcon, CpuIcon, FingerprintIcon, PencilIcon, Settings2Icon, SparklesIcon } from "lucide-react";
+
+type FeatureType = {
+	title: string;
+	icon: React.ReactNode;
+	description: string;
+};
+
+export function FeatureSection() {
+	return (
+		<div className="mx-auto w-full max-w-5xl space-y-8">
+			<div className="mx-auto max-w-3xl text-center">
+				<h2 className="text-balance font-medium text-2xl md:text-4xl lg:text-5xl">
+					Power. Speed. Control.
+				</h2>
+				<p className="mt-4 text-balance text-muted-foreground text-sm md:text-base">
+					Everything you need to build fast, secure, scalable apps.
+				</p>
+			</div>
+
+			<div className="overflow-hidden rounded-lg border">
+				<div className="grid grid-cols-1 gap-px bg-border sm:grid-cols-2 md:grid-cols-3">
+					{features.map((feature) => (
+						<FeatureCard feature={feature} key={feature.title} />
+					))}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export function FeatureCard({
+	feature,
+	className,
+	...props
+}: React.ComponentProps<"div"> & {
+	feature: FeatureType;
+}) {
+	return (
+		<div
+			className={cn("relative overflow-hidden bg-background p-6", className)}
+			{...props}
+		>
+			<div className="mask-[radial-gradient(farthest-side_at_top,white,transparent)] pointer-events-none absolute top-0 left-1/2 -mt-2 -ml-20 size-full">
+				<GridPattern
+					className="absolute inset-0 size-full stroke-foreground/20"
+					height={40}
+					width={40}
+					x={20}
+				/>
+			</div>
+			<div className="[&_svg]:size-6 [&_svg]:text-foreground/75">
+				{feature.icon}
+			</div>
+			<h3 className="mt-10 text-sm md:text-base">{feature.title}</h3>
+			<p className="relative z-20 mt-2 font-light text-muted-foreground text-xs">
+				{feature.description}
+			</p>
+		</div>
+	);
+}
+
+const features: FeatureType[] = [
+	{
+		title: "Faaast",
+		icon: (
+			<ZapIcon
+			/>
+		),
+		description: "It supports an entire helping developers and innovate.",
+	},
+	{
+		title: "Powerful",
+		icon: (
+			<CpuIcon
+			/>
+		),
+		description: "It supports an entire helping developers and businesses.",
+	},
+	{
+		title: "Security",
+		icon: (
+			<FingerprintIcon
+			/>
+		),
+		description: "It supports an helping developers businesses.",
+	},
+	{
+		title: "Customization",
+		icon: (
+			<PencilIcon
+			/>
+		),
+		description: "It supports helping developers and businesses innovate.",
+	},
+	{
+		title: "Control",
+		icon: (
+			<Settings2Icon
+			/>
+		),
+		description: "It supports helping developers and businesses innovate.",
+	},
+	{
+		title: "Built for AI",
+		icon: (
+			<SparklesIcon
+			/>
+		),
+		description: "It supports helping developers and businesses innovate.",
+	},
+];

package/registry/default/blocks/features5/components/grid-pattern.tsx

@@ -0,0 +1,70 @@
+import { useId } from "react"
+
+import { cn } from "@/lib/utils"
+
+interface GridPatternProps extends React.SVGProps<SVGSVGElement> {
+  width?: number
+  height?: number
+  x?: number
+  y?: number
+  squares?: Array<[x: number, y: number]>
+  strokeDasharray?: string
+  className?: string
+  [key: string]: unknown
+}
+
+export function GridPattern({
+  width = 40,
+  height = 40,
+  x = -1,
+  y = -1,
+  strokeDasharray = "0",
+  squares,
+  className,
+  ...props
+}: GridPatternProps) {
+  const id = useId()
+
+  return (
+    <svg
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30",
+        className
+      )}
+      {...props}
+    >
+      <defs>
+        <pattern
+          id={id}
+          width={width}
+          height={height}
+          patternUnits="userSpaceOnUse"
+          x={x}
+          y={y}
+        >
+          <path
+            d={`M.5 ${height}V.5H${width}`}
+            fill="none"
+            strokeDasharray={strokeDasharray}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
+      {squares && (
+        <svg x={x} y={y} className="overflow-visible">
+          {squares.map(([x, y]) => (
+            <rect
+              strokeWidth="0"
+              key={`${x}-${y}`}
+              width={width - 1}
+              height={height - 1}
+              x={x * width + 1}
+              y={y * height + 1}
+            />
+          ))}
+        </svg>
+      )}
+    </svg>
+  )
+}

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

@@ -0,0 +1,9 @@
+import { FeatureSection } from "../components/feature-section";
+
+export default function Page() {
+	return (
+		<section className="min-h-screen place-content-center p-4">
+			<FeatureSection />
+		</section>
+	);
+}

package/registry/default/blocks/features6/components/cobe-globe.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import createGlobe from "cobe";
+import { useEffect, useRef } from "react";
+
+export function CobeGlobe({ className }: { className?: string }) {
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		if (!canvas) {
+			return;
+		}
+
+		let globe: ReturnType<typeof createGlobe> | null = null;
+		let rafId = 0;
+		let phi = 0;
+
+		const init = () => {
+			const side = canvas.offsetWidth;
+			if (side === 0 || globe) {
+				return;
+			}
+
+			const dpr = Math.min(window.devicePixelRatio || 1, 2);
+
+			globe = createGlobe(canvas, {
+				devicePixelRatio: dpr,
+				width: side,
+				height: side,
+				phi: 0,
+				theta: 0,
+				dark: 1,
+				diffuse: 1.2,
+				mapSamples: 16_000,
+				mapBrightness: 6,
+				baseColor: [0.3, 0.3, 0.3],
+				markerColor: [0.1, 0.8, 1],
+				glowColor: [1, 1, 1],
+				markers: [
+					{ location: [37.7595, -122.4367], size: 0.03 },
+					{ location: [40.7128, -74.006], size: 0.1 },
+				],
+			});
+
+			const loop = () => {
+				globe?.update({ phi });
+				phi += 0.008;
+				rafId = requestAnimationFrame(loop);
+			};
+			loop();
+		};
+
+		let ro: ResizeObserver | null = null;
+
+		if (canvas.offsetWidth > 0) {
+			init();
+		} else {
+			ro = new ResizeObserver((entries) => {
+				if (
+					entries[0]?.contentRect.width &&
+					entries[0]?.contentRect.width > 0
+				) {
+					ro?.disconnect();
+					ro = null;
+					init();
+				}
+			});
+			ro.observe(canvas);
+		}
+
+		return () => {
+			ro?.disconnect();
+			cancelAnimationFrame(rafId);
+			globe?.destroy();
+		};
+	}, []);
+
+	return (
+		<canvas
+			className={className}
+			ref={canvasRef}
+			style={{ width: 600, height: 600, maxWidth: "100%", aspectRatio: 1 }}
+		/>
+	);
+}