feat: update information in FAQ

src/pages/about/index.tsx

@@ -1,19 +1,19 @@
 /* eslint-disable react/no-unescaped-entities */
-import Link from 'next/link';
-import Meta from '../../components/Meta/Meta';
-import Layout from '../../layouts/Layout';
+import Link from 'next/link'
+import Meta from '../../components/Meta/Meta'
+import Layout from '../../layouts/Layout'
 
-import styles from '../../styles/modules/pages/about/about.module.scss';
+import styles from '../../styles/modules/pages/about/about.module.scss'
 
 const About = () => {
   return (
     <>
       <Meta
-        title='About'
-        description='libremdb is a free & open source IMDb front-end. It allows you to see information about movies, tv shows, video games without any ads or tracking.'
+        title="About"
+        description="libremdb is a free & open source IMDb front-end. It allows you to see information about movies, tv shows, video games without any ads or tracking."
       />
       <Layout full className={styles.about}>
-        <section id='features' className={styles.features}>
+        <section id="features" className={styles.features}>
           <h2
             className={`heading heading__secondary ${styles.features__heading}`}
           >
@@ -22,12 +22,12 @@ const About = () => {
           <ul className={styles.features__list}>
             <li className={styles.feature}>
               <svg
-                aria-hidden='true'
-                focusable='false'
-                role='img'
+                aria-hidden="true"
+                focusable="false"
+                role="img"
                 className={styles.feature__icon}
               >
-                <use href='/svg/sprite.svg#icon-eye-slash'></use>
+                <use href="/svg/sprite.svg#icon-eye-slash"></use>
               </svg>
               <h3
                 className={`heading heading__tertiary ${styles.feature__heading}`}
@@ -41,12 +41,12 @@ const About = () => {
             </li>
             <li className={styles.feature}>
               <svg
-                aria-hidden='true'
-                focusable='false'
-                role='img'
+                aria-hidden="true"
+                focusable="false"
+                role="img"
                 className={styles.feature__icon}
               >
-                <use href='/svg/sprite.svg#icon-palette'></use>
+                <use href="/svg/sprite.svg#icon-palette"></use>
               </svg>
               <h3
                 className={`heading heading__tertiary ${styles.feature__heading}`}
@@ -60,12 +60,12 @@ const About = () => {
             </li>
             <li className={styles.feature}>
               <svg
-                aria-hidden='true'
-                focusable='false'
-                role='img'
+                aria-hidden="true"
+                focusable="false"
+                role="img"
                 className={styles.feature__icon}
               >
-                <use href='/svg/sprite.svg#icon-responsive'></use>
+                <use href="/svg/sprite.svg#icon-responsive"></use>
               </svg>
               <h3
                 className={`heading heading__tertiary ${styles.feature__heading}`}
@@ -79,7 +79,7 @@ const About = () => {
             </li>
           </ul>
         </section>
-        <section id='faq' className={styles.faqs}>
+        <section id="faq" className={styles.faqs}>
           <h2 className={`heading heading__secondary ${styles.faqs__heading}`}>
             Questions you may have
           </h2>
@@ -91,21 +91,21 @@ const About = () => {
               <p className={styles.faq__description}>
                 Replace `imdb.com` in any IMDb URL with any of the instances.
                 For example: `
-                <a href='https://imdb.com/title/tt1049413' className='link'>
+                <a href="https://imdb.com/title/tt1049413" className="link">
                   imdb.com/title/tt1049413
                 </a>
                 ` to `
                 <a
-                  href='https://libremdb.iket.me/title/tt1049413'
-                  className='link'
+                  href="https://libremdb.iket.me/title/tt1049413"
+                  className="link"
                 >
                   libremdb.iket.me/title/tt1049413
                 </a>
                 ` . To avoid changing the URLs manually, you can use extensions
                 like{' '}
                 <a
-                  href='https://github.com/libredirect/libredirect/'
-                  className='link'
+                  href="https://github.com/libredirect/libredirect/"
+                  className="link"
                 >
                   LibRedirect
                 </a>
@@ -133,12 +133,21 @@ const About = () => {
             </details>
             <details className={styles.faq}>
               <summary className={styles.faq__summary}>
-                I see connection being made to some Amazon domains.
+                Is content served from third-parties, like Amazon?
               </summary>
               <p className={styles.faq__description}>
-                For now, images and videos are directly served from Amazon. If I
-                have enough time in the future, I'll implement a way to serve
-                the images from libremdb instead.
+                Nope, libremdb proxies all image and video requests through the
+                instance to avoid exposing your IP address, browser information
+                and other personally identifiable metadata (
+                <a
+                  href="https://github.com/httpjamesm"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="link"
+                >
+                  Contributor
+                </a>
+                ).
               </p>
             </details>
             <details className={styles.faq}>
@@ -146,9 +155,9 @@ const About = () => {
                 Will Amazon track me then?
               </summary>
               <p className={styles.faq__description}>
-                They may log your IP address, useragent, and other such
-                identifiers. I'd recommend using a VPN, or accessing the website
-                through TOR for mitigating this risk.
+                Also nope. All Amazon will see is the libremdb instance making
+                the request, not you. IP address, browser information and other
+                personally identifiable metadata is hidden from Amazon.
               </p>
             </details>
             <details className={styles.faq}>
@@ -157,7 +166,7 @@ const About = () => {
               </summary>
               <p className={styles.faq__description}>
                 Refer to the{' '}
-                <a className='link' href='#features'>
+                <a className="link" href="#features">
                   features section
                 </a>{' '}
                 above.
@@ -187,8 +196,8 @@ const About = () => {
               </summary>
               <p className={styles.faq__description}>
                 That's great! I've a couple of{' '}
-                <Link href='/contact'>
-                  <a className='link'>contact methods</a>
+                <Link href="/contact">
+                  <a className="link">contact methods</a>
                 </Link>
                 . Send your beautiful suggestions(or complaints), or just drop a
                 hi.
@@ -198,7 +207,7 @@ const About = () => {
         </section>
       </Layout>
     </>
-  );
-};
+  )
+}
 
-export default About;
+export default About