
This component generates a full-screen background pattern with a radial gradient effect, applying customizable styles through optional class names. It features a placeholder pattern element and a visually striking top primary radial gradient.
@shadcnblocks
import { cn } from "cn";
import { PatternPlaceholder } from "@/components/shadcnblocks/pattern-placeholder";
interface BackgroundPattern1Props {
className?: string;
}
const BackgroundPattern1 = ({ className }: BackgroundPattern1Props) => {
return (
<section
className={cn(
"relative h-svh max-h-[1200px] min-h-[600px] w-full",
className,
)}
>
<PatternPlaceholder />
{/* Background Pattern */}
{/* Top Primary Radial Background Pattern */}
<div
className="absolute inset-0 z-0"
style={{
background:
"radial-gradient(125% 125% at 50% 10%, var(--background) 40%, var(--primary) 100%)",
}}
/>
</section>
);
};
export { BackgroundPattern1 };

































