@xbg.solutions/create-frontend 1.1.1 → 1.2.0

package/src/registry/blocks/product-reviews/ProductReviews03.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className }: Props = $props();
+
+	const reviews = [
+		{
+			id: 1,
+			author: 'John Doe',
+			date: 'Mar 15, 2024',
+			rating: 5,
+			title: 'Perfect! Great quality',
+			text: 'This product exceeded all my expectations. The build quality is outstanding and it arrived in perfect condition.',
+			images: [1, 2, 3],
+		},
+		{
+			id: 2,
+			author: 'Sarah Smith',
+			date: 'Mar 12, 2024',
+			rating: 4,
+			title: 'Good value for money',
+			text: 'Solid product at a reasonable price. Does exactly what it claims to do.',
+			images: [1, 2],
+		},
+		{
+			id: 3,
+			author: 'Mike Johnson',
+			date: 'Mar 10, 2024',
+			rating: 5,
+			title: 'Best purchase ever',
+			text: 'Absolutely love this! The quality is incredible and customer service was super helpful.',
+			images: [1, 2, 3, 4],
+		},
+	];
+</script>
+
+<section class={cn('w-full bg-background px-4 py-12 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-4xl">
+		<!-- Header -->
+		<div class="mb-8">
+			<h2 class="text-3xl font-bold">Reviews with Photos</h2>
+			<p class="text-muted-foreground">{reviews.length} reviews with images</p>
+		</div>
+
+		<!-- Reviews List -->
+		<div class="space-y-8">
+			{#each reviews as review (review.id)}
+				<div class="pb-8 border-b last:border-b-0">
+					<!-- Review Header -->
+					<div class="flex items-start gap-3 mb-4">
+						<!-- Avatar -->
+						<div class="w-12 h-12 rounded-full bg-gray-300 flex items-center justify-center flex-shrink-0">
+							<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" class="text-gray-600">
+								<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+								<circle cx="12" cy="7" r="4" />
+							</svg>
+						</div>
+
+						<!-- Review Meta -->
+						<div class="flex-1">
+							<div class="flex items-center justify-between mb-1">
+								<h4 class="font-semibold">{review.author}</h4>
+								<span class="text-sm text-muted-foreground">{review.date}</span>
+							</div>
+
+							<!-- Rating -->
+							<div class="flex gap-0.5 mb-2">
+								{#each { length: 5 } as _, i}
+									<svg
+										width="16"
+										height="16"
+										viewBox="0 0 24 24"
+										fill={i < review.rating ? 'currentColor' : 'none'}
+										stroke="currentColor"
+										stroke-width="1"
+										class={i < review.rating ? 'text-yellow-400' : 'text-gray-300'}
+									>
+										<polygon points="12 2 15.09 10.26 24 10.35 17.77 16.88 20.16 25.54 12 20.01 3.84 25.54 6.23 16.88 0 10.35 8.91 10.26" />
+									</svg>
+								{/each}
+							</div>
+						</div>
+					</div>
+
+					<!-- Review Content -->
+					<h5 class="font-semibold mb-2">{review.title}</h5>
+					<p class="text-muted-foreground mb-4">{review.text}</p>
+
+					<!-- Images -->
+					{#if review.images && review.images.length > 0}
+						<div class="mb-4">
+							<p class="text-sm font-semibold mb-2">Photos</p>
+							<div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
+								{#each review.images as image}
+									<div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center cursor-pointer hover:bg-gray-200 transition-colors">
+										<svg
+											width="24"
+											height="24"
+											viewBox="0 0 24 24"
+											fill="none"
+											stroke="currentColor"
+											stroke-width="1"
+											class="text-gray-400"
+										>
+											<rect x="3" y="3" width="18" height="18" rx="2" />
+											<circle cx="8.5" cy="8.5" r="1.5" />
+											<polyline points="21 15 16 10 5 21" />
+										</svg>
+									</div>
+								{/each}
+							</div>
+						</div>
+					{/if}
+
+					<!-- Helpful Button -->
+					<button class="text-sm text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1">
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<polyline points="20 12 20 22 4 22 4 12" />
+							<polyline points="2 7 12 2 22 7" />
+						</svg>
+						Helpful
+					</button>
+				</div>
+			{/each}
+		</div>
+
+		<!-- View All -->
+		<div class="mt-8 text-center">
+			<Button variant="outline">View All Reviews</Button>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/product-reviews/ProductReviews04.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className }: Props = $props();
+
+	const qaItems = [
+		{
+			id: 1,
+			question: 'What is the warranty period for this product?',
+			answer: 'This product comes with a 2-year manufacturer warranty covering defects in materials and workmanship.',
+			isSellerResponse: true,
+		},
+		{
+			id: 2,
+			question: 'Does this product ship internationally?',
+			answer: 'Yes, we ship to most countries worldwide. Shipping costs and delivery times vary by location. Please check your cart for specific shipping details.',
+			isSellerResponse: true,
+		},
+		{
+			id: 3,
+			question: 'Is there a size/color guide available?',
+			answer: 'A detailed size and color guide is available in the product specifications tab. You can also contact our customer service team for personalized recommendations.',
+			isSellerResponse: true,
+		},
+	];
+
+	let showAskForm = $state(false);
+	let questionTitle = $state('');
+	let questionText = $state('');
+</script>
+
+<section class={cn('w-full bg-background px-4 py-12 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-4xl">
+		<!-- Header -->
+		<div class="mb-8 flex items-center justify-between">
+			<div>
+				<h2 class="text-3xl font-bold">Questions & Answers</h2>
+				<p class="text-muted-foreground">{qaItems.length} questions answered</p>
+			</div>
+			<Button onclick={() => (showAskForm = !showAskForm)}>
+				{showAskForm ? 'Cancel' : 'Ask a Question'}
+			</Button>
+		</div>
+
+		<!-- Ask Question Form -->
+		{#if showAskForm}
+			<div class="bg-gray-50 rounded-lg p-6 mb-8">
+				<h3 class="font-semibold mb-4">Ask Your Question</h3>
+				<div class="space-y-4">
+					<div>
+						<label for="question-title" class="block text-sm font-semibold mb-2">Question Title</label>
+						<input
+							id="question-title"
+							type="text"
+							bind:value={questionTitle}
+							placeholder="What would you like to know?"
+							class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+						/>
+					</div>
+
+					<div>
+						<label for="question-text" class="block text-sm font-semibold mb-2">Details</label>
+						<textarea
+							id="question-text"
+							bind:value={questionText}
+							placeholder="Provide more context for your question"
+							rows="4"
+							class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+						/>
+					</div>
+
+					<div class="flex gap-3">
+						<Button size="sm" disabled={!questionTitle.trim()}>Submit Question</Button>
+						<Button
+							variant="outline"
+							size="sm"
+							onclick={() => {
+								showAskForm = false;
+								questionTitle = '';
+								questionText = '';
+							}}
+						>
+							Cancel
+						</Button>
+					</div>
+				</div>
+			</div>
+		{/if}
+
+		<!-- Q&A List -->
+		<div class="space-y-6">
+			{#each qaItems as item (item.id)}
+				<div class="border-b pb-6 last:border-b-0">
+					<!-- Question -->
+					<h4 class="font-semibold text-base mb-3">{item.question}</h4>
+
+					<!-- Answer -->
+					<div class="ml-4 pl-4 border-l-2 border-gray-200">
+						{#if item.isSellerResponse}
+							<p class="text-xs font-semibold text-green-700 bg-green-50 px-2 py-1 rounded w-fit mb-2">
+								Seller response
+							</p>
+						{/if}
+						<p class="text-muted-foreground">{item.answer}</p>
+					</div>
+
+					<!-- Helpful -->
+					<button class="text-sm text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1 mt-3">
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<polyline points="20 12 20 22 4 22 4 12" />
+							<polyline points="2 7 12 2 22 7" />
+						</svg>
+						Was this helpful?
+					</button>
+				</div>
+			{/each}
+		</div>
+
+		<!-- Load More -->
+		<div class="mt-8 text-center">
+			<Button variant="outline">View More Questions</Button>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/product-reviews/index.ts

@@ -0,0 +1,4 @@
+export { default as ProductReviews01 } from './ProductReviews01.svelte';
+export { default as ProductReviews02 } from './ProductReviews02.svelte';
+export { default as ProductReviews03 } from './ProductReviews03.svelte';
+export { default as ProductReviews04 } from './ProductReviews04.svelte';

package/src/registry/blocks/promo-section/PromoSection01.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		heading?: string;
+		subtitle?: string;
+	}
+
+	let { class: className, heading = 'Flash Sale', subtitle = 'Limited time offer - Save big today!' }: Props = $props();
+
+	let timeLeft = $state({
+		hours: 2,
+		minutes: 34,
+		seconds: 56,
+	});
+</script>
+
+<section
+	class={cn(
+		'w-full bg-gradient-to-r from-red-600 to-red-700 px-4 py-20 sm:px-6 lg:px-8 text-white',
+		className
+	)}
+>
+	<div class="mx-auto max-w-6xl">
+		<div class="text-center">
+			<!-- Badge -->
+			<div class="inline-block bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
+				Flash Sale
+			</div>
+
+			<!-- Heading -->
+			<h2 class="text-5xl sm:text-6xl font-bold mb-4">Up to 50% Off</h2>
+
+			<!-- Subtitle -->
+			<p class="text-lg sm:text-xl text-red-100 mb-8 max-w-2xl mx-auto">
+				{subtitle}
+			</p>
+
+			<!-- Countdown Timer -->
+			<div class="mb-8 inline-block">
+				<p class="text-sm text-red-100 mb-3">Offer ends in:</p>
+				<div class="flex gap-4 justify-center">
+					<div class="flex flex-col items-center">
+						<span class="text-4xl sm:text-5xl font-bold">{String(timeLeft.hours).padStart(2, '0')}</span>
+						<span class="text-xs sm:text-sm text-red-100 mt-1">Hours</span>
+					</div>
+					<div class="flex flex-col items-center">
+						<span class="text-4xl sm:text-5xl font-bold">:</span>
+					</div>
+					<div class="flex flex-col items-center">
+						<span class="text-4xl sm:text-5xl font-bold">{String(timeLeft.minutes).padStart(2, '0')}</span>
+						<span class="text-xs sm:text-sm text-red-100 mt-1">Minutes</span>
+					</div>
+					<div class="flex flex-col items-center">
+						<span class="text-4xl sm:text-5xl font-bold">:</span>
+					</div>
+					<div class="flex flex-col items-center">
+						<span class="text-4xl sm:text-5xl font-bold">{String(timeLeft.seconds).padStart(2, '0')}</span>
+						<span class="text-xs sm:text-sm text-red-100 mt-1">Seconds</span>
+					</div>
+				</div>
+			</div>
+
+			<!-- CTA Button -->
+			<Button size="lg" class="bg-white text-red-600 hover:bg-gray-100 font-semibold px-8">
+				Shop Now
+			</Button>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/promo-section/PromoSection02.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		heading?: string;
+	}
+
+	let { class: className, heading = 'Shop by Category' }: Props = $props();
+
+	const categories = [
+		{ id: 1, name: 'Electronics' },
+		{ id: 2, name: 'Fashion' },
+		{ id: 3, name: 'Home & Garden' },
+	];
+</script>
+
+<section class={cn('w-full bg-background px-4 py-16 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-7xl">
+		<!-- Heading -->
+		<h2 class="text-3xl sm:text-4xl font-bold mb-12 text-center">{heading}</h2>
+
+		<!-- Category Cards Grid -->
+		<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+			{#each categories as category (category.id)}
+				<div class="relative group overflow-hidden rounded-xl aspect-square">
+					<!-- Background Image Placeholder -->
+					<div class="absolute inset-0 bg-gradient-to-b from-gray-300 via-gray-200 to-gray-300 flex items-center justify-center">
+						<svg
+							width="80"
+							height="80"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="1"
+							class="text-gray-400"
+						>
+							<rect x="3" y="3" width="18" height="18" rx="2" />
+							<circle cx="8.5" cy="8.5" r="1.5" />
+							<polyline points="21 15 16 10 5 21" />
+						</svg>
+					</div>
+
+					<!-- Overlay -->
+					<div class="absolute inset-0 bg-black/40 group-hover:bg-black/50 transition-colors flex flex-col items-center justify-center text-white">
+						<!-- Category Name -->
+						<h3 class="text-3xl sm:text-4xl font-bold mb-4 text-center">{category.name}</h3>
+
+						<!-- Shop Now Link -->
+						<a
+							href="#"
+							class="inline-block px-6 py-2 bg-white text-black font-semibold rounded-lg hover:bg-gray-100 transition-colors"
+						>
+							Shop now
+						</a>
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/promo-section/PromoSection03.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		heading?: string;
+	}
+
+	let { class: className, heading = 'Join Our Loyalty Program' }: Props = $props();
+
+	let email = $state('');
+</script>
+
+<section class={cn('w-full bg-background px-4 py-16 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div class="grid grid-cols-1 gap-8 lg:grid-cols-2 items-center">
+			<!-- Left Section -->
+			<div class="bg-gray-950 text-white rounded-xl p-8 sm:p-12">
+				<h2 class="text-3xl sm:text-4xl font-bold mb-6">{heading}</h2>
+
+				<!-- Benefits List -->
+				<ul class="space-y-4">
+					<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-green-400 mt-1 flex-shrink-0"
+						>
+							<polyline points="20 6 9 17 4 12" />
+						</svg>
+						<span>Free shipping on all orders</span>
+					</li>
+					<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-green-400 mt-1 flex-shrink-0"
+						>
+							<polyline points="20 6 9 17 4 12" />
+						</svg>
+						<span>Exclusive members-only deals</span>
+					</li>
+					<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-green-400 mt-1 flex-shrink-0"
+						>
+							<polyline points="20 6 9 17 4 12" />
+						</svg>
+						<span>Earn points on every purchase</span>
+					</li>
+					<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-green-400 mt-1 flex-shrink-0"
+						>
+							<polyline points="20 6 9 17 4 12" />
+						</svg>
+						<span>Priority customer support</span>
+					</li>
+				</ul>
+			</div>
+
+			<!-- Right Section -->
+			<div class="flex flex-col">
+				<h3 class="text-2xl font-semibold mb-4">Sign Up Today</h3>
+				<p class="text-muted-foreground mb-6">Get exclusive offers and discounts delivered to your inbox</p>
+
+				<!-- Form -->
+				<form class="space-y-4">
+					<div>
+						<label for="email" class="block text-sm font-semibold mb-2">Email Address</label>
+						<input
+							id="email"
+							type="email"
+							bind:value={email}
+							placeholder="your@email.com"
+							class="w-full px-4 py-3 border border-gray-300 rounded-lg bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+						/>
+					</div>
+
+					<Button class="w-full" disabled={!email}>Sign Up</Button>
+
+					<p class="text-xs text-muted-foreground">
+						We respect your privacy. Unsubscribe at any time.
+					</p>
+				</form>
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/promo-section/PromoSection04.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		productName?: string;
+		originalPrice?: number;
+		salePrice?: number;
+	}
+
+	let {
+		class: className,
+		productName = 'Premium Wireless Headphones',
+		originalPrice = 299.99,
+		salePrice = 149.99,
+	}: Props = $props();
+
+	const features = [
+		'Active Noise Cancellation',
+		'40-hour battery life',
+		'Premium sound quality',
+		'Comfortable fit for all-day wear',
+	];
+</script>
+
+<section class={cn('w-full bg-gray-950 text-white px-4 py-16 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-7xl">
+		<div class="grid grid-cols-1 gap-12 lg:grid-cols-2 items-center">
+			<!-- Left Content -->
+			<div>
+				<!-- Label -->
+				<span class="inline-block bg-red-600 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
+					Deal of the Day
+				</span>
+
+				<!-- Product Name -->
+				<h2 class="text-4xl sm:text-5xl font-bold mb-4">{productName}</h2>
+
+				<!-- Pricing -->
+				<div class="mb-6 flex items-center gap-4">
+					<span class="text-lg line-through text-gray-400">${originalPrice.toFixed(2)}</span>
+					<span class="text-4xl font-bold text-red-500">${salePrice.toFixed(2)}</span>
+					<span class="text-lg font-semibold text-green-400">
+						Save {Math.round(((originalPrice - salePrice) / originalPrice) * 100)}%
+					</span>
+				</div>
+
+				<!-- Features List -->
+				<ul class="space-y-3 mb-8">
+					{#each features as feature}
+						<li class="flex items-center gap-3">
+							<svg
+								width="20"
+								height="20"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								class="text-green-400 flex-shrink-0"
+							>
+								<polyline points="20 6 9 17 4 12" />
+							</svg>
+							<span>{feature}</span>
+						</li>
+					{/each}
+				</ul>
+
+				<!-- CTA -->
+				<div class="flex flex-col sm:flex-row gap-3">
+					<Button size="lg" class="bg-red-600 hover:bg-red-700">Add to Cart</Button>
+					<Button variant="outline" size="lg" class="border-white text-white hover:bg-white/10">
+						View Details
+					</Button>
+				</div>
+
+				<!-- Limited Time Notice -->
+				<p class="text-sm text-gray-400 mt-4">
+					Limited stock available. Offer ends in 3 days.
+				</p>
+			</div>
+
+			<!-- Right - Product Image Placeholder -->
+			<div class="flex items-center justify-center">
+				<div class="w-full aspect-square bg-gradient-to-b from-gray-800 to-gray-900 rounded-xl flex items-center justify-center">
+					<svg
+						width="120"
+						height="120"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="1"
+						class="text-gray-600"
+					>
+						<rect x="3" y="3" width="18" height="18" rx="2" />
+						<circle cx="8.5" cy="8.5" r="1.5" />
+						<polyline points="21 15 16 10 5 21" />
+					</svg>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,4 @@
+export { default as PromoSection01 } from './PromoSection01.svelte';
+export { default as PromoSection02 } from './PromoSection02.svelte';
+export { default as PromoSection03 } from './PromoSection03.svelte';
+export { default as PromoSection04 } from './PromoSection04.svelte';

package/src/registry/blocks/rich-text/RichText01.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		subtitle?: string;
+		paragraph1?: string;
+		paragraph2?: string;
+	}
+
+	const {
+		class: className,
+		title = 'Article Title',
+		subtitle = 'A compelling subtitle that draws readers in...',
+		paragraph1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+		paragraph2 = 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+	}: 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">
+		<h1 class="text-3xl font-bold tracking-tight">{title}</h1>
+		<p class="mt-4 text-xl text-muted-foreground">{subtitle}</p>
+		<div class="mt-8 space-y-4 text-base leading-7 text-muted-foreground">
+			<p>{paragraph1}</p>
+			<p>{paragraph2}</p>
+		</div>
+	</div>
+</section>