added hyrbid ui template

src/components/products/guides/index.js

@@ -148,6 +148,12 @@ export const guides = {
               created: '2024-09-04',
               updated: null, // null means it's never been updated
             },
+            {
+              title: 'MPL-404 Hybrid UI Template',
+              href: '/mpl-hybrid/guides/mpl-404-hyrbid-ui-template',
+              created: '2024-12-16',
+              updated: null, // null means it's never been updated
+            },
           ],
         },
         {

src/components/products/mpl-hybrid/index.js

@@ -34,6 +34,12 @@ export const mplHybrid = {
             { title: 'Javascript SDK', href: '/mpl-hybrid/sdk/javascript' },
           ],
         },
+        {
+          title: 'UI Templates',
+          links: [
+            { title: 'MPL-404 Hybrid UI', href: '/mpl-hybrid/guides/mpl-404-hyrbid-ui-template', created: '2024-12-16' },
+          ],
+        },
         {
           title: 'Features',
           links: [
@@ -81,6 +87,11 @@ export const mplHybrid = {
               title: 'Create your first Hybrid Collection',
               href: '/mpl-hybrid/guides/create-your-first-hybrid-collection',
             },
+            {
+              title: 'MPL-404 Hyrbid UI Template',
+              href: '/mpl-hybrid/guides/mpl-404-hyrbid-ui-template',
+              created: '2024-12-16',
+            },
           ],
         },
       ],

src/pages/mpl-hybrid/guides/mpl-404-hyrbid-ui-template.md

@@ -0,0 +1,88 @@
+---
+title: Metaplex MPL-404 Hybrid Solana NextJs Tailwind Template
+metaTitle: Metaplex MPL-404 Hybrid NextJs Tailwind Template | Web UI Templates
+description: A web UI template for Metaplex MPL-404 Hybrid using Nextjs, Tailwind, Metaplex Umi, Solana WalletAdapter and Zustand.
+created: 2024-12-16
+---
+
+The Metaplex MPL-404 Hybrid UI Template has been built to give developers and users a development starting point. The template comes preset up with `.env` example files, functional UI components and transaction calls to springboard your development while creating a front end UI for your Hybrid Collection.
+
+{% image src="/images/hybrid-ui-template-image.jpg" classes="m-auto" /%}
+
+## Features
+
+- Nextjs React framework
+- Tailwind
+- Shadcn
+- Solana WalletAdapter
+- Metaplex Umi
+- Zustand
+- Dark/Light Mode
+- Umi Helpers
+
+This UI Template is created using the base Metaplex UI Template. Aditional documentation can be found at the following
+
+Base Template Github Repo - [https://github.com/metaplex-foundation/metaplex-nextjs-tailwind-template](https://github.com/metaplex-foundation/metaplex-nextjs-tailwind-template)
+
+## Installation
+
+```shell
+git clone https://github.com/metaplex-foundation/mpl-hybrid-404-ui-template-nextjs-tailwind-shadcn.git
+```
+
+Github Repo - [https://github.com/metaplex-foundation/mpl-hybrid-404-ui-template-nextjs-tailwind-shadcn](https://github.com/metaplex-foundation/mpl-hybrid-404-ui-template-nextjs-tailwind-shadcn)
+
+
+## Setup
+
+### .env File
+
+Rename `.env.example` to `.env`
+
+Fill out the following with the correct details.
+
+```
+// Escrow Account
+NEXT_PUBLIC_ESCROW="11111111111111111111111111111111"
+NEXT_PUBLIC_COLLECTION="11111111111111111111111111111111"
+NEXT_PUBLIC_TOKEN="11111111111111111111111111111111"
+
+// RPC URL
+NEXT_PUBLIC_RPC="https://myrpc.com/?api-key="
+```
+
+
+### Image Replacement
+In src/assets/images/ there are two images to replace:
+
+- collectionImage.jpg
+- token.jpg
+
+Both of these images are used to save fetching the collection and token Metadata just to access the image uri.
+
+### Change RPC
+
+You are free to set up the RPC url into your project as you wish either via:
+
+- .env
+- constants.ts file
+- hardcoded into umi directly
+
+In this example the RPC url is hardcoded into the `umiStore` umi state under `src/store/useUmiStore.ts` at line `21`.
+
+```ts
+const useUmiStore = create<UmiState>()((set) => ({
+  // add your own RPC here
+  umi: createUmi('http://api.devnet.solana.com').use(
+    signerIdentity(
+      createNoopSigner(publicKey('11111111111111111111111111111111'))
+    )
+  ),
+  ...
+}))
+```
+## Additional Documentation
+
+It is recommended to further read the documentation for the base template to understand the helpers and functionality this template is built with
+
+Github Repo - [https://github.com/metaplex-foundation/mpl-hybrid-404-ui-template-nextjs-tailwind-shadcn](https://github.com/metaplex-foundation/mpl-hybrid-404-ui-template-nextjs-tailwind-shadcn)