optimumBA · ngumokenneth · Oct 18, 2023 · Oct 21, 2023 · Oct 22, 2023 · Oct 24, 2023
diff --git a/challenges/interactive_pricing_component/images/bg-pattern.svg b/challenges/interactive_pricing_component/images/bg-pattern.svg
diff --git a/challenges/interactive_pricing_component/images/icon-check.svg b/challenges/interactive_pricing_component/images/icon-check.svg
diff --git a/challenges/interactive_pricing_component/images/icon-slider.svg b/challenges/interactive_pricing_component/images/icon-slider.svg
diff --git a/challenges/interactive_pricing_component/images/pattern-circles.svg b/challenges/interactive_pricing_component/images/pattern-circles.svg
diff --git a/challenges/interactive_pricing_component/index.html b/challenges/interactive_pricing_component/index.html
@@ -26,38 +26,214 @@
       href="../images/favicon-16x16.png"
     />
     <link rel="manifest" href="../site.webmanifest" />
+    <script src="//unpkg.com/alpinejs" defer></script>
+    <script src="https://cdn.tailwindcss.com"></script>
     <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"
+      class="font-m font-manrope flex h-[900px] flex-col items-center bg-blue-100"
     >
-      <div>
-        <a
-          class="text-optimum-blue hover:text-optimum-darkblue"
-          href="https://www.frontendmentor.io/challenges/interactive-pricing-component-t0m8PIyY8"
-          target="_blank"
-          >Frontend Mentor challenge</a
-        >
+      <img
+        src="images/bg-pattern.svg"
+        alt="background-pattern"
+        class="h-[350px] lg:hidden"
+      />
+      <img src="images/bg-pattern.svg" alt="" class="hidden lg:block" />
+      <div
+        class="absolute top-20 flex w-full flex-col items-center justify-center"
+      >
+        <div class="absolute flex flex-col items-center justify-center">
+          <h1 class="text-xl font-bold">Simple, traffic-based pricing</h1>
+          <p class="px-5 text-xs">
+            Sign-up for our 30-day trial. No credit card required.
+          </p>
+        </div>
+        <img src="images/pattern-circles.svg" alt="circle patterns" class="" />
       </div>
-      <div>
-        for
-        <a
-          class="text-optimum-blue hover:text-optimum-darkblue"
-          href="https://github.com/optimumBA"
-          target="_blank"
-          >Optimum BH</a
+      <div
+        x-data="app"
+        class="relative -top-24 flex w-11/12 flex-col items-center justify-center rounded-lg bg-white p-4 lg:w-5/12"
+      >
+        <div class="grid w-full grid-cols-1 gap-y-3 lg:grid-cols-2">
+          <div
+            class="order-first mt-6 flex items-center justify-center gap-x-2 lg:justify-start"
+          >
+            <p
+              class="text-dark-desaturated-blue text-base"
+              x-text="getPageViews(getIndex(data)) + ' PAGEVIEWS' "
+            ></p>
+          </div>
+
+          <div
+            class="order-last flex justify-center lg:-order-1 lg:justify-end"
+          >
+            <div class="mt-6 flex items-center font-bold">
+              <h3
+                class="text-dark-desaturated-blue text-3xl"
+                x-text="yearly ? getYearlyPrice : getPrice"
+              ></h3>
+              <span class="text-dark-desaturated-blue text-xs font-normal"
+                >/ month</span
+              >
+            </div>
+          </div>
+
+          <div class="col-span-2 h-2.5">
+            <input
+              x-model="data"
+              id="price-slider"
+              class="w-128 h-3 w-full appearance-none overflow-hidden rounded-lg bg-gray-300"
+              type="range"
+              min="1"
+              max="5"
+            />
+          </div>
+        </div>
+        <div class="my-6 flex items-center text-xs">
+          <div class="text-dark-desaturated-blue flex items-center">
+            <p class="mr-2 text-xs">Monthly Billing</p>
+            <a href="#" id="yearly-billing-toggle">
+              <label class="relative inline-flex cursor-pointer items-center">
+                <input
+                  type="checkbox"
+                  value=""
+                  class="peer sr-only"
+                  x-on:click="yearly = !yearly"
+                />
+                <div
+                  class="peer first-letter: dark:peer-focus:strong-cyan peer-checked:bg-light-grayish-blue h-6 w-11 rounded-full bg-gray-200 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] after:hover:cursor-pointer peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700"
+                ></div>
+                <span
+                  class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"
+                ></span>
+              </label>
+            </a>
+            <div class="my-3 flex">
+              <p class="text-xs">Yearly Billing</p>
+              <p
+                class="bg-light-grayish-red text-light-red mx-3 flex rounded-3xl px-3 text-sm lg:block"
+              >
+                <span class="text-light-red lg:hidden">-</span>25%
+                <span class="text-light-red hidden lg:inline-block"
+                  >discount</span
+                >
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <hr class="h-4 w-full" />
+
+        <div
+          class="flex w-full flex-col items-center text-sm lg:flex-row lg:justify-between"
         >
-        Internship.
+          <div
+            class="text-dark-desaturated-blue flex flex-col items-center lg:items-start"
+          >
+            <div class="flex items-center py-2">
+              <img
+                src="images/icon-check.svg"
+                alt="check icon"
+                class="h-full"
+              />
+              <p class="px-2">Unlimited websites</p>
+            </div>
+            <div class="flex items-center py-2">
+              <img
+                src="images/icon-check.svg"
+                alt="check icon"
+                class="h-full"
+              />
+              <p class="px-2">100% data ownership</p>
+            </div>
+            <div class="flex items-center py-2">
+              <img
+                src="images/icon-check.svg"
+                alt="check icon"
+                class="h-full"
+              />
+              <p class="px-2">Email reports</p>
+            </div>
+          </div>
+          <div class="pt-4">
+            <button
+              class="bg-dark-desaturated-blue rounded-3xl px-8 py-2 text-white"
+            >
+              Start my trial
+            </button>
+          </div>
+        </div>
       </div>
+      <div
+        class="relative bottom-20 flex w-full flex-col place-content-center text-center"
+      >
+        <div>
+          <a
+            class="text-optimum-blue hover:text-optimum-darkblue"
+            href="https://www.frontendmentor.io/challenges/interactive-pricing-component-t0m8PIyY8"
+            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/interactive_pricing_component/challenges/interactive_pricing_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/interactive_pricing_component/challenges/interactive_pricing_component"
+            >Source code</a
+          >
+        </div>
       </div>
     </div>
+
+    <script>
+      document.addEventListener('alpine:init', () => {
+        Alpine.data('app', () => ({
+          data: '3',
+          yearly: false,
+          pageviews: ['10K', '50K', '100K', '500K', '1M'],
+          monthlyPrice: ['$8.00', '$12.00', '$16.00', '$24.00', '$36.00'],
+
+          getIndex(val) {
+            if (val >= 1 && val <= this.pageviews.length) {
+              return val - 1
+            } else {
+              return null
+            }
+          },
+
+          getPageViews(val) {
+            if (val >= 0 && val < this.pageviews.length) {
+              return this.pageviews[val]
+            } else {
+              return null
+            }
+          },
+
+          getPrice() {
+            const index = parseInt(this.data) - 1
+            return this.monthlyPrice[index]
+          },
+
+          getYearlyPrice() {
+            const index = parseInt(this.data) - 1
+            const monthlyPrice = parseFloat(this.monthlyPrice[index].slice(1))
+            const getYearlyPrice = monthlyPrice * 0.75
+            return `$${getYearlyPrice.toFixed(2)}`
+          },
+        }))
+      })
+    </script>
   </body>
 </html>
diff --git a/challenges/interactive_pricing_component/style.css b/challenges/interactive_pricing_component/style.css
@@ -1,3 +1,32 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Kumbh+Sans:wght@400;700&family=Manrope:wght@600;800&family=Outfit:wght@400;700&family=Overpass:wght@300;600&family=Red+Hat+Display:wght@500;700;800&family=Ubuntu:ital,wght@0,700;1,400&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  #price-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    border-radius: 50%;
+    width: 45px;
+    height: 45px;
+    background: #11d8c5;
+    background-image: url(images/icon-slider.svg);
+
+    filter: drop-shadow(3px 20px 24px #11d8c5);
+    background-repeat: no-repeat;
+    background-position: center;
+    cursor: pointer;
+    box-shadow: -405px 0 0 400px #00ffff;
+  }
+  price-slider::-moz-range-thumb {
+    width: 25px;
+    height: 25px;
+    cursor: pointer;
+  }
+
+  #price-slider::-moz-range-thumb:active {
+    background-color: #f6ad55;
+    cursor: grab;
+  }
+}
diff --git a/challenges/interactive_pricing_component/tailwind.config.js b/challenges/interactive_pricing_component/tailwind.config.js
@@ -5,6 +5,20 @@ module.exports = {
       colors: {
         'optimum-blue': '#009efc',
         'optimum-darkblue': '#0389e1',
+        'soft-cyan': 'hsl(174, 77%, 80%)',
+        'strong-cyan': 'hsl(174, 86%, 45%)',
+        'light-grayish-red': 'hsl(14, 92%, 95%)',
+        'light-red': 'hsl(15, 100%, 70%)',
+        'pale-blue': 'hsl(226, 100%, 87%)',
+        'very-pale-blue': 'hsl(230, 100%, 99%)',
+        'light-grayish-blue': 'hsl(224, 65%, 95%)',
+        'light-gray-blue': 'hsl(223, 50%, 87%)',
+        'grayish-blue': 'hsl(225, 20%, 60%)',
+        'dark-desaturated-blue': ' hsl(227, 35%, 25%)',
+        white: 'hsl (0, 0%, 100%)',
+      },
+      fontFamily: {
+        manrope: ['Manrope', 'sans-serif'],
       },
     },
   },