optimumBA · ngumokenneth · Sep 24, 2023 · Sep 28, 2023 · Sep 30, 2023 · Oct 1, 2023
diff --git a/challenges/images/image-header-desktop.jpg b/challenges/images/image-header-desktop.jpg
diff --git a/challenges/images/image-header-mobile.jpg b/challenges/images/image-header-mobile.jpg
diff --git a/challenges/stats_preview_card_component/index.html b/challenges/stats_preview_card_component/index.html
@@ -27,36 +27,92 @@
     />
     <link rel="manifest" href="../site.webmanifest" />
     <link rel="stylesheet" href="style.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
   </head>
   <body class="m-0">
     <div
-      class="flex h-[100vh] w-full flex-col place-content-center text-center"
+      class="bg-very-dark-blue flex flex-col items-center justify-center lg:h-screen"
     >
-      <div>
-        <a
-          class="text-optimum-blue hover:text-optimum-darkblue"
-          href="https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62"
-          target="_blank"
-          >Frontend Mentor challenge</a
+      <div
+        class="grid w-9/12 grid-cols-1 overflow-hidden rounded-lg bg-white lg:grid-cols-3"
+      >
+        <div
+          class="bg-dark-desaturated-blue col-span-2 flex flex-col items-center text-center text-white lg:items-start lg:text-left"
         >
+          <div class="lg:mx-12 lg:w-8/12">
+            <div class="py-4 px-2">
+              <h1 class="text-2xl font-bold lg:text-3xl">
+                Get <span class="text-soft-violet">insights</span> that help
+                your business grow.
+              </h1>
+              <p class="pt-3 text-sm">
+                Discover the benefits of data analytics and make better
+                decisions regarding revenue, customer experience, and overall
+                efficiency.
+              </p>
+            </div>
+            <div class="flex flex-col py-6 lg:flex-row lg:gap-14">
+              <div class="text-xl font-bold">
+                10k+
+                <span class="block text-xs font-normal uppercase"
+                  >companies</span
+                >
+              </div>
+              <div class="py-4 text-xl font-bold lg:py-0">
+                314<span class="block text-xs font-normal uppercase"
+                  >templates</span
+                >
+              </div>
+              <div class="text-xl font-bold">
+                12m+
+                <span class="block text-xs font-normal uppercase">queries</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="relative order-first lg:order-last">
+          <img
+            src="../images/image-header-mobile.jpg"
+            alt="three ladies at work"
+            class="h-full object-cover lg:hidden xl:hidden"
+          />
+          <img
+            src="../images/image-header-desktop.jpg"
+            alt="three ladies at work"
+            class="hidden h-full object-cover lg:block"
+          />
+          <div class="bg-soft-violet/30 absolute inset-y-0 h-full w-full"></div>
+        </div>
       </div>
-      <div>
-        for
-        <a
-          class="text-optimum-blue hover:text-optimum-darkblue"
-          href="https://github.com/optimumBA"
-          target="_blank"
-          >Optimum BH</a
-        >
-        Internship.
-      </div>
+      <div
+        class="mt-4 flex flex-col place-content-center text-center text-white"
+      >
+        <div>
+          <a
+            class="text-optimum-blue hover:text-optimum-darkblue"
+            href="https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62"
+            target="_blank"
+            >Frontend Mentor challenge</a
+          >
+        </div>
+        <div>
+          for
+          <a
+            class="text-optimum-blue hover:text-optimum-darkblue"
+            href="https://github.com/optimumBA"
+            target="_blank"
+            >Optimum BH</a
+          >
+          Internship.
+        </div>
 
-      <div class="mt-3">
-        <a
-          class="text-optimum-blue hover:text-optimum-darkblue"
-          href="https://github.com/optimumBA/frontend_mentor_challenges/tree/stats_preview_card_component/challenges/stats_preview_card_component"
-          >Source code</a
-        >
+        <div class="mt-3">
+          <a
+            class="text-optimum-blue hover:text-optimum-darkblue"
+            href="https://github.com/ngumokenneth/frontend_mentor_challenges/tree/stats_preview_card_component/challenges/stats_preview_card_component"
+            >Source code</a
+          >
+        </div>
       </div>
     </div>
   </body>

diff --git a/challenges/stats_preview_card_component/tailwind.config.js b/challenges/stats_preview_card_component/tailwind.config.js
@@ -5,6 +5,12 @@ module.exports = {
       colors: {
         'optimum-blue': '#009efc',
         'optimum-darkblue': '#0389e1',
+        'very-dark-blue': 'hsl(233, 47%, 7%)',
+        'soft-violet': 'hsl(277, 64%, 61%)',
+        'dark-desaturated-blue': 'hsl(244, 38%, 16%)',
+        white: 'hsl(0, 0%, 100%)',
+        'slightly-transparent-whites': 'hsla(0, 0%, 100%, 0.75)',
+        'slightly-transparent-white': 'hsla(0, 0%, 100%, 0.6)',
       },
     },
   },

diff --git a/challenges/style.css b/challenges/style.css
@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Outfit:wght@400;700&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;