feat: blog announcement ux patterns gpt

Author: thedaviddias

app/[lang]/layout.tsx

@@ -6,14 +6,15 @@ import {
   LocaleSwitch,
   Navbar
 } from 'nextra-theme-docs';
-import { Head } from 'nextra/components';
+import { Banner, Head } from 'nextra/components';
 import { getPageMap } from 'nextra/page-map';
 import { getDictionary } from '../_dictionaries/get-dictionary';
 
 import PlausibleProvider from 'next-plausible';
 import { DiscordIcon } from "nextra/icons";
 import '../../styles/globals.css';
 import { Footer } from "../_components/footer";
+import { LinkCustom } from "../_components/link-custom";
 import { Stars } from "../_components/stars";
 import { GITHUB_REPO_URL, PROJECT_URL } from "../_constants/project";
 import { metadataSEO } from "../metadata";
@@ -39,6 +40,12 @@ export default async function RootLayout({ children, params }) {
 
   const pageMap = await getPageMap(`/${lang}`)
 
+  const banner = (
+    <Banner storageKey="swr-2">
+      UX Patterns for Devs GPT is now available! <LinkCustom href="/blog/ux-patterns-gpt" variant="primary" className="text-sm">Read more →</LinkCustom>
+    </Banner>
+  )
+
   const navbar = (
     <Navbar
       logo={
@@ -75,6 +82,7 @@ export default async function RootLayout({ children, params }) {
           navbar={navbar}
           footer={footer}
           docsRepositoryBase={GITHUB_REPO_URL}
+          banner={banner}
           sidebar={{
             defaultMenuCollapseLevel: 1,
             autoCollapse: true

content/en/blog/announcing-ux-patterns-launch.mdx

@@ -1,6 +1,6 @@
 ---
 title: Launching "UX Patterns for Devs"
-image: https://assets.vercel.com/image/upload/v1630059453/swr/v1.png
+image: ../../../public/img/opengraph-image.png
 description: "Introducing today my new open-source resource filled with proven UX patterns, practical code snippets, and actionable tips - empowering developers to build more accessible and user-friendly interfaces."
 date: 2024-12-11
 authors:

content/en/blog/ux-patterns-gpt.mdx

@@ -0,0 +1,37 @@
+---
+title: UX Patterns for Devs GPT
+image: ../../../public/blog/ux-patterns-gpt.jpg
+description: "I'm excited to announce the launch of UX Patterns for Devs GPT, a new AI-powered tool connected to the UX Patterns for Devs project."
+date: 2024-12-13
+authors:
+  - name: David Dias
+    link: https://x.com/thedaviddias
+---
+
+import { TopContent } from "@app/_components/authors";
+
+<TopContent lang={props.params.lang} {...metadata} />
+
+![Screenshot of the GPT homepage](../../../public/blog/ux-patterns-gpt.jpg)
+
+Having all the UX Patterns documented is nice, but it's not enough. Special in the days we live in.
+
+That's why I'm excited to announce the launch of UX Patterns for Devs GPT, a new AI-powered tool that uses primarly the content of the "UX Patterns for Devs" project then add some intelligence to it.
+
+## How does it work?
+
+You can simply to access the [UX Patterns for Devs GPT](https://chatgpt.com/g/g-675ae465d96c8191a19b66ef7b4133a3-ux-patterns-for-devs) and start typing. The AI will analyze your input and provide you with a list of suggestions based on the content of the UX Patterns for Devs repository.
+
+More content will be added to the repository, more the answers will be accurate.
+
+## How can I help?
+
+If you want to help to support this project, you can always leave a review of the GPT, this will help give some visibility.
+
+![Leave Feedback, How would you rate this GPT](../../../public/blog/gpt-dropdown-menu.jpg)
+
+![Leave Feedback, How would you rate this GPT](../../../public/blog/leave-review-gpt.jpg)
+
+## What's Next?
+
+There is a lot that can be done to improve this project, but I'm excited to see what can be created based on the content of the UX Patterns for Devs project.