Added proper FAQ body text

src/assets/locales/en.json

@@ -378,15 +378,21 @@
       }
     }
   },
-  "faq": {
-    "title": "About us",
+  "about": {
+    "title": "About movie-web",
+    "description": "movie-web is a web application that searches the internet for streams. The team aims for a mostly minimalistic approach to consuming content.",
+    "faqTitle": "Common questions",
     "q1": {
-      "title": "1",
-      "body": "Body of 1"
+      "title": "Where does the content come from?",
+      "body": "movie-web does not host any content. When you click on something to watch, the internet is searched for the selected media (On the loading screen and in the 'video sources' tab you can see which source you're using). Media never gets uploaded by movie-web, everything is through this searching mechanism."
     },
-    "how": {
-      "title": "1",
-      "body": "Body of 1"
+    "q2": {
+      "title": "Where can I request a show or movie?",
+      "body": "It's not possible to request a show or movie, movie-web does not manage any content. All content is viewed through sources on the internet."
+    },
+    "q3": {
+      "title": "The search results display the show or movie, why can't I play it?",
+      "body": "Our search results are powered by The Movie Database (TMDB) and display regardless of whether our sources actually have the content."
     }
   },
   "footer": {

src/assets/locales/pirate.json

@@ -53,17 +53,6 @@
     "reloadPage": "Reload the page",
     "title": "That be an error, Captain"
   },
-  "faq": {
-    "how": {
-      "body": "Body of 1",
-      "title": "1"
-    },
-    "q1": {
-      "body": "Body of 1",
-      "title": "1"
-    },
-    "title": "About us"
-  },
   "footer": {
     "legal": {
       "disclaimer": "Disclaimer",
@@ -104,17 +93,6 @@
       "noResults": "We couldn't find anythin', arrr!",
       "placeholder": "What do ye want to watch?",
       "sectionTitle": "Searchin' results"
-    },
-    "titles": {
-      "day": [
-        "Day title"
-      ],
-      "morning": [
-        "Morning title"
-      ],
-      "night": [
-        "Night title"
-      ]
     }
   },
   "media": {

src/components/LinksDropdown.tsx

@@ -139,12 +139,9 @@ export function LinksDropdown(props: { children: React.ReactNode }) {
           <DropdownLink href="/settings" icon={Icons.SETTINGS}>
             {t("navigation.menu.settings")}
           </DropdownLink>
-          <DropdownLink href="/faq" icon={Icons.EPISODES}>
+          <DropdownLink href="/about" icon={Icons.EPISODES}>
             {t("navigation.menu.about")}
           </DropdownLink>
-          <DropdownLink href="/faq" icon={Icons.FILM}>
-            {t("navigation.menu.support")}
-          </DropdownLink>
           {deviceName ? (
             <DropdownLink
               className="!text-type-danger opacity-75 hover:opacity-100"

src/components/utils/Ol.tsx

@@ -8,7 +8,7 @@ export function Ol(props: { items: React.ReactNode[] }) {
           <li
             className={classNames(
               "grid grid-cols-[auto,1fr] gap-6",
-              i !== props.items.length - 1 ? "pb-6" : undefined
+              i !== props.items.length - 1 ? "pb-12" : undefined
             )}
           >
             <div className="relative z-0">
@@ -17,7 +17,7 @@ export function Ol(props: { items: React.ReactNode[] }) {
               </div>
               {i !== props.items.length - 1 ? (
                 <div
-                  className="h-full w-px absolute top-6 left-1/2 transform -translate-x-1/2"
+                  className="h-[calc(100%+1.5rem)] w-px absolute top-6 left-1/2 transform -translate-x-1/2"
                   style={{
                     backgroundImage:
                       "linear-gradient(to bottom, transparent 5px, #1F1F29 5px, #1F1F29 10px)",

src/pages/About.tsx

@@ -22,14 +22,22 @@ export function AboutPage() {
     <SubPageLayout>
       <PageTitle subpage k="global.pages.about" />
       <ThinContainer>
-        <Heading1>{t("faq.title")}</Heading1>
+        <Heading1>{t("about.title")}</Heading1>
+        <Paragraph>{t("about.description")}</Paragraph>
+        <Heading2>{t("about.faqTitle")}</Heading2>
         <Ol
           items={[
-            <Question title={t("faq.q1.title")}>{t("faq.q1.body")}</Question>,
+            <Question title={t("about.q1.title")}>
+              {t("about.q1.body")}
+            </Question>,
+            <Question title={t("about.q2.title")}>
+              {t("about.q2.body")}
+            </Question>,
+            <Question title={t("about.q3.title")}>
+              {t("about.q3.body")}
+            </Question>,
           ]}
         />
-        <Heading2>{t("faq.how.title")}</Heading2>
-        <Paragraph>{t("faq.how.body")}</Paragraph>
       </ThinContainer>
     </SubPageLayout>
   );

src/setup/App.tsx

@@ -92,7 +92,7 @@ function App() {
         <Route exact path={["/browse/:query?", "/"]} component={HomePage} />
         <Route exact path="/register" component={RegisterPage} />
         <Route exact path="/login" component={LoginPage} />
-        <Route exact path="/faq" component={AboutPage} />
+        <Route exact path="/about" component={AboutPage} />
 
         {shouldHaveDmcaPage() ? (
           <Route exact path="/dmca" component={DmcaPage} />