@xbg.solutions/create-frontend 1.1.2 → 1.2.0

package/src/registry/blocks/banner/Banner03.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		onAccept?: () => void;
+		onReject?: () => void;
+	}
+
+	let { class: className, onAccept, onReject }: Props = $props();
+
+	let visible = $state(true);
+
+	const handleAccept = () => {
+		if (onAccept) {
+			onAccept();
+		}
+		visible = false;
+	};
+
+	const handleReject = () => {
+		if (onReject) {
+			onReject();
+		}
+		visible = false;
+	};
+</script>
+
+{#if visible}
+	<!-- Desktop -->
+	<div class="hidden sm:flex w-full border-t bg-background px-6 py-4 items-center justify-between gap-4">
+		<p class="text-sm text-muted-foreground">
+			We use cookies to enhance your experience. By clicking "Accept," you consent to the use of all cookies. Learn more in our
+			<a href="#" class="underline hover:no-underline">cookie policy</a>.
+		</p>
+		<div class="flex gap-2 flex-shrink-0">
+			<Button variant="outline" size="sm" onclick={handleReject}>Reject all</Button>
+			<Button size="sm" onclick={handleAccept}>Accept all</Button>
+		</div>
+	</div>
+
+	<!-- Mobile -->
+	<div class="sm:hidden flex flex-col gap-3 border-t bg-background px-4 py-4">
+		<p class="text-sm text-muted-foreground">
+			We use cookies to enhance your experience. By clicking "Accept," you consent to the use of all cookies. Learn more in our
+			<a href="#" class="underline hover:no-underline">cookie policy</a>.
+		</p>
+		<div class="flex flex-col gap-2 w-full">
+			<Button variant="outline" size="sm" onclick={handleReject} class="w-full">Reject all</Button>
+			<Button size="sm" onclick={handleAccept} class="w-full">Accept all</Button>
+		</div>
+	</div>
+{/if}

package/src/registry/blocks/banner/Banner04.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		count?: string;
+		label?: string;
+		variant?: 'light' | 'dark';
+		href?: string;
+	}
+
+	let {
+		class: className,
+		count = '5K+',
+		label = 'Loved by',
+		variant = 'light',
+		href
+	}: Props = $props();
+
+	const isLight = variant === 'light';
+	const containerClass = isLight
+		? 'inline-flex items-center gap-3 rounded-full border bg-background px-4 py-2'
+		: 'inline-flex items-center gap-3 rounded-full border border-background/20 bg-foreground text-background px-4 py-2';
+</script>
+
+<a
+	{href}
+	class={cn(containerClass, className)}
+	role={href ? 'link' : 'status'}
+>
+	<div class="flex -space-x-2">
+		{#each [0, 1, 2] as index}
+			<div
+				class={cn(
+					'h-8 w-8 rounded-full',
+					isLight ? 'bg-muted' : 'bg-background/30'
+				)}
+			></div>
+		{/each}
+	</div>
+
+	<span class="text-sm font-medium">
+		{label} <strong>{count}</strong> customers
+	</span>
+
+	<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="flex-shrink-0">
+		<polyline points="9 18 15 12 9 6"></polyline>
+	</svg>
+</a>

package/src/registry/blocks/banner/Banner05.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		message?: string;
+		ctaLabel?: string;
+		onCta?: () => void;
+	}
+
+	let {
+		class: className,
+		message = 'New update · Pro blocks are now available in shadcn/ui kit for Figma!',
+		ctaLabel,
+		onCta
+	}: Props = $props();
+
+	let visible = $state(true);
+
+	const handleClose = () => {
+		visible = false;
+	};
+
+	const handleCta = () => {
+		if (onCta) {
+			onCta();
+		}
+	};
+</script>
+
+{#if visible}
+	<div class={cn('inline-flex items-center gap-2 rounded-lg bg-foreground text-background text-sm px-4 py-3 w-full sm:w-auto relative', className)}>
+		<p>
+			<strong>{message.split('·')[0].trim()}</strong> · {message.split('·')[1]?.trim() || message} <span class="font-medium">»</span>
+		</p>
+		<button
+			onclick={handleClose}
+			class="absolute right-3 top-1/2 -translate-y-1/2 text-background/70 hover:text-background transition-colors"
+			aria-label="Close banner"
+		>
+			<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+				<line x1="18" y1="6" x2="6" y2="18"></line>
+				<line x1="6" y1="6" x2="18" y2="18"></line>
+			</svg>
+		</button>
+	</div>
+{/if}

package/src/registry/blocks/banner/index.ts

@@ -0,0 +1,5 @@
+export { default as Banner01 } from './Banner01.svelte';
+export { default as Banner02 } from './Banner02.svelte';
+export { default as Banner03 } from './Banner03.svelte';
+export { default as Banner04 } from './Banner04.svelte';
+export { default as Banner05 } from './Banner05.svelte';

package/src/registry/blocks/bento-grid/BentoGrid01.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+	}
+
+	let { class: customClass = '', title = 'Build something amazing', description = '' }: Props = $props();
+
+	const checkIcon = `<polyline points="20 6 9 17 4 12"/>`;
+</script>
+
+<section class={cn('w-full py-16 px-4 sm:px-6', customClass)}>
+	<div class="mx-auto max-w-7xl">
+		<div class="text-center mb-12">
+			<p class="text-sm font-semibold text-foreground/60 mb-2">Bento Grid</p>
+			<h2 class="text-3xl sm:text-4xl font-bold mb-4">{title}</h2>
+			{#if description}
+				<p class="text-lg text-muted-foreground max-w-2xl mx-auto">{description}</p>
+			{/if}
+		</div>
+
+		<div class="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-3">
+			<!-- Large Feature (2-col span) -->
+			<div class="rounded-xl border bg-background p-6 sm:col-span-2">
+				<div class="aspect-video w-full rounded-lg bg-muted/60 flex items-center justify-center">
+					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="text-muted-foreground/40">
+						<rect x="3" y="3" width="18" height="18" rx="2"/>
+						<circle cx="8.5" cy="8.5" r="1.5"/>
+						<polyline points="21 15 16 10 5 21"/>
+					</svg>
+				</div>
+				<h3 class="text-xl font-semibold mt-4">Ship faster</h3>
+				<p class="text-muted-foreground mt-2">Deploy your ideas in minutes with our intuitive platform.</p>
+			</div>
+
+			<!-- Tall Feature (row-span-2) -->
+			<div class="rounded-xl border bg-background p-6 sm:row-span-2">
+				<div class="flex items-center justify-center h-12 w-12 rounded-lg bg-foreground/10 mb-4">
+					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-foreground">
+						{checkIcon}
+					</svg>
+				</div>
+				<h3 class="text-lg font-semibold mb-4">Beautiful UI</h3>
+				<ul class="space-y-3">
+					<li class="flex items-start gap-3">
+						<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-foreground flex-shrink-0 mt-0.5">
+							{checkIcon}
+						</svg>
+						<span class="text-sm">Dark mode support</span>
+					</li>
+					<li class="flex items-start gap-3">
+						<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-foreground flex-shrink-0 mt-0.5">
+							{checkIcon}
+						</svg>
+						<span class="text-sm">Fully typed</span>
+					</li>
+					<li class="flex items-start gap-3">
+						<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-foreground flex-shrink-0 mt-0.5">
+							{checkIcon}
+						</svg>
+						<span class="text-sm">Responsive design</span>
+					</li>
+				</ul>
+			</div>
+
+			<!-- Small Cell 1 -->
+			<div class="rounded-xl border bg-background p-6">
+				<div class="flex items-center justify-center h-10 w-10 rounded-lg bg-foreground/10 mb-3">
+					<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-foreground">
+						{checkIcon}
+					</svg>
+				</div>
+				<h3 class="font-semibold">Dark mode</h3>
+				<p class="text-sm text-muted-foreground mt-1">Built-in dark theme support.</p>
+			</div>
+
+			<!-- Small Cell 2 -->
+			<div class="rounded-xl border bg-background p-6">
+				<div class="flex items-center justify-center h-10 w-10 rounded-lg bg-foreground/10 mb-3">
+					<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-foreground">
+						{checkIcon}
+					</svg>
+				</div>
+				<h3 class="font-semibold">Fully typed</h3>
+				<p class="text-sm text-muted-foreground mt-1">100% TypeScript support.</p>
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/bento-grid/BentoGrid02.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+	}
+
+	let { class: customClass = '', title = 'Build something amazing', description = '' }: Props = $props();
+</script>
+
+<section class={cn('w-full py-16 px-4 sm:px-6', customClass)}>
+	<div class="mx-auto max-w-7xl">
+		<div class="text-center mb-12">
+			<p class="text-sm font-semibold text-foreground/60 mb-2">Bento Grid</p>
+			<h2 class="text-3xl sm:text-4xl font-bold mb-4">{title}</h2>
+			{#if description}
+				<p class="text-lg text-muted-foreground max-w-2xl mx-auto">{description}</p>
+			{/if}
+		</div>
+
+		<div class="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-3">
+			<!-- Row 1: span-2 cell + 1 cell -->
+			<div class="rounded-xl border bg-background p-6 sm:col-span-2">
+				<div class="flex items-center justify-center h-12 w-12 rounded-lg bg-blue-500/20 mb-4">
+					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-blue-600">
+						<circle cx="12" cy="12" r="1"/>
+						<path d="M12 1v6m0 6v6"/>
+						<path d="M4.22 4.22l4.24 4.24m2.12 5.08l4.24 4.24"/>
+						<path d="M1 12h6m6 0h6"/>
+						<path d="M4.22 19.78l4.24-4.24m5.08-2.12l4.24-4.24"/>
+						<path d="M12 23v-6m0-6V5"/>
+						<path d="M19.78 19.78l-4.24-4.24m-2.12-5.08l-4.24-4.24"/>
+						<path d="M23 12h-6m-6 0H5"/>
+						<path d="M19.78 4.22l-4.24 4.24m-5.08 2.12l-4.24 4.24"/>
+					</svg>
+				</div>
+				<h3 class="text-lg font-semibold">Real-time Sync</h3>
+				<p class="text-muted-foreground mt-2">Synchronize data instantly across all your devices.</p>
+			</div>
+
+			<!-- 1 cell -->
+			<div class="rounded-xl border bg-background p-6">
+				<div class="flex items-center justify-center h-12 w-12 rounded-lg bg-purple-500/20 mb-4">
+					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-purple-600">
+						<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/>
+						<path d="M9 10h6M9 14h6"/>
+					</svg>
+				</div>
+				<h3 class="font-semibold">Cloud Storage</h3>
+				<p class="text-sm text-muted-foreground mt-1">Unlimited storage in the cloud.</p>
+			</div>
+
+			<!-- Row 2: 1 cell + span-2 cell -->
+			<div class="rounded-xl border bg-background p-6">
+				<div class="flex items-center justify-center h-12 w-12 rounded-lg bg-green-500/20 mb-4">
+					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-green-600">
+						<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/>
+						<path d="M10 17l-4-4m0 0l4-4m-4 4l8-8"/>
+					</svg>
+				</div>
+				<h3 class="font-semibold">AI Integration</h3>
+				<p class="text-sm text-muted-foreground mt-1">Smart features powered by AI.</p>
+			</div>
+
+			<div class="rounded-xl border bg-background p-6 sm:col-span-2">
+				<div class="flex items-center justify-center h-12 w-12 rounded-lg bg-orange-500/20 mb-4">
+					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-orange-600">
+						<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/>
+						<path d="M7 12l5 5 8-10"/>
+					</svg>
+				</div>
+				<h3 class="text-lg font-semibold">Advanced Security</h3>
+				<p class="text-muted-foreground mt-2">Enterprise-grade encryption and security features.</p>
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/bento-grid/BentoGrid03.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+	}
+
+	let { class: customClass = '', title = 'Build something amazing', description = '' }: Props = $props();
+</script>
+
+<section class={cn('w-full py-16 px-4 sm:px-6', customClass)}>
+	<div class="mx-auto max-w-7xl">
+		<div class="text-center mb-12">
+			<p class="text-sm font-semibold text-foreground/60 mb-2">Bento Grid</p>
+			<h2 class="text-3xl sm:text-4xl font-bold mb-4">{title}</h2>
+			{#if description}
+				<p class="text-lg text-muted-foreground max-w-2xl mx-auto">{description}</p>
+			{/if}
+		</div>
+
+		<div class="mt-10 grid grid-cols-2 gap-4 sm:grid-cols-4">
+			<!-- Large feature card (2x2) -->
+			<div class="rounded-xl border bg-background p-6 sm:col-span-2 sm:row-span-2">
+				<div class="aspect-video w-full rounded-lg bg-muted/60 flex items-center justify-center mb-4">
+					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="text-muted-foreground/40">
+						<rect x="3" y="3" width="18" height="18" rx="2"/>
+						<circle cx="8.5" cy="8.5" r="1.5"/>
+						<polyline points="21 15 16 10 5 21"/>
+					</svg>
+				</div>
+				<h3 class="text-lg font-semibold">Featured Solution</h3>
+				<p class="text-muted-foreground mt-2">Our flagship product designed for maximum impact.</p>
+			</div>
+
+			<!-- 4 smaller cells -->
+			<div class="rounded-xl border bg-background p-6">
+				<div class="flex items-center justify-center h-10 w-10 rounded-lg bg-foreground/10 mb-3">
+					<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-foreground">
+						<path d="M12 2v20m-8-8h16"/>
+					</svg>
+				</div>
+				<h3 class="font-semibold text-sm">Feature One</h3>
+				<p class="text-xs text-muted-foreground mt-1">Quick description here.</p>
+			</div>
+
+			<div class="rounded-xl border bg-background p-6">
+				<div class="flex items-center justify-center h-10 w-10 rounded-lg bg-foreground/10 mb-3">
+					<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-foreground">
+						<path d="M12 2v20m-8-8h16"/>
+					</svg>
+				</div>
+				<h3 class="font-semibold text-sm">Feature Two</h3>
+				<p class="text-xs text-muted-foreground mt-1">Quick description here.</p>
+			</div>
+
+			<div class="rounded-xl border bg-background p-6">
+				<div class="flex items-center justify-center h-10 w-10 rounded-lg bg-foreground/10 mb-3">
+					<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-foreground">
+						<path d="M12 2v20m-8-8h16"/>
+					</svg>
+				</div>
+				<h3 class="font-semibold text-sm">Feature Three</h3>
+				<p class="text-xs text-muted-foreground mt-1">Quick description here.</p>
+			</div>
+
+			<div class="rounded-xl border bg-background p-6">
+				<div class="flex items-center justify-center h-10 w-10 rounded-lg bg-foreground/10 mb-3">
+					<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-foreground">
+						<path d="M12 2v20m-8-8h16"/>
+					</svg>
+				</div>
+				<h3 class="font-semibold text-sm">Feature Four</h3>
+				<p class="text-xs text-muted-foreground mt-1">Quick description here.</p>
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/bento-grid/BentoGrid04.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+	}
+
+	let { class: customClass = '', title = 'Build something amazing', description = '' }: Props = $props();
+
+	const features = [
+		{ name: 'Analytics', icon: '📊' },
+		{ name: 'Security', icon: '🔒' },
+		{ name: 'Performance', icon: '⚡' },
+		{ name: 'Integrations', icon: '🔗' },
+		{ name: 'Support', icon: '💬' },
+		{ name: 'API', icon: '🔌' }
+	];
+</script>
+
+<section class={cn('w-full py-16 px-4 sm:px-6', customClass)}>
+	<div class="mx-auto max-w-7xl">
+		<div class="text-center mb-12">
+			<p class="text-sm font-semibold text-foreground/60 mb-2">Bento Grid</p>
+			<h2 class="text-3xl sm:text-4xl font-bold mb-4">{title}</h2>
+			{#if description}
+				<p class="text-lg text-muted-foreground max-w-2xl mx-auto">{description}</p>
+			{/if}
+		</div>
+
+		<div class="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-3">
+			{#each features as feature}
+				<div class="rounded-xl border bg-background p-6">
+					<div class="flex items-center justify-center h-12 w-12 rounded-lg bg-foreground/10 mb-4 text-xl">
+						{feature.icon}
+					</div>
+					<h3 class="font-semibold">{feature.name}</h3>
+					<p class="text-sm text-muted-foreground mt-2">
+						{#if feature.name === 'Analytics'}
+							Track metrics and gain insights into user behavior.
+						{:else if feature.name === 'Security'}
+							Enterprise-grade security with encryption.
+						{:else if feature.name === 'Performance'}
+							Lightning-fast speed and optimized performance.
+						{:else if feature.name === 'Integrations'}
+							Connect with your favorite tools seamlessly.
+						{:else if feature.name === 'Support'}
+							24/7 customer support for all your needs.
+						{:else if feature.name === 'API'}
+							Complete API documentation and examples.
+						{/if}
+					</p>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/bento-grid/BentoGrid05.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+	}
+
+	let { class: customClass = '', title = 'Build something amazing', description = '' }: Props = $props();
+
+	const checkIcon = `<polyline points="20 6 9 17 4 12"/>`;
+</script>
+
+<section class={cn('w-full bg-foreground text-background py-16 px-4 sm:px-6', customClass)}>
+	<div class="mx-auto max-w-7xl">
+		<div class="text-center mb-12">
+			<p class="text-sm font-semibold text-background/60 mb-2">Bento Grid</p>
+			<h2 class="text-3xl sm:text-4xl font-bold mb-4">{title}</h2>
+			{#if description}
+				<p class="text-lg text-background/80 max-w-2xl mx-auto">{description}</p>
+			{/if}
+		</div>
+
+		<div class="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-3">
+			<!-- Large Feature (2-col span) -->
+			<div class="rounded-xl bg-background/10 border-background/10 border p-6 sm:col-span-2">
+				<div class="aspect-video w-full rounded-lg bg-background/20 flex items-center justify-center">
+					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="text-background/40">
+						<rect x="3" y="3" width="18" height="18" rx="2"/>
+						<circle cx="8.5" cy="8.5" r="1.5"/>
+						<polyline points="21 15 16 10 5 21"/>
+					</svg>
+				</div>
+				<h3 class="text-xl font-semibold mt-4">Ship faster</h3>
+				<p class="text-background/80 mt-2">Deploy your ideas in minutes with our intuitive platform.</p>
+			</div>
+
+			<!-- Tall Feature (row-span-2) -->
+			<div class="rounded-xl bg-background/10 border-background/10 border p-6 sm:row-span-2">
+				<div class="flex items-center justify-center h-12 w-12 rounded-lg bg-background/20 mb-4">
+					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-background">
+						{checkIcon}
+					</svg>
+				</div>
+				<h3 class="text-lg font-semibold mb-4">Beautiful UI</h3>
+				<ul class="space-y-3">
+					<li class="flex items-start gap-3">
+						<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-background flex-shrink-0 mt-0.5">
+							{checkIcon}
+						</svg>
+						<span class="text-sm">Dark mode support</span>
+					</li>
+					<li class="flex items-start gap-3">
+						<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-background flex-shrink-0 mt-0.5">
+							{checkIcon}
+						</svg>
+						<span class="text-sm">Fully typed</span>
+					</li>
+					<li class="flex items-start gap-3">
+						<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-background flex-shrink-0 mt-0.5">
+							{checkIcon}
+						</svg>
+						<span class="text-sm">Responsive design</span>
+					</li>
+				</ul>
+			</div>
+
+			<!-- Small Cell 1 -->
+			<div class="rounded-xl bg-background/10 border-background/10 border p-6">
+				<div class="flex items-center justify-center h-10 w-10 rounded-lg bg-background/20 mb-3">
+					<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-background">
+						{checkIcon}
+					</svg>
+				</div>
+				<h3 class="font-semibold">Dark mode</h3>
+				<p class="text-sm text-background/80 mt-1">Built-in dark theme support.</p>
+			</div>
+
+			<!-- Small Cell 2 -->
+			<div class="rounded-xl bg-background/10 border-background/10 border p-6">
+				<div class="flex items-center justify-center h-10 w-10 rounded-lg bg-background/20 mb-3">
+					<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-background">
+						{checkIcon}
+					</svg>
+				</div>
+				<h3 class="font-semibold">Fully typed</h3>
+				<p class="text-sm text-background/80 mt-1">100% TypeScript support.</p>
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/bento-grid/BentoGrid06.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+	}
+
+	let { class: customClass = '', title = 'Build something amazing', description = '' }: Props = $props();
+
+	const stats = [
+		{ value: '99.9%', label: 'Uptime', description: 'Industry-leading reliability' },
+		{ value: '10ms', label: 'Latency', description: 'Lightning-fast response times' },
+		{ value: '∞', label: 'Scale', description: 'Unlimited scalability' },
+		{ value: 'Advanced', label: 'Security', description: 'Enterprise protection' },
+		{ value: 'Yes', label: 'API', description: 'Full REST API included' },
+		{ value: '24/7', label: 'Support', description: 'Round-the-clock assistance' }
+	];
+</script>
+
+<section class={cn('w-full py-16 px-4 sm:px-6', customClass)}>
+	<div class="mx-auto max-w-7xl">
+		<div class="text-center mb-12">
+			<p class="text-sm font-semibold text-foreground/60 mb-2">Bento Grid</p>
+			<h2 class="text-3xl sm:text-4xl font-bold mb-4">{title}</h2>
+			{#if description}
+				<p class="text-lg text-muted-foreground max-w-2xl mx-auto">{description}</p>
+			{/if}
+		</div>
+
+		<div class="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-3">
+			{#each stats as stat}
+				<div class="rounded-xl border bg-background p-6">
+					<div class="text-4xl font-bold text-foreground mb-2">{stat.value}</div>
+					<h3 class="font-semibold text-lg">{stat.label}</h3>
+					<p class="text-sm text-muted-foreground mt-2">{stat.description}</p>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/bento-grid/index.ts

@@ -0,0 +1,14 @@
+export { default as BentoGrid01 } from './BentoGrid01.svelte';
+export { default as BentoGrid02 } from './BentoGrid02.svelte';
+export { default as BentoGrid03 } from './BentoGrid03.svelte';
+export { default as BentoGrid04 } from './BentoGrid04.svelte';
+export { default as BentoGrid05 } from './BentoGrid05.svelte';
+export { default as BentoGrid06 } from './BentoGrid06.svelte';
+
+export interface Feature {
+	title: string;
+	description?: string;
+	iconUrl?: string;
+	imageUrl?: string;
+	tag?: string;
+}