Skip to content

Commit

Permalink
feat: landing page, u
Browse files Browse the repository at this point in the history
  • Loading branch information
madawei2699 committed Apr 7, 2023
1 parent a56b350 commit 72f02e8
Show file tree
Hide file tree
Showing 8 changed files with 199 additions and 11 deletions.
2 changes: 1 addition & 1 deletion web/landing/www/src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
}

.benefits li {
padding: 10px 0;
padding: 4px 0;
}

.cta {
Expand Down
2 changes: 2 additions & 0 deletions web/landing/www/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -33,6 +34,7 @@ function App() {
<Header />
<Hero />
<Features />
<Highlight />
<Pricing />
<FAQ />
<Footer />
Expand Down
3 changes: 2 additions & 1 deletion web/landing/www/src/components/FAQ.js
Original file line number Diff line number Diff line change
Expand Up @@ -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("");
Expand Down
2 changes: 1 addition & 1 deletion web/landing/www/src/components/Features.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
16 changes: 15 additions & 1 deletion web/landing/www/src/components/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,13 @@ const Header = () => {
});
};

const scrollToHighlights = () => {
document.getElementById("highlights").scrollIntoView({
block: "start",
behavior: "smooth",
});
};

const scrollToPricing = () => {
document.getElementById("pricing").scrollIntoView({
block: "start",
Expand Down Expand Up @@ -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="#"
Expand All @@ -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"
Expand Down
10 changes: 7 additions & 3 deletions web/landing/www/src/components/Hero.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
167 changes: 167 additions & 0 deletions web/landing/www/src/components/Highlight.js
Original file line number Diff line number Diff line change
@@ -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;
8 changes: 4 additions & 4 deletions web/landing/www/src/components/Pricing.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const Pricing = () => {
const contackUS = () => {
umamiEvent("Premium", { referrer })
gtagEvent("Premium")
window.location.href = "mailto:[email protected]"
window.location.href = "https://slack-redirect.i365.tech/";
}
return (
<section id="pricing">
Expand All @@ -27,20 +27,20 @@ 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>
<div className="pricing__item premium w-full sm:w-1/4">
<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>
Expand Down

0 comments on commit 72f02e8

Please sign in to comment.