From 056129eab82c96bb39c7aea576f6ab293cbfde76 Mon Sep 17 00:00:00 2001
From: Kishan Takoordyal <kishan@kinesis.games>
Date: Thu, 4 Mar 2021 19:08:14 +0400
Subject: [PATCH] complete part two

---
 src/App.js                   |   2 ++
 src/assets/images/pencil.png | Bin 0 -> 3915 bytes
 src/components/PartOne.js    |   2 +-
 src/components/PartTwo.js    |  63 +++++++++++++++++++++++++++++++++++
 tailwind.config.js           |   3 ++
 5 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/images/pencil.png
 create mode 100644 src/components/PartTwo.js

diff --git a/src/App.js b/src/App.js
index 178f3bf..09b80b2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,7 @@ import useWindowSize from './useWindowSize';
 import HeaderD from './components/HeaderD';
 import HeaderM from './components/HeaderM';
 import PartOne from './components/PartOne';
+import PartTwo from './components/PartTwo';
 
 export default function App() {
   const [currentLanguage, setCurrentLanguage] = useState('en');
@@ -31,6 +32,7 @@ export default function App() {
       )}
 
       <PartOne />
+      <PartTwo />
     </div>
   );
 }
diff --git a/src/assets/images/pencil.png b/src/assets/images/pencil.png
new file mode 100644
index 0000000000000000000000000000000000000000..ad9c5061b8c60402d0ece07192b35113f8bd7e9d
GIT binary patch
literal 3915
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
Z@PG1-4CjBh#iIZK002ovPDHLkV1f<{r6K?T

literal 0
HcmV?d00001

diff --git a/src/components/PartOne.js b/src/components/PartOne.js
index 37bf11c..cd19ffa 100644
--- a/src/components/PartOne.js
+++ b/src/components/PartOne.js
@@ -24,7 +24,7 @@ export default function PartOne() {
         className="w-full object-cover sm:h-5/6"
       />
 
-      <div className="bg-white sm:-my-48 sm:w-4/5 w-full sm:pt-12 sm:px-36 sm:text-2xl text-base font-avenirbook text-center mt-4">
+      <div className="bg-white sm:-mt-48 sm:w-4/5 w-full sm:pt-12 sm:px-36 sm:text-2xl text-base font-avenirbook text-center mt-4">
         By harnessing powerful insights and smart targeting, we’re able to
         create behavior-changing ideas and experiences that deliver value to
         brands. Supported by our proprietary{' '}
diff --git a/src/components/PartTwo.js b/src/components/PartTwo.js
new file mode 100644
index 0000000..a969920
--- /dev/null
+++ b/src/components/PartTwo.js
@@ -0,0 +1,63 @@
+import React from 'react';
+
+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"
+      id="part-two"
+    >
+      <img
+        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">
+        Business Problems we've solved
+      </div>
+
+      <div className="w-full sm:h-1/3 flex sm:flex-row flex-col items-center sm:justify-between">
+        <div className="bg-gray-144 flex flex-col justify-end items-start sm:w-two-row w-full p-8 sm:h-full h-60 sm:mb-0 mb-4">
+          <div className="font-avenirbook text-lg sm:w-1/3 w-3/4 text-gray-200 sm:mb-4 mb-2">
+            Can a love story double as a hearing test?
+          </div>
+
+          <a
+            href="/"
+            className="font-avenirbook text-sm w-1/2 underline text-gray-100 hover:no-underline focus:no-underline"
+          >
+            Find out here
+          </a>
+        </div>
+
+        <div className="bg-gray-144 flex flex-col justify-end items-start sm:w-two-row w-full p-8 sm:h-full h-60 sm:mb-0 mb-4">
+          <div className="font-avenirbook text-lg sm:w-1/3 w-3/4 text-gray-200 sm:mb-4 mb-2">
+            How close to an AFL player can you get?
+          </div>
+
+          <a
+            href="/"
+            className="font-avenirbook text-sm w-1/2 underline text-gray-100 hover:no-underline focus:no-underline"
+          >
+            Find out here
+          </a>
+        </div>
+      </div>
+
+      <a
+        href="/"
+        className="font-avenirbook text-sm underline sm:mt-20 mt-4 text-gray-900 hover:no-underline focus:no-underline"
+      >
+        View our work
+      </a>
+
+      {/* <img
+        src={part1banner}
+        alt="part-1-banner"
+        className="w-full object-cover sm:h-5/6"
+      /> */}
+    </div>
+  );
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 0b5230e..bad76f0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,6 +20,7 @@ module.exports = {
 
       gray: {
         100: '#f7fafc',
+        144: '#909090',
         200: '#edf2f7',
         300: '#e2e8f0',
         400: '#cbd5e0',
@@ -353,6 +354,7 @@ module.exports = {
       '11/12': '91.666667%',
       full: '100%',
       screen: '100vh',
+      'two-row': '49%',
     }),
     inset: {
       0: '0',
@@ -503,6 +505,7 @@ module.exports = {
       '11/12': '91.666667%',
       full: '100%',
       screen: '100vw',
+      'two-row': '49%',
     }),
     zIndex: {
       auto: 'auto',