- implement about section

src/pages/app/builder.js

@@ -7,12 +7,17 @@ import RightSidebar from '../../components/builder/right/RightSidebar';
 import LoadingScreen from '../../components/router/LoadingScreen';
 import DatabaseContext from '../../contexts/DatabaseContext';
 import { useDispatch } from '../../contexts/ResumeContext';
+import Button from '../../components/shared/Button';
 
 const Builder = ({ id }) => {
   const dispatch = useDispatch();
   const [loading, setLoading] = useState(true);
   const { getResume } = useContext(DatabaseContext);
 
+  const handleLoadDemoData = () => {
+    dispatch({ type: 'load_demo_data' });
+  };
+
   useEffect(() => {
     (async () => {
       const resume = await getResume(id);
@@ -25,6 +30,21 @@ const Builder = ({ id }) => {
         return null;
       }
 
+      if (resume.createdAt === resume.updatedAt) {
+        toast.dark(() => (
+          <div className="py-2">
+            <p className="leading-loose">
+              Not sure where to begin? Try <strong>Loading Demo Data</strong> to
+              see what Reactive Resume has to offer.
+            </p>
+
+            <Button className="mt-4" onClick={handleLoadDemoData}>
+              Load Demo Data
+            </Button>
+          </div>
+        ));
+      }
+
       dispatch({ type: 'set_data', payload: resume });
       return setLoading(false);
     })();

src/pages/faq.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import { MdKeyboardArrowLeft } from 'react-icons/md';
+import { Link } from '@reach/router';
+import Wrapper from '../components/shared/Wrapper';
+
+const FrequentlyAskedQuestions = () => {
+  return (
+    <Wrapper>
+      <div className="md:w-1/2 container px-8 md:px-0 py-16 grid gap-12">
+        <div className="flex items-center">
+          <Link to="/">
+            <MdKeyboardArrowLeft size="32px" />
+          </Link>
+          <h1 className="ml-6 text-4xl font-semibold">
+            Frequently Asked Questions
+          </h1>
+        </div>
+
+        <div>
+          <p className="leading-loose">
+            This is aimed to be the world&apos;s simplest privacy policy. This
+            document should explain to you why the app collects some
+            information, what happens when your account is deleted and some
+            other frequently asked questions answered regarding your privacy.
+          </p>
+
+          <p className="mt-6 leading-loose">
+            If you have any more questions, please raise an issue regarding the
+            same on GitHub and I&apos;ll answer as honest and quickly as
+            possible :)
+          </p>
+        </div>
+
+        <hr />
+
+        <div>
+          <h4 className="text-xl font-medium mb-4">
+            What identifiable information is stored about me?
+          </h4>
+          <p className="leading-loose">
+            Your name and your email address is stored along with your user
+            information, if you signed in with Google, and of course, all the
+            information you input in your resume is also stored in the database.
+          </p>
+        </div>
+
+        <hr />
+
+        <div>
+          <h4 className="text-xl font-medium mb-4">
+            Why are you using a database, why not keep everything local like in
+            the first version of Reactive Resume?
+          </h4>
+          <p className="leading-loose">
+            Not having a centralized database cause a lot more problems than I
+            could solve, mainly having a large chunk of the users of the app
+            having an outdated schema as the app evolved. This was a problem I
+            could not solve without having at least some control.
+          </p>
+
+          <p className="mt-6 leading-loose">
+            Also, a lot of users were having trouble printing their resumes on
+            their browsers, so with the help of Cloud Functions from Firebase,
+            you can now print your resumes remotely. None of the resumes are
+            stored, and they are sent to you immediately after generation, which
+            can be verified by looking through the source code.
+          </p>
+        </div>
+
+        <hr />
+
+        <div>
+          <h4 className="text-xl font-medium mb-4">
+            How is this all free? There must be a catch!
+          </h4>
+          <p className="leading-loose">
+            <strong>Absolutely no catch to this freebie.</strong> This project
+            is just my way of giving back to the community that I&apos;ve
+            learned so much from. If you&apos;d like to show your appreciation
+            however, you can follow me on my social media and let me know, or
+            donate to the app to help pay the cloud bills.
+          </p>
+        </div>
+      </div>
+    </Wrapper>
+  );
+};
+
+export default FrequentlyAskedQuestions;

src/pages/index.js

@@ -1,5 +1,6 @@
 import React, { memo } from 'react';
 import { Helmet } from 'react-helmet';
+import { Link } from '@reach/router';
 import Hero from '../components/landing/Hero';
 import Wrapper from '../components/shared/Wrapper';
 
@@ -14,6 +15,10 @@ const Home = () => {
       <div className="container mt-24">
         <Hero />
 
+        <div className="my-24">
+          <h4 className="text-xl uppercase font-bold mb-8">Screenshots</h4>
+        </div>
+
         <div className="pt-8">
           <Feature title="Create a resume that’s worthy of who you are.">
             Keep up with the latest trends in resume design without having to
@@ -51,12 +56,27 @@ const Home = () => {
             You must be thinking, if you&apos;re not paying for the product,
             then you are the product. Or, at least your data is?{' '}
             <strong>Well, this is the exception</strong>. Your data is your own,
-            as stated in the ridiculously simple <a href="">Privacy Policy</a>,
-            I don&apos;t do anything with the data, it just exists on a database
-            for the convinient features provided by Reactive Resume.
+            as stated in the ridiculously simple{' '}
+            <Link to="/faq">Privacy Policy</Link>, I don&apos;t do anything with
+            the data, it just exists on a database for the convinient features
+            provided by Reactive Resume.
           </Feature>
         </div>
 
+        <div className="my-24">
+          <h4 className="text-xl uppercase font-bold mb-8">
+            Links of Interest
+          </h4>
+          <div className="grid grid-cols-4 gap-8">
+            <Link to="/faq">Frequently Asked Questions</Link>
+            <Link to="/faq">Checkout Source Code</Link>
+            <Link to="/faq">Upvote on Product Hunt</Link>
+            <Link to="/faq">Raise an Issue on GitHub</Link>
+            <Link to="/faq">Donate to Reactive Resume</Link>
+            <Link to="/faq">Building Great Looking Resumes</Link>
+          </div>
+        </div>
+
         <footer className="my-24">
           <p className="text-primary-500 opacity-75">
             Licensed under <a href="/">MIT</a>