@xbg.solutions/create-frontend 1.1.1 → 1.2.0

package/src/registry/blocks/logo-section/LogoSection01.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Logo {
+		name: string;
+		logoUrl?: string;
+	}
+
+	interface Props {
+		class?: string;
+		logos?: Logo[];
+		title?: string;
+		description?: string;
+	}
+
+	const defaultLogos: Logo[] = [
+		{ name: 'Buzzsnap' },
+		{ name: 'Dashstar' },
+		{ name: 'Editly' },
+		{ name: 'Geoaura' },
+		{ name: 'Nanodea' },
+		{ name: 'Orionbo' },
+		{ name: 'Revahub' },
+		{ name: 'Starlight' }
+	];
+
+	let {
+		class: className,
+		logos = defaultLogos,
+		title = 'Customer logos that build trust',
+		description = 'Add logos of notable companies using your product. Include recognizable brands in grayscale to maintain visual consistency.'
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background py-12 px-4 sm:px-6', className)}>
+	<div class="mx-auto max-w-6xl text-center">
+		<p class="text-xs uppercase tracking-widest text-muted-foreground">Logo Section</p>
+		<h2 class="mt-2 text-2xl sm:text-3xl font-bold text-foreground">{title}</h2>
+		<p class="mt-3 text-sm text-muted-foreground sm:text-base">{description}</p>
+
+		<div class="mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-4">
+			{#each logos as logo (logo.name)}
+				<div class="flex items-center gap-2 font-semibold text-sm text-foreground">
+					{#if logo.logoUrl}
+						<img src={logo.logoUrl} alt={logo.name} class="h-5 w-5 object-contain" />
+					{:else}
+						<div class="h-5 w-5 rounded bg-foreground/80"></div>
+					{/if}
+					{logo.name}
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/logo-section/LogoSection02.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Logo {
+		name: string;
+		logoUrl?: string;
+	}
+
+	interface Props {
+		class?: string;
+		logos?: Logo[];
+		title?: string;
+		description?: string;
+	}
+
+	const defaultLogos: Logo[] = [
+		{ name: 'Buzzsnap' },
+		{ name: 'Dashstar' },
+		{ name: 'Editly' },
+		{ name: 'Geoaura' },
+		{ name: 'Nanodea' },
+		{ name: 'Orionbo' }
+	];
+
+	let {
+		class: className,
+		logos = defaultLogos,
+		title = 'Customer logos that build trust',
+		description = 'Add logos of notable companies using your product. Include recognizable brands in grayscale to maintain visual consistency.'
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background py-12 px-4', className)}>
+	<div class="mx-auto max-w-5xl flex flex-col gap-8 sm:flex-row sm:items-start">
+		<div class="flex-shrink-0 sm:w-1/3">
+			<p class="text-xs uppercase tracking-widest text-muted-foreground">Logo Section</p>
+			<h2 class="mt-2 text-2xl font-bold text-foreground">{title}</h2>
+			<p class="mt-3 text-sm text-muted-foreground">{description}</p>
+		</div>
+
+		<div class="sm:w-2/3">
+			<div class="grid grid-cols-2 gap-y-4 gap-x-8">
+				{#each logos as logo (logo.name)}
+					<div class="flex items-center gap-2 font-semibold text-sm text-foreground">
+						{#if logo.logoUrl}
+							<img src={logo.logoUrl} alt={logo.name} class="h-5 w-5 object-contain" />
+						{:else}
+							<div class="h-5 w-5 rounded bg-foreground/80"></div>
+						{/if}
+						{logo.name}
+					</div>
+				{/each}
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/logo-section/LogoSection03.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Logo {
+		name: string;
+		logoUrl?: string;
+	}
+
+	interface Props {
+		class?: string;
+		logos?: Logo[];
+		title?: string;
+		description?: string;
+	}
+
+	const defaultLogos: Logo[] = [
+		{ name: 'Buzzsnap' },
+		{ name: 'Dashstar' },
+		{ name: 'Editly' },
+		{ name: 'Geoaura' },
+		{ name: 'Nanodea' },
+		{ name: 'Orionbo' }
+	];
+
+	let {
+		class: className,
+		logos = defaultLogos,
+		title = 'Customer logos that build trust',
+		description = 'Add logos of notable companies using your product. Include recognizable brands in grayscale to maintain visual consistency.'
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background py-12 px-4', className)}>
+	<div class="mx-auto max-w-5xl flex flex-col gap-8 sm:flex-row sm:items-start">
+		<div class="flex-shrink-0 sm:w-1/3">
+			<p class="text-xs uppercase tracking-widest text-muted-foreground">Logo Section</p>
+			<h2 class="mt-2 text-2xl font-bold text-foreground">{title}</h2>
+			<p class="mt-3 text-sm text-muted-foreground">{description}</p>
+		</div>
+
+		<div class="sm:w-2/3">
+			<div class="grid grid-cols-2 divide-x divide-y border border-border">
+				{#each logos as logo (logo.name)}
+					<div class="flex items-center justify-center p-6">
+						<div class="flex items-center gap-2 font-semibold text-sm text-foreground">
+							{#if logo.logoUrl}
+								<img src={logo.logoUrl} alt={logo.name} class="h-5 w-5 object-contain" />
+							{:else}
+								<div class="h-5 w-5 rounded bg-foreground/80"></div>
+							{/if}
+							{logo.name}
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/logo-section/LogoSection04.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Logo {
+		name: string;
+		logoUrl?: string;
+	}
+
+	interface Props {
+		class?: string;
+		logos?: Logo[];
+		title?: string;
+		description?: string;
+	}
+
+	const defaultLogos: Logo[] = [
+		{ name: 'Buzzsnap' },
+		{ name: 'Dashstar' },
+		{ name: 'Editly' },
+		{ name: 'Geoaura' },
+		{ name: 'Nanodea' },
+		{ name: 'Orionbo' }
+	];
+
+	let {
+		class: className,
+		logos = defaultLogos,
+		title = 'Customer logos that build trust',
+		description = 'Add logos of notable companies using your product. Include recognizable brands in grayscale to maintain visual consistency.'
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-foreground text-background py-12 px-4', className)}>
+	<div class="mx-auto max-w-5xl flex flex-col gap-8 sm:flex-row sm:items-start">
+		<div class="flex-shrink-0 sm:w-1/3">
+			<p class="text-xs uppercase tracking-widest text-background/70">Logo Section</p>
+			<h2 class="mt-2 text-2xl font-bold text-background">{title}</h2>
+			<p class="mt-3 text-sm text-background/70">{description}</p>
+		</div>
+
+		<div class="sm:w-2/3">
+			<div class="grid grid-cols-2 divide-x divide-y border border-background/20">
+				{#each logos as logo (logo.name)}
+					<div class="flex items-center justify-center p-6">
+						<div class="flex items-center gap-2 font-semibold text-sm text-background">
+							{#if logo.logoUrl}
+								<img src={logo.logoUrl} alt={logo.name} class="h-5 w-5 object-contain brightness-0 invert" />
+							{:else}
+								<div class="h-5 w-5 rounded bg-background/80"></div>
+							{/if}
+							{logo.name}
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/logo-section/LogoSection05.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Logo {
+		name: string;
+		logoUrl?: string;
+	}
+
+	interface Props {
+		class?: string;
+		logos?: Logo[];
+	}
+
+	const defaultLogos: Logo[] = [
+		{ name: 'Buzzsnap' },
+		{ name: 'Dashstar' },
+		{ name: 'Editly' },
+		{ name: 'Geoaura' },
+		{ name: 'Nanodea' },
+		{ name: 'Orionbo' }
+	];
+
+	let { class: className, logos = defaultLogos }: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background py-8 px-4', className)}>
+	<div class="mx-auto max-w-4xl">
+		<div class="grid grid-cols-2 sm:grid-cols-3 divide-x divide-y border border-border">
+			{#each logos as logo (logo.name)}
+				<div class="flex items-center justify-center p-8">
+					<div class="flex items-center gap-2 font-semibold text-sm text-foreground">
+						{#if logo.logoUrl}
+							<img src={logo.logoUrl} alt={logo.name} class="h-5 w-5 object-contain" />
+						{:else}
+							<div class="h-5 w-5 rounded bg-foreground/80"></div>
+						{/if}
+						{logo.name}
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/logo-section/LogoSection06.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Logo {
+		name: string;
+		logoUrl?: string;
+	}
+
+	interface Props {
+		class?: string;
+		logos?: Logo[];
+	}
+
+	const defaultLogos: Logo[] = [
+		{ name: 'Buzzsnap' },
+		{ name: 'Dashstar' },
+		{ name: 'Editly' },
+		{ name: 'Geoaura' },
+		{ name: 'Nanodea' },
+		{ name: 'Orionbo' }
+	];
+
+	let { class: className, logos = defaultLogos }: Props = $props();
+</script>
+
+<section class={cn('w-full bg-foreground text-background py-8 px-4', className)}>
+	<div class="mx-auto max-w-4xl">
+		<div class="grid grid-cols-2 sm:grid-cols-3 divide-x divide-y border border-background/20">
+			{#each logos as logo (logo.name)}
+				<div class="flex items-center justify-center p-8">
+					<div class="flex items-center gap-2 font-semibold text-sm text-background">
+						{#if logo.logoUrl}
+							<img src={logo.logoUrl} alt={logo.name} class="h-5 w-5 object-contain brightness-0 invert" />
+						{:else}
+							<div class="h-5 w-5 rounded bg-background/80"></div>
+						{/if}
+						{logo.name}
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/logo-section/LogoSection07.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Logo {
+		name: string;
+		logoUrl?: string;
+	}
+
+	interface Props {
+		class?: string;
+		logos?: Logo[];
+		title?: string;
+		description?: string;
+	}
+
+	const defaultLogos: Logo[] = [
+		{ name: 'Buzzsnap' },
+		{ name: 'Dashstar' },
+		{ name: 'Editly' },
+		{ name: 'Geoaura' },
+		{ name: 'Nanodea' },
+		{ name: 'Orionbo' },
+		{ name: 'Revahub' },
+		{ name: 'Starlight' }
+	];
+
+	let {
+		class: className,
+		logos = defaultLogos,
+		title = 'Customer logos that build trust',
+		description = 'Add logos of notable companies using your product. Include recognizable brands in grayscale to maintain visual consistency.'
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background py-12 px-4', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div class="text-center">
+			<p class="text-xs uppercase tracking-widest text-muted-foreground">Logo Section</p>
+			<h2 class="mt-2 text-2xl sm:text-3xl font-bold text-foreground">{title}</h2>
+			<p class="mt-3 text-sm text-muted-foreground sm:text-base">{description}</p>
+		</div>
+
+		<div class="mt-8 flex items-center gap-8 overflow-x-auto pb-2">
+			{#each logos as logo (logo.name)}
+				<div class="flex-shrink-0 flex items-center gap-2 font-semibold text-sm text-foreground">
+					{#if logo.logoUrl}
+						<img src={logo.logoUrl} alt={logo.name} class="h-5 w-5 object-contain" />
+					{:else}
+						<div class="h-5 w-5 rounded bg-foreground/80"></div>
+					{/if}
+					<span class="whitespace-nowrap">{logo.name}</span>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,7 @@
+export { default as LogoSection01 } from './LogoSection01.svelte';
+export { default as LogoSection02 } from './LogoSection02.svelte';
+export { default as LogoSection03 } from './LogoSection03.svelte';
+export { default as LogoSection04 } from './LogoSection04.svelte';
+export { default as LogoSection05 } from './LogoSection05.svelte';
+export { default as LogoSection06 } from './LogoSection06.svelte';
+export { default as LogoSection07 } from './LogoSection07.svelte';

package/src/registry/blocks/lp-navbar/LPNavbar01.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Link {
+		label: string;
+		href?: string;
+		children?: Link[];
+	}
+
+	let {
+		class: className = '',
+		links = [
+			{ label: 'Products', href: '#' },
+			{ label: 'Use Cases', href: '#' },
+			{ label: 'Docs', href: '#' },
+			{ label: 'Blog', href: '#' },
+			{ label: 'FAQ', href: '#' }
+		],
+		onCta = () => {}
+	}: {
+		class?: string;
+		links?: Link[];
+		onCta?: () => void;
+	} = $props();
+
+	let isOpen = $state(false);
+</script>
+
+<header class={cn('w-full border-b bg-background', className)}>
+	<div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 sm:px-6">
+		<!-- Logo -->
+		<div class="h-8 w-8 rounded bg-foreground/10 flex items-center justify-center flex-shrink-0">
+			<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" class="text-foreground/60">
+				<path d="M2 4a2 2 0 012-2h12a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V4z" />
+			</svg>
+		</div>
+
+		<!-- Desktop Nav -->
+		<nav class="hidden sm:flex items-center gap-6">
+			{#each links as link}
+				<a
+					href={link.href || '#'}
+					class="text-sm text-muted-foreground hover:text-foreground transition-colors"
+				>
+					{link.label}
+				</a>
+			{/each}
+		</nav>
+
+		<!-- Desktop CTA -->
+		<div class="hidden sm:block">
+			<Button size="sm" onclick={onCta}>Get started</Button>
+		</div>
+
+		<!-- Mobile Menu Toggle -->
+		<button
+			onclick={() => (isOpen = !isOpen)}
+			class="sm:hidden p-2 hover:bg-muted rounded-md transition-colors"
+		>
+			{#if isOpen}
+				<svg width="20" height="20" viewBox="0 0 20 20" stroke="currentColor" stroke-width="2">
+					<line x1="18" y1="6" x2="6" y2="18" />
+					<line x1="6" y1="6" x2="18" y2="18" />
+				</svg>
+			{:else}
+				<svg width="20" height="20" viewBox="0 0 20 20" stroke="currentColor" stroke-width="2">
+					<line x1="3" y1="6" x2="21" y2="6" />
+					<line x1="3" y1="12" x2="21" y2="12" />
+					<line x1="3" y1="18" x2="21" y2="18" />
+				</svg>
+			{/if}
+		</button>
+	</div>
+
+	<!-- Mobile Menu -->
+	{#if isOpen}
+		<div class="border-t sm:hidden">
+			<nav class="flex flex-col py-4 px-4">
+				{#each links as link}
+					<a
+						href={link.href || '#'}
+						class="px-2 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+					>
+						{link.label}
+					</a>
+				{/each}
+			</nav>
+			<div class="px-4 pb-4">
+				<Button size="sm" class="w-full" onclick={onCta}>Get started</Button>
+			</div>
+		</div>
+	{/if}
+</header>

package/src/registry/blocks/lp-navbar/LPNavbar02.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Link {
+		label: string;
+		href?: string;
+		children?: Link[];
+	}
+
+	let {
+		class: className = '',
+		links = [
+			{ label: 'Products', href: '#' },
+			{ label: 'Use Cases', href: '#' },
+			{ label: 'Docs', href: '#' },
+			{ label: 'Blog', href: '#' },
+			{ label: 'FAQ', href: '#' }
+		],
+		onCta = () => {}
+	}: {
+		class?: string;
+		links?: Link[];
+		onCta?: () => void;
+	} = $props();
+
+	let isOpen = $state(false);
+</script>
+
+<header class={cn('w-full border-b bg-background', className)}>
+	<div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 sm:px-6">
+		<!-- Logo -->
+		<div class="h-8 w-8 rounded bg-foreground/10 flex items-center justify-center flex-shrink-0">
+			<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" class="text-foreground/60">
+				<path d="M2 4a2 2 0 012-2h12a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V4z" />
+			</svg>
+		</div>
+
+		<!-- Desktop Nav - Centered -->
+		<div class="flex-1 flex justify-center">
+			<nav class="hidden sm:flex items-center gap-6">
+				{#each links as link}
+					<a
+						href={link.href || '#'}
+						class="text-sm text-muted-foreground hover:text-foreground transition-colors"
+					>
+						{link.label}
+					</a>
+				{/each}
+			</nav>
+		</div>
+
+		<!-- Desktop CTA -->
+		<div class="hidden sm:block">
+			<Button size="sm" onclick={onCta}>Get started</Button>
+		</div>
+
+		<!-- Mobile Menu Toggle -->
+		<button
+			onclick={() => (isOpen = !isOpen)}
+			class="sm:hidden p-2 hover:bg-muted rounded-md transition-colors"
+		>
+			{#if isOpen}
+				<svg width="20" height="20" viewBox="0 0 20 20" stroke="currentColor" stroke-width="2">
+					<line x1="18" y1="6" x2="6" y2="18" />
+					<line x1="6" y1="6" x2="18" y2="18" />
+				</svg>
+			{:else}
+				<svg width="20" height="20" viewBox="0 0 20 20" stroke="currentColor" stroke-width="2">
+					<line x1="3" y1="6" x2="21" y2="6" />
+					<line x1="3" y1="12" x2="21" y2="12" />
+					<line x1="3" y1="18" x2="21" y2="18" />
+				</svg>
+			{/if}
+		</button>
+	</div>
+
+	<!-- Mobile Menu -->
+	{#if isOpen}
+		<div class="border-t sm:hidden">
+			<nav class="flex flex-col py-4 px-4">
+				{#each links as link}
+					<a
+						href={link.href || '#'}
+						class="px-2 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+					>
+						{link.label}
+					</a>
+				{/each}
+			</nav>
+			<div class="px-4 pb-4">
+				<Button size="sm" class="w-full" onclick={onCta}>Get started</Button>
+			</div>
+		</div>
+	{/if}
+</header>

package/src/registry/blocks/lp-navbar/LPNavbar03.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Link {
+		label: string;
+		href?: string;
+		children?: Link[];
+	}
+
+	let {
+		class: className = '',
+		links = [
+			{ label: 'Products', href: '#' },
+			{ label: 'Use Cases', href: '#' },
+			{ label: 'Docs', href: '#' },
+			{ label: 'Blog', href: '#' },
+			{ label: 'FAQ', href: '#' }
+		],
+		onCta = () => {}
+	}: {
+		class?: string;
+		links?: Link[];
+		onCta?: () => void;
+	} = $props();
+
+	let isOpen = $state(false);
+</script>
+
+<header class={cn('w-full border-b bg-background', className)}>
+	<div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 sm:px-6">
+		<!-- Logo -->
+		<div class="h-8 w-8 rounded bg-foreground/10 flex items-center justify-center flex-shrink-0">
+			<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" class="text-foreground/60">
+				<path d="M2 4a2 2 0 012-2h12a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V4z" />
+			</svg>
+		</div>
+
+		<!-- Desktop Nav -->
+		<nav class="hidden sm:flex items-center gap-6">
+			{#each links as link}
+				<a
+					href={link.href || '#'}
+					class="text-sm text-muted-foreground hover:text-foreground transition-colors"
+				>
+					{link.label}
+				</a>
+			{/each}
+		</nav>
+
+		<!-- Desktop Auth Buttons -->
+		<div class="hidden sm:flex items-center gap-2">
+			<Button variant="ghost" size="sm" onclick={onCta}>Sign in</Button>
+			<Button size="sm" onclick={onCta}>Sign up</Button>
+		</div>
+
+		<!-- Mobile Menu Toggle -->
+		<button
+			onclick={() => (isOpen = !isOpen)}
+			class="sm:hidden p-2 hover:bg-muted rounded-md transition-colors"
+		>
+			{#if isOpen}
+				<svg width="20" height="20" viewBox="0 0 20 20" stroke="currentColor" stroke-width="2">
+					<line x1="18" y1="6" x2="6" y2="18" />
+					<line x1="6" y1="6" x2="18" y2="18" />
+				</svg>
+			{:else}
+				<svg width="20" height="20" viewBox="0 0 20 20" stroke="currentColor" stroke-width="2">
+					<line x1="3" y1="6" x2="21" y2="6" />
+					<line x1="3" y1="12" x2="21" y2="12" />
+					<line x1="3" y1="18" x2="21" y2="18" />
+				</svg>
+			{/if}
+		</button>
+	</div>
+
+	<!-- Mobile Menu -->
+	{#if isOpen}
+		<div class="border-t sm:hidden">
+			<nav class="flex flex-col py-4 px-4">
+				{#each links as link}
+					<a
+						href={link.href || '#'}
+						class="px-2 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+					>
+						{link.label}
+					</a>
+				{/each}
+			</nav>
+			<div class="border-t my-4"></div>
+			<div class="px-4 pb-4 flex gap-2">
+				<Button variant="outline" size="sm" class="flex-1" onclick={onCta}>Sign in</Button>
+				<Button size="sm" class="flex-1" onclick={onCta}>Sign up</Button>
+			</div>
+		</div>
+	{/if}
+</header>