diff --git a/resources/css/app.css b/resources/css/app.css
index 43eec39f..acd32d21 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -8,6 +8,21 @@
     }
 }
 
+@keyframes shine {
+    0% {
+        background-position: 200% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 /* Scrollbar width */
 ::-webkit-scrollbar {
     height: 8px;
diff --git a/resources/views/article.blade.php b/resources/views/article.blade.php
new file mode 100644
index 00000000..08b2845f
--- /dev/null
+++ b/resources/views/article.blade.php
@@ -0,0 +1,217 @@
+<x-layout title="Blog">
+    {{-- Hero --}}
+    <section
+        class="mx-auto mt-10 w-full max-w-3xl px-5 md:mt-14"
+        aria-labelledby="article-title"
+    >
+        <header class="relative grid place-items-center text-center">
+            {{-- Blurred circle - Decorative --}}
+            <div
+                class="absolute right-1/2 top-0 -z-30 h-60 w-60 translate-x-1/2 rounded-full blur-[150px] md:w-80 dark:bg-slate-500/50"
+                aria-hidden="true"
+            ></div>
+
+            {{-- Back button --}}
+            <div
+                x-init="
+                    () => {
+                        motion.inView($el, (element) => {
+                            motion.animate(
+                                $el,
+                                {
+                                    opacity: [0, 1],
+                                    x: [5, 0],
+                                },
+                                {
+                                    duration: 0.7,
+                                    ease: motion.easeOut,
+                                },
+                            )
+                        })
+                    }
+                "
+            >
+                <a
+                    href="{{ route('blog') }}"
+                    class="inline-flex items-center gap-2 opacity-60 transition duration-200 will-change-transform hover:-translate-x-0.5 hover:opacity-100"
+                    aria-label="Return to blog listing"
+                >
+                    <x-icons.right-arrow
+                        class="size-3 shrink-0 -scale-x-100"
+                        aria-hidden="true"
+                    />
+                    <div class="text-sm">Blog</div>
+                </a>
+            </div>
+
+            {{-- Primary Heading --}}
+            <h1
+                id="article-title"
+                x-init="
+                    () => {
+                        motion.inView($el, (element) => {
+                            motion.animate(
+                                $el,
+                                {
+                                    opacity: [0, 1],
+                                    x: [-5, 0],
+                                },
+                                {
+                                    duration: 0.7,
+                                    ease: motion.easeOut,
+                                },
+                            )
+                        })
+                    }
+                "
+                class="mt-8 text-3xl font-extrabold will-change-transform sm:text-4xl"
+            >
+                NativePHP for desktop v1 is finally here!
+            </h1>
+
+            {{-- Date --}}
+            <div
+                class="inline-flex items-center gap-1.5 pt-4 opacity-60"
+                aria-label="Publication date"
+            >
+                <x-icons.date
+                    class="size-5 shrink-0"
+                    aria-hidden="true"
+                />
+                <time
+                    datetime="2025-04-09"
+                    class="text-sm"
+                >
+                    April 9, 2025
+                </time>
+            </div>
+        </header>
+
+        {{-- Divider --}}
+        <div
+            x-init="
+                () => {
+                    motion.inView($el, (element) => {
+                        motion.animate(
+                            $el,
+                            {
+                                opacity: [0, 1],
+                                x: [5, 0],
+                            },
+                            {
+                                duration: 0.7,
+                                ease: motion.easeOut,
+                            },
+                        )
+                    })
+                }
+            "
+            class="flex items-center pb-3 pt-3.5 will-change-transform"
+            aria-hidden="true"
+        >
+            <div
+                class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
+            ></div>
+            <div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
+            <div
+                class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
+            ></div>
+        </div>
+
+        {{-- Content --}}
+        <article
+            x-init="
+                () => {
+                    motion.inView($el, (element) => {
+                        motion.animate(
+                            $el,
+                            {
+                                opacity: [0, 1],
+                                y: [5, 0],
+                            },
+                            {
+                                duration: 0.7,
+                                ease: motion.easeOut,
+                            },
+                        )
+                    })
+                }
+            "
+            class="prose mt-2 max-w-none text-gray-600 will-change-transform dark:text-gray-400"
+            aria-labelledby="article-title"
+        >
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur
+            facere dolore praesentium eius amet ex suscipit quam quibusdam
+            rerum, ratione, veritatis quidem, repudiandae ipsum in. Dolore
+            voluptatibus iusto saepe cum. Maiores tenetur nobis aliquid
+            recusandae hic, illo, aliquam laudantium aspernatur iste commodi
+            temporibus vero maxime, deserunt consequuntur fugiat animi dicta
+            debitis alias quos amet facere repellendus? Nesciunt, fugiat? Vel,
+            harum. Eos magnam, totam blanditiis nemo facilis culpa voluptate sed
+            dolores delectus alias velit, deleniti ex id quasi. Maiores
+            laboriosam repellendus vitae aliquam voluptas delectus deserunt
+            provident. Saepe, ullam. Error, ipsam. Facere dolore ullam
+            reprehenderit debitis et aperiam exercitationem numquam deserunt?
+            Temporibus asperiores exercitationem commodi vel? Autem, optio?
+            Tempora, dicta, pariatur dolores repudiandae corrupti beatae
+            voluptate dignissimos omnis consectetur ratione rerum.
+            Exercitationem eligendi, sint necessitatibus cumque voluptatum
+            corrupti incidunt inventore natus cupiditate, obcaecati nisi unde
+            nesciunt commodi! Eveniet itaque nihil ducimus repellendus et atque
+            laborum quos? Nostrum, aperiam aut. Ratione, earum! Voluptate
+            deleniti labore dolor quod nobis atque nam repellendus? Fugiat,
+            aliquam voluptatum quam cum, veniam mollitia, autem consequatur
+            officiis dolorem assumenda tempore. Distinctio officiis numquam
+            omnis quos aperiam minima voluptatibus? Magnam laborum nesciunt eos
+            qui sed repellendus tenetur harum, id, mollitia a provident
+            accusantium sint architecto, laudantium sit dolore quia. Vel impedit
+            quasi nam necessitatibus accusantium saepe praesentium laudantium
+            ut. Sit dolor voluptas dignissimos doloremque qui atque dolorum.
+            Aperiam eaque sapiente dicta nulla error laborum eius ex illum
+            harum, dolor quae illo praesentium ad hic at dolorem iusto
+            recusandae unde. Ipsa alias tenetur magni reprehenderit nam
+            consequuntur pariatur consequatur quas aspernatur cumque harum ullam
+            asperiores corporis distinctio consectetur dicta iusto, iure rem
+            quos nobis laboriosam eos nulla accusamus et. Similique. Consectetur
+            hic vel explicabo id assumenda, dolores quos neque asperiores ut,
+            aperiam a blanditiis est, ullam officia cum error eligendi delectus!
+            Cupiditate iusto est ad. Magni porro blanditiis quo delectus!
+            Possimus quis repellat aliquam, quia repudiandae deserunt ipsum
+            laudantium quaerat impedit veniam quibusdam rerum libero! Nam
+            laboriosam qui blanditiis nihil soluta, magnam ut fuga voluptatem
+            voluptatibus doloremque aut, aliquam velit? Soluta in esse dolorem
+            harum excepturi incidunt qui omnis quidem perferendis, alias culpa
+            ipsa quaerat delectus quam dolores nulla inventore dicta rerum enim
+            obcaecati. Officia esse nostrum voluptate mollitia corporis. Numquam
+            exercitationem fuga debitis soluta. Accusantium a voluptatum
+            reprehenderit, perferendis dolorum sequi ab consequatur molestiae
+            necessitatibus consequuntur asperiores expedita? Corporis vel fugiat
+            distinctio sint magnam eveniet facilis. Corrupti, quisquam
+            perferendis. Architecto recusandae dolores aspernatur eligendi
+            laborum iure libero sit vitae optio error cupiditate illo magnam
+            harum quam, porro debitis repellendus quis iusto nemo, atque nobis
+            aliquam consequatur? Quo, saepe repudiandae. Rem nostrum quos illo
+            eos cupiditate culpa eum dolorem debitis odit accusantium quibusdam
+            eligendi ea quisquam, nam beatae, nihil vitae mollitia totam laborum
+            necessitatibus veritatis porro error molestias. Exercitationem,
+            soluta. Eaque suscipit amet impedit illum hic rerum nesciunt. Totam
+            culpa, quia fuga at blanditiis dolorum rerum iusto ipsa quae
+            distinctio a placeat dolorem omnis praesentium libero obcaecati
+            molestiae porro aliquid. Accusantium itaque rerum nobis, quam, non
+            numquam animi qui cupiditate repellendus repellat veritatis pariatur
+            expedita debitis veniam beatae rem dicta vel vitae, eaque eos
+            placeat. Consequatur, facilis commodi. Soluta, incidunt. Beatae
+            nobis nesciunt quis reiciendis? Velit voluptatum et placeat
+            accusantium illo suscipit id dolorum cupiditate rem fugiat! Libero
+            esse, ad dolorum commodi officiis incidunt enim corrupti, fuga
+            beatae aspernatur expedita? Earum rerum laborum dolore architecto?
+            Culpa vitae at ipsum sapiente? Labore aliquid, dolor optio voluptas
+            mollitia recusandae quas sequi tempora corporis. Ipsa voluptate
+            fugiat omnis perferendis deserunt, itaque quos perspiciatis.
+            Asperiores explicabo dolore, molestiae, consequatur sint soluta
+            vitae quae iure reprehenderit hic officia aliquid omnis reiciendis
+            voluptatibus tempora provident veniam in magni eum et exercitationem
+            doloribus ullam. Neque, culpa temporibus.
+        </article>
+    </section>
+</x-layout>
diff --git a/resources/views/blog.blade.php b/resources/views/blog.blade.php
new file mode 100644
index 00000000..a70b8bc9
--- /dev/null
+++ b/resources/views/blog.blade.php
@@ -0,0 +1,211 @@
+<x-layout title="Blog">
+    {{-- Hero --}}
+    <section
+        class="mt-10 px-5 md:mt-14"
+        aria-labelledby="hero-heading"
+    >
+        <header class="relative z-0 grid place-items-center text-center">
+            {{-- Primary Heading --}}
+            <h1
+                id="hero-heading"
+                x-init="
+                    () => {
+                        motion.inView($el, (element) => {
+                            motion.animate(
+                                $el,
+                                {
+                                    opacity: [0, 1],
+                                    y: [-10, 0],
+                                },
+                                {
+                                    duration: 0.7,
+                                    ease: motion.easeOut,
+                                },
+                            )
+                        })
+                    }
+                "
+                class="text-3xl font-extrabold will-change-transform sm:text-4xl"
+            >
+                Blog
+            </h1>
+
+            {{-- Introduction Description --}}
+            <h2
+                x-init="
+                    () => {
+                        motion.inView($el, (element) => {
+                            motion.animate(
+                                $el,
+                                {
+                                    opacity: [0, 1],
+                                    y: [10, 0],
+                                },
+                                {
+                                    duration: 0.7,
+                                    ease: motion.easeOut,
+                                },
+                            )
+                        })
+                    }
+                "
+                class="mx-auto max-w-2xl pt-4 text-base/relaxed text-gray-600 will-change-transform sm:text-lg/relaxed dark:text-gray-400"
+            >
+                Welcome to our blog! Here, we share insights, updates, and
+                stories from our community. Stay tuned for the latest news and
+                articles.
+            </h2>
+
+            {{-- Blurred circle - Decorative --}}
+            <div
+                class="absolute -top-1/2 right-0 -z-20 h-60 w-60 rounded-full bg-violet-300/60 blur-[150px] md:right-1/2 md:w-80 dark:bg-violet-500/20"
+                aria-hidden="true"
+            ></div>
+
+            {{-- Blurred circle - Decorative --}}
+            <div
+                class="absolute left-0 top-1/2 -z-30 h-60 w-60 rounded-full bg-orange-200/60 blur-[150px] md:left-1/2 md:w-80 dark:bg-slate-500/50"
+                aria-hidden="true"
+            ></div>
+        </header>
+    </section>
+
+    {{-- Articles --}}
+    <section
+        class="relative z-10 mx-auto mt-10 w-full max-w-xl px-5"
+        aria-labelledby="blog-articles-heading"
+    >
+        {{-- Semantic heading for section (visually hidden) --}}
+        <h2
+            id="blog-articles-heading"
+            class="sr-only"
+        >
+            Blog Articles
+        </h2>
+
+        {{-- List --}}
+        <div
+            x-init="
+                () => {
+                    motion.inView($el, (element) => {
+                        motion.animate(
+                            Array.from($el.children),
+                            {
+                                x: [-50, 0],
+                                opacity: [0, 1],
+                            },
+                            {
+                                duration: 0.7,
+                                ease: motion.circOut,
+                                delay: motion.stagger(0.1),
+                            },
+                        )
+                    })
+                }
+            "
+            class="flex flex-col gap-5"
+        >
+            <x-article-card
+                title="NativePHP for desktop v1 is finally here!"
+                url="/article"
+                date="2025-04-09"
+            >
+                🎉 WE DID IT! We finally got to v1. I almost don't believe it!
+                This is an awesome milestone. For a project that started as just
+                an idea, to see it reach a truly stable place and support
+                building powerful apps across all major platforms is just
+                incredible.
+            </x-article-card>
+            <x-article-card
+                title="Dropping Laravel 10 support"
+                url="/article"
+                date="2025-04-4"
+            >
+                Hey team, this is just a quick note about Laravel version
+                support. Per our Support Policy matrix, we will be dropping
+                Laravel 10 support for NativePHP for desktop v1. Laravel 10
+                reached end of life back in February 2025.
+            </x-article-card>
+            <x-article-card
+                title="NativePHP for mobile—Pricing update!"
+                url="/article"
+                date="2025-03-27"
+            >
+                Earlier this week I spoke at the Laravel Worldwide Meetup where
+                I unveiled: 🌐 A brand new nativephp.com, lovingly (and
+                painstakingly!) crafted by the incredible
+                @HassanZahirnia
+            </x-article-card>
+        </div>
+
+        {{-- Pagination --}}
+        <nav
+            class="flex items-center justify-between gap-5 pt-2.5"
+            aria-label="Blog pagination"
+        >
+            {{-- Previous --}}
+            <div
+                x-init="
+                    () => {
+                        motion.inView($el, (element) => {
+                            motion.animate(
+                                $el,
+                                {
+                                    opacity: [0, 1],
+                                    x: [-10, 0],
+                                },
+                                {
+                                    duration: 0.7,
+                                    ease: motion.easeOut,
+                                },
+                            )
+                        })
+                    }
+                "
+                class="will-change-transform"
+            >
+                <a
+                    href="#"
+                    class="inline-block p-1.5 opacity-60 transition duration-200 hover:opacity-100"
+                    aria-label="Go to previous page"
+                    rel="prev"
+                >
+                    <span class="sr-only">Navigate to</span>
+                    Previous
+                </a>
+            </div>
+
+            {{-- Next --}}
+            <div
+                x-init="
+                    () => {
+                        motion.inView($el, (element) => {
+                            motion.animate(
+                                $el,
+                                {
+                                    opacity: [0, 1],
+                                    x: [10, 0],
+                                },
+                                {
+                                    duration: 0.7,
+                                    ease: motion.easeOut,
+                                },
+                            )
+                        })
+                    }
+                "
+                class="will-change-transform"
+            >
+                <a
+                    href="#"
+                    class="inline-block p-1.5 opacity-80 transition duration-200 hover:opacity-100"
+                    aria-label="Go to next page"
+                    rel="next"
+                >
+                    <span class="sr-only">Navigate to</span>
+                    Next
+                </a>
+            </div>
+        </nav>
+    </section>
+</x-layout>
diff --git a/resources/views/components/alert-v1-announcement.blade.php b/resources/views/components/alert-v1-announcement.blade.php
new file mode 100644
index 00000000..529bff35
--- /dev/null
+++ b/resources/views/components/alert-v1-announcement.blade.php
@@ -0,0 +1,269 @@
+<div
+    class="relative z-0 mt-5 flex flex-col items-start gap-3 overflow-hidden rounded-2xl bg-[#f9f8f6] p-4 ring-1 ring-black/5 min-[450px]:flex-row min-[450px]:items-center dark:bg-mirage"
+    role="alert"
+    aria-labelledby="beta-alert-title"
+    aria-describedby="beta-alert-description"
+>
+    {{-- Blue circle --}}
+    <div
+        class="absolute left-6 top-0 -z-10 hidden h-32 w-6 -rotate-[60deg] rounded-full blur-lg min-[450px]:top-1/2 min-[450px]:-translate-y-1/2 dark:block dark:bg-gradient-to-b dark:from-blue-500 dark:to-blue-500/10"
+        aria-hidden="true"
+    ></div>
+
+    {{-- White circle --}}
+    <div
+        class="absolute left-20 top-0 -z-20 hidden h-32 w-3 -rotate-[60deg] rounded-full blur-lg min-[450px]:top-1/2 min-[450px]:-translate-y-1/2 dark:block dark:bg-gradient-to-b dark:from-white/30 dark:to-transparent"
+        aria-hidden="true"
+    ></div>
+
+    {{-- Icon --}}
+    <div
+        class="grid size-10 place-items-center rounded-full bg-gray-200/50 backdrop-blur-sm dark:bg-black/30"
+        aria-hidden="true"
+    >
+        <x-icons.colored-confetti
+            class="-mr-px size-[22px] shrink-0 mix-blend-multiply dark:hidden"
+            aria-hidden="true"
+        />
+
+        <x-icons.confetti
+            class="hidden size-5 shrink-0 dark:block"
+            aria-hidden="true"
+        />
+    </div>
+
+    {{-- Title --}}
+    <h2 class="font-medium">NativePHP for desktop has finally reached v1!</h2>
+
+    {{-- Dot 1 --}}
+    <div
+        x-init="
+            () => {
+                motion.animate(
+                    $el,
+                    {
+                        opacity: [0, 1, 0],
+                        y: [
+                            Math.random() * 10 + 5,
+                            Math.random() * 10 - 5,
+                            Math.random() * 10 - 5,
+                        ],
+                        x: [Math.random() * 10 - 5, 120],
+                    },
+                    {
+                        duration: Math.random() * 5 + 3,
+                        repeat: Infinity,
+                        repeatType: 'loop',
+                        ease: motion.easeInOut,
+                        delay: Math.random() * 1.5,
+                    },
+                )
+            }
+        "
+        class="absolute -left-3 top-2 -z-50 hidden size-0.5 rounded-full bg-white dark:block"
+        aria-hidden="true"
+    ></div>
+
+    {{-- Dot 11 --}}
+    <div
+        x-init="
+            () => {
+                motion.animate(
+                    $el,
+                    {
+                        opacity: [0, 1, 0],
+                        y: [
+                            Math.random() * 10 - 5,
+                            Math.random() * 10 + 5,
+                            Math.random() * 10 - 5,
+                        ],
+                        x: [Math.random() * 10 - 5, 120],
+                    },
+                    {
+                        duration: Math.random() * 5 + 3,
+                        repeat: Infinity,
+                        repeatType: 'loop',
+                        ease: motion.easeInOut,
+                        delay: Math.random(),
+                    },
+                )
+            }
+        "
+        class="absolute -left-3 top-3.5 -z-50 hidden size-0.5 rounded-full bg-white dark:block"
+        aria-hidden="true"
+    ></div>
+
+    {{-- Dot 2 --}}
+    <div
+        x-init="
+            () => {
+                motion.animate(
+                    $el,
+                    {
+                        opacity: [0, 1, 0],
+                        y: [
+                            Math.random() * 10 + 5,
+                            Math.random() * 10 - 5,
+                            Math.random() * 10 - 5,
+                        ],
+                        x: [Math.random() * 10 - 5, 120],
+                    },
+                    {
+                        duration: Math.random() * 5 + 3,
+                        repeat: Infinity,
+                        repeatType: 'loop',
+                        ease: motion.easeInOut,
+                        delay: Math.random() * 1.5,
+                    },
+                )
+            }
+        "
+        class="absolute -left-3 top-5 -z-50 hidden size-0.5 rounded-full bg-white dark:block"
+        aria-hidden="true"
+    ></div>
+
+    {{-- Dot 22 --}}
+    <div
+        x-init="
+            () => {
+                motion.animate(
+                    $el,
+                    {
+                        opacity: [0, 1, 0],
+                        y: [
+                            Math.random() * 10 - 5,
+                            Math.random() * 10 + 5,
+                            Math.random() * 10 - 5,
+                        ],
+                        x: [Math.random() * 10 - 5, 120],
+                    },
+                    {
+                        duration: Math.random() * 5 + 3,
+                        repeat: Infinity,
+                        repeatType: 'loop',
+                        ease: motion.easeInOut,
+                        delay: Math.random(),
+                    },
+                )
+            }
+        "
+        class="absolute -left-3 top-7 -z-50 hidden size-0.5 rounded-full bg-white dark:block"
+        aria-hidden="true"
+    ></div>
+
+    {{-- Dot 3 --}}
+    <div
+        x-init="
+            () => {
+                motion.animate(
+                    $el,
+                    {
+                        opacity: [0, 1, 0],
+                        y: [
+                            Math.random() * 10 + 5,
+                            Math.random() * 10 - 5,
+                            Math.random() * 10 - 5,
+                        ],
+                        x: [Math.random() * 10 - 5, 120],
+                    },
+                    {
+                        duration: Math.random() * 5 + 3,
+                        repeat: Infinity,
+                        repeatType: 'loop',
+                        ease: motion.easeInOut,
+                        delay: Math.random() * 1.5,
+                    },
+                )
+            }
+        "
+        class="absolute -left-3 top-10 -z-50 hidden size-0.5 rounded-full bg-white dark:block"
+        aria-hidden="true"
+    ></div>
+
+    {{-- Dot 33 --}}
+    <div
+        x-init="
+            () => {
+                motion.animate(
+                    $el,
+                    {
+                        opacity: [0, 1, 0],
+                        y: [
+                            Math.random() * 10 - 5,
+                            Math.random() * 10 + 5,
+                            Math.random() * 10 - 5,
+                        ],
+                        x: [Math.random() * 10 - 5, 120],
+                    },
+                    {
+                        duration: Math.random() * 5 + 3,
+                        repeat: Infinity,
+                        repeatType: 'loop',
+                        ease: motion.easeInOut,
+                        delay: Math.random(),
+                    },
+                )
+            }
+        "
+        class="absolute -left-3 top-12 -z-50 hidden size-0.5 rounded-full bg-white dark:block"
+        aria-hidden="true"
+    ></div>
+
+    {{-- Dot 4 --}}
+    <div
+        x-init="
+            () => {
+                motion.animate(
+                    $el,
+                    {
+                        opacity: [0, 1, 0],
+                        y: [
+                            Math.random() * 10 + 5,
+                            Math.random() * 10 - 5,
+                            Math.random() * 10 - 5,
+                        ],
+                        x: [Math.random() * 10 - 5, 120],
+                    },
+                    {
+                        duration: Math.random() * 5 + 3,
+                        repeat: Infinity,
+                        repeatType: 'loop',
+                        ease: motion.easeInOut,
+                        delay: Math.random() * 1.5,
+                    },
+                )
+            }
+        "
+        class="absolute -left-3 top-14 -z-50 hidden size-0.5 rounded-full bg-white dark:block"
+        aria-hidden="true"
+    ></div>
+
+    {{-- Dot 44 --}}
+    <div
+        x-init="
+            () => {
+                motion.animate(
+                    $el,
+                    {
+                        opacity: [0, 1, 0],
+                        y: [
+                            Math.random() * 10 - 5,
+                            Math.random() * 10 + 5,
+                            Math.random() * 10 - 5,
+                        ],
+                        x: [Math.random() * 10 - 5, 120],
+                    },
+                    {
+                        duration: Math.random() * 5 + 3,
+                        repeat: Infinity,
+                        repeatType: 'loop',
+                        ease: motion.easeInOut,
+                        delay: Math.random(),
+                    },
+                )
+            }
+        "
+        class="absolute -left-3 top-16 -z-50 hidden size-0.5 rounded-full bg-white dark:block"
+        aria-hidden="true"
+    ></div>
+</div>
diff --git a/resources/views/components/article-card.blade.php b/resources/views/components/article-card.blade.php
new file mode 100644
index 00000000..3eea9265
--- /dev/null
+++ b/resources/views/components/article-card.blade.php
@@ -0,0 +1,59 @@
+@props([
+    'title' => '',
+    'url' => '#',
+    'date' => null,
+])
+
+<a
+    href="{{ $url }}"
+    class="block"
+    aria-labelledby="article-title-{{ Str::slug($title) }}"
+>
+    <article
+        class="group relative z-0 block overflow-hidden rounded-2xl bg-gray-200/40 p-7 transition duration-300 hover:bg-violet-100 dark:bg-mirage/50 dark:hover:bg-violet-500/10"
+    >
+        {{-- Header --}}
+        <div class="flex items-start justify-between gap-10">
+            {{-- Title --}}
+            <h3
+                id="article-title-{{ Str::slug($title) }}"
+                class="line-clamp-4 max-w-xs text-xl font-semibold leading-relaxed"
+            >
+                {{ $title }}
+            </h3>
+
+            {{-- Arrow --}}
+            <x-icons.right-arrow
+                class="-ml-5 mt-2 size-3.5 shrink-0 transition duration-300 will-change-transform group-hover:translate-x-1"
+                aria-hidden="true"
+            />
+        </div>
+
+        <div class="flex items-end justify-between gap-10 pt-5">
+            {{-- Date --}}
+            @if ($date)
+                @php
+                    $dateObject = \Carbon\Carbon::parse($date);
+                    $formattedDate = $dateObject->format('F j, Y');
+                @endphp
+
+                <time
+                    datetime="{{ $date }}"
+                    class="shrink-0 text-sm opacity-50"
+                >
+                    {{ $formattedDate }}
+                </time>
+            @endif
+
+            {{-- Content --}}
+            <p class="line-clamp-3 max-w-72 text-xs leading-relaxed opacity-80">
+                {{ $slot }}
+            </p>
+        </div>
+
+        {{-- Blur decoration --}}
+        <div
+            class="absolute -left-10 -top-10 -z-50 h-3/4 w-40 rounded-full bg-violet-50 opacity-0 blur-3xl transition duration-300 group-hover:opacity-100 dark:bg-white/15"
+        ></div>
+    </article>
+</a>
diff --git a/resources/views/components/eap-banner.blade.php b/resources/views/components/eap-banner.blade.php
index d9e514bc..4dd9e4e5 100644
--- a/resources/views/components/eap-banner.blade.php
+++ b/resources/views/components/eap-banner.blade.php
@@ -3,16 +3,6 @@
     onclick="fathom.trackEvent('alert_click');"
     class="group relative z-30 flex items-center justify-center gap-2 bg-gradient-to-r from-[#352F5B] to-[#6056AA] px-5 py-2.5 text-center"
 >
-    <style>
-        @keyframes shine {
-            0% {
-                background-position: 200% 50%;
-            }
-            100% {
-                background-position: 0% 50%;
-            }
-        }
-    </style>
     {{-- Text --}}
     <div
         class="transition duration-200 ease-in-out will-change-transform group-hover:-translate-x-1"
diff --git a/resources/views/components/icons/colored-confetti.blade.php b/resources/views/components/icons/colored-confetti.blade.php
new file mode 100644
index 00000000..92f22525
--- /dev/null
+++ b/resources/views/components/icons/colored-confetti.blade.php
@@ -0,0 +1,187 @@
+<svg
+    {{ $attributes }}
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+>
+    <path
+        fill="#ffbfc5"
+        d="M8 7.5c1.38071 0 2.5 -1.11929 2.5 -2.5S9.38071 2.5 8 2.5 5.5 3.61929 5.5 5 6.61929 7.5 8 7.5Z"
+        stroke-width="1"
+    ></path>
+    <path
+        fill="#c2f3ff"
+        d="M20 6c1.1046 0 2 -0.89543 2 -2s-0.8954 -2 -2 -2 -2 0.89543 -2 2 0.8954 2 2 2Z"
+        stroke-width="1"
+    ></path>
+    <path
+        fill="#c9f7ca"
+        d="M19.5 16c1.1046 0 2 -0.8954 2 -2s-0.8954 -2 -2 -2 -2 0.8954 -2 2 0.8954 2 2 2Z"
+        stroke-width="1"
+    ></path>
+    <path
+        stroke="#191919"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M16.483 12.216c0.9312 -0.9292 2.193 -1.4511 3.5085 -1.4511 1.3155 0 2.5773 0.5219 3.5085 1.4511"
+        stroke-width="1"
+    ></path>
+    <path
+        stroke="#191919"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M11.768 7.518c0.461 -0.46071 0.8267 -1.00774 1.0762 -1.60983 0.2495 -0.60208 0.3779 -1.24743 0.3779 -1.89917s-0.1284 -1.29709 -0.3779 -1.89917C12.5947 1.50774 12.229 0.96071 11.768 0.5"
+        stroke-width="1"
+    ></path>
+    <path
+        stroke="#191919"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="m18.075 8.24899 3.509 -1.168"
+        stroke-width="1"
+    ></path>
+    <path
+        stroke="#191919"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="m15.736 5.91201 1.17 -3.51"
+        stroke-width="1"
+    ></path>
+    <path
+        stroke="#191919"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M7.965 4.771c0.0663 0 0.12989 0.02634 0.17678 0.07322 0.04688 0.04688 0.07322 0.11047 0.07322 0.17678"
+        stroke-width="1"
+    ></path>
+    <path
+        stroke="#191919"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M7.715 5.021c0 -0.06631 0.02634 -0.1299 0.07322 -0.17678 0.04689 -0.04688 0.11048 -0.07322 0.17678 -0.07322"
+        stroke-width="1"
+    ></path>
+    <path
+        stroke="#191919"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M7.965 5.271c-0.0663 0 -0.12989 -0.02634 -0.17678 -0.07323C7.74134 5.15089 7.715 5.0873 7.715 5.021"
+        stroke-width="1"
+    ></path>
+    <path
+        stroke="#191919"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M8.215 5.021c0 0.0663 -0.02634 0.12989 -0.07322 0.17677 -0.04689 0.04689 -0.11048 0.07323 -0.17678 0.07323"
+        stroke-width="1"
+    ></path>
+    <path
+        stroke="#191919"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M15.465 7.771c0.0663 0 0.1299 0.02634 0.1768 0.07322 0.0469 0.04688 0.0732 0.11047 0.0732 0.17678"
+        stroke-width="1"
+    ></path>
+    <path
+        stroke="#191919"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M15.215 8.021c0 -0.06631 0.0263 -0.1299 0.0732 -0.17678 0.0469 -0.04688 0.1105 -0.07322 0.1768 -0.07322"
+        stroke-width="1"
+    ></path>
+    <path
+        stroke="#191919"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M15.465 8.271c-0.0663 0 -0.1299 -0.02634 -0.1768 -0.07323 -0.0469 -0.04688 -0.0732 -0.11047 -0.0732 -0.17677"
+        stroke-width="1"
+    ></path>
+    <path
+        stroke="#191919"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M15.715 8.021c0 0.0663 -0.0263 0.12989 -0.0732 0.17677 -0.0469 0.04689 -0.1105 0.07323 -0.1768 0.07323"
+        stroke-width="1"
+    ></path>
+    <path
+        stroke="#191919"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M19.465 13.771c0.0663 0 0.1299 0.0263 0.1768 0.0732 0.0469 0.0469 0.0732 0.1105 0.0732 0.1768"
+        stroke-width="1"
+    ></path>
+    <path
+        stroke="#191919"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M19.215 14.021c0 -0.0663 0.0263 -0.1299 0.0732 -0.1768 0.0469 -0.0469 0.1105 -0.0732 0.1768 -0.0732"
+        stroke-width="1"
+    ></path>
+    <path
+        stroke="#191919"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M19.465 14.271c-0.0663 0 -0.1299 -0.0263 -0.1768 -0.0732 -0.0469 -0.0469 -0.0732 -0.1105 -0.0732 -0.1768"
+        stroke-width="1"
+    ></path>
+    <path
+        stroke="#191919"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M19.715 14.021c0 0.0663 -0.0263 0.1299 -0.0732 0.1768 -0.0469 0.0469 -0.1105 0.0732 -0.1768 0.0732"
+        stroke-width="1"
+    ></path>
+    <path
+        stroke="#191919"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M19.965 3.771c0.0663 0 0.1299 0.02634 0.1768 0.07322 0.0469 0.04688 0.0732 0.11047 0.0732 0.17678"
+        stroke-width="1"
+    ></path>
+    <path
+        stroke="#191919"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M19.715 4.021c0 -0.06631 0.0263 -0.1299 0.0732 -0.17678 0.0469 -0.04688 0.1105 -0.07322 0.1768 -0.07322"
+        stroke-width="1"
+    ></path>
+    <path
+        stroke="#191919"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M19.965 4.271c-0.0663 0 -0.1299 -0.02634 -0.1768 -0.07323 -0.0469 -0.04688 -0.0732 -0.11047 -0.0732 -0.17677"
+        stroke-width="1"
+    ></path>
+    <path
+        stroke="#191919"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M20.215 4.021c0 0.0663 -0.0263 0.12989 -0.0732 0.17677 -0.0469 0.04689 -0.1105 0.07323 -0.1768 0.07323"
+        stroke-width="1"
+    ></path>
+    <path
+        fill="#ffef5e"
+        d="M15.145 16.575 2.484 23.341c-0.25511 0.1364 -0.54734 0.1871 -0.83349 0.1447 -0.28615 -0.0425 -0.55106 -0.1759 -0.755557 -0.3805 -0.204502 -0.2046 -0.337753 -0.4696 -0.380064 -0.7558 -0.04231 -0.2862 0.008567 -0.5784 0.145111 -0.8334L7.425 8.85501l7.72 7.71999Z"
+        stroke-width="1"
+    ></path>
+    <path
+        fill="#fff9bf"
+        d="m11.285 12.715 -3.86 -3.85999L0.66 21.516c-0.136351 0.2554 -0.186644 0.548 -0.143405 0.8343 0.04324 0.2863 0.177703 0.551 0.383405 0.7547l10.385 -10.39Z"
+        stroke-width="1"
+    ></path>
+    <path
+        stroke="#191919"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M15.145 16.575 2.484 23.341c-0.25511 0.1364 -0.54734 0.1871 -0.83349 0.1447 -0.28615 -0.0425 -0.55106 -0.1759 -0.755557 -0.3805 -0.204502 -0.2046 -0.337753 -0.4696 -0.380064 -0.7558 -0.04231 -0.2862 0.008567 -0.5784 0.145111 -0.8334L7.425 8.85501"
+        stroke-width="1"
+    ></path>
+    <path
+        fill="#ffbc44"
+        stroke="#191919"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M15.3906 16.3874c0.9764 -0.9764 0.0266 -3.509 -2.1213 -5.6569 -2.1479 -2.14788 -4.68051 -3.09762 -5.65682 -2.12131 -0.97632 0.97631 -0.02657 3.50901 2.12132 5.65681 2.1479 2.1479 4.6805 3.0977 5.6568 2.1214Z"
+        stroke-width="1"
+    ></path>
+</svg>
diff --git a/resources/views/components/icons/confetti.blade.php b/resources/views/components/icons/confetti.blade.php
new file mode 100644
index 00000000..456c7822
--- /dev/null
+++ b/resources/views/components/icons/confetti.blade.php
@@ -0,0 +1,46 @@
+<svg
+    {{ $attributes }}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+>
+    <path
+        d="M22.68 11.59a3.13 3.13 0 0 0 -4.35 0 0.75 0.75 0 0 1 -1.06 0 0.74 0.74 0 0 1 0 -1.06 4.57 4.57 0 0 1 6.47 0 0.75 0.75 0 1 1 -1.06 1.06Z"
+        fill="currentColor"
+        stroke-width="1"
+    ></path>
+    <path
+        d="M19.95 14.56a0.81 0.81 0 1 0 1.62 0 0.81 0.81 0 1 0 -1.62 0"
+        fill="currentColor"
+        stroke-width="1"
+    ></path>
+    <path
+        d="M12.41 6.73a0.75 0.75 0 0 1 0 -1.06 3.08 3.08 0 0 0 0 -4.35 0.75 0.75 0 0 1 1.06 -1.06 4.57 4.57 0 0 1 0 6.47 0.74 0.74 0 0 1 -1.06 0Z"
+        fill="currentColor"
+        stroke-width="1"
+    ></path>
+    <path
+        d="M8.63 3.24a0.81 0.81 0 1 0 1.62 0 0.81 0.81 0 1 0 -1.62 0"
+        fill="currentColor"
+        stroke-width="1"
+    ></path>
+    <path
+        d="M22.38 0.81a0.81 0.81 0 1 0 1.62 0 0.81 0.81 0 1 0 -1.62 0"
+        fill="currentColor"
+        stroke-width="1"
+    ></path>
+    <path
+        d="M22.11 6.47a0.81 0.81 0 1 0 1.62 0 0.81 0.81 0 1 0 -1.62 0"
+        fill="currentColor"
+        stroke-width="1"
+    ></path>
+    <path
+        d="M15.65 8.35a0.75 0.75 0 0 1 0 -1.06l5.12 -5.12a0.75 0.75 0 0 1 1.06 1.06l-5.12 5.12a0.75 0.75 0 0 1 -1.06 0Z"
+        fill="currentColor"
+        stroke-width="1"
+    ></path>
+    <path
+        d="M14 10c-2.21 -2.24 -5.31 -3.64 -6.91 -2a1.66 1.66 0 0 0 -0.36 0.48C6.69 8.51 0.28 20.52 0.28 20.52a2.38 2.38 0 0 0 0.41 2.79 2.37 2.37 0 0 0 2.78 0.41l12 -6.41a1.79 1.79 0 0 0 0.57 -0.4c1.6 -1.61 0.2 -4.7 -2.04 -6.91Zm0.49 5.4c-0.35 0.36 -2.37 -0.52 -3.87 -2s-2.37 -3.52 -2 -3.87c0.15 -0.15 1.77 -0.08 3.88 2 1.89 1.88 2.24 3.63 2.01 3.85Z"
+        fill="currentColor"
+        stroke-width="1"
+    ></path>
+</svg>
diff --git a/resources/views/components/icons/date.blade.php b/resources/views/components/icons/date.blade.php
new file mode 100644
index 00000000..c2fe28ee
--- /dev/null
+++ b/resources/views/components/icons/date.blade.php
@@ -0,0 +1,73 @@
+<svg
+    {{ $attributes }}
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="-0.5 -0.5 24 24"
+>
+    <path
+        id="Vector"
+        stroke="currentColor"
+        stroke-linecap="round"
+        d="M6.708333333333334 3.8333333333333335V2.3958333333333335"
+        stroke-width="1.2"
+        opacity="0.7"
+    ></path>
+    <path
+        id="Vector_2"
+        stroke="currentColor"
+        stroke-linecap="round"
+        d="M16.291666666666668 3.8333333333333335V2.3958333333333335"
+        stroke-width="1.2"
+        opacity="0.7"
+    ></path>
+    <path
+        id="Vector_3"
+        stroke="currentColor"
+        stroke-linecap="round"
+        d="M2.3958333333333335 8.625h18.208333333333336"
+        stroke-width="1.2"
+        opacity="0.7"
+    ></path>
+    <path
+        id="Vector_4"
+        stroke="currentColor"
+        d="M1.9166666666666667 11.5c0 -3.6141050000000003 0 -5.421147916666667 1.1227545833333334 -6.543912083333334C4.1621854166666665 3.8333333333333335 5.969228333333334 3.8333333333333335 9.583333333333334 3.8333333333333335h3.8333333333333335c3.6140666666666665 0 5.421195833333334 0 6.5438833333333335 1.1227545833333334C21.083333333333336 6.0788520833333335 21.083333333333336 7.885895 21.083333333333336 11.5v1.9166666666666667c0 3.6140666666666665 0 5.421195833333334 -1.1227833333333332 6.5438833333333335C18.8378625 21.083333333333336 17.030733333333334 21.083333333333336 13.416666666666668 21.083333333333336h-3.8333333333333335c-3.6141050000000003 0 -5.421147916666667 0 -6.543912083333334 -1.1227833333333332C1.9166666666666667 18.8378625 1.9166666666666667 17.030733333333334 1.9166666666666667 13.416666666666668v-1.9166666666666667Z"
+        stroke-width="1.2"
+    ></path>
+    <path
+        id="Vector_5"
+        fill="currentColor"
+        d="M17.25 16.291666666666668c0 0.5292875 -0.42904583333333335 0.9583333333333334 -0.9583333333333334 0.9583333333333334s-0.9583333333333334 -0.42904583333333335 -0.9583333333333334 -0.9583333333333334 0.42904583333333335 -0.9583333333333334 0.9583333333333334 -0.9583333333333334 0.9583333333333334 0.42904583333333335 0.9583333333333334 0.9583333333333334Z"
+        stroke-width="1.2"
+    ></path>
+    <path
+        id="Vector_6"
+        fill="currentColor"
+        d="M17.25 12.458333333333334c0 0.5292875 -0.42904583333333335 0.9583333333333334 -0.9583333333333334 0.9583333333333334s-0.9583333333333334 -0.42904583333333335 -0.9583333333333334 -0.9583333333333334 0.42904583333333335 -0.9583333333333334 0.9583333333333334 -0.9583333333333334 0.9583333333333334 0.42904583333333335 0.9583333333333334 0.9583333333333334Z"
+        stroke-width="1.2"
+    ></path>
+    <path
+        id="Vector_7"
+        fill="currentColor"
+        d="M12.458333333333334 16.291666666666668c0 0.5292875 -0.42904583333333335 0.9583333333333334 -0.9583333333333334 0.9583333333333334s-0.9583333333333334 -0.42904583333333335 -0.9583333333333334 -0.9583333333333334 0.42904583333333335 -0.9583333333333334 0.9583333333333334 -0.9583333333333334 0.9583333333333334 0.42904583333333335 0.9583333333333334 0.9583333333333334Z"
+        stroke-width="1.2"
+    ></path>
+    <path
+        id="Vector_8"
+        fill="currentColor"
+        d="M12.458333333333334 12.458333333333334c0 0.5292875 -0.42904583333333335 0.9583333333333334 -0.9583333333333334 0.9583333333333334s-0.9583333333333334 -0.42904583333333335 -0.9583333333333334 -0.9583333333333334 0.42904583333333335 -0.9583333333333334 0.9583333333333334 -0.9583333333333334 0.9583333333333334 0.42904583333333335 0.9583333333333334 0.9583333333333334Z"
+        stroke-width="1.2"
+    ></path>
+    <path
+        id="Vector_9"
+        fill="currentColor"
+        d="M7.666666666666667 16.291666666666668c0 0.5292875 -0.42906500000000003 0.9583333333333334 -0.9583333333333334 0.9583333333333334s-0.9583333333333334 -0.42904583333333335 -0.9583333333333334 -0.9583333333333334 0.42906500000000003 -0.9583333333333334 0.9583333333333334 -0.9583333333333334 0.9583333333333334 0.42904583333333335 0.9583333333333334 0.9583333333333334Z"
+        stroke-width="1.2"
+    ></path>
+    <path
+        id="Vector_10"
+        fill="currentColor"
+        d="M7.666666666666667 12.458333333333334c0 0.5292875 -0.42906500000000003 0.9583333333333334 -0.9583333333333334 0.9583333333333334s-0.9583333333333334 -0.42904583333333335 -0.9583333333333334 -0.9583333333333334 0.42906500000000003 -0.9583333333333334 0.9583333333333334 -0.9583333333333334 0.9583333333333334 0.42904583333333335 0.9583333333333334 0.9583333333333334Z"
+        stroke-width="1.2"
+    ></path>
+</svg>
diff --git a/resources/views/components/navigation-bar.blade.php b/resources/views/components/navigation-bar.blade.php
index d4c554d2..443110a3 100644
--- a/resources/views/components/navigation-bar.blade.php
+++ b/resources/views/components/navigation-bar.blade.php
@@ -27,15 +27,58 @@ class="mx-auto flex w-full max-w-5xl items-center justify-between gap-5 rounded-
                 <span class="sr-only">NativePHP</span>
             </a>
 
+            {{-- V1 Announcement --}}
+            <a
+                href="https://github.com/orgs/NativePHP/discussions/547"
+                class="group relative z-0 hidden items-center overflow-hidden rounded-full bg-gray-200 px-2.5 py-1.5 text-xs transition duration-200 will-change-transform hover:scale-x-105 lg:inline-flex dark:bg-slate-800"
+                target="_blank"
+                aria-label="Read about NativePHP version 1 release"
+                title="Read the NativePHP v1 announcement"
+            >
+                <div
+                    class="absolute inset-0 flex items-center [container-type:inline-size]"
+                    aria-hidden="true"
+                >
+                    <div
+                        class="absolute h-[100cqw] w-[100cqw] bg-[conic-gradient(from_0_at_50%_50%,rgba(167,139,250,0.75)_0deg,transparent_60deg,transparent_300deg,rgba(167,139,250,0.75)_360deg)] transition duration-300 [animation:spin_2.5s_linear_infinite]"
+                    ></div>
+                </div>
+
+                <div
+                    class="absolute inset-0.5 rounded-full bg-violet-50 dark:bg-slate-950"
+                    aria-hidden="true"
+                ></div>
+
+                <div
+                    class="absolute bottom-0 left-1/2 h-1/3 w-4/5 -translate-x-1/2 rounded-full bg-orange-300 opacity-50 blur-md transition-all duration-500 dark:bg-fuchsia-300/30 dark:group-hover:h-2/3 dark:group-hover:opacity-100"
+                    aria-hidden="true"
+                ></div>
+
+                <span class="relative inline-flex items-center gap-1">
+                    <x-icons.confetti
+                        class="-mt-px size-3.5"
+                        aria-hidden="true"
+                    />
+                    <span class="font-normal">v1 is here!</span>
+                    <span class="sr-only">
+                        NativePHP version 1 has been released - click to learn
+                        more
+                    </span>
+                </span>
+            </a>
+
+            {{-- 👇 Temporarily disabled in favor of the v1 announcement button --}}
             {{-- Version badge --}}
-            <div
+            {{--
+                <div
                 class="hidden rounded-full bg-gray-200/60 px-2 py-1 text-xs text-gray-600 lg:block dark:bg-[#16182b] dark:text-[#747ee6] dark:ring-1 dark:ring-cloud"
                 aria-label="Version information"
-            >
+                >
                 <a href="/docs/desktop/1/getting-started/releasenotes">
-                    {{ $electronGitHubVersion }}
+                {{ $electronGitHubVersion }}
                 </a>
-            </div>
+                </div>
+            --}}
         </div>
 
         {{-- Right side --}}
@@ -145,6 +188,26 @@ class="hidden size-[3px] rotate-45 rounded-sm bg-gray-400 transition duration-20
                     aria-hidden="true"
                 ></div>
 
+                {{-- Link
+                <a
+                    href="{{ route('blog') }}"
+                    @class([
+                        'hidden transition duration-200 lg:block',
+                        'font-medium' => request()->routeIs('blog*'),
+                        'opacity-60 hover:opacity-100' => ! request()->routeIs('blog*'),
+                    ])
+                    aria-current="{{ request()->routeIs('blog*') ? 'page' : 'false' }}"
+                >
+                    Blog
+                </a>
+
+                {{-- Decorative circle -- }}
+                <div
+                    class="hidden size-[3px] rotate-45 rounded-sm bg-gray-400 transition duration-200 lg:block dark:opacity-60"
+                    aria-hidden="true"
+                ></div>
+                --}}
+
                 {{-- Link --}}
                 <a
                     x-init="
diff --git a/resources/views/docs/index.blade.php b/resources/views/docs/index.blade.php
index 7419f464..93d8afc7 100644
--- a/resources/views/docs/index.blade.php
+++ b/resources/views/docs/index.blade.php
@@ -13,6 +13,8 @@
 
     <x-separator class="mt-4" />
 
+    <x-alert-v1-announcement />
+
     {{-- Table of contents --}}
     <div class="xl:hidden">
         <h3 class="inline-flex items-center gap-1.5 pt-5 text-sm opacity-50">
diff --git a/routes/web.php b/routes/web.php
index 4c1d00c9..a45a03c8 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -19,6 +19,8 @@
 Route::redirect('/sponsor', '/docs/1/getting-started/sponsoring');
 
 Route::view('/', 'welcome')->name('welcome');
+Route::view('/blog', 'blog')->name('blog');
+Route::view('/article', 'article')->name('article');
 Route::view('mobile', 'early-adopter')->name('early-adopter');
 Route::redirect('ios', 'mobile');