@xbg.solutions/create-frontend 1.1.2 → 1.2.0

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

@@ -0,0 +1,92 @@
+<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();
+
+	let activeTab = $state(0);
+	const tabFeatures = features.slice(0, 4);
+</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">
+			<div class="flex gap-2 flex-wrap border-b">
+				{#each tabFeatures as feature, i}
+					<button
+						onclick={() => (activeTab = i)}
+						class={cn(
+							'px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-[2px]',
+							activeTab === i
+								? 'border-foreground text-foreground'
+								: 'border-transparent text-muted-foreground hover:text-foreground'
+						)}
+					>
+						{feature.title}
+					</button>
+				{/each}
+			</div>
+
+			<div class="mt-8 grid grid-cols-1 gap-12 sm:grid-cols-2 sm:items-center">
+				<div>
+					<h3 class="text-2xl sm:text-3xl font-bold text-foreground">{tabFeatures[activeTab].title}</h3>
+					<p class="mt-4 text-muted-foreground">{tabFeatures[activeTab].description}</p>
+				</div>
+
+				<div>
+					<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>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/feature-section/FeatureSection09.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.' },
+		{ 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="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, i}
+				<div>
+					<div class="text-4xl font-black text-muted-foreground/20 mb-4">
+						{String(i + 1).padStart(2, '0')}
+					</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/FeatureSection10.svelte

@@ -0,0 +1,87 @@
+<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="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-12 sm:grid-cols-2">
+			<div class="space-y-8">
+				{#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 class="sm:sticky sm:top-24">
+				<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>
+	</div>
+</section>

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

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface TableRow {
+		feature: string;
+		free: boolean;
+		pro: boolean;
+		enterprise: boolean;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		rows?: TableRow[];
+	}
+
+	const defaultRows: TableRow[] = [
+		{ feature: 'Basic Features', free: true, pro: true, enterprise: true },
+		{ feature: 'Advanced Analytics', free: false, pro: true, enterprise: true },
+		{ feature: 'Priority Support', free: false, pro: true, enterprise: true },
+		{ feature: 'Custom Integrations', free: false, pro: false, enterprise: true },
+		{ feature: 'Dedicated Account Manager', free: false, pro: false, enterprise: true },
+		{ feature: 'API Access', free: false, pro: true, enterprise: true },
+		{ feature: 'SSO & Security', free: false, pro: false, enterprise: true },
+	];
+
+	let {
+		class: className,
+		title = 'Simple, Transparent Pricing',
+		description = 'Choose the perfect plan for your needs. Upgrade or downgrade at any time.',
+		rows = defaultRows,
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-gray-950 py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div class="text-center mb-12">
+			<h2 class="text-3xl sm:text-4xl font-bold tracking-tight text-white">
+				{title}
+			</h2>
+			<p class="mt-3 text-lg text-gray-400 max-w-2xl mx-auto">
+				{description}
+			</p>
+		</div>
+
+		<div class="overflow-x-auto">
+			<table class="w-full">
+				<thead>
+					<tr class="border-b border-gray-800">
+						<th class="py-4 px-6 text-left text-sm font-semibold text-gray-300">Feature</th>
+						<th class="py-4 px-6 text-center text-sm font-semibold text-white">
+							<div class="flex flex-col items-center">
+								<span>Free</span>
+							</div>
+						</th>
+						<th class="py-4 px-6 text-center text-sm font-semibold text-white relative">
+							<div class="flex flex-col items-center">
+								<span class="inline-block bg-blue-600 text-white text-xs font-bold px-3 py-1 rounded-full mb-2"
+									>Popular</span
+								>
+								<span>Pro</span>
+							</div>
+						</th>
+						<th class="py-4 px-6 text-center text-sm font-semibold text-white">
+							<div class="flex flex-col items-center">
+								<span>Enterprise</span>
+							</div>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each rows as row}
+						<tr class="border-b border-gray-800 hover:bg-gray-900/50 transition">
+							<td class="py-4 px-6 text-sm text-gray-300">{row.feature}</td>
+							<td class="py-4 px-6 text-center">
+								{#if row.free}
+									<svg class="w-5 h-5 mx-auto text-green-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+										<polyline points="20 6 9 17 4 12"></polyline>
+									</svg>
+								{:else}
+									<svg class="w-5 h-5 mx-auto text-gray-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+										<line x1="18" y1="6" x2="6" y2="18"></line>
+										<line x1="6" y1="6" x2="18" y2="18"></line>
+									</svg>
+								{/if}
+							</td>
+							<td class="py-4 px-6 text-center">
+								{#if row.pro}
+									<svg class="w-5 h-5 mx-auto text-green-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+										<polyline points="20 6 9 17 4 12"></polyline>
+									</svg>
+								{:else}
+									<svg class="w-5 h-5 mx-auto text-gray-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+										<line x1="18" y1="6" x2="6" y2="18"></line>
+										<line x1="6" y1="6" x2="18" y2="18"></line>
+									</svg>
+								{/if}
+							</td>
+							<td class="py-4 px-6 text-center">
+								{#if row.enterprise}
+									<svg class="w-5 h-5 mx-auto text-green-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+										<polyline points="20 6 9 17 4 12"></polyline>
+									</svg>
+								{:else}
+									<svg class="w-5 h-5 mx-auto text-gray-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+										<line x1="18" y1="6" x2="6" y2="18"></line>
+										<line x1="6" y1="6" x2="18" y2="18"></line>
+									</svg>
+								{/if}
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Feature {
+		icon: string;
+		title: string;
+		description: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		subtitle?: string;
+		features?: Feature[];
+	}
+
+	const defaultFeatures: Feature[] = [
+		{ icon: 'zap', title: 'Lightning Speed', description: 'Instant load times and responsive interactions.' },
+		{ icon: 'shield', title: 'Secure by Default', description: 'Enterprise-grade security built in.' },
+		{ icon: 'palette', title: 'Beautiful Design', description: 'Modern, polished interface included.' },
+		{ icon: 'code', title: 'Developer Friendly', description: 'Clean API and excellent documentation.' },
+		{ icon: 'users', title: 'Team Collaboration', description: 'Built for teams of any size.' },
+		{ icon: 'trending-up', title: 'Scale Easily', description: 'Grows with your business needs.' },
+	];
+
+	let {
+		class: className,
+		title = 'Powerful Features',
+		subtitle = 'Everything you need to succeed',
+		features = defaultFeatures,
+	}: Props = $props();
+
+	const iconPaths: Record<string, { viewBox: string; path: string }> = {
+		zap: { viewBox: '0 0 24 24', path: 'm13 2-2 6.5h5l-7 13.5 2-6.5H6l7-13.5z' },
+		shield: { viewBox: '0 0 24 24', path: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z' },
+		palette: { viewBox: '0 0 24 24', path: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z' },
+		code: { viewBox: '0 0 24 24', path: 'M16 18 22 12 16 6M8 6 2 12 8 18' },
+		users: { viewBox: '0 0 24 24', path: 'M17 21h-5v-2h5v2zM16 5.76A2.5 2.5 0 0 0 13.5 3 2.5 2.5 0 0 0 11 5.5 2.5 2.5 0 0 0 13.5 8 2.5 2.5 0 0 0 16 5.76zM8 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z' },
+		'trending-up': { viewBox: '0 0 24 24', path: 'M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18 9 12.41l4 4 6.3-6.29L22 12v-6z' },
+	};
+</script>
+
+<section class={cn('w-full bg-white py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div class="text-center mb-12">
+			<h2 class="text-3xl sm:text-4xl font-bold tracking-tight text-gray-900">
+				{title}
+			</h2>
+			<p class="mt-3 text-lg text-gray-600 max-w-2xl mx-auto">
+				{subtitle}
+			</p>
+		</div>
+
+		<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+			{#each features as feature}
+				<div
+					class="p-6 rounded-lg border border-gray-200 hover:shadow-lg hover:-translate-y-1 transition-all duration-300 bg-gray-50"
+				>
+					<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-100 mb-4">
+						<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-blue-600">
+							{#if iconPaths[feature.icon]}
+								<g>
+									{@html `<path d="${iconPaths[feature.icon].path}" />`}
+								</g>
+							{:else}
+								<circle cx="12" cy="12" r="3" />
+							{/if}
+						</svg>
+					</div>
+					<h3 class="text-lg font-semibold text-gray-900">{feature.title}</h3>
+					<p class="mt-2 text-gray-600 text-sm">{feature.description}</p>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Feature {
+		number: number;
+		title: string;
+		description: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		subtitle?: string;
+		features?: Feature[];
+	}
+
+	const defaultFeatures: Feature[] = [
+		{
+			number: 1,
+			title: 'Lightning Fast Setup',
+			description: 'Get started in minutes with our intuitive onboarding process.',
+		},
+		{
+			number: 2,
+			title: 'Powerful Analytics',
+			description: 'Track performance metrics and gain actionable insights.',
+		},
+		{
+			number: 3,
+			title: 'Seamless Integration',
+			description: 'Connect with your favorite tools and platforms.',
+		},
+		{
+			number: 4,
+			title: 'Expert Support',
+			description: 'Get help from our experienced support team anytime.',
+		},
+		{
+			number: 5,
+			title: 'Enterprise Security',
+			description: 'Bank-level encryption and compliance standards.',
+		},
+	];
+
+	let {
+		class: className,
+		title = 'How It Works',
+		subtitle = 'A simple workflow designed for success',
+		features = defaultFeatures,
+	}: Props = $props();
+</script>
+
+<section class={cn('w-full bg-white py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+			<!-- Left Column: Screenshot Placeholder -->
+			<div class="flex items-center justify-center">
+				<div class="w-full aspect-video bg-gray-200 rounded-lg shadow-lg"></div>
+			</div>
+
+			<!-- Right Column: Feature List -->
+			<div>
+				<h2 class="text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 mb-4">
+					{title}
+				</h2>
+				<p class="text-lg text-gray-600 mb-8">
+					{subtitle}
+				</p>
+
+				<div class="space-y-6">
+					{#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-full bg-blue-100 text-blue-600 font-bold">
+									{feature.number}
+								</div>
+							</div>
+							<div>
+								<h3 class="text-lg font-semibold text-gray-900">{feature.title}</h3>
+								<p class="mt-1 text-gray-600 text-sm">{feature.description}</p>
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Feature {
+		icon: string;
+		title: string;
+		description: string;
+	}
+
+	interface Props {
+		class?: string;
+		eyebrow?: string;
+		title?: string;
+		subtitle?: string;
+		features?: Feature[];
+		codeSnippet?: string;
+	}
+
+	const defaultFeatures: Feature[] = [
+		{
+			icon: 'lightning',
+			title: 'Blazing Fast',
+			description: 'Optimized for maximum performance and minimal latency.',
+		},
+		{
+			icon: 'lock',
+			title: 'Secure Code',
+			description: 'Built with security best practices and standards.',
+		},
+		{
+			icon: 'code',
+			title: 'Clean Syntax',
+			description: 'Easy to read and maintain codebase.',
+		},
+	];
+
+	const defaultCode = `const response = await api.fetch('/data');
+const data = response.json();
+console.log(data);`;
+
+	let {
+		class: className,
+		eyebrow = 'Developer Experience',
+		title = 'Built for Developers',
+		subtitle = 'Modern API with clean, intuitive design',
+		features = defaultFeatures,
+		codeSnippet = defaultCode,
+	}: Props = $props();
+
+	const iconPaths: Record<string, string> = {
+		lightning: 'm13 2-2 6.5h5l-7 13.5 2-6.5H6l7-13.5z',
+		lock: 'M3 11h18v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V11zM7 11V7a5 5 0 0 1 10 0v4',
+		code: 'M16 18 22 12 16 6M8 6 2 12 8 18',
+	};
+</script>
+
+<section class={cn('w-full bg-gray-950 py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+			<!-- Left Column: Features -->
+			<div>
+				<p class="text-sm uppercase tracking-widest text-blue-400 font-semibold">{eyebrow}</p>
+				<h2 class="mt-2 text-3xl sm:text-4xl font-bold tracking-tight text-white">
+					{title}
+				</h2>
+				<p class="mt-3 text-lg text-gray-400 mb-8">
+					{subtitle}
+				</p>
+
+				<div class="space-y-6">
+					{#each features as feature}
+						<div class="flex gap-4">
+							<div class="flex-shrink-0">
+								<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-blue-400">
+									{#if iconPaths[feature.icon]}
+										<path d={iconPaths[feature.icon]} />
+									{:else}
+										<circle cx="12" cy="12" r="3" />
+									{/if}
+								</svg>
+							</div>
+							<div>
+								<h3 class="text-lg font-semibold text-white">{feature.title}</h3>
+								<p class="mt-1 text-gray-400 text-sm">{feature.description}</p>
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+
+			<!-- Right Column: Code Block -->
+			<div>
+				<div class="bg-gray-900 border border-gray-800 rounded-lg p-6 font-mono text-sm">
+					<div class="flex items-center justify-between mb-4 pb-4 border-b border-gray-800">
+						<span class="text-gray-400 text-xs uppercase tracking-widest">JavaScript</span>
+						<div class="flex gap-2">
+							<div class="w-3 h-3 rounded-full bg-gray-700"></div>
+							<div class="w-3 h-3 rounded-full bg-gray-700"></div>
+							<div class="w-3 h-3 rounded-full bg-gray-700"></div>
+						</div>
+					</div>
+					<pre class="text-gray-300 whitespace-pre-wrap">{@html codeSnippet.split('\n').map((line) => {
+let htmlLine = line
+	.replace(/\bconst\b/g, '<span class="text-purple-400">const</span>')
+	.replace(/\bawait\b/g, '<span class="text-purple-400">await</span>')
+	.replace(/\bapi\b/g, '<span class="text-blue-400">api</span>')
+	.replace(/\bresponse\b/g, '<span class="text-blue-400">response</span>')
+	.replace(/\bjson\b/g, '<span class="text-yellow-400">json</span>')
+	.replace(/\bconsole\b/g, '<span class="text-blue-400">console</span>')
+	.replace(/\blog\b/g, '<span class="text-yellow-400">log</span>')
+	.replace(/\bdata\b/g, '<span class="text-blue-400">data</span>')
+	.replace(/'/g, '<span class="text-green-400">\'$&\'</span>')
+return htmlLine
+}).join('\n')}</pre>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>