@xbg.solutions/create-frontend 1.1.2 → 1.2.0

package/src/registry/blocks/forms/SettingsBlock.svelte

@@ -0,0 +1,329 @@
+<!--
+  SettingsBlock.svelte
+  Tabbed settings page with Profile, Account, Appearance, Notifications, Display tabs.
+  Vertical tab list on the left, form content on the right.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import {
+    Button,
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+    Input,
+    Label,
+    Tabs,
+    TabsList,
+    TabsTrigger,
+    TabsContent,
+    Checkbox,
+    RadioGroup,
+    RadioGroupItem,
+    Textarea
+  } from '$lib/components/ui';
+  import Separator from '$lib/components/ui/Separator.svelte';
+
+  let {
+    class: className = '',
+    activeTab = 'profile'
+  }: {
+    class?: string;
+    activeTab?: string;
+  } = $props();
+
+  // Profile form state
+  let profileName = $state('');
+  let profileEmail = $state('');
+  let profileBio = $state('');
+  let profileUrl1 = $state('');
+  let profileUrl2 = $state('');
+
+  // Account form state
+  let accountLanguage = $state('en');
+  let accountTimezone = $state('utc');
+
+  // Appearance state
+  let selectedTheme = $state('light');
+
+  // Notifications state
+  let emailNotifications = $state(true);
+  let pushNotifications = $state(false);
+  let marketingEmails = $state(false);
+  let securityEmails = $state(true);
+
+  // Display state
+  let displayMode = $state('comfortable');
+
+  const tabs = [
+    { value: 'profile', label: 'Profile' },
+    { value: 'account', label: 'Account' },
+    { value: 'appearance', label: 'Appearance' },
+    { value: 'notifications', label: 'Notifications' },
+    { value: 'display', label: 'Display' }
+  ];
+
+  const themes = [
+    { value: 'light', label: 'Light', description: 'Clean light theme' },
+    { value: 'dark', label: 'Dark', description: 'Easy on the eyes' },
+    { value: 'system', label: 'System', description: 'Match OS setting' }
+  ];
+</script>
+
+<div class={cn('mx-auto max-w-4xl space-y-6 p-6', className)}>
+  <div>
+    <h2 class="text-2xl font-bold tracking-tight">Settings</h2>
+    <p class="text-muted-foreground">Manage your account settings and preferences.</p>
+  </div>
+  <Separator />
+
+  <Tabs value={activeTab} orientation="vertical">
+    <div class="flex gap-8">
+      <!-- Vertical Tab List -->
+      <aside class="w-48 shrink-0">
+        <TabsList class="flex flex-col items-stretch gap-1 bg-transparent p-0">
+          {#each tabs as tab}
+            <TabsTrigger
+              value={tab.value}
+              class="justify-start rounded-md px-3 py-1.5 text-sm font-medium data-[state=active]:bg-muted"
+            >
+              {tab.label}
+            </TabsTrigger>
+          {/each}
+        </TabsList>
+      </aside>
+
+      <!-- Tab Content -->
+      <div class="flex-1">
+        <!-- Profile Tab -->
+        <TabsContent value="profile">
+          <Card>
+            <CardHeader>
+              <CardTitle>Profile</CardTitle>
+              <CardDescription>This is how others will see you on the site.</CardDescription>
+            </CardHeader>
+            <CardContent class="space-y-4">
+              <div class="space-y-2">
+                <Label htmlFor="settings-name">Name</Label>
+                <Input
+                  placeholder="Your name"
+                  bind:value={profileName}
+                />
+                <p class="text-xs text-muted-foreground">
+                  This is your public display name. It can be your real name or a pseudonym.
+                </p>
+              </div>
+              <div class="space-y-2">
+                <Label htmlFor="settings-email">Email</Label>
+                <Input
+                  type="email"
+                  placeholder="email@example.com"
+                  bind:value={profileEmail}
+                />
+                <p class="text-xs text-muted-foreground">
+                  You can manage verified email addresses in your email settings.
+                </p>
+              </div>
+              <div class="space-y-2">
+                <Label htmlFor="settings-bio">Bio</Label>
+                <Textarea
+                  placeholder="Tell us a little bit about yourself"
+                  bind:value={profileBio}
+                />
+                <p class="text-xs text-muted-foreground">
+                  You can @mention other users and organizations to link to them.
+                </p>
+              </div>
+              <div class="space-y-2">
+                <Label>URLs</Label>
+                <p class="text-xs text-muted-foreground">
+                  Add links to your website, blog, or social media profiles.
+                </p>
+                <Input
+                  placeholder="https://example.com"
+                  bind:value={profileUrl1}
+                />
+                <Input
+                  placeholder="https://twitter.com/username"
+                  bind:value={profileUrl2}
+                />
+              </div>
+            </CardContent>
+            <CardFooter>
+              <Button>Update profile</Button>
+            </CardFooter>
+          </Card>
+        </TabsContent>
+
+        <!-- Account Tab -->
+        <TabsContent value="account">
+          <Card>
+            <CardHeader>
+              <CardTitle>Account</CardTitle>
+              <CardDescription>Update your account settings. Set your preferred language and timezone.</CardDescription>
+            </CardHeader>
+            <CardContent class="space-y-4">
+              <div class="space-y-2">
+                <Label htmlFor="settings-language">Language</Label>
+                <Input
+                  placeholder="English"
+                  bind:value={accountLanguage}
+                />
+                <p class="text-xs text-muted-foreground">
+                  This is the language that will be used in the dashboard.
+                </p>
+              </div>
+              <div class="space-y-2">
+                <Label htmlFor="settings-timezone">Timezone</Label>
+                <Input
+                  placeholder="UTC"
+                  bind:value={accountTimezone}
+                />
+                <p class="text-xs text-muted-foreground">
+                  Your timezone is used to display dates and times correctly.
+                </p>
+              </div>
+            </CardContent>
+            <CardFooter>
+              <Button>Update account</Button>
+            </CardFooter>
+          </Card>
+        </TabsContent>
+
+        <!-- Appearance Tab -->
+        <TabsContent value="appearance">
+          <Card>
+            <CardHeader>
+              <CardTitle>Appearance</CardTitle>
+              <CardDescription>Customize the appearance of the app. Automatically switch between day and night themes.</CardDescription>
+            </CardHeader>
+            <CardContent class="space-y-4">
+              <div class="space-y-2">
+                <Label>Theme</Label>
+                <p class="text-xs text-muted-foreground">Select the theme for the dashboard.</p>
+              </div>
+              <div class="grid grid-cols-3 gap-4">
+                {#each themes as theme}
+                  <button
+                    type="button"
+                    class={cn(
+                      'flex flex-col items-center gap-2 rounded-lg border-2 p-4 transition-colors hover:bg-muted',
+                      selectedTheme === theme.value
+                        ? 'border-primary'
+                        : 'border-transparent'
+                    )}
+                    onclick={() => (selectedTheme = theme.value)}
+                  >
+                    <!-- Theme preview placeholder -->
+                    <div class={cn(
+                      'flex h-20 w-full items-center justify-center rounded-md border',
+                      theme.value === 'dark' ? 'bg-zinc-900' : 'bg-white'
+                    )}>
+                      <div class="space-y-1">
+                        <div class={cn('h-1.5 w-12 rounded', theme.value === 'dark' ? 'bg-zinc-700' : 'bg-zinc-200')} />
+                        <div class={cn('h-1.5 w-8 rounded', theme.value === 'dark' ? 'bg-zinc-700' : 'bg-zinc-200')} />
+                      </div>
+                    </div>
+                    <span class="text-sm font-medium">{theme.label}</span>
+                  </button>
+                {/each}
+              </div>
+            </CardContent>
+            <CardFooter>
+              <Button>Update appearance</Button>
+            </CardFooter>
+          </Card>
+        </TabsContent>
+
+        <!-- Notifications Tab -->
+        <TabsContent value="notifications">
+          <Card>
+            <CardHeader>
+              <CardTitle>Notifications</CardTitle>
+              <CardDescription>Configure how you receive notifications.</CardDescription>
+            </CardHeader>
+            <CardContent class="space-y-6">
+              <div class="space-y-4">
+                <h4 class="text-sm font-medium">Email Notifications</h4>
+                <div class="space-y-3">
+                  <label class="flex items-center gap-3">
+                    <Checkbox bind:checked={emailNotifications} />
+                    <div>
+                      <p class="text-sm font-medium">Communication emails</p>
+                      <p class="text-xs text-muted-foreground">Receive emails about your account activity.</p>
+                    </div>
+                  </label>
+                  <label class="flex items-center gap-3">
+                    <Checkbox bind:checked={marketingEmails} />
+                    <div>
+                      <p class="text-sm font-medium">Marketing emails</p>
+                      <p class="text-xs text-muted-foreground">Receive emails about new products, features, and more.</p>
+                    </div>
+                  </label>
+                  <label class="flex items-center gap-3">
+                    <Checkbox bind:checked={securityEmails} />
+                    <div>
+                      <p class="text-sm font-medium">Security emails</p>
+                      <p class="text-xs text-muted-foreground">Receive emails about your account security.</p>
+                    </div>
+                  </label>
+                </div>
+              </div>
+              <Separator />
+              <div class="space-y-4">
+                <h4 class="text-sm font-medium">Push Notifications</h4>
+                <label class="flex items-center gap-3">
+                  <Checkbox bind:checked={pushNotifications} />
+                  <div>
+                    <p class="text-sm font-medium">Push notifications</p>
+                    <p class="text-xs text-muted-foreground">Receive push notifications on your devices.</p>
+                  </div>
+                </label>
+              </div>
+            </CardContent>
+            <CardFooter>
+              <Button>Update notifications</Button>
+            </CardFooter>
+          </Card>
+        </TabsContent>
+
+        <!-- Display Tab -->
+        <TabsContent value="display">
+          <Card>
+            <CardHeader>
+              <CardTitle>Display</CardTitle>
+              <CardDescription>Turn items on or off to control what is displayed in the app.</CardDescription>
+            </CardHeader>
+            <CardContent class="space-y-4">
+              <div class="space-y-2">
+                <Label>Display Mode</Label>
+                <p class="text-xs text-muted-foreground">Set the display density for the interface.</p>
+              </div>
+              <RadioGroup name="display-mode" value={displayMode} onchange={({ value }: { value: string }) => displayMode = value}>
+                <label class="flex items-center gap-3">
+                  <RadioGroupItem value="comfortable" />
+                  <div>
+                    <p class="text-sm font-medium">Comfortable</p>
+                    <p class="text-xs text-muted-foreground">Default spacing with more room to breathe.</p>
+                  </div>
+                </label>
+                <label class="flex items-center gap-3">
+                  <RadioGroupItem value="compact" />
+                  <div>
+                    <p class="text-sm font-medium">Compact</p>
+                    <p class="text-xs text-muted-foreground">Tighter spacing for more content density.</p>
+                  </div>
+                </label>
+              </RadioGroup>
+            </CardContent>
+            <CardFooter>
+              <Button>Update display</Button>
+            </CardFooter>
+          </Card>
+        </TabsContent>
+      </div>
+    </div>
+  </Tabs>
+</div>

package/src/registry/blocks/forms/index.ts

@@ -0,0 +1 @@
+export { default as SettingsBlock } from './SettingsBlock.svelte';

package/src/registry/blocks/gallery-section/GallerySection01.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		images?: Array<{ src?: string; alt?: string; caption?: string }>;
+	}
+
+	let {
+		class: className,
+		title = 'Explore our gallery',
+		description,
+		images = Array.from({ length: 12 }, (_, i) => ({ alt: `Image ${i + 1}` }))
+	}: Props = $props();
+
+	const imagePlaceholder = `<div class="w-full h-full bg-muted rounded-lg flex items-center justify-center overflow-hidden"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" 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>`;
+</script>
+
+<section class={cn('w-full px-4 py-16', className)}>
+	<div class="mx-auto max-w-6xl">
+		{#if title || description}
+			<div class="mb-8 text-center">
+				<p class="mb-2 text-sm font-medium text-muted-foreground">Gallery Section</p>
+				{#if title}
+					<h2 class="mb-2 text-3xl font-bold tracking-tight sm:text-4xl">{title}</h2>
+				{/if}
+				{#if description}
+					<p class="text-lg text-muted-foreground">{description}</p>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="mt-8 grid grid-cols-2 gap-3 sm:grid-cols-3">
+			{#each images.slice(0, 12) as image}
+				<div class="aspect-square">
+					{@html imagePlaceholder}
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/gallery-section/GallerySection02.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		images?: Array<{ src?: string; alt?: string; caption?: string }>;
+	}
+
+	let {
+		class: className,
+		title = 'Explore our gallery',
+		description,
+		images = Array.from({ length: 6 }, (_, i) => ({ alt: `Image ${i + 1}` }))
+	}: Props = $props();
+
+	const imagePlaceholder = `<div class="w-full h-full bg-muted rounded-lg flex items-center justify-center overflow-hidden"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" 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>`;
+
+	const aspectRatios = ['aspect-square', 'aspect-square', 'aspect-[3/4]', 'aspect-[3/4]', 'aspect-square', 'aspect-square'];
+</script>
+
+<section class={cn('w-full px-4 py-16', className)}>
+	<div class="mx-auto max-w-6xl">
+		{#if title || description}
+			<div class="mb-8 text-center">
+				<p class="mb-2 text-sm font-medium text-muted-foreground">Gallery Section</p>
+				{#if title}
+					<h2 class="mb-2 text-3xl font-bold tracking-tight sm:text-4xl">{title}</h2>
+				{/if}
+				{#if description}
+					<p class="text-lg text-muted-foreground">{description}</p>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="mt-8 grid grid-cols-2 gap-3 sm:grid-cols-3">
+			{#each images.slice(0, 6) as image, index}
+				<div class={aspectRatios[index]}>
+					{@html imagePlaceholder}
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/gallery-section/GallerySection03.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		images?: Array<{ src?: string; alt?: string; caption?: string }>;
+	}
+
+	let {
+		class: className,
+		title = 'Explore our gallery',
+		description,
+		images = Array.from({ length: 8 }, (_, i) => ({ alt: `Image ${i + 1}` }))
+	}: Props = $props();
+
+	const imagePlaceholder = `<div class="w-full h-full bg-muted rounded-lg flex items-center justify-center overflow-hidden"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" 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>`;
+</script>
+
+<section class={cn('w-full px-4 py-16', className)}>
+	<div class="mx-auto max-w-6xl">
+		{#if title || description}
+			<div class="mb-8 text-center">
+				<p class="mb-2 text-sm font-medium text-muted-foreground">Gallery Section</p>
+				{#if title}
+					<h2 class="mb-2 text-3xl font-bold tracking-tight sm:text-4xl">{title}</h2>
+				{/if}
+				{#if description}
+					<p class="text-lg text-muted-foreground">{description}</p>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="mt-8 grid grid-cols-2 gap-2 sm:grid-cols-4">
+			{#each images.slice(0, 8) as image}
+				<div class="aspect-square">
+					{@html imagePlaceholder}
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/gallery-section/GallerySection04.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		images?: Array<{ src?: string; alt?: string; caption?: string }>;
+	}
+
+	let {
+		class: className,
+		title = 'Explore our gallery',
+		description,
+		images = Array.from({ length: 5 }, (_, i) => ({ alt: `Image ${i + 1}` }))
+	}: Props = $props();
+
+	const imagePlaceholder = `<div class="w-full h-full bg-muted rounded-lg flex items-center justify-center overflow-hidden"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" 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>`;
+</script>
+
+<section class={cn('w-full px-4 py-16', className)}>
+	<div class="mx-auto max-w-6xl">
+		{#if title || description}
+			<div class="mb-8 text-center">
+				<p class="mb-2 text-sm font-medium text-muted-foreground">Gallery Section</p>
+				{#if title}
+					<h2 class="mb-2 text-3xl font-bold tracking-tight sm:text-4xl">{title}</h2>
+				{/if}
+				{#if description}
+					<p class="text-lg text-muted-foreground">{description}</p>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="mt-8">
+			<div class="aspect-[16/7] w-full">
+				{@html imagePlaceholder}
+			</div>
+
+			<div class="mt-3 grid grid-cols-2 gap-3 sm:grid-cols-4">
+				{#each images.slice(1, 5) as image}
+					<div class="aspect-square">
+						{@html imagePlaceholder}
+					</div>
+				{/each}
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/gallery-section/GallerySection05.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		images?: Array<{ src?: string; alt?: string; caption?: string }>;
+	}
+
+	let {
+		class: className,
+		title = 'Explore our gallery',
+		description,
+		images = Array.from({ length: 9 }, (_, i) => ({ alt: `Image ${i + 1}` }))
+	}: Props = $props();
+
+	const imagePlaceholder = `<div class="w-full h-full bg-muted rounded-lg flex items-center justify-center overflow-hidden"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" 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>`;
+
+	const aspectRatios = ['aspect-square', 'aspect-[3/4]', 'aspect-square', 'aspect-[3/4]', 'aspect-square', 'aspect-square', 'aspect-[3/4]', 'aspect-square', 'aspect-[3/4]'];
+</script>
+
+<section class={cn('w-full px-4 py-16', className)}>
+	<div class="mx-auto max-w-6xl">
+		{#if title || description}
+			<div class="mb-8 text-center">
+				<p class="mb-2 text-sm font-medium text-muted-foreground">Gallery Section</p>
+				{#if title}
+					<h2 class="mb-2 text-3xl font-bold tracking-tight sm:text-4xl">{title}</h2>
+				{/if}
+				{#if description}
+					<p class="text-lg text-muted-foreground">{description}</p>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="mt-8 columns-2 gap-3 space-y-3 sm:columns-3">
+			{#each images.slice(0, 9) as image, index}
+				<div class="break-inside-avoid {aspectRatios[index]}">
+					{@html imagePlaceholder}
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/gallery-section/GallerySection06.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		images?: Array<{ src?: string; alt?: string; caption?: string }>;
+	}
+
+	let {
+		class: className,
+		title = 'Explore our gallery',
+		description,
+		images = Array.from({ length: 5 }, (_, i) => ({ alt: `Image ${i + 1}` }))
+	}: Props = $props();
+
+	const imagePlaceholder = `<div class="w-full h-full bg-muted rounded-lg flex items-center justify-center overflow-hidden"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" 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>`;
+</script>
+
+<section class={cn('w-full px-4 py-16', className)}>
+	<div class="mx-auto max-w-6xl">
+		{#if title || description}
+			<div class="mb-8 text-center">
+				<p class="mb-2 text-sm font-medium text-muted-foreground">Gallery Section</p>
+				{#if title}
+					<h2 class="mb-2 text-3xl font-bold tracking-tight sm:text-4xl">{title}</h2>
+				{/if}
+				{#if description}
+					<p class="text-lg text-muted-foreground">{description}</p>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="mt-8 grid grid-cols-1 gap-3 sm:grid-cols-2">
+			<div class="aspect-square sm:row-span-2">
+				{@html imagePlaceholder}
+			</div>
+
+			<div class="grid grid-cols-2 gap-3">
+				{#each images.slice(1, 5) as image}
+					<div class="aspect-square">
+						{@html imagePlaceholder}
+					</div>
+				{/each}
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/gallery-section/GallerySection07.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		images?: Array<{ src?: string; alt?: string; caption?: string }>;
+	}
+
+	let {
+		class: className,
+		title = 'Explore our gallery',
+		description,
+		images = Array.from({ length: 12 }, (_, i) => ({ alt: `Image ${i + 1}`, caption: `Caption ${i + 1}` }))
+	}: Props = $props();
+
+	const imagePlaceholder = `<div class="w-full h-full bg-muted rounded-lg flex items-center justify-center overflow-hidden"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" 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>`;
+</script>
+
+<section class={cn('w-full px-4 py-16', className)}>
+	<div class="mx-auto max-w-6xl">
+		{#if title || description}
+			<div class="mb-8 text-center">
+				<p class="mb-2 text-sm font-medium text-muted-foreground">Gallery Section</p>
+				{#if title}
+					<h2 class="mb-2 text-3xl font-bold tracking-tight sm:text-4xl">{title}</h2>
+				{/if}
+				{#if description}
+					<p class="text-lg text-muted-foreground">{description}</p>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-3">
+			{#each images.slice(0, 12) as image}
+				<div>
+					<div class="aspect-square">
+						{@html imagePlaceholder}
+					</div>
+					{#if image.caption}
+						<p class="mt-2 text-sm text-muted-foreground">{image.caption}</p>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>