@xbg.solutions/create-frontend 1.1.1 → 1.2.0

package/src/registry/blocks/gallery-section/GallerySection08.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		images?: Array<{ src?: string; alt?: string; caption?: string }>;
+	}
+
+	let {
+		class: className,
+		title = 'Explore our gallery',
+		description,
+		images = Array.from({ length: 12 }, (_, i) => ({ alt: `Image ${i + 1}` }))
+	}: Props = $props();
+
+	const imagePlaceholder = `<div class="w-full h-full bg-muted rounded-lg flex items-center justify-center overflow-hidden"><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>`;
+</script>
+
+<section class={cn('w-full px-4 py-16', className)}>
+	<div class="mx-auto max-w-6xl">
+		{#if title || description}
+			<div class="mb-8 text-center">
+				<p class="mb-2 text-sm font-medium text-muted-foreground">Gallery Section</p>
+				{#if title}
+					<h2 class="mb-2 text-3xl font-bold tracking-tight sm:text-4xl">{title}</h2>
+				{/if}
+				{#if description}
+					<p class="text-lg text-muted-foreground">{description}</p>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="mt-8 flex gap-4 overflow-x-auto pb-4 snap-x snap-mandatory scrollbar-hide">
+			{#each images.slice(0, 12) as image}
+				<div class="snap-start shrink-0 w-72 aspect-[3/4]">
+					{@html imagePlaceholder}
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/gallery-section/GallerySection09.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		images?: Array<{ src?: string; alt?: string; caption?: string }>;
+	}
+
+	let {
+		class: className,
+		title = 'Explore our gallery',
+		description,
+		images = Array.from({ length: 4 }, (_, i) => ({ alt: `Image ${i + 1}`, caption: `Featured Item ${i + 1}` }))
+	}: Props = $props();
+
+	const imagePlaceholder = `<div class="w-full h-full bg-muted rounded-lg flex items-center justify-center overflow-hidden"><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>`;
+</script>
+
+<section class={cn('w-full px-4 py-16', className)}>
+	<div class="mx-auto max-w-6xl">
+		{#if title || description}
+			<div class="mb-8 text-center">
+				<p class="mb-2 text-sm font-medium text-muted-foreground">Gallery Section</p>
+				{#if title}
+					<h2 class="mb-2 text-3xl font-bold tracking-tight sm:text-4xl">{title}</h2>
+				{/if}
+				{#if description}
+					<p class="text-lg text-muted-foreground">{description}</p>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="mt-8">
+			<div class="aspect-[21/9] w-full">
+				{@html imagePlaceholder}
+			</div>
+
+			<div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-3">
+				{#each images.slice(1, 4) as item}
+					<div class="group cursor-pointer">
+						<div class="aspect-square overflow-hidden rounded-lg">
+							{@html imagePlaceholder}
+						</div>
+						{#if item.caption}
+							<h3 class="mt-3 font-semibold group-hover:text-foreground/80">{item.caption}</h3>
+							<p class="mt-1 text-sm text-muted-foreground">Explore this gallery item</p>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/gallery-section/GallerySection10.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		images?: Array<{ src?: string; alt?: string; caption?: string }>;
+	}
+
+	let {
+		class: className,
+		title = 'Explore our gallery',
+		description,
+		images = Array.from({ length: 12 }, (_, i) => ({ alt: `Image ${i + 1}` }))
+	}: Props = $props();
+
+	const imagePlaceholder = `<div class="w-full h-full bg-muted rounded-lg flex items-center justify-center overflow-hidden"><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>`;
+</script>
+
+<section class="w-full bg-foreground py-16 px-4">
+	<div class="mx-auto max-w-6xl">
+		{#if title || description}
+			<div class="mb-8 text-center">
+				<p class="mb-2 text-sm font-medium text-background/60">Gallery Section</p>
+				{#if title}
+					<h2 class="mb-2 text-3xl font-bold tracking-tight text-background sm:text-4xl">{title}</h2>
+				{/if}
+				{#if description}
+					<p class="text-lg text-background/80">{description}</p>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="mt-8 grid grid-cols-2 gap-3 sm:grid-cols-3">
+			{#each images.slice(0, 12) as image}
+				<div class="aspect-square">
+					{@html imagePlaceholder}
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/gallery-section/GallerySection11.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		images?: Array<{ src?: string; alt?: string; caption?: string }>;
+	}
+
+	let {
+		class: className,
+		title = 'Explore our gallery',
+		description,
+		images = Array.from({ length: 12 }, (_, i) => ({ alt: `Image ${i + 1}` }))
+	}: Props = $props();
+
+	let selectedIndex: number | null = $state(null);
+
+	const imagePlaceholder = `<div class="w-full h-full bg-muted rounded-lg flex items-center justify-center overflow-hidden"><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>`;
+</script>
+
+<section class={cn('w-full px-4 py-16', className)}>
+	<div class="mx-auto max-w-6xl">
+		{#if title || description}
+			<div class="mb-8 text-center">
+				<p class="mb-2 text-sm font-medium text-muted-foreground">Gallery Section</p>
+				{#if title}
+					<h2 class="mb-2 text-3xl font-bold tracking-tight sm:text-4xl">{title}</h2>
+				{/if}
+				{#if description}
+					<p class="text-lg text-muted-foreground">{description}</p>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="mt-8 grid grid-cols-2 gap-3 sm:grid-cols-3">
+			{#each images.slice(0, 12) as image, index}
+				<button
+					class="aspect-square cursor-pointer transition-opacity hover:opacity-80"
+					onclick={() => (selectedIndex = index)}
+					type="button"
+					aria-label={`Open image ${index + 1}`}
+				>
+					{@html imagePlaceholder}
+				</button>
+			{/each}
+		</div>
+	</div>
+
+	{#if selectedIndex !== null}
+		<div
+			class="fixed inset-0 z-50 bg-black/80 flex items-center justify-center"
+			onclick={() => (selectedIndex = null)}
+			role="dialog"
+			aria-label="Image lightbox"
+		>
+			<div class="max-w-4xl w-full mx-4 relative" onclick={(e) => e.stopPropagation()}>
+				<div class="aspect-video bg-black rounded-lg flex items-center justify-center">
+					{@html imagePlaceholder}
+				</div>
+				<button
+					class="absolute top-4 right-4 text-white hover:text-white/80 transition-opacity"
+					onclick={() => (selectedIndex = null)}
+					type="button"
+					aria-label="Close lightbox"
+				>
+					<svg width="24" height="24" 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>
+		</div>
+	{/if}

package/src/registry/blocks/gallery-section/GallerySection12.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		images?: Array<{ src?: string; alt?: string; caption?: string }>;
+	}
+
+	let {
+		class: className,
+		title = 'Explore our gallery',
+		description = 'Premium featured showcase with curated highlights',
+		images = Array.from({ length: 1 }, (_, i) => ({ alt: `Feature ${i + 1}` }))
+	}: Props = $props();
+
+	const features = ['Premium quality materials', 'Handcrafted details', 'Sustainable practices', 'Limited edition availability'];
+
+	const imagePlaceholder = `<div class="w-full h-full bg-muted rounded-lg flex items-center justify-center overflow-hidden"><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>`;
+</script>
+
+<section class={cn('w-full px-4 py-16', className)}>
+	<div class="mx-auto max-w-6xl">
+		{#if title || description}
+			<div class="mb-12 text-center">
+				<p class="mb-2 text-sm font-medium text-muted-foreground">Gallery Section</p>
+				{#if title}
+					<h2 class="mb-2 text-3xl font-bold tracking-tight sm:text-4xl">{title}</h2>
+				{/if}
+				{#if description}
+					<p class="text-lg text-muted-foreground">{description}</p>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="grid grid-cols-1 gap-12 sm:grid-cols-2 items-center">
+			<div class="aspect-square">
+				{@html imagePlaceholder}
+			</div>
+
+			<div>
+				<h3 class="text-2xl font-bold mb-4">Premium Feature Collection</h3>
+				<p class="text-muted-foreground mb-6">Discover our handpicked selection of exceptional items carefully curated for discerning customers.</p>
+
+				<ul class="space-y-4 mb-8">
+					{#each features as feature}
+						<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="shrink-0 text-foreground mt-0.5"
+							>
+								<polyline points="20 6 9 17 4 12"></polyline>
+							</svg>
+							<span class="text-base">{feature}</span>
+						</li>
+					{/each}
+				</ul>
+
+				<div class="flex gap-3">
+					<button class="px-6 py-2 bg-foreground text-background rounded-lg font-medium hover:bg-foreground/90 transition-colors">
+						Learn More
+					</button>
+					<button class="px-6 py-2 border border-foreground rounded-lg font-medium hover:bg-foreground/5 transition-colors">
+						View Collection
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/gallery-section/index.ts

@@ -0,0 +1,12 @@
+export { default as GallerySection01 } from './GallerySection01.svelte';
+export { default as GallerySection02 } from './GallerySection02.svelte';
+export { default as GallerySection03 } from './GallerySection03.svelte';
+export { default as GallerySection04 } from './GallerySection04.svelte';
+export { default as GallerySection05 } from './GallerySection05.svelte';
+export { default as GallerySection06 } from './GallerySection06.svelte';
+export { default as GallerySection07 } from './GallerySection07.svelte';
+export { default as GallerySection08 } from './GallerySection08.svelte';
+export { default as GallerySection09 } from './GallerySection09.svelte';
+export { default as GallerySection10 } from './GallerySection10.svelte';
+export { default as GallerySection11 } from './GallerySection11.svelte';
+export { default as GallerySection12 } from './GallerySection12.svelte';

package/src/registry/blocks/header-section/HeaderSection01.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		eyebrow?: string;
+		title?: string;
+		description?: string;
+		primaryLabel?: string;
+		secondaryLabel?: string;
+		onPrimary?: () => void;
+		onSecondary?: () => void;
+	}
+
+	let {
+		class: className,
+		eyebrow = 'New release ✦',
+		title = 'The modern way to build for the web',
+		description,
+		primaryLabel = 'Get started',
+		secondaryLabel = 'View demo',
+		onPrimary,
+		onSecondary
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background px-4 py-20 sm:py-28', className)}>
+	<div class="mx-auto max-w-3xl text-center">
+		{#if eyebrow}
+			<div class="mb-6 inline-flex items-center gap-2 rounded-full border bg-muted/50 px-3 py-1 text-xs">
+				{eyebrow}
+			</div>
+		{/if}
+
+		{#if title}
+			<h1 class="text-4xl sm:text-6xl font-bold tracking-tight mb-4">{title}</h1>
+		{/if}
+
+		{#if description}
+			<p class="text-lg text-muted-foreground mb-8">{description}</p>
+		{/if}
+
+		<div class="flex flex-col sm:flex-row gap-4 justify-center">
+			<Button onclick={onPrimary} size="lg">
+				{primaryLabel}
+			</Button>
+			<Button onclick={onSecondary} variant="outline" size="lg">
+				{secondaryLabel}
+			</Button>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/header-section/HeaderSection02.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		eyebrow?: string;
+		title?: string;
+		description?: string;
+		primaryLabel?: string;
+		secondaryLabel?: string;
+		onPrimary?: () => void;
+		onSecondary?: () => void;
+	}
+
+	let {
+		class: className,
+		eyebrow = 'New release ✦',
+		title = 'The modern way to build for the web',
+		description,
+		primaryLabel = 'Get started',
+		secondaryLabel = 'View demo',
+		onPrimary,
+		onSecondary
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background px-4 py-20 sm:py-28', className)}>
+	<div class="mx-auto max-w-2xl">
+		{#if eyebrow}
+			<div class="mb-6 inline-flex items-center gap-2 rounded-full border bg-muted/50 px-3 py-1 text-xs">
+				{eyebrow}
+			</div>
+		{/if}
+
+		{#if title}
+			<h1 class="text-4xl sm:text-6xl font-bold tracking-tight mb-4">{title}</h1>
+		{/if}
+
+		{#if description}
+			<p class="text-lg text-muted-foreground mb-8">{description}</p>
+		{/if}
+
+		<div class="flex flex-col sm:flex-row gap-4">
+			<Button onclick={onPrimary} size="lg">
+				{primaryLabel}
+			</Button>
+			<Button onclick={onSecondary} variant="outline" size="lg">
+				{secondaryLabel}
+			</Button>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/header-section/HeaderSection03.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		eyebrow?: string;
+		title?: string;
+		description?: string;
+		primaryLabel?: string;
+		secondaryLabel?: string;
+		onPrimary?: () => void;
+		onSecondary?: () => void;
+	}
+
+	let {
+		class: className,
+		eyebrow = 'New release ✦',
+		title = 'The modern way to build for the web',
+		description,
+		primaryLabel = 'Get started',
+		secondaryLabel = 'View demo',
+		onPrimary,
+		onSecondary
+	}: Props = $props();
+
+	const imagePlaceholder = `<div class="aspect-video w-full rounded-2xl bg-muted shadow-2xl flex items-center justify-center"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" 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>`;
+</script>
+
+<section class={cn('w-full bg-background px-4 py-20 sm:py-28', className)}>
+	<div class="mx-auto max-w-3xl">
+		<div class="text-center mb-12">
+			{#if eyebrow}
+				<div class="mb-6 inline-flex items-center gap-2 rounded-full border bg-muted/50 px-3 py-1 text-xs">
+					{eyebrow}
+				</div>
+			{/if}
+
+			{#if title}
+				<h1 class="text-4xl sm:text-6xl font-bold tracking-tight mb-4">{title}</h1>
+			{/if}
+
+			{#if description}
+				<p class="text-lg text-muted-foreground mb-8">{description}</p>
+			{/if}
+
+			<div class="flex flex-col sm:flex-row gap-4 justify-center">
+				<Button onclick={onPrimary} size="lg">
+					{primaryLabel}
+				</Button>
+				<Button onclick={onSecondary} variant="outline" size="lg">
+					{secondaryLabel}
+				</Button>
+			</div>
+		</div>
+
+		<div class="mt-12">
+			{@html imagePlaceholder}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/header-section/HeaderSection04.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		eyebrow?: string;
+		title?: string;
+		description?: string;
+		primaryLabel?: string;
+		secondaryLabel?: string;
+		onPrimary?: () => void;
+		onSecondary?: () => void;
+	}
+
+	let {
+		class: className,
+		eyebrow = 'New release ✦',
+		title = 'The modern way to build for the web',
+		description,
+		primaryLabel = 'Get started',
+		secondaryLabel = 'View demo',
+		onPrimary,
+		onSecondary
+	}: Props = $props();
+
+	const imagePlaceholder = `<div class="aspect-video w-full rounded-2xl bg-muted shadow-2xl flex items-center justify-center"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" 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>`;
+</script>
+
+<section class={cn('w-full bg-background px-4 py-20 sm:py-28', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div class="grid grid-cols-1 gap-12 sm:grid-cols-2 items-center">
+			<div>
+				{#if eyebrow}
+					<div class="mb-6 inline-flex items-center gap-2 rounded-full border bg-muted/50 px-3 py-1 text-xs">
+						{eyebrow}
+					</div>
+				{/if}
+
+				{#if title}
+					<h1 class="text-4xl sm:text-5xl font-bold tracking-tight mb-4">{title}</h1>
+				{/if}
+
+				{#if description}
+					<p class="text-lg text-muted-foreground mb-8">{description}</p>
+				{/if}
+
+				<div class="flex flex-col sm:flex-row gap-4">
+					<Button onclick={onPrimary} size="lg">
+						{primaryLabel}
+					</Button>
+					<Button onclick={onSecondary} variant="outline" size="lg">
+						{secondaryLabel}
+					</Button>
+				</div>
+			</div>
+
+			<div>
+				{@html imagePlaceholder}
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/header-section/HeaderSection05.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		eyebrow?: string;
+		title?: string;
+		description?: string;
+		primaryLabel?: string;
+		secondaryLabel?: string;
+		onPrimary?: () => void;
+		onSecondary?: () => void;
+	}
+
+	let {
+		class: className,
+		eyebrow = 'New release ✦',
+		title = 'The modern way to build for the web',
+		description,
+		primaryLabel = 'Get started',
+		secondaryLabel = 'View demo',
+		onPrimary,
+		onSecondary
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-foreground text-background py-20 sm:py-28 px-4', className)}>
+	<div class="mx-auto max-w-3xl text-center">
+		{#if eyebrow}
+			<div class="mb-6 inline-flex items-center gap-2 rounded-full border border-background/20 bg-background/10 px-3 py-1 text-xs">
+				{eyebrow}
+			</div>
+		{/if}
+
+		{#if title}
+			<h1 class="text-4xl sm:text-6xl font-bold tracking-tight mb-4">{title}</h1>
+		{/if}
+
+		{#if description}
+			<p class="text-lg text-background/80 mb-8">{description}</p>
+		{/if}
+
+		<div class="flex flex-col sm:flex-row gap-4 justify-center">
+			<Button onclick={onPrimary} size="lg" variant="secondary">
+				{primaryLabel}
+			</Button>
+			<Button onclick={onSecondary} variant="outline" size="lg" class="border-background/30 text-background hover:bg-background/10">
+				{secondaryLabel}
+			</Button>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/header-section/HeaderSection06.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		eyebrow?: string;
+		title?: string;
+		description?: string;
+		primaryLabel?: string;
+		secondaryLabel?: string;
+		onPrimary?: () => void;
+		onSecondary?: () => void;
+	}
+
+	let {
+		class: className,
+		eyebrow = 'New release ✦',
+		title = 'The modern way to build for the web',
+		description,
+		primaryLabel = 'Get started',
+		secondaryLabel = 'View demo',
+		onPrimary,
+		onSecondary
+	}: Props = $props();
+
+	const stats = [
+		{ value: '10K+', label: 'Active Users' },
+		{ value: '99.9%', label: 'Uptime' },
+		{ value: '4.9/5', label: 'Rating' }
+	];
+</script>
+
+<section class={cn('w-full bg-background px-4 py-20 sm:py-28', className)}>
+	<div class="mx-auto max-w-3xl">
+		<div class="text-center">
+			{#if eyebrow}
+				<div class="mb-6 inline-flex items-center gap-2 rounded-full border bg-muted/50 px-3 py-1 text-xs">
+					{eyebrow}
+				</div>
+			{/if}
+
+			{#if title}
+				<h1 class="text-4xl sm:text-6xl font-bold tracking-tight mb-4">{title}</h1>
+			{/if}
+
+			{#if description}
+				<p class="text-lg text-muted-foreground mb-8">{description}</p>
+			{/if}
+
+			<div class="flex flex-col sm:flex-row gap-4 justify-center">
+				<Button onclick={onPrimary} size="lg">
+					{primaryLabel}
+				</Button>
+				<Button onclick={onSecondary} variant="outline" size="lg">
+					{secondaryLabel}
+				</Button>
+			</div>
+		</div>
+
+		<div class="mt-12 grid grid-cols-3 gap-8 border-t pt-8">
+			{#each stats as stat}
+				<div class="text-center">
+					<p class="text-3xl font-bold">{stat.value}</p>
+					<p class="mt-2 text-sm text-muted-foreground">{stat.label}</p>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>