@xbg.solutions/create-frontend 1.1.1 → 1.2.0

package/src/registry/blocks/footer/Footer02.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface FooterLink {
+		label: string;
+		href?: string;
+	}
+
+	interface FooterColumn {
+		heading: string;
+		links: FooterLink[];
+	}
+
+	interface Props {
+		class?: string;
+	}
+
+	let { class: customClass = '' }: Props = $props();
+
+	const columns: FooterColumn[] = [
+		{ heading: 'Product', links: [{label:'Features'},{label:'Pricing'},{label:'Changelog'},{label:'Docs'}] },
+		{ heading: 'Company', links: [{label:'About'},{label:'Blog'},{label:'Careers'},{label:'Press'}] },
+		{ heading: 'Legal', links: [{label:'Privacy'},{label:'Terms'},{label:'Cookie Policy'},{label:'Licenses'}] }
+	];
+
+	const logoSvg = `<path d="m9 12 2 2 4-4"/><path d="M5 7c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v12H5V7z"/>`;
+</script>
+
+<footer class={cn('w-full border-t bg-background px-4 py-16 sm:px-6', customClass)}>
+	<div class="mx-auto max-w-7xl">
+		<div class="grid grid-cols-2 gap-8 sm:grid-cols-4 mb-8">
+			<!-- Logo + Tagline Column -->
+			<div>
+				<div class="flex items-center gap-2 font-semibold mb-4">
+					<div class="h-7 w-7 rounded bg-foreground flex items-center justify-center">
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5">
+							{logoSvg}
+						</svg>
+					</div>
+					Acme Inc.
+				</div>
+				<p class="text-sm text-muted-foreground">Building the future of technology.</p>
+			</div>
+
+			<!-- Link Columns -->
+			{#each columns as column}
+				<div>
+					<h4 class="font-semibold mb-4">{column.heading}</h4>
+					<ul class="space-y-3">
+						{#each column.links as link}
+							<li>
+								<a href={link.href || '#'} class="text-sm text-muted-foreground hover:text-foreground transition-colors">
+									{link.label}
+								</a>
+							</li>
+						{/each}
+					</ul>
+				</div>
+			{/each}
+		</div>
+
+		<!-- Divider -->
+		<div class="border-t pt-8">
+			<p class="text-sm text-muted-foreground text-center">© {new Date().getFullYear()} Acme Inc. All rights reserved.</p>
+		</div>
+	</div>
+</footer>

package/src/registry/blocks/footer/Footer03.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface FooterLink {
+		label: string;
+		href?: string;
+	}
+
+	interface FooterColumn {
+		heading: string;
+		links: FooterLink[];
+	}
+
+	interface Props {
+		class?: string;
+	}
+
+	let { class: customClass = '' }: Props = $props();
+
+	const columns: FooterColumn[] = [
+		{ heading: 'Product', links: [{label:'Features'},{label:'Pricing'},{label:'Changelog'},{label:'Docs'}] },
+		{ heading: 'Company', links: [{label:'About'},{label:'Blog'},{label:'Careers'},{label:'Press'}] },
+		{ heading: 'Legal', links: [{label:'Privacy'},{label:'Terms'},{label:'Cookie Policy'},{label:'Licenses'}] }
+	];
+
+	const logoSvg = `<path d="m9 12 2 2 4-4"/><path d="M5 7c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v12H5V7z"/>`;
+	const twitterIcon = `<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>`;
+	const githubIcon = `<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>`;
+	const linkedinIcon = `<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/>`;
+</script>
+
+<footer class={cn('w-full border-t bg-background px-4 py-16 sm:px-6', customClass)}>
+	<div class="mx-auto max-w-7xl">
+		<div class="grid grid-cols-2 gap-8 sm:grid-cols-4 mb-8">
+			<!-- Logo + Tagline Column -->
+			<div>
+				<div class="flex items-center gap-2 font-semibold mb-4">
+					<div class="h-7 w-7 rounded bg-foreground flex items-center justify-center">
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5">
+							{logoSvg}
+						</svg>
+					</div>
+					Acme Inc.
+				</div>
+				<p class="text-sm text-muted-foreground">Building the future of technology.</p>
+			</div>
+
+			<!-- Link Columns -->
+			{#each columns as column}
+				<div>
+					<h4 class="font-semibold mb-4">{column.heading}</h4>
+					<ul class="space-y-3">
+						{#each column.links as link}
+							<li>
+								<a href={link.href || '#'} class="text-sm text-muted-foreground hover:text-foreground transition-colors">
+									{link.label}
+								</a>
+							</li>
+						{/each}
+					</ul>
+				</div>
+			{/each}
+		</div>
+
+		<!-- Bottom row with social icons -->
+		<div class="border-t pt-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+			<p class="text-sm text-muted-foreground">© {new Date().getFullYear()} Acme Inc. All rights reserved.</p>
+			<div class="flex gap-4">
+				<a href="#" class="text-muted-foreground hover:text-foreground transition-colors">
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+						{twitterIcon}
+					</svg>
+				</a>
+				<a href="#" class="text-muted-foreground hover:text-foreground transition-colors">
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+						{githubIcon}
+					</svg>
+				</a>
+				<a href="#" class="text-muted-foreground hover:text-foreground transition-colors">
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+						{linkedinIcon}
+					</svg>
+				</a>
+			</div>
+		</div>
+	</div>
+</footer>

package/src/registry/blocks/footer/Footer04.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface FooterLink {
+		label: string;
+		href?: string;
+	}
+
+	interface FooterColumn {
+		heading: string;
+		links: FooterLink[];
+	}
+
+	interface Props {
+		class?: string;
+	}
+
+	let { class: customClass = '' }: Props = $props();
+
+	const columns: FooterColumn[] = [
+		{ heading: 'Product', links: [{label:'Features'},{label:'Pricing'},{label:'Changelog'},{label:'Docs'}] },
+		{ heading: 'Company', links: [{label:'About'},{label:'Blog'},{label:'Careers'},{label:'Press'}] },
+		{ heading: 'Legal', links: [{label:'Privacy'},{label:'Terms'},{label:'Cookie Policy'},{label:'Licenses'}] }
+	];
+
+	const logoSvg = `<path d="m9 12 2 2 4-4"/><path d="M5 7c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v12H5V7z"/>`;
+</script>
+
+<footer class={cn('w-full bg-foreground text-background px-4 py-16 sm:px-6', customClass)}>
+	<div class="mx-auto max-w-7xl">
+		<div class="grid grid-cols-2 gap-8 sm:grid-cols-4 mb-8">
+			<!-- Logo + Tagline Column -->
+			<div>
+				<div class="flex items-center gap-2 font-semibold mb-4">
+					<div class="h-7 w-7 rounded bg-background flex items-center justify-center">
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+							{logoSvg}
+						</svg>
+					</div>
+					Acme Inc.
+				</div>
+				<p class="text-sm text-background/60">Building the future of technology.</p>
+			</div>
+
+			<!-- Link Columns -->
+			{#each columns as column}
+				<div>
+					<h4 class="font-semibold mb-4">{column.heading}</h4>
+					<ul class="space-y-3">
+						{#each column.links as link}
+							<li>
+								<a href={link.href || '#'} class="text-sm text-background/60 hover:text-background transition-colors">
+									{link.label}
+								</a>
+							</li>
+						{/each}
+					</ul>
+				</div>
+			{/each}
+		</div>
+
+		<!-- Divider -->
+		<div class="border-t border-background/20 pt-8">
+			<p class="text-sm text-background/60 text-center">© {new Date().getFullYear()} Acme Inc. All rights reserved.</p>
+		</div>
+	</div>
+</footer>

package/src/registry/blocks/footer/Footer05.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+	}
+
+	let { class: customClass = '' }: Props = $props();
+</script>
+
+<footer class={cn('w-full border-t bg-background py-6 px-4 text-center', customClass)}>
+	<div class="flex flex-wrap items-center justify-center gap-4 text-sm text-muted-foreground">
+		<a href="#" class="hover:text-foreground transition-colors">Privacy Policy</a>
+		<span>•</span>
+		<a href="#" class="hover:text-foreground transition-colors">Terms of Service</a>
+		<span>•</span>
+		<a href="#" class="hover:text-foreground transition-colors">Cookie Policy</a>
+	</div>
+	<p class="mt-4 text-sm text-muted-foreground">© {new Date().getFullYear()} Acme Inc. All rights reserved.</p>
+</footer>

package/src/registry/blocks/footer/Footer06.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface FooterLink {
+		label: string;
+		href?: string;
+	}
+
+	interface FooterColumn {
+		heading: string;
+		links: FooterLink[];
+	}
+
+	interface Props {
+		class?: string;
+	}
+
+	let { class: customClass = '' }: Props = $props();
+
+	const columns: FooterColumn[] = [
+		{ heading: 'Product', links: [{label:'Features'},{label:'Pricing'},{label:'Changelog'},{label:'Docs'}] },
+		{ heading: 'Company', links: [{label:'About'},{label:'Blog'},{label:'Careers'},{label:'Press'}] },
+		{ heading: 'Legal', links: [{label:'Privacy'},{label:'Terms'},{label:'Cookie Policy'}] },
+		{ heading: 'Support', links: [{label:'Help Center'},{label:'Contact'},{label:'Status'},{label:'Roadmap'}] }
+	];
+
+	const logoSvg = `<path d="m9 12 2 2 4-4"/><path d="M5 7c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v12H5V7z"/>`;
+	const twitterIcon = `<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>`;
+	const githubIcon = `<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>`;
+	const linkedinIcon = `<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/>`;
+</script>
+
+<footer class={cn('w-full border-t bg-background px-4 py-16 sm:px-6', customClass)}>
+	<div class="mx-auto max-w-7xl">
+		<!-- Top section: Logo + social + description -->
+		<div class="grid grid-cols-1 sm:grid-cols-2 gap-8 mb-12">
+			<div>
+				<div class="flex items-center gap-2 font-semibold mb-4">
+					<div class="h-7 w-7 rounded bg-foreground flex items-center justify-center">
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5">
+							{logoSvg}
+						</svg>
+					</div>
+					Acme Inc.
+				</div>
+				<p class="text-sm text-muted-foreground mb-4">Building the future of technology.</p>
+				<div class="flex gap-4">
+					<a href="#" class="text-muted-foreground hover:text-foreground transition-colors">
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							{twitterIcon}
+						</svg>
+					</a>
+					<a href="#" class="text-muted-foreground hover:text-foreground transition-colors">
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							{githubIcon}
+						</svg>
+					</a>
+					<a href="#" class="text-muted-foreground hover:text-foreground transition-colors">
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							{linkedinIcon}
+						</svg>
+					</a>
+				</div>
+			</div>
+		</div>
+
+		<!-- Middle section: Link columns -->
+		<div class="grid grid-cols-2 gap-8 sm:grid-cols-4 mb-12">
+			{#each columns as column}
+				<div>
+					<h4 class="font-semibold mb-4">{column.heading}</h4>
+					<ul class="space-y-3">
+						{#each column.links as link}
+							<li>
+								<a href={link.href || '#'} class="text-sm text-muted-foreground hover:text-foreground transition-colors">
+									{link.label}
+								</a>
+							</li>
+						{/each}
+					</ul>
+				</div>
+			{/each}
+		</div>
+
+		<!-- Newsletter section -->
+		<div class="border-t pt-8 flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
+			<div>
+				<h4 class="font-semibold mb-1">Subscribe to our newsletter</h4>
+				<p class="text-sm text-muted-foreground">Get the latest updates delivered to your inbox.</p>
+			</div>
+			<div class="flex gap-2 w-full sm:w-auto">
+				<input
+					type="email"
+					placeholder="Enter your email"
+					class="px-4 py-2 rounded-lg border bg-background text-foreground placeholder:text-muted-foreground flex-1 sm:flex-initial"
+				/>
+				<Button>Subscribe</Button>
+			</div>
+		</div>
+
+		<!-- Bottom -->
+		<div class="border-t mt-8 pt-8">
+			<p class="text-sm text-muted-foreground text-center">© {new Date().getFullYear()} Acme Inc. All rights reserved.</p>
+		</div>
+	</div>
+</footer>

package/src/registry/blocks/footer/Footer07.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface FooterLink {
+		label: string;
+		href?: string;
+	}
+
+	interface FooterColumn {
+		heading: string;
+		links: FooterLink[];
+	}
+
+	interface Props {
+		class?: string;
+	}
+
+	let { class: customClass = '' }: Props = $props();
+
+	const columns: FooterColumn[] = [
+		{ heading: 'Product', links: [{label:'Features'},{label:'Pricing'},{label:'Changelog'}] },
+		{ heading: 'Company', links: [{label:'About'},{label:'Blog'},{label:'Careers'}] }
+	];
+
+	const logoSvg = `<path d="m9 12 2 2 4-4"/><path d="M5 7c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v12H5V7z"/>`;
+	const twitterIcon = `<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>`;
+	const githubIcon = `<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>`;
+	const linkedinIcon = `<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/>`;
+</script>
+
+<footer class={cn('w-full border-t bg-background px-4 py-12 sm:px-6', customClass)}>
+	<div class="mx-auto max-w-7xl">
+		<div class="grid grid-cols-1 gap-8 sm:grid-cols-[1fr_2fr]">
+			<!-- Left: Logo + social -->
+			<div>
+				<div class="flex items-center gap-2 font-semibold mb-4">
+					<div class="h-7 w-7 rounded bg-foreground flex items-center justify-center">
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5">
+							{logoSvg}
+						</svg>
+					</div>
+					Acme Inc.
+				</div>
+				<p class="text-sm text-muted-foreground mb-4">Building the future of technology.</p>
+				<div class="flex gap-4">
+					<a href="#" class="text-muted-foreground hover:text-foreground transition-colors">
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							{twitterIcon}
+						</svg>
+					</a>
+					<a href="#" class="text-muted-foreground hover:text-foreground transition-colors">
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							{githubIcon}
+						</svg>
+					</a>
+					<a href="#" class="text-muted-foreground hover:text-foreground transition-colors">
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							{linkedinIcon}
+						</svg>
+					</a>
+				</div>
+			</div>
+
+			<!-- Right: Link columns -->
+			<div class="grid grid-cols-2 gap-8">
+				{#each columns as column}
+					<div>
+						<h4 class="font-semibold mb-4">{column.heading}</h4>
+						<ul class="space-y-3">
+							{#each column.links as link}
+								<li>
+									<a href={link.href || '#'} class="text-sm text-muted-foreground hover:text-foreground transition-colors">
+										{link.label}
+									</a>
+								</li>
+							{/each}
+						</ul>
+					</div>
+				{/each}
+			</div>
+		</div>
+
+		<!-- Copyright -->
+		<div class="border-t mt-8 pt-8">
+			<p class="text-sm text-muted-foreground text-center">© {new Date().getFullYear()} Acme Inc. All rights reserved.</p>
+		</div>
+	</div>
+</footer>

package/src/registry/blocks/footer/Footer08.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface FooterLink {
+		label: string;
+		href?: string;
+	}
+
+	interface FooterColumn {
+		heading: string;
+		links: FooterLink[];
+	}
+
+	interface Props {
+		class?: string;
+	}
+
+	let { class: customClass = '' }: Props = $props();
+
+	const columns: FooterColumn[] = [
+		{ heading: 'Product', links: [{label:'Features'},{label:'Pricing'},{label:'Docs'}] },
+		{ heading: 'Company', links: [{label:'About'},{label:'Blog'},{label:'Careers'}] }
+	];
+
+	const logoSvg = `<path d="m9 12 2 2 4-4"/><path d="M5 7c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v12H5V7z"/>`;
+</script>
+
+<footer class={cn('w-full border-t bg-background px-4 py-12 sm:px-6', customClass)}>
+	<div class="mx-auto max-w-7xl">
+		<div class="grid grid-cols-1 sm:grid-cols-2 gap-12 mb-12">
+			<!-- Left: Logo + description + badges -->
+			<div>
+				<div class="flex items-center gap-2 font-semibold mb-4">
+					<div class="h-7 w-7 rounded bg-foreground flex items-center justify-center">
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5">
+							{logoSvg}
+						</svg>
+					</div>
+					Acme Inc.
+				</div>
+				<p class="text-sm text-muted-foreground mb-6">The platform for building amazing products. Download our app today.</p>
+				
+				<!-- App store badges -->
+				<div class="flex flex-col sm:flex-row gap-3">
+					<button class="flex items-center gap-2 rounded-lg border px-3 py-2 text-sm hover:bg-muted transition-colors">
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+							<path d="M18.71 19.71L12.41 13.41 12 13l-.41.41-6.3 6.3a2 2 0 1 0 2.83 2.83l6.3-6.3.41-.41.41.41 6.3 6.3a2 2 0 1 0 2.83-2.83zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
+						</svg>
+						App Store
+					</button>
+					<button class="flex items-center gap-2 rounded-lg border px-3 py-2 text-sm hover:bg-muted transition-colors">
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+							<path d="M3 13.5h8v8.5H3z M13.5 3h8v8.5h-8z M13.5 13.5h8v8.5h-8z M3 3h8v8.5H3z"/>
+						</svg>
+						Google Play
+					</button>
+				</div>
+			</div>
+
+			<!-- Right: Link columns -->
+			<div class="grid grid-cols-2 gap-8">
+				{#each columns as column}
+					<div>
+						<h4 class="font-semibold mb-4">{column.heading}</h4>
+						<ul class="space-y-3">
+							{#each column.links as link}
+								<li>
+									<a href={link.href || '#'} class="text-sm text-muted-foreground hover:text-foreground transition-colors">
+										{link.label}
+									</a>
+								</li>
+							{/each}
+						</ul>
+					</div>
+				{/each}
+			</div>
+		</div>
+
+		<!-- Divider -->
+		<div class="border-t pt-8">
+			<p class="text-sm text-muted-foreground text-center">© {new Date().getFullYear()} Acme Inc. All rights reserved.</p>
+		</div>
+	</div>
+</footer>

package/src/registry/blocks/footer/Footer09.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+	}
+
+	let { class: customClass = '' }: Props = $props();
+
+	const links = ['Features', 'Pricing', 'Docs', 'About', 'Blog', 'Careers'];
+	const logoSvg = `<path d="m9 12 2 2 4-4"/><path d="M5 7c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v12H5V7z"/>`;
+	const twitterIcon = `<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>`;
+	const githubIcon = `<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>`;
+	const linkedinIcon = `<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/>`;
+</script>
+
+<footer class={cn('w-full bg-gradient-to-t from-black to-foreground/90 text-background py-16 px-4 sm:px-6', customClass)}>
+	<div class="mx-auto max-w-7xl">
+		<!-- Center: Logo + tagline -->
+		<div class="text-center mb-12">
+			<div class="flex items-center justify-center gap-2 font-semibold mb-4">
+				<div class="h-8 w-8 rounded bg-background flex items-center justify-center">
+					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+						{logoSvg}
+					</svg>
+				</div>
+				Acme Inc.
+			</div>
+			<p class="text-lg text-background/80 mb-8">Building the future of technology.</p>
+		</div>
+
+		<!-- Links -->
+		<div class="flex flex-wrap justify-center gap-6 mb-8 text-center">
+			{#each links as link}
+				<a href="#" class="text-background/70 hover:text-background transition-colors text-sm">
+					{link}
+				</a>
+			{/each}
+		</div>
+
+		<!-- Social icons -->
+		<div class="flex justify-center gap-6 mb-8">
+			<a href="#" class="text-background/70 hover:text-background transition-colors">
+				<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+					{twitterIcon}
+				</svg>
+			</a>
+			<a href="#" class="text-background/70 hover:text-background transition-colors">
+				<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+					{githubIcon}
+				</svg>
+			</a>
+			<a href="#" class="text-background/70 hover:text-background transition-colors">
+				<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+					{linkedinIcon}
+				</svg>
+			</a>
+		</div>
+
+		<!-- Copyright -->
+		<div class="border-t border-background/20 pt-8">
+			<p class="text-sm text-background/60 text-center">© {new Date().getFullYear()} Acme Inc. All rights reserved.</p>
+		</div>
+	</div>
+</footer>

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

@@ -0,0 +1,19 @@
+export { default as Footer01 } from './Footer01.svelte';
+export { default as Footer02 } from './Footer02.svelte';
+export { default as Footer03 } from './Footer03.svelte';
+export { default as Footer04 } from './Footer04.svelte';
+export { default as Footer05 } from './Footer05.svelte';
+export { default as Footer06 } from './Footer06.svelte';
+export { default as Footer07 } from './Footer07.svelte';
+export { default as Footer08 } from './Footer08.svelte';
+export { default as Footer09 } from './Footer09.svelte';
+
+export interface FooterLink {
+	label: string;
+	href?: string;
+}
+
+export interface FooterColumn {
+	heading: string;
+	links: FooterLink[];
+}