complete footer

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>
   );
 }

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>
+  );
+}

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

tailwind.config.js

@@ -148,6 +148,7 @@ module.exports = {
       20: '5rem',
       22: '5.5rem',
       24: '6rem',
+      28: '7rem',
       32: '8rem',
       36: '9rem',
       40: '10rem',