@xbg.solutions/create-frontend 1.1.2 → 1.2.0

package/src/registry/blocks/contact-section/ContactSection05.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		onSubmit?: (data: any) => void;
+	}
+
+	let name = $state('');
+	let email = $state('');
+	let message = $state('');
+
+	const {
+		class: className,
+		title = 'Get in touch',
+		onSubmit
+	}: Props = $props();
+
+	function handleSubmit() {
+		if (onSubmit && name && email && message) {
+			onSubmit({ name, email, message });
+			name = '';
+			email = '';
+			message = '';
+		}
+	}
+</script>
+
+<section class={cn('w-full bg-background', className)}>
+	<div class="grid grid-cols-1 gap-0 sm:grid-cols-2">
+		<div class="py-16 px-4 sm:px-6">
+			<div class="mx-auto max-w-lg">
+				<h2 class="text-3xl font-bold">{title}</h2>
+
+				<form class="mt-8 space-y-4" onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
+					<input
+						type="text"
+						placeholder="Your name"
+						bind:value={name}
+						class="w-full rounded-lg border border-input bg-background px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ring"
+					/>
+					<input
+						type="email"
+						placeholder="your@email.com"
+						bind:value={email}
+						class="w-full rounded-lg border border-input bg-background px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ring"
+					/>
+					<textarea
+						placeholder="Your message"
+						bind:value={message}
+						rows={5}
+						class="w-full rounded-lg border border-input bg-background px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ring"
+					/>
+					<Button type="submit" class="w-full">Send message</Button>
+				</form>
+			</div>
+		</div>
+
+		<div class="bg-muted rounded-r-xl flex items-center justify-center min-h-[300px] hidden sm:flex">
+			<div class="text-muted-foreground flex flex-col items-center gap-2">
+				<svg class="h-12 w-12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+					<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+					<circle cx="12" cy="10" r="3" />
+				</svg>
+				<p class="text-sm">Our location</p>
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/contact-section/ContactSection06.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		onSubmit?: (data: any) => void;
+	}
+
+	let step: 1 | 2 = $state(1);
+	let contactType = $state('');
+	let name = $state('');
+	let email = $state('');
+	let message = $state('');
+
+	const { class: className, onSubmit }: Props = $props();
+
+	const contactOptions = [
+		{ id: 'sales', label: 'Sales', description: 'Interested in our plans?' },
+		{ id: 'support', label: 'Support', description: 'Need help with your account?' },
+		{ id: 'general', label: 'General', description: 'Other inquiries' }
+	];
+
+	function handleSubmit() {
+		if (onSubmit && name && email && message) {
+			onSubmit({ type: contactType, name, email, message });
+			name = '';
+			email = '';
+			message = '';
+			step = 1;
+			contactType = '';
+		}
+	}
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4 sm:px-6', className)}>
+	<div class="mx-auto max-w-lg">
+		{#if step === 1}
+			<div class="text-center">
+				<h2 class="text-3xl font-bold">What can we help you with?</h2>
+				<div class="mt-8 space-y-3">
+					{#each contactOptions as option}
+						<button
+							onclick={() => {
+								contactType = option.id;
+								step = 2;
+							}}
+							class="flex flex-col items-start gap-2 w-full rounded-lg border p-4 text-left hover:border-foreground transition-colors"
+						>
+							<p class="font-semibold">{option.label}</p>
+							<p class="text-sm text-muted-foreground">{option.description}</p>
+						</button>
+					{/each}
+				</div>
+			</div>
+		{:else}
+			<div>
+				<Button variant="outline" onclick={() => (step = 1)} class="mb-8">← Back</Button>
+
+				<h2 class="text-3xl font-bold">
+					{contactOptions.find((opt) => opt.id === contactType)?.label} Inquiry
+				</h2>
+
+				<form class="mt-8 space-y-4" onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
+					<input
+						type="text"
+						placeholder="Your name"
+						bind:value={name}
+						class="w-full rounded-lg border border-input bg-background px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ring"
+					/>
+					<input
+						type="email"
+						placeholder="your@email.com"
+						bind:value={email}
+						class="w-full rounded-lg border border-input bg-background px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ring"
+					/>
+					<textarea
+						placeholder="Your message"
+						bind:value={message}
+						rows={5}
+						class="w-full rounded-lg border border-input bg-background px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ring"
+					/>
+					<Button type="submit" class="w-full">Send message</Button>
+				</form>
+			</div>
+		{/if}
+	</div>
+</section>

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

@@ -0,0 +1,6 @@
+export { default as ContactSection01 } from './ContactSection01.svelte';
+export { default as ContactSection02 } from './ContactSection02.svelte';
+export { default as ContactSection03 } from './ContactSection03.svelte';
+export { default as ContactSection04 } from './ContactSection04.svelte';
+export { default as ContactSection05 } from './ContactSection05.svelte';
+export { default as ContactSection06 } from './ContactSection06.svelte';

package/src/registry/blocks/cta/CTA01.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	let {
+		class: className = '',
+		eyebrow = 'CTA Section',
+		headline = 'Action-driving headline that creates urgency',
+		description = 'Supporting description that explains the value proposition and encourages immediate action.',
+		ctaLabel = 'Get started',
+		onCta = () => {}
+	}: {
+		class?: string;
+		eyebrow?: string;
+		headline?: string;
+		description?: string;
+		ctaLabel?: string;
+		onCta?: () => void;
+	} = $props();
+</script>
+
+<section class={cn('w-full bg-foreground text-background py-16 sm:py-24 px-4', className)}>
+	<div class="mx-auto max-w-3xl text-center">
+		<!-- Eyebrow -->
+		<p class="text-sm font-medium uppercase tracking-wide opacity-60 mb-4">{eyebrow}</p>
+
+		<!-- Headline -->
+		<h2 class="text-3xl sm:text-4xl font-bold mb-6">{headline}</h2>
+
+		<!-- Description -->
+		<p class="text-sm opacity-70 mb-8">{description}</p>
+
+		<!-- CTA Button -->
+		<button
+			onclick={onCta}
+			class="inline-flex items-center gap-2 rounded-md border border-background/30 bg-background/10 px-5 py-2.5 text-sm font-medium text-background hover:bg-background/20 transition-colors"
+		>
+			{ctaLabel}
+			<svg width="16" height="16" viewBox="0 0 20 20" stroke="currentColor" stroke-width="2">
+				<line x1="5" y1="12" x2="19" y2="12" />
+				<polyline points="12 5 19 12 12 19" />
+			</svg>
+		</button>
+	</div>
+</section>

package/src/registry/blocks/cta/CTA02.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	let {
+		class: className = '',
+		headline = 'Ready to get started?',
+		onLearnMore = () => {},
+		onCta = () => {}
+	}: {
+		class?: string;
+		headline?: string;
+		onLearnMore?: () => void;
+		onCta?: () => void;
+	} = $props();
+</script>
+
+<section
+	class={cn('w-full bg-foreground text-background py-12 px-4', className)}
+>
+	<div class="mx-auto max-w-7xl">
+		<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+			<!-- Left: Headline -->
+			<h2 class="text-2xl sm:text-3xl font-bold">
+				{headline}
+			</h2>
+
+			<!-- Right: Buttons -->
+			<div class="flex items-center gap-3 sm:flex-shrink-0">
+				<Button
+					variant="ghost"
+					size="sm"
+					class="text-background hover:bg-background/10"
+					onclick={onLearnMore}
+				>
+					Learn more
+				</Button>
+				<Button
+					size="sm"
+					class="bg-background text-foreground hover:bg-background/90"
+					onclick={onCta}
+				>
+					Get started
+				</Button>
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/cta/CTA03.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	let {
+		class: className = '',
+		eyebrow = 'CTA Section',
+		headline = 'Powerful features await',
+		description = 'Discover everything you need to succeed with our comprehensive platform.',
+		ctaLabel = 'Get started',
+		onCta = () => {}
+	}: {
+		class?: string;
+		eyebrow?: string;
+		headline?: string;
+		description?: string;
+		ctaLabel?: string;
+		onCta?: () => void;
+	} = $props();
+</script>
+
+<section class={cn('w-full bg-muted py-8 px-4', className)}>
+	<div class="mx-auto max-w-5xl rounded-xl bg-foreground text-background p-6 sm:p-10">
+		<div class="flex flex-col sm:flex-row gap-8">
+			<!-- Left: Image -->
+			<div class="flex-shrink-0 sm:w-1/2">
+				<div class="rounded-lg bg-muted flex items-center justify-center aspect-video">
+					<svg width="24" height="24" viewBox="0 0 20 20" fill="currentColor" class="opacity-60">
+						<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+						<circle cx="8.5" cy="8.5" r="1.5" />
+						<polyline points="21 15 16 10 5 21" stroke="currentColor" stroke-width="1" fill="none" />
+					</svg>
+				</div>
+			</div>
+
+			<!-- Right: Content -->
+			<div class="sm:w-1/2 flex flex-col justify-center">
+				<p class="text-sm font-medium uppercase tracking-wide opacity-60 mb-2">{eyebrow}</p>
+				<h3 class="text-2xl sm:text-3xl font-bold mb-4">{headline}</h3>
+				<p class="text-sm opacity-70 mb-6">{description}</p>
+				<button
+					onclick={onCta}
+					class="inline-flex items-center gap-2 w-fit rounded-md border border-background/30 bg-background/10 px-5 py-2.5 text-sm font-medium text-background hover:bg-background/20 transition-colors"
+				>
+					{ctaLabel}
+					<svg width="16" height="16" viewBox="0 0 20 20" stroke="currentColor" stroke-width="2">
+						<line x1="5" y1="12" x2="19" y2="12" />
+						<polyline points="12 5 19 12 12 19" />
+					</svg>
+				</button>
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/cta/CTA04.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	let {
+		class: className = '',
+		eyebrow = 'CTA Section',
+		headline = 'Join thousands of users today',
+		description = 'Start your free trial with no credit card required.',
+		onSubmit = (email: string) => {}
+	}: {
+		class?: string;
+		eyebrow?: string;
+		headline?: string;
+		description?: string;
+		onSubmit?: (email: string) => void;
+	} = $props();
+
+	let email = $state('');
+
+	function handleSubmit() {
+		if (email.trim()) {
+			onSubmit(email);
+			email = '';
+		}
+	}
+</script>
+
+<section class={cn('w-full bg-background py-12 px-4', className)}>
+	<div class="mx-auto max-w-5xl flex flex-col sm:flex-row gap-10 items-center">
+		<!-- Left: Content & Form -->
+		<div class="sm:w-1/2 flex flex-col">
+			<p class="text-sm font-medium uppercase tracking-wide opacity-60 mb-2">{eyebrow}</p>
+			<h2 class="text-2xl sm:text-3xl font-bold text-foreground mb-4">{headline}</h2>
+			<p class="text-sm text-muted-foreground mb-6">{description}</p>
+
+			<!-- Email Form -->
+			<div class="flex gap-2">
+				<input
+					type="email"
+					bind:value={email}
+					placeholder="you@example.com"
+					class="flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring"
+				/>
+				<Button size="sm" onclick={handleSubmit}>Start free</Button>
+			</div>
+		</div>
+
+		<!-- Right: Image Placeholder -->
+		<div class="sm:w-1/2">
+			<div class="rounded-lg bg-muted flex items-center justify-center aspect-video w-full">
+				<svg width="24" height="24" viewBox="0 0 20 20" fill="currentColor" class="opacity-60">
+					<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+					<circle cx="8.5" cy="8.5" r="1.5" />
+					<polyline points="21 15 16 10 5 21" stroke="currentColor" stroke-width="1" fill="none" />
+				</svg>
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/cta/CTA05.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	let {
+		class: className = '',
+		eyebrow = 'CTA Section',
+		headline = 'See it in action',
+		description = 'Experience the power of our platform with an interactive demo.',
+		ctaLabel = 'Get started',
+		onCta = () => {}
+	}: {
+		class?: string;
+		eyebrow?: string;
+		headline?: string;
+		description?: string;
+		ctaLabel?: string;
+		onCta?: () => void;
+	} = $props();
+</script>
+
+<section class={cn('w-full bg-foreground py-8 px-4', className)}>
+	<div class="mx-auto max-w-5xl rounded-xl bg-foreground border border-background/10 text-background overflow-hidden">
+		<div class="flex flex-col sm:flex-row">
+			<!-- Left: Content -->
+			<div class="sm:w-1/2 p-6 sm:p-10 flex flex-col justify-center">
+				<p class="text-sm font-medium uppercase tracking-wide opacity-60 mb-2">{eyebrow}</p>
+				<h3 class="text-2xl sm:text-3xl font-bold mb-4">{headline}</h3>
+				<p class="text-sm opacity-70 mb-6">{description}</p>
+				<button
+					onclick={onCta}
+					class="inline-flex items-center gap-2 w-fit rounded-md border border-background/30 bg-background/10 px-5 py-2.5 text-sm font-medium text-background hover:bg-background/20 transition-colors"
+				>
+					{ctaLabel}
+					<svg width="16" height="16" viewBox="0 0 20 20" stroke="currentColor" stroke-width="2">
+						<line x1="5" y1="12" x2="19" y2="12" />
+						<polyline points="12 5 19 12 12 19" />
+					</svg>
+				</button>
+			</div>
+
+			<!-- Right: Image (Partially Hanging) -->
+			<div class="sm:w-1/2 flex-shrink-0">
+				<div class="rounded-lg bg-muted flex items-center justify-center aspect-video h-64 sm:h-full">
+					<svg width="24" height="24" viewBox="0 0 20 20" fill="currentColor" class="opacity-60">
+						<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+						<circle cx="8.5" cy="8.5" r="1.5" />
+						<polyline points="21 15 16 10 5 21" stroke="currentColor" stroke-width="1" fill="none" />
+					</svg>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/cta/CTA06.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	let {
+		class: className = '',
+		headline = 'Ready to transform your workflow?',
+		onCta = () => {},
+		onLearnMore = () => {}
+	}: {
+		class?: string;
+		headline?: string;
+		onCta?: () => void;
+		onLearnMore?: () => void;
+	} = $props();
+</script>
+
+<section class={cn('w-full bg-muted py-8 px-4', className)}>
+	<div class="mx-auto max-w-5xl rounded-xl bg-foreground text-background px-6 py-10">
+		<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+			<!-- Left: Headline -->
+			<h2 class="text-2xl font-bold">{headline}</h2>
+
+			<!-- Right: Buttons -->
+			<div class="flex gap-3 sm:flex-shrink-0 flex-col sm:flex-row">
+				<Button
+					size="sm"
+					class="bg-background text-foreground hover:bg-background/90"
+					onclick={onCta}
+				>
+					Get started
+				</Button>
+				<Button
+					variant="ghost"
+					size="sm"
+					class="text-background hover:bg-background/10"
+					onclick={onLearnMore}
+				>
+					Learn more
+				</Button>
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/cta/CTA07.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	let {
+		class: className = '',
+		eyebrow = 'CTA Section',
+		headline = 'Start your journey today',
+		ctaLabel = 'Get started',
+		onCta = () => {}
+	}: {
+		class?: string;
+		eyebrow?: string;
+		headline?: string;
+		ctaLabel?: string;
+		onCta?: () => void;
+	} = $props();
+</script>
+
+<section class={cn('w-full py-8 px-4', className)}>
+	<div class="mx-auto max-w-4xl rounded-2xl bg-foreground text-background py-16 px-8 sm:py-24 sm:px-12 text-center">
+		<!-- Eyebrow -->
+		<p class="text-sm font-medium uppercase tracking-wide opacity-60 mb-4">{eyebrow}</p>
+
+		<!-- Headline -->
+		<h2 class="text-3xl font-bold mb-8">{headline}</h2>
+
+		<!-- CTA Button -->
+		<button
+			onclick={onCta}
+			class="inline-flex items-center gap-2 rounded-md border border-background/30 bg-background/10 px-6 py-3 text-sm font-medium text-background hover:bg-background/20 transition-colors"
+		>
+			{ctaLabel}
+			<svg width="16" height="16" viewBox="0 0 20 20" stroke="currentColor" stroke-width="2">
+				<line x1="5" y1="12" x2="19" y2="12" />
+				<polyline points="12 5 19 12 12 19" />
+			</svg>
+		</button>
+	</div>
+</section>

package/src/registry/blocks/cta/index.ts

@@ -0,0 +1,7 @@
+export { default as CTA01 } from './CTA01.svelte';
+export { default as CTA02 } from './CTA02.svelte';
+export { default as CTA03 } from './CTA03.svelte';
+export { default as CTA04 } from './CTA04.svelte';
+export { default as CTA05 } from './CTA05.svelte';
+export { default as CTA06 } from './CTA06.svelte';
+export { default as CTA07 } from './CTA07.svelte';