love-ui 1.2.21 → 1.2.23

package/registry/default/blocks/footer6/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/header1/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/header2/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/header3/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/hero1/components/hero.tsx

@@ -10,7 +10,7 @@ export function HeroSection() {
 				aria-hidden="true"
 				className="absolute inset-0 isolate hidden overflow-hidden contain-strict lg:block"
 			>
-				<div className="absolute inset-0 -top-14 isolate -z-10 bg-[radial-gradient(35%_80%_at_49%_0%,--theme(--color-foreground/.08),transparent)] contain-strict" />
+				<div className="absolute inset-0 -top-14 isolate -z-10 contain-strict" />
 			</div>
 
 			{/* X Bold Faded Borders */}
@@ -18,8 +18,8 @@ export function HeroSection() {
 				aria-hidden="true"
 				className="absolute inset-0 mx-auto hidden min-h-screen w-full max-w-5xl lg:block"
 			>
-				<div className="mask-y-from-80% mask-y-to-100% absolute inset-y-0 left-0 z-10 h-full w-px bg-foreground/15" />
-				<div className="mask-y-from-80% mask-y-to-100% absolute inset-y-0 right-0 z-10 h-full w-px bg-foreground/15" />
+				<div className=" absolute inset-y-0 left-0 z-10 h-full w-px bg-foreground/15" />
+				<div className=" absolute inset-y-0 right-0 z-10 h-full w-px bg-foreground/15" />
 			</div>
 
 			{/* main content */}
@@ -30,10 +30,10 @@ export function HeroSection() {
 					aria-hidden="true"
 					className="absolute inset-0 -z-1 size-full overflow-hidden"
 				>
-					<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

package/registry/default/blocks/hero1/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/hero2/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/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"
 		/>
 	);