@xbg.solutions/create-frontend 1.1.1 → 1.2.0

package/src/registry/blocks/testimonials/Testimonial01.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Testimonial {
+		quote: string;
+		name: string;
+		role?: string;
+		company?: string;
+		avatarUrl?: string;
+		rating?: number;
+	}
+
+	interface Props {
+		class?: string;
+		testimonial?: Testimonial;
+	}
+
+	const defaultTestimonial: Testimonial = {
+		quote:
+			'"Shadcn UI Kit for Figma has completely transformed our design process. It\'s incredibly intuitive and saves us so much time. The components are beautifully crafted and customizable."',
+		name: 'Lando Norris',
+		role: 'CEO',
+		company: 'Acme Inc.'
+	};
+
+	let { class: className, testimonial = defaultTestimonial }: Props = $props();
+
+	const getInitials = (name: string): string => {
+		return name
+			.split(' ')
+			.map((w) => w[0])
+			.join('')
+			.toUpperCase();
+	};
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-2xl text-center">
+		<div class="mb-8 flex justify-center">
+			<span class="text-4xl text-muted-foreground/30 font-serif leading-none">"</span>
+		</div>
+
+		<p class="text-xl sm:text-2xl font-medium italic leading-relaxed text-foreground">
+			{testimonial.quote}
+		</p>
+
+		<div class="mt-10 flex flex-col items-center">
+			{#if testimonial.avatarUrl}
+				<img
+					src={testimonial.avatarUrl}
+					alt={testimonial.name}
+					class="h-16 w-16 rounded-full object-cover"
+				/>
+			{:else}
+				<div
+					class="h-16 w-16 rounded-full bg-muted overflow-hidden flex items-center justify-center text-muted-foreground text-sm font-semibold"
+				>
+					{getInitials(testimonial.name)}
+				</div>
+			{/if}
+
+			<p class="mt-4 font-semibold text-sm text-foreground">{testimonial.name}</p>
+			{#if testimonial.role || testimonial.company}
+				<p class="text-xs text-muted-foreground mt-1">
+					{testimonial.role}
+					{#if testimonial.role && testimonial.company}
+						·
+					{/if}
+					{testimonial.company}
+				</p>
+			{/if}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/testimonials/Testimonial02.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Testimonial {
+		quote: string;
+		name: string;
+		role?: string;
+		company?: string;
+		avatarUrl?: string;
+		rating?: number;
+	}
+
+	interface Props {
+		class?: string;
+		testimonials?: Testimonial[];
+	}
+
+	const defaultTestimonial: Testimonial = {
+		quote:
+			'"Shadcn UI Kit for Figma has completely transformed our design process. It\'s incredibly intuitive and saves us so much time. The components are beautifully crafted and customizable."',
+		name: 'Lando Norris',
+		role: 'CEO',
+		company: 'Acme Inc.'
+	};
+
+	let { class: className, testimonials = [defaultTestimonial, defaultTestimonial] }: Props = $props();
+
+	const getInitials = (name: string): string => {
+		return name
+			.split(' ')
+			.map((w) => w[0])
+			.join('')
+			.toUpperCase();
+	};
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-4xl grid grid-cols-1 gap-6 sm:grid-cols-2">
+		{#each testimonials as testimonial}
+			<div class="rounded-lg border bg-background p-8 text-center">
+				<p class="text-base font-medium italic text-foreground">
+					{testimonial.quote}
+				</p>
+
+				<div class="mt-6 flex flex-col items-center">
+					{#if testimonial.avatarUrl}
+						<img
+							src={testimonial.avatarUrl}
+							alt={testimonial.name}
+							class="h-12 w-12 rounded-full object-cover"
+						/>
+					{:else}
+						<div
+							class="h-12 w-12 rounded-full bg-muted overflow-hidden flex items-center justify-center text-muted-foreground text-xs font-semibold"
+						>
+							{getInitials(testimonial.name)}
+						</div>
+					{/if}
+
+					<p class="font-semibold text-sm text-foreground mt-3">{testimonial.name}</p>
+					{#if testimonial.role || testimonial.company}
+						<p class="text-xs text-muted-foreground mt-1">
+							{testimonial.role}
+							{#if testimonial.role && testimonial.company}
+								·
+							{/if}
+							{testimonial.company}
+						</p>
+					{/if}
+				</div>
+			</div>
+		{/each}
+	</div>
+</section>

package/src/registry/blocks/testimonials/Testimonial03.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Testimonial {
+		quote: string;
+		name: string;
+		role?: string;
+		company?: string;
+		avatarUrl?: string;
+		rating?: number;
+	}
+
+	interface Props {
+		class?: string;
+		testimonial?: Testimonial;
+		imageUrl?: string;
+	}
+
+	const defaultTestimonial: Testimonial = {
+		quote:
+			'"Shadcn UI Kit for Figma has completely transformed our design process. It\'s incredibly intuitive and saves us so much time. The components are beautifully crafted and customizable."',
+		name: 'Lando Norris',
+		role: 'CEO',
+		company: 'Acme Inc.',
+		rating: 5
+	};
+
+	let {
+		class: className,
+		testimonial = defaultTestimonial,
+		imageUrl
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-5xl grid grid-cols-1 gap-8 sm:grid-cols-2 sm:items-center">
+		<div class="aspect-square rounded-lg bg-muted overflow-hidden flex items-center justify-center">
+			{#if imageUrl}
+				<img src={imageUrl} alt="testimonial" class="w-full h-full object-cover" />
+			{:else}
+				<div class="text-muted-foreground text-sm">Image placeholder</div>
+			{/if}
+		</div>
+
+		<div>
+			{#if testimonial.rating}
+				<div class="flex gap-1 mb-4">
+					{#each Array(5) as _, i}
+						<svg
+							width="16"
+							height="16"
+							viewBox="0 0 24 24"
+							fill={i < testimonial.rating ? '#f59e0b' : 'none'}
+							stroke="#f59e0b"
+							stroke-width="2"
+						>
+							<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+						</svg>
+					{/each}
+				</div>
+			{/if}
+
+			<p class="text-lg font-medium italic leading-relaxed text-foreground">
+				{testimonial.quote}
+			</p>
+
+			<p class="font-semibold text-foreground mt-4">{testimonial.name}</p>
+			{#if testimonial.role || testimonial.company}
+				<p class="text-sm text-muted-foreground">
+					{testimonial.role}
+					{#if testimonial.role && testimonial.company}
+						·
+					{/if}
+					{testimonial.company}
+				</p>
+			{/if}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/testimonials/Testimonial04.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Testimonial {
+		quote: string;
+		name: string;
+		role?: string;
+		company?: string;
+		avatarUrl?: string;
+		rating?: number;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		testimonials?: Testimonial[];
+	}
+
+	const defaultTestimonial: Testimonial = {
+		quote:
+			'"Shadcn UI Kit for Figma has completely transformed our design process. It\'s incredibly intuitive and saves us so much time. The components are beautifully crafted and customizable."',
+		name: 'Lando Norris',
+		role: 'CEO',
+		company: 'Acme Inc.',
+		rating: 5
+	};
+
+	let {
+		class: className,
+		title,
+		description,
+		testimonials = [defaultTestimonial, defaultTestimonial, defaultTestimonial]
+	}: Props = $props();
+
+	const getInitials = (name: string): string => {
+		return name
+			.split(' ')
+			.map((w) => w[0])
+			.join('')
+			.toUpperCase();
+	};
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl">
+		{#if title}
+			<div class="text-center mb-12">
+				<p class="text-sm font-semibold text-muted-foreground uppercase tracking-widest">
+					Testimonials Section
+				</p>
+				<h2 class="mt-2 text-3xl font-bold tracking-tight text-foreground">{title}</h2>
+				{#if description}
+					<p class="mt-4 text-base text-muted-foreground">{description}</p>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
+			{#each testimonials as testimonial}
+				<div class="rounded-lg border bg-background p-6">
+					<div class="flex gap-1">
+						{#each Array(5) as _, i}
+							<svg
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill={i < (testimonial.rating || 5) ? '#f59e0b' : 'none'}
+								stroke="#f59e0b"
+								stroke-width="2"
+							>
+								<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+							</svg>
+						{/each}
+					</div>
+
+					<p class="text-sm text-muted-foreground mt-3">{testimonial.quote}</p>
+
+					<div class="border-t mt-4 pt-4">
+						<div class="flex items-center gap-3">
+							{#if testimonial.avatarUrl}
+								<img
+									src={testimonial.avatarUrl}
+									alt={testimonial.name}
+									class="h-8 w-8 rounded-full object-cover"
+								/>
+							{:else}
+								<div
+									class="h-8 w-8 rounded-full bg-muted overflow-hidden flex items-center justify-center text-muted-foreground text-xs font-semibold"
+								>
+									{getInitials(testimonial.name)}
+								</div>
+							{/if}
+
+							<div>
+								<p class="font-semibold text-sm text-foreground">{testimonial.name}</p>
+								{#if testimonial.role || testimonial.company}
+									<p class="text-xs text-muted-foreground">
+										{testimonial.role}
+										{#if testimonial.role && testimonial.company}
+											·
+										{/if}
+										{testimonial.company}
+									</p>
+								{/if}
+							</div>
+						</div>
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/testimonials/Testimonial05.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Testimonial {
+		quote: string;
+		name: string;
+		role?: string;
+		company?: string;
+		avatarUrl?: string;
+		rating?: number;
+	}
+
+	interface Props {
+		class?: string;
+		testimonial?: Testimonial;
+	}
+
+	const defaultTestimonial: Testimonial = {
+		quote:
+			'"Shadcn UI Kit for Figma has completely transformed our design process. It\'s incredibly intuitive and saves us so much time. The components are beautifully crafted and customizable."',
+		name: 'Lando Norris',
+		role: 'CEO',
+		company: 'Acme Inc.'
+	};
+
+	let { class: className, testimonial = defaultTestimonial }: Props = $props();
+
+	const getInitials = (name: string): string => {
+		return name
+			.split(' ')
+			.map((w) => w[0])
+			.join('')
+			.toUpperCase();
+	};
+</script>
+
+<section class={cn('w-full bg-foreground text-background py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-2xl text-center">
+		<div class="mb-8 flex justify-center">
+			<span class="text-4xl text-background/30 font-serif leading-none">"</span>
+		</div>
+
+		<p class="text-xl sm:text-2xl font-medium italic leading-relaxed text-background">
+			{testimonial.quote}
+		</p>
+
+		<div class="mt-10 flex flex-col items-center">
+			{#if testimonial.avatarUrl}
+				<img
+					src={testimonial.avatarUrl}
+					alt={testimonial.name}
+					class="h-16 w-16 rounded-full object-cover"
+				/>
+			{:else}
+				<div
+					class="h-16 w-16 rounded-full bg-background/20 overflow-hidden flex items-center justify-center text-background/60 text-sm font-semibold"
+				>
+					{getInitials(testimonial.name)}
+				</div>
+			{/if}
+
+			<p class="mt-4 font-semibold text-sm text-background">{testimonial.name}</p>
+			{#if testimonial.role || testimonial.company}
+				<p class="text-xs text-background/60 mt-1">
+					{testimonial.role}
+					{#if testimonial.role && testimonial.company}
+						·
+					{/if}
+					{testimonial.company}
+				</p>
+			{/if}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/testimonials/Testimonial06.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Testimonial {
+		quote: string;
+		name: string;
+		role?: string;
+		company?: string;
+		avatarUrl?: string;
+		rating?: number;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		testimonials?: Testimonial[];
+	}
+
+	const defaultTestimonial: Testimonial = {
+		quote:
+			'"Shadcn UI Kit for Figma has completely transformed our design process. It\'s incredibly intuitive and saves us so much time. The components are beautifully crafted and customizable."',
+		name: 'Lando Norris',
+		role: 'CEO',
+		company: 'Acme Inc.',
+		rating: 5
+	};
+
+	let {
+		class: className,
+		title = 'What our customers say',
+		description,
+		testimonials = [
+			defaultTestimonial,
+			defaultTestimonial,
+			defaultTestimonial,
+			defaultTestimonial
+		]
+	}: Props = $props();
+
+	const getInitials = (name: string): string => {
+		return name
+			.split(' ')
+			.map((w) => w[0])
+			.join('')
+			.toUpperCase();
+	};
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div>
+			<p class="text-sm font-semibold text-muted-foreground uppercase tracking-widest">
+				Testimonials Section
+			</p>
+			<h2 class="mt-2 text-3xl font-bold tracking-tight text-foreground">{title}</h2>
+			{#if description}
+				<p class="mt-4 text-base text-muted-foreground">{description}</p>
+			{/if}
+		</div>
+
+		<div class="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2">
+			{#each testimonials as testimonial}
+				<div class="rounded-lg border bg-background p-6">
+					<div class="flex gap-1">
+						{#each Array(5) as _, i}
+							<svg
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill={i < (testimonial.rating || 5) ? '#f59e0b' : 'none'}
+								stroke="#f59e0b"
+								stroke-width="2"
+							>
+								<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+							</svg>
+						{/each}
+					</div>
+
+					<p class="text-sm text-muted-foreground mt-3">{testimonial.quote}</p>
+
+					<div class="mt-4 pt-4 flex items-center gap-3">
+						{#if testimonial.avatarUrl}
+							<img
+								src={testimonial.avatarUrl}
+								alt={testimonial.name}
+								class="h-10 w-10 rounded-full object-cover"
+							/>
+						{:else}
+							<div
+								class="h-10 w-10 rounded-full bg-muted overflow-hidden flex items-center justify-center text-muted-foreground text-xs font-semibold"
+							>
+								{getInitials(testimonial.name)}
+							</div>
+						{/if}
+
+						<div>
+							<p class="font-semibold text-sm text-foreground">{testimonial.name}</p>
+							{#if testimonial.role || testimonial.company}
+								<p class="text-xs text-muted-foreground">
+									{testimonial.role}
+									{#if testimonial.role && testimonial.company}
+										·
+									{/if}
+									{testimonial.company}
+								</p>
+							{/if}
+						</div>
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/testimonials/Testimonial07.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Testimonial {
+		quote: string;
+		name: string;
+		role?: string;
+		company?: string;
+		avatarUrl?: string;
+		rating?: number;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		testimonials?: Testimonial[];
+	}
+
+	const defaultTestimonial: Testimonial = {
+		quote:
+			'"Shadcn UI Kit for Figma has completely transformed our design process. It\'s incredibly intuitive and saves us so much time. The components are beautifully crafted and customizable."',
+		name: 'Lando Norris',
+		role: 'CEO',
+		company: 'Acme Inc.',
+		rating: 5
+	};
+
+	let {
+		class: className,
+		title = 'Customer testimonials',
+		testimonials = [
+			defaultTestimonial,
+			defaultTestimonial,
+			defaultTestimonial,
+			defaultTestimonial
+		]
+	}: Props = $props();
+
+	const getInitials = (name: string): string => {
+		return name
+			.split(' ')
+			.map((w) => w[0])
+			.join('')
+			.toUpperCase();
+	};
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl">
+		{#if title}
+			<div class="text-center mb-10">
+				<h2 class="text-3xl font-bold tracking-tight text-foreground">{title}</h2>
+			</div>
+		{/if}
+
+		<div class="relative">
+			<div class="overflow-x-auto pb-4">
+				<div class="flex gap-4 w-max">
+					{#each testimonials as testimonial}
+						<div class="w-80 shrink-0 rounded-lg border bg-background p-6">
+							<div class="flex gap-1">
+								{#each Array(5) as _, i}
+									<svg
+										width="16"
+										height="16"
+										viewBox="0 0 24 24"
+										fill={i < (testimonial.rating || 5) ? '#f59e0b' : 'none'}
+										stroke="#f59e0b"
+										stroke-width="2"
+									>
+										<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+									</svg>
+								{/each}
+							</div>
+
+							<p class="text-sm text-muted-foreground mt-3">{testimonial.quote}</p>
+
+							<div class="mt-4 pt-4 flex items-center gap-3">
+								{#if testimonial.avatarUrl}
+									<img
+										src={testimonial.avatarUrl}
+										alt={testimonial.name}
+										class="h-10 w-10 rounded-full object-cover"
+									/>
+								{:else}
+									<div
+										class="h-10 w-10 rounded-full bg-muted overflow-hidden flex items-center justify-center text-muted-foreground text-xs font-semibold"
+									>
+										{getInitials(testimonial.name)}
+									</div>
+								{/if}
+
+								<div>
+									<p class="font-semibold text-sm text-foreground">{testimonial.name}</p>
+									{#if testimonial.role || testimonial.company}
+										<p class="text-xs text-muted-foreground">
+											{testimonial.role}
+											{#if testimonial.role && testimonial.company}
+												·
+											{/if}
+											{testimonial.company}
+										</p>
+									{/if}
+								</div>
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+
+			<div class="flex justify-center gap-2 mt-6">
+				<button
+					class="rounded-full border p-2 hover:bg-muted transition-colors"
+					aria-label="scroll left"
+				>
+					<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+						<polyline points="15 18 9 12 15 6"></polyline>
+					</svg>
+				</button>
+				<button
+					class="rounded-full border p-2 hover:bg-muted transition-colors"
+					aria-label="scroll right"
+				>
+					<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+						<polyline points="9 18 15 12 9 6"></polyline>
+					</svg>
+				</button>
+			</div>
+		</div>
+	</div>
+</section>