Merge branch 'master' of repo.kinesis.games:root/proximity-demo

.gitignore

@@ -23,3 +23,4 @@ yarn-debug.log*
 yarn-error.log*
 
 public/styles.css
+package-lock.json

.gitlab-ci.yml

@@ -14,4 +14,4 @@ deploy:
     - chmod 644 ~/.ssh/known_hosts
     - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'
   script:
-    - ssh ubuntu@kinesis.games "cd /var/www/proximity-demo/ && sudo bash buildScript.sh"
+    - ssh edgeking810@kinesis.games "cd /var/www/proximity-demo/ && sudo bash buildScript.sh"

buildScript.sh

@@ -4,4 +4,4 @@ git pull origin master
 npm i
 npm run-script build
 chown -R root:www-data .
-systemctl reload apache2
+systemctl reload nginx

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "@edgeking810/create-react-app",
+  "name": "proximitydemo",
   "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,

src/App.js

@@ -13,15 +13,27 @@ export default function App() {
   const [showCookies, setShowCookies] = useState(true);
 
   const { width } = useWindowSize();
+  //   console.log(width);
+
+  const scrollToElement = (e, id) => {
+    e.preventDefault();
+
+    window.scroll({
+      top: document.getElementById(id).getBoundingClientRect().top,
+      left: 0,
+      behavior: 'smooth',
+    });
+  };
 
   return (
     <div className="w-full overflow-x-hidden">
-      {width > 660 ? (
+      {width > 1000 ? (
         <HeaderD
           currentLanguage={currentLanguage}
           setCurrentLanguage={setCurrentLanguage}
           showCookies={showCookies}
           setShowCookies={setShowCookies}
+          scrollToElement={scrollToElement}
         />
       ) : (
         <HeaderM
@@ -29,6 +41,7 @@ export default function App() {
           setCurrentLanguage={setCurrentLanguage}
           showCookies={showCookies}
           setShowCookies={setShowCookies}
+          scrollToElement={scrollToElement}
         />
       )}
 

src/components/Footer.js

@@ -14,28 +14,17 @@ export default function Footer() {
       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">
+      <div className="w-full sm:px-20 px-4 flex sm:justify-end justify-center">
         <button
           onClick={() => handleScroll()}
-          className="font-avenirbook text-sm underline mb-4 text-gray-900 hover:no-underline focus:no-underline"
+          className="font-avenirbook text-sm mb-4 text-gray-900 hover:text-red-400 focus:text-red-400"
         >
-          Return to top
+          &#x2191; 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="w-full sm:px-20 px-4 flex sm:flex-row-reverse 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">
+        <div className="flex items-center h-full sm:w-auto w-full sm:justify-end justify-center sm:my-0 my-4">
-          &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"
@@ -55,6 +44,17 @@ export default function Footer() {
             {' '}
           </a>
         </div>
+
+        <div className="font-avenirbook text-gray-100 text-sm sm:w-auto w-full sm:text-left text-center sm:mb-0 mb-4">
+          &copy; Proximity Worldwide 2018. All Rights Reserved.{' '}
+          <a
+            href="/"
+            className="underline hover:no-underline focus:no-underline"
+          >
+            Privacy Statement
+          </a>
+          .
+        </div>
       </div>
     </div>
   );

src/components/HeaderD.js

@@ -8,9 +8,10 @@ export default function HeaderD({
   setCurrentLanguage,
   showCookies,
   setShowCookies,
+  scrollToElement,
 }) {
   const headerLinkClasses =
-    'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg';
+    'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg mx-4';
 
   const cookies = (
     <div className="w-full h-20 bg-indigo-1000 flex items-center justify-center z-10 fixed bottom-0">
@@ -44,7 +45,7 @@ export default function HeaderD({
           className="h-full object-scale-down"
         />
 
-        <div className="w-2/5 h-full flex items-center justify-between">
+        <div className="h-full flex items-center justify-end">
           <a className={headerLinkClasses} href="/">
             About
           </a>
@@ -93,8 +94,11 @@ export default function HeaderD({
       <div className="absolute z-10 w-full h-full flex flex-col items-center justify-end">
         <a
           href="#part-one"
-          className="w-12 h-12 flex justify-center items-center text-4xl text-gray-200 ri-arrow-down-fill rounded-full border hover:border-white border-transparent mb-22"
+          onClick={(e) => scrollToElement(e, 'part-one')}
-        />
+          className="animate-bounce w-12 h-12 flex justify-center items-center text-4xl text-gray-200 ri-arrow-down-fill rounded-full border hover:border-white border-transparent mb-22"
+        >
+          {' '}
+        </a>
       </div>
 
       {showCookies && cookies}

src/components/HeaderM.js

@@ -3,32 +3,39 @@ import React, { useState } from 'react';
 import proximity_logo from '../assets/images/proximity_logo.svg';
 import backgroundVideo from '../assets/videos/video.mp4';
 
+import '../styles/sidebar.css';
+
 export default function HeaderD({
   currentLanguage,
   setCurrentLanguage,
   showCookies,
   setShowCookies,
+  scrollToElement,
 }) {
   const [showSidebar, setShowSidebar] = useState(false);
 
   const headerLinkClasses =
-    'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg w-full bg-gray-900 my-1 py-2 text-center opacity-75 rounded';
+    'text-gray-900 font-avenirbook font-normal hover:underline focus:underline text-xl w-full my-1 py-2 text-center';
 
   const sidebar = (
-    <div className="z-30 w-5/6 h-full flex flex-col justify-start bg-gray-700 bg-opacity-75 pt-20 px-2 fixed">
+    <div
-      <a className={headerLinkClasses} href="/">
+      className={`z-20 w-full h-full flex flex-col justify-center bg-gray-100 bg-opacity-95 fixed ${
+        showSidebar ? 'sidebar-left-nav closed' : 'sidebar-left-nav'
+      }`}
+    >
+      <a className={headerLinkClasses} href="/about">
         About
       </a>
-      <a className={headerLinkClasses} href="/">
+      <a className={headerLinkClasses} href="/work">
         Work
       </a>
-      <a className={headerLinkClasses} href="/">
+      <a className={headerLinkClasses} href="/latest">
         Latest
       </a>
-      <a className={headerLinkClasses} href="/">
+      <a className={headerLinkClasses} href="/people-and-careers">
         People & Careers
       </a>
-      <a className={headerLinkClasses} href="/">
+      <a className={headerLinkClasses} href="/contact">
         Contact
       </a>
     </div>
@@ -60,12 +67,12 @@ export default function HeaderD({
   );
 
   return (
-    <div className="h-screen w-full">
+    <div className="h-80 w-full">
-      <div className="absolute z-20 h-12 w-full flex items-center justify-between mt-4 px-4">
+      <div className="absolute h-12 w-full flex items-center justify-between mt-4 px-4">
         <img
           src={proximity_logo}
           alt="Proximity Logo"
-          className="h-full object-scale-down"
+          className="h-full object-scale-down z-20"
         />
 
         <div className="w-2/5 h-full flex items-center justify-end">
@@ -85,7 +92,7 @@ export default function HeaderD({
             Contact
           </a> */}
 
-          <div className="border h-10 px-2 flex justify-between items-center">
+          <div className="border h-10 px-2 flex justify-between items-center z-20">
             <button
               className={`uppercase font-avenirbook text-lg text-gray-200 mr-1 ${
                 currentLanguage === 'en' ? 'font-bold' : ''
@@ -107,34 +114,37 @@ export default function HeaderD({
           <button
             className={`ml-4 w-10 h-10 flex justify-center items-center ri-${
               showSidebar ? 'close' : 'menu'
-            }-fill bg-${
+            }-fill text-gray-${
-              showSidebar ? 'red' : 'blue'
+              showSidebar ? '900' : '100'
-            }-500 opacity-75 text-lg font-bold text-gray-100 rounded-sm`}
+            } opacity-75 text-3xl font-bold rounded-sm z-40`}
             onClick={() => setShowSidebar((current) => !current)}
           />
         </div>
       </div>
 
-      <div className="absolute z-10 w-full h-full flex items-center justify-center">
+      <div className="absolute z-10 w-full h-80 flex items-center justify-center">
-        <p className="w-5/6 font-avenirblack text-center text-4xl font-bold text-gray-200">
+        <p className="w-5/6 font-avenirblack text-center text-3xl font-bold text-gray-200">
           We make people
           <br />
           more valuable to brands
         </p>
       </div>
 
-      <div className="absolute z-10 w-full h-full flex flex-col items-center justify-end">
+      <div className="absolute z-10 w-full h-108 flex flex-col items-center justify-end">
         <a
           href="#part-one"
-          className="w-12 h-12 flex justify-center items-center text-4xl text-gray-200 ri-arrow-down-fill rounded-full border hover:border-white border-transparent mb-32"
+          onClick={(e) => scrollToElement(e, 'part-one')}
-        />
+          className="animate-bounce w-12 h-12 flex justify-center items-center text-4xl text-gray-200 ri-arrow-down-fill rounded-full border hover:border-white border-transparent mb-32"
+        >
+          {' '}
+        </a>
       </div>
 
       {showCookies && cookies}
-      {showSidebar && sidebar}
+      {sidebar}
 
       <video
-        className="h-full w-full bg-gray-900 z-0 object-cover absolute"
+        className="h-80 w-full bg-gray-900 z-0 object-cover absolute"
         autoPlay
         loop
         muted

src/components/PartOne.js

@@ -5,14 +5,14 @@ import part1banner from '../assets/images/part-1-banner.png';
 export default function PartOne() {
   return (
     <div
-      className="w-full h-screen flex flex-col items-center sm:justify-start justify-center sm:py-12 sm:px-20 p-4"
+      className="w-full sm:h-screen flex flex-col items-center sm:justify-start justify-center sm:py-12 sm:px-20 p-4 sm:my-0 my-8"
       id="part-one"
     >
-      <div className="text-red-600 uppercase text-sm font-bold font-avenirblack">
+      <div className="text-red-600 uppercase text-sm font-bold font-avenirblack tracking-wide">
         How we do it
       </div>
 
-      <div className="text-gray-900 sm:text-2xl text-lg font-avenirbook text-center mb-4">
+      <div className="text-gray-900 sm:text-2xl text-xl font-avenirbook text-center mb-4">
         We use data-driven creativity
         <br />
         to solve business problems

src/components/PartTwo.js

@@ -1,20 +1,16 @@
 import React from 'react';
 
-import pencil from '../assets/images/pencil.png';
+import pencil from '../assets/images/pencil.gif';
 
 export default function PartTwo() {
   return (
     <div
-      className="w-full h-screen flex flex-col items-center justify-center sm:py-16 sm:px-20 p-4"
+      className="w-full sm:h-screen flex flex-col items-center justify-center sm:py-16 sm:px-20 p-4 my-8"
       id="part-two"
     >
-      <img
+      <img src={pencil} alt="pencil" className="object-cover sm:h-32 h-20" />
-        src={pencil}
-        alt="pencil"
-        className="object-cover sm:h-8 h-4 sm:mb-8 mb-4"
-      />
 
-      <div className="text-red-600 uppercase text-sm font-bold font-avenirblack sm:mb-8 mb-4">
+      <div className="text-red-600 uppercase text-sm font-bold font-avenirblack sm:mb-8 mb-4 tracking-wide sm:w-auto w-1/2 sm:text-left text-center">
         Business Problems we've solved
       </div>
 

src/styles/sidebar.css

@@ -0,0 +1,13 @@
+.sidebar-left-nav {
+  -webkit-transform: translate3d(-100%, 0px, 0px);
+  transform: translate3d(-100%, 0px, 0px);
+  visibility: visible;
+  transition: all 0.5s ease 0s;
+  -webkit-transition: all 0.5s ease 0s;
+}
+
+.closed {
+  -webkit-transform: translate3d(0px, 0px, 0px);
+  transform: translate3d(0px, 0px, 0px);
+  visibility: visible;
+}

tailwind.config.js

@@ -439,6 +439,10 @@ module.exports = {
       25: '0.25',
       50: '0.5',
       75: '0.75',
+      80: '0.80',
+      85: '0.85',
+      90: '0.90',
+      95: '0.95',
       100: '1',
     },
     order: {