@xbg.solutions/create-frontend 1.1.2 → 1.2.0

package/src/registry/blocks/faq-section/FaqSection05.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface FaqItem {
+		question: string;
+		answer: string;
+		category?: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		items?: FaqItem[];
+		eyebrow?: string;
+	}
+
+	const defaultFaqs: FaqItem[] = [
+		{
+			question: 'What is shadcn/ui?',
+			answer:
+				'Shadcn/ui is a popular, open-source UI component library for React that focuses on flexibility and customization. It provides a set of accessible, customizable components that you can use to build modern web applications.'
+		},
+		{
+			question: 'What is shadcn/ui kit for Figma?',
+			answer:
+				'The shadcn/ui kit for Figma is our comprehensive design kit that brings the shadcn/ui components into the Figma environment.'
+		},
+		{
+			question: "I'm not familiar with shadcn/ui. Can I still use this kit?",
+			answer:
+				'Absolutely! Our kit is intuitive and comes with documentation to help you get started, regardless of your familiarity with Figma or shadcn/ui.'
+		},
+		{
+			question: 'Can I create multi-brand design systems with this UI kit?',
+			answer:
+				'Yes! Our kit is designed with multi-brand support in mind. You can easily create and manage multiple styles for different brands within a single design system using Figma variables.'
+		},
+		{
+			question: 'How will this kit save me time?',
+			answer:
+				'By providing pre-built, customizable components and templates, you can skip the repetitive setup work and focus on the unique aspects of your design.'
+		},
+		{
+			question: 'How does this improve my collaboration with developers?',
+			answer:
+				'Our components are built to closely match the shadcn/ui library, significantly reducing misinterpretations and implementation errors.'
+		}
+	];
+
+	let { class: className, title = 'Frequently Asked Questions', description = 'Get answers to your questions.', items = defaultFaqs, eyebrow = 'FAQ Section' }: 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-6xl text-center">
+		<p class="text-xs uppercase tracking-widest text-muted-foreground">{eyebrow}</p>
+		<h2 class="mt-2 text-3xl sm:text-4xl font-bold tracking-tight">{title}</h2>
+		<p class="mt-3 text-muted-foreground">{description}</p>
+	</div>
+
+	<div class="mt-10 mx-auto max-w-2xl flex flex-col gap-6">
+		{#each items as item (item.question)}
+			<div class="rounded-lg border p-6">
+				<h3 class="font-semibold text-sm">{item.question}</h3>
+				<p class="mt-2 text-sm text-muted-foreground">{item.answer}</p>
+			</div>
+		{/each}
+	</div>
+</section>

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

@@ -0,0 +1,11 @@
+export { default as FaqSection01 } from './FaqSection01.svelte';
+export { default as FaqSection02 } from './FaqSection02.svelte';
+export { default as FaqSection03 } from './FaqSection03.svelte';
+export { default as FaqSection04 } from './FaqSection04.svelte';
+export { default as FaqSection05 } from './FaqSection05.svelte';
+
+export interface FaqItem {
+	question: string;
+	answer: string;
+	category?: string;
+}

package/src/registry/blocks/feature-section/FeatureSection01.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Feature {
+		icon?: string;
+		title: string;
+		description: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		features?: Feature[];
+	}
+
+	const defaultFeatures: Feature[] = [
+		{ title: 'Lightning Fast', description: 'Built for performance with optimized components that load instantly.' },
+		{ title: 'Fully Customizable', description: 'Every component can be tailored to match your brand perfectly.' },
+		{ title: 'Dark Mode Ready', description: 'Beautiful light and dark modes out of the box.' },
+		{ title: 'TypeScript Native', description: 'Full TypeScript support with complete type definitions.' },
+		{ title: 'Accessible', description: 'WCAG 2.1 compliant with keyboard navigation and screen reader support.' },
+		{ title: 'Open Source', description: 'MIT licensed and free to use in any project, personal or commercial.' },
+	];
+
+	let {
+		class: className,
+		title = 'Everything you need to ship faster',
+		description = 'A comprehensive set of tools and components to accelerate your development workflow.',
+		features = defaultFeatures,
+	}: Props = $props();
+
+	const iconComponents: Record<string, { viewBox: string; path: string }> = {
+		lightning: {
+			viewBox: '0 0 24 24',
+			path: 'm13 2-2 6.5h5l-7 13.5 2-6.5H6l7-13.5z',
+		},
+		settings: {
+			viewBox: '0 0 24 24',
+			path: 'M3 12a9 9 0 0 0 9 9M12 3a9 9 0 0 0-9 9M19.07 4.93a10 10 0 0 0-14.14 0M4.93 19.07a10 10 0 0 0 14.14 0',
+		},
+		moon: {
+			viewBox: '0 0 24 24',
+			path: 'M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z',
+		},
+		code: {
+			viewBox: '0 0 24 24',
+			path: 'M16 18 22 12 16 6M8 6 2 12 8 18',
+		},
+		shield: {
+			viewBox: '0 0 24 24',
+			path: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',
+		},
+		lock: {
+			viewBox: '0 0 24 24',
+			path: 'M3 11h18v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V11zM7 11V7a5 5 0 0 1 10 0v4',
+		},
+	};
+</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 class="text-center mb-12">
+			<p class="text-xs uppercase tracking-widest text-muted-foreground">Feature Section</p>
+			<h2 class="mt-2 text-3xl sm:text-4xl font-bold tracking-tight">
+				{title}
+			</h2>
+			<p class="mt-3 text-lg text-muted-foreground max-w-2xl mx-auto">
+				{description}
+			</p>
+		</div>
+
+		<div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-3">
+			{#each features as feature}
+				<div>
+					<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-muted mb-4">
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-foreground">
+							{#if feature.icon && iconComponents[feature.icon]}
+								<g>
+									{@html `<path d="${iconComponents[feature.icon].path}" />`}
+								</g>
+							{:else}
+								<circle cx="12" cy="12" r="3" />
+								<path d="M19.07 4.93a10 10 0 0 0-14.14 0M4.93 19.07a10 10 0 0 0 14.14 0" />
+							{/if}
+						</svg>
+					</div>
+					<h3 class="text-lg font-semibold text-foreground">{feature.title}</h3>
+					<p class="mt-2 text-muted-foreground text-sm">{feature.description}</p>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/feature-section/FeatureSection02.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Feature {
+		icon?: string;
+		title: string;
+		description: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		features?: Feature[];
+	}
+
+	const defaultFeatures: Feature[] = [
+		{ title: 'Lightning Fast', description: 'Built for performance with optimized components that load instantly.' },
+		{ title: 'Fully Customizable', description: 'Every component can be tailored to match your brand perfectly.' },
+		{ title: 'Dark Mode Ready', description: 'Beautiful light and dark modes out of the box.' },
+		{ title: 'TypeScript Native', description: 'Full TypeScript support with complete type definitions.' },
+		{ title: 'Accessible', description: 'WCAG 2.1 compliant with keyboard navigation and screen reader support.' },
+		{ title: 'Open Source', description: 'MIT licensed and free to use in any project, personal or commercial.' },
+	];
+
+	let {
+		class: className,
+		title = 'Everything you need to ship faster',
+		description = 'A comprehensive set of tools and components to accelerate your development workflow.',
+		features = defaultFeatures,
+	}: 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-6xl">
+		<div class="mb-12">
+			<p class="text-xs uppercase tracking-widest text-muted-foreground">Feature Section</p>
+			<h2 class="mt-2 text-3xl sm:text-4xl font-bold tracking-tight">
+				{title}
+			</h2>
+			<p class="mt-3 text-lg text-muted-foreground max-w-2xl">
+				{description}
+			</p>
+		</div>
+
+		<div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-3">
+			{#each features as feature}
+				<div>
+					<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-muted mb-4">
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-foreground">
+							<circle cx="12" cy="12" r="3" />
+							<path d="M19.07 4.93a10 10 0 0 0-14.14 0M4.93 19.07a10 10 0 0 0 14.14 0" />
+						</svg>
+					</div>
+					<h3 class="text-lg font-semibold text-foreground">{feature.title}</h3>
+					<p class="mt-2 text-muted-foreground text-sm">{feature.description}</p>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/feature-section/FeatureSection03.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Feature {
+		icon?: string;
+		title: string;
+		description: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		features?: Feature[];
+	}
+
+	const defaultFeatures: Feature[] = [
+		{ title: 'Lightning Fast', description: 'Built for performance with optimized components that load instantly.' },
+		{ title: 'Fully Customizable', description: 'Every component can be tailored to match your brand perfectly.' },
+		{ title: 'Dark Mode Ready', description: 'Beautiful light and dark modes out of the box.' },
+	];
+
+	let {
+		class: className,
+		title = 'Everything you need to ship faster',
+		description = 'A comprehensive set of tools and components to accelerate your development workflow.',
+		features = defaultFeatures,
+	}: 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-6xl">
+		<div class="text-center mb-12">
+			<p class="text-xs uppercase tracking-widest text-muted-foreground">Feature Section</p>
+			<h2 class="mt-2 text-3xl sm:text-4xl font-bold tracking-tight">
+				{title}
+			</h2>
+			<p class="mt-3 text-lg text-muted-foreground max-w-2xl mx-auto">
+				{description}
+			</p>
+		</div>
+
+		<div class="mt-10 space-y-16">
+			{#each features as feature, i}
+				<div class="grid grid-cols-1 gap-12 sm:grid-cols-2 sm:items-center {i % 2 === 1 ? 'sm:flex-row-reverse' : ''}">
+					<div class={i % 2 === 1 ? 'sm:order-2' : ''}>
+						<p class="text-xs uppercase tracking-widest text-muted-foreground font-medium">Feature</p>
+						<h3 class="mt-2 text-2xl sm:text-3xl font-bold text-foreground">{feature.title}</h3>
+						<p class="mt-4 text-muted-foreground">{feature.description}</p>
+						<a
+							href="#"
+							class="mt-6 inline-flex items-center gap-2 text-sm font-medium text-foreground hover:underline"
+						>
+							Learn more
+							<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+								<line x1="5" y1="12" x2="19" y2="12" />
+								<polyline points="12 5 19 12 12 19" />
+							</svg>
+						</a>
+					</div>
+
+					<div class={i % 2 === 1 ? 'sm:order-1' : ''}>
+						<div
+							class="aspect-video w-full rounded-xl bg-muted flex items-center justify-center"
+						>
+							<svg
+								width="32"
+								height="32"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="1"
+								class="text-muted-foreground/40"
+							>
+								<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>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/feature-section/FeatureSection04.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Feature {
+		icon?: string;
+		title: string;
+		description: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		features?: Feature[];
+	}
+
+	const defaultFeatures: Feature[] = [
+		{ title: 'Lightning Fast', description: 'Built for performance with optimized components that load instantly.' },
+		{ title: 'Fully Customizable', description: 'Every component can be tailored to match your brand perfectly.' },
+		{ title: 'Dark Mode Ready', description: 'Beautiful light and dark modes out of the box.' },
+		{ title: 'TypeScript Native', description: 'Full TypeScript support with complete type definitions.' },
+		{ title: 'Accessible', description: 'WCAG 2.1 compliant with keyboard navigation and screen reader support.' },
+		{ title: 'Open Source', description: 'MIT licensed and free to use in any project, personal or commercial.' },
+		{ title: 'Well Documented', description: 'Comprehensive docs with examples and code snippets.' },
+		{ title: '24/7 Support', description: 'Get help anytime from our dedicated support team.' },
+	];
+
+	let {
+		class: className,
+		title = 'Everything you need to ship faster',
+		description = 'A comprehensive set of tools and components to accelerate your development workflow.',
+		features = defaultFeatures,
+	}: 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-6xl">
+		<div class="text-center mb-12">
+			<p class="text-xs uppercase tracking-widest text-muted-foreground">Feature Section</p>
+			<h2 class="mt-2 text-3xl sm:text-4xl font-bold tracking-tight">
+				{title}
+			</h2>
+			<p class="mt-3 text-lg text-muted-foreground max-w-2xl mx-auto">
+				{description}
+			</p>
+		</div>
+
+		<div class="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2">
+			{#each features as feature}
+				<div class="flex gap-4">
+					<div class="flex-shrink-0">
+						<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
+							<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-foreground">
+								<circle cx="12" cy="12" r="3" />
+								<path d="M19.07 4.93a10 10 0 0 0-14.14 0M4.93 19.07a10 10 0 0 0 14.14 0" />
+							</svg>
+						</div>
+					</div>
+					<div class="flex-1">
+						<h3 class="font-semibold text-foreground">{feature.title}</h3>
+						<p class="mt-1 text-sm text-muted-foreground">{feature.description}</p>
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/feature-section/FeatureSection05.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Feature {
+		icon?: string;
+		title: string;
+		description: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		features?: Feature[];
+	}
+
+	const defaultFeatures: Feature[] = [
+		{ title: 'Lightning Fast', description: 'Built for performance with optimized components that load instantly.' },
+		{ title: 'Fully Customizable', description: 'Every component can be tailored to match your brand perfectly.' },
+		{ title: 'Dark Mode Ready', description: 'Beautiful light and dark modes out of the box.' },
+		{ title: 'TypeScript Native', description: 'Full TypeScript support with complete type definitions.' },
+		{ title: 'Accessible', description: 'WCAG 2.1 compliant with keyboard navigation and screen reader support.' },
+		{ title: 'Open Source', description: 'MIT licensed and free to use in any project, personal or commercial.' },
+	];
+
+	let {
+		class: className,
+		title = 'Everything you need to ship faster',
+		description = 'A comprehensive set of tools and components to accelerate your development workflow.',
+		features = defaultFeatures,
+	}: Props = $props();
+</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-6xl">
+		<div class="text-center mb-12">
+			<p class="text-xs uppercase tracking-widest text-background/60">Feature Section</p>
+			<h2 class="mt-2 text-3xl sm:text-4xl font-bold tracking-tight">
+				{title}
+			</h2>
+			<p class="mt-3 text-lg text-background/80 max-w-2xl mx-auto">
+				{description}
+			</p>
+		</div>
+
+		<div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-3">
+			{#each features as feature}
+				<div>
+					<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-background/10 mb-4">
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-background">
+							<circle cx="12" cy="12" r="3" />
+							<path d="M19.07 4.93a10 10 0 0 0-14.14 0M4.93 19.07a10 10 0 0 0 14.14 0" />
+						</svg>
+					</div>
+					<h3 class="text-lg font-semibold text-background">{feature.title}</h3>
+					<p class="mt-2 text-background/80 text-sm">{feature.description}</p>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/feature-section/FeatureSection06.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Feature {
+		icon?: string;
+		title: string;
+		description: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		features?: Feature[];
+	}
+
+	const defaultFeatures: Feature[] = [
+		{ title: 'Lightning Fast', description: 'Built for performance with optimized components that load instantly.' },
+		{ title: 'Fully Customizable', description: 'Every component can be tailored to match your brand perfectly.' },
+		{ title: 'Dark Mode Ready', description: 'Beautiful light and dark modes out of the box.' },
+		{ title: 'TypeScript Native', description: 'Full TypeScript support with complete type definitions.' },
+	];
+
+	let {
+		class: className,
+		title = 'Everything you need to ship faster',
+		description = 'A comprehensive set of tools and components to accelerate your development workflow.',
+		features = defaultFeatures,
+	}: 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-6xl">
+		<div class="text-center mb-12">
+			<p class="text-xs uppercase tracking-widest text-muted-foreground">Feature Section</p>
+			<h2 class="mt-2 text-3xl sm:text-4xl font-bold tracking-tight">
+				{title}
+			</h2>
+			<p class="mt-3 text-lg text-muted-foreground max-w-2xl mx-auto">
+				{description}
+			</p>
+		</div>
+
+		<div class="mt-10 grid grid-cols-2 gap-4 sm:grid-cols-4">
+			{#each features as feature}
+				<div class="text-center">
+					<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-muted mx-auto mb-3">
+						<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-foreground">
+							<circle cx="12" cy="12" r="3" />
+							<path d="M19.07 4.93a10 10 0 0 0-14.14 0M4.93 19.07a10 10 0 0 0 14.14 0" />
+						</svg>
+					</div>
+					<h3 class="font-semibold text-foreground text-sm">{feature.title}</h3>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/feature-section/FeatureSection07.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Feature {
+		icon?: string;
+		title: string;
+		description: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		features?: Feature[];
+	}
+
+	const defaultFeatures: Feature[] = [
+		{ title: 'Lightning Fast', description: 'Built for performance with optimized components that load instantly.' },
+		{ title: 'Fully Customizable', description: 'Every component can be tailored to match your brand perfectly.' },
+		{ title: 'Dark Mode Ready', description: 'Beautiful light and dark modes out of the box.' },
+		{ title: 'TypeScript Native', description: 'Full TypeScript support with complete type definitions.' },
+	];
+
+	let {
+		class: className,
+		title = 'Everything you need to ship faster',
+		description = 'A comprehensive set of tools and components to accelerate your development workflow.',
+		features = defaultFeatures,
+	}: 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-6xl">
+		<div class="text-center mb-12">
+			<p class="text-xs uppercase tracking-widest text-muted-foreground">Feature Section</p>
+			<h2 class="mt-2 text-3xl sm:text-4xl font-bold tracking-tight">
+				{title}
+			</h2>
+			<p class="mt-3 text-lg text-muted-foreground max-w-2xl mx-auto">
+				{description}
+			</p>
+		</div>
+
+		<div class="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-[3fr_2fr]">
+			<div class="rounded-xl border p-8 bg-muted/30">
+				<div
+					class="aspect-video w-full rounded-lg bg-muted flex items-center justify-center mb-6"
+				>
+					<svg
+						width="32"
+						height="32"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="1"
+						class="text-muted-foreground/40"
+					>
+						<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>
+				{#if features[0]}
+					<h3 class="text-xl font-semibold text-foreground">{features[0].title}</h3>
+					<p class="mt-2 text-muted-foreground">{features[0].description}</p>
+				{/if}
+			</div>
+
+			<div class="flex flex-col gap-4">
+				{#each features.slice(1, 4) as feature}
+					<div class="rounded-lg border p-4 bg-muted/30">
+						<h3 class="font-semibold text-foreground text-sm">{feature.title}</h3>
+						<p class="mt-1 text-muted-foreground text-xs">{feature.description}</p>
+					</div>
+				{/each}
+			</div>
+		</div>
+	</div>
+</section>