Skip to content

refactor(www): SDK-first website refresh #627

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MaanavD merged 5 commits into from
May 21, 2026
Merged

refactor(www): SDK-first website refresh #627

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
82bf30c
refactor(www): SDK-first website refresh
MaanavD Apr 10, 2026
c728e9c
Update www/src/lib/components/install-command.svelte
MaanavD Apr 11, 2026
c1457eb
fix(www): fix C# and Rust code snippets per review
MaanavD Apr 11, 2026
2f1b8ba
feat(www): SDK-first homepage with progressive reveal widget (#717)
MaanavD May 20, 2026
57e34e4
feat(www): condense install table and add CLI strip to models page
MaanavD May 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
282 changes: 155 additions & 127 deletions www/src/lib/components/download-dropdown.svelte
View file
Open in desktop

Large diffs are not rendered by default.

79 changes: 51 additions & 28 deletions www/src/lib/components/home/features.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
<script lang="ts">
import { features } from '$lib/config';
import { Button } from '$lib/components/ui/button';
import { ArrowRight, Rocket, Cpu, Wifi, Code, Bot, Shield } from 'lucide-svelte';
import { Rocket, Cpu, Wifi, Code, Bot, Shield } from 'lucide-svelte';
import { animate } from '$lib/utils/animations';
import { onMount } from 'svelte';

Expand Down Expand Up @@ -64,14 +62,14 @@
use:animate={{ delay: 0, duration: 800, animation: 'slide-up', threshold: 0.2 }}
class="mb-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-white"
>
Purpose built for shipping AI applications
The fastest path from SDK install to shipped local AI
</h2>
<p
use:animate={{ delay: 200, duration: 800, animation: 'slide-up', threshold: 0.2 }}
class="text-lg text-gray-600 dark:text-neutral-400"
>
Everything you need to embed AI into your products, with the performance and reliability
your users expect.
Start with native SDKs, keep inference in your app process, and use CLI or REST tools only
when they help your development workflow.
</p>
</div>

Expand All @@ -90,31 +88,44 @@
>
<Rocket class="size-7" aria-hidden="true" />
</div>
<h3 class="mb-2 text-2xl font-bold text-gray-900 dark:text-white">Ship to Production</h3>
<h3 class="mb-2 text-2xl font-bold text-gray-900 dark:text-white">One SDK lifecycle</h3>
<p class="mb-6 text-lg text-gray-600 dark:text-neutral-400">
Built as an SDK for shipping AI-powered applications, not just running models locally
Initialize the manager, choose a model alias, download and cache it, load it, then call
chat or audio clients from your app.
</p>
<!-- Animated code snippet with typing effect -->
<div
class="mt-auto overflow-hidden rounded-xl bg-gray-900 p-4 font-mono text-xs text-gray-300 dark:bg-black/40"
>
<div class="mb-1 text-emerald-400">// Initialize & Load</div>
<div class="mb-1 text-emerald-400">
// SDK lifecycle: initialize, download, load, call
</div>
<div class="code-line code-line-1">
<span class="text-purple-400">const</span> manager =
<span class="text-purple-400">const</span> mgr =
<span class="text-blue-400">FoundryLocalManager</span>.<span class="text-yellow-300"
>create</span
>(config)
>({'{'} appName: <span class="text-amber-300">'my-app'</span>
{'}'})
</div>
<div class="code-line code-line-2">
<span class="text-purple-400">const</span> model = manager.<span
class="text-yellow-300">getCatalog</span
>().<span class="text-yellow-300">getModel</span>(<span class="text-amber-300"
>'gpt-oss-20b'</span
>)
<span class="text-purple-400">const</span> model =
<span class="text-purple-400">await</span>
mgr.<span class="text-yellow-300">catalog</span>.<span class="text-yellow-300"
>getModel</span
>(<span class="text-amber-300">'qwen2.5-0.5b'</span>)
</div>
<div class="code-line code-line-3">
<span class="text-purple-400">await</span>
model.<span class="text-yellow-300">load</span>()<span class="typing-cursor">|</span>
model.<span class="text-yellow-300">download</span>();
<span class="text-purple-400">await</span>
model.<span class="text-yellow-300">load</span>()
</div>
<div class="code-line code-line-4">
<span class="text-purple-400">const</span> res =
<span class="text-purple-400">await</span>
model.<span class="text-yellow-300">createChatClient</span>().<span
class="text-yellow-300">completeChat</span
>(msgs)<span class="typing-cursor">|</span>
</div>
</div>
<style>
Expand All @@ -131,6 +142,9 @@
.code-line-3 {
animation-delay: 1.5s;
}
.code-line-4 {
animation-delay: 2.1s;
}
@keyframes typeIn {
from {
opacity: 0;
Expand Down Expand Up @@ -169,9 +183,12 @@
>
<Cpu class="size-7" aria-hidden="true" />
</div>
<h3 class="mb-2 text-2xl font-bold text-gray-900 dark:text-white">Hardware Optimized</h3>
<h3 class="mb-2 text-2xl font-bold text-gray-900 dark:text-white">
Hardware handled for you
</h3>
<p class="mb-6 text-lg text-gray-600 dark:text-neutral-400">
We work directly with hardware vendors for maximum performance
The SDK picks and registers execution providers so apps can target NPU, GPU, or CPU
without custom device plumbing.
</p>
<!-- Hardware acceleration visual with glowing cards -->
<div class="mt-auto grid grid-cols-3 gap-3">
Expand Down Expand Up @@ -233,9 +250,12 @@
>
<Wifi class="size-6" aria-hidden="true" />
</div>
<h3 class="mb-2 text-xl font-semibold text-gray-900 dark:text-white">Edge-Ready</h3>
<h3 class="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
Offline app runtime
</h3>
<p class="text-gray-600 dark:text-neutral-400">
Works fully offline with no cloud dependencies
The runtime and cached models stay local so user workflows keep running without a
network.
</p>
</div>
<!-- Dramatic wifi disconnect animation -->
Expand Down Expand Up @@ -358,10 +378,10 @@
>
<Code class="size-6" aria-hidden="true" />
</div>
<h3 class="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
Multi-Language SDKs
</h3>
<p class="text-gray-600 dark:text-neutral-400">Python, JavaScript, C#, and Rust</p>
<h3 class="mb-2 text-xl font-semibold text-gray-900 dark:text-white">Native SDKs</h3>
<p class="text-gray-600 dark:text-neutral-400">
Start in Python or JavaScript; ship production apps in C# and Rust too.
</p>
</div>
<!-- Language icons with staggered pop animation -->
<div class="absolute right-4 bottom-4 flex gap-2">
Expand Down Expand Up @@ -426,10 +446,11 @@
<Bot class="size-6" aria-hidden="true" />
</div>
<h3 class="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
OpenAI Compatible
Native first, REST when needed
</h3>
<p class="text-gray-600 dark:text-neutral-400">
Drop-in API replacement for easy integration
Use SDK clients in-process, or start the optional OpenAI-compatible server for
frameworks like LangChain.
</p>
</div>
<!-- Animated API comparison -->
Expand Down Expand Up @@ -484,7 +505,9 @@
<Shield class="size-6" aria-hidden="true" />
</div>
<h3 class="mb-2 text-xl font-semibold text-gray-900 dark:text-white">Data Privacy</h3>
<p class="text-gray-600 dark:text-neutral-400">Everything stays on-device</p>
<p class="text-gray-600 dark:text-neutral-400">
Prompts, audio, and responses stay on the user's device.
</p>
</div>
<!-- Animated shield with glow pulse -->
<div class="absolute -right-4 -bottom-4">
Expand Down
34 changes: 17 additions & 17 deletions www/src/lib/components/home/footer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

<footer
use:animate={{ delay: 0, duration: 800, animation: 'fade-in', threshold: 0.1 }}
class="border-t border-border bg-muted/30"
class="border-border bg-muted/30 border-t"
>
<div class="mx-auto w-full max-w-[85rem] px-4 py-12 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-12">
Expand All @@ -22,8 +22,8 @@
alt="Foundry Local"
/>
</a>
<p class="max-w-xs text-sm text-muted-foreground">
Run AI models locally with the power of Microsoft's Azure AI technology.
<p class="text-muted-foreground max-w-xs text-sm">
Build AI-powered applications with on-device inference through native SDKs.
</p>
<div class="mt-6">
<SocialMedia />
Expand All @@ -32,19 +32,19 @@

<!-- Links - Product & Resources -->
<nav class="lg:col-span-3" aria-label="Product links">
<h3 class="mb-4 text-sm font-semibold text-foreground">Product</h3>
<h3 class="text-foreground mb-4 text-sm font-semibold">Product</h3>
<ul class="space-y-3 text-sm">
<li>
<a
href="https://learn.microsoft.com/en-us/azure/ai-foundry/foundry-local/get-started"
href="https://learn.microsoft.com/en-us/azure/foundry-local/get-started"
target="_blank"
rel="noopener noreferrer"
class="text-muted-foreground transition-colors hover:text-foreground"
class="text-muted-foreground hover:text-foreground transition-colors"
aria-label="Documentation (opens in new tab)">Documentation</a
>
</li>
<li>
<a href="/models" class="text-muted-foreground transition-colors hover:text-foreground"
<a href="/models" class="text-muted-foreground hover:text-foreground transition-colors"
>Model Hub</a
>
</li>
Expand All @@ -53,16 +53,16 @@
href="https://github.com/microsoft/Foundry-Local/tree/main/samples"
target="_blank"
rel="noopener noreferrer"
class="text-muted-foreground transition-colors hover:text-foreground"
aria-label="Examples (opens in new tab)">Examples</a
class="text-muted-foreground hover:text-foreground transition-colors"
aria-label="SDK samples (opens in new tab)">SDK Samples</a
>
</li>
<li>
<a
href="https://github.com/microsoft/foundry-local/releases"
target="_blank"
rel="noopener noreferrer"
class="text-muted-foreground transition-colors hover:text-foreground"
class="text-muted-foreground hover:text-foreground transition-colors"
aria-label="Releases (opens in new tab)">Releases</a
>
</li>
Expand All @@ -71,14 +71,14 @@

<!-- Community links -->
<nav class="lg:col-span-3" aria-label="Community links">
<h3 class="mb-4 text-sm font-semibold text-foreground">Community</h3>
<h3 class="text-foreground mb-4 text-sm font-semibold">Community</h3>
<ul class="space-y-3 text-sm">
<li>
<a
href="https://github.com/microsoft/foundry-local"
target="_blank"
rel="noopener noreferrer"
class="text-muted-foreground transition-colors hover:text-foreground"
class="text-muted-foreground hover:text-foreground transition-colors"
aria-label="GitHub (opens in new tab)">GitHub</a
>
</li>
Expand All @@ -87,7 +87,7 @@
href="https://github.com/microsoft/foundry-local/issues"
target="_blank"
rel="noopener noreferrer"
class="text-muted-foreground transition-colors hover:text-foreground"
class="text-muted-foreground hover:text-foreground transition-colors"
aria-label="Support (opens in new tab)">Support</a
>
</li>
Expand All @@ -96,7 +96,7 @@
href="https://github.com/microsoft/Foundry-Local/blob/main/LICENSE"
target="_blank"
rel="noopener noreferrer"
class="text-muted-foreground transition-colors hover:text-foreground"
class="text-muted-foreground hover:text-foreground transition-colors"
aria-label="MIT License (opens in new tab)">MIT License</a
>
</li>
Expand All @@ -105,16 +105,16 @@
</div>

<!-- Copyright -->
<div class="mt-12 border-t border-border pt-8">
<div class="border-border mt-12 border-t pt-8">
<div class="flex flex-col items-center gap-2">
<p class="text-center text-sm text-muted-foreground">
<p class="text-muted-foreground text-center text-sm">
&copy; {new Date().getFullYear()} Microsoft Corporation. All rights reserved.
</p>
<a
href="https://go.microsoft.com/fwlink/?LinkId=521839"
target="_blank"
rel="noopener noreferrer"
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
class="text-muted-foreground hover:text-foreground text-sm transition-colors"
aria-label="Microsoft Privacy Statement (opens in new tab)"
>
Privacy Statement
Expand Down
Loading