@xbg.solutions/create-frontend 1.1.1 → 1.2.0

package/src/registry/blocks/feature-section/FeatureSection15.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface TabContent {
+		label: string;
+		title: string;
+		description: string;
+	}
+
+	interface Props {
+		class?: string;
+		heading?: string;
+		tabs?: TabContent[];
+	}
+
+	const defaultTabs: TabContent[] = [
+		{
+			label: 'Performance',
+			title: 'Lightning Speed',
+			description: 'Optimized performance with minimal bundle size and instant load times.',
+		},
+		{
+			label: 'Security',
+			title: 'Secure by Design',
+			description: 'Enterprise-grade security with encryption and compliance built-in.',
+		},
+		{
+			label: 'Scalability',
+			title: 'Grows With You',
+			description: 'Infrastructure designed to handle millions of requests per day.',
+		},
+		{
+			label: 'Developer Experience',
+			title: 'Easy to Use',
+			description: 'Clean API and comprehensive documentation for rapid development.',
+		},
+		{
+			label: 'Support',
+			title: 'Always There',
+			description: '24/7 support from our expert team with quick response times.',
+		},
+	];
+
+	let {
+		class: className,
+		heading = 'Feature Highlights',
+		tabs = defaultTabs,
+	}: Props = $props();
+
+	let activeTab = $state(0);
+</script>
+
+<section class={cn('w-full bg-white py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl">
+		<h2 class="text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-center mb-12">
+			{heading}
+		</h2>
+
+		<!-- Tab Buttons -->
+		<div class="flex flex-wrap justify-center gap-2 mb-8">
+			{#each tabs as tab, index}
+				<button
+					on:click={() => (activeTab = index)}
+					class={cn(
+						'px-4 py-2 rounded-lg font-medium transition-colors duration-200',
+						activeTab === index
+							? 'bg-blue-600 text-white'
+							: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+					)}
+				>
+					{tab.label}
+				</button>
+			{/each}
+		</div>
+
+		<!-- Content Area -->
+		<div class="mt-8">
+			{#key activeTab}
+				<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center animate-fade-in">
+					<!-- Left: Text Content -->
+					<div>
+						<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">
+							{tabs[activeTab].title}
+						</h3>
+						<p class="text-lg text-gray-600 mb-8">
+							{tabs[activeTab].description}
+						</p>
+						<button
+							class="inline-flex items-center px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
+						>
+							Learn More
+							<svg class="ml-2 w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+								<line x1="5" y1="12" x2="19" y2="12"></line>
+								<polyline points="12 5 19 12 12 19"></polyline>
+							</svg>
+						</button>
+					</div>
+
+					<!-- Right: Screenshot Placeholder -->
+					<div class="w-full aspect-video bg-gradient-to-br from-gray-200 to-gray-300 rounded-lg shadow-lg"></div>
+				</div>
+			{/key}
+		</div>
+	</div>
+</section>
+
+<style>
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	:global(.animate-fade-in) {
+		animation: fadeIn 300ms ease-out;
+	}
+</style>

package/src/registry/blocks/feature-section/FeatureSection16.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface BentoCard {
+		icon: string;
+		title: string;
+		description: string;
+		size: 'large' | 'medium' | 'small';
+	}
+
+	interface Props {
+		class?: string;
+		heading?: string;
+		cards?: BentoCard[];
+	}
+
+	const defaultCards: BentoCard[] = [
+		{
+			icon: 'zap',
+			title: 'Lightning Fast',
+			description: 'Blazing speeds with optimized performance.',
+			size: 'large',
+		},
+		{
+			icon: 'palette',
+			title: 'Beautiful Design',
+			description: 'Stunning interfaces out of the box.',
+			size: 'medium',
+		},
+		{
+			icon: 'shield',
+			title: 'Secure',
+			description: 'Enterprise security.',
+			size: 'medium',
+		},
+		{
+			icon: 'code',
+			title: 'Developer Friendly',
+			description: 'Easy to build with.',
+			size: 'small',
+		},
+		{
+			icon: 'users',
+			title: 'Team Tools',
+			description: 'Collaborate seamlessly.',
+			size: 'small',
+		},
+		{
+			icon: 'trending-up',
+			title: 'Scalable',
+			description: 'Grows with you.',
+			size: 'small',
+		},
+	];
+
+	let {
+		class: className,
+		heading = 'Designed for Every Use Case',
+		cards = defaultCards,
+	}: Props = $props();
+
+	const iconPaths: Record<string, string> = {
+		zap: 'm13 2-2 6.5h5l-7 13.5 2-6.5H6l7-13.5z',
+		palette:
+			'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z',
+		shield: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',
+		code: 'M16 18 22 12 16 6M8 6 2 12 8 18',
+		users: 'M17 21h-5v-2h5v2zM16 5.76A2.5 2.5 0 0 0 13.5 3 2.5 2.5 0 0 0 11 5.5 2.5 2.5 0 0 0 13.5 8 2.5 2.5 0 0 0 16 5.76zM8 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z',
+		'trending-up': 'M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18 9 12.41l4 4 6.3-6.29L22 12v-6z',
+	};
+
+	function getGridClasses(size: string): string {
+		switch (size) {
+			case 'large':
+				return 'sm:col-span-2 sm:row-span-2';
+			case 'medium':
+				return 'sm:col-span-1';
+			default:
+				return 'sm:col-span-1';
+		}
+	}
+</script>
+
+<section class={cn('w-full bg-gray-50 py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl">
+		<h2 class="text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-center mb-12">
+			{heading}
+		</h2>
+
+		<div class="grid grid-cols-1 sm:grid-cols-3 gap-6 auto-rows-max">
+			{#each cards as card}
+				<div
+					class={cn(
+						'p-6 bg-white rounded-lg border border-gray-200 hover:shadow-lg transition-shadow',
+						getGridClasses(card.size)
+					)}
+				>
+					<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-100 mb-4">
+						<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-blue-600">
+							{#if iconPaths[card.icon]}
+								<path d={iconPaths[card.icon]} />
+							{:else}
+								<circle cx="12" cy="12" r="3" />
+							{/if}
+						</svg>
+					</div>
+					<h3 class="text-lg font-semibold text-gray-900 mb-2">{card.title}</h3>
+					<p class="text-gray-600 text-sm">{card.description}</p>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/feature-section/FeatureSection17.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface TimelineStep {
+		number: number;
+		title: string;
+		description: string;
+		align: 'left' | 'right';
+	}
+
+	interface Props {
+		class?: string;
+		heading?: string;
+		steps?: TimelineStep[];
+	}
+
+	const defaultSteps: TimelineStep[] = [
+		{
+			number: 1,
+			title: 'Get Started',
+			description: 'Sign up and create your first project in minutes.',
+			align: 'left',
+		},
+		{
+			number: 2,
+			title: 'Configure',
+			description: 'Set up your preferences and integrations.',
+			align: 'right',
+		},
+		{
+			number: 3,
+			title: 'Build',
+			description: 'Create amazing products with powerful tools.',
+			align: 'left',
+		},
+		{
+			number: 4,
+			title: 'Deploy',
+			description: 'Launch to production with one click.',
+			align: 'right',
+		},
+		{
+			number: 5,
+			title: 'Grow',
+			description: 'Scale your business with confidence.',
+			align: 'left',
+		},
+	];
+
+	let {
+		class: className,
+		heading = 'The Journey to Success',
+		steps = defaultSteps,
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-white py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-4xl">
+		<h2 class="text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-center mb-16">
+			{heading}
+		</h2>
+
+		<div class="relative">
+			<!-- Timeline Line -->
+			<div class="absolute left-1/2 top-0 bottom-0 w-1 bg-blue-200 transform -translate-x-1/2"></div>
+
+			<!-- Steps -->
+			<div class="space-y-12">
+				{#each steps as step}
+					<div class={cn('flex gap-8', step.align === 'right' ? 'flex-row-reverse' : 'flex-row')}>
+						<!-- Content -->
+						<div class="flex-1 pt-2">
+							<div class={cn('p-6 bg-gray-50 rounded-lg border border-gray-200', step.align === 'right' ? 'text-right' : '')}>
+								<h3 class="text-lg font-semibold text-gray-900">{step.title}</h3>
+								<p class="mt-2 text-gray-600 text-sm">{step.description}</p>
+							</div>
+						</div>
+
+						<!-- Timeline Circle -->
+						<div class="flex justify-center">
+							<div class="flex h-12 w-12 items-center justify-center rounded-full bg-blue-600 text-white font-bold border-4 border-white shadow-lg">
+								{step.number}
+							</div>
+						</div>
+
+						<!-- Empty Space -->
+						<div class="flex-1"></div>
+					</div>
+				{/each}
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/feature-section/FeatureSection18.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface FeatureWithQuote {
+		icon: string;
+		title: string;
+		description: string;
+		quote: string;
+		author: string;
+		avatar: string;
+	}
+
+	interface Props {
+		class?: string;
+		heading?: string;
+		features?: FeatureWithQuote[];
+	}
+
+	const defaultFeatures: FeatureWithQuote[] = [
+		{
+			icon: 'lightning',
+			title: 'Lightning Fast',
+			description: 'Instant performance with optimized code.',
+			quote: 'Fastest solution we have tried.',
+			author: 'Sarah Chen',
+			avatar: 'SC',
+		},
+		{
+			icon: 'shield',
+			title: 'Enterprise Security',
+			description: 'Bank-level encryption and compliance.',
+			quote: 'Our security team approved immediately.',
+			author: 'Mike Johnson',
+			avatar: 'MJ',
+		},
+		{
+			icon: 'code',
+			title: 'Developer Joy',
+			description: 'Clean APIs and great documentation.',
+			quote: 'Best developer experience ever.',
+			author: 'Alex Rivera',
+			avatar: 'AR',
+		},
+	];
+
+	let {
+		class: className,
+		heading = 'Trusted by Developers',
+		features = defaultFeatures,
+	}: Props = $props();
+
+	const iconPaths: Record<string, string> = {
+		lightning: 'm13 2-2 6.5h5l-7 13.5 2-6.5H6l7-13.5z',
+		shield: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',
+		code: 'M16 18 22 12 16 6M8 6 2 12 8 18',
+	};
+</script>
+
+<section class={cn('w-full bg-gray-950 py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl">
+		<h2 class="text-3xl sm:text-4xl font-bold tracking-tight text-white text-center mb-12">
+			{heading}
+		</h2>
+
+		<div class="grid grid-cols-1 gap-8 sm:grid-cols-3">
+			{#each features as feature}
+				<div class="p-6 rounded-lg bg-gray-900 border border-gray-800">
+					<!-- Icon -->
+					<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-500/20 mb-4">
+						<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-blue-400">
+							{#if iconPaths[feature.icon]}
+								<path d={iconPaths[feature.icon]} />
+							{:else}
+								<circle cx="12" cy="12" r="3" />
+							{/if}
+						</svg>
+					</div>
+
+					<!-- Feature Content -->
+					<h3 class="text-lg font-semibold text-white mb-2">{feature.title}</h3>
+					<p class="text-gray-400 text-sm mb-6">{feature.description}</p>
+
+					<!-- Quote -->
+					<div class="border-t border-gray-800 pt-6">
+						<p class="text-sm text-gray-300 italic mb-4">"{feature.quote}"</p>
+						<div class="flex items-center gap-3">
+							<div class="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-blue-400 to-blue-600 text-white text-xs font-bold">
+								{feature.avatar}
+							</div>
+							<span class="text-sm font-medium text-white">{feature.author}</span>
+						</div>
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/feature-section/FeatureSection19.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Stat {
+		number: string;
+		label: string;
+		description: string;
+	}
+
+	interface Props {
+		class?: string;
+		heading?: string;
+		subtitle?: string;
+		ctaText?: string;
+		stats?: Stat[];
+	}
+
+	const defaultStats: Stat[] = [
+		{ number: '10M+', label: 'Users Worldwide', description: 'Trusted by millions' },
+		{ number: '99.99%', label: 'Uptime', description: 'Reliable infrastructure' },
+		{ number: '50+', label: 'Integrations', description: 'Connect everything' },
+		{ number: '24/7', label: 'Support', description: 'Always available' },
+	];
+
+	let {
+		class: className,
+		heading = 'Trusted by the Best',
+		subtitle = 'Join thousands of companies succeeding with our platform.',
+		ctaText = 'Get Started',
+		stats = defaultStats,
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-white py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+			<!-- Left Column: Content -->
+			<div>
+				<h2 class="text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 mb-4">
+					{heading}
+				</h2>
+				<p class="text-lg text-gray-600 mb-8">
+					{subtitle}
+				</p>
+				<button
+					class="inline-flex items-center px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
+				>
+					{ctaText}
+					<svg class="ml-2 w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+						<line x1="5" y1="12" x2="19" y2="12"></line>
+						<polyline points="12 5 19 12 12 19"></polyline>
+					</svg>
+				</button>
+			</div>
+
+			<!-- Right Column: Stats Grid -->
+			<div class="grid grid-cols-2 gap-6">
+				{#each stats as stat}
+					<div class="p-6 rounded-lg bg-gray-50 border border-gray-200 text-center">
+						<div class="text-3xl sm:text-4xl font-bold text-blue-600 mb-2">
+							{stat.number}
+						</div>
+						<div class="text-lg font-semibold text-gray-900 mb-1">
+							{stat.label}
+						</div>
+						<div class="text-sm text-gray-600">
+							{stat.description}
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/feature-section/FeatureSection20.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface FullWidthFeature {
+		title: string;
+		description: string;
+		imagePosition: 'left' | 'right';
+	}
+
+	interface Props {
+		class?: string;
+		features?: FullWidthFeature[];
+	}
+
+	const defaultFeatures: FullWidthFeature[] = [
+		{
+			title: 'Advanced Analytics',
+			description: 'Get deep insights into your data with powerful analytics tools. Track metrics in real-time and make informed decisions.',
+			imagePosition: 'right',
+		},
+		{
+			title: 'Seamless Integration',
+			description: 'Connect with your favorite tools and platforms effortlessly. Our API integrates with everything you use daily.',
+			imagePosition: 'left',
+		},
+		{
+			title: 'World-Class Support',
+			description: 'Our dedicated team is here to help you succeed. Get expert assistance whenever you need it, around the clock.',
+			imagePosition: 'right',
+		},
+	];
+
+	let {
+		class: className,
+		features = defaultFeatures,
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-white', className)}>
+	{#each features as feature, index}
+		<div class={cn('min-h-screen flex items-center py-16 px-4 sm:px-6 lg:px-8', index % 2 === 1 ? 'bg-gray-50' : 'bg-white')}>
+			<div class="mx-auto w-full max-w-6xl">
+				<div class={cn('grid grid-cols-1 lg:grid-cols-2 gap-12 items-center', feature.imagePosition === 'left' ? 'lg:grid-cols-2' : '')}>
+					<!-- Text Content -->
+					<div class={cn(feature.imagePosition === 'right' ? '' : 'lg:order-2')}>
+						<h2 class="text-4xl sm:text-5xl font-bold tracking-tight text-gray-900 mb-6">
+							{feature.title}
+						</h2>
+						<p class="text-xl text-gray-600 mb-8 leading-relaxed">
+							{feature.description}
+						</p>
+						<button class="inline-flex items-center px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors">
+							Learn More
+							<svg class="ml-2 w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+								<line x1="5" y1="12" x2="19" y2="12"></line>
+								<polyline points="12 5 19 12 12 19"></polyline>
+							</svg>
+						</button>
+					</div>
+
+					<!-- Image Placeholder -->
+					<div class={cn(feature.imagePosition === 'right' ? '' : 'lg:order-1')}>
+						<div class="w-full aspect-video bg-gradient-to-br from-gray-300 to-gray-400 rounded-xl shadow-2xl"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+	{/each}
+</section>

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

@@ -0,0 +1,20 @@
+export { default as FeatureSection01 } from './FeatureSection01.svelte';
+export { default as FeatureSection02 } from './FeatureSection02.svelte';
+export { default as FeatureSection03 } from './FeatureSection03.svelte';
+export { default as FeatureSection04 } from './FeatureSection04.svelte';
+export { default as FeatureSection05 } from './FeatureSection05.svelte';
+export { default as FeatureSection06 } from './FeatureSection06.svelte';
+export { default as FeatureSection07 } from './FeatureSection07.svelte';
+export { default as FeatureSection08 } from './FeatureSection08.svelte';
+export { default as FeatureSection09 } from './FeatureSection09.svelte';
+export { default as FeatureSection10 } from './FeatureSection10.svelte';
+export { default as FeatureSection11 } from './FeatureSection11.svelte';
+export { default as FeatureSection12 } from './FeatureSection12.svelte';
+export { default as FeatureSection13 } from './FeatureSection13.svelte';
+export { default as FeatureSection14 } from './FeatureSection14.svelte';
+export { default as FeatureSection15 } from './FeatureSection15.svelte';
+export { default as FeatureSection16 } from './FeatureSection16.svelte';
+export { default as FeatureSection17 } from './FeatureSection17.svelte';
+export { default as FeatureSection18 } from './FeatureSection18.svelte';
+export { default as FeatureSection19 } from './FeatureSection19.svelte';
+export { default as FeatureSection20 } from './FeatureSection20.svelte';

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

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+	}
+
+	let { class: customClass = '' }: Props = $props();
+
+	const links = ['Products', 'Docs', 'Blog', 'About'];
+	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"/>`;
+	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-6 sm:px-6', customClass)}>
+	<div class="mx-auto max-w-7xl flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+		<!-- Logo -->
+		<div class="flex items-center gap-2 font-semibold">
+			<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>
+
+		<!-- Links -->
+		<div class="flex flex-wrap gap-6 text-sm">
+			{#each links as link}
+				<a href="#" class="text-muted-foreground hover:text-foreground transition-colors">
+					{link}
+				</a>
+			{/each}
+		</div>
+
+		<!-- Social Icons -->
+		<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>
+
+	<!-- Copyright -->
+	<div class="mt-6 border-t pt-6 text-center">
+		<p class="text-sm text-muted-foreground">© {new Date().getFullYear()} Acme Inc. All rights reserved.</p>
+	</div>
+</footer>