docs: improvements

* chore: dark mode image

* chore: update pr template

* chore: fix icon colors in dark mode

* chore: add twitter in /help

* chore: fix sidebar padding & new component

apps/docs/content/help/contacts.mdx

@@ -15,7 +15,7 @@ In the meantime, if you have any troubles setting up your application, or if you
   {
     type: 'link',
     href: 'https://discord.com/invite/WDvCZ54',
-    label: 'Discord - recommended',
+    label: 'Discord (recommended)',
     customProps: {
       icon: Icons['discord'],
       description: 'The fastest way to get help from our team and other community members.',
@@ -29,5 +29,14 @@ In the meantime, if you have any troubles setting up your application, or if you
       icon: Icons['envelope'],
       description: 'Reach the team directly, this might take longer as the community won\'t be included.',
     }
+  },
+  {
+    type: 'link',
+    href: 'https://x.com/zeropsio',
+    label: 'Twitter',
+    customProps: {
+      icon: Icons['twitter'],
+      description: 'Reach out to us by direct messagining or by tagging @zeropsio in your tweets for a response.',
+    }
   }
 ]} />

apps/docs/content/help/faq.mdx

@@ -1,20 +1,28 @@
 ---
 title: Frequently Asked Questions
 ---
+import Accordion from "/src/components/Accordion"
 
 ## General
 
+What is the Zerops GUI URL
+
+<Accordion title="What is Docusaurus?">
+  Docusaurus is an open-source static site generator that helps you build optimized websites quickly, focusing on documentation sites.
+</Accordion>
+
+
 <details>
   <summary>1. What is the Zerops GUI URL?</summary>
   <p>
   Head straight to <a href="https://app.zerops.io">https://app.zerops.io</a>
   </p>
 </details>
 
+
 <details>
   <summary>2. What is the current Zerops pricing?</summary>
   <p>
   See <a href="https://zerops.io/#pricing">our pricing</a>.
   </p>
 </details>
-

apps/docs/src/components/Accordion/index.tsx

@@ -0,0 +1,29 @@
+import React, { useState, ReactNode } from 'react';
+
+interface AccordionProps {
+  title: string;
+  children: ReactNode;
+}
+
+const Accordion: React.FC<AccordionProps> = ({ title, children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleAccordion = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div className="border border-gray-300 rounded mb-4">
+      <button
+        className="w-full text-left p-1 border-none bg-gray-100 hover:bg-gray-200 flex justify-between items-center"
+        onClick={toggleAccordion}
+      >
+        <span className="text-lg">{title}</span>
+        <span className="text-xl font-bold">{isOpen ? '-' : '+'}</span>
+      </button>
+      {isOpen && <div className="p-4 bg-white">{children}</div>}
+    </div>
+  );
+};
+
+export default Accordion;

apps/docs/src/css/components/sidebar.css

@@ -159,3 +159,7 @@
 .service-sidebar-item .menu__link {
   padding-left: 24px !important;
 }
+
+.menu__list {
+  @apply pt-0.5;
+}