feat: add an FAQ section (#7)

* chore: center alert message * style: fix home page styles * chore: optimize SEO * feat: add FAQ --------- Co-authored-by: DM <[email protected]>
NaturalSelectionLabs · Dec 13, 2023 · 48a5538 · 48a5538
1 parent de58b1c
commit 48a5538
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 12 deletions.
diff --git a/packages/site/seo-data.ts b/packages/site/seo-data.ts
@@ -3,10 +3,12 @@ const site =
     ? 'https://snap.rss3.io'
     : 'http://localhost:8000';
 
+const title = 'RSS3 Social Notifier Snap - The Open Information Snap';
+
 export const SEO_DATA = {
-  title: 'RSS3 Snap - The Open Information Snap',
+  title,
   description:
-    "RSS3 Snap for MetaMask offers a quick and easy way to stay on top of your frens' social activities.",
+    "RSS3 Social Notifier Snap for MetaMask offers a quick and easy way to stay on top of your frens' social activities.",
   language: 'en-US',
   url: site,
   image: `${site}/images/og.png`,
@@ -15,8 +17,8 @@ export const SEO_DATA = {
   website: {
     context: 'https://schema.org',
     type: 'WebSite',
-    name: 'RSS3',
-    url: 'https://rss3.io',
+    name: title,
+    url: site,
   },
   organization: {
     context: 'https://schema.org',
@@ -28,17 +30,18 @@ export const SEO_DATA = {
   },
   keywords: [
     'blockchain',
-    'notifier',
-    'RSS3 Notifier',
-    'decentralization',
-    'RSS3 Metamask snap',
     'Metamask snap',
     'Open Information',
     'Open Information Layer',
     'Open Web',
     'RSS3',
     'RSS3 Explorer',
+    'RSS3 Metamask snap',
+    'RSS3 Notifier',
+    'RSS3 Social Notifier Snap',
     'web3',
-    'web3 activities',
+    'web3 activity',
+    'web3 social',
+    'web3 social activity',
   ],
 };
diff --git a/packages/site/src/pages/index.tsx b/packages/site/src/pages/index.tsx
@@ -78,7 +78,7 @@ const Index = () => {
   };
 
   return (
-    <div className="container my-12">
+    <div className="container flex-1 my-12">
       <h1 className="mx-auto max-w-fit text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]">
         Welcome to{' '}
         <span className="text-RSS3 drop-shadow-md">RSS3 Social Notifier -</span>
@@ -122,7 +122,7 @@ const Index = () => {
           <span>you will be notified</span>.
         </p>
       </div>
-      <div className="mx-auto mb-10 text-base text-left  max-w-4xl text-muted-foreground sm:text-lg">
+      <div className="mx-auto mb-10 text-base text-left max-w-4xl text-muted-foreground sm:text-lg">
         <p>
           Behind the scene, this Snap works by aggregating your social graphs
           from Web3 social platforms, and retrieving your frens' social
@@ -134,7 +134,7 @@ const Index = () => {
         </p>
       </div>
       {state.error && (
-        <div className="max-w-[600px] my-4">
+        <div className="mx-auto max-w-[600px] my-4">
           <Alert variant="destructive">
             <ExclamationTriangleIcon className="h-4 w-4" />
             <AlertTitle>Error</AlertTitle>
@@ -251,6 +251,69 @@ const Index = () => {
           </>
         )}
       </div>
+
+      <h1 className="pt-24 mx-auto max-w-fit text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]">
+        <span className="text-RSS3 drop-shadow-md">FAQ</span>
+      </h1>
+      <div className="mx-auto my-5 text-base text-left max-w-4xl text-muted-foreground sm:text-lg">
+        <ul className="list-disc">
+          <li>What does this Snap do?</li>
+          <p className="pb-6">
+            As the name suggests, this Snap sends notifications via MetaMask,
+            whenever your frens posted something on{' '}
+            <a
+              className="text-Crossbell font-bold"
+              href="https://crossbell.io/"
+              target="_blank"
+            >
+              Crossbell
+            </a>
+            ,{' '}
+            <a
+              className="text-Farcaster font-bold"
+              href="https://www.farcaster.xyz/"
+              target="_blank"
+            >
+              Farcaster
+            </a>
+            ,{' '}
+            <a
+              className="text-Lens font-bold"
+              href="https://www.lens.xyz/"
+              target="_blank"
+            >
+              Lens Protocol
+            </a>
+            .
+          </p>
+          <li>What does this Snap NOT do?</li>
+          <p className="pb-6">
+            This Snap does NOT have access to your assets. <br />
+            It operates in a read-only mode with data from the supported
+            platforms, aggregated on the{' '}
+            <a
+              className="text-RSS3 font-bold"
+              href="https://rss3.io/"
+              target="_blank"
+            >
+              RSS3 Network
+            </a>{' '}
+            .
+          </p>
+          <li>What is required to use this Snap? </li>
+          <p className="pb-6">
+            You need to have MetaMask installed, and have some frens on the
+            supported platforms. Other than that, it's permissionless and
+            completely free.
+          </p>
+
+          <li>How to use this Snap? </li>
+          <p className="pb-6">
+            Just install it, and it will work silently in the background, there
+            is nothing to configure.
+          </p>
+        </ul>
+      </div>
     </div>
   );
 };