feat: WIP, landing page

web/landing/www/src/components/FAQ.js

@@ -2,9 +2,9 @@ import React, { useState } from "react";
 
 const FAQ = () => {
   const faqList = [
-    { question: "Question 1", answer: "Answer 1" },
-    { question: "Question 2", answer: "Answer 2" },
-    { question: "Question 3", answer: "Answer 3" }
+    { question: "What limitations are there in the FREE version?", answer: "Currently, the free version only allows partial functionality such as reading web pages and sending up to 25 messages every three hours. There are no such limitations in the paid version." },
+    { question: "What are the limitations of the PREMIUM version?", answer: "The paid version has no limit on the number of messages, but there is a temporary limit when parsing documents that should not exceed 3MB in size. If you have special needs, you can contact us for customization." },
+    { question: "What is <Bot for you> of the PREMIUM version?", answer: "To ask questions, you don't have to mention the bot in the channel. You can directly communicate with the bot on Slack." }
   ];
 
   const [showAnswer, setShowAnswer] = useState("");

web/landing/www/src/components/Features.js

@@ -53,30 +53,37 @@ const Features = () => {
         <div className="flex flex-wrap -mx-4">
           <div className="w-full mx-auto lg:w-4/5 px-4 mb-8">
             <Feature
-              title="Feature 1"
-              text="This is a description of your feature. It should be short and to the point."
-              videoUrl="path/to/video1.mp4"
+              title="Web read with myGPTReader"
+              text="Use myGPTReader to quickly read and understand any web content through conversations, even videos (currently only YouTube videos with subtitles are supported)."
+              videoUrl="path/to/video2.mp4"
             />
           </div>
           <div className="w-full mx-auto lg:w-4/5 px-4 mb-8">
             <Feature
-              title="Feature 2"
-              text="This is another description of your feature. It should be short and to the point."
-              videoUrl="path/to/video2.mp4"
+              title="Document read with myGPTReader"
+              text="Use myGPTReader to quickly read the content of any file, supporting eBooks, PDF, DOCX, TXT, and Markdown."
+              videoUrl="path/to/video3.mp4"
             />
           </div>
           <div className="w-full mx-auto lg:w-4/5 px-4 mb-8">
             <Feature
-              title="Feature 3"
-              text="This is yet another description of your feature. It should be short and to the point."
-              videoUrl="path/to/video3.mp4"
+              title="Voice chat with myGPTReader"
+              text="Practice your foreign language by speaking with your voice to myGPTReader, which can be your personal tutor and supports Chinese, English, German, and Japanese."
+              videoUrl="path/to/video4.mp4"
             />
           </div>
           <div className="w-full mx-auto lg:w-4/5 px-4 mb-8">
             <Feature
-              title="Feature 4"
-              text="This is a description of your fourth feature. It should be short and to the point."
-              videoUrl="path/to/video4.mp4"
+              title="Ask myGPTReader anything"
+              text="A large number of prompt templates are built in, use them for better conversations with chatGPT."
+              videoUrl="path/to/video2.mp4"
+            />
+          </div>
+          <div className="w-full mx-auto lg:w-4/5 px-4 mb-8">
+            <Feature
+              title="Today Hot News"
+              text="Every day myGPTReader sends out the latest hot news and automatically generates a summary, so you can quickly learn what's hot today."
+              videoUrl="path/to/video1.mp4"
             />
           </div>
         </div>

web/landing/www/src/components/Hero.js

@@ -4,9 +4,10 @@ const Hero = () => {
   return (
     <section className="bg-white text-center">
       <div className="container mx-auto py-20">
-        <h1 className="text-5xl mb-6 font-black">
+        <h1 className="text-6xl mb-6 font-black">myGPTReader</h1>
+        <h2 className="text-5xl mb-6 font-black">
           A new way to read with AI bot
-        </h1>
+        </h2>
         <p className="text-gray-600 leading-normal mb-8 max-w-2xl mx-auto">
           myGPTReader is a bot on Slack that can read and summarize any webpage,
           documents including ebooks, or even videos from YouTube. It can even

web/landing/www/src/components/Pricing.js

@@ -1,6 +1,9 @@
 import React from "react";
 
 const Pricing = () => {
+  const getStarted = () => {
+    window.location.href = "https://slack-redirect.i365.tech/";
+  };
   return (
     <section id="pricing">
       <h2 className="text-4xl mb-4 text-center font-black">Choose Your Plan</h2>
@@ -9,25 +12,27 @@ const Pricing = () => {
           <h2 className="font-extrabold">Free</h2>
           <p className="price font-normal">$0/m</p>
           <ul className="benefits">
-            <li>Benefit 1</li>
-            <li>Benefit 2</li>
-            <li>Benefit 3</li>
+            <li>Web read with myGPTReader</li>
+            <li>Ask myGPTReader anything</li>
+            <li>Today Hot News</li>
           </ul>
-          <button className="cta bg-slate-800 font-semibold">
+          <button className="cta bg-slate-800 font-semibold" onClick={getStarted}>
             Get Started
           </button>
         </div>
         <div className="pricing__item premium">
           <h2 className="font-extrabold">Premium</h2>
-          <p className="price font-normal">$5/m</p>
+          <p className="price font-normal">$?/m</p>
           <ul className="benefits">
-            <li>Benefit 1</li>
-            <li>Benefit 2</li>
-            <li>Benefit 3</li>
-            <li>Advanced Feature 1</li>
-            <li>Advanced Feature 2</li>
+            <li>Web read with myGPTReader</li>
+            <li>Ask myGPTReader anything</li>
+            <li>Today Hot News</li>
+            <li>Document read with myGPTReader</li>
+            <li>Voice chat with myGPTReader</li>
+            <li>Bot for you</li>
+            <li className="italic">More in the future</li>
           </ul>
-          <button className="cta bg-gray-800 font-semibold">Get Started</button>
+          <button className="cta bg-gray-800 font-semibold" onClick={getStarted}>Get Started</button>
         </div>
       </div>
     </section>