feat: add suggest pattern

Author: thedaviddias

README.md

@@ -1,6 +1,6 @@
 # UX Patterns for Devs
 
-UX Patterns for Developers was created by [David Dias](https://thedaviddias.com). It is a free collection of UX patterns towards developers who want to understand how to build effective UI components accessible and usable.
+UX Patterns for Developers is a free collection of UX patterns towards developers who want to understand how to build effective UI components accessible and usable.
 
 ![Screenshot of the homepage ofUX Patterns for Devs](./public/img/ux-patterns-developers.webp)
 

app/[lang]/[[...mdxPath]]/page.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks -- false positive, useMDXComponents are not react hooks */
 
+import { SuggestPattern } from '@/app/_components/suggest-pattern'
 import { JsonLd, generateArticleSchema } from '@app/_components/json-ld'
 import { generateStaticParamsFor, importPage } from 'nextra/pages'
 import { useMDXComponents } from '../../../mdx-components'
@@ -38,6 +39,7 @@ export default async function Page(props: PageProps) {
       <JsonLd data={schemaData} />
       <Wrapper toc={toc} metadata={metadata}>
         <MDXContent {...props} params={params} />
+        <SuggestPattern />
       </Wrapper>
     </>
   )

app/_components/subscribe.tsx

@@ -61,17 +61,17 @@ export const SubscribeForm = () => {
   };
 
   return (
-    <div className="relative overflow-hidden rounded-xl border border-zinc-700/65 px-4 py-10 sm:px-8 mt-10">
+    <div className="flex flex-col mt-10 items-center justify-center py-10 px-4 text-center border border-neutral-200 dark:border-neutral-800 rounded-xl">
       <h2 className="text-2xl font-bold mb-5 text-foreground">
-        Get notified when new patterns are added.
+        Get notified when new patterns are added!
       </h2>
       <form onSubmit={handleSubmit} className="space-y-4">
         <div className="space-y-2">
-          <div className="flex gap-2">
+          <div className="flex flex-col md:flex-row gap-2">
             <Input
               placeholder="[email protected]"
               type="email"
-              className="md:w-2/5"
+              className="w-full md:w-[300px]"
               value={formState.email}
               onChange={(e) => setFormState((prev) => ({ ...prev, email: e.target.value }))}
               disabled={isLoading}

app/_components/suggest-pattern.tsx

@@ -0,0 +1,27 @@
+import { PROJECT_URL } from '@/app/_constants/project'
+import { Button } from './ui/button'
+
+export function SuggestPattern() {
+  return (
+    <div className="flex flex-col mt-10 items-center justify-center py-10 px-4 text-center border border-neutral-200 dark:border-neutral-800 rounded-xl">
+      <h2 className="text-2xl font-bold mb-5 text-foreground">Got a pattern request?</h2>
+      <p className="text-lg text-muted-foreground mb-6">
+        Let us know, and we&apos;ll add it!
+      </p>
+      <Button
+        variant="outline"
+        className="font-medium"
+        asChild
+      >
+        <a
+          href={`${PROJECT_URL}/discussions/new?category=suggestions`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="plausible-event-name=Suggest+Pattern"
+        >
+          Send Suggestion
+        </a>
+      </Button>
+    </div>
+  )
+}

content/en/about/about.mdx

@@ -1,6 +1,6 @@
 # About UX Patterns for Devs
 
-**UX Patterns for Developers** is a free collection of UX patterns towards developers who want to understand how to build effective UI components accessible and usable.
+**UX Patterns for Developers** was created by [David Dias](https://thedaviddias.com). It is a free collection of UX patterns towards developers who want to understand how to build effective UI components accessible and usable.
 
 It was created by [David Dias](https://thedaviddias.com).
 

content/en/index.mdx

@@ -8,6 +8,7 @@ import { Hero } from "@app/_components/sections/hero";
 import { OverviewGrid } from "@app/_components/sections/overview-grid";
 import { Stars } from "@app/_components/stars";
 import { SubscribeForm } from "@app/_components/subscribe";
+import { SuggestPattern } from "@app/_components/suggest-pattern";
 import { Callout, Tabs } from "nextra/components";
 
 # UX Patterns for Devs
@@ -20,6 +21,6 @@ import { Callout, Tabs } from "nextra/components";
 
 <Stars />
 
-<OverviewGrid lang={props.params.lang} />
-
 <SubscribeForm />
+
+<OverviewGrid lang={props.params.lang} />