From cdb91530298d9cd4153b9143956f0963eea96a36 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Wed, 30 Aug 2023 18:47:54 +0100
Subject: [PATCH] Change in grid item design

---
 src/components/GridItem.astro                 |   6 +-
 src/data/question-groups/backend/backend.json |  12 ++
 .../question-groups/backend/what-is-server.md |   1 +
 src/icons/bulb.svg                            |   3 +
 src/icons/check-current.svg                   |   3 +
 src/icons/reset.svg                           |   4 +-
 src/icons/skip.svg                            |   3 +
 src/pages/questions/[questionGroupId].astro   | 115 ++++++++++++++++++
 src/pages/questions/index.astro               |  49 ++++++++
 9 files changed, 190 insertions(+), 6 deletions(-)
 create mode 100644 src/data/question-groups/backend/backend.json
 create mode 100644 src/data/question-groups/backend/what-is-server.md
 create mode 100644 src/icons/bulb.svg
 create mode 100644 src/icons/check-current.svg
 create mode 100644 src/icons/skip.svg
 create mode 100644 src/pages/questions/[questionGroupId].astro
 create mode 100644 src/pages/questions/index.astro

diff --git a/src/components/GridItem.astro b/src/components/GridItem.astro
index a77678918..40208e458 100644
--- a/src/components/GridItem.astro
+++ b/src/components/GridItem.astro
@@ -13,16 +13,14 @@ const { url, title, description, isNew } = Astro.props;
 
 <a
   href={url}
-  class='relative group hover:bg-gray-50 flex h-full flex-col rounded-md border border-gray-200 bg-white p-2.5 hover:border-gray-400/50 sm:rounded-lg sm:p-5'
+  class='relative flex h-full flex-col rounded-md border border-gray-200 bg-white p-2.5 hover:border-gray-400 sm:rounded-lg sm:p-5'
 >
   <span
     class='font-semibold text-md mb-0 text-gray-900 hover:text-black sm:mb-1.5 sm:text-xl'
   >
     {title}
   </span>
-  <span class='hidden text-sm leading-normal text-gray-400 sm:block group-hover:text-gray-500'
-    >{description}</span
-  >
+  <span class='hidden text-sm leading-normal text-gray-400 sm:block' set:html={description} />
 
   {
     isNew && (
diff --git a/src/data/question-groups/backend/backend.json b/src/data/question-groups/backend/backend.json
new file mode 100644
index 000000000..f01657e10
--- /dev/null
+++ b/src/data/question-groups/backend/backend.json
@@ -0,0 +1,12 @@
+[
+  {
+    "id": "what-is-server",
+    "question": "What is a Server",
+    "answer": {
+      "heading": "",
+      "answer": "",
+      "list": [],
+      "file": "what-is-server.md"
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/data/question-groups/backend/what-is-server.md b/src/data/question-groups/backend/what-is-server.md
new file mode 100644
index 000000000..b955ad1a7
--- /dev/null
+++ b/src/data/question-groups/backend/what-is-server.md
@@ -0,0 +1 @@
+## What is Server
\ No newline at end of file
diff --git a/src/icons/bulb.svg b/src/icons/bulb.svg
new file mode 100644
index 000000000..7ec25565b
--- /dev/null
+++ b/src/icons/bulb.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-3">
+    <path d="M13 20.5833H8.66667C8.36767 20.5833 8.125 20.826 8.125 21.125C8.125 21.424 8.36767 21.6667 8.66667 21.6667H13C13.299 21.6667 13.5417 21.424 13.5417 21.125C13.5417 20.826 13.299 20.5833 13 20.5833ZM13 22.75H8.66667C8.36767 22.75 8.125 22.9927 8.125 23.2917C8.125 23.5907 8.36767 23.8333 8.66667 23.8333H13C13.299 23.8333 13.5417 23.5907 13.5417 23.2917C13.5417 22.9927 13.299 22.75 13 22.75ZM13.2708 24.9167H8.39583L9.68283 25.7638C9.84967 25.9133 10.0945 26 10.3491 26H11.3187C11.5722 26 11.8181 25.9133 11.9849 25.7638L13.2708 24.9167ZM17.3333 9.96775C17.3333 13.8342 13.8515 16.4493 13.8515 19.5H7.81517C7.81517 16.4493 4.33333 13.8342 4.33333 9.96775C4.33333 5.9345 7.58117 3.71475 10.8301 3.71475C14.0812 3.71475 17.3333 5.93667 17.3333 9.96775ZM21.6667 9.21917V10.7055H18.9172C18.9388 10.4639 18.9583 10.2202 18.9583 9.96775C18.9583 9.711 18.9399 9.46508 18.9204 9.22025H21.6667V9.21917ZM10.1313 2.12008V0H11.6166V2.12767C11.3544 2.10383 11.0922 2.08975 10.8301 2.08975C10.5972 2.08975 10.3642 2.10058 10.1313 2.12008ZM6.07642 3.52192L4.94975 1.42025L6.25842 0.71825L7.38183 2.81233C6.929 3.00842 6.49133 3.24675 6.07642 3.52192ZM17.5446 5.4015L19.6484 3.89133L20.514 5.09925L18.2888 6.695C18.0819 6.22917 17.8306 5.79908 17.5446 5.4015ZM14.2837 2.81342L15.4082 0.71825L16.7169 1.42025L15.5892 3.523C15.1753 3.24783 14.7377 3.01058 14.2837 2.81342ZM3.37675 6.695L1.15158 5.10033L2.01717 3.89242L4.121 5.4015C3.835 5.798 3.58475 6.22808 3.37675 6.695ZM18.226 13.4366L20.7762 14.4701L20.2193 15.847L17.5922 14.7832C17.8197 14.3531 18.0342 13.9035 18.226 13.4366ZM4.02567 14.6878L1.47333 15.8362L0.8645 14.4809L3.3995 13.3413C3.58692 13.8103 3.80142 14.2567 4.02567 14.6878ZM2.7495 10.7055H0V9.21917H2.74625C2.72675 9.464 2.70833 9.711 2.70833 9.96775C2.70833 10.2202 2.72783 10.4639 2.7495 10.7055Z" fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/src/icons/check-current.svg b/src/icons/check-current.svg
new file mode 100644
index 000000000..99ec2920b
--- /dev/null
+++ b/src/icons/check-current.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5.5 9.99933L14 1.49933L12.5 0L5.5 6.99933L1.5 2.99687L0 4.49933L5.5 9.99933Z" fill="currentColor"/>
+</svg>
diff --git a/src/icons/reset.svg b/src/icons/reset.svg
index 635625b28..6e54a3d4b 100644
--- a/src/icons/reset.svg
+++ b/src/icons/reset.svg
@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10.3193 4.93528C11.5957 4.63203 12.9306 4.68137 14.1811 5.07803C15.4317 5.47469 16.551 6.20375 17.4193 7.18728C17.639 7.43552 17.9483 7.58631 18.2793 7.60647C18.6102 7.62663 18.9355 7.51451 19.1838 7.29478C19.432 7.07505 19.5828 6.7657 19.603 6.43479C19.6231 6.10389 19.511 5.77852 19.2913 5.53028C18.1237 4.20738 16.6187 3.22659 14.9369 2.69273C13.2552 2.15887 11.46 2.092 9.74327 2.49928C8.00102 2.9367 6.404 3.82349 5.11164 5.07111C3.81927 6.31873 2.87678 7.88352 2.37827 9.60928C2.36179 9.66642 2.32541 9.71578 2.27571 9.74843C2.226 9.78108 2.16625 9.79486 2.10727 9.78728L1.07427 9.65728C0.982658 9.64551 0.889587 9.65981 0.805742 9.69855C0.721897 9.73729 0.650678 9.79889 0.600266 9.87628C0.548506 9.95352 0.519307 10.0437 0.515951 10.1366C0.512595 10.2295 0.535213 10.3215 0.581266 10.4023L3.05727 14.7443C3.09587 14.8118 3.14969 14.8693 3.21444 14.9124C3.27919 14.9554 3.35309 14.9828 3.43027 14.9923C3.45091 14.9938 3.47163 14.9938 3.49227 14.9923C3.55924 14.9923 3.62552 14.9788 3.68719 14.9527C3.74886 14.9266 3.80466 14.8884 3.85127 14.8403L7.32827 11.2473C7.39298 11.1803 7.43773 11.0967 7.45745 11.0057C7.47718 10.9147 7.47111 10.82 7.43993 10.7323C7.40875 10.6445 7.35369 10.5673 7.28096 10.5091C7.20823 10.451 7.12071 10.4144 7.02827 10.4033L5.15027 10.1713C5.11341 10.1661 5.07817 10.1527 5.04714 10.1322C5.01611 10.1116 4.99006 10.0844 4.97089 10.0525C4.95173 10.0205 4.93993 9.98475 4.93636 9.9477C4.93279 9.91065 4.93754 9.87326 4.95027 9.83828C5.37211 8.64203 6.08295 7.56852 7.01961 6.71315C7.95627 5.85779 9.08973 5.24707 10.3193 4.93528Z" fill="white"/>
-  <path d="M23.4056 14.1003C23.4568 14.0226 23.4853 13.9323 23.4879 13.8394C23.4905 13.7465 23.4672 13.6547 23.4206 13.5743L20.9206 9.24526C20.8815 9.17807 20.8272 9.12095 20.7621 9.07841C20.697 9.03588 20.6229 9.00912 20.5456 9.00026C20.4685 8.99013 20.3901 8.99854 20.3168 9.02481C20.2436 9.05107 20.1777 9.09442 20.1246 9.15126L16.6686 12.7653C16.6045 12.8323 16.5602 12.9158 16.5408 13.0065C16.5214 13.0972 16.5277 13.1915 16.5588 13.2788C16.5899 13.3662 16.6447 13.4432 16.7171 13.5012C16.7895 13.5592 16.8766 13.5959 16.9686 13.6073L18.8166 13.8283C18.854 13.8327 18.8898 13.8455 18.9215 13.8658C18.9532 13.886 18.9799 13.9132 18.9996 13.9453C19.0192 13.9773 19.0315 14.0133 19.0355 14.0507C19.0394 14.088 19.0351 14.1258 19.0226 14.1613C18.6013 15.3575 17.8906 16.4309 16.9538 17.2859C16.017 18.1408 14.8833 18.7507 13.6536 19.0613C12.3771 19.3639 11.0423 19.3142 9.79178 18.9174C8.54129 18.5206 7.42206 17.7916 6.55361 16.8083C6.44613 16.681 6.31431 16.5765 6.16589 16.5009C6.01746 16.4253 5.85543 16.3802 5.68931 16.3681C5.52318 16.356 5.35632 16.3773 5.19852 16.4306C5.04072 16.4839 4.89517 16.5682 4.77042 16.6786C4.64566 16.7889 4.54422 16.9231 4.47205 17.0732C4.39989 17.2233 4.35845 17.3864 4.35018 17.5527C4.3419 17.7191 4.36696 17.8854 4.42388 18.0419C4.48079 18.1985 4.56842 18.3421 4.68161 18.4643C5.84954 19.7869 7.35483 20.7674 9.03668 21.3011C10.7185 21.8347 12.5138 21.9015 14.2306 21.4943C15.9751 21.0573 17.5742 20.1696 18.8675 18.9199C20.1608 17.6703 21.103 16.1027 21.5996 14.3743C21.6162 14.3173 21.6524 14.2681 21.7019 14.2354C21.7513 14.2026 21.8107 14.1884 21.8696 14.1953L22.9276 14.3223C22.9476 14.3237 22.9676 14.3237 22.9876 14.3223C23.0702 14.3227 23.1516 14.3026 23.2245 14.2638C23.2975 14.2251 23.3597 14.1689 23.4056 14.1003Z" fill="white"/>
+  <path d="M10.3193 4.93528C11.5957 4.63203 12.9306 4.68137 14.1811 5.07803C15.4317 5.47469 16.551 6.20375 17.4193 7.18728C17.639 7.43552 17.9483 7.58631 18.2793 7.60647C18.6102 7.62663 18.9355 7.51451 19.1838 7.29478C19.432 7.07505 19.5828 6.7657 19.603 6.43479C19.6231 6.10389 19.511 5.77852 19.2913 5.53028C18.1237 4.20738 16.6187 3.22659 14.9369 2.69273C13.2552 2.15887 11.46 2.092 9.74327 2.49928C8.00102 2.9367 6.404 3.82349 5.11164 5.07111C3.81927 6.31873 2.87678 7.88352 2.37827 9.60928C2.36179 9.66642 2.32541 9.71578 2.27571 9.74843C2.226 9.78108 2.16625 9.79486 2.10727 9.78728L1.07427 9.65728C0.982658 9.64551 0.889587 9.65981 0.805742 9.69855C0.721897 9.73729 0.650678 9.79889 0.600266 9.87628C0.548506 9.95352 0.519307 10.0437 0.515951 10.1366C0.512595 10.2295 0.535213 10.3215 0.581266 10.4023L3.05727 14.7443C3.09587 14.8118 3.14969 14.8693 3.21444 14.9124C3.27919 14.9554 3.35309 14.9828 3.43027 14.9923C3.45091 14.9938 3.47163 14.9938 3.49227 14.9923C3.55924 14.9923 3.62552 14.9788 3.68719 14.9527C3.74886 14.9266 3.80466 14.8884 3.85127 14.8403L7.32827 11.2473C7.39298 11.1803 7.43773 11.0967 7.45745 11.0057C7.47718 10.9147 7.47111 10.82 7.43993 10.7323C7.40875 10.6445 7.35369 10.5673 7.28096 10.5091C7.20823 10.451 7.12071 10.4144 7.02827 10.4033L5.15027 10.1713C5.11341 10.1661 5.07817 10.1527 5.04714 10.1322C5.01611 10.1116 4.99006 10.0844 4.97089 10.0525C4.95173 10.0205 4.93993 9.98475 4.93636 9.9477C4.93279 9.91065 4.93754 9.87326 4.95027 9.83828C5.37211 8.64203 6.08295 7.56852 7.01961 6.71315C7.95627 5.85779 9.08973 5.24707 10.3193 4.93528Z" fill="currentColor"/>
+  <path d="M23.4056 14.1003C23.4568 14.0226 23.4853 13.9323 23.4879 13.8394C23.4905 13.7465 23.4672 13.6547 23.4206 13.5743L20.9206 9.24526C20.8815 9.17807 20.8272 9.12095 20.7621 9.07841C20.697 9.03588 20.6229 9.00912 20.5456 9.00026C20.4685 8.99013 20.3901 8.99854 20.3168 9.02481C20.2436 9.05107 20.1777 9.09442 20.1246 9.15126L16.6686 12.7653C16.6045 12.8323 16.5602 12.9158 16.5408 13.0065C16.5214 13.0972 16.5277 13.1915 16.5588 13.2788C16.5899 13.3662 16.6447 13.4432 16.7171 13.5012C16.7895 13.5592 16.8766 13.5959 16.9686 13.6073L18.8166 13.8283C18.854 13.8327 18.8898 13.8455 18.9215 13.8658C18.9532 13.886 18.9799 13.9132 18.9996 13.9453C19.0192 13.9773 19.0315 14.0133 19.0355 14.0507C19.0394 14.088 19.0351 14.1258 19.0226 14.1613C18.6013 15.3575 17.8906 16.4309 16.9538 17.2859C16.017 18.1408 14.8833 18.7507 13.6536 19.0613C12.3771 19.3639 11.0423 19.3142 9.79178 18.9174C8.54129 18.5206 7.42206 17.7916 6.55361 16.8083C6.44613 16.681 6.31431 16.5765 6.16589 16.5009C6.01746 16.4253 5.85543 16.3802 5.68931 16.3681C5.52318 16.356 5.35632 16.3773 5.19852 16.4306C5.04072 16.4839 4.89517 16.5682 4.77042 16.6786C4.64566 16.7889 4.54422 16.9231 4.47205 17.0732C4.39989 17.2233 4.35845 17.3864 4.35018 17.5527C4.3419 17.7191 4.36696 17.8854 4.42388 18.0419C4.48079 18.1985 4.56842 18.3421 4.68161 18.4643C5.84954 19.7869 7.35483 20.7674 9.03668 21.3011C10.7185 21.8347 12.5138 21.9015 14.2306 21.4943C15.9751 21.0573 17.5742 20.1696 18.8675 18.9199C20.1608 17.6703 21.103 16.1027 21.5996 14.3743C21.6162 14.3173 21.6524 14.2681 21.7019 14.2354C21.7513 14.2026 21.8107 14.1884 21.8696 14.1953L22.9276 14.3223C22.9476 14.3237 22.9676 14.3237 22.9876 14.3223C23.0702 14.3227 23.1516 14.3026 23.2245 14.2638C23.2975 14.2251 23.3597 14.1689 23.4056 14.1003Z" fill="currentColor"/>
 </svg>
diff --git a/src/icons/skip.svg b/src/icons/skip.svg
new file mode 100644
index 000000000..433cc1804
--- /dev/null
+++ b/src/icons/skip.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="19" viewBox="0 0 26 19" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 mr-2">
+    <path d="M12.48 0.639663C8.49598 0.639663 5.86381 2.42203 4.27883 4.19333C2.69385 5.96464 2.10641 7.75716 2.10641 7.75716C2.08193 7.82275 2.07095 7.8926 2.07413 7.96254C2.0773 8.03247 2.09456 8.10104 2.12487 8.16415C2.15518 8.22725 2.19792 8.28358 2.25053 8.32977C2.30314 8.37596 2.36453 8.41105 2.43102 8.43294C2.49751 8.45483 2.56774 8.46307 2.6375 8.45717C2.70726 8.45126 2.7751 8.43134 2.83697 8.39858C2.89884 8.36583 2.95346 8.32092 2.99756 8.26655C3.04165 8.21218 3.07432 8.14946 3.09359 8.08216C3.09359 8.08216 3.61428 6.49468 5.05375 4.88599C6.49322 3.2773 8.80182 1.67966 12.48 1.67966C15.7445 1.67966 18.1902 2.90378 19.9042 4.29185C21.3143 5.43384 22.1991 6.69232 22.5926 7.39966H19.76C19.6911 7.39869 19.6227 7.41142 19.5587 7.43711C19.4948 7.46281 19.4366 7.50096 19.3875 7.54934C19.3385 7.59772 19.2995 7.65538 19.2729 7.71895C19.2463 7.78252 19.2326 7.85075 19.2326 7.91966C19.2326 7.98858 19.2463 8.0568 19.2729 8.12038C19.2995 8.18395 19.3385 8.2416 19.3875 8.28999C19.4366 8.33837 19.4948 8.37652 19.5587 8.40221C19.6227 8.42791 19.6911 8.44064 19.76 8.43966H24.44V3.75966C24.441 3.69009 24.4279 3.62104 24.4017 3.55659C24.3755 3.49214 24.3366 3.43361 24.2874 3.38446C24.2381 3.3353 24.1795 3.29653 24.115 3.27044C24.0505 3.24435 23.9814 3.23147 23.9119 3.23255C23.7741 3.23471 23.6429 3.29142 23.5469 3.39024C23.451 3.48906 23.3981 3.62192 23.4 3.75966V6.68466C22.889 5.8157 21.9615 4.62003 20.5593 3.48443C18.7062 1.98372 16.0245 0.65003 12.5166 0.640678C12.5044 0.639911 12.4922 0.639572 12.48 0.639663ZM0 11.5597V18.8397H7.28V11.5597H0ZM9.36 11.5597V12.0797V18.8397H16.64V11.5597H9.36ZM18.72 11.5597V18.8397H26V11.5597H18.72ZM10.4 12.5997H15.6V17.7997H10.4V12.5997Z" fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/src/pages/questions/[questionGroupId].astro b/src/pages/questions/[questionGroupId].astro
new file mode 100644
index 000000000..ff2fcd9f6
--- /dev/null
+++ b/src/pages/questions/[questionGroupId].astro
@@ -0,0 +1,115 @@
+---
+import GridItem from '../../components/GridItem.astro';
+import SimplePageHeader from '../../components/SimplePageHeader.astro';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import Footer from '../../components/Footer.astro';
+import AstroIcon from "../../components/AstroIcon.astro";
+
+export async function getStaticPaths() {
+  return [
+    {
+      params: { quizId: 'frontend' },
+      props: {},
+    },
+  ];
+}
+---
+
+<BaseLayout
+  title='Questions'
+  description={'Step by step guides and paths to learn different tools or technologies'}
+  permalink={'/roadmaps'}
+  noIndex={true}
+>
+  <div class='flex bg-gray-50 pb-14 pt-4 sm:pb-16 sm:pt-8'>
+    <div class='container max-w-[700px]'>
+      <div class='mb-5 mt-2 text-center sm:mb-10 sm:mt-8'>
+        <h1
+          class='my-2 text-3xl font-bold sm:my-5 sm:text-5xl'
+        >
+          Frontend Questions
+        </h1>
+        <p class='text-gray-500 text-xl'>
+          Test, rate and improve your frontend knowledge with these questions.
+        </p>
+      </div>
+
+      <div class='gap-3 text-center mb-40'>
+        <!-- Progress bar -->
+        <div class='mb-5 rounded-lg border border-gray-300 p-6 bg-white'>
+          <div class='mb-3 flex items-center text-gray-600'>
+            <div class='relative w-full flex-1 rounded-xl bg-gray-200 p-1'>
+              <div
+                class='absolute bottom-0 left-0 top-0 w-[30%] rounded-xl bg-slate-800'
+              >
+              </div>
+            </div>
+            <span class='ml-3 text-sm'>5 / 100</span>
+          </div>
+
+          <div
+            class='relative -left-1 flex flex-col gap-2 text-sm text-black sm:flex-row sm:gap-3'
+          >
+            <span class='flex items-center'>
+              <AstroIcon icon='check-current' class='h-3 text-gray-800 mr-1.5' />
+              <span>Already knew</span>
+              <span class='ml-2 text-gray-400'>44 <span class='sm:inline hidden'>Questions</span></span
+              >
+            </span>
+
+            <span class='flex items-center'>
+              <AstroIcon icon='question' class='h-4 mr-1.5' />
+              Didn't Know
+              <span class='ml-2 text-gray-500'
+                >20 <span class='sm:inline hidden'>Questions</span></span
+              >
+            </span>
+
+            <button class='flex items-center text-red-500 hover:text-red-400'>
+              <AstroIcon icon='reset' class='h-3 sm:h-4 text-red-400' />
+              <span class='ml-0.5 sm:ml-1'>Restart Progress</span>
+            </button>
+          </div>
+        </div>
+
+        <div class='relative mb-4 h-[400px] w-full overflow-hidden rounded-2xl'>
+          <div
+            class='flex h-full w-full items-center justify-center bg-gray-800'
+          >
+            <p class='animate-pulse text-2xl text-white duration-200'>
+              Please wait ..
+            </p>
+          </div>
+        </div>
+
+        <div class='flex flex-col gap-3 sm:flex-row'>
+          <button
+            data-next-question='know'
+            class='flex flex-1 items-center rounded-xl bg-gray-800 p-3 text-gray-400 transition-colors hover:bg-gray-700 hover:text-gray-200'
+          >
+            <AstroIcon icon='check' class='mr-1 h-4' />
+            Already Know that
+          </button>
+          <button
+            data-next-question='dont-know'
+            class='flex flex-1 items-center rounded-xl bg-gray-800 p-3 text-gray-400 transition-colors hover:bg-gray-700 hover:text-gray-200'
+          >
+            <AstroIcon icon='bulb' class='mr-2 h-5' />
+            Didn't Know that
+          </button>
+          <button
+            data-next-question='skip'
+            class='flex flex-1 items-center rounded-xl border border-red-500 p-3 text-red-400 hover:bg-red-500 hover:text-gray-900'
+          >
+            <AstroIcon icon='skip' class='mr-2 h-4' />
+            Skip Question
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div slot='page-footer'>
+    <Footer />
+  </div>
+</BaseLayout>
diff --git a/src/pages/questions/index.astro b/src/pages/questions/index.astro
new file mode 100644
index 000000000..04a4f24be
--- /dev/null
+++ b/src/pages/questions/index.astro
@@ -0,0 +1,49 @@
+---
+import GridItem from '../../components/GridItem.astro';
+import SimplePageHeader from '../../components/SimplePageHeader.astro';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+---
+
+<BaseLayout
+  title='Questions'
+  description={'Step by step guides and paths to learn different tools or technologies'}
+  permalink={'/roadmaps'}
+  noIndex={true}
+>
+  <SimplePageHeader
+    title='Questions'
+    description='Quizzes to help you test and improve your knowledge and skill up'
+    showYouTubeAlert={false}
+  />
+
+  <div class='flex bg-gray-100 pb-14 pt-4 sm:pb-16 sm:pt-8'>
+    <div class='container'>
+      <div class='grid grid-cols-1 gap-1 sm:grid-cols-2 sm:gap-3'>
+        <GridItem
+          url={`/questions/frontend`}
+          isNew={false}
+          title={'Frontend Development'}
+          description={'25 Questions &middot; 5 topics'}
+        />
+        <GridItem
+          url={`/questions/backend`}
+          isNew={false}
+          title={'Backend Development'}
+          description={'25 Questions &middot; 5 topics'}
+        />
+        <GridItem
+          url={`/questions/devops`}
+          isNew={false}
+          title={'DevOps Engineering'}
+          description={'25 Questions &middot; 5 topics'}
+        />
+        <GridItem
+          url={`/questions/javascript`}
+          isNew={false}
+          title={'JavaScript'}
+          description={'25 Questions &middot; 5 topics'}
+        />
+      </div>
+    </div>
+  </div>
+</BaseLayout>