@xbg.solutions/create-frontend 1.1.2 → 1.2.0

package/src/registry/blocks/hero-section/HeroSection06.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;
+		secondaryLabel?: string;
+		onPrimary?: () => void;
+		onSecondary?: () => void;
+		onPlay?: () => void;
+		videoUrl?: string;
+	}
+
+	let {
+		class: className,
+		title = 'Build your next big idea faster',
+		subtitle = 'A comprehensive toolkit that helps you design, develop, and ship production-ready products at lightning speed.',
+		primaryLabel = 'Get started',
+		secondaryLabel = 'Learn more',
+		onPrimary,
+		onSecondary,
+		onPlay,
+		videoUrl,
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background px-4 py-20 sm:py-28 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div class="text-center">
+			<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight">
+				{title}
+			</h1>
+			<p class="mt-4 text-lg text-muted-foreground max-w-2xl mx-auto">
+				{subtitle}
+			</p>
+			<div class="mt-8 flex flex-col sm:flex-row gap-3 justify-center">
+				<Button size="lg" onclick={onPrimary}>{primaryLabel}</Button>
+				<Button variant="outline" size="lg" onclick={onSecondary}>{secondaryLabel}</Button>
+			</div>
+		</div>
+
+		<div class="mt-16 relative">
+			<div class="mx-auto max-w-4xl">
+				<div class="relative aspect-video w-full rounded-xl bg-muted flex items-center justify-center shadow-2xl overflow-hidden">
+					{#if videoUrl}
+						<video
+							src={videoUrl}
+							class="w-full h-full object-cover"
+							controls
+						></video>
+					{:else}
+						<div class="absolute inset-0 bg-muted"></div>
+					{/if}
+
+					<button
+						onclick={onPlay}
+						class="absolute inset-0 flex items-center justify-center hover:opacity-80 transition-opacity"
+					>
+						<div class="h-16 w-16 rounded-full bg-background/90 flex items-center justify-center shadow-lg hover:bg-background transition-colors">
+							<svg
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="currentColor"
+								class="text-foreground ml-1"
+							>
+								<polygon points="5 3 19 12 5 21 5 3" />
+							</svg>
+						</div>
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,48 @@
+<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 = 'Build your next big idea faster',
+		subtitle = 'A comprehensive toolkit that helps you design, develop, and ship production-ready products at lightning speed.',
+		primaryLabel = 'Get started',
+		secondaryLabel = 'Learn more',
+		onPrimary,
+		onSecondary,
+	}: Props = $props();
+</script>
+
+<section
+	class={cn(
+		'w-full bg-gradient-to-br from-background via-background to-muted px-4 py-20 sm:py-28 sm:px-6 lg:px-8',
+		className
+	)}
+>
+	<div class="mx-auto max-w-6xl">
+		<div class="text-center">
+			<h1
+				class="bg-gradient-to-r from-foreground to-foreground/60 bg-clip-text text-transparent text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight"
+			>
+				{title}
+			</h1>
+			<p class="mt-4 text-lg text-muted-foreground max-w-2xl mx-auto">
+				{subtitle}
+			</p>
+			<div class="mt-8 flex flex-col sm:flex-row gap-3 justify-center">
+				<Button size="lg" onclick={onPrimary}>{primaryLabel}</Button>
+				<Button variant="outline" size="lg" onclick={onSecondary}>{secondaryLabel}</Button>
+			</div>
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,73 @@
+<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;
+		imageUrl?: string;
+	}
+
+	let {
+		class: className,
+		title = 'Build your next big idea faster',
+		subtitle = 'A comprehensive toolkit that helps you design, develop, and ship production-ready products at lightning speed.',
+		primaryLabel = 'Get started',
+		secondaryLabel = 'Learn more',
+		onPrimary,
+		onSecondary,
+		imageUrl,
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background px-0 py-0 sm:px-0 lg:px-0', className)}>
+	<div class="grid grid-cols-1 sm:grid-cols-2 min-h-[600px]">
+		<div class="bg-foreground text-background p-12 flex flex-col justify-center">
+			<h1 class="text-4xl sm:text-5xl font-bold tracking-tight">
+				{title}
+			</h1>
+			<p class="mt-4 text-lg text-background/80">
+				{subtitle}
+			</p>
+		</div>
+
+		<div class="bg-background p-12 flex flex-col justify-center">
+			<div class="space-y-4 mb-8">
+				<p class="text-muted-foreground">
+					{subtitle}
+				</p>
+			</div>
+			<div class="flex flex-col gap-3">
+				<Button size="lg" onclick={onPrimary}>{primaryLabel}</Button>
+				<Button variant="outline" size="lg" onclick={onSecondary}>{secondaryLabel}</Button>
+			</div>
+
+			{#if imageUrl}
+				<img src={imageUrl} alt="Hero" class="mt-8 w-full rounded-lg" />
+			{:else}
+				<div
+					class="mt-8 aspect-video w-full rounded-lg bg-muted 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>
+			{/if}
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,51 @@
+<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;
+		companies?: string[];
+	}
+
+	let {
+		class: className,
+		title = 'Build your next big idea faster',
+		subtitle = 'A comprehensive toolkit that helps you design, develop, and ship production-ready products at lightning speed.',
+		primaryLabel = 'Get started',
+		secondaryLabel = 'Learn more',
+		onPrimary,
+		onSecondary,
+		companies = ['TechCorp', 'StartupAI', 'CloudScale', 'DataHub', 'DevTools'],
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background px-4 py-20 sm:py-28 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div class="text-center">
+			<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight">
+				{title}
+			</h1>
+			<p class="mt-4 text-lg text-muted-foreground max-w-2xl mx-auto">
+				{subtitle}
+			</p>
+			<div class="mt-8 flex flex-col sm:flex-row gap-3 justify-center">
+				<Button size="lg" onclick={onPrimary}>{primaryLabel}</Button>
+				<Button variant="outline" size="lg" onclick={onSecondary}>{secondaryLabel}</Button>
+			</div>
+		</div>
+
+		<div class="mt-12 flex flex-wrap justify-center gap-6 opacity-50">
+			{#each companies as company}
+				<div class="text-sm font-semibold text-muted-foreground whitespace-nowrap">
+					{company}
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,47 @@
+<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 = 'Build your next big idea faster',
+		subtitle = 'A comprehensive toolkit that helps you design, develop, and ship production-ready products at lightning speed.',
+		primaryLabel = 'Get started',
+		secondaryLabel = 'Learn more',
+		onPrimary,
+		onSecondary,
+	}: Props = $props();
+</script>
+
+<section
+	class={cn(
+		'w-full min-h-screen bg-background px-4 pb-20 flex flex-col justify-end sm:px-6 lg:px-8',
+		className
+	)}
+	style="background-image: radial-gradient(#e5e7eb 1px, transparent 1px); background-size: 20px 20px;"
+>
+	<div class="mx-auto max-w-6xl w-full">
+		<div>
+			<h1 class="text-5xl sm:text-7xl font-black tracking-tight">
+				{title}
+			</h1>
+			<p class="mt-4 text-lg text-muted-foreground max-w-2xl">
+				{subtitle}
+			</p>
+			<div class="mt-8 flex flex-col sm:flex-row gap-3">
+				<Button size="lg" onclick={onPrimary}>{primaryLabel}</Button>
+				<Button variant="outline" size="lg" onclick={onSecondary}>{secondaryLabel}</Button>
+			</div>
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,60 @@
+<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;
+		imageUrl?: string;
+	}
+
+	let {
+		class: className,
+		title = 'Build your next big idea faster',
+		subtitle = 'A comprehensive toolkit that helps you design, develop, and ship production-ready products at lightning speed.',
+		primaryLabel = 'Get started',
+		secondaryLabel = 'Learn more',
+		onPrimary,
+		onSecondary,
+		imageUrl,
+	}: Props = $props();
+</script>
+
+<section
+	class={cn('relative w-full min-h-[600px] bg-foreground overflow-hidden flex items-center px-4 py-20 sm:px-6 lg:px-8', className)}
+>
+	<div class="absolute inset-0 bg-foreground/70"></div>
+
+	{#if imageUrl}
+		<img src={imageUrl} alt="Hero background" class="absolute inset-0 w-full h-full object-cover" />
+	{:else}
+		<div class="absolute inset-0 bg-muted"></div>
+	{/if}
+
+	<div class="relative z-10 mx-auto max-w-6xl w-full">
+		<div class="text-center">
+			<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-background">
+				{title}
+			</h1>
+			<p class="mt-4 text-lg text-background/90 max-w-2xl mx-auto">
+				{subtitle}
+			</p>
+			<div class="mt-8 flex flex-col sm:flex-row gap-3 justify-center">
+				<Button size="lg" variant="secondary" onclick={onPrimary}>{primaryLabel}</Button>
+				<Button
+					size="lg"
+					variant="outline"
+					onclick={onSecondary}
+					class="border-background/30 text-background hover:bg-background/10"
+				>
+					{secondaryLabel}
+				</Button>
+			</div>
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,74 @@
+<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;
+		features?: Array<{ title: string; description: string }>;
+	}
+
+	let {
+		class: className,
+		title = 'Build your next big idea faster',
+		subtitle = 'A comprehensive toolkit that helps you design, develop, and ship production-ready products at lightning speed.',
+		primaryLabel = 'Get started',
+		secondaryLabel = 'Learn more',
+		onPrimary,
+		onSecondary,
+		features = [
+			{ title: 'Fast Performance', description: 'Lightning-quick load times' },
+			{ title: 'Secure by Design', description: 'Enterprise-grade security' },
+			{ title: 'Fully Documented', description: 'Comprehensive guides and API docs' },
+			{ title: 'Active Support', description: '24/7 community and professional support' },
+		],
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background px-4 py-20 sm:py-28 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div class="grid grid-cols-1 gap-12 sm:grid-cols-2 sm:items-center">
+			<div>
+				<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight">
+					{title}
+				</h1>
+				<p class="mt-4 text-lg text-muted-foreground">
+					{subtitle}
+				</p>
+				<div class="mt-8 flex flex-col sm:flex-row gap-3">
+					<Button size="lg" onclick={onPrimary}>{primaryLabel}</Button>
+					<Button variant="outline" size="lg" onclick={onSecondary}>{secondaryLabel}</Button>
+				</div>
+			</div>
+
+			<div class="grid grid-cols-2 gap-4">
+				{#each features as feature, i}
+					<div>
+						<div
+							class="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-100 dark:bg-emerald-900/30 mb-3"
+						>
+							<svg
+								width="20"
+								height="20"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								class="text-emerald-600 dark:text-emerald-400"
+							>
+								<polyline points="20 6 9 17 4 12" />
+							</svg>
+						</div>
+						<h3 class="font-semibold text-foreground">{feature.title}</h3>
+						<p class="text-sm text-muted-foreground mt-1">{feature.description}</p>
+					</div>
+				{/each}
+			</div>
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		announcementText?: string;
+		title?: string;
+		subtitle?: string;
+		primaryLabel?: string;
+		secondaryLabel?: string;
+		onPrimary?: () => void;
+		onSecondary?: () => void;
+	}
+
+	let {
+		class: className,
+		announcementText = 'New: AI-powered features →',
+		title = 'Announce Your Latest Feature',
+		subtitle = 'Capture attention with a sleek dark hero that highlights your newest innovation. Perfect for product launches and feature announcements.',
+		primaryLabel = 'Get started',
+		secondaryLabel = 'Learn more',
+		onPrimary,
+		onSecondary,
+	}: Props = $props();
+</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-6xl">
+		<div class="text-center">
+			<!-- Announcement Pill -->
+			<div class="mb-6 inline-flex items-center gap-2 rounded-full border border-gray-800 bg-gray-900 px-4 py-2">
+				<span class="text-sm font-medium text-white">✨ {announcementText}</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>
+
+			<!-- 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-gray-700 text-white hover:bg-gray-900"
+				>
+					{secondaryLabel}
+				</Button>
+			</div>
+		</div>
+
+		<!-- Screenshot Mockup -->
+		<div class="mt-16 relative">
+			<div class="mx-auto max-w-5xl">
+				<div
+					class="relative aspect-video 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>
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,116 @@
+<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;
+		userCount?: string;
+	}
+
+	let {
+		class: className,
+		eyebrow = 'Trusted by Industry Leaders',
+		title = 'Capture Leads with Ease',
+		subtitle = 'Build trust and convert visitors into customers with our streamlined lead capture form.',
+		primaryLabel = 'Submit',
+		onPrimary,
+		userCount = '10,000+',
+	}: Props = $props();
+
+	let formName = $state('');
+	let formEmail = $state('');
+	let formCompany = $state('');
+
+	function handleSubmit() {
+		onPrimary?.();
+		formName = '';
+		formEmail = '';
+		formCompany = '';
+	}
+</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>
+				<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>
+
+				<!-- Trust Signals -->
+				<div class="mt-8 flex items-center gap-4">
+					<div class="flex -space-x-2">
+						<div class="w-10 h-10 rounded-full bg-blue-500 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-purple-500 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-pink-500 border-2 border-white flex items-center justify-center text-white text-sm font-bold">
+							C
+						</div>
+					</div>
+					<p class="text-sm text-gray-700">
+						<strong>{userCount}</strong> users already trust us
+					</p>
+				</div>
+			</div>
+
+			<!-- Right Form Card -->
+			<div class="bg-white rounded-2xl shadow-xl border border-gray-200 p-8">
+				<h2 class="text-2xl font-bold text-gray-900 mb-6">Get Started Today</h2>
+				<form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="space-y-4">
+					<div>
+						<label for="name" class="block text-sm font-medium text-gray-900 mb-2">Full Name</label>
+						<input
+							type="text"
+							id="name"
+							placeholder="John Doe"
+							bind:value={formName}
+							class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+							required
+						/>
+					</div>
+					<div>
+						<label for="email" class="block text-sm font-medium text-gray-900 mb-2">Email</label>
+						<input
+							type="email"
+							id="email"
+							placeholder="john@example.com"
+							bind:value={formEmail}
+							class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+							required
+						/>
+					</div>
+					<div>
+						<label for="company" class="block text-sm font-medium text-gray-900 mb-2">Company</label>
+						<input
+							type="text"
+							id="company"
+							placeholder="Acme Inc."
+							bind:value={formCompany}
+							class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+							required
+						/>
+					</div>
+					<Button size="lg" class="w-full" onclick={handleSubmit}>
+						{primaryLabel}
+					</Button>
+				</form>
+				<p class="mt-4 text-xs text-gray-500 text-center">
+					We respect your privacy. Unsubscribe at any time.
+				</p>
+			</div>
+		</div>
+	</div>
+</section>