complete part two

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

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{' '}

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

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',