@xbg.solutions/create-frontend 1.1.2 → 1.2.0

package/src/registry/blocks/stats-section/StatsSection03.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Stat {
+		label?: string;
+		value: string;
+		description?: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		stats?: Stat[];
+	}
+
+	const defaultStats: Stat[] = [
+		{
+			value: '42,263',
+			description: 'Each stat should include a bold numerical figure followed by a brief, compelling description.'
+		},
+		{
+			value: '$23M',
+			description: 'Each stat should include a bold numerical figure followed by a brief, compelling description.'
+		}
+	];
+
+	let { class: className = '', title = 'Data-driven highlights that showcase impact', description = 'Add a concise value statement that explains how your metrics demonstrate success and growth. Focus on transformation and measurable outcomes.', stats = defaultStats }: 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="grid grid-cols-1 gap-8 sm:grid-cols-2 sm:items-center">
+			<div class="aspect-video w-full rounded-lg bg-muted flex items-center justify-center">
+				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="text-muted-foreground">
+					<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>
+				<p class="text-xs uppercase tracking-widest text-muted-foreground">Stats Section</p>
+				<h2 class="mt-2 text-3xl sm:text-4xl font-bold tracking-tight">
+					{title}
+				</h2>
+				<p class="mt-3 text-sm text-muted-foreground max-w-lg">
+					{description}
+				</p>
+
+				<div class="mt-6 grid grid-cols-2 gap-6">
+					{#each stats as stat (stat.value)}
+						<div>
+							<p class="text-4xl font-bold">
+								{stat.value}
+							</p>
+							<p class="text-sm text-muted-foreground mt-2">
+								{stat.description}
+							</p>
+						</div>
+					{/each}
+				</div>
+			</div>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/stats-section/StatsSection04.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Stat {
+		label?: string;
+		value: string;
+		description?: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		stats?: Stat[];
+	}
+
+	const defaultStats: Stat[] = [
+		{
+			label: 'Stat title',
+			value: '2,400%',
+			description: 'Each stat should include a bold numerical figure followed by a brief, compelling description.'
+		},
+		{
+			label: 'Stat title',
+			value: '$410K',
+			description: 'Each stat should include a bold numerical figure followed by a brief, compelling description.'
+		},
+		{
+			label: 'Stat title',
+			value: '11,000',
+			description: 'Each stat should include a bold numerical figure followed by a brief, compelling description.'
+		}
+	];
+
+	let { class: className = '', title = 'Data-driven highlights that showcase impact', description = 'Add a concise value statement that explains how your metrics demonstrate success and growth. Focus on transformation and measurable outcomes.', stats = defaultStats }: 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>
+			<p class="text-xs uppercase tracking-widest text-muted-foreground">Stats Section</p>
+			<h2 class="mt-2 text-3xl sm:text-4xl font-bold tracking-tight">
+				{title}
+			</h2>
+			<p class="mt-3 text-sm text-muted-foreground max-w-lg">
+				{description}
+			</p>
+		</div>
+
+		<div class="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-3">
+			{#each stats as stat (stat.value)}
+				<div class="rounded-lg border bg-background p-6">
+					<p class="text-xs font-medium text-muted-foreground">
+						{stat.label || 'Stat title'}
+					</p>
+					<p class="mt-1 text-3xl font-bold">
+						{stat.value}
+					</p>
+					<p class="mt-2 text-sm text-muted-foreground">
+						{stat.description}
+					</p>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/stats-section/StatsSection05.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Stat {
+		label?: string;
+		value: string;
+		description?: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		stats?: Stat[];
+	}
+
+	const defaultStats: Stat[] = [
+		{
+			value: '124%',
+			description: 'Each stat should include a bold numerical figure followed by a brief, compelling description.'
+		},
+		{
+			value: '88%',
+			description: 'Each stat should include a bold numerical figure followed by a brief, compelling description.'
+		},
+		{
+			value: '25%',
+			description: 'Each stat should include a bold numerical figure followed by a brief, compelling description.'
+		}
+	];
+
+	let { class: className = '', title = 'Data-driven highlights that showcase impact', description = 'Add a concise value statement that explains how your metrics demonstrate success and growth. Focus on transformation and measurable outcomes.', stats = defaultStats }: 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>
+			<p class="text-xs uppercase tracking-widest opacity-70">Stats Section</p>
+			<h2 class="mt-2 text-3xl sm:text-4xl font-bold tracking-tight">
+				{title}
+			</h2>
+			<p class="mt-3 text-sm opacity-60 max-w-lg">
+				{description}
+			</p>
+		</div>
+
+		<div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-3">
+			{#each stats as stat (stat.value)}
+				<div>
+					<p class="text-4xl font-bold">
+						{stat.value}
+					</p>
+					<p class="text-sm opacity-60 mt-2">
+						{stat.description}
+					</p>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/stats-section/StatsSection06.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Stat {
+		label?: string;
+		value: string;
+		description?: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		stats?: Stat[];
+	}
+
+	const defaultStats: Stat[] = [
+		{
+			value: '124%',
+			description: 'Each stat should include a bold numerical figure followed by a brief, compelling description.'
+		},
+		{
+			value: '88%',
+			description: 'Each stat should include a bold numerical figure followed by a brief, compelling description.'
+		},
+		{
+			value: '25%',
+			description: 'Each stat should include a bold numerical figure followed by a brief, compelling description.'
+		}
+	];
+
+	let { class: className = '', title, description, stats = defaultStats }: Props = $props();
+</script>
+
+<section class={cn("w-full bg-background py-12 px-4 sm:px-6 lg:px-8", className)}>
+	<div class="mx-auto max-w-4xl grid grid-cols-1 gap-8 text-center sm:grid-cols-3">
+		{#each stats as stat (stat.value)}
+			<div>
+				<p class="text-4xl font-bold">
+					{stat.value}
+				</p>
+				<p class="text-sm text-muted-foreground mt-2">
+					{stat.description}
+				</p>
+			</div>
+		{/each}
+	</div>
+</section>

package/src/registry/blocks/stats-section/StatsSection07.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Stat {
+		label?: string;
+		value: string;
+		description?: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		stats?: Stat[];
+	}
+
+	const defaultStats: Stat[] = [
+		{
+			value: '256K',
+			description: 'Each stat should include a bold numerical figure followed by a brief, compelling description.'
+		},
+		{
+			value: '142%',
+			description: 'Each stat should include a bold numerical figure followed by a brief, compelling description.'
+		},
+		{
+			value: '$34.7M',
+			description: 'Each stat should include a bold numerical figure followed by a brief, compelling description.'
+		},
+		{
+			value: '98.5%',
+			description: 'Each stat should include a bold numerical figure followed by a brief, compelling description.'
+		}
+	];
+
+	let { class: className = '', title = 'Data-driven highlights that showcase impact', description = 'Add a concise value statement that explains how your metrics demonstrate success and growth. Focus on transformation and measurable outcomes.', stats = defaultStats }: 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="grid grid-cols-1 gap-8 sm:grid-cols-[1fr_2fr] sm:items-start">
+			<div>
+				<p class="text-xs uppercase tracking-widest text-muted-foreground">Stats Section</p>
+				<h2 class="mt-2 text-3xl sm:text-4xl font-bold tracking-tight">
+					{title}
+				</h2>
+				<p class="mt-3 text-sm text-muted-foreground max-w-lg">
+					{description}
+				</p>
+			</div>
+
+			<div class="grid grid-cols-2 gap-x-8 gap-y-6">
+				{#each stats as stat (stat.value)}
+					<div>
+						<p class="text-4xl font-bold">
+							{stat.value}
+						</p>
+						<p class="text-sm text-muted-foreground mt-2">
+							{stat.description}
+						</p>
+					</div>
+				{/each}
+			</div>
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,7 @@
+export { default as StatsSection01 } from './StatsSection01.svelte';
+export { default as StatsSection02 } from './StatsSection02.svelte';
+export { default as StatsSection03 } from './StatsSection03.svelte';
+export { default as StatsSection04 } from './StatsSection04.svelte';
+export { default as StatsSection05 } from './StatsSection05.svelte';
+export { default as StatsSection06 } from './StatsSection06.svelte';
+export { default as StatsSection07 } from './StatsSection07.svelte';

package/src/registry/blocks/store-navbar/StoreNavbar01.svelte

@@ -0,0 +1,101 @@
+<!--
+  StoreNavbar01.svelte
+  Standard e-commerce navbar: logo left, navigation links center (Men, Women, Kids, Sale, New Arrivals),
+  icons right (search, wishlist heart, user, cart with badge count).
+  Mobile: hamburger menu button. White bg with bottom border.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface Props {
+    class?: string;
+    cartCount?: number;
+    wishlistCount?: number;
+  }
+
+  let { class: className = '', cartCount = 3, wishlistCount = 2 }: Props = $props();
+
+  let mobileOpen = $state(false);
+</script>
+
+<nav class={cn('w-full border-b bg-white', className)}>
+  <!-- Desktop -->
+  <div class="hidden h-14 items-center gap-8 px-6 md:flex">
+    <!-- Logo -->
+    <div class="flex items-center">
+      <div class="text-lg font-bold">Store</div>
+    </div>
+
+    <!-- Nav links -->
+    <div class="flex items-center gap-6">
+      <a href="#" class="text-sm font-medium text-gray-700 hover:text-gray-900">Men</a>
+      <a href="#" class="text-sm font-medium text-gray-700 hover:text-gray-900">Women</a>
+      <a href="#" class="text-sm font-medium text-gray-700 hover:text-gray-900">Kids</a>
+      <a href="#" class="text-sm font-medium text-gray-700 hover:text-gray-900">Sale</a>
+      <a href="#" class="text-sm font-medium text-gray-700 hover:text-gray-900">New Arrivals</a>
+    </div>
+
+    <!-- Icons right -->
+    <div class="ml-auto flex items-center gap-4">
+      <button type="button" class="flex h-8 w-8 items-center justify-center rounded-full hover:bg-gray-100">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+      </button>
+
+      <button type="button" class="relative flex h-8 w-8 items-center justify-center rounded-full hover:bg-gray-100">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+        {#if wishlistCount > 0}
+          <span class="absolute right-0 top-0 flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-0.5 text-[10px] font-bold text-white">{wishlistCount}</span>
+        {/if}
+      </button>
+
+      <button type="button" class="flex h-8 w-8 items-center justify-center rounded-full hover:bg-gray-100">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
+      </button>
+
+      <button type="button" class="relative flex h-8 w-8 items-center justify-center rounded-full hover:bg-gray-100">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
+        {#if cartCount > 0}
+          <span class="absolute right-0 top-0 flex h-4 min-w-4 items-center justify-center rounded-full bg-blue-600 px-0.5 text-[10px] font-bold text-white">{cartCount}</span>
+        {/if}
+      </button>
+    </div>
+  </div>
+
+  <!-- Mobile -->
+  <div class="flex h-14 items-center justify-between px-4 md:hidden">
+    <button type="button" onclick={() => (mobileOpen = !mobileOpen)} class="flex h-8 w-8 items-center justify-center rounded-md hover:bg-gray-100">
+      {#if mobileOpen}
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+      {:else}
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
+      {/if}
+    </button>
+    <div class="text-lg font-bold">Store</div>
+    <div class="relative flex h-8 w-8 items-center justify-center rounded-full hover:bg-gray-100">
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
+      {#if cartCount > 0}
+        <span class="absolute right-0 top-0 flex h-4 min-w-4 items-center justify-center rounded-full bg-blue-600 px-0.5 text-[10px] font-bold text-white">{cartCount}</span>
+      {/if}
+    </div>
+  </div>
+
+  <!-- Mobile menu -->
+  {#if mobileOpen}
+    <div class="border-t bg-white px-4 pb-4 md:hidden">
+      <a href="#" class="block rounded-md px-2 py-2 text-sm text-gray-700 hover:bg-gray-100">Men</a>
+      <a href="#" class="block rounded-md px-2 py-2 text-sm text-gray-700 hover:bg-gray-100">Women</a>
+      <a href="#" class="block rounded-md px-2 py-2 text-sm text-gray-700 hover:bg-gray-100">Kids</a>
+      <a href="#" class="block rounded-md px-2 py-2 text-sm text-gray-700 hover:bg-gray-100">Sale</a>
+      <a href="#" class="block rounded-md px-2 py-2 text-sm text-gray-700 hover:bg-gray-100">New Arrivals</a>
+      <hr class="my-3" />
+      <button type="button" class="flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm text-gray-700 hover:bg-gray-100">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+        Search
+      </button>
+      <button type="button" class="flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm text-gray-700 hover:bg-gray-100">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
+        Account
+      </button>
+    </div>
+  {/if}
+</nav>

package/src/registry/blocks/store-navbar/StoreNavbar02.svelte

@@ -0,0 +1,65 @@
+<!--
+  StoreNavbar02.svelte
+  Navbar with search bar: logo left, center full search input with search icon,
+  right: user icon, cart icon with badge.
+  Below: category nav strip (All | Clothing | Shoes | Bags | Accessories | Sale)
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface Props {
+    class?: string;
+    cartCount?: number;
+  }
+
+  let { class: className = '', cartCount = 2 }: Props = $props();
+
+  let searchQuery = $state('');
+</script>
+
+<nav class={cn('w-full border-b bg-white', className)}>
+  <!-- Main navbar -->
+  <div class="flex h-14 items-center gap-4 px-6 md:gap-6">
+    <!-- Logo -->
+    <div class="flex items-center">
+      <div class="text-lg font-bold">Store</div>
+    </div>
+
+    <!-- Search bar center -->
+    <div class="flex flex-1 items-center rounded-lg border border-gray-300 bg-gray-50 px-3 py-2">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-400"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+      <input
+        type="text"
+        bind:value={searchQuery}
+        placeholder="Search for products..."
+        class="ml-2 flex-1 border-none bg-transparent text-sm outline-none placeholder:text-gray-500"
+      />
+    </div>
+
+    <!-- Icons right -->
+    <div class="flex items-center gap-4">
+      <button type="button" class="flex h-8 w-8 items-center justify-center rounded-full hover:bg-gray-100">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
+      </button>
+
+      <button type="button" class="relative flex h-8 w-8 items-center justify-center rounded-full hover:bg-gray-100">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
+        {#if cartCount > 0}
+          <span class="absolute right-0 top-0 flex h-4 min-w-4 items-center justify-center rounded-full bg-blue-600 px-0.5 text-[10px] font-bold text-white">{cartCount}</span>
+        {/if}
+      </button>
+    </div>
+  </div>
+
+  <!-- Category strip -->
+  <div class="border-t bg-gray-50 px-6">
+    <div class="flex gap-6">
+      <a href="#" class="rounded-none py-2 text-sm font-medium text-gray-700 hover:text-gray-900 border-b-2 border-transparent hover:border-gray-900">All</a>
+      <a href="#" class="rounded-none py-2 text-sm font-medium text-gray-700 hover:text-gray-900 border-b-2 border-transparent hover:border-gray-900">Clothing</a>
+      <a href="#" class="rounded-none py-2 text-sm font-medium text-gray-700 hover:text-gray-900 border-b-2 border-transparent hover:border-gray-900">Shoes</a>
+      <a href="#" class="rounded-none py-2 text-sm font-medium text-gray-700 hover:text-gray-900 border-b-2 border-transparent hover:border-gray-900">Bags</a>
+      <a href="#" class="rounded-none py-2 text-sm font-medium text-gray-700 hover:text-gray-900 border-b-2 border-transparent hover:border-gray-900">Accessories</a>
+      <a href="#" class="rounded-none py-2 text-sm font-medium text-red-600 hover:text-red-700 border-b-2 border-transparent hover:border-red-700">Sale</a>
+    </div>
+  </div>
+</nav>

package/src/registry/blocks/store-navbar/StoreNavbar03.svelte

@@ -0,0 +1,83 @@
+<!--
+  StoreNavbar03.svelte
+  Dark e-commerce navbar: dark bg, logo left, nav links center (white text),
+  right: search icon, cart with badge, "Sign in" text button. White/light text throughout.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface Props {
+    class?: string;
+    cartCount?: number;
+  }
+
+  let { class: className = '', cartCount = 1 }: Props = $props();
+
+  let mobileOpen = $state(false);
+</script>
+
+<nav class={cn('w-full border-b bg-gray-950', className)}>
+  <!-- Desktop -->
+  <div class="hidden h-14 items-center gap-8 px-6 md:flex">
+    <!-- Logo -->
+    <div class="flex items-center">
+      <div class="text-lg font-bold text-white">Store</div>
+    </div>
+
+    <!-- Nav links -->
+    <div class="flex items-center gap-6">
+      <a href="#" class="text-sm font-medium text-gray-300 hover:text-white">Men</a>
+      <a href="#" class="text-sm font-medium text-gray-300 hover:text-white">Women</a>
+      <a href="#" class="text-sm font-medium text-gray-300 hover:text-white">Kids</a>
+      <a href="#" class="text-sm font-medium text-gray-300 hover:text-white">New</a>
+      <a href="#" class="text-sm font-medium text-gray-300 hover:text-white">Sale</a>
+    </div>
+
+    <!-- Icons and button right -->
+    <div class="ml-auto flex items-center gap-4">
+      <button type="button" class="flex h-8 w-8 items-center justify-center rounded-full hover:bg-gray-800">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-300"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+      </button>
+
+      <button type="button" class="relative flex h-8 w-8 items-center justify-center rounded-full hover:bg-gray-800">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-300"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
+        {#if cartCount > 0}
+          <span class="absolute right-0 top-0 flex h-4 min-w-4 items-center justify-center rounded-full bg-white px-0.5 text-[10px] font-bold text-gray-950">{cartCount}</span>
+        {/if}
+      </button>
+
+      <button type="button" class="text-sm font-medium text-gray-300 hover:text-white">Sign in</button>
+    </div>
+  </div>
+
+  <!-- Mobile -->
+  <div class="flex h-14 items-center justify-between px-4 md:hidden">
+    <button type="button" onclick={() => (mobileOpen = !mobileOpen)} class="flex h-8 w-8 items-center justify-center rounded-md hover:bg-gray-800">
+      {#if mobileOpen}
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+      {:else}
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
+      {/if}
+    </button>
+    <div class="text-lg font-bold text-white">Store</div>
+    <div class="relative flex h-8 w-8 items-center justify-center rounded-full hover:bg-gray-800">
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-300"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
+      {#if cartCount > 0}
+        <span class="absolute right-0 top-0 flex h-4 min-w-4 items-center justify-center rounded-full bg-white px-0.5 text-[10px] font-bold text-gray-950">{cartCount}</span>
+      {/if}
+    </div>
+  </div>
+
+  <!-- Mobile menu -->
+  {#if mobileOpen}
+    <div class="border-t border-gray-800 bg-gray-950 px-4 pb-4 md:hidden">
+      <a href="#" class="block rounded-md px-2 py-2 text-sm text-gray-300 hover:bg-gray-800">Men</a>
+      <a href="#" class="block rounded-md px-2 py-2 text-sm text-gray-300 hover:bg-gray-800">Women</a>
+      <a href="#" class="block rounded-md px-2 py-2 text-sm text-gray-300 hover:bg-gray-800">Kids</a>
+      <a href="#" class="block rounded-md px-2 py-2 text-sm text-gray-300 hover:bg-gray-800">New</a>
+      <a href="#" class="block rounded-md px-2 py-2 text-sm text-gray-300 hover:bg-gray-800">Sale</a>
+      <hr class="my-3 border-gray-800" />
+      <button type="button" class="w-full text-left rounded-md px-2 py-2 text-sm text-gray-300 hover:bg-gray-800">Sign in</button>
+    </div>
+  {/if}
+</nav>