@xbg.solutions/create-frontend 1.1.2 → 1.2.0

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

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		subtitle?: string;
+		currentStep?: number;
+		totalSteps?: number;
+		progressPercent?: number;
+	}
+
+	let {
+		class: className,
+		title = 'Your Journey',
+		subtitle = 'Track your progress through the onboarding process',
+		currentStep = 2,
+		totalSteps = 5,
+		progressPercent = (currentStep / totalSteps) * 100
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background px-4 py-16 sm:py-24', className)}>
+	<div class="mx-auto max-w-5xl">
+		<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
+			<div class="flex-1">
+				{#if title}
+					<h1 class="text-4xl sm:text-5xl font-bold tracking-tight mb-3">{title}</h1>
+				{/if}
+
+				{#if subtitle}
+					<p class="text-lg text-muted-foreground">{subtitle}</p>
+				{/if}
+			</div>
+
+			<div class="flex flex-col items-center gap-6 lg:items-end">
+				<div class="relative w-32 h-32">
+					<svg class="w-full h-full transform -rotate-90" viewBox="0 0 120 120">
+						<circle
+							cx="60"
+							cy="60"
+							r="54"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="8"
+							class="text-muted"
+						/>
+						<circle
+							cx="60"
+							cy="60"
+							r="54"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="8"
+							stroke-dasharray={`${(progressPercent / 100) * 339.29} 339.29`}
+							class="text-foreground transition-all duration-500"
+						/>
+					</svg>
+					<div class="absolute inset-0 flex items-center justify-center">
+						<div class="text-center">
+							<p class="text-3xl font-bold">{currentStep}</p>
+							<p class="text-xs text-muted-foreground">of {totalSteps}</p>
+						</div>
+					</div>
+				</div>
+
+				<div class="text-center lg:text-right">
+					<p class="text-sm text-muted-foreground">Progress</p>
+					<p class="text-2xl font-bold">{Math.round(progressPercent)}%</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		onMenuClick?: () => void;
+	}
+
+	let {
+		class: className,
+		title = 'Dashboard',
+		onMenuClick
+	}: Props = $props();
+
+	let showMenu = $state(false);
+</script>
+
+<section class={cn('w-full bg-background px-4 py-8 border-b', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div class="flex items-center justify-between">
+			{#if title}
+				<h1 class="text-3xl font-bold">{title}</h1>
+			{/if}
+
+			<div class="relative">
+				<button
+					onclick={() => {
+						showMenu = !showMenu;
+						onMenuClick?.();
+					}}
+					class="p-2 rounded-lg hover:bg-muted transition"
+					aria-label="Options menu"
+				>
+					<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+						<circle cx="12" cy="5" r="2" />
+						<circle cx="12" cy="12" r="2" />
+						<circle cx="12" cy="19" r="2" />
+					</svg>
+				</button>
+
+				{#if showMenu}
+					<div class="absolute right-0 mt-2 w-48 rounded-lg border bg-background shadow-lg z-50">
+						<button class="w-full text-left px-4 py-2 hover:bg-muted first:rounded-t-lg last:rounded-b-lg transition text-sm">
+							Edit
+						</button>
+						<button class="w-full text-left px-4 py-2 hover:bg-muted first:rounded-t-lg last:rounded-b-lg transition text-sm">
+							Share
+						</button>
+						<button class="w-full text-left px-4 py-2 hover:bg-muted first:rounded-t-lg last:rounded-b-lg transition text-sm text-destructive">
+							Delete
+						</button>
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,66 @@
+<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;
+		imageAspect?: 'square' | 'video';
+	}
+
+	let {
+		class: className,
+		eyebrow = 'New Solution',
+		title = 'Transform Your Workflow',
+		subtitle = 'Discover how our innovative approach can streamline your operations',
+		primaryLabel = 'Learn More',
+		onPrimary,
+		imageAspect = 'video'
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background px-4 py-16 sm:py-24', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
+			<div>
+				{#if eyebrow}
+					<div class="mb-4 inline-flex items-center px-3 py-1 rounded-full border bg-muted/50 text-xs font-medium">
+						{eyebrow}
+					</div>
+				{/if}
+
+				{#if title}
+					<h1 class="text-5xl sm:text-6xl font-bold tracking-tight mb-6">{title}</h1>
+				{/if}
+
+				{#if subtitle}
+					<p class="text-xl text-muted-foreground mb-8">{subtitle}</p>
+				{/if}
+
+				<Button onclick={onPrimary} size="lg">
+					{primaryLabel}
+				</Button>
+			</div>
+
+			<div>
+				<div class={cn(
+					'rounded-lg bg-gradient-to-br from-muted to-muted/50 border',
+					imageAspect === 'square' ? 'aspect-square' : 'aspect-video'
+				)}>
+					<div class="w-full h-full flex items-center justify-center text-muted-foreground">
+						<div class="text-center">
+							<svg class="w-16 h-16 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+							</svg>
+							<p class="text-sm">Illustration or image</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/header-section/HeaderSection19.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 = 'Unlock Your Potential',
+		subtitle = 'Join thousands of users who have transformed their business with our platform',
+		primaryLabel = 'Get Started',
+		secondaryLabel = 'View Demo',
+		onPrimary,
+		onSecondary
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-gray-950 px-4 py-24 sm:py-32', className)}>
+	<div class="mx-auto max-w-3xl text-center">
+		{#if title}
+			<h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight mb-6 bg-gradient-to-r from-white via-gray-200 to-gray-400 bg-clip-text text-transparent">
+				{title}
+			</h1>
+		{/if}
+
+		{#if subtitle}
+			<p class="text-xl text-gray-400 mb-12 max-w-2xl mx-auto">{subtitle}</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" class="border-gray-700 text-white hover:bg-gray-900">
+				{secondaryLabel}
+			</Button>
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Stat {
+		value: string;
+		label: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		subtitle?: string;
+		stats?: Stat[];
+	}
+
+	let {
+		class: className,
+		title = 'By The Numbers',
+		subtitle = 'See the impact we make',
+		stats = [
+			{ value: '10K+', label: 'Active Users' },
+			{ value: '500M', label: 'Transactions' },
+			{ value: '99.9%', label: 'Uptime' }
+		]
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background px-4 py-16 sm:py-24', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-12">
+			<div class="flex-1">
+				{#if title}
+					<h1 class="text-4xl sm:text-5xl font-bold tracking-tight mb-3">{title}</h1>
+				{/if}
+
+				{#if subtitle}
+					<p class="text-lg text-muted-foreground">{subtitle}</p>
+				{/if}
+			</div>
+
+			{#if stats && stats.length > 0}
+				<div class="flex flex-wrap gap-8 lg:justify-end">
+					{#each stats as stat}
+						<div class="flex flex-col">
+							<p class="text-4xl sm:text-5xl font-bold mb-1">{stat.value}</p>
+							<p class="text-sm text-muted-foreground">{stat.label}</p>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,20 @@
+export { default as HeaderSection01 } from './HeaderSection01.svelte';
+export { default as HeaderSection02 } from './HeaderSection02.svelte';
+export { default as HeaderSection03 } from './HeaderSection03.svelte';
+export { default as HeaderSection04 } from './HeaderSection04.svelte';
+export { default as HeaderSection05 } from './HeaderSection05.svelte';
+export { default as HeaderSection06 } from './HeaderSection06.svelte';
+export { default as HeaderSection07 } from './HeaderSection07.svelte';
+export { default as HeaderSection08 } from './HeaderSection08.svelte';
+export { default as HeaderSection09 } from './HeaderSection09.svelte';
+export { default as HeaderSection10 } from './HeaderSection10.svelte';
+export { default as HeaderSection11 } from './HeaderSection11.svelte';
+export { default as HeaderSection12 } from './HeaderSection12.svelte';
+export { default as HeaderSection13 } from './HeaderSection13.svelte';
+export { default as HeaderSection14 } from './HeaderSection14.svelte';
+export { default as HeaderSection15 } from './HeaderSection15.svelte';
+export { default as HeaderSection16 } from './HeaderSection16.svelte';
+export { default as HeaderSection17 } from './HeaderSection17.svelte';
+export { default as HeaderSection18 } from './HeaderSection18.svelte';
+export { default as HeaderSection19 } from './HeaderSection19.svelte';
+export { default as HeaderSection20 } from './HeaderSection20.svelte';

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

@@ -0,0 +1,69 @@
+<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-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">
+				{#if imageUrl}
+					<img src={imageUrl} alt="Hero" class="w-full rounded-xl shadow-2xl" />
+				{:else}
+					<div
+						class="aspect-video w-full rounded-xl bg-muted flex items-center justify-center shadow-2xl"
+					>
+						<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>
+	</div>
+</section>

package/src/registry/blocks/hero-section/HeroSection02.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;
+		badge?: 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.',
+		badge = '✨ New',
+		primaryLabel = 'Get started',
+		secondaryLabel = 'Learn more',
+		onPrimary,
+		onSecondary,
+	}: 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">
+			<div class="inline-flex items-center gap-2 rounded-full border bg-muted/50 px-3 py-1 text-xs font-medium">
+				{badge}
+			</div>
+
+			<h1 class="mt-6 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/HeroSection03.svelte

@@ -0,0 +1,56 @@
+<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;
+		trustCount?: 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,
+		trustCount = 'Trusted by 10,000+ teams',
+	}: 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>
+			<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">
+				{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 class="mt-6 flex items-center gap-3">
+				<div class="flex -space-x-2">
+					{#each Array(3) as _, i}
+						<div
+							class="h-8 w-8 rounded-full bg-gradient-to-br from-muted to-muted-foreground flex items-center justify-center text-xs font-bold text-background ring-2 ring-background"
+						>
+							{String.fromCharCode(65 + i)}
+						</div>
+					{/each}
+				</div>
+				<span class="text-sm text-muted-foreground">{trustCount}</span>
+			</div>
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,69 @@
+<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-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>
+				{#if imageUrl}
+					<img src={imageUrl} alt="Hero" class="w-full rounded-xl shadow-2xl" />
+				{:else}
+					<div
+						class="aspect-video w-full rounded-xl bg-muted flex items-center justify-center shadow-2xl"
+					>
+						<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>
+	</div>
+</section>

package/src/registry/blocks/hero-section/HeroSection05.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-foreground text-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-background/80 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"
+					>{secondaryLabel}</Button
+				>
+			</div>
+		</div>
+
+		<div class="mt-16 relative">
+			<div class="mx-auto max-w-4xl">
+				{#if imageUrl}
+					<img src={imageUrl} alt="Hero" class="w-full rounded-xl shadow-2xl" />
+				{:else}
+					<div
+						class="aspect-video w-full rounded-xl bg-background/20 flex items-center justify-center shadow-2xl"
+					>
+						<svg
+							width="32"
+							height="32"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="1"
+							class="text-background/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>
+	</div>
+</section>