diff --git a/resources/views/components/bifrost-button.blade.php b/resources/views/components/bifrost-button.blade.php
index 4a0313bd..86cb001a 100644
--- a/resources/views/components/bifrost-button.blade.php
+++ b/resources/views/components/bifrost-button.blade.php
@@ -4,6 +4,39 @@
 
 <a
     href="https://bifrost.nativephp.com/"
+    x-data="{ tl: null, items: [] }"
+    x-init="
+        $nextTick(() => {
+            this.items = Array.from($refs.textContainer.children);
+            if (this.items.length > 1) {
+                gsap.set(this.items, { autoAlpha: 0, y: 10 });
+                gsap.set(this.items[0], { autoAlpha: 1, y: 0 });
+
+                const hold = 0.7;
+                this.tl = gsap.timeline({ repeat: -1 });
+
+                for (let i = 0; i < this.items.length; i++) {
+                    const curr = this.items[i];
+                    const next = this.items[(i + 1) % this.items.length];
+
+                    this.tl.to(curr, { duration: 0.5, autoAlpha: 0, y: -10, ease: 'circ.inOut' }, `+=${hold}`)
+                           .to(next, { duration: 0.5, autoAlpha: 1, y: 0, ease: 'circ.inOut' }, '<');
+                }
+            }
+        })
+    "
+    @mouseenter="
+        if (tl) {
+            tl.pause();
+            gsap.to(items, { autoAlpha: 0, y: -10, duration: 0.2 });
+            gsap.to(items[0], { autoAlpha: 1, y: 0, duration: 0.2 });
+        }
+    "
+    @mouseleave="
+        if (tl) {
+            tl.restart();
+        }
+    "
     @class([
         'group relative z-0 inline-flex items-center overflow-hidden rounded-full bg-gray-200 transition duration-200 will-change-transform hover:scale-x-105 dark:bg-slate-800',
 
@@ -17,7 +50,7 @@ class="@container absolute inset-0 flex items-center"
         aria-hidden="true"
     >
         <div
-            class="absolute h-[100cqw] w-[100cqw] scale-110 animate-[spin_3s_linear_infinite] bg-[conic-gradient(from_0_at_50%_50%,--alpha(var(--color-blue-400)/70%)_0deg,--alpha(var(--color-indigo-400)/70%)_40deg,--alpha(var(--color-orange-300)/70%)_80deg,transparent_110deg,transparent_250deg,--alpha(var(--color-rose-400)/50%)_280deg,--alpha(var(--color-fuchsia-400)/50%)_320deg,--alpha(var(--color-blue-400)/70%)_360deg)] transition duration-300 will-change-transform dark:bg-[conic-gradient(from_0_at_50%_50%,--alpha(var(--color-blue-400)/70%)_0deg,--alpha(var(--color-indigo-400)/70%)_40deg,--alpha(var(--color-teal-400)/70%)_80deg,transparent_110deg,transparent_250deg,--alpha(var(--color-rose-400)/50%)_280deg,--alpha(var(--color-fuchsia-400)/50%)_320deg,--alpha(var(--color-blue-400)/70%)_360deg)]"
+            class="absolute h-[100cqw] w-[100cqw] scale-110 animate-[spin_3s_linear_infinite] bg-[conic-gradient(from_0_at_50%_50%,--alpha(var(--color-blue-400)/70%)_0deg,--alpha(var(--color-indigo-400)/70%)_40deg,--alpha(var(--color-orange-300)/70%)_80deg,transparent_110deg,transparent_250deg,--alpha(var(--color-rose-400)/50%)_280deg,--alpha(var(--color-fuchsia-400)/50%)_320deg,--alpha(var(--color-blue-400)/70%)_360deg)] transition duration-300 will-change-transform group-hover:animate-[spin_1s_linear_infinite] dark:bg-[conic-gradient(from_0_at_50%_50%,--alpha(var(--color-blue-400)/70%)_0deg,--alpha(var(--color-indigo-400)/70%)_40deg,--alpha(var(--color-teal-400)/70%)_80deg,transparent_110deg,transparent_250deg,--alpha(var(--color-rose-400)/50%)_280deg,--alpha(var(--color-fuchsia-400)/50%)_320deg,--alpha(var(--color-blue-400)/70%)_360deg)]"
         ></div>
     </div>
     <div
@@ -29,51 +62,7 @@ class="absolute bottom-0 left-1/2 h-1/3 w-4/5 -translate-x-1/2 rounded-full bg-i
         aria-hidden="true"
     ></div>
     <span
-        x-data
-        x-init="
-            (() => {
-                const items = Array.from($el.children)
-                if (items.length === 0) {
-                    return
-                }
-
-                // Initial state: show first, hide others (coming from below)
-                gsap.set(items, { autoAlpha: 0, y: 10 })
-                gsap.set(items[0], { autoAlpha: 1, y: 0 })
-
-                if (items.length === 1) {
-                    return
-                }
-
-                const hold = 0.7 // seconds each word stays visible
-                const tl = gsap.timeline({ repeat: -1 })
-
-                for (let i = 0; i < items.length; i++) {
-                    const curr = items[i]
-                    const next = items[(i + 1) % items.length]
-
-                    tl.to(
-                        curr,
-                        {
-                            duration: 0.5,
-                            autoAlpha: 0,
-                            y: -10,
-                            ease: 'circ.inOut',
-                        },
-                        `+=${hold}`,
-                    ).to(
-                        next,
-                        {
-                            duration: 0.5,
-                            autoAlpha: 1,
-                            y: 0,
-                            ease: 'circ.inOut',
-                        },
-                        '<',
-                    )
-                }
-            })()
-        "
+        x-ref="textContainer"
         class="inline-grid font-medium"
     >
         <span
diff --git a/resources/views/components/home/announcements.blade.php b/resources/views/components/home/announcements.blade.php
new file mode 100644
index 00000000..67e54b7a
--- /dev/null
+++ b/resources/views/components/home/announcements.blade.php
@@ -0,0 +1,22 @@
+{{-- Announcements Section: Plugins (full width) + Bifrost (50%) & Mimi/Jump (50% stacked) --}}
+<section class="mt-4" aria-label="New announcements">
+    <div class="flex flex-col gap-4">
+        {{-- Plugins Announcement (Full Width) --}}
+        <x-home.plugins-announcement />
+
+        {{-- Mimi & Jump + Bifrost Row --}}
+        <div class="grid gap-4 xl:grid-cols-2">
+            {{-- Left Column - Mimi & Jump --}}
+            <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-1">
+                {{-- Mimi Card --}}
+                <x-home.mimi-card />
+
+                {{-- Jump Card --}}
+                <x-home.jump-card />
+            </div>
+
+            {{-- Bifrost Banner (Right - 50%) --}}
+            <x-home.bifrost-card />
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/resources/views/components/home/bifrost-card.blade.php b/resources/views/components/home/bifrost-card.blade.php
new file mode 100644
index 00000000..4c039ca1
--- /dev/null
+++ b/resources/views/components/home/bifrost-card.blade.php
@@ -0,0 +1,103 @@
+{{-- Bifrost Card - Cloud development platform --}}
+<a
+    href="https://bifrost.nativephp.com/"
+    target="_blank"
+    rel="noopener noreferrer"
+    onclick="fathom.trackEvent('bifrost_card_click');"
+    class="group relative block h-full overflow-hidden rounded-2xl bg-gradient-to-br from-sky-500/20 via-indigo-500/10 to-purple-500/20 p-0.5 ring-1 ring-zinc-200/50 transition duration-300 hover:ring-sky-400/50 dark:ring-sky-500/30"
+    x-init="
+        () => {
+            motion.inView($el, (element) => {
+                gsap.fromTo(
+                    $el,
+                    { y: 20, autoAlpha: 0 },
+                    {
+                        y: 0,
+                        autoAlpha: 1,
+                        duration: 0.6,
+                        delay: 0.1,
+                        ease: 'power2.out',
+                    },
+                )
+            })
+        }
+    "
+>
+    <div class="relative flex h-full flex-col overflow-hidden rounded-xl bg-gradient-to-br from-[#F9F9F9] via-white to-[#F9F9F9] p-6 md:p-8 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950">
+        {{-- Animated glow --}}
+        <div
+            x-init="
+                () => {
+                    gsap.to($el, {
+                        x: 30,
+                        y: -20,
+                        duration: 6,
+                        repeat: -1,
+                        yoyo: true,
+                        ease: 'sine.inOut',
+                    })
+                }
+            "
+            class="pointer-events-none absolute -right-10 -top-10 size-40 rounded-full bg-sky-500/20 blur-[50px] transition duration-500 group-hover:bg-sky-500/30"
+            aria-hidden="true"
+        ></div>
+        <div
+            x-init="
+                () => {
+                    gsap.to($el, {
+                        x: -20,
+                        y: 15,
+                        duration: 5,
+                        repeat: -1,
+                        yoyo: true,
+                        ease: 'sine.inOut',
+                    })
+                }
+            "
+            class="pointer-events-none absolute -bottom-10 -left-10 size-32 rounded-full bg-purple-500/15 blur-[40px] transition duration-500 group-hover:bg-purple-500/25"
+            aria-hidden="true"
+        ></div>
+
+        {{-- Badge --}}
+        <div class="mb-4 inline-flex w-fit items-center gap-1.5 rounded-full bg-sky-500/20 px-2.5 py-1 text-xs font-medium text-sky-600 dark:text-sky-300">
+            <svg class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z" />
+            </svg>
+            Cloud Platform
+        </div>
+
+        {{-- Logo --}}
+        <div class="mb-2">
+            <x-logos.bifrost class="h-6" />
+        </div>
+
+        {{-- Tagline --}}
+        <p class="text-sm text-sky-600/80 dark:text-sky-200/80">
+            Build in the cloud. Deploy anywhere.
+        </p>
+
+        {{-- Description --}}
+        <p class="mt-3 text-sm leading-relaxed text-gray-600 dark:text-slate-400">
+            And when you've built your app, get it to the stores and into the hands of users as fast as humanly possible.
+        </p>
+
+        {{-- Bifrost Diagram --}}
+        <div class="my-2 flex flex-1 items-center justify-center overflow-hidden">
+            <x-illustrations.bifrost-diagram />
+        </div>
+
+        {{-- CTA --}}
+        <div class="mt-4 flex items-center gap-2 text-sm font-medium text-sky-600 transition duration-300 group-hover:text-sky-500 dark:text-sky-400 dark:group-hover:text-sky-300">
+            <span>Ship it!</span>
+            <svg
+                class="size-4 transition duration-300 group-hover:translate-x-1"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
+            </svg>
+        </div>
+    </div>
+</a>
diff --git a/resources/views/components/home/explainer.blade.php b/resources/views/components/home/explainer.blade.php
index 84ce3cf9..77fffd51 100644
--- a/resources/views/components/home/explainer.blade.php
+++ b/resources/views/components/home/explainer.blade.php
@@ -571,76 +571,4 @@ class="absolute -top-20 -right-20 -z-10 size-60 rounded-full bg-gradient-to-r fr
         </div>
     </div>
 
-    {{-- Bifrost --}}
-    <div class="mt-5">
-        <div
-            x-init="
-                () => {
-                    motion.inView($el, (element) => {
-                        gsap.fromTo(
-                            $el,
-                            { y: 10, autoAlpha: 0 },
-                            {
-                                y: 0,
-                                autoAlpha: 1,
-                                duration: 0.7,
-                                ease: 'power2.out',
-                            },
-                        )
-                    })
-                }
-            "
-            class="relative overflow-hidden rounded-2xl bg-gray-200/60 p-8 md:p-10 dark:bg-mirage"
-        >
-            {{-- Illustration --}}
-            <x-illustrations.bifrost-diagram />
-
-            {{-- Header --}}
-            <div
-                class="mt-7 flex flex-col items-center gap-1.5 text-center text-pretty"
-            >
-                <h2
-                    id="sponsors-title"
-                    class="text-xl font-bold text-slate-800 lg:text-2xl dark:text-white"
-                >
-                    And when you've built your app... Ship it!
-                </h2>
-                <p class="text-lg text-slate-600 dark:text-zinc-400">
-                    Get it to the stores and into the hands of users as fast as
-                    humanly possible with Bifrost
-                </p>
-            </div>
-
-            {{-- Button --}}
-            <div class="mt-5 mb-15 grid place-items-center">
-                <x-bifrost-button />
-            </div>
-
-            {{-- Top gradient line --}}
-            <div
-                class="absolute top-0 left-0 -z-10 h-1.5 w-full bg-gradient-to-r from-[#FF8F5E] via-[#1D51F2] to-[#5CDFFC]"
-                aria-hidden="true"
-            ></div>
-
-            {{-- Left blur --}}
-            <div
-                class="absolute right-1/2 -bottom-11 -z-10 translate-x-1/2"
-                aria-hidden="true"
-            >
-                <div
-                    class="h-10 w-36 -translate-x-14 -rotate-15 rounded-full bg-[#FB6C41]/70 blur-xl dark:bg-slate-400/60"
-                ></div>
-            </div>
-
-            {{-- Right blur --}}
-            <div
-                class="absolute right-1/2 -bottom-11 -z-10 translate-x-1/2"
-                aria-hidden="true"
-            >
-                <div
-                    class="0 h-10 w-36 translate-x-14 -rotate-15 rounded-full bg-indigo-300 blur-xl dark:bg-indigo-500/60"
-                ></div>
-            </div>
-        </div>
-    </div>
 </section>
diff --git a/resources/views/components/home/jump-card.blade.php b/resources/views/components/home/jump-card.blade.php
new file mode 100644
index 00000000..fc1f8c23
--- /dev/null
+++ b/resources/views/components/home/jump-card.blade.php
@@ -0,0 +1,113 @@
+{{-- Jump Card - Preview on real devices --}}
+<a
+    href="https://bifrost.nativephp.com/jump"
+    target="_blank"
+    rel="noopener noreferrer"
+    class="group relative block h-full overflow-hidden rounded-2xl bg-gradient-to-br from-blue-500/20 via-cyan-500/10 to-indigo-500/20 p-0.5 ring-1 ring-zinc-200/50 transition duration-300 hover:ring-blue-400/50 dark:ring-blue-500/30"
+    x-init="
+        () => {
+            motion.inView($el, (element) => {
+                gsap.fromTo(
+                    $el,
+                    { y: 20, autoAlpha: 0 },
+                    {
+                        y: 0,
+                        autoAlpha: 1,
+                        duration: 0.6,
+                        delay: 0.4,
+                        ease: 'power2.out',
+                    },
+                )
+            })
+        }
+    "
+>
+    <div class="relative flex h-full flex-col overflow-hidden rounded-xl bg-gradient-to-br from-[#F9F9F9] via-white to-[#F9F9F9] p-5 md:p-6 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950">
+        {{-- Animated glow --}}
+        <div
+            x-init="
+                () => {
+                    gsap.to($el, {
+                        x: -15,
+                        y: 15,
+                        duration: 5,
+                        repeat: -1,
+                        yoyo: true,
+                        ease: 'sine.inOut',
+                    })
+                }
+            "
+            class="pointer-events-none absolute -bottom-10 -left-10 size-32 rounded-full bg-blue-500/20 blur-[40px] transition duration-500 group-hover:bg-blue-500/30"
+            aria-hidden="true"
+        ></div>
+
+        {{-- Platform badges (top-right) --}}
+        <div class="absolute top-5 right-5 flex items-center gap-2 text-xs text-gray-500 md:top-6 md:right-6 dark:text-slate-500">
+            <span class="rounded-full bg-gray-100 px-2.5 py-1 ring-1 ring-gray-200 dark:bg-slate-800/50 dark:ring-slate-700/50">
+                iOS
+            </span>
+            <span class="rounded-full bg-gray-100 px-2.5 py-1 ring-1 ring-gray-200 dark:bg-slate-800/50 dark:ring-slate-700/50">
+                Android
+            </span>
+        </div>
+
+        {{-- Badge --}}
+        <div class="mb-3 inline-flex w-fit items-center gap-1.5 rounded-full bg-blue-500/20 px-2.5 py-1 text-xs font-medium text-blue-600 dark:text-blue-300">
+            <svg class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
+            </svg>
+            Preview Tool
+        </div>
+
+        {{-- Title --}}
+        <h3 class="text-xl font-bold text-gray-800 md:text-2xl dark:text-white">
+            Jump
+        </h3>
+
+        {{-- Tagline --}}
+        <p class="mt-1 text-sm text-blue-600/80 dark:text-blue-200/80">
+            Code here. Jump there.
+        </p>
+
+        {{-- Description --}}
+        <p class="mt-3 flex-1 text-sm leading-relaxed text-gray-600 dark:text-slate-400">
+            Preview your NativePHP app on real devices instantly.
+        </p>
+
+        {{-- Features list --}}
+        <ul class="mt-3 space-y-1.5 text-xs text-gray-600 dark:text-slate-400">
+            <li class="flex items-center gap-2">
+                <svg class="size-3 text-blue-500 dark:text-blue-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
+                </svg>
+                Works offline after download
+            </li>
+            <li class="flex items-center gap-2">
+                <svg class="size-3 text-blue-500 dark:text-blue-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
+                </svg>
+                No Xcode or Android Studio
+            </li>
+            <li class="flex items-center gap-2">
+                <svg class="size-3 text-blue-500 dark:text-blue-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
+                </svg>
+                Free for local development
+            </li>
+        </ul>
+
+        {{-- CTA --}}
+        <div class="mt-4 flex items-center gap-2 text-sm font-medium text-blue-600 transition duration-300 group-hover:text-blue-500 dark:text-blue-400 dark:group-hover:text-blue-300">
+            <span>Jump in</span>
+            <svg
+                class="size-4 transition duration-300 group-hover:translate-x-1"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
+            </svg>
+        </div>
+    </div>
+</a>
diff --git a/resources/views/components/home/mimi-card.blade.php b/resources/views/components/home/mimi-card.blade.php
new file mode 100644
index 00000000..ff1ef5b7
--- /dev/null
+++ b/resources/views/components/home/mimi-card.blade.php
@@ -0,0 +1,118 @@
+{{-- Mimi Card - AI-powered app creation --}}
+<a
+    href="https://bifrost.nativephp.com/mimi"
+    target="_blank"
+    rel="noopener noreferrer"
+    class="group relative block h-full overflow-hidden rounded-2xl bg-gradient-to-br from-pink-500/20 via-fuchsia-500/10 to-violet-500/20 p-0.5 ring-1 ring-zinc-200/50 transition duration-300 hover:ring-pink-400/50 dark:ring-pink-500/30"
+    x-init="
+        () => {
+            motion.inView($el, (element) => {
+                gsap.fromTo(
+                    $el,
+                    { y: 20, autoAlpha: 0 },
+                    {
+                        y: 0,
+                        autoAlpha: 1,
+                        duration: 0.6,
+                        delay: 0.2,
+                        ease: 'power2.out',
+                    },
+                )
+            })
+        }
+    "
+>
+    <div class="relative flex h-full flex-col overflow-hidden rounded-xl bg-gradient-to-br from-[#F9F9F9] via-white to-[#F9F9F9] p-5 md:p-6 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950">
+        {{-- Animated glow --}}
+        <div
+            x-init="
+                () => {
+                    gsap.to($el, {
+                        x: 20,
+                        y: -10,
+                        duration: 4,
+                        repeat: -1,
+                        yoyo: true,
+                        ease: 'sine.inOut',
+                    })
+                }
+            "
+            class="pointer-events-none absolute -right-10 -top-10 size-32 rounded-full bg-pink-500/20 blur-[40px] transition duration-500 group-hover:bg-pink-500/30"
+            aria-hidden="true"
+        ></div>
+
+        {{-- Badge --}}
+        <div class="mb-3 inline-flex w-fit items-center gap-1.5 rounded-full bg-pink-500/20 px-2.5 py-1 text-xs font-medium text-pink-600 dark:text-pink-300">
+            <span
+                x-init="
+                    () => {
+                        gsap.to($el, {
+                            scale: 1.3,
+                            duration: 0.6,
+                            repeat: -1,
+                            yoyo: true,
+                            ease: 'power1.inOut',
+                        })
+                    }
+                "
+                class="inline-block"
+            >
+                <svg class="size-3" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M12 3L13.5 8.5L19 10L13.5 11.5L12 17L10.5 11.5L5 10L10.5 8.5L12 3Z"/>
+                </svg>
+            </span>
+            AI-Powered
+        </div>
+
+        {{-- Title --}}
+        <h3 class="text-xl font-bold text-gray-800 md:text-2xl dark:text-white">
+            Mimi
+        </h3>
+
+        {{-- Tagline --}}
+        <p class="mt-1 text-sm text-pink-600/80 dark:text-pink-200/80">
+            Describe it. Build it.
+        </p>
+
+        {{-- Description --}}
+        <p class="mt-3 flex-1 text-sm leading-relaxed text-gray-600 dark:text-slate-400">
+            Turn your ideas into native mobile apps with AI.
+        </p>
+
+        {{-- Features list --}}
+        <ul class="mt-3 space-y-1.5 text-xs text-gray-600 dark:text-slate-400">
+            <li class="flex items-center gap-2">
+                <svg class="size-3 text-pink-500 dark:text-pink-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
+                </svg>
+                Real-time preview
+            </li>
+            <li class="flex items-center gap-2">
+                <svg class="size-3 text-pink-500 dark:text-pink-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
+                </svg>
+                Running SotA models
+            </li>
+            <li class="flex items-center gap-2">
+                <svg class="size-3 text-pink-500 dark:text-pink-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
+                </svg>
+                Voice powered
+            </li>
+        </ul>
+
+        {{-- CTA --}}
+        <div class="mt-4 flex items-center gap-2 text-sm font-medium text-pink-600 transition duration-300 group-hover:text-pink-500 dark:text-pink-400 dark:group-hover:text-pink-300">
+            <span>Vibe away</span>
+            <svg
+                class="size-4 transition duration-300 group-hover:translate-x-1"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
+            </svg>
+        </div>
+    </div>
+</a>
diff --git a/resources/views/components/home/plugins-announcement.blade.php b/resources/views/components/home/plugins-announcement.blade.php
new file mode 100644
index 00000000..4ce706a4
--- /dev/null
+++ b/resources/views/components/home/plugins-announcement.blade.php
@@ -0,0 +1,229 @@
+<div
+    x-init="
+        () => {
+            motion.inView($el, (element) => {
+                gsap.fromTo(
+                    $el,
+                    { scale: 0.95, autoAlpha: 0 },
+                    {
+                        scale: 1,
+                        autoAlpha: 1,
+                        duration: 0.8,
+                        ease: 'back.out(1.2)',
+                    },
+                )
+            })
+        }
+    "
+    class="relative z-0 h-full overflow-hidden rounded-2xl from-violet-600 via-fuchsia-500 to-orange-400 p-1 ring-1 ring-zinc-200/50 dark:ring-white/20"
+    aria-labelledby="plugins-title"
+    role="region"
+>
+        {{-- Inner container --}}
+        <div
+            class="relative z-0 flex h-full flex-col items-center justify-center overflow-hidden rounded-xl bg-gradient-to-br from-[#F9F9F9] via-white to-[#F9F9F9] px-6 py-12 text-center md:px-12 md:py-16 lg:py-20 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950"
+        >
+            {{-- Animated background grid --}}
+            <div
+                class="pointer-events-none absolute inset-0 -z-10 opacity-20 dark:opacity-20"
+                aria-hidden="true"
+            >
+                <div
+                    class="absolute inset-0"
+                    style="background-image: linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px); background-size: 40px 40px;"
+                ></div>
+                <div
+                    class="absolute inset-0 hidden dark:block"
+                    style="background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 40px 40px;"
+                ></div>
+            </div>
+
+            {{-- Glowing orbs --}}
+            <div
+                x-init="
+                    () => {
+                        gsap.to($el, {
+                            x: 50,
+                            y: -30,
+                            duration: 8,
+                            repeat: -1,
+                            yoyo: true,
+                            ease: 'sine.inOut',
+                        })
+                    }
+                "
+                class="pointer-events-none absolute -top-20 -left-20 -z-5 size-60 rounded-full bg-violet-500/30 blur-[80px]"
+                aria-hidden="true"
+            ></div>
+            <div
+                x-init="
+                    () => {
+                        gsap.to($el, {
+                            x: -40,
+                            y: 20,
+                            duration: 6,
+                            repeat: -1,
+                            yoyo: true,
+                            ease: 'sine.inOut',
+                        })
+                    }
+                "
+                class="pointer-events-none absolute -right-20 -bottom-20 -z-5 size-60 rounded-full bg-fuchsia-500/30 blur-[80px]"
+                aria-hidden="true"
+            ></div>
+            <div
+                x-init="
+                    () => {
+                        gsap.to($el, {
+                            scale: 1.2,
+                            duration: 4,
+                            repeat: -1,
+                            yoyo: true,
+                            ease: 'sine.inOut',
+                        })
+                    }
+                "
+                class="pointer-events-none absolute top-1/2 left-1/2 -z-5 size-40 -translate-x-1/2 -translate-y-1/2 rounded-full bg-orange-500/20 blur-[60px]"
+                aria-hidden="true"
+            ></div>
+
+            {{-- NEW badge --}}
+            <div
+                x-init="
+                    () => {
+                        motion.inView($el, (element) => {
+                            gsap.fromTo(
+                                $el,
+                                { scale: 0, rotate: -10 },
+                                {
+                                    scale: 1,
+                                    rotate: 0,
+                                    duration: 0.6,
+                                    delay: 0.3,
+                                    ease: 'back.out(2)',
+                                },
+                            )
+                        })
+                    }
+                "
+                class="mb-4 inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-violet-500 to-fuchsia-500 px-4 py-1.5 text-sm font-semibold text-white shadow-lg shadow-violet-500/25"
+            >
+                <span
+                    x-init="
+                        () => {
+                            gsap.to($el, {
+                                scale: 1.2,
+                                duration: 0.5,
+                                repeat: -1,
+                                yoyo: true,
+                                ease: 'power1.inOut',
+                            })
+                        }
+                    "
+                    class="inline-block"
+                >
+                    <x-icons.plug class="size-4" />
+                </span>
+                NEW
+            </div>
+
+            {{-- Main headline --}}
+            <h2
+                id="plugins-title"
+                x-init="
+                    () => {
+                        motion.inView($el, (element) => {
+                            gsap.fromTo(
+                                $el,
+                                { y: 30, autoAlpha: 0 },
+                                {
+                                    y: 0,
+                                    autoAlpha: 1,
+                                    duration: 0.8,
+                                    delay: 0.2,
+                                    ease: 'power3.out',
+                                },
+                            )
+                        })
+                    }
+                "
+                class="text-2xl font-semibold tracking-tight text-gray-800 xs:text-3xl sm:text-4xl dark:text-white"
+            >
+                <span class="block">Build anything with</span>
+                <span
+                    class="block bg-gradient-to-r from-violet-400 via-fuchsia-400 to-orange-400 bg-clip-text pb-1 text-transparent"
+                >
+                    Plugins
+                </span>
+            </h2>
+
+            {{-- Subtitle --}}
+            <p
+                x-init="
+                    () => {
+                        motion.inView($el, (element) => {
+                            gsap.fromTo(
+                                $el,
+                                { y: 20, autoAlpha: 0 },
+                                {
+                                    y: 0,
+                                    autoAlpha: 1,
+                                    duration: 0.8,
+                                    delay: 0.4,
+                                    ease: 'power2.out',
+                                },
+                            )
+                        })
+                    }
+                "
+                class="mx-auto mt-4 max-w-2xl text-lg text-gray-600 sm:text-xl md:mt-6 md:text-2xl dark:text-slate-300"
+            >
+                Extend your mobile apps with powerful plugins.
+                <span class="text-gray-900 dark:text-white">Unlimited possibilities.</span>
+            </p>
+
+            {{-- CTA Button --}}
+            <div
+                x-init="
+                    () => {
+                        motion.inView($el, (element) => {
+                            gsap.fromTo(
+                                $el,
+                                { y: 20, autoAlpha: 0 },
+                                {
+                                    y: 0,
+                                    autoAlpha: 1,
+                                    duration: 0.6,
+                                    delay: 0.7,
+                                    ease: 'power2.out',
+                                },
+                            )
+                        })
+                    }
+                "
+                class="mt-8 md:mt-10"
+            >
+                <a
+                    href="/plugins"
+                    class="group inline-flex items-center gap-2 rounded-full bg-gray-900 px-4 py-2 text-sm font-medium text-white transition duration-300 hover:bg-gray-800 dark:bg-white dark:text-slate-900 dark:hover:bg-gray-100"
+                >
+                    <span>Explore Plugins</span>
+                    <svg
+                        class="size-4 transition duration-300 group-hover:translate-x-1"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
+                    </svg>
+                </a>
+            </div>
+
+            {{-- Decorative corner elements --}}
+            <div class="pointer-events-none absolute top-4 left-4 size-8 border-l-2 border-t-2 border-gray-300 md:top-6 md:left-6 md:size-12 dark:border-white/20" aria-hidden="true"></div>
+            <div class="pointer-events-none absolute top-4 right-4 size-8 border-r-2 border-t-2 border-gray-300 md:top-6 md:right-6 md:size-12 dark:border-white/20" aria-hidden="true"></div>
+            <div class="pointer-events-none absolute bottom-4 left-4 size-8 border-b-2 border-l-2 border-gray-300 md:bottom-6 md:left-6 md:size-12 dark:border-white/20" aria-hidden="true"></div>
+            <div class="pointer-events-none absolute right-4 bottom-4 size-8 border-r-2 border-b-2 border-gray-300 md:right-6 md:bottom-6 md:size-12 dark:border-white/20" aria-hidden="true"></div>
+        </div>
+    </div>
diff --git a/resources/views/components/icons/plug.blade.php b/resources/views/components/icons/plug.blade.php
new file mode 100644
index 00000000..351d207d
--- /dev/null
+++ b/resources/views/components/icons/plug.blade.php
@@ -0,0 +1,3 @@
+@props(['class' => 'size-5'])
+
+<x-vaadin-plug {{ $attributes->merge(['class' => $class]) }} />
diff --git a/resources/views/components/illustrations/bifrost-diagram.blade.php b/resources/views/components/illustrations/bifrost-diagram.blade.php
index 6badaaf9..1030adc3 100644
--- a/resources/views/components/illustrations/bifrost-diagram.blade.php
+++ b/resources/views/components/illustrations/bifrost-diagram.blade.php
@@ -13,6 +13,7 @@ class="h-7 sm:h-9"
         />
 
         <p class="hidden whitespace-nowrap sm:block md:text-lg">
+            <span>Your</span>
             <span class="font-semibold">NativePHP</span>
             <span>app</span>
         </p>
@@ -20,7 +21,7 @@ class="h-7 sm:h-9"
 
     {{-- Left line (decorative) --}}
     <div
-        class="hidden h-0.5 w-10 bg-gradient-to-r from-transparent to-blue-500/50 2xs:block sm:w-20"
+        class="hidden h-0.5 w-8 bg-gradient-to-r from-transparent to-blue-500/50 2xs:block"
         aria-hidden="true"
     ></div>
 
@@ -66,7 +67,7 @@ class="h-1.5 w-15 rounded-full bg-gray-200 dark:bg-white/3"
     </div>
 
     {{-- Right (Build outputs to platforms) --}}
-    <div class="flex items-center sm:pr-14 md:pr-24">
+    <div class="flex items-center">
         <div aria-hidden="true">
             <x-icons.home.arc-connector aria-hidden="true" />
             <div
diff --git a/resources/views/components/navbar/device-dropdowns.blade.php b/resources/views/components/navbar/device-dropdowns.blade.php
index e27e901e..83a014e3 100644
--- a/resources/views/components/navbar/device-dropdowns.blade.php
+++ b/resources/views/components/navbar/device-dropdowns.blade.php
@@ -27,7 +27,7 @@
                 href="{{ route('plugins') }}"
                 title="Plugins"
                 subtitle="Extend your mobile apps"
-                icon="puzzle"
+                icon="plug"
                 icon-class="size-5"
             />
         @endfeature
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index 716de098..663b7fba 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -8,6 +8,9 @@
     {{-- Explainer --}}
     <x-home.explainer />
 
+    {{-- Announcements: Plugins, Bifrost, Mimi, Jump --}}
+    <x-home.announcements />
+
     {{-- Partners --}}
     <x-home.partners />