@xbg.solutions/create-frontend 1.1.2 → 1.2.0

package/src/registry/blocks/checkout/Checkout03.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+	}
+
+	const { class: className }: Props = $props();
+
+	let cardNumber = $state('');
+	let cardholderName = $state('John Doe');
+	let expiryMonth = $state('');
+	let expiryYear = $state('');
+	let cvv = $state('');
+
+	const totalAmount = 154.99;
+
+	function LockIcon() {
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>`;
+	}
+
+	function formatCardNumber(value: string): string {
+		const v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
+		const matches = v.match(/\d{4,16}/g);
+		const match = (matches && matches[0]) || '';
+		const parts = [];
+
+		for (let i = 0, len = match.length; i < len; i += 4) {
+			parts.push(match.substring(i, i + 4));
+		}
+
+		if (parts.length) {
+			return parts.join(' ');
+		} else {
+			return value;
+		}
+	}
+
+	function handleCardInput(e: Event) {
+		const input = e.target as HTMLInputElement;
+		cardNumber = formatCardNumber(input.value);
+	}
+</script>
+
+<div class={cn('space-y-8', className)}>
+	<div>
+		<h1 class="text-3xl font-bold">Payment</h1>
+		<p class="text-muted-foreground mt-2">Enter your payment details to complete your order</p>
+	</div>
+
+	<div class="grid gap-8 lg:grid-cols-3">
+		<!-- Payment Form -->
+		<div class="lg:col-span-2">
+			<div class="rounded-lg border bg-background p-8 space-y-6">
+				<!-- Card Preview -->
+				<div class="rounded-lg bg-gradient-to-br from-slate-900 to-slate-700 p-8 text-white aspect-video flex flex-col justify-between">
+					<div class="text-lg font-light tracking-widest">
+						{cardNumber || '•••• •••• •••• ••••'}
+					</div>
+					<div class="flex justify-between items-end">
+						<div>
+							<p class="text-xs opacity-75 mb-1">Card holder</p>
+							<p class="font-semibold">{cardholderName || 'YOUR NAME'}</p>
+						</div>
+						<div class="text-right">
+							<p class="text-xs opacity-75 mb-1">Expires</p>
+							<p class="font-semibold">{expiryMonth || 'MM'}/{expiryYear || 'YY'}</p>
+						</div>
+					</div>
+				</div>
+
+				<!-- Form Fields -->
+				<div class="space-y-4">
+					<div>
+						<label class="block text-sm font-medium mb-2">Card number</label>
+						<input
+							type="text"
+							value={cardNumber}
+							onchange={handleCardInput}
+							oninput={handleCardInput}
+							placeholder="1234 5678 9012 3456"
+							maxlength="19"
+							class="w-full rounded-md border bg-background px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-ring font-mono"
+						/>
+					</div>
+
+					<div>
+						<label class="block text-sm font-medium mb-2">Cardholder name</label>
+						<input
+							type="text"
+							bind:value={cardholderName}
+							placeholder="Full name"
+							class="w-full rounded-md border bg-background px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-ring"
+						/>
+					</div>
+
+					<div class="grid grid-cols-3 gap-4">
+						<div>
+							<label class="block text-sm font-medium mb-2">Month</label>
+							<input
+								type="text"
+								bind:value={expiryMonth}
+								placeholder="MM"
+								maxlength="2"
+								class="w-full rounded-md border bg-background px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-ring"
+							/>
+						</div>
+						<div>
+							<label class="block text-sm font-medium mb-2">Year</label>
+							<input
+								type="text"
+								bind:value={expiryYear}
+								placeholder="YY"
+								maxlength="2"
+								class="w-full rounded-md border bg-background px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-ring"
+							/>
+						</div>
+						<div>
+							<label class="block text-sm font-medium mb-2">CVV</label>
+							<input
+								type="text"
+								bind:value={cvv}
+								placeholder="•••"
+								maxlength="4"
+								class="w-full rounded-md border bg-background px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-ring font-mono"
+							/>
+						</div>
+					</div>
+
+					<div class="flex items-center gap-2 p-3 rounded-lg bg-green-50 border border-green-200">
+						<div class="text-green-600">
+							{@html LockIcon()}
+						</div>
+						<p class="text-sm text-green-700">Secured by SSL encryption</p>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Order Summary -->
+		<div class="lg:col-span-1">
+			<div class="rounded-lg border bg-background p-6 sticky top-6 space-y-6">
+				<div>
+					<h2 class="text-lg font-semibold mb-4">Order Summary</h2>
+
+					<div class="space-y-3 mb-4 text-sm">
+						<div class="flex justify-between">
+							<span class="text-muted-foreground">Wireless Headphones x 1</span>
+							<span>$129.99</span>
+						</div>
+						<div class="flex justify-between">
+							<span class="text-muted-foreground">Phone Case x 1</span>
+							<span>$24.99</span>
+						</div>
+					</div>
+
+					<div class="border-t pt-4 space-y-2 text-sm">
+						<div class="flex justify-between">
+							<span class="text-muted-foreground">Subtotal</span>
+							<span>$154.98</span>
+						</div>
+						<div class="flex justify-between">
+							<span class="text-muted-foreground">Shipping</span>
+							<span>FREE</span>
+						</div>
+						<div class="flex justify-between">
+							<span class="text-muted-foreground">Tax</span>
+							<span>$15.01</span>
+						</div>
+					</div>
+
+					<div class="border-t mt-4 pt-4 flex justify-between font-semibold text-base">
+						<span>Total</span>
+						<span>${totalAmount.toFixed(2)}</span>
+					</div>
+				</div>
+
+				<Button class="w-full" size="lg">
+					Pay ${totalAmount.toFixed(2)}
+				</Button>
+
+				<p class="text-xs text-muted-foreground text-center">
+					Your payment information is safe and secure
+				</p>
+			</div>
+		</div>
+	</div>
+</div>

package/src/registry/blocks/checkout/Checkout04.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+	}
+
+	const { class: className }: Props = $props();
+
+	const orderNumber = 'ORD-2024-789456';
+	const estimatedDelivery = 'April 5, 2026';
+	const orderDate = 'March 31, 2026';
+
+	function CheckmarkIcon() {
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
+	}
+</script>
+
+<div class={cn('flex flex-col items-center justify-center min-h-screen bg-background px-4', className)}>
+	<div class="w-full max-w-2xl text-center space-y-8">
+		<!-- Checkmark Circle -->
+		<div class="flex justify-center">
+			<div class="w-32 h-32 rounded-full bg-green-100 flex items-center justify-center text-green-600">
+				{@html CheckmarkIcon()}
+			</div>
+		</div>
+
+		<!-- Confirmation Message -->
+		<div class="space-y-2">
+			<h1 class="text-4xl font-bold">Order Confirmed</h1>
+			<p class="text-muted-foreground text-lg">Thank you for your purchase!</p>
+		</div>
+
+		<!-- Order Details -->
+		<div class="rounded-lg border bg-background p-8 space-y-6 text-left">
+			<div class="grid grid-cols-2 gap-4">
+				<div>
+					<p class="text-sm text-muted-foreground mb-1">Order number</p>
+					<p class="text-lg font-semibold font-mono">{orderNumber}</p>
+				</div>
+				<div>
+					<p class="text-sm text-muted-foreground mb-1">Order date</p>
+					<p class="text-lg font-semibold">{orderDate}</p>
+				</div>
+			</div>
+
+			<!-- Items Summary -->
+			<div class="border-t pt-6">
+				<h2 class="font-semibold mb-4">Order Items</h2>
+				<div class="space-y-3">
+					<div class="flex justify-between py-2">
+						<span>Wireless Headphones x 1</span>
+						<span class="font-semibold">$129.99</span>
+					</div>
+					<div class="flex justify-between py-2">
+						<span>Phone Case x 1</span>
+						<span class="font-semibold">$24.99</span>
+					</div>
+				</div>
+			</div>
+
+			<!-- Totals -->
+			<div class="border-t pt-6 space-y-2">
+				<div class="flex justify-between text-muted-foreground">
+					<span>Subtotal</span>
+					<span>$154.98</span>
+				</div>
+				<div class="flex justify-between text-muted-foreground">
+					<span>Shipping</span>
+					<span>FREE</span>
+				</div>
+				<div class="flex justify-between text-muted-foreground">
+					<span>Tax</span>
+					<span>$15.01</span>
+				</div>
+				<div class="flex justify-between font-semibold text-lg border-t pt-2 mt-2">
+					<span>Total paid</span>
+					<span>$154.99</span>
+				</div>
+			</div>
+
+			<!-- Delivery Info -->
+			<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
+				<p class="text-sm text-blue-900">
+					<span class="font-semibold">Estimated delivery:</span> {estimatedDelivery}
+				</p>
+				<p class="text-sm text-blue-800 mt-1">
+					A tracking link will be sent to your email shortly.
+				</p>
+			</div>
+		</div>
+
+		<!-- Action Buttons -->
+		<div class="flex flex-col sm:flex-row gap-4 justify-center">
+			<Button size="lg">
+				Track your order
+			</Button>
+			<Button variant="outline" size="lg">
+				Continue shopping
+			</Button>
+		</div>
+
+		<!-- Confirmation Email -->
+		<p class="text-sm text-muted-foreground">
+			A confirmation email has been sent to <span class="font-semibold">customer@example.com</span>
+		</p>
+	</div>
+</div>

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

@@ -0,0 +1,4 @@
+export { default as Checkout01 } from './Checkout01.svelte';
+export { default as Checkout02 } from './Checkout02.svelte';
+export { default as Checkout03 } from './Checkout03.svelte';
+export { default as Checkout04 } from './Checkout04.svelte';

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

@@ -0,0 +1,116 @@
+<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-background py-16 px-4 sm:px-6', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div class="text-center mb-12">
+			<p class="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+				Comparison Section
+			</p>
+			<h2 class="mt-2 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-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">{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/ComparisonSection02.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Feature {
+		name: string;
+		starter: string | boolean;
+		pro: string | boolean;
+		enterprise: string | boolean;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		features?: Feature[];
+	}
+
+	const defaultFeatures: Feature[] = [
+		{ name: 'Projects', starter: '5', pro: 'Unlimited', enterprise: 'Unlimited' },
+		{ name: 'Storage', starter: '10GB', pro: '100GB', enterprise: 'Unlimited' },
+		{ name: 'Support', starter: 'Email', pro: 'Priority', enterprise: 'Dedicated' },
+		{ name: 'API', starter: false, pro: true, enterprise: true },
+		{ name: 'Custom Domain', starter: false, pro: true, enterprise: true },
+		{ name: 'SSO', starter: false, pro: false, enterprise: true }
+	];
+
+	const {
+		class: className,
+		title = 'Feature Comparison',
+		features = defaultFeatures
+	}: Props = $props();
+
+	function renderValue(value: string | boolean) {
+		if (typeof value === 'boolean') {
+			if (value) {
+				return `<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>`;
+			} else {
+				return `<svg class="h-4 w-4 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>`;
+			}
+		}
+		return value;
+	}
+</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>
+			<p class="mt-4 text-muted-foreground">Compare all features across plans.</p>
+		</div>
+
+		<div class="overflow-x-auto">
+			<table class="w-full mt-8 text-sm">
+				<thead class="border-b">
+					<tr>
+						<th class="text-left py-4 px-4 font-semibold">Feature</th>
+						<th class="text-center py-4 px-4 font-semibold">Starter</th>
+						<th class="text-center py-4 px-4 font-semibold">Pro</th>
+						<th class="text-center py-4 px-4 font-semibold">Enterprise</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each features as feature}
+						<tr class="border-b hover:bg-muted/50">
+							<td class="py-4 px-4">{feature.name}</td>
+							<td class="py-4 px-4 text-center">
+								{#if typeof feature.starter === 'boolean'}
+									<div class="flex justify-center">
+										{@html renderValue(feature.starter)}
+									</div>
+								{:else}
+									{feature.starter}
+								{/if}
+							</td>
+							<td class="py-4 px-4 text-center">
+								{#if typeof feature.pro === 'boolean'}
+									<div class="flex justify-center">
+										{@html renderValue(feature.pro)}
+									</div>
+								{:else}
+									{feature.pro}
+								{/if}
+							</td>
+							<td class="py-4 px-4 text-center">
+								{#if typeof feature.enterprise === 'boolean'}
+									<div class="flex justify-center">
+										{@html renderValue(feature.enterprise)}
+									</div>
+								{:else}
+									{feature.enterprise}
+								{/if}
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		beforeTitle?: string;
+		afterTitle?: string;
+		beforePoints?: string[];
+		afterPoints?: string[];
+	}
+
+	let showAfter = $state(false);
+
+	const {
+		class: className,
+		beforeTitle = 'Before',
+		afterTitle = 'After',
+		beforePoints = [
+			'Manual processes taking hours',
+			'Scattered data across systems',
+			'Limited visibility into progress'
+		],
+		afterPoints = [
+			'Automated workflows save time',
+			'Centralized data repository',
+			'Real-time insights and reporting'
+		]
+	}: 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">See the difference</h2>
+
+			<div class="mt-8 flex items-center justify-center gap-4">
+				<p class={cn('text-sm font-semibold', !showAfter ? 'text-foreground' : 'text-muted-foreground')}>
+					Before
+				</p>
+				<button
+					onclick={() => (showAfter = !showAfter)}
+					class={cn(
+						'relative inline-flex h-8 w-14 items-center rounded-full transition-colors',
+						showAfter ? 'bg-foreground' : 'bg-muted'
+					)}
+				>
+					<span
+						class={cn(
+							'inline-block h-6 w-6 transform rounded-full bg-background transition-transform',
+							showAfter ? 'translate-x-7' : 'translate-x-1'
+						)}
+					/>
+				</button>
+				<p class={cn('text-sm font-semibold', showAfter ? 'text-foreground' : 'text-muted-foreground')}>
+					After
+				</p>
+			</div>
+		</div>
+
+		<div class="space-y-6">
+			{#if !showAfter}
+				<div class="rounded-xl border border-red-200 bg-red-50/50 p-6">
+					<h3 class="font-semibold text-red-900">{beforeTitle}</h3>
+					<ul class="mt-4 space-y-2">
+						{#each beforePoints as point}
+							<li class="flex items-start gap-3">
+								<svg class="h-5 w-5 text-red-600 flex-shrink-0 mt-0.5" viewBox="0 0 24 24">
+									<line x1="18" y1="6" x2="6" y2="18" />
+									<line x1="6" y1="6" x2="18" y2="18" />
+								</svg>
+								<span class="text-red-900">{point}</span>
+							</li>
+						{/each}
+					</ul>
+				</div>
+			{:else}
+				<div class="rounded-xl border border-green-200 bg-green-50/50 p-6">
+					<h3 class="font-semibold text-green-900">{afterTitle}</h3>
+					<ul class="mt-4 space-y-2">
+						{#each afterPoints as point}
+							<li class="flex items-start gap-3">
+								<svg class="h-5 w-5 text-green-600 flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+									<polyline points="20 6 9 17 4 12" />
+								</svg>
+								<span class="text-green-900">{point}</span>
+							</li>
+						{/each}
+					</ul>
+				</div>
+			{/if}
+		</div>
+	</div>
+</section>