@xbg.solutions/create-frontend 1.1.2 → 1.2.0

package/src/registry/blocks/comparison-section/ComparisonSection04.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface PricingPlan {
+		name: string;
+		price: string;
+		period?: string;
+		description?: string;
+		features: string[];
+		highlighted?: boolean;
+		ctaLabel?: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		plans?: PricingPlan[];
+	}
+
+	const defaultPlans: PricingPlan[] = [
+		{
+			name: 'Starter',
+			price: '$0',
+			period: '/month',
+			description: 'Perfect for individuals and small projects.',
+			features: ['5 projects', '10GB storage', 'Basic analytics', 'Email support'],
+			ctaLabel: 'Get started free'
+		},
+		{
+			name: 'Pro',
+			price: '$29',
+			period: '/month',
+			description: 'Best for growing teams and businesses.',
+			features: [
+				'Unlimited projects',
+				'100GB storage',
+				'Advanced analytics',
+				'Priority support',
+				'Custom domain',
+				'API access'
+			],
+			highlighted: true,
+			ctaLabel: 'Start free trial'
+		}
+	];
+
+	const {
+		class: className,
+		title = 'Simple pricing',
+		plans = defaultPlans
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4 sm:px-6', className)}>
+	<div class="mx-auto max-w-2xl">
+		<div class="text-center mb-12">
+			<h2 class="text-3xl font-bold">{title}</h2>
+			<p class="mt-4 text-muted-foreground">Choose a plan that fits your needs.</p>
+		</div>
+
+		<div class="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 max-w-2xl mx-auto">
+			{#each plans as plan}
+				<div
+					class={cn(
+						'rounded-xl border bg-background p-6',
+						plan.highlighted ? 'border-foreground ring-2 ring-foreground' : ''
+					)}
+				>
+					<h3 class="text-lg font-semibold">{plan.name}</h3>
+					<div class="mt-4">
+						<span class="text-4xl font-bold">{plan.price}</span>
+						<span class="text-muted-foreground">{plan.period}</span>
+					</div>
+					<p class="mt-4 text-sm text-muted-foreground">{plan.description}</p>
+
+					<ul class="mt-6 space-y-3">
+						{#each plan.features as feature}
+							<li class="flex items-center gap-2 text-sm">
+								<svg class="h-4 w-4 text-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+									<polyline points="20 6 9 17 4 12" />
+								</svg>
+								{feature}
+							</li>
+						{/each}
+					</ul>
+
+					<Button
+						class="w-full mt-6"
+						variant={plan.highlighted ? 'default' : 'outline'}
+					>
+						{plan.ctaLabel}
+					</Button>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/comparison-section/ComparisonSection05.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface PricingPlan {
+		name: string;
+		price: string;
+		period?: string;
+		description?: string;
+		features: string[];
+		highlighted?: boolean;
+		ctaLabel?: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		plans?: PricingPlan[];
+	}
+
+	const defaultPlans: PricingPlan[] = [
+		{
+			name: 'Starter',
+			price: '$0',
+			period: '/month',
+			description: 'Perfect for individuals and small projects.',
+			features: ['5 projects', '10GB storage', 'Basic analytics', 'Email support'],
+			ctaLabel: 'Get started free'
+		},
+		{
+			name: 'Pro',
+			price: '$29',
+			period: '/month',
+			description: 'Best for growing teams and businesses.',
+			features: [
+				'Unlimited projects',
+				'100GB storage',
+				'Advanced analytics',
+				'Priority support',
+				'Custom domain',
+				'API access'
+			],
+			highlighted: true,
+			ctaLabel: 'Start free trial'
+		},
+		{
+			name: 'Enterprise',
+			price: '$99',
+			period: '/month',
+			description: 'For large-scale operations.',
+			features: [
+				'Everything in Pro',
+				'Unlimited storage',
+				'Dedicated support',
+				'SLA guarantee',
+				'Custom integrations',
+				'SSO/SAML'
+			],
+			ctaLabel: 'Contact sales'
+		}
+	];
+
+	const {
+		class: className,
+		title = 'Choose the right plan',
+		plans = defaultPlans
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-foreground text-background py-16 px-4 sm:px-6', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div class="text-center mb-12">
+			<h2 class="text-3xl font-bold">{title}</h2>
+			<p class="mt-4 text-background/80">Choose a plan that fits your needs.</p>
+		</div>
+
+		<div class="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-3">
+			{#each plans as plan}
+				<div
+					class={cn(
+						'rounded-xl border p-6',
+						plan.highlighted
+							? 'bg-background text-foreground border-background'
+							: 'bg-background/10 border-background/20'
+					)}
+				>
+					<h3 class="text-lg font-semibold">{plan.name}</h3>
+					<div class="mt-4">
+						<span class="text-4xl font-bold">{plan.price}</span>
+						<span class={plan.highlighted ? 'text-muted-foreground' : 'text-background/60'}>
+							{plan.period}
+						</span>
+					</div>
+					<p class={cn('mt-4 text-sm', plan.highlighted ? 'text-muted-foreground' : 'text-background/80')}>
+						{plan.description}
+					</p>
+
+					<ul class="mt-6 space-y-3">
+						{#each plan.features as feature}
+							<li class="flex items-center gap-2 text-sm">
+								<svg class={cn('h-4 w-4', plan.highlighted ? 'text-foreground' : 'text-background/60')} viewBox="0 0 24 24" fill="none" stroke="currentColor">
+									<polyline points="20 6 9 17 4 12" />
+								</svg>
+								{feature}
+							</li>
+						{/each}
+					</ul>
+
+					<Button
+						class="w-full mt-6"
+						variant={plan.highlighted ? 'default' : 'secondary'}
+					>
+						{plan.ctaLabel}
+					</Button>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/comparison-section/ComparisonSection06.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface PricingPlan {
+		name: string;
+		price: string;
+		period?: string;
+		description?: string;
+		features: string[];
+		highlighted?: boolean;
+		ctaLabel?: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		plans?: PricingPlan[];
+		annualDiscount?: number;
+	}
+
+	const defaultPlans: PricingPlan[] = [
+		{
+			name: 'Starter',
+			price: '$0',
+			period: '/month',
+			description: 'Perfect for individuals and small projects.',
+			features: ['5 projects', '10GB storage', 'Basic analytics', 'Email support'],
+			ctaLabel: 'Get started free'
+		},
+		{
+			name: 'Pro',
+			price: '$29',
+			period: '/month',
+			description: 'Best for growing teams and businesses.',
+			features: [
+				'Unlimited projects',
+				'100GB storage',
+				'Advanced analytics',
+				'Priority support',
+				'Custom domain',
+				'API access'
+			],
+			highlighted: true,
+			ctaLabel: 'Start free trial'
+		},
+		{
+			name: 'Enterprise',
+			price: '$99',
+			period: '/month',
+			description: 'For large-scale operations.',
+			features: [
+				'Everything in Pro',
+				'Unlimited storage',
+				'Dedicated support',
+				'SLA guarantee',
+				'Custom integrations',
+				'SSO/SAML'
+			],
+			ctaLabel: 'Contact sales'
+		}
+	];
+
+	let billing: 'monthly' | 'annual' = $state('monthly');
+
+	const {
+		class: className,
+		title = 'Choose the right plan',
+		plans = defaultPlans,
+		annualDiscount = 0.8
+	}: Props = $props();
+
+	function getPrice(price: string): number {
+		return parseInt(price.replace('$', ''));
+	}
+
+	function formatPrice(price: string): string {
+		if (price === '$0') return '$0';
+		const basePrice = getPrice(price);
+		const discountedPrice = Math.round(basePrice * annualDiscount);
+		return `$${discountedPrice}`;
+	}
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4 sm:px-6', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div class="text-center mb-12">
+			<h2 class="text-3xl font-bold">{title}</h2>
+
+			<div class="mt-8 flex items-center justify-center gap-4">
+				<p class={cn('text-sm font-semibold', billing === 'monthly' ? 'text-foreground' : 'text-muted-foreground')}>
+					Monthly
+				</p>
+				<button
+					onclick={() => (billing = billing === 'monthly' ? 'annual' : 'monthly')}
+					class={cn(
+						'relative inline-flex h-8 w-14 items-center rounded-full transition-colors',
+						billing === 'annual' ? 'bg-foreground' : 'bg-muted'
+					)}
+				>
+					<span
+						class={cn(
+							'inline-block h-6 w-6 transform rounded-full bg-background transition-transform',
+							billing === 'annual' ? 'translate-x-7' : 'translate-x-1'
+						)}
+					/>
+				</button>
+				<p class={cn('text-sm font-semibold', billing === 'annual' ? 'text-foreground' : 'text-muted-foreground')}>
+					Annual <span class="ml-2 inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Save 20%</span>
+				</p>
+			</div>
+
+			<p class="mt-4 text-muted-foreground">Choose a plan that fits your needs.</p>
+		</div>
+
+		<div class="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-3">
+			{#each plans as plan}
+				<div
+					class={cn(
+						'rounded-xl border bg-background p-6',
+						plan.highlighted ? 'border-foreground ring-2 ring-foreground' : ''
+					)}
+				>
+					<h3 class="text-lg font-semibold">{plan.name}</h3>
+					<div class="mt-4">
+						<span class="text-4xl font-bold">
+							{billing === 'monthly' ? plan.price : formatPrice(plan.price)}
+						</span>
+						<span class="text-muted-foreground">/{billing === 'monthly' ? 'month' : 'year'}</span>
+					</div>
+					<p class="mt-4 text-sm text-muted-foreground">{plan.description}</p>
+
+					<ul class="mt-6 space-y-3">
+						{#each plan.features as feature}
+							<li class="flex items-center gap-2 text-sm">
+								<svg class="h-4 w-4 text-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+									<polyline points="20 6 9 17 4 12" />
+								</svg>
+								{feature}
+							</li>
+						{/each}
+					</ul>
+
+					<Button
+						class="w-full mt-6"
+						variant={plan.highlighted ? 'default' : 'outline'}
+					>
+						{plan.ctaLabel}
+					</Button>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,6 @@
+export { default as ComparisonSection01 } from './ComparisonSection01.svelte';
+export { default as ComparisonSection02 } from './ComparisonSection02.svelte';
+export { default as ComparisonSection03 } from './ComparisonSection03.svelte';
+export { default as ComparisonSection04 } from './ComparisonSection04.svelte';
+export { default as ComparisonSection05 } from './ComparisonSection05.svelte';
+export { default as ComparisonSection06 } from './ComparisonSection06.svelte';

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

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		onSubmit?: (data: any) => void;
+	}
+
+	let name = $state('');
+	let email = $state('');
+	let message = $state('');
+
+	const {
+		class: className,
+		title = 'Get in touch',
+		description = 'We would love to hear from you. Send us a message and we will respond as soon as possible.',
+		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 py-16 px-4 sm:px-6', className)}>
+	<div class="mx-auto max-w-lg text-center">
+		<h2 class="text-3xl font-bold">{title}</h2>
+		<p class="mt-4 text-muted-foreground">{description}</p>
+
+		<form class="mt-8 space-y-4" onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
+			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+				<input
+					type="text"
+					placeholder="Your name"
+					bind:value={name}
+					class="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="rounded-lg border border-input bg-background px-4 py-2 focus:outline-none focus:ring-2 focus:ring-ring"
+				/>
+			</div>
+
+			<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>
+</section>

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

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		onSubmit?: (data: any) => void;
+	}
+
+	let name = $state('');
+	let email = $state('');
+	let message = $state('');
+
+	const {
+		class: className,
+		title = 'Get in touch',
+		description = 'Have a question? We would love to hear from you.',
+		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 py-16 px-4 sm:px-6', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div class="grid grid-cols-1 gap-12 sm:grid-cols-2">
+			<div>
+				<h2 class="text-3xl font-bold">{title}</h2>
+				<p class="mt-4 text-muted-foreground">{description}</p>
+
+				<div class="mt-12 space-y-6">
+					<div class="flex gap-4">
+						<div class="h-6 w-6 text-muted-foreground flex-shrink-0">
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+								<path
+									d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
+								/>
+								<polyline points="22,6 12,13 2,6" />
+							</svg>
+						</div>
+						<div>
+							<p class="font-semibold">Email</p>
+							<p class="text-muted-foreground">hello@example.com</p>
+						</div>
+					</div>
+
+					<div class="flex gap-4">
+						<div class="h-6 w-6 text-muted-foreground flex-shrink-0">
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+								<path
+									d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 10.5 19.79 19.79 0 0 1 1.56 2.18 2 2 0 0 1 3.53 0h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 7.91a16 16 0 0 0 6.16 6.16l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"
+								/>
+							</svg>
+						</div>
+						<div>
+							<p class="font-semibold">Phone</p>
+							<p class="text-muted-foreground">+1 (555) 000-0000</p>
+						</div>
+					</div>
+
+					<div class="flex gap-4">
+						<div class="h-6 w-6 text-muted-foreground flex-shrink-0">
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+								<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>
+						</div>
+						<div>
+							<p class="font-semibold">Address</p>
+							<p class="text-muted-foreground">123 Main St, City, State 12345</p>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<form class="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>
+</section>

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

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		onSubmit?: (data: any) => void;
+	}
+
+	let name = $state('');
+	let email = $state('');
+	let message = $state('');
+
+	const {
+		class: className,
+		title = 'Get in touch',
+		description = 'We would love to hear from you. Send us a message and we will respond as soon as possible.',
+		onSubmit
+	}: Props = $props();
+
+	function handleSubmit() {
+		if (onSubmit && name && email && message) {
+			onSubmit({ name, email, message });
+			name = '';
+			email = '';
+			message = '';
+		}
+	}
+</script>
+
+<section class={cn('w-full bg-foreground text-background py-16 px-4 sm:px-6', className)}>
+	<div class="mx-auto max-w-lg text-center">
+		<h2 class="text-3xl font-bold">{title}</h2>
+		<p class="mt-4 text-background/80">{description}</p>
+
+		<form class="mt-8 space-y-4" onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
+			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+				<input
+					type="text"
+					placeholder="Your name"
+					bind:value={name}
+					class="rounded-lg bg-background/10 border border-background/20 px-4 py-2 text-background placeholder:text-background/40 focus:outline-none focus:ring-2 focus:ring-background/30"
+				/>
+				<input
+					type="email"
+					placeholder="your@email.com"
+					bind:value={email}
+					class="rounded-lg bg-background/10 border border-background/20 px-4 py-2 text-background placeholder:text-background/40 focus:outline-none focus:ring-2 focus:ring-background/30"
+				/>
+			</div>
+
+			<textarea
+				placeholder="Your message"
+				bind:value={message}
+				rows={5}
+				class="w-full rounded-lg bg-background/10 border border-background/20 px-4 py-2 text-background placeholder:text-background/40 focus:outline-none focus:ring-2 focus:ring-background/30"
+			/>
+
+			<Button type="submit" variant="secondary" class="w-full">Send message</Button>
+		</form>
+	</div>
+</section>

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		email?: string;
+		eyebrow?: string;
+	}
+
+	const {
+		class: className,
+		title = 'Get in touch',
+		email = 'hello@example.com',
+		eyebrow = 'Get in touch'
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background py-24 px-4 text-center', className)}>
+	<div class="mx-auto">
+		<p class="text-sm font-semibold text-muted-foreground uppercase tracking-wide">{eyebrow}</p>
+		<h2 class="mt-4 text-4xl sm:text-5xl font-bold">{title}</h2>
+		<a
+			href="mailto:{email}"
+			class="mt-4 text-2xl text-muted-foreground hover:text-foreground underline underline-offset-4 block transition-colors"
+		>
+			{email}
+		</a>
+	</div>
+</section>