fix: Add Basename frames to FAQ + Identity sidebar (#2351)

* update crypto payments guide to use latest ock config and components

* replace outdated images with latest implementation

* add filenames and checkout gif

* add basenames frame tutorial to sidebar

* add basenames frame tutorial

* create relative link for frames guide

Author: hughescoin

apps/base-docs/docs/pages/identity/basenames/basenames-faq.mdx

@@ -63,10 +63,10 @@ You can set your Basename as your primary name through Profile Management. Setti
 
 **To set a basename as your primary name:**
 
-* Navigate to [My Basenames](https://www.base.org/manage-names)  
-* Sign in with the wallet that now owns the basename  
-* Click the three dots of the basename you want to set as a primary name
-* Click “Set as primary” and sign the transaction
+- Navigate to [My Basenames](https://www.base.org/manage-names)
+- Sign in with the wallet that now owns the basename
+- Click the three dots of the basename you want to set as a primary name
+- Click "Set as primary" and sign the transaction
 
 ### 10. How do I transfer my Basename to another address?
 
@@ -83,12 +83,12 @@ Transferring all 3 to the same address will fully transfer ownership of the Base
 
 Step by step:
 
-* Navigate to [base.org/names](http://base.org/names)
-* Sign in with wallet that owns the basename  
-* Click “My Basenames” in the top right corner  
-* Click the three dots of the basename you want to transfer and click transfer name  
-* Paste the ENS or address of the wallet you want to transfer the basename to  
-* Proceed to sign all four transactions to properly update the basename address, ownership, and profile records. The last transaction will be sending the NFT.  
+- Navigate to [base.org/names](http://base.org/names)
+- Sign in with wallet that owns the basename
+- Click "My Basenames" in the top right corner
+- Click the three dots of the basename you want to transfer and click transfer name
+- Paste the ENS or address of the wallet you want to transfer the basename to
+- Proceed to sign all four transactions to properly update the basename address, ownership, and profile records. The last transaction will be sending the NFT.
 
 :::info
 
@@ -130,5 +130,4 @@ You can pin frames as the ultimate way to make a profile yours. Want someone to
 
 Follow our step-by-step [guide] to get started. While Basenames supports all frames, we recommend using the Open Frames standard for the best experience.
 
-[guide]: https://docs.base.org/tutorials/add-frames-to-basename
-
+[guide]: /identity/basenames/basenames-frames-tutorial

apps/base-docs/docs/pages/identity/basenames/basenames-frames-tutorial.mdx

@@ -0,0 +1,93 @@
+---
+title: 'Add Frames to A Basename'
+slug: /add-frames-to-basename
+description: Learn how to customize your Basename by adding Frames, showcasing dynamic content with ease on Base.
+author: hughescoin
+---
+
+# Add Frames to A Basename
+
+Welcome to the exciting world of Frames for your Basename! This tutorial will guide you step-by-step through adding a frame to your Basename, allowing you to personalize and display unique content on the Base blockchain.
+
+## What Are Frames?
+
+Frames are dynamic visual elements that display custom content on your Basename using any [Open Graph spec] extensions. You may be familiar with frames from platforms like [Warpcast], where they are used to enhance social interactions like minting NFTs onchain, sharing information, and more. Open Frames work similarly, but they are independent of Warpcast are the best way for adding frames to your Basename. With Open Frames, anyone can create and display content directly on their Basename.
+
+## Prerequisites
+
+Before you begin, ensure you have the following:
+
+- A registered Basename. [Claim a basename](https://www.base.org/names)
+- A small amount of ETH to submit the text record onchain
+
+## Navigate to Your Basename
+
+To get started, head over to a Basename that you own on Base.org:
+
+`https://www.base.org/name/pathughes`
+
+![basenames-profile-homepage](/images/basenames-tutorial/basenames-homepage.png)
+
+## Look for the Frame Banner
+
+Once you're on your profile, you'll be greeted with a new banner inviting you to pin a frame to your profile. Look for the call-to-action button and click `Try it now`.
+
+![try-now-buton](/images/basenames-tutorial/try-now.png)
+
+## Explore the Frame Selection Panels
+
+You'll now see two panels to help you choose and preview frames for your profile:
+
+- **Left Panel**: This panel contains pre-built frames created by the Base community.
+- **Right Panel**: Here, you can preview how the selected frame will look on your Basenames profile.
+
+![frame-selector-page](/images/basenames-tutorial/frames-selector.png)
+
+## Choose a Frame
+
+You can select any frame from the available options. For this tutorial, we'll use the pre-built "Pay Me" Frame by [Paycaster](https://paycaster.co/), which allows anyone to gift you USDC or ETH.
+
+Click on the dropdown menu to select the "Pay Me" Frame.
+
+![frame-payme-](/images/basenames-tutorial/show-preview.png)
+
+## Preview the Frame
+
+Once you've selected the frame, click on the `Show preview` button to see how it will appear on your profile.
+
+![Frame-preview](/images/basenames-tutorial/frame-preview.png)
+
+## Add the Frame to Your Profile
+
+If you're happy with the preview, it's time to add the frame to your profile! Click the `Add frame` button.
+
+You'll be prompted to confirm the transaction in your wallet. Approve the transaction, and the page will automatically reload.
+
+![confirm-txn](/images/basenames-tutorial/confirm-txn.png)
+
+## View Your Updated Profile
+
+After the page reloads, you'll see your profile with the newly added frame. Congratulations! You've successfully added a frame to your Basenames profile.
+
+![profile](/images/basenames-tutorial/basenames-frame-final.png)
+
+Feel free to customize your Frames further or explore new designs from the community!
+
+## Resources
+
+For more information on Frames and how to customize them, check out the following resources:
+
+- [Open Frames Spec](https://www.openframes.xyz/#required-properties)
+- [Frames Debugger](https://debugger.framesjs.org/)
+- [Openframes Website](https://www.openframes.xyz/)
+- [Open Graph spec](https://ogp.me/)
+- [Warpcast](https://warpcast.com/)
+
+---
+
+[Open Frames Spec]: https://www.openframes.xyz/#required-properties
+[Open Frames]: https://www.openframes.xyz/
+[Frames Debugger]: https://debugger.framesjs.org/
+[Openframes Website]: https://www.openframes.xyz/
+[Open Graph spec]: https://ogp.me/
+[Warpcast]: https://warpcast.com/

apps/base-docs/sidebar.ts

@@ -991,6 +991,10 @@ export const sidebar: Sidebar = [
                 text: 'Basenames OnchainKit Tutorial',
                 link: '/identity/basenames/basenames-onchainkit-tutorial',
               },
+              {
+                text: 'Basenames Frames Tutorial',
+                link: '/identity/basenames/basenames-frames-tutorial',
+              },
             ],
           },
           {