various UX fixes, as discussed (#283)

* various UX fixes, as discussed

* Update text in hero component for clarity

* Fix macOS command casing in download-dropdown

Author: MaanavD

www/src/lib/components/download-dropdown.svelte

@@ -29,7 +29,7 @@
 	// Commands to copy
 	const commands = {
 		windows: 'winget install Microsoft.FoundryLocal',
-		macos: 'brew tap microsoft/foundrylocal\nbrew install foundrylocal',
+		macos: 'brew tap microsoft/foundrylocal/foundrylocal',
 		python: 'pip install foundry-local-sdk',
 		javascript: 'npm install foundry-local-sdk',
 		csharp: 'dotnet add package Microsoft.AI.Foundry.Local',

www/src/lib/components/home/hero.svelte

@@ -7,7 +7,8 @@
 		DollarSign,
 		Shield,
 		Box,
-		ArrowRight
+		ArrowRight,
+		Rocket
 	} from 'lucide-svelte';
 	import { siteConfig } from '$lib/config';
 	import { animate } from '$lib/utils/animations';
@@ -39,10 +40,21 @@
 			});
 		}
 
-		// Stagger animation for buttons
+		// Stagger animation for buttons - handle nested structure
 		if (buttonsContainer) {
-			const buttons = Array.from(buttonsContainer.children) as HTMLElement[];
-			buttons.forEach((button, index) => {
+			const allButtons: HTMLElement[] = [];
+			// Get the first button directly
+			const firstButton = buttonsContainer.querySelector('a[href*="get-started"]') as HTMLElement;
+			if (firstButton) allButtons.push(firstButton);
+			
+			// Get buttons from the secondary actions div
+			const secondaryDiv = buttonsContainer.querySelector('div');
+			if (secondaryDiv) {
+				const secondaryButtons = Array.from(secondaryDiv.querySelectorAll('button, a')) as HTMLElement[];
+				allButtons.push(...secondaryButtons);
+			}
+			
+			allButtons.forEach((button, index) => {
 				button.style.opacity = '0';
 				button.style.transform = 'translateY(20px)';
 				button.style.transition = 'all 600ms cubic-bezier(0.4, 0, 0.2, 1)';
@@ -90,38 +102,52 @@
 			<div
 				class="inline-flex items-center rounded-full bg-primary/10 px-3 py-1 text-sm text-primary transition-all duration-300 hover:scale-105 hover:bg-primary/20"
 			>
-				<DollarSign class="mr-1 size-4" /> Completely Free
+				<DollarSign class="mr-1 size-4" /> Free to Use
 			</div>
 			<div
 				class="inline-flex items-center rounded-full bg-primary/10 px-3 py-1 text-sm text-primary transition-all duration-300 hover:scale-105 hover:bg-primary/20"
 			>
-				<Shield class="mr-1 size-4" /> Complete Data Privacy
+				<Shield class="mr-1 size-4" /> Data Privacy
 			</div>
 		</div>
 
 		<!-- Action Buttons -->
-		<div bind:this={buttonsContainer} class="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
+		<div bind:this={buttonsContainer} class="mt-8 flex flex-col items-center justify-center gap-3">
+			<!-- Primary CTA -->
 			<Button 
 				variant="default" 
 				href="https://learn.microsoft.com/en-us/azure/ai-foundry/foundry-local/get-started"
 				target="_blank"
 				rel="noopener noreferrer"
 				size="lg"
-				class="group transition-all duration-300 hover:scale-105 hover:shadow-lg"
+				class="group w-full transition-all duration-300 hover:scale-105 hover:shadow-lg sm:w-40"
 			>
+				<Rocket class="mr-2 size-4 transition-transform duration-300 group-hover:-translate-y-1" />
 				Get Started
-				<ArrowRight class="ml-2 size-4 transition-transform duration-300 group-hover:translate-x-1" />
 			</Button>
 
-			<Button 
-				variant="outline" 
-				onclick={openDownloadDropdown} 
-				size="lg" 
-				class="group border-2 transition-all duration-300 hover:scale-105 hover:shadow-lg"
-			>
-				<Download class="mr-2 size-4 transition-transform duration-300 group-hover:translate-y-0.5" />
-				Download
-			</Button>
+			<!-- Secondary Actions -->
+			<div class="flex w-full flex-col items-center gap-3 sm:flex-row sm:justify-center">
+				<Button 
+					variant="outline" 
+					onclick={openDownloadDropdown} 
+					size="lg" 
+					class="group w-full border-2 transition-all duration-300 hover:scale-105 hover:shadow-lg sm:w-40"
+				>
+					<Download class="mr-2 size-4 transition-transform duration-300 group-hover:translate-y-0.5" />
+					Download
+				</Button>
+				
+				<Button 
+					variant="outline" 
+					href="/models" 
+					size="lg" 
+					class="group w-full border-2 transition-all duration-300 hover:scale-105 hover:shadow-lg sm:w-40"
+				>
+					<Box class="mr-2 size-4 transition-transform duration-300 group-hover:rotate-12" />
+					Models
+				</Button>
+			</div>
 		</div>
 	</div>
 </div>

www/src/lib/components/home/nav.svelte

@@ -48,6 +48,10 @@
 				<span class="ml-1 whitespace-nowrap text-lg font-semibold">Foundry Local</span>
 			</a>
 			<div class="flex items-center gap-2">
+				<div class="flex items-center gap-2 md:hidden">
+					<SocialMedia />
+					<DarkModeToggle />
+				</div>
 				<Button
 					variant="outline"
 					size="icon"
@@ -59,9 +63,6 @@
 					<Menu />
 					<span class="sr-only">Toggle navigation</span>
 				</Button>
-				<div class="md:hidden">
-					<DarkModeToggle />
-				</div>
 			</div>
 		</div>
 
@@ -116,7 +117,9 @@
 						{/if}
 					{/each}
 					<DownloadDropdown variant="outline" class="border-2" bind:open={isDownloadOpen} />
-					<SocialMedia />
+					<div class="hidden md:block">
+						<SocialMedia />
+					</div>
 					<Separator orientation="vertical" class="mr-2 hidden h-5 md:block" />
 
 					<div class="hidden md:block">

www/src/routes/models/+page.svelte

@@ -309,7 +309,7 @@
 		try {
 			const command = formatModelCommand(modelId);
 			await navigator.clipboard.writeText(command);
-			copiedModelId = modelId;
+			copiedModelId = `run-${modelId}`;
 			toast.success('Run command copied to clipboard');
 			setTimeout(() => {
 				copiedModelId = null;
@@ -938,7 +938,26 @@
 
 								<!-- Command to run -->
 								<div class="rounded-md bg-muted/50 p-3">
-									<div class="mb-1 text-xs font-medium text-muted-foreground">Run Command:</div>
+									<div class="mb-2 flex items-center justify-between">
+										<div class="text-xs font-medium text-muted-foreground">Run Command:</div>
+										<Button
+											variant="ghost"
+											size="sm"
+											onclick={(e) => {
+												e.stopPropagation();
+												copyRunCommand(variant.name);
+											}}
+											class="h-6 gap-1.5 px-2 text-xs"
+										>
+											{#if copiedModelId === `run-${variant.name}`}
+												<Check class="size-3 text-green-500" />
+												Copied
+											{:else}
+												<Copy class="size-3" />
+												Copy
+											{/if}
+										</Button>
+									</div>
 									<code class="text-xs font-mono">{formatModelCommand(variant.name)}</code>
 								</div>
 							</div>