optimumBA · Deankinyua · Jan 14, 2025 · Jan 14, 2025 · Jan 15, 2025 · Jan 15, 2025
diff --git a/.github/workflows/cicd.yml b/.github/workflows/cicd.yml
@@ -31,7 +31,7 @@ jobs:
           npm run test
 
       - name: Save screenshots
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         if: ${{ always() }}
         with:
           name: screenshots

diff --git a/challenges/stats_preview_card_component/images/image-header-mobile.jpg b/challenges/stats_preview_card_component/images/image-header-mobile.jpg
diff --git a/challenges/stats_preview_card_component/index.html b/challenges/stats_preview_card_component/index.html
@@ -28,35 +28,92 @@
     <link rel="manifest" href="../site.webmanifest" />
     <link rel="stylesheet" href="style.css" />
   </head>
-  <body class="m-0">
-    <div
-      class="flex h-[100vh] w-full flex-col place-content-center text-center"
+  <body class="bg-custom-blue">
+    <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 Optimum BH Internship</div>
+
+    <a
+      class="text-optimum-blue hover:text-optimum-darkblue hidden"
+      href="https://github.com/optimumBA"
+      target="_blank"
     >
-      <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>
+      Optimum BH</a
+    >
+    <div class="mt-3">
+      <a
+        class="text-optimum-blue hover:text-optimum-darkblue"
+        href="https://github.com/Deankinyua/frontend_mentor_challenges/tree/stats_preview_card_component/challenges/stats_preview_card_component"
+        >Source code</a
+      >
+    </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="mobile-width ml-3 flex pb-20 sm:w-11/12 md:pl-20">
+      <div
+        class="bg-desaturated-blue my-10 flex grow flex-col justify-center gap-6 overflow-hidden rounded-xl pb-10 md:flex-row md:justify-between md:gap-0 md:p-0"
+      >
+        <section class="relative flex-none shrink-0 grow md:order-2">
+          <img
+            src="./images/image-header-mobile.jpg"
+            class="object-contain"
+            alt="QR Code Image"
+          />
+          <div class="bg-overlay-violet absolute inset-0 bg-opacity-70"></div>
+        </section>
+        <section
+          class="inter-font flex flex-none flex-col items-center justify-center gap-4 md:order-1 md:w-1/2 md:gap-10 md:pr-16"
         >
+          <div
+            class="center-element flex justify-center sm:w-full sm:px-0 lg:pl-12"
+          >
+            <h3
+              class="text-heading-white custom-font-size px-8 text-center font-extrabold sm:text-4xl md:p-0 md:text-left"
+            >
+              Get <span class="text-custom-violet">insights</span>
+              <span> that help your business grow.</span>
+            </h3>
+          </div>
+
+          <div class="flex flex-none items-center md:w-full lg:pl-12">
+            <p
+              class="text-stats-white limit-character p-3 text-center font-normal sm:p-0 md:max-w-sm md:text-left"
+            >
+              Discover the benefits of data analytics and make better decisions
+              regarding revenue, customer experience, and overall efficiency.
+            </p>
+          </div>
+
+          <div
+            class="text-stats-white lexend-font flex w-full flex-col justify-center gap-10 font-extrabold md:flex-row md:justify-start md:pl-12 md:pt-8"
+          >
+            <div class="flex flex-col items-center gap-2 md:items-start">
+              <p class="text-heading-white inter-font text-3xl md:text-2xl">
+                10k+
+              </p>
+
+              <p>COMPANIES</p>
+            </div>
+            <div class="flex flex-col items-center gap-2 md:items-start">
+              <p class="text-heading-white inter-font text-3xl md:text-2xl">
+                314
+              </p>
+
+              <p>TEMPLATES</p>
+            </div>
+            <div class="flex flex-col items-center gap-2 md:items-start">
+              <p class="text-heading-white inter-font text-3xl md:text-2xl">
+                12M+
+              </p>
+              <p>QUERIES</p>
+            </div>
+          </div>
+        </section>
       </div>
     </div>
   </body>

diff --git a/challenges/stats_preview_card_component/style.css b/challenges/stats_preview_card_component/style.css
@@ -1,3 +1,37 @@
+@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.center-element {
+  margin: 0 auto;
+}
+
+.mobile-width {
+  width: 21.875rem;
+}
+
+.inter-font {
+  font-family: 'Inter', serif;
+  font-optical-sizing: none;
+  font-weight: 700;
+  font-style: normal;
+}
+
+.lexend-font {
+  font-family: 'Lexend Deca', serif;
+  font-optical-sizing: none;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.limit-character {
+  max-width: 30ch;
+}
+
+.custom-font-size {
+  font-size: 1.75rem;
+  line-height: 2rem;
+}
diff --git a/challenges/stats_preview_card_component/tailwind.config.js b/challenges/stats_preview_card_component/tailwind.config.js
@@ -6,6 +6,19 @@ module.exports = {
         'optimum-blue': '#009efc',
         'optimum-darkblue': '#0389e1',
       },
+
+      backgroundColor: {
+        'custom-blue': 'hsl(233, 47%, 7%)',
+        'desaturated-blue': 'hsl(244, 38%, 16%)',
+        'overlay-violet': 'hsl(277, 64%, 30%)',
+      },
+
+      textColor: {
+        'heading-white': 'hsl(0, 0%, 100%)',
+        'paragraph-white': ' hsla(0, 0%, 100%, 0.75)',
+        'stats-white': 'hsla(0, 0%, 100%, 0.6)',
+        'custom-violet': 'hsl(277, 64%, 61%)',
+      },
     },
   },
   plugins: [],