@xbg.solutions/create-frontend 1.1.1 → 1.2.0

package/src/registry/blocks/hero-section/HeroSection15.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		subtitle?: string;
+		primaryLabel?: string;
+		secondaryLabel?: string;
+		onPrimary?: () => void;
+		onSecondary?: () => void;
+	}
+
+	let {
+		class: className,
+		title = 'Watch Your Productivity Soar',
+		subtitle = 'See how our platform transforms the way teams collaborate and ship faster.',
+		primaryLabel = 'Get started',
+		secondaryLabel = 'Watch demo',
+		onPrimary,
+		onSecondary,
+	}: Props = $props();
+</script>
+
+<section
+	class={cn(
+		'relative w-full h-screen min-h-96 flex items-center justify-center overflow-hidden px-4',
+		className
+	)}
+>
+	<!-- Video Background with Overlay -->
+	<div class="absolute inset-0 bg-gray-900">
+		<div class="absolute inset-0 bg-black/60" />
+	</div>
+
+	<!-- Content -->
+	<div class="relative z-10 text-center max-w-4xl mx-auto">
+		<h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight text-white">
+			{title}
+		</h1>
+		<p class="mt-6 text-xl text-gray-300 max-w-2xl mx-auto">
+			{subtitle}
+		</p>
+
+		<!-- CTA Buttons -->
+		<div class="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
+			<Button size="lg" onclick={onPrimary} class="bg-white text-black hover:bg-gray-100">
+				{primaryLabel}
+			</Button>
+			<Button
+				variant="outline"
+				size="lg"
+				onclick={onSecondary}
+				class="border-white text-white hover:bg-white/10"
+			>
+				<svg
+					width="20"
+					height="20"
+					viewBox="0 0 24 24"
+					fill="currentColor"
+					class="mr-2"
+				>
+					<polygon points="5 3 19 12 5 21 5 3" />
+				</svg>
+				{secondaryLabel}
+			</Button>
+		</div>
+
+		<!-- Additional Trust Text -->
+		<p class="mt-8 text-sm text-gray-400">
+			Join thousands of teams building the future
+		</p>
+	</div>
+</section>

package/src/registry/blocks/hero-section/HeroSection16.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		eyebrow?: string;
+		title?: string;
+		subtitle?: string;
+		primaryLabel?: string;
+		secondaryLabel?: string;
+		onPrimary?: () => void;
+		onSecondary?: () => void;
+	}
+
+	let {
+		class: className,
+		eyebrow = 'Powerful Features',
+		title = 'Build Everything You Need',
+		subtitle = 'Comprehensive tools designed to help you succeed.',
+		primaryLabel = 'Get started',
+		secondaryLabel = 'Schedule demo',
+		onPrimary,
+		onSecondary,
+	}: Props = $props();
+
+	const features = [
+		{
+			title: 'Lightning Fast',
+			description: 'Optimized performance for teams of any size',
+		},
+		{
+			title: 'Secure & Reliable',
+			description: 'Enterprise-grade security and 99.9% uptime',
+		},
+		{
+			title: 'Easy Integration',
+			description: 'Seamlessly connect with your favorite tools',
+		},
+	];
+</script>
+
+<section class={cn('w-full bg-white px-4 py-20 sm:py-28 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-7xl">
+		<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
+			<!-- Left Content -->
+			<div>
+				<p class="text-sm font-semibold text-blue-600 uppercase tracking-wide">{eyebrow}</p>
+				<h1 class="mt-4 text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-gray-900">
+					{title}
+				</h1>
+				<p class="mt-6 text-lg text-gray-600 max-w-xl">
+					{subtitle}
+				</p>
+
+				<!-- CTA Buttons -->
+				<div class="mt-8 flex flex-col sm:flex-row gap-4">
+					<Button size="lg" onclick={onPrimary}>
+						{primaryLabel}
+					</Button>
+					<Button variant="outline" size="lg" onclick={onSecondary}>
+						{secondaryLabel}
+					</Button>
+				</div>
+			</div>
+
+			<!-- Right Floating Feature Cards -->
+			<div class="space-y-4">
+				{#each features as feature, i}
+					<div
+						class={cn(
+							'rounded-xl border bg-white p-6 shadow-lg transition-transform hover:scale-105',
+							i === 1 ? 'border-blue-200 lg:ml-8' : 'border-gray-200'
+						)}
+					>
+						<div class="flex items-start gap-4">
+							<div class="flex-shrink-0 w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
+								<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="text-blue-600">
+									<path d="M12 2L15 10H23L17 15L19 23L12 18L5 23L7 15L1 10H9L12 2Z" />
+								</svg>
+							</div>
+							<div>
+								<h3 class="font-bold text-gray-900">{feature.title}</h3>
+								<p class="mt-1 text-sm text-gray-600">{feature.description}</p>
+							</div>
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/hero-section/HeroSection17.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		subtitle?: string;
+		primaryLabel?: string;
+		onPrimary?: () => void;
+		placeholderEmail?: string;
+	}
+
+	let {
+		class: className,
+		title = 'Stay Updated with Our Latest',
+		subtitle = 'Get exclusive tips, industry insights, and product updates delivered to your inbox.',
+		primaryLabel = 'Subscribe',
+		onPrimary,
+		placeholderEmail = 'your@email.com',
+	}: Props = $props();
+
+	let email = $state('');
+
+	function handleSubscribe() {
+		if (email) {
+			onPrimary?.();
+			email = '';
+		}
+	}
+</script>
+
+<section class={cn('w-full bg-gradient-to-b from-orange-50 to-pink-50 px-4 py-20 sm:py-28 sm:px-6 lg:px-8', className)}>
+	<!-- Decorative Gradient Blobs -->
+	<div class="absolute inset-0 overflow-hidden pointer-events-none">
+		<div class="absolute -top-40 -right-40 w-80 h-80 bg-orange-300/20 rounded-full blur-3xl" />
+		<div class="absolute -bottom-40 -left-40 w-80 h-80 bg-pink-300/20 rounded-full blur-3xl" />
+	</div>
+
+	<div class="relative z-10 mx-auto max-w-4xl">
+		<div class="text-center">
+			<!-- Headline -->
+			<h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight text-gray-900">
+				{title}
+			</h1>
+
+			<!-- Subtitle -->
+			<p class="mt-6 text-lg text-gray-600 max-w-2xl mx-auto">
+				{subtitle}
+			</p>
+
+			<!-- Email Signup Inline -->
+			<div class="mt-10 flex flex-col sm:flex-row gap-3 justify-center max-w-md mx-auto">
+				<input
+					type="email"
+					placeholder={placeholderEmail}
+					bind:value={email}
+					class="flex-1 px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"
+					required
+				/>
+				<Button size="lg" onclick={handleSubscribe} class="bg-orange-600 hover:bg-orange-700">
+					{primaryLabel}
+				</Button>
+			</div>
+
+			<!-- Logo Strip -->
+			<div class="mt-16 border-t border-gray-300/30 pt-10">
+				<p class="text-sm text-gray-600 mb-6">Trusted by leading companies</p>
+				<div class="flex flex-wrap justify-center items-center gap-8 opacity-60">
+					<div class="text-gray-700 font-semibold">Acme</div>
+					<div class="text-gray-700 font-semibold">TechCorp</div>
+					<div class="text-gray-700 font-semibold">StartupIO</div>
+					<div class="text-gray-700 font-semibold">CloudNet</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/hero-section/HeroSection18.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		eyebrow?: string;
+		title?: string;
+		subtitle?: string;
+		primaryLabel?: string;
+		onPrimary?: () => void;
+	}
+
+	let {
+		class: className,
+		eyebrow = 'Product Overview',
+		title = 'Everything You Need in One Platform',
+		subtitle = 'Powerful features designed to streamline your workflow and boost productivity.',
+		primaryLabel = 'Get started',
+		onPrimary,
+	}: Props = $props();
+
+	const benefits = [
+		'Comprehensive feature set',
+		'Real-time collaboration',
+		'Advanced analytics',
+	];
+</script>
+
+<section class={cn('w-full bg-gray-950 px-4 py-20 sm:py-28 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-7xl">
+		<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+			<!-- Left Image -->
+			<div>
+				<div class="relative aspect-square w-full rounded-2xl bg-gray-800 flex items-center justify-center shadow-2xl border border-gray-700 overflow-hidden">
+					<div class="absolute inset-0 bg-gradient-to-b from-gray-700/20 to-transparent" />
+					<svg
+						width="64"
+						height="64"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="1"
+						class="text-gray-600 relative z-10"
+					>
+						<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>
+			</div>
+
+			<!-- Right Content -->
+			<div class="bg-gray-900 rounded-2xl p-8 border border-gray-800">
+				<p class="text-sm font-semibold text-blue-400 uppercase tracking-wide">{eyebrow}</p>
+				<h2 class="mt-4 text-3xl sm:text-4xl font-bold text-white">
+					{title}
+				</h2>
+				<p class="mt-4 text-gray-400">
+					{subtitle}
+				</p>
+
+				<!-- Bullet Points with Check Icons -->
+				<ul class="mt-8 space-y-4">
+					{#each benefits as benefit}
+						<li class="flex items-center gap-3">
+							<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="text-green-500 flex-shrink-0">
+								<polyline points="20 6 9 17 4 12" />
+							</svg>
+							<span class="text-gray-300">{benefit}</span>
+						</li>
+					{/each}
+				</ul>
+
+				<!-- CTA -->
+				<Button size="lg" onclick={onPrimary} class="mt-8 w-full bg-white text-black hover:bg-gray-100">
+					{primaryLabel}
+				</Button>
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/hero-section/HeroSection19.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		eyebrow?: string;
+		title?: string;
+		subtitle?: string;
+		primaryLabel?: string;
+		secondaryLabel?: string;
+		onPrimary?: () => void;
+		onSecondary?: () => void;
+	}
+
+	let {
+		class: className,
+		eyebrow = 'By the Numbers',
+		title = 'Join Thousands of Happy Users',
+		subtitle = 'We help teams collaborate better and ship faster than ever before.',
+		primaryLabel = 'Get started',
+		secondaryLabel = 'Learn more',
+		onPrimary,
+		onSecondary,
+	}: Props = $props();
+
+	const stats = [
+		{ value: '10K+', label: 'Active Users' },
+		{ value: '99.9%', label: 'Uptime' },
+		{ value: '150+', label: 'Integrations' },
+	];
+</script>
+
+<section class={cn('w-full bg-white px-4 py-20 sm:py-28 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl">
+		<!-- Main Content -->
+		<div class="text-center">
+			<p class="text-sm font-semibold text-blue-600 uppercase tracking-wide">{eyebrow}</p>
+			<h1 class="mt-4 text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight text-gray-900">
+				{title}
+			</h1>
+			<p class="mt-6 text-lg text-gray-600 max-w-2xl mx-auto">
+				{subtitle}
+			</p>
+
+			<!-- CTA Buttons -->
+			<div class="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
+				<Button size="lg" onclick={onPrimary}>
+					{primaryLabel}
+				</Button>
+				<Button variant="outline" size="lg" onclick={onSecondary}>
+					{secondaryLabel}
+				</Button>
+			</div>
+		</div>
+
+		<!-- Stats Bar -->
+		<div class="mt-16 border-t border-gray-200 pt-12">
+			<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+				{#each stats as stat, i}
+					<div class="text-center">
+						<div class="text-4xl sm:text-5xl font-bold text-gray-900">{stat.value}</div>
+						<div class="mt-2 text-gray-600">{stat.label}</div>
+						{#if i < stats.length - 1}
+							<div class="hidden md:block absolute top-1/2 right-0 w-px h-12 bg-gray-200 -translate-y-1/2" />
+						{/if}
+					</div>
+				{/each}
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/hero-section/HeroSection20.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		subtitle?: string;
+		primaryLabel?: string;
+		onPrimary?: () => void;
+	}
+
+	let {
+		class: className,
+		title = 'See It In Action',
+		subtitle = 'Our intuitive interface makes it easy for teams to collaborate and ship faster.',
+		primaryLabel = 'Get started',
+		onPrimary,
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-white px-4 py-20 sm:py-28 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-7xl">
+		<!-- Header -->
+		<div class="text-center mb-16">
+			<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-gray-900">
+				{title}
+			</h1>
+			<p class="mt-6 text-lg text-gray-600 max-w-2xl mx-auto">
+				{subtitle}
+			</p>
+		</div>
+
+		<!-- Side-by-Side Screenshots -->
+		<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10">
+			<div class="rounded-2xl overflow-hidden border border-gray-200 shadow-lg">
+				<div class="aspect-video w-full rounded-2xl bg-gray-100 flex items-center justify-center">
+					<svg
+						width="48"
+						height="48"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="1"
+						class="text-gray-400"
+					>
+						<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>
+			</div>
+			<div class="rounded-2xl overflow-hidden border border-gray-200 shadow-lg">
+				<div class="aspect-video w-full rounded-2xl bg-gray-100 flex items-center justify-center">
+					<svg
+						width="48"
+						height="48"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="1"
+						class="text-gray-400"
+					>
+						<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>
+			</div>
+		</div>
+
+		<!-- CTA Button -->
+		<div class="text-center">
+			<Button size="lg" onclick={onPrimary}>
+				{primaryLabel}
+			</Button>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/hero-section/HeroSection21.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		badge?: string;
+		title?: string;
+		subtitle?: string;
+		primaryLabel?: string;
+		onPrimary?: () => void;
+	}
+
+	let {
+		class: className,
+		badge = 'Starting at just $29/month',
+		title = 'The Future of Work is Here',
+		subtitle = 'Unlock your teams potential with powerful collaboration tools designed for modern businesses.',
+		primaryLabel = 'Start building',
+		onPrimary,
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-gray-950 px-4 py-20 sm:py-28 sm:px-6 lg:px-8 relative overflow-hidden', className)}>
+	<!-- Grid Background Effect -->
+	<div class="absolute inset-0 pointer-events-none">
+		<div class="absolute inset-0 bg-gradient-to-b from-transparent via-blue-900/5 to-transparent" />
+		<svg
+			class="absolute inset-0 w-full h-full opacity-10"
+			width="100%"
+			height="100%"
+		>
+			<defs>
+				<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+					<path d="M 40 0 L 0 0 0 40" fill="none" stroke="white" stroke-width="0.5" />
+				</pattern>
+			</defs>
+			<rect width="100%" height="100%" fill="url(#grid)" />
+		</svg>
+	</div>
+
+	<!-- Glow Effects -->
+	<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-blue-600/20 rounded-full blur-3xl pointer-events-none" />
+
+	<div class="relative z-10 mx-auto max-w-4xl">
+		<div class="text-center">
+			<!-- Badge -->
+			<div class="inline-flex items-center gap-2 rounded-full border border-blue-900 bg-blue-950/50 px-4 py-2 mb-8">
+				<span class="text-sm font-medium text-blue-300">{badge}</span>
+			</div>
+
+			<!-- Headline -->
+			<h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight text-white">
+				{title}
+			</h1>
+
+			<!-- Subtitle -->
+			<p class="mt-6 text-lg text-gray-400 max-w-2xl mx-auto">
+				{subtitle}
+			</p>
+
+			<!-- Primary CTA -->
+			<div class="mt-10">
+				<Button size="lg" onclick={onPrimary} class="bg-blue-600 hover:bg-blue-700">
+					{primaryLabel}
+				</Button>
+			</div>
+
+			<!-- Trust Text -->
+			<p class="mt-8 text-sm text-gray-500">
+				No credit card required. Start free for 14 days.
+			</p>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/hero-section/HeroSection22.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		subtitle?: string;
+		primaryLabel?: string;
+		secondaryLabel?: string;
+		onPrimary?: () => void;
+		onSecondary?: () => void;
+		userCount?: string;
+	}
+
+	let {
+		class: className,
+		title = 'Join Thousands Building Tomorrow',
+		subtitle = 'Collaborate, create, and ship faster than ever before.',
+		primaryLabel = 'Get started',
+		secondaryLabel = 'Schedule demo',
+		onPrimary,
+		onSecondary,
+		userCount = '50,000+',
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-white px-4 py-20 sm:py-28 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-7xl">
+		<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+			<!-- Left Content -->
+			<div>
+				<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-gray-900">
+					{title}
+				</h1>
+				<p class="mt-6 text-lg text-gray-600 max-w-xl">
+					{subtitle}
+				</p>
+
+				<!-- CTA Buttons -->
+				<div class="mt-8 flex flex-col sm:flex-row gap-4">
+					<Button size="lg" onclick={onPrimary}>
+						{primaryLabel}
+					</Button>
+					<Button variant="outline" size="lg" onclick={onSecondary}>
+						{secondaryLabel}
+					</Button>
+				</div>
+
+				<!-- Social Proof with Avatars -->
+				<div class="mt-10 flex items-center gap-3 pt-8 border-t border-gray-200">
+					<div class="flex -space-x-3">
+						<div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 border-2 border-white flex items-center justify-center text-white text-sm font-bold">
+							A
+						</div>
+						<div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 border-2 border-white flex items-center justify-center text-white text-sm font-bold">
+							B
+						</div>
+						<div class="w-10 h-10 rounded-full bg-gradient-to-br from-pink-400 to-pink-600 border-2 border-white flex items-center justify-center text-white text-sm font-bold">
+							C
+						</div>
+						<div class="w-10 h-10 rounded-full bg-gradient-to-br from-green-400 to-green-600 border-2 border-white flex items-center justify-center text-white text-sm font-bold">
+							D
+						</div>
+					</div>
+					<div>
+						<p class="text-sm font-semibold text-gray-900">
+							Join <strong>{userCount}</strong> users
+						</p>
+						<p class="text-xs text-gray-600">Already growing with us</p>
+					</div>
+				</div>
+			</div>
+
+			<!-- Right Screenshot -->
+			<div class="relative">
+				<div class="relative rounded-2xl overflow-hidden shadow-2xl transform -rotate-2 hover:rotate-0 transition-transform">
+					<div class="aspect-square w-full rounded-2xl bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center border border-gray-300">
+						<svg
+							width="64"
+							height="64"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="1"
+							class="text-gray-400"
+						>
+							<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>
+				</div>
+
+				<!-- Floating accent card -->
+				<div class="absolute -bottom-6 -left-6 bg-white rounded-lg p-4 shadow-xl border border-gray-200">
+					<p class="text-xs font-semibold text-gray-900">Featured by</p>
+					<p class="text-sm text-gray-600 mt-1">TechCrunch</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,22 @@
+export { default as HeroSection01 } from './HeroSection01.svelte';
+export { default as HeroSection02 } from './HeroSection02.svelte';
+export { default as HeroSection03 } from './HeroSection03.svelte';
+export { default as HeroSection04 } from './HeroSection04.svelte';
+export { default as HeroSection05 } from './HeroSection05.svelte';
+export { default as HeroSection06 } from './HeroSection06.svelte';
+export { default as HeroSection07 } from './HeroSection07.svelte';
+export { default as HeroSection08 } from './HeroSection08.svelte';
+export { default as HeroSection09 } from './HeroSection09.svelte';
+export { default as HeroSection10 } from './HeroSection10.svelte';
+export { default as HeroSection11 } from './HeroSection11.svelte';
+export { default as HeroSection12 } from './HeroSection12.svelte';
+export { default as HeroSection13 } from './HeroSection13.svelte';
+export { default as HeroSection14 } from './HeroSection14.svelte';
+export { default as HeroSection15 } from './HeroSection15.svelte';
+export { default as HeroSection16 } from './HeroSection16.svelte';
+export { default as HeroSection17 } from './HeroSection17.svelte';
+export { default as HeroSection18 } from './HeroSection18.svelte';
+export { default as HeroSection19 } from './HeroSection19.svelte';
+export { default as HeroSection20 } from './HeroSection20.svelte';
+export { default as HeroSection21 } from './HeroSection21.svelte';
+export { default as HeroSection22 } from './HeroSection22.svelte';