feat: add footer and faq page

src/components/App.js

@@ -3,6 +3,7 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
 
 import Editor from './Editor';
 import Home from './Home'
+import Faq from './Faq';
 
 const App = () => {
 
@@ -11,6 +12,7 @@ const App = () => {
             <Routes>
                 <Route exact path="/" element={<Home />} />
                 <Route exact path="/editor" element={<Editor />} />
+                <Route exact path="/faq" element={<Faq />} />
             </Routes>
         </BrowserRouter>
     );

src/components/Editor.js

@@ -66,12 +66,18 @@ class Editor extends React.Component {
 			<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-2"/>
+						<img src={logo} alt="logo" className="w-8 h-8 mx-4" />
 						<h1 className="font-semibold">Coverview</h1>
 
 					</Link>
 
-					<a href="a" className="ml-auto mr-4 bg-blue-400 text-sm rounded-full px-4 font-semibold text-white p-1">Share on Twitter</a>
+					<div className="ml-auto mr-4 ">
+						<a href="a" className="mx-2 bg-blue-400 text-sm rounded-full px-4 font-semibold text-white p-1">Share on Twitter</a>
+
+						<a href="https://www.buymeacoffee.com/rutikwankhade" target="_blank" rel="noreferrer" className="text-base mx-2 font-Nunito">🥤 Buy me a coffee</a>
+
+					</div>
+
 				</div>
 
 				<ImgProvider>
@@ -238,8 +244,7 @@ class Editor extends React.Component {
 							</div>
 
 
-					<span className="text-sm mt-4  text-center text-gray-400">Made with 💖 by <a href="https://twitter.com/WankhadeRutik"
+
-						target="_blank" rel="noopener  noreferrer" className="underline hover:text-purple-400">Rutik Wankhade</a></span>
 
 
 

src/components/Faq.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Faq = () => {
+    return ( 
+        <div>
+            faq
+        </div>
+     );
+}
+ 
+export default Faq;

src/components/Home.js

@@ -171,10 +171,9 @@ const Home = () => {
                 </div>
 
 
+                <WallOfLove />
 
-<WallOfLove />
+                <div className="md:w-1/2 mx-auto pt-20">
-
-                <div className="md:w-1/2 mx-auto py-20">
                     <h2 className="text-5xl text-center font-Anek font-bold text-gray-700 mx-auto">Simple, quick, and easy to use</h2>
                     <p className="text-2xl text-center my-2">So you can focus on writing your blog and never worry about those cover images.</p>
                     <Link to="/editor" >
@@ -186,6 +185,20 @@ const Home = () => {
 
 
 
+
+            <footer className="bg-white p-10 flex font-Inter md:px-20 justify-center items-center">
+                <div className="w-1/2 flex flex-col">
+                    <span className="text-lg">Made with 💛 by <a href="https://twitter.com/WankhadeRutik" className="font-semibold" target="_blank" rel="noreferrer">Rutik Wankhade</a></span>
+                    <span className="text-lg font-Nunito">checkout <a href="https://rutikwankhade.dev" target="_blank" rel="noreferrer" className="text-purple-400 hover:text-pink-400">more cool stuff</a> I built</span>
+                </div>
+
+                <div className="text-lg flex ">
+                    <Link to="/faq" className="m-2 hover:font-semibold">📌 How to use</Link>
+                    <a href="https://github.com/rutikwankhade/CoverView" target="_blank" rel="noreferrer" className="m-2 hover:font-semibold">⭐ Star on Github</a>
+                    <a href="https://www.buymeacoffee.com/rutikwankhade" target="_blank" rel="noreferrer" className="m-2 hover:font-semibold">🥤 Buy me a coffee</a>
+                </div>
+            </footer>
+
         </div>
     );
 }