From 4fd74a694ced60862ab467ed599e9af4132433b7 Mon Sep 17 00:00:00 2001
From: Kishan Takoordyal <kishan@kinesis.games>
Date: Thu, 4 Mar 2021 19:28:17 +0400
Subject: [PATCH] complete footer

---
 src/App.js                |  3 ++
 src/components/Footer.js  | 61 +++++++++++++++++++++++++++++++++++++++
 src/components/PartTwo.js |  2 +-
 tailwind.config.js        |  1 +
 4 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Footer.js

diff --git a/src/App.js b/src/App.js
index 09b80b2..c359fed 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,7 @@ import HeaderD from './components/HeaderD';
 import HeaderM from './components/HeaderM';
 import PartOne from './components/PartOne';
 import PartTwo from './components/PartTwo';
+import Footer from './components/Footer';
 
 export default function App() {
   const [currentLanguage, setCurrentLanguage] = useState('en');
@@ -33,6 +34,8 @@ export default function App() {
 
       <PartOne />
       <PartTwo />
+
+      <Footer />
     </div>
   );
 }
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..acfe388
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,61 @@
+import React from 'react';
+
+export default function Footer() {
+  const handleScroll = () => {
+    window.scroll({
+      top: 0,
+      left: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  return (
+    <div
+      className="w-full flex flex-col items-center sm:justify-start justify-center"
+      id="footer"
+    >
+      <div className="w-full sm:px-20 px-4 flex justify-end">
+        <button
+          onClick={() => handleScroll()}
+          className="font-avenirbook text-sm underline mb-4 text-gray-900 hover:no-underline focus:no-underline"
+        >
+          Return to top
+        </button>
+      </div>
+
+      <div className="w-full sm:px-20 px-4 flex sm:flex-row flex-col sm:justify-between justify-center sm:items-center bg-gradient-to-r from-pink-500 via-red-500 to-orange-500 sm:h-24">
+        <div className="font-avenirbook text-gray-100 text-sm sm:w-auto w-full sm:my-0 my-2 sm:text-left text-center">
+          &copy; Proximity Worldwide 2018. All Rights Reserved.{' '}
+          <a
+            href="/"
+            className="underline hover:no-underline focus:no-underline"
+          >
+            Privacy Statement
+          </a>
+          .
+        </div>
+
+        <div className="flex items-center h-full sm:w-auto w-full sm:justify-end justify-center sm:mb-0 mb-2">
+          <a
+            href="/"
+            className="w-10 h-10 flex items-center justify-center ri-linkedin-fill rounded-full bg-white text-orange-500 text-xl ml-2"
+          >
+            {' '}
+          </a>
+          <a
+            href="/"
+            className="w-10 h-10 flex items-center justify-center ri-twitter-fill rounded-full bg-white text-orange-500 text-xl ml-2"
+          >
+            {' '}
+          </a>
+          <a
+            href="/"
+            className="w-10 h-10 flex items-center justify-center ri-facebook-fill rounded-full bg-white text-orange-500 text-xl ml-2"
+          >
+            {' '}
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/PartTwo.js b/src/components/PartTwo.js
index a969920..3dcbe91 100644
--- a/src/components/PartTwo.js
+++ b/src/components/PartTwo.js
@@ -5,7 +5,7 @@ import pencil from '../assets/images/pencil.png';
 export default function PartTwo() {
   return (
     <div
-      className="w-full h-screen flex flex-col items-center sm:justify-start justify-center sm:py-16 sm:px-20 p-4"
+      className="w-full h-screen flex flex-col items-center justify-center sm:py-16 sm:px-20 p-4"
       id="part-two"
     >
       <img
diff --git a/tailwind.config.js b/tailwind.config.js
index bad76f0..5d1f0ac 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -148,6 +148,7 @@ module.exports = {
       20: '5rem',
       22: '5.5rem',
       24: '6rem',
+      28: '7rem',
       32: '8rem',
       36: '9rem',
       40: '10rem',