love-ui 1.2.22 → 1.2.23

package/registry/default/blocks/footer1/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/footer2/components/footer.tsx

@@ -9,7 +9,7 @@ export function Footer() {
 		<footer
 			className={cn(
 				"relative mx-auto max-w-5xl lg:border-x",
-				"dark:bg-[radial-gradient(35%_80%_at_15%_0%,--theme(--color-foreground/.1),transparent)]"
+				""
 			)}
 		>
 			<FullWidthDivider position="top" />

package/registry/default/blocks/footer2/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/footer3/components/footer.tsx

@@ -76,7 +76,7 @@ export function Footer() {
 		<footer
 			className={cn(
 				"relative mx-auto flex w-full max-w-5xl flex-col items-center justify-center rounded-t-4xl border-t px-6 md:rounded-t-6xl md:px-8",
-				"dark:bg-[radial-gradient(35%_128px_at_50%_0%,--theme(--color-foreground/.1),transparent)]"
+				""
 			)}
 		>
 			<div className="absolute top-0 right-1/2 left-1/2 h-px w-1/3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-foreground/20 blur" />
@@ -113,7 +113,7 @@ export function Footer() {
 					))}
 				</div>
 			</div>
-			<div className="h-px w-full bg-linear-to-r via-border" />
+			<div className="h-px w-full bg-border" />
 			<div className="flex w-full items-center justify-center py-4">
 				<p className="text-muted-foreground text-sm">
 					&copy; {new Date().getFullYear()} LoveUI, All rights reserved

package/registry/default/blocks/footer3/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/footer4/components/footer.tsx

@@ -7,7 +7,7 @@ export function Footer() {
 		<footer
 			className={cn(
 				"border-t",
-				"dark:bg-[radial-gradient(35%_128px_at_50%_0%,--theme(--color-foreground/.08),transparent)]"
+				""
 			)}
 		>
 			<div className="relative mx-auto max-w-5xl px-4">

package/registry/default/blocks/footer4/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/footer5/components/footer.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { Instagram as InstagramIcon, LinkedIn as LinkedinIcon, X as XIcon, Apple as AppleIcon, Facebook as FacebookIcon, GooglePlay as GooglePlayIcon } from "love-ui/logos";
+import { Instagram as InstagramIcon, LinkedIn as LinkedinIcon, X as XIcon, Facebook as FacebookIcon } from "love-ui/logos";
 import { Button } from "@/registry/default/ui/button";
+import { Input } from "@/registry/default/ui/input";
 
 export function Footer() {
 	return (
@@ -25,13 +26,13 @@ export function Footer() {
 					))}
 				</div>
 				<div className="h-px bg-border" />
-				{/* Social Buttons + App Links */}
-				<div className="flex flex-wrap items-center justify-between gap-4 py-5">
+				{/* Social buttons + newsletter */}
+				<div className="flex flex-wrap items-center justify-between gap-6 py-5">
 					<div className="flex items-center gap-2">
 						{socialLinks.map(({ icon, href }, index) => (
 							<Button
 								asChild
-								key={`social-${href}-${index}`} // More descriptive prefix
+								key={`social-${href}-${index}`}
 								size="icon"
 								variant="outline"
 							>
@@ -40,32 +41,28 @@ export function Footer() {
 						))}
 					</div>
 
-					<div className="flex gap-4">
-						<Button asChild className="h-11">
-							<a href="#">
-								<GooglePlayIcon className="size-5" />
-								<div className="flex flex-col items-start justify-center pr-2 text-left">
-									<span className="font-light text-[10px] leading-none tracking-tighter">
-										GET IT ON
-									</span>
-									<p className="font-bold text-base leading-none">
-										Google Play
-									</p>
-								</div>
-							</a>
-						</Button>
-
-						<Button asChild className="h-11">
-							<a href="#">
-								<AppleIcon className="size-5" />
-								<div className="flex flex-col items-start justify-center pr-2 text-left">
-									<span className="text-[10px] leading-none tracking-tighter">
-										Download on the
-									</span>
-									<p className="font-bold text-base leading-none">App Store</p>
-								</div>
-							</a>
-						</Button>
+					<div className="flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:items-center">
+						<div className="max-w-xs">
+							<p className="font-medium text-sm">Stay in the loop</p>
+							<p className="text-muted-foreground text-xs">
+								Product notes and resources, sent occasionally.
+							</p>
+						</div>
+						<form className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
+							<label className="sr-only" htmlFor="footer-email">
+								Email address
+							</label>
+							<Input
+								className="sm:w-56"
+								id="footer-email"
+								placeholder="Email address"
+								size="sm"
+								type="email"
+							/>
+							<Button className="w-full sm:w-auto" size="sm" type="submit">
+								Subscribe
+							</Button>
+						</form>
 					</div>
 				</div>
 				<div className="h-px bg-border" />

package/registry/default/blocks/footer5/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/footer6/components/footer.tsx

@@ -44,9 +44,9 @@ export function StickyFooter({ preview = false }: StickyFooterProps) {
 						aria-hidden
 						className="absolute inset-0 isolate z-0 opacity-50 contain-strict dark:opacity-60"
 					>
-						<div className="absolute top-0 left-0 h-320 w-140 -translate-y-87.5 -rotate-45 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,--theme(--color-foreground/.06)_0,hsla(0,0%,55%,.02)_50%,--theme(--color-foreground/.01)_80%)]" />
-						<div className="absolute top-0 left-0 h-320 w-60 -rotate-45 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,--theme(--color-foreground/.04)_0,--theme(--color-foreground/.01)_80%,transparent_100%)] [translate:5%_-50%]" />
-						<div className="absolute top-0 left-0 h-320 w-60 -translate-y-87.5 -rotate-45 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,--theme(--color-foreground/.04)_0,--theme(--color-foreground/.01)_80%,transparent_100%)]" />
+						<div className="absolute top-0 left-0 h-320 w-140 -translate-y-87.5 -rotate-45 rounded-full" />
+						<div className="absolute top-0 left-0 h-320 w-60 -rotate-45 rounded-full [translate:5%_-50%]" />
+						<div className="absolute top-0 left-0 h-320 w-60 -translate-y-87.5 -rotate-45 rounded-full" />
 					</div>
 					<div className="relative mx-auto flex size-full max-w-6xl flex-col justify-between gap-5">
 						<div className="grid grid-cols-1 gap-8 px-4 pt-12 md:grid-cols-2 lg:grid-cols-4">

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>
+    );
 }