love-ui 1.2.22 → 1.2.23

package/registry/default/blocks/hero2/components/hero.tsx

@@ -16,14 +16,13 @@ export function HeroSection() {
 					<div
 						className={cn(
 							"absolute -inset-x-20 inset-y-0 z-0 rounded-full",
-							"bg-[radial-gradient(ellipse_at_center,theme(--color-foreground/.1),transparent,transparent)]",
 							"blur-[50px]"
 						)}
 					/>
-					<div className="absolute inset-y-0 left-4 w-px bg-linear-to-b from-transparent via-border to-border md:left-8" />
-					<div className="absolute inset-y-0 right-4 w-px bg-linear-to-b from-transparent via-border to-border md:right-8" />
-					<div className="absolute inset-y-0 left-8 w-px bg-linear-to-b from-transparent via-border/50 to-border/50 md:left-12" />
-					<div className="absolute inset-y-0 right-8 w-px bg-linear-to-b from-transparent via-border/50 to-border/50 md:right-12" />
+					<div className="absolute inset-y-0 left-4 w-px bg-border md:left-8" />
+					<div className="absolute inset-y-0 right-4 w-px bg-border md:right-8" />
+					<div className="absolute inset-y-0 left-8 w-px bg-border/50 md:left-12" />
+					<div className="absolute inset-y-0 right-8 w-px bg-border/50 md:right-12" />
 				</div>
 				<a
 					className={cn(

package/registry/default/blocks/hero2/components/logo.tsx

@@ -7,18 +7,7 @@ export const Logo = (props: React.ComponentProps<"svg">) => (
   xmlns="http://www.w3.org/2000/svg"
   {...props}
 >
-  <defs>
-    <linearGradient id="loveui-blue" x1="0" y1="0" x2="48" y2="48">
-      <stop stopColor="#38A3FF" />
-      <stop offset="0.55" stopColor="#1266F1" />
-      <stop offset="1" stopColor="#0B3FD8" />
-    </linearGradient>
-
-    <linearGradient id="loveui-shine" x1="0" y1="0" x2="1" y2="1">
-      <stop stopColor="#FFFFFF" stopOpacity="0.9" />
-      <stop offset="1" stopColor="#BBD8FF" stopOpacity="0.4" />
-    </linearGradient>
-  </defs>
+  
 
   <g transform="translate(0 0)">
     <rect
@@ -27,7 +16,7 @@ export const Logo = (props: React.ComponentProps<"svg">) => (
       width="48"
       height="48"
       rx="12"
-      fill="url(#loveui-blue)"
+      fill="#1266F1"
     />
 
     <path
@@ -70,7 +59,7 @@ export const Logo = (props: React.ComponentProps<"svg">) => (
         H18
         C19.7 29 21 27.7 21 25
         Z"
-      fill="url(#loveui-shine)"
+      fill="#BBD8FF"
       opacity="0.5"
     />
   </g>

package/registry/default/blocks/hero3/components/hero.tsx

@@ -13,7 +13,7 @@ export function HeroSection() {
 				<div
 					className={cn(
 						"absolute inset-0 isolate -z-10",
-						"bg-[radial-gradient(20%_80%_at_20%_0%,--theme(--color-foreground/.1),transparent)]"
+						""
 					)}
 				/>
 			</div>
@@ -71,13 +71,12 @@ export function HeroSection() {
 				<div
 					className={cn(
 						"absolute -inset-x-20 inset-y-0 -translate-y-1/3 scale-120 rounded-full",
-						"bg-[radial-gradient(ellipse_at_center,theme(--color-foreground/.1),transparent,transparent)]",
 						"blur-[50px]"
 					)}
 				/>
 				<div
 					className={cn(
-						"mask-b-from-60% relative mt-8 -mr-56 overflow-hidden px-2 sm:mt-12 sm:mr-0 md:mt-20",
+						" relative mt-8 -mr-56 overflow-hidden px-2 sm:mt-12 sm:mr-0 md:mt-20",
 						"fade-in slide-in-from-bottom-5 animate-in fill-mode-backwards delay-100 duration-1000 ease-out"
 					)}
 				>

package/registry/default/blocks/hero3/components/logo.tsx

@@ -7,18 +7,7 @@ export const Logo = (props: React.ComponentProps<"svg">) => (
   xmlns="http://www.w3.org/2000/svg"
   {...props}
 >
-  <defs>
-    <linearGradient id="loveui-blue" x1="0" y1="0" x2="48" y2="48">
-      <stop stopColor="#38A3FF" />
-      <stop offset="0.55" stopColor="#1266F1" />
-      <stop offset="1" stopColor="#0B3FD8" />
-    </linearGradient>
-
-    <linearGradient id="loveui-shine" x1="0" y1="0" x2="1" y2="1">
-      <stop stopColor="#FFFFFF" stopOpacity="0.9" />
-      <stop offset="1" stopColor="#BBD8FF" stopOpacity="0.4" />
-    </linearGradient>
-  </defs>
+  
 
   <g transform="translate(0 0)">
     <rect
@@ -27,7 +16,7 @@ export const Logo = (props: React.ComponentProps<"svg">) => (
       width="48"
       height="48"
       rx="12"
-      fill="url(#loveui-blue)"
+      fill="#1266F1"
     />
 
     <path
@@ -70,7 +59,7 @@ export const Logo = (props: React.ComponentProps<"svg">) => (
         H18
         C19.7 29 21 27.7 21 25
         Z"
-      fill="url(#loveui-shine)"
+      fill="#BBD8FF"
       opacity="0.5"
     />
   </g>

package/registry/default/blocks/integrations1/components/integrations.tsx

@@ -17,6 +17,7 @@ type Integration = {
 	name: string;
 	description: string;
 	isInvertable?: boolean;
+	logoClassName?: string;
 };
 
 const data: Integration[] = [
@@ -44,6 +45,7 @@ const data: Integration[] = [
 		name: "Notion",
 		description:
 			"Document component decisions, block usage, and product patterns.",
+		logoClassName: "text-black",
 	},
 ];
 
@@ -97,7 +99,11 @@ function LogoAsset({
 	return (
 		<Component
 			aria-label={integration.name}
-			className={cn(className, integration.isInvertable && "dark:invert")}
+			className={cn(
+				className,
+				integration.isInvertable && "text-foreground",
+				integration.logoClassName
+			)}
 			role="img"
 		/>
 	);

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

@@ -2,44 +2,57 @@ 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",
-		},
-	}
+    "pointer-events-none absolute z-1 size-4 shrink-0 stroke-1 stroke-muted-foreground transition-transform",
+    {
+        variants: {
+            position: {
+                // We also rotate the SVG inside the variant so the bracket always points inward
+                "top-left":
+                    "top-0 left-0 -translate-x-1/2 -translate-y-1/2",
+                "top-right":
+                    "top-0 right-0 translate-x-1/2 -translate-y-1/2 rotate-90",
+                "bottom-right":
+                    "right-0 bottom-0 translate-x-1/2 translate-y-1/2 rotate-180",
+                "bottom-left":
+                    "bottom-0 left-0 -translate-x-1/2 translate-y-1/2 -rotate-90",
+            },
+        },
+        defaultVariants: {
+            position: "top-left",
+        },
+    }
 );
 
 type DecorIconProps = React.ComponentProps<"svg"> &
-	VariantProps<typeof DecorIconVariants>;
+    VariantProps<typeof DecorIconVariants> & {
+        variant?: "bracket" | "dot" | "diagonal";
+    };
 
-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>
-	);
+export function DecorIcon({ position, variant = "bracket", className, ...props }: DecorIconProps) {
+    return (
+        <svg
+            aria-hidden="true"
+            className={cn(DecorIconVariants({ position, className }))}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+        >
+            {/* OPTION 1: Corner Bracket (Default) */}
+            {variant === "bracket" && (
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 4H4v8" />
+            )}
+
+            {/* OPTION 2: Minimalist Dot (Change fill to currentColor in class if using this) */}
+            {variant === "dot" && (
+                <circle cx="12" cy="12" r="3" fill="currentColor" />
+            )}
+
+            {/* OPTION 3: Diagonal Accent Line */}
+            {variant === "diagonal" && (
+                <path strokeLinecap="round" d="M4 20L20 4" />
+            )}
+        </svg>
+    );
 }

package/registry/default/blocks/integrations2/components/integrations.tsx

@@ -18,6 +18,7 @@ type Integration = {
 	name: string;
 	description: string;
 	isInvertable?: boolean;
+	logoClassName?: string;
 	icon?: React.ReactNode;
 };
 
@@ -53,6 +54,7 @@ const data: Integration[] = [
 		Component: NotionLogo,
 		name: "Notion",
 		description: "Track component decisions, block adoption, and design system notes.",
+		logoClassName: "text-black",
 	},
 	{
 		Component: GmailLogo,
@@ -121,7 +123,11 @@ function LogoAsset({
 	return (
 		<Component
 			aria-label={integration.name}
-			className={cn(className, integration.isInvertable && "dark:invert")}
+			className={cn(
+				className,
+				integration.isInvertable && "text-foreground",
+				integration.logoClassName
+			)}
 			role="img"
 		/>
 	);

package/registry/default/blocks/integrations3/components/integrations.tsx

@@ -19,7 +19,7 @@ type LogoType = {
 	alt: string;
 	isInvertable?: boolean;
 };
-type TileData = { row: number; col: number; logo?: LogoType };
+type TileData = { x: number; y: number; logo: LogoType };
 
 export function Integrations() {
 	return (
@@ -37,19 +37,11 @@ export function Integrations() {
 					<Button size="sm">Explore LoveUI integrations</Button>
 				</div>
 			</div>
-			<div className="place-items-end">
-				<div className="relative size-80">
-					<div
-						className={cn(
-							"absolute inset-0 size-full",
-							"bg-[linear-gradient(to_right,theme(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,theme(--color-border)_1px,transparent_1px)]",
-							"bg-size-[64px_64px]",
-							"mask-[radial-gradient(ellipse_at_center,black,black,transparent)]"
-						)}
-					/>
+			<div className="place-items-center px-8 py-12">
+				<div className="relative h-52 w-full">
 					{tiles.map((tile) => (
 						<IntegrationCard
-							key={String(tile.row) + "_" + String(tile.col)}
+							key={String(tile.x) + "_" + String(tile.y)}
 							{...tile}
 						/>
 					))}
@@ -60,14 +52,17 @@ export function Integrations() {
 	);
 }
 
-function IntegrationCard({ row, col, logo }: TileData) {
+function IntegrationCard({ x, y, logo }: TileData) {
 	return (
 		<div
 			className={cn(
-				"absolute flex size-16 items-center justify-center",
-				logo ? "bg-secondary/40" : ""
+				"absolute z-10 flex size-14 items-center justify-center rounded-md border",
+				logo ? "bg-card shadow-xs" : ""
 			)}
-			style={{ left: col * 64, top: row * 64 }}
+			style={{
+				left: `calc(${x}% - 1.75rem)`,
+				top: `calc(${y}% - 1.75rem)`,
+			}}
 		>
 			{logo && (
 				<LogoAsset
@@ -91,7 +86,7 @@ function LogoAsset({
 	return (
 		<Component
 			aria-label={logo.alt}
-			className={cn(className, logo.isInvertable && "dark:invert")}
+			className={cn(className, logo.isInvertable && "text-foreground")}
 			role="img"
 		/>
 	);
@@ -99,39 +94,35 @@ function LogoAsset({
 
 const tiles: TileData[] = [
 	{
-		row: 0,
-		col: 1,
+		x: 14,
+		y: 22,
 		logo: { Component: VercelLogo, alt: "Vercel Logo", isInvertable: true },
 	},
 	{
-		row: 0,
-		col: 3,
+		x: 60,
+		y: 22,
 		logo: { Component: CursorLogo, alt: "Cursor Logo", isInvertable: true },
 	},
-	{ row: 1, col: 0 },
-	{ row: 1, col: 2, logo: { Component: NeonLogo, alt: "Neon Logo" } },
-	{ row: 1, col: 4, logo: { Component: GmailLogo, alt: "Gmail Logo" } },
+	{ x: 36, y: 42, logo: { Component: NeonLogo, alt: "Neon Logo" } },
+	{ x: 84, y: 42, logo: { Component: GmailLogo, alt: "Gmail Logo" } },
 	{
-		row: 2,
-		col: 1,
+		x: 14,
+		y: 64,
 		logo: {
 			Component: PlanetscaleLogo,
 			alt: "Planetscale Logo",
 			isInvertable: true,
 		},
 	},
-	{ row: 2, col: 3 },
-	{ row: 3, col: 0 },
-	{ row: 3, col: 2, logo: { Component: PolarLogo, alt: "Polar Logo" } },
+	{ x: 36, y: 84, logo: { Component: PolarLogo, alt: "Polar Logo" } },
 	{
-		row: 3,
-		col: 4,
+		x: 84,
+		y: 82,
 		logo: { Component: VercelLogo, alt: "Vercel Logo", isInvertable: true },
 	},
-	{ row: 4, col: 1, logo: { Component: NeonLogo, alt: "Neon Logo" } },
 	{
-		row: 4,
-		col: 3,
+		x: 60,
+		y: 64,
 		logo: { Component: CursorLogo, alt: "Cursor Logo", isInvertable: true },
 	},
 ];

package/registry/default/blocks/integrations4/components/integrations.tsx

@@ -32,7 +32,7 @@ export function Integrations() {
 				</p>
 			</div>
 			<div className="place-items-end">
-				<div className="mask-[radial-gradient(ellipse_at_center,black,black,transparent)] relative size-90">
+				<div className=" relative size-90">
 					{tiles.map((tile) => (
 						<IntegrationCard
 							key={String(tile.row) + "_" + String(tile.col)}
@@ -76,7 +76,7 @@ function LogoAsset({
 	return (
 		<Component
 			aria-label={logo.alt}
-			className={cn(className, logo.isInvertable && "dark:invert")}
+			className={cn(className, logo.isInvertable && "text-foreground")}
 			role="img"
 		/>
 	);
@@ -93,7 +93,6 @@ const tiles: TileData[] = [
 		col: 3,
 		logo: { Component: CursorLogo, alt: "Cursor Logo", isInvertable: true },
 	},
-	{ row: 1, col: 0 },
 	{ row: 1, col: 2, logo: { Component: NeonLogo, alt: "Neon Logo" } },
 	{ row: 1, col: 4, logo: { Component: GmailLogo, alt: "Gmail Logo" } },
 	{
@@ -105,8 +104,6 @@ const tiles: TileData[] = [
 			isInvertable: true,
 		},
 	},
-	{ row: 2, col: 3 },
-	{ row: 3, col: 0 },
 	{ row: 3, col: 2, logo: { Component: PolarLogo, alt: "Polar Logo" } },
 	{
 		row: 3,

package/registry/default/blocks/integrations5/components/integrations.tsx

@@ -19,18 +19,17 @@ type Integration = {
 	Component?: LogoComponent;
 	name: string;
 	isInvertable?: boolean;
+	logoClassName?: string;
 };
 const data: Integration[] = [
-	{ name: "Empty 1" },
 	{ name: "Vercel", Component: VercelLogo, isInvertable: true },
 	{ name: "Cursor", Component: CursorLogo, isInvertable: true },
 	{ name: "Neon", Component: NeonLogo },
 	{ name: "PlanetScale", Component: PlanetscaleLogo, isInvertable: true },
-	{ name: "Notion", Component: NotionLogo },
+	{ name: "Notion", Component: NotionLogo, logoClassName: "text-black" },
 	{ name: "Gmail", Component: GmailLogo },
 	{ name: "Polar", Component: PolarLogo },
 	{ name: "Cursor", Component: CursorLogo, isInvertable: true },
-	{ name: "Empty 2" },
 ];
 
 export function Integrations() {
@@ -45,7 +44,7 @@ export function Integrations() {
 				</p>
 			</div>
 			<div className="flex flex-col justify-center rounded-full border bg-secondary dark:bg-secondary/10">
-				<div className="mask-l-from-90 mask-r-from-90 flex items-center justify-center -space-x-4 p-1">
+				<div className=" flex items-center justify-center -space-x-2 p-1">
 					{data.map((item, index) => (
 						<div
 							className={cn(
@@ -88,7 +87,11 @@ function LogoAsset({
 	return (
 		<Component
 			aria-label={integration.name}
-			className={cn(className, integration.isInvertable && "dark:invert")}
+			className={cn(
+				className,
+				integration.isInvertable && "text-foreground",
+				integration.logoClassName
+			)}
 			role="img"
 		/>
 	);

package/registry/default/blocks/logo-cloud-2/components/decor-icon.tsx

@@ -2,44 +2,57 @@ 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",
-		},
-	}
+    "pointer-events-none absolute z-1 size-4 shrink-0 stroke-1 stroke-muted-foreground transition-transform",
+    {
+        variants: {
+            position: {
+                // We also rotate the SVG inside the variant so the bracket always points inward
+                "top-left":
+                    "top-0 left-0 -translate-x-1/2 -translate-y-1/2",
+                "top-right":
+                    "top-0 right-0 translate-x-1/2 -translate-y-1/2 rotate-90",
+                "bottom-right":
+                    "right-0 bottom-0 translate-x-1/2 translate-y-1/2 rotate-180",
+                "bottom-left":
+                    "bottom-0 left-0 -translate-x-1/2 translate-y-1/2 -rotate-90",
+            },
+        },
+        defaultVariants: {
+            position: "top-left",
+        },
+    }
 );
 
 type DecorIconProps = React.ComponentProps<"svg"> &
-	VariantProps<typeof DecorIconVariants>;
+    VariantProps<typeof DecorIconVariants> & {
+        variant?: "bracket" | "dot" | "diagonal";
+    };
 
-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>
-	);
+export function DecorIcon({ position, variant = "bracket", className, ...props }: DecorIconProps) {
+    return (
+        <svg
+            aria-hidden="true"
+            className={cn(DecorIconVariants({ position, className }))}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+        >
+            {/* OPTION 1: Corner Bracket (Default) */}
+            {variant === "bracket" && (
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 4H4v8" />
+            )}
+
+            {/* OPTION 2: Minimalist Dot (Change fill to currentColor in class if using this) */}
+            {variant === "dot" && (
+                <circle cx="12" cy="12" r="3" fill="currentColor" />
+            )}
+
+            {/* OPTION 3: Diagonal Accent Line */}
+            {variant === "diagonal" && (
+                <path strokeLinecap="round" d="M4 20L20 4" />
+            )}
+        </svg>
+    );
 }

package/registry/default/blocks/logo-cloud-3/app/page.tsx

@@ -9,9 +9,9 @@ export default function Page() {
 					<br />
 					<span className="font-semibold">Used by the leaders.</span>
 				</h2>
-				<div className="mask-[linear-gradient(to_right,transparent,black,transparent)] mx-auto my-5 h-px max-w-sm bg-border" />
+				<div className=" mx-auto my-5 h-px max-w-sm bg-border" />
 				<LogoCloud />
-				<div className="mask-[linear-gradient(to_right,transparent,black,transparent)] mt-5 h-px bg-border" />
+				<div className=" mt-5 h-px bg-border" />
 			</section>
 		</div>
 	);

package/registry/default/blocks/logo-cloud-3/components/logo-cloud.tsx

@@ -39,7 +39,7 @@ const logos: Logo[] = [
 
 export function LogoCloud() {
 	return (
-		<div className="mask-[linear-gradient(to_right,transparent,black,transparent)] overflow-hidden py-5">
+		<div className=" overflow-hidden py-5">
 			<InfiniteSlider gap={56} reverse speed={80} speedOnHover={25}>
 				{logos.map((logo) => (
 					<LogoAsset

package/registry/default/blocks/logo-cloud-4/components/logo-cloud.tsx

@@ -42,7 +42,7 @@ const logos: Logo[] = [
 
 export function LogoCloud() {
 	return (
-		<div className="relative border-x border-y bg-linear-to-r from-secondary via-transparent to-secondary py-7">
+		<div className="relative overflow-hidden py-7">
 			<InfiniteSlider gap={56} reverse speed={60} speedOnHover={20}>
 				{logos.map((logo) => (
 					<LogoAsset