Update About & Sponsor (#59)

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always"
+}

public/locales/en/about.json

@@ -1,5 +1,20 @@
 {
   "description": "Free ChatGPT is an amazing open-source web app that allows you to play with OpenAI's ChatGPT API for free!",
+  "sourceCode": "Checkout the <0>source code</0> on GitHub and give it a ⭐️!",
+  "initiative": {
+    "description": "Checkout the <0><i>Open ChatGPT Initiative</i></0> and <1><i>Unleashing the Boundlessness of ChatGPT: A Public Appeal</i></1>!",
+    "link0": "https://medium.com/@ayaka_45434/the-open-chatgpt-initiative-e76b0b62a3ae",
+    "link1": "https://medium.com/@ayaka_45434/unleashing-the-boundlessness-of-chatgpt-a-public-appeal-f1b535a5ca05"
+  },
+  "support": {
+    "title": "Support",
+    "paragraph1": "At Free ChatGPT, we strive to provide you with useful and amazing features around the clock. And just like any project, your support and motivation will be instrumental in helping us keep moving forward!",
+    "paragraph2": "If you have enjoyed using our app, we kindly ask you to give this <0>project</0> a ⭐️. Your endorsement means a lot to us and encourages us to work harder towards delivering the best possible experience.",
+    "paragraph3": "If you would like to support the team, consider sponsoring us through one of the methods below. Every contribution, no matter how small, helps us to maintain and improve our service.",
+    "paragraph4": "Thank you for being a part of our community, and we look forward to serving you better in the future.",
+    "alipay": "Alipay",
+    "wechatPay": "WeChat"
+  },
   "discordServer": {
     "title": "Discord Server",
     "paragraph1": "We invite you to join our Discord community! Our Discord server is a great place to exchange ChatGPT ideas and tips, and submit feature requests for Free ChatGPT. You'll have the opportunity to interact with the developers behind Free ChatGPT as well as other AI enthusiasts who share your passion.",
@@ -9,14 +24,5 @@
     "title": "Privacy Statement",
     "paragraph1": "We highly value your privacy and are committed to safeguarding the privacy of our users. We do not collect or store any text you enter or receive from the OpenAI server in any form. Our source code is available for your inspection to verify this statement.",
     "paragraph2": "We prioritise the security of your API key and handle it with utmost care. If you use your own API key, your key is exclusively stored on your browser and never shared with any third-party entity. It is solely used for the intended purpose of accessing the OpenAI API and not for any other unauthorised use."
-  },
-  "support": {
-    "title": "Support",
-    "paragraph1": "At Free ChatGPT, we strive to provide you with useful and amazing features around the clock. And just like any project, your support and motivation will be instrumental in helping us keep moving forward!",
-    "paragraph2": "If you have enjoyed using our app, we kindly ask you to give this <0>project</0> a ⭐️. Your endorsement means a lot to us and encourages us to work harder towards delivering the best possible experience.",
-    "paragraph3": "If you would like to support the team, consider sponsoring us through one of the methods below. Every contribution, no matter how small, helps us to maintain and improve our service.",
-    "paragraph4": "Thank you for being a part of our community, and we look forward to serving you better in the future.",
-    "alipay": "Alipay",
-    "wechatPay": "WeChat Pay"
   }
 }

public/locales/en/main.json

@@ -10,7 +10,7 @@
   "import": "Import",
   "export": "Export",
   "author": "Made by Jing Hua",
-  "about": "About",
+  "about": "About & Sponsor",
   "api": "API",
   "personal": "Personal",
   "free": "Free",

public/locales/zh-CN/about.json

@@ -1,5 +1,20 @@
 {
   "description": "Free ChatGPT 是一个神奇的开源 Web 应用，允许您免费使用 OpenAI 的 ChatGPT API 进行对话！",
+  "sourceCode": "在 GitHub 上查看<0>源代码</0>并给它一个⭐️！",
+  "initiative": {
+    "description": "看看《<0>开放 ChatGPT 倡议</0>》和《<1>释放 ChatGPT 的无限潜能：一个公开呼吁</1>》吧!",
+    "link0": "https://medium.com/@ayaka_90553/%E5%BC%80%E6%94%BE-chatgpt-%E5%80%A1%E8%AE%AE-eaac01243dae",
+    "link1": "https://medium.com/@ayaka_90553/%E9%87%8A%E6%94%BE-chatgpt-%E7%9A%84%E6%97%A0%E9%99%90%E6%BD%9C%E8%83%BD-%E4%B8%80%E4%B8%AA%E5%85%AC%E5%BC%80%E5%91%BC%E5%90%81-7195a12f05f2"
+  },
+  "support": {
+    "title": "支持",
+    "paragraph1": "在 Free ChatGPT，我们致力于为您提供实用和惊人的功能。就像任何项目一样，您的支持和激励将对我们在保持前进方面起到至关重要的作用！",
+    "paragraph2": "如果您喜欢使用我们的应用程序，我们恳请您给这个<0>项目</0>一个⭐️。您的认可对我们意义重大，鼓励我们更加努力，以提供最佳的体验。",
+    "paragraph3": "如果您想支持我们的团队，请考虑通过以下方法之一赞助我们。每一份贡献，无论多小，都有助于我们维护和改善我们的服务。",
+    "paragraph4": "感谢您成为我们社区的一员，我们期待着在未来为您提供更好的服务。",
+    "alipay": "支付宝",
+    "wechatPay": "微信"
+  },
   "discordServer": {
     "title": "Discord 服务器",
     "paragraph1": "我们邀请您加入我们的 Discord 社区！我们的 Discord 服务器是一个很好的地方，可以交流 ChatGPT 的想法和技巧，并提交 Free ChatGPT 的功能请求。您将有机会与 Free ChatGPT 的开发人员以及其他分享您热情的人工智能爱好者互动。",
@@ -9,14 +24,5 @@
     "title": "隐私声明",
     "paragraph1": "我们非常重视您的隐私，并致力于保护用户的隐私。我们不会以任何形式收集或存储您输入或从 OpenAI 服务器接收的任何文本。我们的源代码可以供您检查，以验证此声明。",
     "paragraph2": "我们高度优先考虑您的 API 密钥的安全，并非常小心地处理它。如果您使用自己的 API 密钥，您的密钥将专门存储在您的浏览器中，并且永远不会与任何第三方实体共享。它仅用于访问 OpenAI API 的预期用途，而不会用于任何其他未经授权的用途。"
-  },
-  "support": {
-    "title": "支持",
-    "paragraph1": "在 Free ChatGPT，我们致力于为您提供实用和惊人的功能。就像任何项目一样，您的支持和激励将对我们在保持前进方面起到至关重要的作用！",
-    "paragraph2": "如果您喜欢使用我们的应用程序，我们恳请您给这个<0>项目</0>一个 ⭐️。您的认可对我们意义重大，鼓励我们更加努力，以提供最佳的体验。",
-    "paragraph3": "如果您想支持我们的团队，请考虑通过以下方法之一赞助我们。每一份贡献，无论多小，都有助于我们维护和改善我们的服务。",
-    "paragraph4": "感谢您成为我们社区的一员，我们期待着在未来为您提供更好的服务。",
-    "alipay": "支付宝",
-    "wechatPay": "微信支付"
   }
 }

public/locales/zh-CN/main.json

@@ -10,7 +10,7 @@
   "import": "导入",
   "export": "导出",
   "author": "由 Jing Hua 制作",
-  "about": "关于",
+  "about": "关于和赞助",
   "api": "API",
   "personal": "个人",
   "free": "免费",

src/components/AboutMenu/AboutMenu.tsx

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 import PopupModal from '@components/PopupModal';
 import AboutIcon from '@icon/AboutIcon';
-import Updates from '@components/Menu/MenuOptions/Updates';
 
 const AboutMenu = () => {
   const { t } = useTranslation(['main', 'about']);
@@ -23,14 +22,96 @@ const AboutMenu = () => {
       </a>
       {isModalOpen && (
         <PopupModal
-          title='About'
+          title={t('about') as string}
           setIsModalOpen={setIsModalOpen}
           cancelButton={false}
         >
           <div className='p-6 border-b border-gray-200 dark:border-gray-600'>
-            <div className='min-w-fit text-gray-900 dark:text-gray-300 text-sm flex flex-col gap-2'>
+            <div className='min-w-fit text-gray-900 dark:text-gray-300 text-sm flex flex-col gap-3 leading-relaxed'>
               <p>{t('description', { ns: 'about' })}</p>
-              <Updates isButton />
+              <p>
+                <Trans
+                  i18nKey='sourceCode'
+                  ns='about'
+                  components={[
+                    <a
+                      href='https://github.com/ztjhz/ChatGPTFreeApp'
+                      target='_blank'
+                      className='link'
+                    />,
+                  ]}
+                />
+              </p>
+
+              <p>
+                <Trans
+                  i18nKey='initiative.description'
+                  ns='about'
+                  components={[
+                    <a
+                      href={t('initiative.link0', { ns: 'about' }) as string}
+                      target='_blank'
+                      className='link'
+                    />,
+                    <a
+                      href={t('initiative.link1', { ns: 'about' }) as string}
+                      target='_blank'
+                      className='link'
+                    />,
+                  ]}
+                />
+              </p>
+
+              <>
+                <h2 className='text-lg font-bold'>
+                  {t('support.title', { ns: 'about' })}
+                </h2>
+                <p>{t('support.paragraph1', { ns: 'about' })}</p>
+                <p>
+                  <Trans
+                    i18nKey='support.paragraph2'
+                    ns='about'
+                    components={[
+                      <a
+                        href='https://github.com/ztjhz/ChatGPTFreeApp/'
+                        target='_blank'
+                        className='link'
+                      />,
+                    ]}
+                  />
+                </p>
+                <p>{t('support.paragraph3', { ns: 'about' })}</p>
+
+                <div className='flex flex-col items-center gap-4 my-4'>
+                  <a href='https://ko-fi.com/freechatgpt' target='_blank'>
+                    <img
+                      src='/kofi.svg'
+                      alt='Support us through the Ko-fi platform.'
+                    />
+                  </a>
+                  <div className='flex gap-x-10 gap-y-4 flex-wrap justify-center'>
+                    <div className='flex flex-col items-center justify-center gap-1'>
+                      <div>{t('support.alipay', { ns: 'about' })} (Ayaka)</div>
+                      <img
+                        className='rounded-md w-32 h-32'
+                        src='https://ayaka14732.github.io/sponsor/alipay.jpg'
+                        alt='Support us through Alipay'
+                      />
+                    </div>
+                    <div className='flex flex-col items-center justify-center gap-1'>
+                      <div>
+                        {t('support.wechatPay', { ns: 'about' })} (Ayaka)
+                      </div>
+                      <img
+                        className='rounded-md w-32 h-32'
+                        src='https://ayaka14732.github.io/sponsor/wechat.png'
+                        alt='Support us through WeChat Pay'
+                      />
+                    </div>
+                  </div>
+                </div>
+                <p>{t('support.paragraph4', { ns: 'about' })}</p>
+              </>
 
               <h2 className='text-lg font-bold'>
                 {t('discordServer.title', { ns: 'about' })}
@@ -57,53 +138,6 @@ const AboutMenu = () => {
               <p>{t('privacyStatement.paragraph1', { ns: 'about' })}</p>
 
               <p>{t('privacyStatement.paragraph2', { ns: 'about' })}</p>
-              <h2 className='text-lg font-bold'>
-                {t('support.title', { ns: 'about' })}
-              </h2>
-              <p>{t('support.paragraph1', { ns: 'about' })}</p>
-              <p>
-                <Trans
-                  i18nKey='support.paragraph2'
-                  ns='about'
-                  components={[
-                    <a
-                      href='https://github.com/ztjhz/ChatGPTFreeApp/'
-                      target='_blank'
-                      className='link'
-                    />,
-                  ]}
-                />
-              </p>
-              <p>{t('support.paragraph3', { ns: 'about' })}</p>
-              <div className='flex flex-col items-center gap-4 my-4'>
-                <a href='https://ko-fi.com/freechatgpt' target='_blank'>
-                  <img
-                    src='/kofi.svg'
-                    alt='Support us through the Ko-fi platform.'
-                  />
-                </a>
-                <div className='flex gap-x-10 gap-y-4 flex-wrap justify-center'>
-                  <div className='flex flex-col items-center justify-center gap-1'>
-                    <div>{t('support.alipay', { ns: 'about' })} (Ayaka)</div>
-                    <img
-                      className='rounded-md w-32 h-32'
-                      src='https://ayaka14732.github.io/sponsor/alipay.jpg'
-                      alt='Support us through Alipay'
-                    />
-                  </div>
-                  <div className='flex flex-col items-center justify-center gap-1'>
-                    <div>{t('support.wechatPay', { ns: 'about' })} (Ayaka)</div>
-                    <img
-                      className='rounded-md w-32 h-32'
-                      src='https://ayaka14732.github.io/sponsor/wechat.png'
-                      alt='Support us through WeChat Pay'
-                    />
-                  </div>
-                </div>
-              </div>
-              <p className='text-center'>
-                {t('support.paragraph4', { ns: 'about' })}
-              </p>
             </div>
           </div>
         </PopupModal>

src/components/Menu/MenuOptions/Updates.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import LinkIcon from '@icon/LinkIcon';
-
-const Updates = ({ isButton = false }: { isButton?: boolean }) => {
-  return (
-    <a
-      href='https://github.com/ztjhz/chatgpt-free-app'
-      target='_blank'
-      className={
-        isButton
-          ? 'flex py-3 px-3 items-center gap-3 transition-colors duration-200 btn btn-neutral text-sm justify-center'
-          : 'flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
-      }
-    >
-      <LinkIcon />
-      Source Code
-    </a>
-  );
-};
-
-export default Updates;