feat: add support section

docs/support/01-faq.mdx

@@ -0,0 +1,79 @@
+---
+id: "faq"
+sidebar_position: 1
+title: "FAQ"
+---
+
+### Where can I access the Sablier protocol?
+
+You can access Sablier through the following web interfaces:
+
+app.sablier.com app.safe.global (if you are using a Safe multisig wallet)
+
+### What is real-time finance?
+
+A term coined by us to emphasize the wide-ranging use cases for the Sablier protocol. We like to think about work as an
+attempt to rethink the way trust is established in financial contracts.
+
+### What is token streaming?
+
+An alternative wording, coined by Andreas Antonopoulos in 2017. Just like you can stream movies on Netflix or music on
+Spotify, so you can stream tokens by the second on Sablier.
+
+### How does streaming work on Sablier?
+
+Imagine Alice wants to make a 3,000 DAI payment to Bob during the whole month of January.
+
+1. Alice deposits the 3,000 DAI in Sablier before Jan 1, setting the stop time to Feb 1.
+2. Bob's crypto earnings increase every second beginning Jan 1.
+3. On Jan 10, Bob will have earned approximately 1,000 DAI.
+4. If at any point during January Alice wishes to recover her tokens, she can cancel the stream and recover what has not
+   been streamed yet.
+
+### How can I create a stream?
+
+You will need an EVM wallet ([Metamask](https://metamask.io), [Rainbow](https://rainbow.me), etc.), some ETH (or the
+network's token to pay gas fees) and an ERC-20 token like DAI. Then, choose your favorite interface for accessing the
+Sablier protocol (such as app.sablier.com) and fill in the recipient's address, the deposit amount and the total
+duration.
+
+Alternatively, you can see [here](/contracts/v2/guides/etherscan) how to manually create a stream using
+[Etherscan](https://etherscan.io).
+
+### How does streaming work?
+
+Dividing the deposit amount by the difference between the stop time and the start time gives us a payment rate per
+second. Sablier uses this rate to transfer a small portion of tokens from the sender to the recipient once every second.
+
+For instance, if the payment rate was 0.01 DAI per second, the recipient would receive:
+
+0.01 _ 60 = 0.6 DAI / minute 0.01 _ 60 _ 60 = 36 DAI / hour 0.01 _ 60 _ 60 _ 24 = 864 DAI / day
+
+### Where are the tokens held?
+
+In our smart contracts. You can verify this assertion by inspecting Etherscan or any other blockchain explorer.
+
+### How can recipients access their tokens?
+
+As the tokens are being streamed at the smart contract level, recipients can consider Sablier their real-time wallet for
+digital currency.
+
+To make withdrawals, recipients can:
+
+1. Use a web interface (e.g. app.sablier.com).
+2. Call the contract directly on a blockchain explorer.
+
+### Can I cancel streams?
+
+Yes, both as a sender and a recipient.
+
+If the stream is canceled before the start time, the whole deposit amount is returned in full to you. If the stream is
+canceled while the stream is active, the smart contracts calculate how much has been streamed, transfer that to the
+recipient and return the remainder to you. If the stream is canceled after the stream has stopped, the smart contracts
+transfers all the remaining funds (if any) to the recipient.
+
+### Can I modify the streaming rate?
+
+No. Once a stream is created, it is set in stone on the Ethereum blockchain.
+
+In a future version of the Sablier protocol, we may add the option to refill an active stream and even extend it.

docs/apps/guides/01-how-to.mdx → docs/support/02-how-to.mdx

@@ -1,6 +1,6 @@
 ---
 id: "how-to"
-sidebar_position: 1
+sidebar_position: 2
 title: "How-to Videos"
 ---
 

docusaurus.config.ts

@@ -230,6 +230,12 @@ const config: Config = {
           to: "/api/overview",
           activeBasePath: "/api",
         },
+        {
+          label: "Support",
+          position: "left",
+          to: "/support/faq",
+          activeBasePath: "/support",
+        },
         {
           label: "Discord",
           position: "right",

sidebars.js

@@ -5,6 +5,7 @@ const sidebars = {
   contractsSidebar: [{ type: "autogenerated", dirName: "contracts" }],
   apiSidebar: [{ type: "autogenerated", dirName: "api" }],
   appSidebar: [{ type: "autogenerated", dirName: "apps" }],
+  supportSidebar: [{ type: "autogenerated", dirName: "support" }],
 };
 
 export default sidebars;