optimumBA · ngumokenneth · Oct 11, 2023 · Oct 11, 2023 · Oct 22, 2023 · Oct 22, 2023
diff --git a/challenges/faq_accordion_card/index.html b/challenges/faq_accordion_card/index.html
@@ -27,36 +27,226 @@
     />
     <link rel="manifest" href="../site.webmanifest" />
     <link rel="stylesheet" href="style.css" />
+    <script
+      defer
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
+    ></script>
   </head>
   <body class="m-0">
     <div
-      class="flex h-[100vh] w-full flex-col place-content-center text-center"
+      class="from-soft-blue to-soft-violet flex h-screen flex-col items-center justify-center bg-gradient-to-t"
     >
-      <div>
-        <a
-          class="text-optimum-blue hover:text-optimum-darkblue"
-          href="https://www.frontendmentor.io/challenges/faq-accordion-card-XlyjD0Oam"
-          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
+      <div
+        class="relative mt-24 flex flex-col items-center rounded-2xl bg-white lg:mt-0 lg:flex-row"
+      >
+        <div class="flex flex-col items-center justify-center overflow-hidden">
+          <img
+            src="/images/illustration-woman-online-mobile.svg"
+            alt="illustration of a woman online"
+            class="absolute -top-24 w-52 lg:hidden"
+          />
+          <img
+            src="/images/bg-pattern-mobile.svg"
+            alt="background pattern"
+            class="lg:hidden"
+          />
+          <img
+            src="/images/illustration-woman-online-desktop.svg"
+            alt="woman online illustration"
+            class="hidden w-64 -translate-x-8 lg:block"
+          />
+          <img
+            src="/images/bg-pattern-desktop.svg"
+            alt="background pattern"
+            class="absolute -top-4 -left-24 hidden w-80 lg:block"
+          />
+          <img
+            src="/images/illustration-box-desktop.svg"
+            alt="box image"
+            class="absolute -left-12 bottom-24 hidden w-28 lg:block"
+          />
+        </div>
+
+        <div
+          class="flex flex-col items-center justify-start px-3 py-4 lg:mx-16 lg:items-start"
         >
-        Internship.
+          <h1 class="text-2xl font-bold">FAQ</h1>
+
+          <div class="flex w-72 flex-col text-xs">
+            <div
+              x-data="{open: true}"
+              @click="open = open"
+              class="flex flex-col py-2"
+            >
+              <div
+                class="hover:text-soft-red relative flex w-full items-center bg-white"
+              >
+                <a href="#" :class="{  'font-semibold' : open=open}"
+                  >How many team members can I invite?</a
+                >
+                <img
+                  src="/images/icon-arrow-down.svg"
+                  alt="down arrow icon"
+                  :class="{'rotate-180': open = open}"
+                  class="absolute right-0 flex"
+                />
+              </div>
+              <p
+                x-cloak
+                x-show="open"
+                @click.outside="open = false"
+                class="py-2 pr-8"
+              >
+                You can invite up to 2 additional users on the Free plan. There
+                is no limit on team members for the Premium plan.
+              </p>
+            </div>
+            <hr />
+            <div
+              x-data="{open: false}"
+              @click="open = !open"
+              class="flex flex-col py-3"
+            >
+              <div
+                class="hover:text-soft-red relative flex w-full items-center bg-white"
+              >
+                <a href="#" :class="{  'font-bold' : open=open}"
+                  >What is the maximum file upload size?</a
+                >
+                <img
+                  src="/images/icon-arrow-down.svg"
+                  alt="down arrow icon"
+                  :class="{'rotate-180': open = open}"
+                  class="absolute right-0 flex"
+                />
+              </div>
+              <p
+                x-cloak
+                x-show="open"
+                @click.outside="open = false"
+                class="py-2 pr-8"
+              >
+                No more than 2GB. All files in your account must fit your
+                allotted storage space.
+              </p>
+            </div>
+            <hr />
+            <div
+              x-data="{open: false}"
+              @click="open = !open"
+              class="flex flex-col py-3"
+            >
+              <div
+                class="hover:text-soft-red relative flex w-full items-center bg-white"
+              >
+                <a href="#" :class="{  'font-bold' : open=open}"
+                  >How do I reset my password?</a
+                >
+                <img
+                  src="/images/icon-arrow-down.svg"
+                  alt="down arrow icon"
+                  :class="{'rotate-180': open = open}"
+                  class="absolute right-0 flex"
+                />
+              </div>
+              <p
+                x-cloak
+                x-show="open"
+                @click.outside="open = false"
+                class="py-2 pr-8"
+              >
+                Click “Forgot password” from the login page or “Change password”
+                from your profile page. A reset link will be emailed to you.
+              </p>
+            </div>
+            <hr />
+            <div
+              x-data="{open: false}"
+              @click="open = !open"
+              class="flex flex-col py-3"
+            >
+              <div
+                class="hover:text-soft-red relative flex w-full items-center bg-white"
+              >
+                <a href="#" :class="{  'font-bold' : open=open}"
+                  >Can I cancel my subscription?</a
+                >
+                <img
+                  src="/images/icon-arrow-down.svg"
+                  alt="down arrow icon"
+                  :class="{'rotate-180': open = open}"
+                  class="absolute right-0 flex"
+                />
+              </div>
+              <p
+                x-cloak
+                x-show="open"
+                @click.outside="open = false"
+                class="py-2 pr-8"
+              >
+                Yes! Send us a message and we’ll process your request no
+                questions asked.
+              </p>
+            </div>
+            <hr />
+            <div
+              x-data="{open: false}"
+              @click="open = !open"
+              class="flex flex-col py-3"
+            >
+              <div
+                class="hover:text-soft-red relative flex w-full items-center bg-white"
+              >
+                <a href="#" :class="{  'font-bold' : open=open}"
+                  >Do you provide additional support?</a
+                >
+                <img
+                  src="/images/icon-arrow-down.svg"
+                  alt="down arrow icon"
+                  :class="{'rotate-180': open = open}"
+                  class="absolute right-0 flex"
+                />
+              </div>
+              <p
+                x-cloak
+                x-show="open"
+                @click.outside="open = false"
+                class="py-2 pr-8"
+              >
+                Chat and email support is available 24/7. Phone lines are open
+                during normal business hours.
+              </p>
+            </div>
+          </div>
+        </div>
       </div>
+      <div class="mt-3 flex flex-col place-content-center text-center">
+        <div>
+          <a
+            class="text-optimum-blue hover:text-optimum-darkblue"
+            href="https://www.frontendmentor.io/challenges/faq-accordion-card-XlyjD0Oam"
+            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/faq_accordion_card/challenges/faq_accordion_card"
-          >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/faq_accordion_card/challenges/faq_accordion_card"
+            >Source code</a
+          >
+        </div>
       </div>
     </div>
   </body>

diff --git a/challenges/faq_accordion_card/style.css b/challenges/faq_accordion_card/style.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+[x-cloak] {
+  display: none !important;
+}
diff --git a/challenges/faq_accordion_card/tailwind.config.js b/challenges/faq_accordion_card/tailwind.config.js
@@ -5,6 +5,13 @@ module.exports = {
       colors: {
         'optimum-blue': '#009efc',
         'optimum-darkblue': '#0389e1',
+        'very-dark-desaturated-blue': 'hsl(238, 29%, 16%)',
+        'soft-red': 'hsl(14, 88%, 65%)',
+        'soft-violet': 'hsl(273, 75%, 66%)',
+        'soft-blue': 'hsl(240, 73%, 65%)',
+        'very-dark-grayish-blue': 'hsl(237, 12%, 33%)',
+        'dark-grayish-blue': 'hsl(240, 6%, 50%)',
+        'light-grayish-blue': 'hsl(240, 5%, 91%)',
       },
     },
   },

diff --git a/challenges/images/bg-pattern-desktop.svg b/challenges/images/bg-pattern-desktop.svg
diff --git a/challenges/images/bg-pattern-mobile.svg b/challenges/images/bg-pattern-mobile.svg
diff --git a/challenges/images/icon-arrow-down.svg b/challenges/images/icon-arrow-down.svg
diff --git a/challenges/images/illustration-box-desktop.svg b/challenges/images/illustration-box-desktop.svg