From 72f02e80222317f07d7cd8a292e54a125dfef661 Mon Sep 17 00:00:00 2001
From: madawei2699 <madawei2699@gmail.com>
Date: Fri, 7 Apr 2023 08:42:07 +0800
Subject: [PATCH] feat: landing page, u

---
 web/landing/www/src/App.css                 |   2 +-
 web/landing/www/src/App.js                  |   2 +
 web/landing/www/src/components/FAQ.js       |   3 +-
 web/landing/www/src/components/Features.js  |   2 +-
 web/landing/www/src/components/Header.js    |  16 +-
 web/landing/www/src/components/Hero.js      |  10 +-
 web/landing/www/src/components/Highlight.js | 167 ++++++++++++++++++++
 web/landing/www/src/components/Pricing.js   |   8 +-
 8 files changed, 199 insertions(+), 11 deletions(-)
 create mode 100644 web/landing/www/src/components/Highlight.js

diff --git a/web/landing/www/src/App.css b/web/landing/www/src/App.css
index 5d261d81..446d090e 100644
--- a/web/landing/www/src/App.css
+++ b/web/landing/www/src/App.css
@@ -41,7 +41,7 @@
 }
 
 .benefits li {
-  padding: 10px 0;
+  padding: 4px 0;
 }
 
 .cta {
diff --git a/web/landing/www/src/App.js b/web/landing/www/src/App.js
index ffc8c57f..681448e8 100644
--- a/web/landing/www/src/App.js
+++ b/web/landing/www/src/App.js
@@ -8,6 +8,7 @@ import Features from "./components/Features";
 import Pricing from "./components/Pricing";
 import Footer from "./components/Footer";
 import FAQ from "./components/FAQ";
+import Highlight from "./components/Highlight";
 
 function App() {
   return (
@@ -33,6 +34,7 @@ function App() {
       <Header />
       <Hero />
       <Features />
+      <Highlight />
       <Pricing />
       <FAQ />
       <Footer />
diff --git a/web/landing/www/src/components/FAQ.js b/web/landing/www/src/components/FAQ.js
index 6d31fd4a..f47ccccc 100644
--- a/web/landing/www/src/components/FAQ.js
+++ b/web/landing/www/src/components/FAQ.js
@@ -4,7 +4,8 @@ const FAQ = () => {
   const faqList = [
     { 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 15 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." }
+    { 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." },
+    { question: "Can I install the bot in my slack workspace?", answer: "We will support this feature in the future." },
   ];
 
   const [showAnswer, setShowAnswer] = useState("");
diff --git a/web/landing/www/src/components/Features.js b/web/landing/www/src/components/Features.js
index f3313d22..c53fc97d 100644
--- a/web/landing/www/src/components/Features.js
+++ b/web/landing/www/src/components/Features.js
@@ -50,7 +50,7 @@ const Features = () => {
       <h2 className="text-4xl mb-4 text-center font-black">
         Features
       </h2>
-      <div className="container mx-auto px-4 my-16">
+      <div className="container mx-auto px-4 my-4">
         <div className="flex flex-wrap -mx-4">
           <div className="w-full mx-auto lg:w-4/5 px-4 mb-8">
             <Feature
diff --git a/web/landing/www/src/components/Header.js b/web/landing/www/src/components/Header.js
index c3aa5863..ce5274db 100644
--- a/web/landing/www/src/components/Header.js
+++ b/web/landing/www/src/components/Header.js
@@ -10,6 +10,13 @@ const Header = () => {
     });
   };
 
+  const scrollToHighlights = () => {
+    document.getElementById("highlights").scrollIntoView({
+      block: "start",
+      behavior: "smooth",
+    });
+  };
+
   const scrollToPricing = () => {
     document.getElementById("pricing").scrollIntoView({
       block: "start",
@@ -39,6 +46,13 @@ const Header = () => {
           >
             Features
           </Link>
+          <Link
+            onClick={scrollToHighlights}
+            to="#"
+            className="hidden md:block py-2 px-4 bg-gray-800 text-white font-semibold rounded-lg shadow-md hover:bg-gray-700 focus:outline-none focus:bg-gray-700"
+          >
+            Highlights
+          </Link>
           <Link
             onClick={scrollToPricing}
             to="#"
@@ -49,7 +63,7 @@ const Header = () => {
           <a
             href="#"
             onClick={goToGitHub}
-            className="github-link ml-4 flex items-center justify-center w-10 h-10 rounded-full bg-gray-800 text-white font-semibold shadow-md hover:bg-gray-700 focus:outline-none focus:bg-gray-700"
+            className="hidden md:flex github-link ml-4 items-center justify-center w-10 h-10 rounded-full bg-gray-800 text-white font-semibold shadow-md hover:bg-gray-700 focus:outline-none focus:bg-gray-700"
           >
             <svg
               className="w-6 h-6"
diff --git a/web/landing/www/src/components/Hero.js b/web/landing/www/src/components/Hero.js
index 9b0478de..82fb0e37 100644
--- a/web/landing/www/src/components/Hero.js
+++ b/web/landing/www/src/components/Hero.js
@@ -21,15 +21,19 @@ const Hero = () => {
           documents including ebooks, or even videos from YouTube. It can
           communicate with you through voice.
         </p>
+
         <a
           href='#'
           onClick={joinNow}
           className="py-3 px-6 bg-green-500 text-white font-semibold rounded-full shadow-md hover:bg-green-700 focus:outline-none focus:bg-gray-700"
         >
-          Join Now
+          Join free now!
         </a>
-        <p className="mt-4 italic text-gray-400">with more than 4000+ members to experience all these features for free.</p>
-        {/* <img className="mt-12 mx-auto w-4/5" src="/hero.jpg" alt="Hero" /> */}
+        <p className="mt-4 italic">Get started in minutes, no credit card required!</p>
+        <p className="text-center italic mb-8 text-lg font-bold">
+         Join our 4,000+ member community for <span className="text-blue-500">Free</span> and experience all the features now!
+        </p>
+
         <img className="mt-12 mx-auto w-4/5" src="https://camo.githubusercontent.com/b7b1868e5ab7f73ea6473d930c06b05cbb371a189c43dcf7edfbeb30dc67c464/68747470733a2f2f6170692e737461722d686973746f72792e636f6d2f7376673f7265706f733d6d616461776569323639392f6d7947505452656164657226747970653d44617465" alt="myGPTReader" />
       </div>
     </section>
diff --git a/web/landing/www/src/components/Highlight.js b/web/landing/www/src/components/Highlight.js
new file mode 100644
index 00000000..82c09037
--- /dev/null
+++ b/web/landing/www/src/components/Highlight.js
@@ -0,0 +1,167 @@
+import React from "react";
+
+const Highlight = () => {
+  return (
+    <div id="highlights">
+      <h2 className="text-4xl mb-2 text-center font-black">Highlights</h2>
+      <p className="text-center mb-8">Create any type of content with AI powered bot.</p>
+
+      <div className="flex flex-wrap mx-4 sm:mx-32 mb-8">
+
+        <div className="w-full md:w-1/4 px-4 mb-4">
+          <div className="border-b-2 border-gray-500 mb-2 pb-2">
+            <h3 className="font-bold text-lg">Summarize web page</h3>
+          </div>
+          <ul>
+            <li>Blog web page</li>
+            <li>News web page</li>
+            <li>Article web page</li>
+            <li>YouTube video content</li>
+          </ul>
+        </div>
+
+        <div className="w-full md:w-1/4 px-4 mb-4">
+          <div className="border-b-2 border-gray-500 mb-2 pb-2">
+            <h3 className="font-bold text-lg">Summarize document</h3>
+          </div>
+          <ul>
+            <li>Epub</li>
+            <li>PDF</li>
+            <li>Markdown</li>
+            <li>DOCX</li>
+            <li>TEXT</li>
+          </ul>
+        </div>
+
+        <div className="w-full md:w-1/4 px-4 mb-4">
+          <div className="border-b-2 border-gray-500 mb-2 pb-2">
+            <h3 className="font-bold text-lg">Voice chat</h3>
+          </div>
+          <ul>
+            <li>Chinese</li>
+            <li>English</li>
+            <li>German</li>
+            <li>Japanese</li>
+          </ul>
+        </div>
+
+        <div className="w-full md:w-1/4 px-4 mb-4">
+          <div className="border-b-2 border-gray-500 mb-2 pb-2">
+            <h3 className="font-bold text-lg">Hot news today</h3>
+          </div>
+          <ul>
+            <li>Hacker News</li>
+            <li>Reddit</li>
+            <li>Product Hunt</li>
+            <li>Financial News</li>
+          </ul>
+        </div>
+
+        <div className="w-full md:w-1/4 px-4 mb-4">
+          <div className="border-b-2 border-gray-500 mb-2 pb-2">
+            <h3 className="font-bold text-lg">Write text</h3>
+          </div>
+          <ul>
+            <li>Articles</li>
+            <li>Stories</li>
+            <li>Emails</li>
+            <li>Social media posts</li>
+          </ul>
+        </div>
+
+        <div className="w-full md:w-1/4 px-4 mb-4 md:clear-left">
+          <div className="border-b-2 border-gray-500 mb-2 pb-2">
+            <h3 className="font-bold text-lg">Write code</h3>
+          </div>
+          <ul>
+            <li>Python</li>
+            <li>Java</li>
+            <li>C++</li>
+            <li>JavaScript</li>
+            <li>Swift</li>
+          </ul>
+        </div>
+
+        <div className="w-full md:w-1/4 px-4 mb-4">
+          <div className="border-b-2 border-gray-500 mb-2 pb-2">
+            <h3 className="font-bold text-lg">Write reports</h3>
+          </div>
+          <ul>
+            <li>Financial reports</li>
+            <li>Project summaries</li>
+            <li>Sales reports</li>
+            <li>Marketing reports</li>
+            <li>HR Reports</li>
+          </ul>
+        </div>
+
+        <div className="w-full md:w-1/4 px-4 mb-4 md:clear-left">
+          <div className="border-b-2 border-gray-500 mb-2 pb-2">
+            <h3 className="font-bold text-lg">Write marketing materials</h3>
+          </div>
+          <ul>
+            <li>Emails</li>
+            <li>Social media posts</li>
+            <li>Advertisements</li>
+            <li>Landing pages</li>
+            <li>Brochures</li>
+          </ul>
+        </div>
+
+        <div className="w-full md:w-1/4 px-4 mb-4">
+          <div className="border-b-2 border-gray-500 mb-2 pb-2">
+            <h3 className="font-bold text-lg">Write financial documents</h3>
+          </div>
+          <ul>
+            <li>Financial reports</li>
+            <li>Financial summaries</li>
+            <li>Financial projections</li>
+            <li>Investment agreements</li>
+            <li>Loan agreements</li>
+          </ul>
+        </div>
+
+        <div className="w-full md:w-1/4 px-4 mb-4">
+          <div className="border-b-2 border-gray-500 mb-2 pb-2">
+            <h3 className="font-bold text-lg">Write HR documents</h3>
+          </div>
+          <ul>
+            <li>Job descriptions</li>
+            <li>Employee handbooks</li>
+            <li>Policies and procedures</li>
+            <li>Employee evaluations</li>
+            <li>Training materials</li>
+          </ul>
+        </div>
+
+        <div className="w-full md:w-1/4 px-4 mb-4 md:clear-left">
+          <div className="border-b-2 border-gray-500 mb-2 pb-2">
+            <h3 className="font-bold text-lg">Write Legal documents</h3>
+          </div>
+          <ul>
+            <li>Contracts Agreements</li>
+            <li>Legal notices</li>
+            <li>Memoranda of understanding</li>
+            <li>Non-disclosure agreements</li>
+          </ul>
+        </div>
+
+        <div className="w-full md:w-1/4 px-4 mb-4 md:clear-left">
+          <div className="border-b-2 border-gray-500 mb-2 pb-2">
+            <h3 className="font-bold text-lg">Translations</h3>
+          </div>
+          <ul>
+            <li>Text from English to Spanish</li>
+            <li>Text from French to English</li>
+            <li>Text from Japanese to English</li>
+            <li>Text from Chinese to English</li>
+            <li>Text from German to English</li>
+          </ul>
+        </div>
+
+      </div>
+    </div>
+  );
+};
+
+export default Highlight;
diff --git a/web/landing/www/src/components/Pricing.js b/web/landing/www/src/components/Pricing.js
index fc4fa1d8..216ce044 100644
--- a/web/landing/www/src/components/Pricing.js
+++ b/web/landing/www/src/components/Pricing.js
@@ -11,7 +11,7 @@ const Pricing = () => {
   const contackUS = () => {
     umamiEvent("Premium", { referrer })
     gtagEvent("Premium")
-    window.location.href = "mailto:me@myreader.io"
+    window.location.href = "https://slack-redirect.i365.tech/";
   }
   return (
     <section id="pricing">
@@ -27,7 +27,7 @@ const Pricing = () => {
             <li>Ask myGPTReader anything</li>
             <li>Today Hot News</li>
           </ul>
-          <button className="cta bg-slate-800 font-semibold" onClick={getStarted}>
+          <button className="cta bg-slate-800 font-semibold mt-4" onClick={getStarted}>
             Get Started
           </button>
         </div>
@@ -35,12 +35,12 @@ const Pricing = () => {
           <h2 className="font-extrabold">Premium</h2>
           <p className="price font-normal">$5/m</p>
           <ul className="benefits">
-            <li className="">All FREE version features</li>
+            <li>All FREE version features</li>
             <li>But no any limit</li>
             <li className="font-bold text-pink-600 text-lg">Bot for you</li>
             <li className="italic">More in the future</li>
           </ul>
-          <button className="cta bg-gray-800 font-semibold" onClick={contackUS}>Contact US</button>
+          <button className="cta bg-gray-800 font-semibold mt-4" onClick={contackUS}>Get Started</button>
         </div>
       </div>
     </section>