@xbg.solutions/create-frontend 1.1.1 → 1.2.0

package/src/registry/blocks/pricing-section/PricingSection01.svelte

@@ -0,0 +1,109 @@
+<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[];
+		ctaLabel?: string;
+		highlighted?: boolean;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		plans?: PricingPlan[];
+	}
+
+	const defaultPlans: PricingPlan[] = [
+		{
+			name: 'Free',
+			price: '$0',
+			period: '/month',
+			description: 'Perfect for getting started',
+			features: ['5 projects', '10GB storage', 'Basic analytics', 'Email support'],
+			ctaLabel: 'Get started'
+		},
+		{
+			name: 'Pro',
+			price: '$29',
+			period: '/month',
+			description: 'Everything you need to grow',
+			features: ['Unlimited projects', '1TB storage', 'Advanced analytics', 'Priority support'],
+			ctaLabel: 'Start free trial',
+			highlighted: true
+		},
+		{
+			name: 'Enterprise',
+			price: '$99',
+			period: '/month',
+			description: 'For large-scale operations',
+			features: ['Unlimited everything', 'Custom storage', 'Custom integrations', '24/7 support'],
+			ctaLabel: 'Contact sales'
+		}
+	];
+
+	let { class: customClass = '', title = 'Simple, transparent pricing', description = '', plans = defaultPlans }: Props = $props();
+
+	const checkIcon = `<polyline points="20 6 9 17 4 12"/>`;
+</script>
+
+<section class={cn('w-full py-16 px-4 sm:px-6', customClass)}>
+	<div class="mx-auto max-w-7xl">
+		<div class="text-center mb-12">
+			<p class="text-sm font-semibold text-foreground/60 mb-2">Pricing Section</p>
+			<h2 class="text-3xl sm:text-4xl font-bold mb-4">{title}</h2>
+			{#if description}
+				<p class="text-lg text-muted-foreground max-w-2xl mx-auto">{description}</p>
+			{/if}
+		</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 flex flex-col',
+					plan.highlighted
+						? 'border-foreground ring-2 ring-foreground bg-background'
+						: 'bg-background'
+				)}>
+					{#if plan.highlighted}
+						<div class="mb-4 inline-flex items-center rounded-full bg-foreground px-3 py-1 text-xs font-semibold text-background w-fit">
+							Most popular
+						</div>
+					{/if}
+
+					<h3 class="text-lg font-semibold mb-2">{plan.name}</h3>
+					{#if plan.description}
+						<p class="text-sm text-muted-foreground mb-4">{plan.description}</p>
+					{/if}
+
+					<div class="mb-6">
+						<span class="text-4xl font-bold">{plan.price}</span>
+						{#if plan.period}
+							<span class="text-muted-foreground ml-1">{plan.period}</span>
+						{/if}
+					</div>
+
+					<ul class="space-y-3 mb-6 flex-grow">
+						{#each plan.features as feature}
+							<li class="flex items-start gap-3">
+								<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-foreground flex-shrink-0 mt-0.5">
+									{checkIcon}
+								</svg>
+								<span class="text-sm">{feature}</span>
+							</li>
+						{/each}
+					</ul>
+
+					<Button class="w-full" variant={plan.highlighted ? 'default' : 'outline'}>
+						{plan.ctaLabel || 'Get started'}
+					</Button>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/pricing-section/PricingSection02.svelte

@@ -0,0 +1,145 @@
+<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[];
+		ctaLabel?: string;
+		highlighted?: boolean;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		plans?: PricingPlan[];
+	}
+
+	const defaultPlans: PricingPlan[] = [
+		{
+			name: 'Free',
+			price: '$0',
+			period: '/month',
+			features: ['5 projects', '10GB storage', 'Basic analytics', 'Email support'],
+			ctaLabel: 'Get started'
+		},
+		{
+			name: 'Pro',
+			price: '$29',
+			period: '/month',
+			features: ['Unlimited projects', '1TB storage', 'Advanced analytics', 'Priority support'],
+			ctaLabel: 'Start free trial',
+			highlighted: true
+		},
+		{
+			name: 'Enterprise',
+			price: '$99',
+			period: '/month',
+			features: ['Everything unlimited', 'Custom integrations', '24/7 support'],
+			ctaLabel: 'Contact sales'
+		}
+	];
+
+	let { class: customClass = '', title = 'Simple, transparent pricing', description = '', plans = defaultPlans }: Props = $props();
+
+	let billing: 'monthly' | 'annual' = $state('monthly');
+
+	const checkIcon = `<polyline points="20 6 9 17 4 12"/>`;
+
+	function getPrice(plan: PricingPlan): string {
+		if (billing === 'annual') {
+			const monthlyPrice = parseFloat(plan.price.replace('$', ''));
+			const annualMonthly = Math.round(monthlyPrice * 12 * 0.8);
+			return '$' + annualMonthly;
+		}
+		return plan.price;
+	}
+</script>
+
+<section class={cn('w-full py-16 px-4 sm:px-6', customClass)}>
+	<div class="mx-auto max-w-7xl">
+		<div class="text-center mb-12">
+			<p class="text-sm font-semibold text-foreground/60 mb-2">Pricing Section</p>
+			<h2 class="text-3xl sm:text-4xl font-bold mb-4">{title}</h2>
+			{#if description}
+				<p class="text-lg text-muted-foreground max-w-2xl mx-auto">{description}</p>
+			{/if}
+		</div>
+
+		<!-- Billing Toggle -->
+		<div class="flex items-center justify-center gap-4 mb-12">
+			<button
+				onclick={() => { billing = 'monthly'; }}
+				class={cn(
+					'px-4 py-2 rounded-lg font-medium transition-colors',
+					billing === 'monthly'
+						? 'bg-foreground text-background'
+						: 'text-foreground/60'
+				)}
+			>
+				Monthly
+			</button>
+			<button
+				onclick={() => { billing = 'annual'; }}
+				class={cn(
+					'px-4 py-2 rounded-lg font-medium transition-colors relative',
+					billing === 'annual'
+						? 'bg-foreground text-background'
+						: 'text-foreground/60'
+				)}
+			>
+				Annual
+				{#if billing === 'annual'}
+					<span class="absolute -top-2 -right-8 inline-flex items-center rounded-full bg-green-500 px-2 py-1 text-xs font-semibold text-white">
+						Save 20%
+					</span>
+				{/if}
+			</button>
+		</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 flex flex-col',
+					plan.highlighted
+						? 'border-foreground ring-2 ring-foreground bg-background'
+						: 'bg-background'
+				)}>
+					{#if plan.highlighted}
+						<div class="mb-4 inline-flex items-center rounded-full bg-foreground px-3 py-1 text-xs font-semibold text-background w-fit">
+							Most popular
+						</div>
+					{/if}
+
+					<h3 class="text-lg font-semibold mb-2">{plan.name}</h3>
+
+					<div class="mb-6">
+						<span class="text-4xl font-bold">{getPrice(plan)}</span>
+						{#if plan.period}
+							<span class="text-muted-foreground ml-1">{plan.period}</span>
+						{/if}
+					</div>
+
+					<ul class="space-y-3 mb-6 flex-grow">
+						{#each plan.features as feature}
+							<li class="flex items-start gap-3">
+								<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-foreground flex-shrink-0 mt-0.5">
+									{checkIcon}
+								</svg>
+								<span class="text-sm">{feature}</span>
+							</li>
+						{/each}
+					</ul>
+
+					<Button class="w-full" variant={plan.highlighted ? 'default' : 'outline'}>
+						{plan.ctaLabel || 'Get started'}
+					</Button>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/pricing-section/PricingSection03.svelte

@@ -0,0 +1,94 @@
+<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[];
+		ctaLabel?: string;
+		highlighted?: boolean;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		plans?: PricingPlan[];
+	}
+
+	const defaultPlans: PricingPlan[] = [
+		{
+			name: 'Pro',
+			price: '$29',
+			period: '/month',
+			description: 'Everything you need to grow',
+			features: ['Unlimited projects', '1TB storage', 'Advanced analytics', 'Priority support', 'Custom integrations'],
+			ctaLabel: 'Start free trial',
+			highlighted: true
+		}
+	];
+
+	let { class: customClass = '', title = 'Simple, transparent pricing', description = '', plans = defaultPlans }: Props = $props();
+
+	const checkIcon = `<polyline points="20 6 9 17 4 12"/>`;
+	const proPlan = plans[0];
+</script>
+
+<section class={cn('w-full py-16 px-4 sm:px-6', customClass)}>
+	<div class="mx-auto max-w-7xl">
+		<div class="text-center mb-12">
+			<p class="text-sm font-semibold text-foreground/60 mb-2">Pricing Section</p>
+			<h2 class="text-3xl sm:text-4xl font-bold mb-4">{title}</h2>
+			{#if description}
+				<p class="text-lg text-muted-foreground max-w-2xl mx-auto">{description}</p>
+			{/if}
+		</div>
+
+		<!-- Featured Plan Card -->
+		{#if proPlan}
+			<div class="mt-10 mx-auto max-w-lg">
+				<div class="rounded-xl border-2 border-foreground ring-2 ring-foreground bg-background p-8">
+					<div class="inline-flex items-center rounded-full bg-foreground px-3 py-1 text-xs font-semibold text-background mb-4">
+						Most popular
+					</div>
+
+					<h3 class="text-2xl font-semibold mb-2">{proPlan.name}</h3>
+
+					<div class="mb-6">
+						<span class="text-5xl font-bold">{proPlan.price}</span>
+						{#if proPlan.period}
+							<span class="text-muted-foreground ml-2">{proPlan.period}</span>
+						{/if}
+					</div>
+
+					<ul class="space-y-3 mb-8">
+						{#each proPlan.features as feature}
+							<li class="flex items-start gap-3">
+								<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-foreground flex-shrink-0 mt-0.5">
+									{checkIcon}
+								</svg>
+								<span class="text-sm">{feature}</span>
+							</li>
+						{/each}
+					</ul>
+
+					<Button class="w-full mb-6">
+						{proPlan.ctaLabel || 'Get started'}
+					</Button>
+
+					<p class="text-center text-sm text-muted-foreground">30-day free trial, no credit card required.</p>
+				</div>
+			</div>
+
+			<!-- Compare link -->
+			<div class="mt-8 text-center">
+				<a href="#" class="text-sm font-semibold text-foreground hover:underline">
+					Compare all plans →
+				</a>
+			</div>
+		{/if}
+	</div>
+</section>

package/src/registry/blocks/pricing-section/PricingSection04.svelte

@@ -0,0 +1,103 @@
+<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[];
+		ctaLabel?: string;
+		highlighted?: boolean;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		plans?: PricingPlan[];
+	}
+
+	const defaultPlans: PricingPlan[] = [
+		{
+			name: 'Free',
+			price: '$0',
+			period: '/month',
+			features: ['5 projects', '10GB storage', 'Basic analytics'],
+			ctaLabel: 'Get started'
+		},
+		{
+			name: 'Pro',
+			price: '$29',
+			period: '/month',
+			features: ['Unlimited projects', '1TB storage', 'Advanced analytics'],
+			ctaLabel: 'Start free trial',
+			highlighted: true
+		},
+		{
+			name: 'Enterprise',
+			price: '$99',
+			period: '/month',
+			features: ['Everything unlimited', 'Custom integrations', '24/7 support'],
+			ctaLabel: 'Contact sales'
+		}
+	];
+
+	let { class: customClass = '', title = 'Simple, transparent pricing', description = '', plans = defaultPlans }: Props = $props();
+
+	const checkIcon = `<polyline points="20 6 9 17 4 12"/>`;
+</script>
+
+<section class={cn('w-full bg-foreground text-background py-16 px-4 sm:px-6', customClass)}>
+	<div class="mx-auto max-w-7xl">
+		<div class="text-center mb-12">
+			<p class="text-sm font-semibold text-background/60 mb-2">Pricing Section</p>
+			<h2 class="text-3xl sm:text-4xl font-bold mb-4">{title}</h2>
+			{#if description}
+				<p class="text-lg text-background/80 max-w-2xl mx-auto">{description}</p>
+			{/if}
+		</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 flex flex-col',
+					plan.highlighted
+						? 'border-background ring-2 ring-background bg-background/5'
+						: 'bg-background/10 border-background/20'
+				)}>
+					{#if plan.highlighted}
+						<div class="mb-4 inline-flex items-center rounded-full bg-background px-3 py-1 text-xs font-semibold text-foreground w-fit">
+							Most popular
+						</div>
+					{/if}
+
+					<h3 class="text-lg font-semibold mb-2">{plan.name}</h3>
+
+					<div class="mb-6">
+						<span class="text-4xl font-bold">{plan.price}</span>
+						{#if plan.period}
+							<span class="text-background/60 ml-1">{plan.period}</span>
+						{/if}
+					</div>
+
+					<ul class="space-y-3 mb-6 flex-grow">
+						{#each plan.features as feature}
+							<li class="flex items-start gap-3">
+								<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-background flex-shrink-0 mt-0.5">
+									{checkIcon}
+								</svg>
+								<span class="text-sm">{feature}</span>
+							</li>
+						{/each}
+					</ul>
+
+					<Button class="w-full" variant={plan.highlighted ? 'default' : 'outline'}>
+						{plan.ctaLabel || 'Get started'}
+					</Button>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/pricing-section/PricingSection05.svelte

@@ -0,0 +1,128 @@
+<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[];
+		ctaLabel?: string;
+		highlighted?: boolean;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		plans?: PricingPlan[];
+	}
+
+	const defaultPlans: PricingPlan[] = [
+		{
+			name: 'Free',
+			price: '$0',
+			features: ['5 projects', '10GB storage', 'Basic analytics', 'Email support'],
+			ctaLabel: 'Get started'
+		},
+		{
+			name: 'Pro',
+			price: '$29',
+			period: '/month',
+			features: ['Unlimited projects', '1TB storage', 'Advanced analytics', 'Priority support'],
+			ctaLabel: 'Start free trial',
+			highlighted: true
+		}
+	];
+
+	let { class: customClass = '', title = 'Plans & Comparison', description = '', plans = defaultPlans }: Props = $props();
+
+	const checkIcon = `<polyline points="20 6 9 17 4 12"/>`;
+	const allFeatures = ['Projects', 'Storage', 'Analytics', 'Support', 'API Access', 'Integrations'];
+</script>
+
+<section class={cn('w-full py-16 px-4 sm:px-6', customClass)}>
+	<div class="mx-auto max-w-7xl">
+		<div class="text-center mb-12">
+			<p class="text-sm font-semibold text-foreground/60 mb-2">Pricing Section</p>
+			<h2 class="text-3xl sm:text-4xl font-bold mb-4">{title}</h2>
+			{#if description}
+				<p class="text-lg text-muted-foreground max-w-2xl mx-auto">{description}</p>
+			{/if}
+		</div>
+
+		<!-- Cards -->
+		<div class="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 mb-12">
+			{#each plans as plan}
+				<div class={cn(
+					'rounded-xl border p-6 flex flex-col',
+					plan.highlighted
+						? 'border-foreground ring-2 ring-foreground bg-background'
+						: 'bg-background'
+				)}>
+					{#if plan.highlighted}
+						<div class="mb-4 inline-flex items-center rounded-full bg-foreground px-3 py-1 text-xs font-semibold text-background w-fit">
+							Most popular
+						</div>
+					{/if}
+
+					<h3 class="text-lg font-semibold mb-2">{plan.name}</h3>
+
+					<div class="mb-6">
+						<span class="text-4xl font-bold">{plan.price}</span>
+						{#if plan.period}
+							<span class="text-muted-foreground ml-1">{plan.period}</span>
+						{/if}
+					</div>
+
+					<ul class="space-y-3 mb-6 flex-grow">
+						{#each plan.features as feature}
+							<li class="flex items-start gap-3">
+								<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-foreground flex-shrink-0 mt-0.5">
+									{checkIcon}
+								</svg>
+								<span class="text-sm">{feature}</span>
+							</li>
+						{/each}
+					</ul>
+
+					<Button class="w-full" variant={plan.highlighted ? 'default' : 'outline'}>
+						{plan.ctaLabel || 'Get started'}
+					</Button>
+				</div>
+			{/each}
+		</div>
+
+		<!-- Feature Comparison Table -->
+		<div class="border-t pt-12">
+			<h3 class="text-xl font-semibold mb-6 text-center">Detailed Comparison</h3>
+			<div class="overflow-x-auto">
+				<table class="w-full text-sm">
+					<thead>
+						<tr class="border-b">
+							<th class="text-left py-3 px-4 font-semibold">Feature</th>
+							{#each plans.slice(0, 2) as plan}
+								<th class="text-center py-3 px-4 font-semibold">{plan.name}</th>
+							{/each}
+						</tr>
+					</thead>
+					<tbody>
+						{#each allFeatures as feature}
+							<tr class="border-b hover:bg-muted/30">
+								<td class="text-left py-3 px-4">{feature}</td>
+								{#each plans.slice(0, 2) as plan}
+									<td class="text-center py-3 px-4">
+										<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mx-auto text-foreground">
+											{checkIcon}
+										</svg>
+									</td>
+								{/each}
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,20 @@
+export { default as PricingSection01 } from './PricingSection01.svelte';
+export { default as PricingSection02 } from './PricingSection02.svelte';
+export { default as PricingSection03 } from './PricingSection03.svelte';
+export { default as PricingSection04 } from './PricingSection04.svelte';
+export { default as PricingSection05 } from './PricingSection05.svelte';
+
+export interface PricingPlan {
+	name: string;
+	price: string;
+	period?: string;
+	description?: string;
+	features: string[];
+	ctaLabel?: string;
+	highlighted?: boolean;
+}
+
+export interface FAQ {
+	q: string;
+	a: string;
+}

package/src/registry/blocks/product-card/ProductCard01.svelte

@@ -0,0 +1,74 @@
+<!--
+  ProductCard01.svelte
+  Standard e-commerce product card with image, category, name, rating, and price.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    category = 'Electronics',
+    name = 'Premium Leather Wallet',
+    rating = 4.5,
+    reviewCount = 128,
+    price = '$49.99',
+    onAddToCart = () => {}
+  }: {
+    class?: string;
+    category?: string;
+    name?: string;
+    rating?: number;
+    reviewCount?: number;
+    price?: string;
+    onAddToCart?: () => void;
+  } = $props();
+
+  function renderStars(rate: number) {
+    const stars = [];
+    for (let i = 1; i <= 5; i++) {
+      const isFilled = i <= Math.floor(rate);
+      const isHalf = i === Math.ceil(rate) && rate % 1 !== 0;
+      stars.push({ isFilled, isHalf });
+    }
+    return stars;
+  }
+</script>
+
+<div class={cn('rounded-lg border bg-background overflow-hidden', className)}>
+  <!-- Image placeholder -->
+  <div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center">
+    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-gray-400">
+      <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"/>
+    </svg>
+  </div>
+
+  <!-- Content -->
+  <div class="p-4">
+    <!-- Category -->
+    <p class="text-xs font-medium text-muted-foreground uppercase tracking-wider">{category}</p>
+
+    <!-- Name -->
+    <h3 class="mt-2 font-semibold text-sm line-clamp-2">{name}</h3>
+
+    <!-- Rating -->
+    <div class="mt-2 flex items-center gap-1">
+      <div class="flex gap-0.5">
+        {#each renderStars(rating) as star}
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill={star.isFilled ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2" class={star.isFilled ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300'}>
+            <polygon points="12 2 15.09 10.26 24 10.35 17.77 16.01 19.85 24.29 12 18.77 4.15 24.29 6.23 16.01 0 10.35 8.91 10.26"/>
+          </svg>
+        {/each}
+      </div>
+      <span class="text-xs text-muted-foreground">{rating} ({reviewCount})</span>
+    </div>
+
+    <!-- Price -->
+    <p class="mt-3 text-lg font-bold">{price}</p>
+
+    <!-- Button -->
+    <Button onclick={onAddToCart} class="mt-4 w-full">Add to cart</Button>
+  </div>
+</div>