From a4ba942c6fa2bb47a120b6716220d327cd37e958 Mon Sep 17 00:00:00 2001
From: rutik wankhade <rutikwankhade2@gmail.com>
Date: Thu, 21 Jul 2022 17:07:59 +0530
Subject: [PATCH] feat: add faqs about coverview

---
 src/components/Editor.js | 22 ++----------------
 src/components/Faq.js    | 50 ++++++++++++++++++++++++++++++++++++----
 src/components/Header.js | 28 ++++++++++++++++++++++
 3 files changed, 75 insertions(+), 25 deletions(-)
 create mode 100644 src/components/Header.js

diff --git a/src/components/Editor.js b/src/components/Editor.js
index bd2001f..cb5777c 100644
--- a/src/components/Editor.js
+++ b/src/components/Editor.js
@@ -5,8 +5,7 @@ import Select from 'react-select';
 import RandomTheme from './RandomTheme';
 // import resetIcon from '../assets/icons/reset.svg'
 import { ImgProvider } from '../utils/ImgContext'
-import logo from '../assets/icons/logo.png'
-import { Link } from "react-router-dom";
+import Header from "./Header";
 
 const defaultSettings = {
 	title: "How I built my first project with react",
@@ -29,7 +28,6 @@ const devIconsUrl = "https://raw.githubusercontent.com/devicons/devicon/master/d
 // 	{ value: 'javascript', label: 'Javascript' },
 // 	{ value: 'python', label: 'Python' },
 // ]
-const     tweetText = encodeURIComponent(`type your thoughts here, Try https://coverview.vercel.app by @WankhadeRutik`)
 
 
 class Editor extends React.Component {
@@ -66,23 +64,7 @@ class Editor extends React.Component {
 	render() {
 		return (
 			<div>
-				<div className="text-xl bg-white flex border-b border-gray-100 shadow-xl p-2">
-					<Link to="/" className="flex items-center">
-						<img src={logo} alt="logo" className="w-8 h-8 mx-4" />
-						<h1 className="font-semibold">Coverview</h1>
-
-					</Link>
-
-					<div className="ml-auto mr-4 ">
-						<Link to="/faq" className="text-gray-700 hover:text-gray-800 text-base font-Nunito mx-4">How to use</Link>
-
-						<a href="https://www.buymeacoffee.com/rutikwankhade" target="_blank" rel="noreferrer" className="text-base mx-2 font-Nunito">🥤 Buy me a coffee</a>
-						
-						<a   href={`https://twitter.com/intent/tweet?text=${tweetText}`} className="mx-2 bg-blue-400 text-sm rounded-full px-4 font-semibold text-white p-1">Share on Twitter</a>
-
-					</div>
-
-				</div>
+				<Header />
 
 				<ImgProvider>
 
diff --git a/src/components/Faq.js b/src/components/Faq.js
index 8ae2d50..31c1c38 100644
--- a/src/components/Faq.js
+++ b/src/components/Faq.js
@@ -1,11 +1,51 @@
 import React from 'react';
-
+import Header from './Header';
 const Faq = () => {
-    return ( 
+    return (
         <div>
-            faq
+            <Header />
+
+            <div className=" md:w-10/12 mx-auto p-20 ">
+                <h1 className="font-bold text-4xl font-Anek text-center">Frequently asked questions</h1>
+
+
+                <div className="flex flex-wrap justify-center mt-20 font-Inter">
+
+                    <div className="w-5/12 m-4 ">
+                        <p className="text-xl font-bold py-2">What is Coverview?</p>
+                        <p className="text-lg text-gray-700">Coverview is a tool to create cover images for your blogs quickly and easily.</p>
+                    </div>
+
+                    <div className="w-5/12 m-4">
+                        <p className="text-xl font-bold py-2">Is Coverview free?</p>
+                        <p className="text-lg text-gray-700">Yes! Coverview is absolutely free to use.</p>
+                    </div>
+
+                    <div className="w-5/12 m-4">
+                        <p className="text-xl  font-bold py-2">Can I upload my custom brand logo?</p>
+                        <p className="text-lg text-gray-700">Yes.Just search and select <span className="font-semibold">custom</span> in icon section and you can upload your own logo to personalize your cover images.</p>
+                        <p className="italic mt-2">See <a href="https://twitter.com/WankhadeRutik/status/1518270774335111168?s=20&t=XMjbJpGAC7anadJ690_DUg" className="text-blue-400" target="_blank" rel="noreferrer">example</a></p>
+                    </div>
+
+                    <div className="w-5/12 m-4">
+                        <p className="text-xl font-bold my-2">Can I use coverview for non-technical/personal blogs?</p>
+                        <p className="text-lg text-gray-700">Yes! Why not? Even though coverview was built with technical blogs in mind, you can still use it for your personal blogs. Check out the stylish theme for more.</p>
+                    </div>
+
+                    <div className="w-5/12 m-4">
+                        <p className="text-xl font-bold my-2">Why use Coverview?</p>
+                        <p className="text-lg text-gray-700">Because it's simple, quick and easy to use. Why spend hours designing when you can create cover images in seconds?</p>
+                    </div>
+
+                    <div className="w-5/12 m-4">
+                        <p className="text-xl font-bold my-2">Want to support/sponsor the project?</p>
+                        <p className="text-lg text-gray-700">If coverview adds value in your life and you wish to support this project, you can <a href="https://github.com/sponsors/rutikwankhade" target="_blank" rel="noreferrer" className="font-semibold hover:underline">sponsor me on Github</a> or <a href="https://www.buymeacoffee.com/rutikwankhade" target="_blank" rel="noreferrer" className="hover:underline text-pink-400 font-semibold">buy me a coffee</a>.</p>
+                    </div>
+
+                </div>
+            </div>
         </div>
-     );
+    );
 }
- 
+
 export default Faq;
\ No newline at end of file
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 0000000..54a36a5
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Link } from 'react-router-dom'
+import logo from '../assets/icons/logo.png'
+const Header = () => {
+
+    const     tweetText = encodeURIComponent(`type your thoughts here, Try https://coverview.vercel.app by @WankhadeRutik`)
+
+    return ( 
+        
+            <div className="text-xl bg-white flex border-b border-gray-100 p-2">
+					<Link to="/" className="flex items-center">
+						<img src={logo} alt="logo" className="w-8 h-8 mx-4" />
+						<h1 className="font-semibold">Coverview</h1>
+
+					</Link>
+
+					<div className="ml-auto mr-4 ">
+						<Link to="/faq" className="text-gray-700 hover:text-gray-800 text-base font-Nunito mx-4">How to use</Link>
+						<a href="https://www.buymeacoffee.com/rutikwankhade" target="_blank" rel="noreferrer" className="text-base mx-2 font-Nunito">🥤 Buy me a coffee</a>
+						<a   href={`https://twitter.com/intent/tweet?text=${tweetText}`} className="mx-2 bg-blue-400 text-sm rounded-full px-4 font-semibold text-white p-1">Share on Twitter</a>
+					</div>
+
+				</div>
+    
+     );
+}
+ 
+export default Header;
\ No newline at end of file